Creating Web Pages with HTML


Creating simple web pages is not a difficult process. You can think of it as writing a bunch of text and marking up that text. The markup might say to place an image somewhere, some text should be bold, some text links to another page...

The way in which we mark up the text is with HTML. Together, HTML and text make up the source for a web page. Source is usually stored in files ending in .html or .htm.


Note: Most browsers allow you to view the source for a web page. Choose the browser's Page Source option to display a window in which you can scroll through the source.


Tags

HTML uses tags to mark up the source of web pages.

In its simplest form, a tag begins with a less than symbol (<), contains a special word or abbreviation, and ends with a greater than symbol (>). Most tags come in pairs, a start tag and an end tag.

For example, the title for a page is specified using:

<TITLE>Creating Web Pages with HTML</TITLE>
The start tag is <TITLE>, which marks the beginning of the title. The tag </TITLE> marks the end of the title. The text in between is the title's text.


Note: All end tags work like this, i.e., they use the same word as the beginning tag, preceded by a slash (/). Tags can be in either upper- (<TITLE>), lower- (<title>) or mixed case (<Title>), but consistency is desirable.

Since tags are textual, we can create the source for web pages in any text editor.

Below are descriptions of some of the common tags we can use.


Headings

Headings are used to introduce sections of a document, etc.

They are typically displayed more prominently than regular text and with space above and below them.

Headings use the <Hn> tag, where n is a number from 1 to 6 (<H1> being the most prominent).

For example, you could label the first section of a document with your name:

<H1>My Name</H1>
The above will be displayed as:

My Name


Note: Be careful that the numbers in the start and end tags match. Avoid mistakes like:
<H3>Heading</H4>

Tag Attributes

Normally, things like headings line up with the left margin. A heading can be centered (or right justified) by using an attribute in the start tag.

An attribute is just a keyword following by "=" and then a value. For example:

<H1 ALIGN="center">My Name</H1>

makes the heading centered:

My Name


Note: It is best to always put the value of attributes (like "center" above) in double quotes. Some attribute values, like those with spaces in them, must be in quotes.


Paragraphs

When you want a paragraph of text to appear in a web page, you begin it with the <P> tag:
<P>
This is just a silly little paragraph
to show you that putting text on a
separate line does not cause your
browser to format it in that manner.


Note: The end tag, </P>, is optional.

The web browser decides where to break lines based on how wide the browser window is. I.e., the above might appear as:

This is just a silly little paragraph to show you that putting text on a separate line does not cause your browser to format it in that manner.

In other words, the space you type in the source is ignored. The following:

<P>
     This is my first paragraph in a set of 2
paragraphs.  The only point of these paragraphs
is to illustrate that the 2 paragraphs get merged
into one.

     Here is the second paragraph.  It is
real short.
is displayed as:
This is my first paragraph in a set of 2 paragraphs. The only point of these paragraphs is to illustrate that the 2 paragraphs get merged into one. Here is the second paragraph. It is real short.
I.e., it is collapsed into one paragraph and the indentation is lost.

Use <P> at the beginning of each paragraph and they will be displayed as separate paragraphs. For example:

<P>
This is one paragraph. <P> This is another.
displays as:

This is one paragraph.

This is another.


Line Breaks

Sometimes you want to start a new line, but not a new paragraph. Use the <BR> tag in those cases:
Roses are red,<BR>
Violets are blue,<BR>
I like writing HTML,<BR>
And so do you.<BR>
is shown as:
Roses are red,
Violets are blue,
I like writing HTML,
And so do you.
<BR> has no end tag.


Horizontal Rule

Use the <HR> tag to place a horizontal rule (i.e., a separating line) on a page. It requires no end tag. Here is a horizontal rule:

Emphasis

Sometimes you want some text to stand out.

The <EM> tag is used to emphasize text. It is up to the browser how it displays emphasized text (typically, it uses italics). For example:

This is a sentence with an <EM>emphasized</EM> word.
is shown as:
This is a sentence with an emphasized word.

For stronger emphasis, use the <STRONG> tag. For example:

I <STRONG>strongly</STRONG> disagree with you.
is displayed as:
I strongly disagree with you.

Explicit Text Styles

If you want to explicitly use certain styles, there are tags for those too:

