Intro to HTML.

Reading recap
Web Standards & Semantics
Basic tags, block vs. inline
Validating code, valid HTML doc structure
Debug inspector, Firebug
Deprecated (unsupported) tags

Reading Recap (yes they are old articles)

  1. Understanding Web Design - Jeffrey Zeldman
    http://www.alistapart.com/articles/understandingwebdesign/

    Summary:
    "Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity."
    "Where are the masterpieces of web design, these critics cry. That Google Maps might be as representative of our age as the Mona Lisa was of Leonardo's - and as brilliant, in its way - satisfies many of us as an answer, but might not satisfy the design critic in search of a direct parallel to, oh, I don't know, let's say Milton Glaser's iconic Bob Dylan poster."

  2. To Hell With Bad Browsers - Jeffrey Zeldman
    http://www.alistapart.com/articles/tohell

    Summary:
    THIS MESSAGE HAS NOT CHANGED: "Please for the love of god upgrade your browser." -me
    Re: staying employed: "Learning to work with emerging technologies is probably a much better plan." - Zeldman

Web Standards & Semantics

  1. Standards bring us together.
  2. <header> has more meaning than <div>

    ...however...
    <b>, <i>, & <u> have no meaning.

    Which is why tags liks <center>, <blink>, <marquee>, & <font> are deprecated.
  3. I promise I will never mention table-based layouts again.









Please don't ever do this.

Basic tags, block vs. inline

style { display: block; display: inline; }

<p>, <div>, <h1>, <br>, <ul>, <ol>, <li>, <table>, <blockquote>, <pre>, <form>, <button>, <frameset>, <html>, <head>, <object>, <fieldset>
vs.
<span>, <em>, <strong>, <img>, <input>, <abbr>, <acronym>

Block elements take up the full page width and start on a new line.

Inline elements wrap text for the purpose of applying more semantic markup or CSS targeting.

A great place to start learning:
http://www.w3schools.com/html/html_elements.asp

Validating code, valid HTML doc structure

http://validator.w3.org/

Debug inspector, Firebug

Every browser has some form of debugger.
Firefox has an extension called Firebug.
Chrome & Safari have one built in.

Deprecated (unsupported) tags

<blink>, <marquee>, <font>, <center>, and more.

Deprecated tags are have either been removed from the spec or will be removed in some future version. Do not use them because future browsers may not support them.

old website

HTML Cheat Sheet (full sized image)

Questions?

Assignment #2:
Mark up your resume in valid HTML