HTML Tutorial

This tutorial acquaints you with the basics of using HomeSite for HTML authoring. Completing the tutorial produces a Web page that looks like the one below. This page combines text, color, layout, formatting, and links in a functional design. The techniques you learn here apply to building Web content in general.

Before you create the Web page, you need to know a few basic concepts about HTML. Then we can start the hands-on tutorial, and learn about the HTML tags that we use in our sample Web page.

HTML basics

If you are new to HTML (Hypertext Markup Language), take heart. The rapid acceptance of HTML is based on its simple, logical syntax and plain language.

An HTML document is just like an unformatted text document in that it primarily contains words-and some pictures if you are lucky. However, an HTML document can also have links to other Web pages, media content such as audio and video clips, forms to get user input, programs to retrieve data from a database, programs to make calculations, and so on.

The other big difference between an HTML document and a plain text document is that an HTML document is "marked up" with tags. The next section explains this.

Tags and attributes

An tag, also called an element, contains instructions for a Web browser such as Netscape or Internet Explorer; it explains how the browser should display or otherwise handle a part of the document. For example, the Comment tag instructs the browser to ignore its content; the browser does not display or process anything between <!-- and -->. As another example, the Bold tag instructs the browser to bold all text between <b> and </b>.

Tags also indicate the basic structure of the document: its header, title, body, and, within the document body, any number of structural elements.

Tags are enclosed in angular brackets made of the less-than and greater-than signs on your keyboard (< >).

There are two types of tags: container tags and empty tags.

Most HTML tags have one or more attributes. Tag attributes provide additional information about a tag. For example, the Image tag has a required Source (SRC) attribute and an optional Border attribute. The Source attribute specifies where the image file is located, and the Border attribute specifies how wide of a line to display around the image. (Image has other attributes too, as we will see later in this tutorial.)

An attribute belongs in the start tag: <TAG_NAME ATTRIBUTE="value">. One example of this is: <P ALIGN="CENTER">. Attributes are separated from one another by a single space; for example, <IMG SRC="images\Banner.gif" BORDER="0" ALT="Banner">. There should be no spaces after the left bracket (<) or before the right bracket (>). Tag and attribute names are not case-sensitive, so you can use either <HTML> or <html>. However, some attributes values, particularly file names, are case-sensitive.

Many tags can be nested (placed inside other tags), but tags should never overlap:


Note

Many browsers can display <P> and other container tags even if they do not have an end tag, and also display code that is incorrectly nested. However, it's a good practice to write well-formed HTML-always including the end tag and correctly nesting tags-so your code displays correctly in less forgiving browsers, and so your code can also be processed by XHTML and XML parsers.


An HTML sample

Here's a brief HTML sample. Note that the only text that actually displays in a Web browser is My Home Page. The rest is invisible because it is enclosed in tag brackets.

<P ALIGN="Center">
<FONT SIZE="+3"><B>My Home Page</B></FONT>
</P>

In this sample, the <P> and <FONT> tags contain attributes specifying how the text should appear. The attribute ALIGN="Center" tells the browser to center the text on the page, and SIZE="+3" tells it to display the text three sizes larger than normal.

Requirements of an HTML document

When you open a new document in HomeSite, you start with more than a blank page-the default template contains the tags required for any valid HTML document. These tags, also called elements, are shown below:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  
  <HTML>
  <HEAD>
    <TITLE>Untitled</TITLE>
  </HEAD>
  
  <BODY>
  
  </BODY>
  </HTML>

These tags must be included in every HTML page. The following table briefly describes each of these required elements.
Tag
Description
DOCTYPE
Declares the version of HTML that you are using
HTML
Marks the beginning and end of the HTML code
HEAD
Contains data about the document, including the title, metadata (data describing data), scripts, and a referenced style block or style sheet file
TITLE
Contains the title of the document, which is displayed in the title bar of the browser and is important for bookmarking documents (Favorites) and search engine results
BODY
Contains everything that will be rendered by the browser

