2. Speaking in Code
Recap: The Internet
• We have not yet transcended the laws of nature
• Web is a library of documents and files
• Browsers are Readers of HTML
• Communicate via Protocols (rules)
3. Speaking in Code
Recap: HTML
• HyperText Markup Language
• Way to organize content for browsers to read
4. Speaking in Code
Recap: HTML Tags
• Don’t forget to close tags
– <html></html>
– <img src=‘blah.jpg’ />
• <!DOCTYPE html>
– Instruction to browser that it page is html
5. Speaking in Code
<head> vs. <body>
• What goes in the <head>
– Titles, scripts, style sheets
– What makes this page work?
• What goes in the <body>
– Content
– ie) paragraphs, text, tables
6. Speaking in Code
What do the tags do?
• <html> – Starts and ends HTML documents
• <head> – Defines important aspects of page
• <title> – Sets title of page (ie. top of tab)
• <body> – Viewable portion of page
• <h1> – Type of header
• <p> – Paragraphs
• <img> – Images (anything special about this?)
7. Speaking in Code
Recap: Format of Web Pages
<!DOCTYPE html>
<html>
<head>
<title>Best Page Ever</title>
</head>
<body>
<h1>Largest Header</h1>
<p>Paragraph</p>
<strong>Bold Text</strong>
<a href=‘http://www.google.com’>Link to Google</a>
</body>
</html>
8. Speaking in Code
Common Mistakes
• Don’t forget to close tags
<html><html/> (what’s wrong)
• Avoid Typos
<title>What the.. Not Working</tile>
• When writing <a href=‘http://www.google.com'></a>
– http:// crucial!
9. Speaking in Code
Best Practice - Indenting
• Indenting allows for cleaner code
• User-readability
– Not only others but for yourself!
• Helps catch mistakes
– Did you close the tag?
10. Speaking in Code
What happens if you don’t indent
<!DOCTYPE html>
<html>
<head>
<title>Best Page Ever</title>
</head>
<body>
<h1>Largest Header</h1>
<p>Paragraph</p>
<strong>Bold Text</strong>
<a href=‘http://www.google.com’>Link to Google</a>
</body>
</html>
11. Speaking in Code
Lists!
Ordered list <ol> Unordered list <ul>
1. Wake up • Make slides for class
2. Eat • Go grocery shopping
3. Sleep • Look for apartments
13. Speaking in Code
Comments
• Useful for leaving notes
• Does not show in the browser
<body>
<!– This list means absolutely nothing -->
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</body>
14. Speaking in Code
Styling
• Webpages don’t have to be ugly
• Can style in line
<body>
<ol>
<!– Wow cool font bro
<li style='font-family:Garamond; font-size:16px'>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</body>
15. Speaking in Code
Ready to Try It Yourself?
http://bit.ly/htmlbasics2
Recommended for next week:
http://bit.ly/htmlbasics3
16. Speaking in Code
Sync-Up!
• We can make lists <ul>
<li>
We can make lists
– As deep <ul>
<li>
• As you want As Deep
<ul>
• Styling want</li>
<li>As you
</ul>
– Keep in mind we will </li>
</ul>
use CSS later </li>
</ul>
17. Speaking in Code
Reiterating Indentation
<body>
<p>Sometimes I think that indentation might be unnecessary and takes an extra key stroke but then
things like this can happen where you have a million lines and have no idea which tags have to be closed
where well that sucks</p>
<ul>
<li>Imagine
<ul>
<li>This was
<ul>
<li>Over</li>
<li>300+ Lines of HTML</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
