Web page basics:

HTML primer

- Vicki Brown, April 1997




So you're going to create some Web pages...

If you're creating Web pages, you may find this Primer for Web pages useful. This introduction covers the basics of HTML (HyperText Markup Language), concentrating on a handful of useful HTML formatting commands (tags). This page provides annotation and examples for those basic HTML tags.

Even if you plan to create all of your pages with a specialized web page creator, it can't hurt to have a basic understanding of the underlying HTML code. If nothing else, this knowledge will come in handy when you see a page you like, View the source, and want to use the same cute stuff in your web pages!

Note that I use a Mac so some of this is Mac-oriented.

HTML Primer

(Vicki Brown, vlb@cfcl.com)

Contents

Hints...

Here are a few hints and recommendations that may help you:

  • Stealing code is good: if you see something you like, select "Document Source" from the Netscape View menu and see how the author did it! (Try viewing the source of this page!)

  • Avoid spaces and funky option (alt) characters in file/folder names. They will be translated by the Browser and are harder to use.

  • Get a program to help you create pages. The editor you choose should depend on how you plan to create your pages, and what level of control you want over the underlying HTML.

    • If you're a programmer type or a control freak, you'll probably want to edit the HTML directory. A good HTML-savvy editor can help. On the Macintosh, I recommend BBEdit very highly. BBEdit has many tools for making HTML creation easier. It has context-sensitive text coloring. It can call Netscape directly to display the page you are editing. BBEdit is available in Lite (freeware) and commercial versions; the commercial version is site-licensed by Apple. (I'm not sure if the Lite version has all the nifty HTML tools).

    • Many word processes such as ClarisWorks, MSWord, FrameMaker, or WordPerfect can save files as HTML. The results can vary, so be sure to view the resulting pages with a browser.

    • Lastly, there are more and more WYSIWYG (almost :-) Web page editors available. You can create pages using Netscape Communicator (4.0 and after). Or try a program such as Claris Home Page or Adobe PageMill.

  • Keep two copies of your Web site; one for test and experimentation, and one for show (public viewing). Try out new pages before copying them to the "real" server. (If you upload your pages to an ISP, you'll get two copies automatically).

  • If you want to display plain text, e.g as in an Email message or simple status report, be sure to name the file with a .txt extension. Depending on your server, files with the .txt suffix will be treated as pre-formatted, but those without will not (and all the text will run together or the Browser may even try to download the file rather than display it!).

    Note the difference between the presentation of MondayStatusSummary and MondayStatusSummary.txt. (If you don't see any difference, your server does not make a distinction (or you are viewing this primer directly in Netscape as a file:// and not using a server!). In that case, you'll have to trust me :-)

  • Web page interpretation can be as much a function of the server (WebStar, Apache, NetPresenz, Netscape Gold...) as the browser (Netscape, Mosaic, InfoExplorer). In addition, pages viewed locally as file:// URLs may appear different or not work when viewed remotely as http:// URLs. If you create and test your pages on a system other than the actual server, be sure to test the results after the files are moved to the server!

    Browsers also vary, and people set preferences differently, so don't spend too much time tweaking your pages to look perfect. Someone else will view them in a different browser, or with a bigger font, or on a red background. You might mention on the page which Browser you wrote it for...

Overview

Web pages are interpreted dynamically by the web browser, using a "mark-up" language called HTML (Hypertext Markup Language). That is, the web page that the user sees is not the same as the page its creator edited. Consequently, the process of creating web pages is one step removed from the web page as displayed.

The process of creating web pages involves both the specification of text and formatting. The text is edited in much the same manner as you would use for any text document. The formatting, however, is controlled by means of a small set of formatting tags, commands enclosed in angle brackets: < and >. Many tags have open and close versions. The close version has a / in front of the tag name. Many tags also have attributes which can be added (optionally) to change the behaviour of the html.

The entire HTML document is then enclosed in a set of "overhead" tags. These tags tell the Browser that the page is HTML, and provide general instructions about the primary parts of the page.

Overhead

All Web pages need a small amount of overhead, in the form of special tags that tell the Browser how the page is to be laid out. All web pages begin (open) with
<HTML>
and end (close) with
</HTML>
In between, you put everything else, starting with a
<HEAD>

The page header stuff goes here

</HEAD>

and followed by a
<BODY>

The page body stuff goes here

</BODY>

Within the page Head, you can specify a Title. The Title is what Netscape shows in the Browser Window title bar. The title of this page is HTML primer.

<TITLE>HTML primer</TITLE>
A basic page layout would then look like this: 
  <HTML>
      <HEAD>
          <TITLE>page title</TITLE>
      </HEAD>
      <BODY>
      
      
      </BODY>
  </HTML>

Text

 Within the body of the page, the text you type is free format. HTML is not (usually) white-space conscious. Judicious use of indentation and newlines can be used to make your text and code neater and easier to read (highly recommended!) but Browsers will generally ignore it (unless told to do otherwise). You can force white space with certain tags, e.g. <BR> for line break, and <P> for new paragraph.

A line break <BR>
simply breaks the line
<P>

whereas a paragraph mark provides some extra space between lines.

The text you type is also, generally, set in whichever font the user has chosen in his Browser preferences, e.g. Times 12pt. The font and size can be changed using the <FONT> </FONT> tags. Attributes specify the typeface, color and/or size. For example

<FONT SIZE="+3" COLOR="red">Oh Boy! Cool News!!!</FONT>
produces
Oh Boy! Cool News!!!

Text size can also be controlled by section headers, discussed below.

Text style (e.g. bold) is handled separately, not by attributes to the FONT tag. For example, <B> begins a bold section of text. </B> ends the bold and returns to normal text.

For Emphatic (typically Italic) text, use <EM> and </EM>. Note, however, that most web browsers fail to display the space following an italicized word (SIGH).

For Typewriter (monospace) text, use <TT> and </TT>. Typewriter text is commonly used for presenting items (such as commands) that must be typed exactly as shown. The <PRE> (pre-formatted) tag, discussed below, also creates typewriter text.

Special Characters

Not all characters are easy to display from HTML code. For example, the < and > characters denote tags. In order to display them on the screen (and not have HTML process them) they must be specially encoded.

To continue the example, the < character is coded as &lt;. The & is coded as &amp;. Many other special characters are available, each with its own code. All have a 3-digit numeric code; many also have a named code, as in the previous examples.

Fancier Formatting

ALthough white space is generally ignored by the Browser, there are ways to specify indentation and spacing.

<CENTER>

You can center text

between <CENTER> </CENTER> tags.

Each paragraph will be centered.

</CENTER>


<BLOCKQUOTE>

You can indent text from both margins as a Block Quote (indented) by placing it between <BLOCKQUOTE> </BLOCKQUOTE> tags.

Each paragraph will be indented.

</BLOCKQUOTE>


<PRE>

Text between <PRE> </PRE> tags is considered pre-formatted.
No line break tags are necessary.  White space is used for paragraphs.
     Indentation is as you place it in the code.
And the text is shown in mono-space font.
</PRE>

Sections

Often, it's useful to break the text on a page up into recognizable sections. This page has many sections, each with a clear, bold, header. A section header could be created, through careful use of the <B> <P> and <FONT> tages, but HTML provides a header specification tag to make things easier.

Section headers come in several sizes. Headers are formatted as text enclosed between <H#> </H#> tags, where # is replaced by a number representing the desired size. 1 is the largest; 6 is about the smallest reasonable header size.

<H1>Text</H1>

Text

<H2>Text</H2>

Text

<H3>Text</H3>

Text

<H4>Text</H4>

Text

<H5>Text</H5>
Text
<H6>Text</H6>
Text

Headers are set in bold. The text following the header is always a new paragraph.

Occasionally, you may want to specify a new section more firmly, by drawing a line across the page between sections. The <HR> tag specifies a horizontal rule.

Lists

Often, it is convenient to format text as lists. Two common types of lists are unordered (aka bullet) lists, and ordered (or numbered) lists The most list type common on this site is the Unordered List.

Unordered lists are made up of list items, marked with the <LI> tag (a single tag; not a pair), enclosed between a pair of <UL> </UL> tags, thus: 

<UL>
  <LI>item one
  <LI>item two
  <LI>item three
</UL>

becomes

  • item one
  • item two
  • item three

For an ordered list, use a <OL> </OL> pair. The list items are still denoted with <LI>:

  1. item one
  2. item two
  3. item three


Especially when list items are long enough to wrap to a new line, some additional space makes the list more readable; make each list item a new paragraph: 

<UL>
  <P><LI>If you see something you like, select "Document Source"
  from the Netscape View menu and see how the author did it!
  <P><LI> Avoid spaces and MacOS option characters
  in file/folder names.
</UL>
becomes

  • If you see something you like, select "Document Source" from the Netscape View menu and see how the author did it!

  • Avoid spaces and MacOS option characters in file/folder names.

Tables

For even fancier formatting, you may want to use a table. Tables are enclosed between <TABLE> </TABLE> tags. For a table with bordered cells, include the BORDER attribute in the open tag, e.g. <TABLE BORDER> Each table row is set between <TR> </TR> tags. The table data or cells is set between <TD> </TD> tags. (TD stands for Table Data). Thus: 
<TABLE BORDER>
  <TR>
    <TD>Name</TD>
    <TD>Extension</TD>
    <TD>Email address</TD>
    <TD>Department</TD>
  </TR>
  <TR>
    <TD>Fred Smith</TD>
    <TD>5-5555</TD>
    <TD>fred@smith.com</TD>
    <TD>Dept. of Redundancy Dept.</TD>  
  </TR>
</TABLE>

Becomes:

Name Extension Email address Department
Fred Smith 5-5555 fred@smith.com Dept. of Redundancy Dept.

Note that many additional attributes can be specified in the Table and TD tags.

Images

The images are the pictures on a Web site. They can make a Web site come alive. Image files are usually GIF (Graphical Image Format) or JPEG (Joint Photographic Experts Group) format files. Image files can be created with any of several paint programs. Most Browsers know how to display these GIF and JPEG images directly without calling for other programs (Helper Applications).

An image are specified by the <IMG ...> tag. The path to the file to be displayed is given in the SRC="..." attribute. Paths use Unix-style pathname syntax, e.g. ../../Images/file.gif. The HTML to display the image below

is written as

<IMG SRC="testpat.gif">
It is often appropriate to specify a text string to be used if the image cannot be displayed for some reason, e.g. the user has turned off image autoloading or the image file cannot be found. This alternate text is provided in the ALT= attribute. For example
<IMG SRC="Images/cool.gif" ALT="Cool graphic">.
produces
Cool graphic
because the image cool.gif could not be found in the location given.

A Word of Caution: A few images can spice things up, but too many images may be more annoying than they're worth, especially over a slow connection. Also, images can eat up disk space quickly; if your space is limited, take care. Make each image worth that thousand words!

Anchors

Anchors, or links, are what the Web a web! They're the things that let you jump around to various places, click on text and graphics and bring up new pages. Anchors occur between a <A> </A> pair of tags.

There are several types of anchors (specified as attributes to the ><A> tag). Two very common types (in use throughout this site) are the HREF and NAME types.

HREF is used to point to files, mailto: links, other sites (http, ftp, and so on) and to marked locations within a page. NAME is used to mark locations within a page to be linked to later by an HREF.

Note again that HREF or NAME is an attribute of the <A> tag (placed within the <A and > brackets) while the text the user sees (and clicks on) comes between the <A> and </A> tags

For example:

A link which sends Email:
<A HREF="mailto:vlb@cfcl.com">Vicki</A>
Vicki

A link to another Web site:
<A HREF="http://www.apple.com">Apple Computer</A>
Apple Computer

A link to an ftp site:
<A HREF="ftp://ftp.mklinux.apple.com">MkLinux FTP</A>
MkLinux FTP

A link to a file:
<A HREF="useful.html">Useful Stuff</A>
Useful Stuff

A link to a marked location within a file:
<A HREF="primer.html#_Sections">Sections</A>
Sections

Shorthand for a link to a marked location, if the file is the current file:
<A HREF="#_Sections">Sections</A>
Sections

To mark a location within a file, use the NAME attribute. For example, the Overview header on this page is coded as:

<A NAME="_Overview"><H4>Overview</H4></A>
Note that tags can be nested, allowing the header to be marked, with the <H3> header tags inside the anchor. When using an HREF to link to an anchor created with NAME, preceed the name with #. Thus, the NAME anchor is created as
<A NAME="_Value">text</A>
and referenced as
<A HREF="#_Value">Marked text</A>
The name (e.g. "_Value") can be anything you like.

Learning More

 There are plenty of good books on HTML and the Web. Some are better than others. Be sure to leaf through any book that interests you before you buy!

There are also sites on the Web with tips and information about HTML and creating Web pages. Some are mentioned in the Tips & Tools page on this site.

Lastly, the best way to learn is to observe, and to do. View the source for the pages on this site and other sites. Get a good editor, and start creating Web pages.

Copyright © 1997 Vicki Brown Permission to link to, download, or redistribute granted as long as no changes are made and author's name and Copyright remains intact.

Last modified February 5, 1998 vlb