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

support@shawacademy.com

www.facebook.com/shawacademy

www.twitter.com/shawacademywww.twitter.com/shawwebdev

www.shawacademy.com

Javascript Fundamentals

See local numbers on website