Ryan Sandor Richards - OMG HTML

HTML Hypertext Markup Language Friday, February 24, 2012

What is HTML? • HTML is • A Human Readable
way to • Deﬁne the Structure of Documents for • The web Friday, February 24, 2012

HTML != PRETTY Friday, February 24, 2012

Document Structure • Web pages are documents • They are
nested (stuff goes inside stuff) • Collections of elements • Deﬁned by tags Friday, February 24, 2012

Elements & Tags • An HTML document has many elements
• You create elements using tags • Tags look like this: <h1>A document major header</h1> <p>This is a paragraph tag</p> <a href=”http://google.com”>Google.com</a> Friday, February 24, 2012

Many Different Tags • <h1></h1> - Document Header • <p></p>
- Paragraphs • <a href=””></a> - Anchors (Links) • <ul></ul> - Unordered lists • <ol></ol> - Ordered Lists Friday, February 24, 2012

Tag Anatomy <h2 id=”projects”>My Projects</h2> Open Attributes Content Close Friday,
February 24, 2012

Attributes • Help identify particular elements • Deﬁne parameters for
elements • Denote elements for styling Friday, February 24, 2012

Attribute Examples • <p id=”my_ideniﬁer”>...</p> • <div class=”bold important”>...</div> •
<option selected=”selected”>...</option> • <textarea rows=”10” cols=”20”> ... </textarea> Friday, February 24, 2012

Important Attributes • id=”...” - Unique identiﬁer • class=”...” -
Allows you to “classify” elements with “class names” • Important! Elements can have many class names but only one id, and the one id must be unique Friday, February 24, 2012

NESTING TAGS Tags (inside of tags (inside of tags (inside
of tags (inside of tags (inside of tags ...))))) Friday, February 24, 2012

Nesting Tags <p> You <em>must</em> ensure that your tags are
properly closed when <strong>nesting</strong> within other tags! </p> <p> <em> <strong> (nesting action) (html awesomeness) Friday, February 24, 2012

Full Page Example 01 <!DOCTYPE html> 02 <html> 03 <head>
04 <title>My Page</title> 05 </head> 06 <body> 07 <h1>The Title of My Page</h1> 08 <p>Welcome to my page, I hope you enjoy it!</p> 09 <p class=”email”> 10 You can reach me via email here: 11 <a href=”mailto:[email protected]”> 12 [email protected] 13 </a> 14 </p> 15 </body> 16 </html> Friday, February 24, 2012

BEHOLD Friday, February 24, 2012

<!DOCTYPE html> • Tells the browser that this is html
• There used to be all kinds of these • There can be only one Friday, February 24, 2012

Important Tags • <html> - There can be only one
• <head> - Information about the document • <body> - The document’s content Friday, February 24, 2012

Tag Zoology Friday, February 24, 2012

Headings • <h1> - Document title (site name, etc.) •
<h2> - Section • <h3> - Sub-section • <h4> to <h6> - Sub-sub-sections... Friday, February 24, 2012

Paragraphs • <p> - Used to construct paragraphs • <em>
- For emphasizing • <strong> - Highlights importance Friday, February 24, 2012

Unordered Lists • One little, • Two little, • Three
little web designers <ul> <li>One little,</li> <li>Two little,</li> <li> Three little web designers </li> </ul> Friday, February 24, 2012

Ordered Lists 1. little, 2. little, 3. little web designers
<ol> <li>little,</li> <li>little,</li> <li> little web designers </li> </ol> Friday, February 24, 2012

Anchors • <a href=”#”>My Link</a> • These are why the
web works so well • href = hyper-reference = anywhere • In your page (with ids) • In your site • To any old random website/page/thing Friday, February 24, 2012

Anchor Examples <a href=”#my_identifier”>IN PAGE</a> <a href=”/awesome.html”>IN SITE</a> <a href=”http://google.com”>WEB</a>
<a href=”mailto:[email protected]”> Friday, February 24, 2012

OMG ANCHORS WOW Friday, February 24, 2012

Images • <img src=”tyler_hair.jpg”> • Images are fun and informative
• DO NOT WANT: <img></img> Friday, February 24, 2012

SO MUCH MOAR • There are a lot of tags
• These tags will sufﬁce • Learn more in the further reading • Resistance is futile Friday, February 24, 2012

Conclusion • HTML is for making documents • HTML is
not pretty • HTML is nested (tags within tags) • Anchors totally rule Friday, February 24, 2012

Ryan Sandor Richards - OMG HTML

Ryan Sandor Richards - OMG HTML

Steven! Ragnarök

More Decks by Steven! Ragnarök

Other Decks in Programming

Featured

Transcript

HTML Hypertext Markup Language Friday, February 24, 2012

What is HTML? • HTML is • A Human Readable

HTML != PRETTY Friday, February 24, 2012

Document Structure • Web pages are documents • They are

Elements & Tags • An HTML document has many elements

Many Different Tags • <h1></h1> - Document Header • <p></p>

Tag Anatomy <h2 id=”projects”>My Projects</h2> Open Attributes Content Close Friday,

Attributes • Help identify particular elements • Deﬁne parameters for

Attribute Examples • <p id=”my_ideniﬁer”>...</p> • <div class=”bold important”>...</div> •

Important Attributes • id=”...” - Unique identiﬁer • class=”...” -

NESTING TAGS Tags (inside of tags (inside of tags (inside

Nesting Tags <p> You <em>must</em> ensure that your tags are

Full Page Example 01 <!DOCTYPE html> 02 <html> 03 <head>

BEHOLD Friday, February 24, 2012

<!DOCTYPE html> • Tells the browser that this is html

Important Tags • <html> - There can be only one

Tag Zoology Friday, February 24, 2012

Headings • <h1> - Document title (site name, etc.) •

Paragraphs • <p> - Used to construct paragraphs • <em>

Unordered Lists • One little, • Two little, • Three

Ordered Lists 1. little, 2. little, 3. little web designers

Anchors • <a href=”#”>My Link</a> • These are why the

Anchor Examples <a href=”#my_identifier”>IN PAGE</a> <a href=”/awesome.html”>IN SITE</a> <a href=”http://google.com”>WEB</a>

OMG ANCHORS WOW Friday, February 24, 2012

Images • <img src=”tyler_hair.jpg”> • Images are fun and informative

SO MUCH MOAR • There are a lot of tags

Conclusion • HTML is for making documents • HTML is