Mastering HTML

This tutorial introduces you to HTML and provides an opportunity for you to create a simple HTML page. To master HTML, you may want to take a course or learn from the ample HTML source code that is readily available on the Internet.

And, of course, practice makes perfect!

There are many HTML courses available, including Macromedia's Fast Track to HTML course. There are also many online tutorials and references whose scope exceeds this tutorial. You can search the Web and choose your favorites. You could begin with the NCSA Beginner's Guide to HTML and, after creating Web pages for a while, reference the most recent HTML specification from the World-Wide Web Consortium (W3C) to answer your advanced questions. See also "Developer Resources".

For a hands-on learner, surf the Web. When you find something you like, view its source (for example, in Internet Explorer, right-click the area of the page you like and select View Source). The source opens in a word processing program. If you like what you see, save the file to your local machine and use it to create your own Web page. After doing this for a while, you may become so proficient that you can also identify and add scripts to your Web pages, to add interactive content.


Note

Not every site has useful HTML source. Many Web sites now use minimal HTML pages as a basic framework from which to execute server-side code; this code is not visible in the source. Other Web pages have exceedingly complex and unreadable source. Finally, while HTML source is free domain, the actual text, images, and other content may not be. Please respect all copyright notices.


Getting started in HomeSite

Before beginning this tutorial, you should become familiar with the HomeSite workspace. The material presented here assumes a working knowledge of user interface elements such as the toolbars, QuickBar, Files tab, and the Editor. These components are described in "Exploring the Workspace".

HomeSite's drag-and-drop feature and tag editors automatically add the correct syntax-such as quotes, brackets, and the equal sign-when you insert code. If you edit the code manually, be sure to maintain the correct syntax.

By default, HomeSite closes tags for you. For example, when you type <H1>, HomeSite automatically inserts </H1> after the cursor. This is a great convenience once you are used to it, but until then, make sure you do not have two end tags anywhere, for example <H1>My Heading</H1></H1>.

Opening a new document

When you first open HomeSite, it displays a new, untitled document. You can also choose to open a new document at any time.

To open a new document:

The new document contains the tags required for any valid HTML document.

Setting the working directory

All the files you need to complete this sample page are in a single directory. If you accepted the defaults when installing HomeSite, the working directory is C:\Program Files\Macromedia\HomeSite 5.0\Help\Using HomeSite\tutorial files. If you select this directory in the Files tab, you can open and save files for the tutorial without needing to find this directory again.

We're using a single directory to make the tutorial easier, but once you develop Web content on your own, it's a good practice, organizationally, to keep your supporting files (images, media, scripts) in separate folders from your document files.

Creating a new Web page

To create a new Web page in HomeSite, you just need to open a new document, give it a title, and save it. We will add the content in the next section.

You can preview the finished sample page at any time by opening the tour_html.htm file located in the tutorial files directory.

