Website Structure Games Class #2
•
1 like•322 views
We review the HTML tags from the last class. We stack HTML boxes as a game and play another HTML game, HTML corners. These games are from Mozilla. We also use Webmaker Xray Goggles to hack the news on a website.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Website Structure Games Class #2
Similar to Website Structure Games Class #2 (20)
More from Holly Akers
Recently uploaded
Recently uploaded (20)
Website Structure Games Class #2
- 3. What did we learn in the last class?
- 4. What did we learn about websites in November?
- 6. HyperText Creates links between web pages.
- 7. Tags markup a web page
- 8. 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>Star Wars 7</li> <li>Avatar</li> <li>The Avengers</li> </ol> Top 3 highest box-office movies These 3 movies account for more than 6 billion dollars total. 1. Star Wars 7 2. Avatar 3. The Avengers
- 9. Browser Chrome, Safari, Internet Explorer, etc ● Connects to websites to get web pages & then shows them to you. ● They allow us to read the web pages. It reads the HTML in order to form the structure of the web page.
- 10. <title> </title> The webpage’s title is usually shown in the tab next to the icon
- 11. Title Tag
- 12. <head> </head> Title tag goes in here. And other optional tags.
- 13. <style> </style> Adds styles such as color to text & changes the look of other tags. Put in head tag.
- 17. Hack the News ● Open your Browser ● Type: google.com ● Type: webmaker xray goggles
- 19. tweentribune.com
- 23. HTML Basic Tags <html> </html> Structure of web pages using tags. HyperText Markup Language ● Links between web pages ● Tags “mark up,” content so browsers know what each piece of text means & how to represent it. <title> </title> The webpage’s title is usually shown in the tab next to the icon <head> </head> Title tag goes in here. And other optional tags.
- 24. HTML Content Structure <body> </body> Content for webpages like paragraphs & images. <h1> <h2> <h3> <h4> <h5> <h6> ● Heading number indicates importance, not size. Don’t skip heading levels ● Separate your document with headings <p> </p> Paragraphs <style> </style> Adds styles such as color to text & change the look of other tags. Put in head tag. <div> </div> Division. A way to group things together. It’s like a container for HTML tag. <ul> </ul> Unordered lists. Ex. Bulleted lists <ol> </ol> Ordered lists. Ex. Numbered lists <li> </li> Each item in the lists goes in a li tag <a></a> Anchor tag. Use this to link pages or images.
- 25. HTML Cheatsheet Browsers: Software on your computer. Chrome, Safari, Internet Explorer, etc ● Connects to websites to get web pages & then shows them to you. ● They allow us to read the web pages. It reads the HTML in order to form the structure of the web page. <!DOCTYPE html> Tells the browser that the file is an HTML document, instead of some other type of markup. Important to Remember Developer Tools: Examine, edit, & debug HTML. Right click on web pages & click Inspect or Page Source. The Internet: Connected computers sharing information. Syntax: Spelling & grammar programming languages. Each program defines its own rules that control which words the computer understands. Semantics: Meaning