HTML in 5 min

htmlin5.md

HTML in 5 min

The gist

• HTML is just plain text.
• You write it in any text editor. Be careful, though! Programs like Microsoft Word will trick you. They look like plain text, but they are not. I suggest using something like TextWrangler. It saves plain text, but also helpfully color-codes your code.
• You save HTML in a text file, but instead of giving it a .txt extension, you give it a .html.

Tags

HTML uses tags to mark chunks of text. Here is the tag for "bold text".

<b>This text will be bold.</b> This text will not be bold.

You can imagine tags like a set of parenthesis () that wrap some text. This lets you do special things with that text. Tags start with a <tag> and end with a </tag>.

Some tags, like <b> have default styles. Most tags don't have any style at all, and are just used to mark a chunk of text so you can style it.

You can also add additional details to tags, called "attributes". A common attribute is class. It's used to mark something as belonging to a group:

<b class="special">some special text</b>

Styling with CSS

• CSS is used to style HTML. It's also plain text.
• You can put CSS inside of <style></style> tags, or you can create a separate .css file.

CSS looks like this:

b {
  font-family: Helvetica;
  color: red;
}

This CSS rule will find all bold tags and (in addition to their default style) set their font to helvetica and their text color to red.

.special {
  font-size: 18px;
  background-color: green;
}

This CSS rule will find all tags with the class special and set their font size and give them a background color.

Resources

• https://developer.mozilla.org/en-US/
• Right-click and "Inspect Element" or "view source" to see the guts of an HTML page and how it works.
• Pick apart work like http://simurai.com/projects/ and http://simurai.com/lab/ to see how it works.