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
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
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)
<h1> Hello world!</h1>
The top 12 list....
- 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>
- 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.
- 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>
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.,
(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> <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.
- 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.
- 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.)
- 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,
look at the code for this page.
- 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
open and close versions. (In some versions of HTML, the slash inside the
break tag isn't required, but having it doesn't hurt.)
- 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.
- 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.
- 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!)
- 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
(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!
That's it! You can now make a Web page about
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