More Web Tips

Q: How should pages be formated so that they appear on browsers screens as they do when they are created?

A: Web editing software does not provide the same types of control over page widths that we find in word processing software. This is why it is important to test pages using different browsers to see how the page will appear. To illustrate this, resize the window in your browser and watch what happens to this text.

(Go ahead, try it!)

You will see that the text lines reconfigure automatically to accomodate the window width since window widths vary according to the size of browser's monitors and individual preferences.

Now look at the text below.

We interupt this broadcast to test the emergency broacast system. This is only a test. Broadcasters in your area in voluntary cooperation with the FCC and other authorities have developed this test to keep you informed in case of an emergency. We repeat, this is only a test.

Notice how I limited the width of the text to a box that measures 450 pixels wide. If you narrow your window, the text runs off the page, rather than automatically adjusting itself. But even with a very wide window, the text only extends to 450 pixels in width. (Also note that I defined the font as helvetica, rather than leaving it as the default font and I increased the font size to +2.)

The box for the text above was created using the table command with just one cell. You do not see the box because I set the table border width to zero pixels.

Here is an example of a four cell table with the table border set at one pixel.

   
   

Below is a four cell table with images and text added and with table borders set at 0 pixels.

 We interupt this broadcast to test the emergency broacast system. This is only a test. Broadcasters in your area in voluntary cooperation with the FCC and other authorities have developed this test to keep you informed in case of an emergency. We repeat, this is only a test.  
   We interupt this broadcast to test the emergency broacast system. This is only a test. Broadcasters in your area in voluntary cooperation with the FCC and other authorities have developed this test to keep you informed in case of an emergency. We repeat, this is only a test.

Now let's take a look at the HTML code for this page. Be sure to pull the view window off to the side a bit so that you can go back and forth between the source window and the regular browser window.

If you are using Microsoft Internet Explorer, under the View menu, select Source.

If you are using Safari, under the View menu, select View Source.

On the top of the page you will see:

<HTML>
<HEAD>
<TITLE>More Web Tips</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">

<P ALIGN=CENTER><FONT SIZE="+4">More Web Tips</FONT></P>

 

This information tells the browser about the appearance of the page. You see the html tags are included within pairs of brackets. The Title tag, for example defines the title of the page that appears at the top of the window. Also note how the body background color <BODY BGCOLOR is defined. The ffffff is a hexidecimal number for the color white. 000000 is black. ff0000 is red. 00ff00 is green. 0000ff is blue. The range of values in hexidecimal from small to large runs: 0123456789abcdef

In Netscape Composer or PageMill you have the choice of editing web pages graphically (as we did in class) or editing the code directly. Under the Edit pulldown menu, select HTML Source.

On a copy of an esisting web page, you might try changing some of the parameters in the tags. For example to change the font size, replace the number in the <FONT SIZE="+4"> tag.

Now go back to the page source for this page and note how paragraphs are separated by the <p> text</p> pair of commands.The </p> tag signifies the end of the code that has been affected by the intitial <p> command.

Next scroll down to the first table I inserted. It will appear something like this:

<P><TABLE WIDTH="450" BORDER="0" CELLSPACING="2" CELLPADDING="0"
HEIGHT="69">
<TR>
<TD><B><FONT SIZE="+1" FACE="Helvetica">We interupt this broadcast
to test the emergency broacast system. This is only a test. Broadcasters
in your area in voluntary cooperation with the FCC and other
authorities have developed this test to keep you informed in
case of an emergency. We repeat, this is only a test.</FONT></B></TD>
</TR>
</TABLE></P>

So in the first line you can see the table tag with the width defined as 450 pixels, the cell border is zero pixels (as well the space between cells and the padding around the text within the cells). The table height automatically was set by the software, although I did not specify it.

Then we see the <TR> and <TD> tags. These regulate how the table is formated. <TR> sets a new row, <TD> is the tag for the column cell. A three cell wide table with a 1 pixel border, for example with appear on the page and in code as follows:

some text some more text and this text

<P><TABLE WIDTH="450" BORDER="1" CELLSPACING="2" CELLPADDING="0">
<TR>
<TD WIDTH="33%">some text</TD>
<TD WIDTH="33%">some more text</TD>
<TD WIDTH="34%">and this text</TD>
</TR>
</TABLE></P>

So now on a test page, go ahead and create a simple table. In PageMill just click at the insertion point, then click on the table grid icon and drag it to the desired number of cells. Let go and the table will appear. To adjust the size of the table lines or remove them completely, select the table by clicking on its border, then in the Inspector window that appears, enter in the border area the number of pixels for the line weight. Enter 0 for no table lines.

Now try typing or pasting in some text and images. Then check the source code to see what tags were automatically inserted. Try moving some of the code around (be sure to move the entire tag, including the opening and closing brackets).

You can also copy and paste HTML source code from other web pages.

For more information on HTML coding see http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

I hope this helps! Have fun!