Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1...
Transcript of Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1...
![Page 1: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/1.jpg)
Lesson 2
Creating Web Pages
Presented by:
Julian Quirke Web Development Educator
Diploma in Web Development – Part I
![Page 2: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/2.jpg)
Lesson 1 Recap
Course Overview
Member Area & Community
Course Engagement
What is Web Development?
Components of a Web Application
Introduction to HTML & CSS
Summary
Q & A
![Page 3: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/3.jpg)
Today’s Lesson
Text Editor
HTML Fundamentals
CSS Fundamentals
Useful Resources
Summary
Q & A
![Page 4: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/4.jpg)
For your benefit…
• Do not try to download software during the lesson
• Do not try to code along with me during the lesson
Warning
![Page 5: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/5.jpg)
Let’s Begin
![Page 6: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/6.jpg)
Software – Text Editor
Text Editor
![Page 7: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/7.jpg)
Software – Text Editor
Text Editoris a computer program that lets a user
enter, change and store text
![Page 8: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/8.jpg)
What do you need to create web pages?
• A text editor!
• I will be using Notepad++• www.notepad-plus-plus.org
• If you are using Mac or Linux, use SublimeText• www.sublimetext.com
Software – Text Editor
![Page 9: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/9.jpg)
Let’s get started!
Software – Text Editor
![Page 10: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/10.jpg)
HTML
Hyper-Text Mark-up Language
![Page 11: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/11.jpg)
HTML
Hyper-Text Mark-up Languageis the set of mark-up symbols inserted
into a file that is intended for display on a World Wide Web browser page
![Page 12: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/12.jpg)
HTML
What kind of information goes into the head of a HTML document?
Question Time!
![Page 13: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/13.jpg)
Back to Notepad++
HTML
![Page 14: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/14.jpg)
HTML
What kind of information goes into the headof a HTML document?
The head of a HTML document contains metadata about the document. This includes:• The title <title>• link to an external stylesheet
![Page 15: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/15.jpg)
CSS
Cascading Style Sheets
![Page 16: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/16.jpg)
CSS
Cascading Style Sheetsdescribe how HTML elements are to be
displayed on screen
![Page 17: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/17.jpg)
CSS
How does someone refer to a HTML element with an id of “example” in CSS?
Question Time!
![Page 18: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/18.jpg)
Back to Notepad++
CSS
![Page 19: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/19.jpg)
CSS
How does someone refer to a HTML element with an id of “example” in CSS?
“#example”
![Page 20: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/20.jpg)
Useful Resources
Useful Resources
![Page 21: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/21.jpg)
Useful Resources
Web Page Templates
![Page 22: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/22.jpg)
• w3.org• Current standards for the
World Wide Web
• stackoverflow.com• “Go to” website for any
developer and programmer with a question!
Useful Resources
![Page 23: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/23.jpg)
Summary
HTML
CSS
HTML Text Editor
Useful Resources
Now we have a basis upon which to start
developing
Attend all of the lessons live to ask
Questions in real time and benefit the most
We’re here to help, so contact us anytime!
![Page 24: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/24.jpg)
Next Lesson
• The next session is “Javascript Fundamentals”
• How to integrate Javascript into your HTML file
• Interacting with HTML elements
• Introducing Variables
• Introducing Functions
• Attend all of the lessons LIVE and your knowledge will grow
• Shaw Academy Lifetime Membership Prize during Lesson 6
• Recordings are available within 24 hours
Go to www.shawacademy.com and then the Top Right Corner – Members Area
![Page 25: Diploma in Web Development Part I - Amazon S3 · Diploma in Web Development –Part I. Lesson 1 Recap Course Overview Member Area & Community Course Engagement What is Web Development?](https://reader033.fdocuments.in/reader033/viewer/2022053003/5f07549f7e708231d41c7398/html5/thumbnails/25.jpg)
Q&A
• Creating functionality on the front-end
• Creating variables, interacting with HTML
elements, and integrating your code
• Foundation for JQuery and AngularJS (Part II)
Next Lesson is
www.facebook.com/shawacademy
www.twitter.com/shawacademywww.twitter.com/shawwebdev
www.shawacademy.com
Javascript Fundamentals
See local numbers on website