All require end tags.


Lists

Sometimes, it is useful to format some text as a list. There are two main kinds of lists, the ordered list, like:

  1. Insert bread.
  2. Select darkness.
  3. Press button.

and the unordered list:

Ordered list just means that the items are numbered. The numbers are generated by the web browser, they aren't part of the source. In an unordered list the items are displayed with bullets.

To create an ordered list, you put the text inside of <OL> tags. Each item must also start with a <LI> tag (for List Item), as in:

<OL>
<LI>Insert bread.
<LI>Select darkness.
<LI>Press button.
</OL>

For an unordered list, it's the same but the tag is <UL> instead of <OL>. The <LI> tag doesn't require an end tag.

List items can be bigger than the short phrases we use above. They can be several paragraphs, contains links, etc.


Images

Besides text, web pages often contains images . If you know the location of an image on someone else's site or have a image yourself, it's easy to include it in a web page.

Images are included using the <IMG> tag. The SRC attribute of that tag is used to specify the location, i.e., the format of the tag is:

<IMG SRC="URL">

To include an image from someone else's site, you can do:

<IMG SRC="http://www.nyu.edu/projects/julian/sparklea.gif">
and to include an image that is in your web directory:
<IMG SRC="tree.gif">

<IMG> has no end tag.


Linking to Other Pages

You can link one page to another whose URL (location) you know.

The anchor tag, <A>, allows you to make clicking on some text go to another web page. Most browsers will indicate an anchor by putting it in a different color and by underlining it:

TV listings

The <A> tag has the following syntax:

<A HREF="URL">Click on this text</A>
where URL is the page's location and the text that will be clicked on goes between an <A> tag and its end </A> tag. For example:
<A HREF="http://tvguide.com">TV listings</A>
is the source for the above link.


Other Tags

The are many other tags that can be used to format a web page.

