Intro to HTML

Transcript

1. INTRO TO HTML HANS HYTTINEN
2. <h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy dog.</p>
3. HYPERTEXT MARKUP LANGUAGE semantics & structure design & presentation ✓ ✘
4. WHY SEMANTICS? Humans can infer structure and meaning. Browsers need some help.
5. AN HTML DOCUMENT ...is just text that has been marked up. ...is usually saved as a .html file. ...is what your browser was made for.
6. <h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy dog.</p> HEADING LEVEL ONE PARAGRAPH
7. <h1>Witty Headline</h1> OPENING TAG ELEMENT CONTENT CLOSING TAG
8. <h1 id=“best” class=“witty”> Witty Headline</h1> VALUES ATTRIBUTES
9. <a href=“http://adicu.com”>ADI</a> LINK (ANCHOR) <img src=“http://adicu.com/images/ adi-logo.png” alt=“logo” /> IMAGE
10. COMMON ELEMENTS <a> <em> <abbr> <p> <ol> <ul> <div> grouping <h1> <header> <footer> <section> <article> phrasing sectioning
11. ELEMENT TYPES http://j.mp/html5-tags
12. <header><h1>My Blog</h1></header> <section> <article> <h2>First post!</h2> <p>This is my <em>very</em> first post.</p> <p>I hope you like it!</p> </article> </section> <footer><p>By Joe Smith</p></footer>
13. WHAT YOU NEED <!doctype html> <html> <head> <title>Your page title</title> </head> <body> <p>Your stuff goes in the body!</p> </body> </html>
14. MORE EXAMPLES
15. ORDERED LISTS <ol> <li>Open file</li> <li>Edit file</li> <li>Save file</li> <li>Close app</li> </ol> 1.Open file 2.Edit file 3.Save file 4.Close app
16. UNORDERED LISTS <ul> <li>Eggs</li> <li>Bread</li> <li>Milk</li> <li>Saffron</li> </ul> •Eggs •Bread •Milk •Saffron
17. TEXT SEMANTICS <p> <em>Emphasized</em>, <strong>Strongly emphasized</strong> </p> Emphasized, Strongly emphasized
18. TEXT NON-SEMANTICS <p> RMS <i>Titanic</i>. This is a<br> <b>keyword</b>. </p> RMS Titanic. This is a keyword. SPECIAL CASES ONLY!
19. HTML RESOURCES codecademy.com/courses/html-one-o-one developer.mozilla.org/en/HTML w3.org validator.w3.org wiki.adicu.com
20. OTHER PEOPLE’S HTML
21. Chrome and Firefox: ⌥ ⌘ i Ctrl ⇧ i DEVELOPER TOOLS Right click → View Page Source RAW PAGE SOURCE
22. MY PAGE IS STILL UGLY HTML defines structure. Intro to CSS: next week CSS defines presentation!
23. adicu.com j.mp/intro-to-html THESE SLIDES