HTML Primer
Course Index
- Introduction
- History of HTML (if you care)
- HTML Editing
- Words To Memorize
- HTML Document Structure
- Making Your Documents Look Sexy
- Nesting Your Elements
- Testing Things Out On Your Own
- Using Your HTML Skillz In The DJB
- References
- Exam
Stop crying like a baby; sit up straight; get your finger out of your nose; and pay attention. I’m Darth Awesome and this is where I’ll train you to code like a f—king Jedi.

Hyper Text Markup Language (HTML) is not a programming language, but rather a markup language. HTML has been around for a few decades; is easy to get the hang of; does not taste like chicken; and is a large part of delivering web page content to browsers! Just because it is easy to wrap your head around, however, does not mean it should be taken lightly or attacked sloppily. This course is meant to smack you around a bit and make sure you do what you are supposed to so that you don’t break the Internet or accidentally kill a few puppies by the HTML Gods wreaking vengeance due to your mismatched tags.

Upon successful completion of this course, you should be able to add HTML to your reports and/or news articles without the SCL breathing down your neck about screwing up the front page of the DJB. And if the mood hits you, you could even code a basic and functional web page that meets current HTML standards! HUZZAH!

If you are a mental masochist or some sort of coding historian, you can read up on the history of HTML here and get some more general information that you may find useful.

Creating HTML code is done by opening up an editor and smacking whatever you use for typing (fingers for most of us, toes for some, and other unmentionables for a select few) against a keyboard in some fashion or another with liberal uses of “<" and ">“. The editor is an important aspect of coding HTML and is largely fueled by the preference of the coder. Before I give you some suggestions on what to use, however, I will give you this important piece of advice:
DO NOT USE MS WORD TO CREATE YOUR HTML. If you do this, I will locate your closest relative and kick them in the privates 72 times.

Instead, be a smart person (a.k.a. non-coder-douche) and use a tool that is appropriate:
- Notepad (In all honesty, don’t use this. You will thank me later.)
- EditPlus (PC Only: http://www.editplus.com)
- TextWrangler (Mac Only: http://www.barebones.com/products/textwrangler/)
For this course – since learning and understanding HTML is driven by hand writing the code yourself – DO NOT use an editor that generates the HTML for you. If you do and that is discovered, you will fail this course.

Before we go crazy coding HTML like a mad-man (mad-woman?), there are a few terms that you need to be familiar with because they’ll be used throughout this course:
Tag: Used to specify “mark-up” regions of HTML documents for the web browser (IE, Firefox, Chrome, etc) to interpret. Tags look like:

Element: An element is a tag that is fully closed (a.k.a. completed). A tag with a “/” at the beginning indicates a closing tag. A tag (as mentioned in the previous picture) with a “/” at the end is a self contained tag that is still considered to be closed if the slash is present (Note: there are only a few elements that are self-contained:
, ,
, etc). Closing tags is extremely important.

Attribute: Used to modify the value of HTML elements. Elements will often have multiple attributes. An example attribute is the style="color:blue;" in (note that the values of attributes should always be quoted):

Having a bunch of tags is neat, but not overly useful unless you organize them in a meaningful way. I’ll show you how to build a basic page step by step:
The Elementbegins and ends every web page. Its purpose is to contain all your HTML to describe your web page to the web browser. Without the appropriat