To create the tutorial Web page:

  1. Open a new document.

    For help, see "Opening a new document".

  2. Set the working directory to the tutorial files directory. (

    For help, see "Setting the working directory".

  3. Select Untitled between the <TITLE></TITLE> tags and enter Archaeology Tours.
  4. Select File > Save from the menu to open the Save dialog box.
  5. Type tour.htm in the File name box, make sure the Look in box shows the tutorial files folder, and click Save.

    Saving the new Web page ensures that HomeSite adds the correct file path to links that you create by dragging and dropping images and other files into the editor.

Adding code and content

Now we're ready to get to work on our page.

Web browsers ignore line breaks, tabs, and spaces in HTML documents. As you build the page, you can add line breaks and indent to make your code more readable.

The following procedures contain pictures of the toolbuttons they reference. They also list menu commands and shortcut keys, where applicable.

Inserting comments

You can insert comments that do not display in the browser for a variety of purposes, such as to remind yourself to do something, to hide a section that is not yet ready for public viewing, and to make the code easier for you and others to review and edit later. You are encouraged to insert comments liberally as you work, for example to introduce or explain the purpose of a code block.

To insert a comment:

By default, the Comment button does not appear in any of HomeSite's toolbars or QuickBars. But you can add it to the HomeSite workspace. For instructions, see "To add a button to a toolbar:". If you are using the default HomeSite workspace, you may want to add the Comment button (pencil icon) to the View toolbar, so the button appears in the top center of your workspace.

Body tag

Our sample page is for a travel Web site. We want the site to be pleasing to the eye and easy to navigate, so we will start by adding an attractive page background and then selecting a complementary color for the text.

To add Body content:

  1. Click inside the <BODY> tag and select Tag > Edit Current Tag from the menu to open the Tag Editor - BODY dialog box.

  2. Click the Browse button to the right of the Background Image box.
  3. In the Open dialog box, select the image1.jpg file from the tutorial files folder and click Open.

    The file name is inserted in the Background Image box. Images are graphics files (usually with a GIF or JPG extension) inserted into HTML documents. They can fill an entire page or be sized to fit just a portion of a page.

  4. Open the Text Color drop-down list and choose Navy.
  5. Click OK to apply your changes and close the Body dialog box.

    The resulting HTML code looks like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    
    HEAD>
      <TITLE>Archaeology Tours</TITLE>
    </HEAD>
    
    <BODY BACKGROUND="image1.jpg" TEXT="Navy">
    </BODY>
    
    </HTML>
    

Paragraph tag

The paragraph <P></P> tag is the most basic text container. Paragraphs appear in the browser with a blank line before them. Text inside paragraphs can be aligned to the left, center, or right.

To add a paragraph and enter text:

  1. Position the cursor on a line after the <BODY> tag line.

    Click the Paragraph button on the Common QuickBar (not the vertical toolbar) or press Shift+Ctrl+P to insert a paragraph tag.


    Tip

    The <P> tag does not require a closing tag, but you can check the Include closing </P> tag option in the Markup Languages Settings pane if you want one inserted. To access this pane, select Options > Settings > Markup Languages.


  2. After the <P> tag, enter: This page was created with HomeSite, which you can download from Macromedia's Web site.
  3. To view your page, click the Browse tab or press F12.
  4. Click the Edit tab (F12) to return to the HTML code.

Let's make HomeSite stand out a bit in that sentence.

Bold tag

With the <B> tag, you can highlight a single character, word, or text block on the page.

To add bold formatting:

  1. Select the word HomeSite in the sentence you just enterd.
  2. Click the Bold button on the Fonts QuickBar.

  3. Check it in the Browse tab.

    That's better!

  4. Click the Save button on the Standard toolbar or select File > Save (Ctrl+S).

Next, you'll create a link from this paragraph to Macromedia's company Web site.

Anchor tag

Links, or hyperlinks, are the heart of the World Wide Web. They let you move from page to page with the click of a mouse and they provide the connections between Web pages and other resources.

Links are created with the Anchor tag, <A></A>, and require the HREF attribute. HREF specifies the page to display when the link is selected. Links are usually identified on a page by special link text formatting, such as a distinct color or underlining. Many sites also use images coded with the Anchor tag, so users can click an image instead of a text link to go to a new page.

To insert a link:

  1. At the end of the line you just enterd, select the text Macromedia's Web site.
  2. Click the Anchor button on the Common QuickBar or press Shift+Ctrl+A to open the Tag Editor - A (HTML) dialog box.

  3. Enter http://www.macromedia.com in the HREF box. The text selected in step 1 displays in the Description box.
  4. Click OK to insert the link in your document.

    The line should now look like this:

    <P>This page was created with <strong>HomeSite</strong>, which you
    can download from <A HREF="http:/
    /www.macromedia.com">Macromedia's Web site</A>.</P>
    

Image tag

We used an image file for the page background. Now we will place an image on the page by coding the <IMG> tag. Several attributes are available for the <IMG> tag, but only one is required, SRC, which specifies the file path where the image is located. The <IMG> tag does not have an end tag (<.../>).

By default, an image is treated as an inline image, that is, the browser renders it as if it were a character in the line of text. The bottom of the image is aligned with the base of the line, and the image's position within the text remains the same regardless of how the browser wraps the lines. You can set images off by themselves by placing them in separate paragraphs or table cells.


Note

The image's source file is unaffected by changes made to an image's attributes in an HTML document.


To insert the Greek Column image:

  1. Position the cursor below the first <P> tag line. Click the Image button on the Common QuickBar or press Shift+Ctrl+I to open the Image dialog box.

  2. Click the Browse button next to the Source box.
  3. Select greekcolumn.gif from the tutorial files folder and click Open.

    The greekcolumn.gif file name is entered in the Source box.

  4. Type Greek Column in the Alt. Text box.

    This text description of the image appears on the page if the image cannot be displayed for any reason. This text is also available to visually impaired users.

  5. Select RIGHT from the Align drop-down list.

    This attribute forces the text to the left of the image.

  6. Click OK.

    The tag should look like this, although the WIDTH and HEIGHT values may differ:

    <IMG SRC="greekcolumn.gif" WIDTH=111 HEIGHT=187 BORDER=0
    ALIGN="RIGHT" ALT="Greek Column">
    

Heading tags

The next text in the page is a heading. HTML allows six levels of headings-from <H1>, the largest font, to <H6>, the smallest font. Heading tags can contain formatting attributes, but we will just accept the browser default for this tutorial.

To insert the Archaeology Tours heading:

  1. Position the cursor on a line below the <IMG> tag.
  2. Click the H1 button on the Fonts QuickBar or select Tags > Heading 1.

  3. With the cursor between the <H1> and </H1> tags, enter Archaeology Tours.
  4. Click the Browse tab and notice that the text is not centered.

    Let's center it.

  5. Place your cursor inside the <h1> tag and select Tag > Edit Current Tag.
  6. In the H1 Tag Editor, select center in the Align box, and click OK.

    The tag should look like this:

    <H1 ALIGN="CENTER">Archaeology Tours</H1>
    

Horizontal Rule tag

Let us add a visual element to separate the heading from the next section. We will accomplish this by adding a horizontal rule.

To add a horizontal rule:

  1. Position the cursor on a line below the heading.
  2. Click the Horizontal Rule button on the Common QuickBar or select Tags > Horizontal Rule to open the <HR> editor.

  3. Leave the Align option set to the default value, Center.
  4. Select the No Shading option.
  5. Type 80% in the Width box (note you can specify widths in percentages of the page width or in pixels)
  6. Click the Browser-specific tab and choose Navy from the Color drop-down list.
  7. Click OK.

    The code looks like this:

    <HR WIDTH="80%" COLOR="Navy" NOSHADE>

Font tag

We want the next line of text to stand out on the page, so we will add some special formatting that applies to just that line.

The <FONT> tag allows you to specify the font face, the size in relative or absolute pixel values, and the text color. The ALIGN attribute allows you to set the horizontal alignment of the text on the page (left, center, right, or justify).

To create the Travel Back in Time paragraph:

  1. Position the cursor on a line below the <HR> tag.
  2. Insert a <P> tag.
  3. After the <P> tag, enter: Travel Back in Time

    The tag should look like this:

    <P>Travel Back in Time</P>
    

    Let's use the <P> editor to complete this tag.

  4. Click inside the <P> tag and select Tag > Edit Current Tag from the menu.
  5. Select center from the Align box and click OK to close the editor.

    The ALIGN attribute is added to the tag.

  6. Select the Travel Back in Time text.
  7. Click the Font button on the Fonts QuickBar to open the <FONT> editor.

  8. Choose Maroon from the Color drop-down list.
  9. Choose +3 from the Relative + drop-down list in the Size box.
  10. Click the HTML 4.0 tab.
  11. Choose Arial from the top Font Face drop-down list.
  12. Click OK. The tag now looks like this:
    <P ALIGN="Center"><FONT FACE="Arial" SIZE="+3" COLOR="Maroon">
    Travel Back in Time</FONT>
    </P>
    

Break tag

Web browsers ignore line breaks, tabs, and extra spaces in documents. HTML elements such as paragraphs, lists, and headings set their own spacing, so if additional spacing is needed, it must be coded. An easy way to set spacing is by adding a <BR> tag. This can be done to break a line or to separate page content.

To insert a line break:

  1. Position the cursor above the Travel Back in Time line.
  2. Click the Break button on the Common QuickBar.

  3. Add three more <BR> tags to get the right spacing.
  4. Check the spacing in the Browse tab and adjust it if needed.

The rest of the Archaeology Tours page is laid out as a table, which you'll create next.

Using tables for page formatting

HTML tables allow for more interesting page compositions. Tables are relatively complex compared to the other tags covered so far, so it's worth spending some time discussing tables in general before looking at the specific table code in the Archaeology Tours page.

HTML tables are built in table tags, <TABLE></TABLE>. The table's basic structure is defined by table row tags, <TR></TR>. Inside table rows are table cells, marked with table data tags, <TD></TD>. You can also use table header tags, <TH></TH>, which are identical to table data tags except that their text is bold and centered horizontally in the data cell by default.

Spanning rows and columns

You can cause table data or table headers to span rows or columns by using the ROWSPAN and COLSPAN attributes, which produce effects similar to merging cells in a spreadsheet or word processor table.

If you plan to support multiple browsers, you must test the table code in those browsers. For help, see the list of browser testing sites at http://builder.cnet.com/webbuilding/0-7255-8-5801921-1.html.

Other table attributes

There are a number of other attributes that can be used within the <TABLE> tag. The following table lists the most important table attributes.
Tag
Attribute
Effect
TABLE
CELLSPACING=pixel value
Sets the distance between the edges of cells
CELLPADDING=pixel value
Sets the distance between edges of cells and their contents
BORDER=pixel value
Draws a border of a specified width around all cells and the entire table
BGCOLOR=color
Specifies a background color for the entire table
TD, TH, TR
ALIGN=Left, Right, or Center
Aligns the contents of the data cell or row horizontally
VALIGN=Top, Middle, or Bottom
Aligns the contents of the data cell or row vertically
BGCOLOR=color
Specifies a background color for the data cell or row

To build the Archaeology Tours table:

  1. Position the cursor on a line below the Travel back in time! paragraph.
  2. Click the Table Wizard button on the Tables QuickBar.

    The Table Wizard opens with the default table layout of two columns by two rows.

  3. Click the top left cell of the table layout, then click the Row Span + button to make the cell span two rows.

    Color-coding shows the cell now fills the entire left column.

  4. Click Next to open the Table Properties screen.
  5. Set the Alignment to left, Cell Spacing to 0, Cell Padding to 3, and Border Size to 0.
  6. Click Next to open the Cell Properties screen.
  7. Click the top-right cell and choose center from the Horizontal drop-down list.
  8. Click the bottom-right cell and set the Horizontal property to center.
  9. Click Finish.

    The code should look like this:

    <TABLE CELLSPACING="0" CELLPADDING="3" BORDER="0">
    <TR>
      <TD ROWSPAN="2"></TD>
      <TD ALIGN="center"></TD>
    </TR>
    <TR>
      <TD ALIGN="center"></TD>
    </TR>
    </TABLE>
    

Notice how HomeSite indents the <TD> blocks in the code above. This coding convention makes it easier to see the table structure. This hierarchical display of table elements is coded by nesting the row and cell tags within the table tag.

In the following procedures, you'll add text and formatting to the table cells.

Entering text in tables

Content for HTML tables is entered in the table cells using the table data <TD> and table header <TH> tags.

Table text is formatted in the same way as paragraph text, by coding the <FONT> tag.

To enter text in table cells:

  1. Position the cursor between the <TD></TD> tags in the line that contains the ROWSPAN="2" attribute.
  2. Insert a <P> tag, so that the line looks like this:
    <TD ROWSPAN="2"><P></P></TD>
    
  3. Position the cursor after the <P> and select the File > Insert File menu command.
  4. Select Insert Text 1.txt from the tutorial files folder and click Open.

    The text is inserted in the paragraph. The code now looks like this:

    <TD ROWSPAN="3"><P>Welcome to Archaeology Tours, the first choice of
    travelers and adventurers. Our Mediterranean Cruise features
    luxury accommodations, with stops in the following ancient
    cities:</P></TD>
    

The rest of the content of this cell consists of a bulleted list, which we'll get to a bit later. First, let's format the cells in the right column, beginning in the top cell.

Using the table tag editors

After you create a table with the Table Wizard, you can refine the layout by editing the properties of its individual elements. To change these properties, use the <TR> and <TD> tag editors.

To format table cells:

  1. Click inside the <TD> tag that follows the <TD> containing the Welcome text and select Tag > Edit Current Tag from the menu.

    The alignment value you set in the Table Wizard is displayed in the Tag Editor.

  2. Click the HTML 4.0 tab and click the Background Color drop-down list. The color we want, light green, is not listed. For now, select Yellow and click Apply.
  3. In the Editor pane, replace "Yellow" with "LightGreen".
  4. Go to the next <TD> tag and repeat the last two steps to set the background color of the bottom-right cell to "LightBlue".

    The code for the entire table should look like this:

    <TABLE CELLSPACING="0" CELLPADDING="3" BORDER="1">
    <TR>
      <TD ROWSPAN="2"><P>Welcome to Archaeology Tours, the first choice
      of travelers and adventurers. Our Mediterranean Cruise features
      luxury accommodations, with stops in the following ancient
      cities:</P></TD>
      <TD ALIGN="center" BGCOLOR="LightGreen"></TD>
    </TR>
    <TR>
      <TD ALIGN="center" BGCOLOR="LightBlue"></TD>
    </TR>
    </TABLE>
    

If those colored cells in the left column look a bit small, do not worry. We will size them by putting text in them.

Adding a link

Unlike the Macromedia link you coded earlier, these next links are to documents in the file system and do not require the http://www prefix.

In this section, you will learn two ways to add links.

To insert a link using the Anchor dialog box:

  1. Position the cursor between the <TD></TD> tags for the top right cell (the cell with the light green background) and enter: Purchase Cruise Tickets.
  2. Select the Purchase Cruise Tickets text, then click the Anchor button on the Common toolbar.

    The selected text appears in the Description box.

  3. In the HREF box, enter tickets.htm, and click OK to insert the link code.
  4. Select Purchase Cruise Tickets again and click the Bold button.

    The table cell tag looks like this:

    <TD ALIGN="CENTER" BGCOLOR="LightGreen">
      <A HREF="tickets.htm"><strong>Purchase Cruise Tickets</strong></A>
    </TD>
    

To insert a link using drag and drop:

  1. Drag the map.htm file from the tutorial files folder and release the mouse button between the <TD></TD> tags for the bottom right cell (the cell with the light blue background).

    The link text is filled in for you. The text between the anchor tags (<A>...</A>) is from map.htm, in the <TITLE> tag.

  2. Select Interactive Tour Map and click the Bold button from the Fonts QuickBar.

    The code looks like this:

    <TD ALIGN="CENTER" BGCOLOR="LightBlue">
      <A HREF="map.htm"><strong>Interactive Tour Map</strong></A>
    </TD>
    

In the next section, you complete the table text by creating a list.

Structuring page content in lists

The remainder of the large data cell on the left is filled by an unordered list. Lists are one of the most frequently used organizational elements in Web authoring, just as they are in printed documents.

They are fairly easy to implement and offer several useful ways to structure information in HTML documents, so we will present a brief overview of list elements before resuming the tutorial.

List types

HTML includes several list tags. Numbered lists are called ordered lists and use the <OL></OL> tag. Bulleted lists are called unordered lists, and use the <UL></UL> tag. Individual list items for either type of list are specified by the <LI> tag, which does not require an end tag.

To create a bulleted list:

  1. Position the cursor in the first cell of the table (the cell with the Welcome text) between the </P> and </TD> tags.
  2. Click the Quick Lists button on the Lists QuickBar to open the List dialog box.

  3. Change the number of rows to 3.
  4. Under List Style, click Unordered.
  5. Leave the Type box blank to accept the default bullet style for the list.
  6. Click OK.

    The code looks like this:

    <UL>
      <LI>
      <LI>
      <LI>
    </UL>
    
  7. Drag crete.htm from the Files tab to the space after the first <LI> in the list, drag istanbul.htm to the space after the second <LI>, and drag alexandria.htm to the space after the last <LI> in the list.

    The list is complete, containing a link for each city.

    We will finish the table cell by inserting a paragraph after the list.

  8. Put the cursor between the </UL> and </TD> tags and click the Paragraph button.
  9. Select File > Insert File, click the Insert Text 2.txt file, and click Open.

    The following text is entered between the <P></P> tags:

    Follow our guides back in time as you cruise the beautiful waters of antiquity and visit important archeological digs.

You have now completed the HTML tags tutorial. Congratulations!

Next, see the "Cascading Style Sheets Tutorial" to explore a different method of designing Web pages. Style sheets are optimal when creating more than one Web page for a site, because they standardize the look of every page in your site.

The complete page code

Here is the entire Archaeology Tours page code. Code comments are between the <!-- and --> comment tags, and serve to document the page for future review.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>Archeology Tours</TITLE>
</HEAD>

<!-- add background image -->
<!-- set text color -->
<BODY BACKGROUND="image1.jpg" TEXT="Navy">

<!-- link to Macromedia -->
<P>This page was created with <B>HomeSite</B>, which you can find at <A
HREF="http://www.macromedia.com">Macromedia's Web site</A>.</P>

<!-- insert image -->
<IMG SRC="greekcolumn.gif" WIDTH=111 HEIGHT=187 BORDER=0 ALIGN="RIGHT"
ALT="Greek Column">

<!-- add header 1 -->
<H1 ALIGN="CENTER">Archeology Tours</H1>

<!-- add horizontal rule -->
<HR WIDTH="80%" COLOR="Navy" NOSHADE>

<!-- add line breaks -->
<BR><BR><BR><BR>

<!-- set red (maroon) paragraph text -->
<P ALIGN="CENTER"><FONT FACE="Arial" SIZE="+3" COLOR="Maroon">Travel
Back in Time</FONT></P>

<!-- begin table -->
<TABLE CELLSPACING="0" CELLPADDING="3" BORDER="0">

<!-- first column spans two rows -->
<TR>
  <!-- begin left table cell --> 
  <TD ROWSPAN="2"><P>Welcome to Archaeology Tours, the first choice of
travelers and adventurers. Our Mediterranean Cruise features
luxury accommodations, with stops in the following ancient
cities:</P>

  <UL>
    <LI><A HREF="crete.htm">Crete</A>
    <LI><A HREF="istanbul.htm">Istanbul</A>
    <LI><A HREF="alexandria.htm">Alexandria</A>
  </UL>

<P>Follow our guides back in time as you cruise the beautiful waters of
antiquity and visit important archaeological digs.</P>
  </TD>
    
  <!-- begin top right cell -->
  <TD ALIGN="center" BGCOLOR="LightGreen"><A
HREF="tickets.htm">Purchase Cruise Tickets</A></TD>
</TR>
<!-- begin second row -->
<TR>
    <!-- begin bottom right cell -->
  <TD ALIGN="center" BGCOLOR="LightBlue"><A HREF="map.htm">Interactive
Tour Map</A></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Comments