In addition, there are tags (that we haven't yet discussed) that any well-written page should include, like:

  1. <HTML>
  2. <HEAD>
  3. <BODY>


    Note: Some web browsers may not require those tags.


    An Example Web Page

    Here is an example web page that ties everything that we have learned together. We will practice by reproducing that page.

    We'll start by creating a file, bob.html, to hold the HTML for the main example page. Start up a text editor to create that file:

    % emacs bob.html &
    

    The first thing we'll type into that file are 3 pairs of tags all HTML files should have:

    <HTML>
    
    <HEAD>
    
    </HEAD>
    
    <BODY>
    
    </BODY>
    
    </HTML>
    

    I.e., all the HTML in a file should be inside <HTML> tags. That is broken down into 2 sections: the head of the document, indicated by <HEAD> tags and the body, indicated by <BODY> tags.

    The head section should contain the title of the page (the text shown in the titlebar of the web browser). The body will contain everything that is viewed on the page.

    Let's start by adding a title and a centered heading for the page:

    <HTML>
    
    <HEAD>
    <TITLE>Bob's Page</TITLE>
    </HEAD>
    
    <BODY>
    
    <H1 ALIGN="center">Bob's Corner</H1>
    
    </BODY>
    
    </HTML>
    

    Since we now have a page with some content, we can view it in a web browser:

    1. First, make sure to save the file bob.html in your text editor.
    2. Then, go to a web browser and tell it to open a new page.
    3. Have it load the page bob.html.

    You should see the title on the web browser's titlebar and the heading for the page.

    Next, let's start the 1st section of the page. We'll give this section its own heading (leaving it non-centered this time) and we'll add the first paragraph:

    <H1 ALIGN="center">Bob's Corner</H1>
    
    <H2>Bob</H2>
    
    <P>
    Bob was born in a valley of the Rocky
    Mountains and was raised by trees.  When Bob
    turned 18 he could no longer suppress his
    desire to seek out the lights he had seen
    shining in the distance.  He left the valley
    and discovered the city where he now makes his
    life.
    

    Let's now see what it looks like in the web browser:

    1. Again, first save the file under the text editor. Note that the page doesn't automatically update in the web browser. We have to tell the web browser to load the new version of the page.
    2. Choose the Reload option on the web browser to load the new version.

    Let's continue by adding the 2nd paragraph:

    <P>
    Bob was born in a valley of the Rocky
    Mountains and was raised by trees.  When Bob
    turned 18 he could no longer suppress his
    desire to seek out the lights he had seen
    shining in the distance.  He left the valley
    and discovered the city where he now makes his
    life.
    
    <P>
    It took several years for Bob to master urban
    speech as he had grown up using <EM>tree speak</EM>.
    

    Save the file and reload it into the web browser to see it.

    At the beginning of the 3rd paragraph, we need to put an image. There is an image of a tree on the page:

    http://www.nyu.edu/projects/julian/venicetrees.html

    One way we can include the image is by going to that page and finding its URL. Then, include its URL in an <IMG> tag:

    <P>
    It took several years for Bob to master urban
    speech as he had grown up using <EM>tree speak</EM>.
    
    <P>
    <IMG SRC="http://www.nyu.edu/projects/julian/sparklea.gif">
    

    View Bob's Page to see that it worked.

    The other way to use the image is to download it into your directory:

    1. Go back to the original page containing the image and download the image. (Click on the image using the Right mouse button, choose the Save Image option from the menu.)
    2. Save it as a file called tree.gif in the same directory as your file bob.html.
    3. Change the <IMG> tag so that it refers to that local copy.

    <P>
    It took several years for Bob to master urban
    speech as he had grown up using <EM>tree speak</EM>.
    
    <P>
    <IMG SRC="tree.gif">
    

    View the change in the web browser.

    Next, we will finish the 3rd paragraph with some text that links to a list of Bob's favorite tree sites:

    <P>
    <IMG SRC="tree.gif">
    Bob likes <A HREF="trees.html">trees</A>.
    

    Those links will be on a separate web page that we've decided to name trees.html. We'll work on that page when we're done with Bob's main page.

    We can finish up Bob's main page with its 2nd section, for "Favorite Poem":

    <H2>Favorite Poem</H2>
    
    <P>
    Bob's favorite poem is <EM>Ode to a
    Duck</EM>.  Here it is:
    
    <P>
    O' how the duck doth<BR>
    Glide o'er the water<BR>
    And pronounce his majestic<BR>
    Presence with a <STRONG>Quack! Quack!</STRONG><BR>
    

    Since each line of the poem must start on a new line, note the use of the <BR> tags.

    Now, we're ready to work on the subpage, trees.html. In your text editor, open a new file trees.html.

    Remember, like all web pages, it needs some basic tags:

    <HTML>
    
    <HEAD>
    
    </HEAD>
    
    <BODY>
    
    </BODY>
    
    </HTML>
    

    Again, we'll start by adding a title and main heading for the page:

    <HTML>
    
    <HEAD>
    <TITLE>Bob's Tree Page</TITLE>
    </HEAD>
    
    <BODY>
    
    <H1 ALIGN="center">Trees for Everyone</H1>
    
    </BODY>
    
    </HTML>
    

    Now, we want to add a list of 3 web sites. We'll choose to put them in a unordered list:

    <H1 ALIGN="center">Trees for Everyone</H1>
    
    <P>
    Here are some of Bob's favorite tree links:
    
    <UL>
    <LI>
    <LI>
    <LI>
    </UL>
    

    Each list item is a link:

    <P>
    Here are some of Bob's favorite tree links:
    
    <UL>
    <LI><A HREF="http://www.nyu.edu/projects/julian/venicetrees.html">Tree
    Artwork</A>
    <LI><A HREF="http://www.vtonly.com/fallfoto.htm">Vermont Fall Foliage</A>
    <LI><A HREF="http://www.treeguide.com/treeguide/index.htm">Tree Taxonomy</A>
    </UL>
    

    Now that the page of tree links is complete, let's save it. Then, go back to the web browser and see if our link to it from Bob's main page works.

    The only thing left is to add some horizontal rules, with <HR>, to Bob's pages.


    Final Notes

    Remember, if your pages are to be viewed by others, you may have to change the permissions on the HTML and image files that make up our web pages.

    Also, keep in mind that you can't technically just grab text, HTML or images from anywhere. In general, those are all protected by copyright laws.


    BU CAS CS - Creating Web Pages with HTML
    Copyright © 1993-2000 by Robert I. Pitts <rip at bu dot edu>. All Rights Reserved.