Intro to HTML

INTRO TO HTML HANS HYTTINEN

<h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy
dog.</p>

HYPERTEXT MARKUP LANGUAGE semantics & structure design & presentation ✓
✘

WHY SEMANTICS? Humans can infer structure and meaning. Browsers need
some help.

AN HTML DOCUMENT ...is just text that has been marked
up. ...is usually saved as a .html ﬁle. ...is what your browser was made for.

<h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy
dog.</p> HEADING LEVEL ONE PARAGRAPH

<h1>Witty Headline</h1> OPENING TAG ELEMENT CONTENT CLOSING TAG

<h1 id=“best” class=“witty”> Witty Headline</h1> VALUES ATTRIBUTES

<a href=“http://adicu.com”>ADI</a> LINK (ANCHOR) <img src=“http://adicu.com/images/ adi-logo.png” alt=“logo” /> IMAGE

COMMON ELEMENTS <a> <em> <abbr> <p> <ol> <ul> <div> grouping
<h1> <header> <footer> <section> <article> phrasing sectioning

ELEMENT TYPES http://j.mp/html5-tags

<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>

WHAT YOU NEED <!doctype html> <html> <head> <title>Your page title</title>
</head> <body> <p>Your stuff goes in the body!</p> </body> </html>

MORE EXAMPLES

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

UNORDERED LISTS <ul> <li>Eggs</li> <li>Bread</li> <li>Milk</li> <li>Saffron</li> </ul> •Eggs •Bread
•Milk •Saffron

TEXT SEMANTICS <p> <em>Emphasized</em>, <strong>Strongly emphasized</strong> </p> Emphasized, Strongly emphasized

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!

HTML RESOURCES codecademy.com/courses/html-one-o-one developer.mozilla.org/en/HTML w3.org validator.w3.org wiki.adicu.com

OTHER PEOPLE’S HTML

Chrome and Firefox: ⌥ ⌘ i Ctrl ⇧ i DEVELOPER
TOOLS Right click → View Page Source RAW PAGE SOURCE

MY PAGE IS STILL UGLY HTML deﬁnes structure. Intro to
CSS: next week CSS deﬁnes presentation!

adicu.com j.mp/intro-to-html THESE SLIDES

Intro to HTML

Intro to HTML

lumilux

Other Decks in Programming

Featured

Transcript

INTRO TO HTML HANS HYTTINEN

<h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy

HYPERTEXT MARKUP LANGUAGE semantics & structure design & presentation ✓

WHY SEMANTICS? Humans can infer structure and meaning. Browsers need

AN HTML DOCUMENT ...is just text that has been marked

<h1>Witty Headline</h1> <p>The quick brown fox jumps over the lazy

<h1>Witty Headline</h1> OPENING TAG ELEMENT CONTENT CLOSING TAG

<h1 id=“best” class=“witty”> Witty Headline</h1> VALUES ATTRIBUTES

<a href=“http://adicu.com”>ADI</a> LINK (ANCHOR) <img src=“http://adicu.com/images/ adi-logo.png” alt=“logo” /> IMAGE

COMMON ELEMENTS <a> <em> <abbr> <p> <ol> <ul> <div> grouping

ELEMENT TYPES http://j.mp/html5-tags

<header><h1>My Blog</h1></header> <section> <article> <h2>First post!</h2> <p>This is my <em>very</em>

WHAT YOU NEED <!doctype html> <html> <head> <title>Your page title</title>

MORE EXAMPLES

ORDERED LISTS <ol> <li>Open file</li> <li>Edit file</li> <li>Save file</li> <li>Close

UNORDERED LISTS <ul> <li>Eggs</li> <li>Bread</li> <li>Milk</li> <li>Saffron</li> </ul> •Eggs •Bread

TEXT SEMANTICS <p> <em>Emphasized</em>, <strong>Strongly emphasized</strong> </p> Emphasized, Strongly emphasized

TEXT NON-SEMANTICS <p> RMS <i>Titanic</i>. This is a<br> <b>keyword</b>. </p>

HTML RESOURCES codecademy.com/courses/html-one-o-one developer.mozilla.org/en/HTML w3.org validator.w3.org wiki.adicu.com

OTHER PEOPLE’S HTML

Chrome and Firefox: ⌥ ⌘ i Ctrl ⇧ i DEVELOPER

MY PAGE IS STILL UGLY HTML deﬁnes structure. Intro to

adicu.com j.mp/intro-to-html THESE SLIDES