Website Structure kids CS
•
0 recomendaciones•461 vistas
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.
Recomendados
Más contenido relacionado
Similar a Website Structure kids CS
Similar a Website Structure kids CS (20)
Más de Holly Akers
Más de Holly Akers (11)
Último
Último (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-
Notas del editor
- 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