Lesson 2
Creating Web Pages
Presented by:
Julian Quirke Web Development Educator
Diploma in Web Development – Part I
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
Today’s Lesson
Text Editor
HTML Fundamentals
CSS Fundamentals
Useful Resources
Summary
Q & A
For your benefit…
• Do not try to download software during the lesson
• Do not try to code along with me during the lesson
Warning
Let’s Begin
Software – Text Editor
Text Editor
Software – Text Editor
Text Editoris a computer program that lets a user
enter, change and store text
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
Let’s get started!
Software – Text Editor
HTML
Hyper-Text Mark-up Language
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
HTML
What kind of information goes into the head of a HTML document?
Question Time!
Back to Notepad++
HTML
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
CSS
Cascading Style Sheets
CSS
Cascading Style Sheetsdescribe how HTML elements are to be
displayed on screen
CSS
How does someone refer to a HTML element with an id of “example” in CSS?
Question Time!
Back to Notepad++
CSS
CSS
How does someone refer to a HTML element with an id of “example” in CSS?
“#example”
Useful Resources
Useful Resources
Useful Resources
Web Page Templates
• w3.org• Current standards for the
World Wide Web
• stackoverflow.com• “Go to” website for any
developer and programmer with a question!
Useful Resources
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!
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
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
Top Related