Lesson 101 23 aug13-1430-ay
-
Upload
codecademy-ren -
Category
Technology
-
view
17.459 -
download
1
Transcript of 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