Website Structure kids CS
•
0 likes•461 views
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.
More Related Content
Similar to Website Structure kids CS
Similar to Website Structure kids CS (20)
More from Holly Akers
More from Holly Akers (11)
Recently uploaded
Recently uploaded (20)
Website Structure kids CS
- 2. What is something fun you did this summer?
- 3. KP
- 4. Use 2 Super Powers ● X-Ray Vision ● Being Bossy
- 6. Computer programming is like writing rules for a computer to follow, similar to bossing around a younger sibling.
- 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. HTML
- 10. Tags
- 11. Learning This Stuff We learn a few words at a time and then use them in a specific way.
- 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. What is HTML?
- 14. HyperText Creates links between web pages.
- 15. Markup With Tags
- 17. <p>
- 18. <body>
- 19. <h1>
- 20. <nav>
- 21. <li>
- 22. <div>
- 23. Browsers ● They are like cars but different models. ● But just like different models of cars, they offer different options
- 24. 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.
- 25. Why Tags? Top 3 highest box-office movies These 3 movies account for more than 6 billion dollars total. Avatar Titanic The Avengers
- 26. 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!!!
- 27. 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
- 28. 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.
- 29. Webmaker
- 30. 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.*
- 34. Tags Print off these tags on cardstock and tape to the poster board then add the images from the site in the correspondent areas.
- 37. 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.
- 38. 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.
- 41. Fire Plane Rescue Set Limited Edition Title above paragraph
- 43. 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-
Editor's Notes
- Kid PResident talks about super heros.
- Ask if they think being bossy is a super power! Tell them it is when you are bossy a computer around!
- Our focus today is on HTML and Tags
- Tell then we will be going over this site today and see its structure as a web page.
- Each one has their own link- no one has to share!
- Ask if they have ever written a paper and gotten it back looking like this. HTML marksup just like this but less sloppy.
- Tags. Brackets. Open close. From this point just ask the kids to shout out what they think all the following tags could mean on a web pag. Just go over them, but don’t go into much details describing. Like just ask what it would hold!
- holds content, what most of the web page is about
- During the EAK exercise, be aure to point out that H1 - H6 are not about size, but about importance/hierarchy
- An example: Recipes/Ingredient
- Stands for division. A way to group things together. It’s like a container HTML elements/tag
- They allow us to read the web pages. It reads the HTML in order to form the structure of the web page.
- You have to be bossy and tell the browser how to structure the website - with HTML tags
- Point out how there is not a 1, 2, 3 on the left side. The browsers read the ol/li and knows that is what you want!
- Bring out the Poster Board and have one kid at a time detach each image to reveal the tag(s) behind them.
- Click on Webmaker to open the site and then activate it. THen hover over each element on the page to reveal the corresponding tag.
- Go to Wikipedia. Type the President of the United States. Inspect Element. Find the President's name and replace with a kid in the class room. This way they can see the source code and know they can make a fun, temporary change to the site.
- Let’s go to wikepedia! Developer tool just like the webmaker allow you to hack things out and mess around and make changes to the site before make
- It has 3 exercises in the demo version