Web Page Construction - Play

This will cover

• text formats
• tables,
• hotlinks, and
• graphics and images

Text Formats

You will notice that Headers get smaller as the number gets larger, but Font Sizes are the opposite of this. Also Headers are automatically made bold, whereas Font is not. The third difference is that a paragraph break is made when Headers are turned off; this does not happen with Font.

HEADERS	FONT SIZES (DEFAULT=3)
Header size1 <h1> </h1> Header size 2 <h2> </h2> Header size 3 <h3> </h3> Header size 4 <h4> </h4> Header size 5 <h5> </h5> Header size 6 <h6> </h6>	Font size=1 <FONT SIZE=1></FONT> Font size=2 <FONT SIZE=2></FONT> Font size=3 <FONT SIZE=3></FONT> Font size=4 <FONT SIZE=4></FONT> Font size=5 <FONT SIZE=5></FONT> Font size=6 <FONT SIZE=6></FONT> Font size=7 <FONT SIZE=7></FONT>

There is an alignment option with Headers.

<H# option> where #=1-7 and option can be:

align=left|center|right

With Font there is the option to change colors with:

<FONT COLOR="#RRGGBB"> where RRGGBB are hexadecimal values. A value of 00 is no color and FF is the maximum of that color.
#FF0000 is RED
#00FF00 is GREEN and
#0000FF is BLUE.
#000000 is BLACK FONT AND #FFFFFF is WHITE.

The basic tags for a table are:

<TABLE> </TABLE>	This will surround the entire table.
<TABLE option>   option= BORDER=?   option= CELLSPACING=?   option= CELLPADDING=?   option= WIDTH=?	options go within the opening <TABLE> tag eg: <TABLE BORDER=2 CELLPADDING=3 WIDTH=600> thickness of outer border in pixels can go from 0 (no border) to thicker outer pixels between cells 1 is the default pixels from walls adds pixels away from the walls in pixels ??? or percent ??% full screen is about 620 pixels, use % sign for percent
<TR> </TR>	Defines each Table Row
<TR options>   option= ALIGN=LEFT|RIGHT|CENTER   option=VALIGN=TOP|MIDDLE|BOTTOM	options go within the opening <TR> tag <TR ALIGN=CENTER> to center, etc. Use for vertical alignment in a row
<TD> </TD>	Table Data - contents of each cell
<TD options>   option=ALIGN=LEFT|RIGHT|CENTER   option=VALIGN=TOP|BOTTOM|MIDDLE   option=COLSPAN=?   option=ROWSPAN=?   option=WIDTH=?   option=WIDTH=?%	The options go within the opening <TD> tag Horizontal alignment in a cell Vertical alignment in a cell Number of columns to span across Number of rows to span down Width in pixels Width in percent (include the % sign)
<TH> </TH>	Table Headers. Use the same as the <TD> tags, except these are centered and boldface These also have the same options as the TD tags.

Let's go through a table here that might be useful - your class schedule. First we want to put our name, office number and the semester at the top of the table. Next we need one column for times and 5 or 6 columns for the days (Fri1 and Fri2). Let's go with seven columns. Also we need about 12 total rows.

The first row really only has 2 columns, so we can use the COLSPAN= to make each wider than normal. Also we can use the TH tag rather than the TD tag so that this date will be printed in bold and centered. So our table would start out looking like:

<TABLE>
<TR>
<TH COLSPAN=5>Herb Hedgecock, Lappin 404D</TH> <TH COLSPAN=2>Fall 96</TH>
</TR>

The next row might have the first cell with time and the rest will have the days of the week. So it will look like this:

<TR>
<TH>time</TH><TH>Monday</TH> <TH>Tuesday</TH><TH>Wednesday</TH> <TH>Thursday</TH><TH>Friday1</TH> <TH>Friday2</TH>
</TR>

So far the table would look like this:

Herb Hedgecock, Lappin 404D					Fall 96
time	Monday	Tuesday	Wednesday	Thursday	Friday1	Friday2

Now the rest is going to depend on your own schedule. However, each row will still have nearly the same format as this last one. Let's add the times; first 8:00. I don't have any classes then so most cells would be empty; however an empty cell does not print the walls of that cell. What this means is that an empty cell really does need something. It could be a <BR> tag or one new choice would be to use what is called a non-breaking space. Type it into the cell like this: &nbsp;. This MUST be in lower case and with no spaces.

<TR>
<TH>8:00</TH><TD>&nbsp; </TD> <TD>&nbsp; </TD><TD>&nbsp; </TD> <TD>&nbsp; </TD><TD>&nbsp; </TD> <TD>&nbsp; </TD>
</TR>

Now we have:

Herb Hedgecock, Lappin 404D					Fall 96
time	Monday	Tuesday	Wednesday	Thursday	Friday1	Friday2
8:00

Now my schedule has Chem 326 on MWF1 at 9:10 and Chem 101 on MWF1 at 10:20, so let's put in those rows plus an empty 11:30 row.

This would have the form
<TR>
<TH>9:10</TH><TD>Chem326</TD> <TD>&nbsp;</TD><TD>Chem326</TD> <TD>&nbsp;</TD><TD>Lappin 414</TD> <TD>&nbsp;</TD>
</TR>
<TR>
<TH>10:20</TH><TD>Chem101</TD> <TD>&nbsp;</TD><TD>Chem101</TD> <TD>&nbsp;</TD><TD>Lappin 224</TD> <TD>&nbsp;</TD>
</TR>
<TR>
<TH>11:30</TH><TD>&nbsp; </TD> <TD>&nbsp; </TD><TD>&nbsp; </TD> <TD>&nbsp; </TD><TD>&nbsp; </TD> <TD>&nbsp; </TD>
</TR>

