Lesson 101 23 aug13-1430-ay

18,170 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
18,170
On SlideShare
0
From Embeds
0
Number of Embeds
16,287
Actions
Shares
0
Downloads
167
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Lesson 101 23 aug13-1430-ay

  1. 1. Unit 1: Web Fundamentals Lesson 1: Introduction to HTML August 19, 2013
  2. 2. Agenda Course overview Our lesson for today Review What’s next? 2
  3. 3. Agenda Course overview Our lesson for today Review What’s next? 3
  4. 4. 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. 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: 5 HTML as the structure/skeleton CSS as the presentation/clothing jQuery/Javascript as the action/movement
  6. 6. Let’s look at an example (I) 6 HTML is used to write text
  7. 7. Let’s look at an example (II) 7 HTML is used to write text CSS is used to choose the font and color
  8. 8. Let’s look at an example (III) 8 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. 9. The course is split into three units total 9 Unit 1: HTML and CSS Unit 2: jQuery Unit 3: Javascript
  10. 10. Each unit contains lessons that either build understanding or develop skills 10 Unit 1: HTML and CSS Lesson 1 Lesson 2 Lesson 3 Lesson 11 ... Lesson 4 Lesson 12 ...Build understanding Develop skills
  11. 11. Each 2-hour lesson has the same structure 11 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 OnlineOffline
  12. 12. Agenda Course overview Our lesson for today Review What’s next? 12
  13. 13. Lesson 1: Introduction to HTML 13 Introduction to HTML Learning to Use HTML HTML and Email Pictures, Vid eo, 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. 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‟ 14 Right click here Then click here
  15. 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… 15 This is HTML!
  16. 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 16 Double-click here
  17. 17. You’re now the editor of the Guardian! (IV) 5. Let‟s type in “The Daily Prophet” instead. Now press enter 17 Now it says “The Daily Prophet”
  18. 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… 18 Pretty cool, huh?
  19. 19. You’re now the editor of the Guardian! (VI) 7. Click the reload button near the top of your browser 19 Click!
  20. 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… 20 Back to before
  21. 21. To see why our changes weren’t saved, we need to understand how the internet works 21 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. 22. How does the internet work? (II) 22 2. The router then tells a company (the Internet Service Provider, or ISP) to help pull up the website Router ISP
  23. 23. How does the internet work? (III) 23 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. 24. How does the internet work? (IV) 24 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. 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 25
  26. 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 26
  27. 27. Agenda Course overview Our lesson for today Review What’s next? 27
  28. 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 28 HTML as the structure/skeleton CSS as the presentation/clothing jQuery/Javascript as the action/movement
  29. 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 29
  30. 30. Agenda Course overview Our lesson for today Review What’s next? 30
  31. 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 1. Take the follow-up quiz to test your understanding 31

×