Chapter II - Lesson One - The Basics

If you have not already done so, download a copy of all of the graphics for lessons one and two for a PC HERE, or if you are using a Mac, you can get them HERE. The main objective for this tutorial is to teach you the basic mechanics of how to put together a webpage. This tutorial will not spend a lot of time on the creativity (or lack of creativity) of the lesson's webpage content's subject matter. Once you have gone through this tutorial, you will be able to use your own creativity in developing your own website and use the knowledge you obtain here to put it all together in the correct form to be uploaded to the internet. The tutorial is divided into three lessons, and lessons two and three both build upon the work you do in the previous lesson(s).

~~~~~~~~~~~~~~~

Page One - index (Home) page

For this first lesson, you are going to create the three pages that make up a simple site for a fictitious travel agency which we will call Adventure Travel Service.

Using either Simpletext or Notepad, type the skeleton structure that you will need for your first page and then save the file as index.html.

< HTML>
< HEADING>
< TITLE> < /TITLE>
< /HEADING>
< BODY>

< /BODY>
< /HTML>

Next you need to type after the < TITLE> code the page heading. Since this is your index page and will be the first page of the website, type in "Adventure Travel Service" (without the quote marks). After that, type within the line, the code you need for the background of your page. The image you are going to use for your background is called background.gif.

The top section of your file should now look like this:

< HTML>
<HEAD>
<TITLE> Adventure Travel Service< /TITLE>
</HEAD>
<BODY BACKGROUND="backgrnd.gif">

The background image for your page has a colorbar strip running down the left side, where you are going to have buttons that will be used to click on to jump to the other pages and an additional one to be used to e-mail the travel agency directly from their site. The best way to accomplish this is to set the buttons inside a table structure so that they will not interfere with the other elements in the main body of the page.

Your table will have two cells on the same row and will not have a border so that it will be invisible except for the elements contained within the table itself. Set the width at "100%" and a border of "0", then set the code for the table row and first data cell, with the cell having a width of 100 pixels and vertically aligned at the top.

< TABLE WIDTH=100% BORDER=0>
< TR>
< TD WIDTH=100 VALIGN=TOP>

Next you will type in the code needed for the "home", "about us", and "order form" button images and attach hyperlinks to them for the pages they will each jump to. You will also go ahead and type in the width and height dimensions so that the browser will be able to lay them out faster when viewed.

< 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>

You have one more button to add to this column, which is for e-mail. Since this button will not have the viewer jump to another page, but will cause the browser to activate its e-mail function instead, you will need a slight variation within the hyperlink. After typing in the code for this last button, you will end this data cell and then begin the next data cell which will contain the main body of the page.

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

Notice that in the above code for the e-mail link, right after the e-mail address there is another code which allows you to set the viewer's e-mail program to automatically type in the subject line when it is activated by clicking on the e-mail button on the page.

For the main part of your page, you will have a graphic title heading, a large photo composite, and the company's address and phone number typed in bold text. These elements will look better if they are centered, so you will type their codes between the beginning and ending centering codes. It will also look better for the title graphic to be dropped down from the top of the page by about one line space, so you will need to use a line break code to force the image down one line. If you did not use the VALIGN=TOP portion of the table data cell line, your whole cell's content would be aligned vertically centered with the content in the data cell that contains your buttons. Sometimes allowing the default center vertical alignment in cells works out well for your table, but when you need to control how far down within a cell the first element is placed, it is better to vertically align the cell to the top and use forced line break codes to add the amount of space you want at the top of the cell.

<CENTER>
< IMG SRC="maintitle.gif"> 
< IMG SRC="mainpic.gif"> 

33025 18th Pl. South, Suite E-201 
Federal Way, Washington 98003 
Phone: (206) 555-1212; Fax: (206) 555-2121

</CENTER>

Now you just need to end your data cell, table row, and table codes and then two more line break codes (so that your address and phone number lines will not be sitting right on the bottom of your page) and make sure you still have your and

Hosted by www.Geocities.ws

codes at the bottom of your file that you typed in the beginning of this lesson.

Your entire file should now read like this:

< HTML>
<HEAD>
<TITLE>Adventure Travel Service</TITLE>
</HEAD>
<BODY BACKGROUND="backgrnd.gif">
 
<TABLE WIDTH=100% BORDER=0>
<TR>
 
<TD WIDTH=100 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>
</TD> 
<TD VALIGN=TOP>
 
<CENTER>
<IMG SRC="maintitle.gif"> 
<IMG SRC="mainpic.gif"> 

33025 18th Pl. South, Suite E-201 
Federal Way, Washington 98003 
Phone: (206) 555-1212; Fax: (206) 555-2121

</CENTER>
</TD>
 
</TR>
</TABLE>
 
 
</BODY>
</HTML>

View this page to see how everything came together.

Hosted by www.Geocities.ws

-----------------------------23848668924843 Content-Disposition: form-data; name="userfile"; filename=""