Chapter Two - Lesson One - The Basics - Page Two , "About Us" page

Page Two - "About Us" page

Now that you have your index page finished, you are going to write a page that tells about the company. Since you are going to keep the same page design and have the linking buttons on the left side of the page, the easiest thing to do would be to make a copy of your index page and name it with the new file name. Change the heading in the title code to read "About Us" on your index page and delete everything that you wrote within the second table cell that comes after the main title graphic, and rename the file as aboutus.html.

Type in the closing code for centering and a line break after the title image so that the beginning of your second data cell looks like the code below.

You are going to have three opening paragraphs of text below your title graphic, and then you will have a horizontal rule that will separate the this top section from the section that will talk about three of the company's travel packages. In order for the paragraphs to have their first lines indented, you will need to type in several forced non-breaking space codes after the opening paragraph codes.

When typing large sections of text for a webpage, it is better to hit your return key at the end of a line and continue to type on the next line just as if you were typing on an old style typewriter. As long as you leave one blank space at the end of each line to allow for space between that line's last word and the next line's first word, it will show up as a continuous sentence and only break when it needs to with the browser. Typing your text this way will make it easier to read if you want to check the source code directly from your browser. If you are using Simpletext on a Mac, and decide to just let the text automatically wrap without actually breaking it yourself with your return key, it will show up as one very long continuous line in your source code when you view the code from your browser. Normally this won't be a big deal, but if you need to check it for errors and want to do a quick check by viewing the source code with the browser instead of opening up the Simpletext file, it would be easier to read if you have manually typed in line breaks.

Manually typing in line breaks with your return key in your HTML file will not create a line break when the file is viewed in the browser. In order to create actual forced line breaks for your page that will show up when viewed, you have to either type your text within a paragraph code or use a line break code.

For this page, you will also be using several non-breaking space codes to indent the text lines in the first few paragraphs. The HTML code for a non-breaking space is   without any spacing between the letters.

Type the following for the first two paragraphs for your page:

With over 15 years experience in the travel industry, our staff can easily take care of all your travel needs.

    Our expertise is in special packages for the more adventurous traveler who likes to experience nature and view wildlife up close. We offer an array of exciting and exotic tours to our customers. Listed below are just a few of the many tours that we can organize for our clients. If you do not see the sort of adventure that you are looking for listed here, then just give us a call, or complete our <A HREF="orderform.html"> order form</A> to receive more information.

    Guide Books and photo journals of our trip destinations' major tour sites are also available to order.

 
<HR>

The next section will contain some bulleted lines, and a graphic that will be aligned on the right side of the text. Because the graphic is much larger vertically than the space the text will take up, you will need to ad several line breaks after the text so that the following section will be pushed down far enough to not conflict with this section.

<IMG SRC="africa.gif" ALIGN=RIGHT><IMG SRC="africantour.gif"> 
Spend three weeks in the African tundra and see wildlife in it's native
habitat at close range. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Three week guided jeep tour. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Five star lodging accommodations for first two and
last two nights of trip. 
<IMG SRC="bullet.gif" ALIGN=LEFT>All meals included. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Airfare extra.

Since we will be using two graphics for the next section with a very small amount of text, it will be easier to put them inside a table so that the text will appear to flow correctly. Because we want the heading and the first bulleted line for this section to be on the right side of the first graphic, and the remaining bulleted lines to be on the left side of the second graphic, we will actually need to type the latter bulleted lines inside the first data cell of the table, and the section heading and first bullet line in the second data cell.

<TABLE WIDTH=100% BORDER=0>
<TR>
<TD VALIGN=TOP>
<IMG SRC="southamerican.gif"> 
<IMG SRC="bullet.gif" ALIGN=LEFT>Five star lodging accommodations for first and
last nights of trip. 
<IMG SRC="bullet.gif" ALIGN=LEFT>All meals included. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Airfare extra. 
</TD>
<TD VALIGN=TOP>
<IMG SRC="samtour.gif"> 
Enjoy any one of the variety of South American cultures and landscapes. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Guided tours of Rio De Janeiro, Andes Mountains in
Chile, and the Amazon River with it's surrounding rainforest. 
<IMG SRC="birds.gif">
</TD>
</TR>
</TABLE>

Add one line break for a little more space between this section and the next, and then type the code for the third travel package section followed by several line breaks and a horizontal line code.

<IMG SRC="australian.gif" ALIGN=RIGHT><IMG SRC="australiatour.gif"> 
Explore the nightlife in Australia's cities, or take a tour of the outback. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Special rates for tour packages of both Sidney and
Melbourne. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Both air and jeep tours of the outback
available. 
<IMG SRC="bullet.gif" ALIGN=LEFT>All meals included. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Airfare extra. 
 