So our schedule would look like this:

Herb Hedgecock, Lappin 404D					Fall 96
time	Monday	Tuesday	Wednesday	Thursday	Friday1	Friday2
8:00
9:10	Chem326		Chem326		Lappin414
10:20	Chem101		Chem101		Lappin224
11:30

Now I have two-hour blocks for several labs. As was done at the top of the schedule by using COLSPAN to go across several columns, we can use ROWSPAN=2 to make the 2-hour blocks. This does mean that we also have to take out those places in each lower row. So let's do it. The code would look like this:

<TR>
<TH>12:40</TH><TD>&nbsp;</TD>
<TD ROWSPAN=2>Chem 101L<BR>LA 443</TD>
<TD>&nbsp;</TD><TD ROWSPAN=2>Chem 201L<BR> LA 444</TD>
<TD>&nbsp;</TD><TD>&nbsp; </TD>
</TR>
<TR>
<TH>1:50</TH><TD>&nbsp;</TD> <TD>&nbsp;</TD><TD>&nbsp;</TD> <TD>&nbsp;</TD>
</TR>

It should look like this:

Herb Hedgecock, Lappin 404D					Fall 96
time	Monday	Tuesday	Wednesday	Thursday	Friday1	Friday2
8:00
9:10	Chem326		Chem326		Lappin414
10:20	Chem101		Chem101		Lappin224
11:30
12:40		Chem 101L LA 443		Chem 201L LA 444
1:50

Hopefully by now you will be getting the idea of how to do this. I will go on and finish my schedule with a few edits and corrections. First I need to finish the rest of the times. Also I need to go back and add in my office hours. Then finally I will center the table entries and draw a table around the table.

Links or Anchors to other sources

Probably the most useful tag is the anchor tag, which takes the form

<A HREF="location typed here"> Highlighted clickable stuff here</A>

The part after the <A HREF=" is an address where you want to go. This address could be:

1. within the current document
2. in another document in the current directory
3. in a higher directory from the current one
4. to a different address from the local server
5. http, gopher, ftp, e-mail, and other types of locators
6. to a graphics image
7. and there are others.

Let't try to give you some examples here.

1. Within the current document: Use this to move around in large documents. A simple case would be moving from the bottom to the top of a document. At the bottom of the document put:

<A HREF="#top">Return to top.</A> Also at the top of the document right after the <BODY> tag you will type

This will cause the words Return to top to be highlighted and in a different color than the normal text. The default anchor color is blue. An example is shown below:

If you click on the text after this line, then you will go to the top of this document:

Understand that what you choose for the anchor wording is your choice. Just remember to have those words (within quotation marks and after the <A HREF=) followed by the pound sign. Then the exact same wording must show up within the quotation marks after the A NAME= tag but without the pound symbol. If you had <A HREF= "#426ZZZ">Go somewhere else in this document</A>, then you are referencing 426ZZZ to be associated with the tag <A NAME="426ZZZ"> </A>. The words Go somewhere else in this document will be the highlighted, clickable reference words.

Another set of internal links is given at the beginning of this current document. Since this document is rather long and is divided into four unique sections, I have included links at the beginning so that the reader can jump quickly to various places in the document without having to scroll thru every screen. For example, at the top of the document the words text formats, tables, hotlinks, and graphics and images are each highlighted as clickable references. The text formats has the following form:

<A HREF="#formats"> text formats</A>. Then at the beginning of the formatting section just before the Texts Formats caption there is the anchor tag:

2. In another document in the current directory: This is fairly simple. Use the name of the file as the part within the quotation marks:

<A HREF="Name-of-file-and-extension">Highlighted clickable stuff here</A>

This is good to use when you have several sections on a topic, and each is in a separate file. This is a nice way to keep file sizes small. Here's an example. The file name of this document is teachin2.html. It is in the same directory as my homepage file and called index.html. So to make a link between this document and my home page would look something like this:

<A HREF="index.html"> Click here to go over to my Home Page</A>.

This is illustrated below:

3. In a higher directory from the current one: Use this when you set up subdirectories in any directories, etc. We could use this to go up to the MSU home page:

4. To a different address from the local server Make connections to web resources already out there, such as http://chem.lapeer.org. After the <A HREF=" put in the address of the link, then finish with the "> Clickable statement. </A> such as the address below:

A useful resource for science teachers is:

5. Http, gopher, ftp, e-mail, and other types of locators. These are basically the same as the others. Putting in an e-mail link is useful if you want to let others contact you easily. Simply put in:

<A HREF="mailto:your-full-address-here">Clickable stuff here</A>

Here's an example:

<A HREF="Image File Name To Go To "><IMG SRC=" Graphics Image Filename To Click On Here "> </A>

I'll use the B25 plane image I took from the Smithsonian to illustrate this:

This image file, called bann01.gif, was taken from someone else's document using the mouse click and save functions.

Herb Hedgecock, Ph.D. UPO 836, Lappin 404D Morehead State University Morehead, KY 40351

up.gif	down.gif	back.gif	next.gif
new2.gif	home.gif	mail2.gif

Return to top of page. h.hedgec@morehead-st.edu

http://www.morehead-st.edu/people/h.hedgec
Last modified 26 Sept 2000