Skip to content

Instantly share code, notes, and snippets.

@chantastic

chantastic/script.markdown

Created August 11, 2014 14:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chantastic/863c2ccfbefe5c435aa2 to your computer and use it in GitHub Desktop.
Save chantastic/863c2ccfbefe5c435aa2 to your computer and use it in GitHub Desktop.
Download ZIP
Full Stack Labs: Web Basics — HTML
Raw
script.markdown

Web Basics — HTML

The year is 1989

The year is 1989 and there's a man named Tim Berners-Lee. Tim looks a lot like a scienc-y, late-career, Bradley Whitford but without the molestache.

Tim was putting together a mix tape of Peter Gabriel, Hall & Oates, and KISS when when he thought: "I need a better way to share my science-stuff.doc file withe the world." and

BOOM. The Web.

[personal introduction]

The Tech

The Internet

  • a way for computers to identify other computers

SGML

  • Plaintext publishing format

Two Inventions

HTTP

  • Hypertext Transfer Protocol
  • way of requesting documents

HTML

  • Hypertext Markup Language
  • markup language for publishing documents on the web
  • SGML plus <a> for linking to other documents

The web today

  • 25 years later HTTP and HTML are STILL the primary interfaces of the web
  • Every web-developer needs at least a cursory understanding of HTML to put pages and apps on the internet
  • Web frameworks that had abstracted or circumvented HTML have fallen out of vogue (SproutCore, Cappucino, Flash, Java)
  • Web frameworks that embrased HTML have gained tremendous traction, not only on the web, but on mobile (PhoneGap, Angular, Ember, Jquery)

Learning HTML

  • API is a confusing mess of old and new tags
  • Like multiplication tables: learn and move on

Thinking HTML

  • Everything wrapped in tags
  • Similar to styling a word document:
    • Select section
    • Wrap in openning and closing tags
  • Every tag that is opened must be closed, in order
  • Tags have two default display typse
    • Block (takes up 100% width) - headings, paragraphs, blockquotes
    • Inline - anchors, strong (bold), emphasised (italicized)

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment