A cartoon of a small boy in a bright yellow nightshirt with 'Dat new 
stuff' written on the front.

Your First Dozen HTML Tags

Welcome to the world of Web production! One reason the Web grew so rapidly is that Web pages can be built with very simple tools -- text-editing programs that come free with every computer, and a Hypertext Markup Language (HTML for short) whose codes or "tags" are all visible to the world. That's how we will start COMS 326 -- with plain text editors, plus a little bit of Photoshop. And that's why this page is nothing fancy; it's mostly for students who miss one of the first two classes of the semester, or who need to review basics before the first quiz.

No matter how colorful, dynamic and "21st century" they look, all Web pages are built out of plain text HTML tags that can be changed with any text editor -- Notepad for Windows, TextEdit on the Macintosh, Emacs, Vi and Pico on Unix machines -- not just Dreamweaver or whatever "authoring" system made the page.

First, be sure that your "plain text editor" is just that. If it doubles as a "word processor," turn off all features like rich text formatting, spelling correction, smart quotes and text replacement. Any of those can insert characters that aren't "plain text." Plain text characters are the letters, numbers and punctuation marks you see printed on your keyboard's keys -- no "curly quotes," long dashes or superscripts.

Even some of those keyboard characters have special meanings in HTML markup tags. To start with, a tag includes a pair of angle brackets < and >. Each tag's brackets surround a letter <p>, an abbreviation <html> or a short word <strong>. To really get rolling takes about a dozen tags, but you only need four or five to make a simple page.

(To experiment with new tags one or two at a time, try the interactive tutorial workspaces at w3schools.com)

Code for the simplest page (6 tags)

<!DOCTYPE html>

<html>
<head>
<title>Simplest page</title>
</head>
<body>

<h1> Hello world!</h1>

</body>

</html>

The top 12 list....

  1. The very first line of a formal and up-to-date webpage states what version of HTML you are using, its "DOCTYPE." This is the only line of code that uses uppercase letters. Simple pages will work without a DOCTYPE statement, but the latest version of HTML -- HTML5 -- makes the statement so simple that we will use it here. (Earlier versions were quite complex, including Web addresses for the definition of whichever HTML version you were using.) This is also one of a few tags that do not come in pairs. Just: <!DOCTYPE html>
  2. Beneath the DOCTYPE line, the entire page is enclosed in a pair of tags: <html> at the top, and </html> at the bottom of the page. Most markup tags come in pairs, to start and close a section of your code. Start tags are a few characters contained in the angle brackets < and >, which you'll find on the keyboard's shifted comma and period keys. Closing tags add the slash mark (the / one next to the period key) after the left angle bracket.
  3. An HTML page has two parts: A "head" section, with mostly-invisible information about the page,and a "body" with the visible content. The head section comes before the "body" section. Pretty simple anatomy. So add <head> and </head>
  4. In the head section, you add the <title> </title> tags to describe the page. The title will appear in users' bookmark lists, search engine listings for your page, and in the top frame of the browser window.
    The title should be a unique description of your page: Not "Home page" or "my vacation," but "A guide to tubing the New River in Radford, Va., by C.Tuber." (Specific is good, but don't make the title too long; stop at 64 characters.)

    Remember: "title" in HTML does not mean "headline" or "heading." Those come later, in the body of the page.

    Notice that pairs of tags can contain other pairs, but they must be fully "nested" inside each other, not overlapping:

    <head> <title>My Page </title> </head>
    NOT
    <head> <title> My Page </head> </title>

    Closing tags in the wrong order is one of the most common coding errors; it can make whole sections of a page invisible.

  5. After you end the head section with its </head> tag, you start the <body>, the visible part of the page. The </body> closing tag should be down at the bottom of the page of code, just before the </html> close tag.
  6. Back to that "headline" idea. HTML's built-in codes for headings are numbered, with <h1> to start the most important heading on a page and </h1> to close it. In the browser, all headings appear in larger-than-normal bold type by default, and all are followed by blank space. The <h1> uses the largest type, <h2> the next largest, and so forth. You can have several <h2> or smaller headings. If parts of a page are of equal importance, it makes sense to use the same heading tag for them. (Later, you will learn how to take more control of font sizes, colors and spacing using style sheets.)
  7. You can think of Web pages as being made up of boxes. The body is a box. Each headline tag is a box. The most common box-of-text is a paragraph, beginning with <p> and end with </p>. By default, browsers put a blank line after every paragraph. Just pressing the "Return" or "Enter" key while typing the code for a page isn't enough to change the looks of a Web page. Browsers ignore the blank lines you get the keyboard's Enter or Return keys, as you will see if you look at the code for this page.
  8. If you want to end a line before it gets to the right side of a page, but don't want a blank line to appear use a "line break" tag, which is <br />
    The slash inside the tag indicates that a line break is "self-closing." That is, unlike most tags a line break is not a container, so it doesn't need separate open and close versions. (In some versions of HTML, the slash inside the break tag isn't required, but having it doesn't hurt.)
  9. Another self-closing tag is the tag that puts an image on your page, such as the Yellow Kid at the top of this page. It's not a "container," just a pointer to the source of the JPG, GIF or PNG image. That is, to make the image visible on a Web page, you must copy both the HTML file and the image file onto your Web server. The simplest image tag is <img src="imagefilename.jpg" />, for an image in the same directory as the HTML page. The "src" is for "source," which "equals" the address of the image file. Image tags usually include additional information describing the dimensions and contents of the image, as you will see if you look at the source code for this page.
  10. HTML has tags for lists of things, including ordered (numbered) and unordered (bullet) lists. Why "ordered" instead of "numbered"? Maybe because you can do ordering with letters, and you can use graphical markers other than bullets for your unordered lists. However you style them, the tags are a simple <ol> at the beginning of an ordered list and </ol> after you've given all the list items.
  11. Each list item has its own pair of tags, <li> and </li>, before you get to the final closing tag for the list. Since "li" is the tag for items in either kind of list, changing an ordered list to an unordered list requires simply changing the "ols" to "uls" -- a one-letter change to add or remove all those numbers!)
  12. There are actually more than a dozen tags on this page, including the ones for bold, italic, hidden comments and special characters. To see how they work, save a copy of this page and open it in TextEdit or WordPad to look at its code -- or use the "view source" command in your browser. (CTRL-U or Command-U on some browsers, a "view" menu selection with others.) While this page is about three printed pages long, the source code has about ten pages of hidden comments!

Wrapup...

That's it! You can now make a Web page about anything! Once you have saved it, you can preview it by using the "file: open" command in any browser or by dragging the document icon into any browser window. You can publish it to the world by copying it onto a Web server, which in our case is the "public_html" folder of your H-drive.

updated Jan.8, 2013