Download to read offline
Week 2 html
- 1. Speaking in Code HTML BrianLee Carolynn Vu (TA)
- 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 Whatdo 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 CommonMistakes • 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 BestPractice - 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 Whathappens 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! Orderedlist <ol> Unordered list <ul> 1. Wake up • Make slides for class 2. Eat • Go grocery shopping 3. Sleep • Look for apartments
- 12.
- 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 Readyto 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 ReiteratingIndentation <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>