Designing and Building Course-Based Webs

[Introduction] [Handouts] [Basics] [HTML] [First Page] [Design] [Markup] [More HTML] [Searching] [References] [Process] [Terminology] [Tips] [HTML Guide] [Books] [Bookmarks] [Tools]

Your First Page(s)

Abstract: A simple guide to authoring your first few pages in HTML. The page is mostly presented as a series of pieces of HTML source with the resulting image.

The Basic Page

The simplest HTML document has a head (with title) and no body. It would be given by 

<HTML>
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

It would appear as

My First Page
 

Adding Headingss

We can add a variety of headings to the previous document. 

<HTML>
<HEAD>
<TITLE>My Second Page</TITLE>
</HEAD>
<BODY>
<H1>A Document with Headings</H1>
<H2>Introduction</H2>
<H2>Examples</H2>
</BODY>
</HTML>

It would appear as

My Second Page

A Document with Headings

Introduction

Examples

Note that the level one heading need not be the same as the title of the document. Different authors have different perspectives on this relationship. Since the title of your document appears at the top of the window (in most browsers), you should keep it relatively short. Some of us also like to add context (e.g., all the pages in this tutorial have the tutorial name before the page name).

Body Text

We can add a few paragraphs to our previous document. 

<HTML>
<HEAD>
<TITLE>My Third Page</TITLE>
</HEAD>
<BODY>
<H1>A Document with Body Text</H1>
<H2>Introduction</H2>
<P>This ever-evolving document illustrates a number
of issues in HTML authoring.</P>
<H2>Examples</H2>
<P>This particular document illustrates the paragraph
tag.</P>
</BODY>
</HTML>

It would appear as

My Third Page

A Document with Body Text

Introduction

This ever-evolving document illustrates a number of issues in HTML authoring.

Examples

This particular document illustrates the paragraph tag.

Note that HTML "ignores whitespace". Among other things, this means that it does not treat blank lines as the beginning of a new paragraph. It also means that multiple spaces between words are usually condensed to a single space.

From the opposite perspective, it is certainly possible for one line of text to appear as multiple paragraphs, if it had multiple paragraph tags.

Consider the following document 

<HTML>
<HEAD>
<TITLE>My Next Page</TITLE>
</HEAD>
<BODY>
<H1>An Experiment with Paragraphs</H1>
<H2>Introduction</H2>
<P>This ever-evolving document illustrates a number
of issues in HTML authoring.</P>
<P>This document demonstrates     whitespace
issues in
 
HTML authoring.</P>
<H2>Examples</H2>
<P>Paragraph One</P><P>Paragraph Two</P>
</BODY>
</HTML>

It would appear as

My Next Page

An Experiment with Paragraphs

Introduction

This ever-evolving document illustrates a number of issues in HTML authoring.

This document demonstrates whitespace issues in

HTML authoring.

Examples

Paragraph One

Paragraph Two

Stylized Text

Many documents would be rather plain if all that were available were plain text and various heading levels. Often, document authors want to emphasize certain words so that readers' eyes are drawn to them, and so that readers remember them.

HTML provides three basic forms of logically stylized text

We might use these in the following document 

<HTML>
<HEAD>
<TITLE>My Next Page</TITLE>
</HEAD>
<BODY>
<H1>My Next Page</H1>
<H2>Introduction</H2>
<P>
This ever-evolving document illustrates a number
of issues in HTML authoring, including how to make
<EM>emphasized</EM> text,
<STRONG>strongly emphasized</STRONG> text, and
<CODE>program code</CODE>.
</P>
</BODY>
</HTML>

It would appear as

My Next Page

My Next Page

Introduction

This ever-evolving document illustrates a number of issues in HTML authoring, including how to make emphasized text, strongly emphasized text, and program code.

Parameters

Some tags allow additional parameters that help specify more about the tag. For example, the paragraph tag allows you to determine the alignment of the paragraph. Most have the form PARAM=VALUE. When there are parameters, the tag has the form

We might use these in the following document 

<HTML>
<HEAD>
<TITLE>My Next Page</TITLE>
</HEAD>
<BODY>
<H1>My Next Page</H1>
<H2>Introduction</H2>
<P>
This ever-evolving document illustrates a number
of issues in HTML authoring, including how to align
text at
</P>
<P ALIGN="LEFT">the left margin</P>
<P ALIGN="CENTER">the center</P>
<P ALIGN="RIGHT">the right margin</P>
</BODY>
</HTML>

It would appear as

My Next Page

My Next Page

Introduction

This ever-evolving document illustrates a number of issues in HTML authoring, including how to align text at

the left margin

the center

the right margin

Links

Of course, all of this is appropriate for straight text. Where is the hyper in hypertext? To do hypertext, we must be able to add links to our documents. There are three basic kinds of links in HTML

Given the choice between a relative and absolute link, you should use a relative link.

In order to link to another portion of the same document (with an internal link), you must name that portion of the document with <A NAME="name">...</A>.

I strongly encourage you to name all the sections of your document.

Continuing with our extended example 

<HTML>
<HEAD>
<TITLE>My Next Page</TITLE>
</HEAD>
<BODY>
<H1>My Next Page</H1>
<H2>Introduction</H2>
<P>
This ever-evolving document illustrates a number
of issues in HTML authoring, including how to
link to
<A href="#more">other sections of the same document</A>,
<A href="http://www.math.grin.edu/~rebelsky/index.html">documents
on other servers</A>, and
<A href="html-advanced.html">documents in the same site</A>.
</P>
<H2><A NAME="more">More about links</A></H2>
<P>
You can even link to
<A href="html-advanced.html#tables">parts of other
documents</A>.
</P>
</BODY>
</HTML>

It would appear as

My Next Page

My Next Page

Introduction

This ever-evolving document illustrates a number of issues in HTML authoring, including how to link to other sections of the same document, documents on other servers, and documents in the same site.

More about links

You can even link to parts of other documents.

Images

Of course, there is more to the World-Wide Web than just text and links. Many (one might even say most) pages on the web include images. The standard form for an image tag is <IMG SRC="..." ALT="...">

Lists

For some reason, word processing and the computer have led many of us to present our ideas in bulleted (or numbered or ...) lists. HTML includes a few tags to simplify the creation of lists.

We'll illustrate lists as part of the next example.

Special Characters

You may have noted that some characters we normally type, such as the less-than sign, have special meaning in HTML. This leads to the question of "how do we represent those characters?". HTML allows you to write special characters (not just less-than and greater-than, but also characters not on the standard keyboard) in the form &charname;.

The code for a page showing this might look like Continuing with our extended example 

<HTML>
<HEAD>
<TITLE>My Next Page</TITLE>
</HEAD>
<BODY>
<H1>My Next Page</H1>
<UL>
<LI><code>&amp;lt;</code> is the less-than sign &lt;
<LI><code>&amp;gt;</code> is the greater-than sign &gt;
<LI><code>&amp;amp;</code> is the ampersand sign &amp;
<LI><code>&amp;copy;</code> is the copyright sign &copy;
</UL>
</BODY>
</HTML>

It would appear something like

My Next Page

My Next Page

  • &lt; is the less-than sign <
  • &gt; is the greater-than sign >
  • &amp; is the ampersand sign &
  • &copy; is the copyright sign ©

[Introduction] [Handouts] [Basics] [HTML] [First Page] [Design] [Markup] [More HTML] [Searching] [References] [Process] [Terminology] [Tips] [HTML Guide] [Books] [Bookmarks] [Tools]

This page written by Samuel A. Rebelsky.

This page generated on 53 by SamR's Site Suite.