Lesson 101 23 aug13-1430-ay

Unit 1: Web FundamentalsLesson 1: Introduction to HTML

August 19, 2013

2

Agenda

Course overview

Our lesson for today

Review

What’s next?

3

Agenda

Course overview

Our lesson for today

Review

What’s next?

Our goal – to change the way we use technology

• Most of us already use technology through websites and mobile phones

• We’ll start with a foundation of how all of this works, then begin to program ourselves

• Let’s learn to produce with technology, not just consume it!

4

Computer monkey Computing wizard

5

We will be learning HTML, CSS, jQuery, and Javascript

• Together, these form the building blocks for most websites

• If a website were a person, you could think of:

HTML as the structure/skeleton

CSS as the presentation/clothing

jQuery/Javascript as the action/movement

6

Let’s look at an example (I)

HTML is used to write text

7

Let’s look at an example (II)

HTML is used to write text

CSS is used to choose the font and color

8

Let’s look at an example (III)

HTML is used to write text

jQuery and Javascript allow a calendar to appear when clicked

CSS is used to choose the font and color

9

The course is split into three units total

Unit 1:

HTML and CSS

Unit 2:

jQuery

Unit 3:

Javascript

10

Each unit contains lessons that either build understanding or develop skills

Unit 1:HTML and CSS

Lesson 1 Lesson 2

Lesson 3

Lesson 11

. . .

Lesson 4

Lesson 12

. . .

Build understanding Develop skills

11

Each 2-hour lesson has the same structure

Activity Purpose Time

Teacher instruction Provide context for what we will be learning 20 min

Codecademy course Learn and apply your knowledge 60 min

Practice set Practice the material on your own 30 min

Quiz Test your understanding 10 min

After finishing all lessons in a unit, everyone gets to work on a fun project of their own

Onl

ine

Offl

ine

12

Agenda

Course overview

Our lesson for today

Review

What’s next?

13

Lesson 1: Introduction to HTML

Introduction to HTML

Learning to Use HTML

HTML and Email

Pictures, Video, and

Media

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4

Lesson 8 Lesson 7 Lesson 6 Lesson 5

Lesson 9 Lesson 10 Lesson 11 Lesson 12

Build understanding Develop skills

14

You’re now the editor of the Guardian! (I)

1. Open up your Chrome web browser and navigate to www.theguardian.com/uk

2. Right click on the first news headline and click ‘Inspect Element’

Right click here

Then click here

15

You’re now the editor of the Guardian! (II)

3. You should now see a box pop up on the lower part of the screen. The multi-colored text you see here is HTML – the language used behind-the-scenes to build what you see on the Guardian. Now let’s see if we can edit the Guardian ourselves…

This is HTML!

16

You’re now the editor of the Guardian! (III)

4. Scroll down a couple lines in this lower area until you see the text of the news headline. Double-click on this text

Double-click here

17

You’re now the editor of the Guardian! (IV)

5. Let’s type in “The Daily Prophet” instead. Now press enter

Now it says “The Daily Prophet”

18

You’re now the editor of the Guardian! (V)

6. You’ll see that the headline changed! And no, this isn’t magic – any Muggle can revise any website. You just need to understand HTML. Now let’s see what happens when we reload the page…

Pretty cool, huh?

19

You’re now the editor of the Guardian! (VI)

7. Click the reload button near the top of your browser

Click!

20

You’re now the editor of the Guardian! (VII)

8. The headline changed back! I guess it’s not so easy to start your own online newspaper…

Back to before

21

To see why our changes weren’t saved, we need to understand how the internet works

1. When Andy Murray opens his Chrome browser and navigates to a website, his request is sent to a router, a box that helps him connect to the internet

I want to watch cat

videos!

Router

22

How does the internet work? (II)

2. The router then tells a company (the Internet Service Provider, or ISP) to help pull up the website

Router

ISP

23

How does the internet work? (III)

3. The ISP uses a dictionary (called a Domain Name System, or DNS) to look up which computer is holding all the Youtube files

Router

ISP

Facebook server

Amazon server

Youtube server

DNS

24

How does the internet work? (IV)

4. Once the correct computer is found, this specialized computer (known as a server) sends Andy the files so he can open the website

HAHAHA

Router

ISP

Facebook server

Amazon server

Youtube server

DNS

25

So back to our question: why didn’t our changes get saved? (I)

• We changed the headline of the Guardian on our computer only. This is known as a local change

• When we reloaded the page, our computer asked the Guardian’s servers to send us its files for the page we requested

26

So back to our question: why didn’t our changes get saved? (II)

• We changed the headline of the Guardian on our computer only. This is known as a local change

• When we reloaded the page, our computer asked the Guardian’s servers to send us its files for the page we requested

• Since we only made a local change, we receive the same files as before and end up seeing the original website

• In order for everyone to be able to see our changes, we must change the files directly on the servers

27

Agenda

Course overview

Our lesson for today

Review

What’s next?

28

Summary (I)

• HTML is very important because it’s used in all websites

• Along with CSS and jQuery/Javascript, HTML is one of the building blocks of the internet

HTML as the structure/skeleton

CSS as the presentation/clothing

jQuery/Javascript as the action/movement

29

HAHAHA

Router

ISP

Facebook server

Amazon server

Youtube server

DNS

Summary (II)

• When we navigate to a website, our request is transmitted to a server which sends us the files to load the page

• Any local changes we make can be seen on our computer only

30

Agenda

Course overview

Our lesson for today

Review

What’s next?

31

What to do on your own

1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learned

3. Take the follow-up quiz to test your understanding