Tutorial - Intro HTML

Language is used to communicate.  "Duh, Jeremiah."  I know.

But seriously, that's the key to remember in all of this - these are tools for communication, or more specifically communicating descriptions.

When I talk to you, or write this to you, you can just read it, or listen to it.  Easy.

But what if the entire post to this point had been written like this?

Languageisusedtocommunicate."Duh,Jeremiah."Iknow.Butseriously,that'sthekeytorememberinallofthis-thesearetoolsforcommunication,ormorespecificallycommunicatingdescriptions.WhenItalktoyou,orwritethistoyou,youcanjustreadit,orlistentoit.Easy.Butwhatiftheentireposttothispointhadbeenwrittenlikethis?
So it's not just the words, it's the presentation.  HTML is how the presentation of our words is described.  It is the "meta-text" of our text, if you will.

Enough about HTML, let's dive in.

HTML is composed of three things: objects, attributes, and text.
  • Text is just text.  It's the words you want to display.
  • Objects describe how the page should be laid out.
  • Attributes describe the objects, especially how they look.
HTML is a "tag" language, or a "markup" language.  That is, it uses tags surrounded by "<>" to indicate objects.

For example if I had a box, I might represent it like this: <box></box>

You will notice an "opening" and "closing" tag.  There's nothing in between so I could also have written this as: <box />

Attributes describe objects, and come in key/value pairs.  They look like this: color="blue" size='3 cubic feet'

It (almost always) doesn't matter whether you use single (') or double (") quotes, just keep it consistent.

Lastly we have text.  Think of it like content.  Let's say I have a blue box full of kittens, I might represent it like this:

<box color="blue">Kittens!!!</box>

So that's a rough introduction to what HTML is, hopefully demystifying it a bit.  This way if someone tells you to set the attribute width to 190px on the div in question, that it should look like this:

<div width="190px"> </div>

Happy blogging!