<HR>

To finish off this page, center a bold italicized line stating to contact the company for more information, then add the ending data cell, row, and table codes.

<CENTER>
See travel agent for prices, schedules, and space availability.
</CENTER>

 

</TD>
</TR>
</TABLE>

</BODY> </HTML>

View this page and see how it comes together.

You might notice that the type in the second data cell comes very close to the edge of the colorbar. There are two ways to fix this problem. One way is to change the code for the first data cell to allow for a specified width, but since we are not defining the width of the second cell, doing this does not always work. In cases like this, it is easier to add another line of code after the bullets that will allow for a completely transparent graphic to be used as spacing element. A spacing graphic has already been created for this purpose, but if you want to make your own sometime, all you need to do it to create a small solid black or white graphic in PhotoShop and export it as a GIF89a file, choosing the color you made it to be the transparent color. Using a transparent spacing graphic is a quick and easy way that I have discovered to force the browser to cooperate when it doesn't want to. You will not commonly find this type of solution on the internet, but it beats having to stick your nose in a ten inch thick HTML book, trying to find a more conventional solution, instead of getting on with your life......it's just "one of those things" you need to do from time to time.

Go back to where you have your bullets set in your file, and add the following code after the code for the e-mail bullet.

Your entire file should now look like this:

<HTML>
<HEAD>
<TITLE>About Us</TITLE>
</HEAD>
<BODY BACKGROUND="backgrnd.gif">

<TABLE WIDTH=100% BORDER=0>
<TR>

<TD VALIGN=TOP>
<A HREF="index.html">
<IMG SRC="homebutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 

<A HREF="aboutus.html">
<IMG SRC="aboutusbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 
<A HREF="orderform.html">
<IMG SRC="orderformbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 

<A HREF="mailto:[email protected]?Subject=Request for more information">
<IMG SRC="emailbutton.gif" WIDTH=88 HEIGHT=70 BORDER=0></A> 

<IMG SRC="spacer.gif" WIDTH=100 HEIGHT=5 BORDER=0> 
</TD>

<TD VALIGN=TOP>
 
<CENTER><IMG SRC="maintitle.gif"></CENTER> 

    With over 15 years experience in the travel industry, our staff can easily take care of all your travel needs.

    Our expertise is in special packages for the more adventurous traveler who likes to experience nature and view wildlife up close. We offer an array of exciting and exotic tours to our customers. Listed below are just a few of the many tours that we can organize for our clients. If you do not see the sort of adventure that you are looking for listed here, then just give us a call, or complete our <A HREF="orderform.html">order form</A> to receive more information.

    Guide Books and photo journals of our trip destinations' major tour sites are also available to order.

 
<HR>
 

<IMG SRC="africa.gif" ALIGN=RIGHT><IMG SRC="africantour.gif"> 
Spend three weeks in the African tundra and see wildlife in it's native habitat at close range. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Three week guided jeep tour. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Five star lodging accommodations for first two and last
two nights of trip. 
<IMG SRC="bullet.gif" ALIGN=LEFT>All meals included. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Airfare extra. 

 

<TABLE WIDTH=100% BORDER=0>
<TR>
<TD VALIGN=TOP>
<IMG SRC="southamerican.gif"> 
<IMG SRC="bullet.gif" ALIGN=LEFT>Five star lodging accommodations for first and last
nights of trip. 
<IMG SRC="bullet.gif" ALIGN=LEFT>All meals included. 
<IMG SRC=�bullet.gif� ALIGN=LEFT>Airfare extra. 
</TD>
<TD VALIGN=TOP>
<IMG SRC="samtour.gif"> 
Enjoy any one of the variety of South American cultures and landscapes. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Guided tours of Rio De Janeiro, Andes Mountains in
Chile, and the Amazon River with it's surrounding rainforest. 
<IMG SRC="birds.gif">
</TD>
</TR>
</TABLE>

 

<IMG SRC="australian.gif" ALIGN=RIGHT><IMG SRC="australiatour.gif"> 
Explore the nightlife in Australia's cities, or take a tour of the outback. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Special rates for tour packages of both Sidney and
Melbourne. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Both air and jeep tours of the outback
available. 
<IMG SRC="bullet.gif" ALIGN=LEFT>All meals included. 
<IMG SRC="bullet.gif" ALIGN=LEFT>Airfare extra. 
 
<HR>
 
<CENTER>
See travel agent for prices, schedules, and space availability.
</CENTER>

 

</TD>
</TR>
</TABLE>

</BODY>
</HTML>

View your page again and see how the spacing graphic forced the second cell over to the right to allow more space between the color bar and the text.

Hosted by www.Geocities.ws