Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website Structure kids CS

385 views

Published on

The very basics of the structure of websites.

We go over HTML, tags, web browsers, developers tools, Webmaker, etc. We also do 3 exercises from Erase All Kittens website.

I made a LEGO web page on poster board. Each HTML tag was velcroed behind the images to show how the site is structured.

I made this is Google Slides. If you would like a copy of this let me know. The slides have teacher notes that help as you go through the slides.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Website Structure kids CS

  1. 1. Basic Website Structure
  2. 2. What is something fun you did this summer?
  3. 3. KP
  4. 4. Use 2 Super Powers ● X-Ray Vision ● Being Bossy
  5. 5. Structure of Websites
  6. 6. Computer programming is like writing rules for a computer to follow, similar to bossing around a younger sibling.
  7. 7. Computer History
  8. 8. Websites ● A website is a bunch of web pages that work together. ● Each web page includes instructions for how each page should look.
  9. 9. HTML
  10. 10. Tags
  11. 11. Learning This Stuff We learn a few words at a time and then use them in a specific way.
  12. 12. Take to the skies for aerial firefighting adventures with the awesome 2-in-1 LEGO® Technic Fire Plane! This impressive model is packed with authentic details and features, including a detailed 2-cylinder engine, joystick-controlled elevators and ailerons and large pontoons.
  13. 13. What is HTML?
  14. 14. HyperText Creates links between web pages.
  15. 15. Markup With Tags
  16. 16. <p>
  17. 17. <body>
  18. 18. <h1>
  19. 19. <nav>
  20. 20. <li>
  21. 21. <div>
  22. 22. Browsers ● They are like cars but different models. ● But just like different models of cars, they offer different options
  23. 23. Markup with HTML Tags HTML tags surround, or “mark up,” your content so browsers knows what each piece of text means and how to represent it.
  24. 24. Why Tags? Top 3 highest box-office movies These 3 movies account for more than 6 billion dollars total. Avatar Titanic The Avengers
  25. 25. Browser Result Top 3 highest box-office movies These 3 movies account for more than 6 billion dollars total. Avatar Titanic The Avengers Uhhh, can you say Run On Sentence!!!
  26. 26. Why Tags? <h1>Top 3 highest box- office movies</h1> <p>These 3 movies account for more than 6 billion dollars total.</p> <ol> <li>Avatar</li> <li>Titanic</li> <li>The Avengers</li> </ol> Top 3 highest box-office movies These 3 movies account for more than 6 billion dollars total. 1. Avatar 2. Titanic 3. The Avengers
  27. 27. Take to the skies for aerial firefighting adventures with the awesome 2-in-1 LEGO® Technic Fire Plane! This impressive model is packed with authentic details and features, including a detailed 2-cylinder engine, joystick-controlled elevators and ailerons and large pontoons.
  28. 28. Webmaker
  29. 29. Developer Tools Who is really the President of the United States? Let’s ask Wikipedia. *Go to Developer Tools and change name to a student's name.*
  30. 30. Erase All Kittens
  31. 31. Teacher Resources
  32. 32. Tags Print off these tags on cardstock and tape to the poster board then add the images from the site in the correspondent areas.
  33. 33. LEGO Website Print off the following slides, cut, laminate and put together the website on a white sturdy board. Behind the visual pieces is the tag that is velcroed there to show the tag that gives structure to the site.
  34. 34. Take to the skies for aerial firefighting adventures with the awesome 2-in-1 LEGO® Technic Fire Plane! This impressive model is packed with authentic details and features, including a detailed 2- cylinder engine, joystick- controlled elevators and ailerons and large pontoons.
  35. 35. Fire Plane Rescue Set Limited Edition Title above paragraph
  36. 36. the skies for aerial ing adventures with some 2-in-1 LEGO® Fire Plane! This ve model is packed hentic details and including a detailed 2-

×