There are many ways to modify and improve the look of a web page. Many of these methods are quite advanced and involve some programming. This handout will describe some of the simpler methods you can use.
The method of linking described in the first html handout is called an absolute link. This means that the link describes the location of the linked page starting from the name of the web server. If you want to link to one of your own pages, you can use a relative link instead. A relative link specifies the location of the linked page relative to the location of the page containing the link. If the two pages are in the same folder, only the name of the page is needed in the link. For example, this page can link to the Introduction to HTML handout, which is in the same folder, using the following link:
<a href="html.intro.html">Introduction to HTML</a>
If the two pages were on different servers, then the link would need to be:
<a href="http://cs.middlesexcc.edu/~schatz/csc106/handouts/html.intro.html"> Introduction to HTML</a>
If the two pages are on the same disk but in different folders, then the link needs to specify the path to get to the linked page from the page containing the link. See me if you need more information on this.
The background of a page can be set to a particular color. Alternately, an image can be used for the background. If the image is smaller than the page, then it will be tiled, that is, displayed repeatedly (like floor tiles) to cover the entire background. If you use an image for the background make sure that it doesn't drown out the rest of the page.
To set the background to a particular color, add the bgcolor attribute to the body tag:
<body bgcolor="...">
where ... is replaced with a color name or color number. See the color handout (http://cs.middlesexcc.edu/~schatz/csc106/handouts/color.html) for information on color names and color numbers.
To use an image for the background, add the background attribute to the body tag:
<body background="...">
where ... is replaced with the URL of the image file. If you have downloaded the image then you don't need a URL. If the image is in the same folder as the page, then only the name of the image file is needed. If the image is not in the same folder as the page, the path to the file must be included. For a small web site the easiest thing is to keep the image in the same folder. For larger web sites it's usually preferable to have a separate folder for images.
The easiest way to change the font is to use the <font> tag. This tag is deprecated, which means that it still works but it is not recommended, since there is a new way to change the font. We will use the font tag since we are not covering style sheets, which is the new recommended method.
The color, size, and/or typeface can be changed with the <font> tag. One <font> tag can change any or all of these attributes:
You can make an image function as a link by putting the image tag inside the link tag:
<a href="url to link to"><img src="name of image file"></a>
For example, suppose you have an image named "mcclogo.gif", and you want to use that to link to the MCC web page. If the image is in the same folder as the page, use the following:
<a href="http://www.middlesexcc.edu"><img src="mcclogo.gif"></a>
Now when the user clicks on the image, it will link to the given page, as in the following:
You can center a paragraph or a heading by adding the align=center attribute to the tag. For example, to center a level 3 heading, use <h3 align=center>.
The exact placement of an image is difficult to achieve, because a page will be reformatted if the width of the browser window changes. Thus the appearance of your page will depend on the size and resolution of the user's monitor and on how large they make their browser window. For some options on how to control the placement of images, see the Image Formatting Handout (http://cs.middlesexcc.edu/~schatz/csc106/handouts/image.examples.html).
Email Me |
Office Hours |
My Home Page |
Department Home |
MCC Home Page
© Copyright Emmi Schatz 2007