website structure games class #2
TRANSCRIPT
Website Structure
What did we learn in the last class?
What did we learn about websites in
November?
HTML & TagsStructure
HyperText
Creates links between web pages.
Tags markup a web page
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 moviesThese 3 movies account for more than 6 billion dollars total.
1. Star Wars 72. Avatar3. The Avengers
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.
<title> </title>
The webpage’s title is usually shown in the tab next to the icon
Title Tag
<head> </head>
Title tag goes in here. And other optional tags.
<style> </style>
Adds styles such as color to text & changes the look of other tags.
Put in head tag.
<html><head>
<title></title><style></style>
</head><body>
<p> </p>
</body></html>
HTML Structure Order
HTML Puzzle BoxesLet’s put them in order!
Hack the News
● Open your
Browser
● Type: google.com
● Type: webmaker
xray goggles
_______________________________
tweentribune.com
HTML Corners Game
<body>
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.
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.
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, & debugHTML. 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