CONTENTS:
INSERTING COMMENTS THAT WILL NOT SHOW ON PAGE
USING THE FONT TAG TO CHANGE FONT STYLE, SIZE AND COLOR
LINKING TO SPECIFIC PLACES WITHIN A PAGE:
ALIGNING IMAGES
USING BACKGROUND SOUND
ALIGNING PAGE TO FIT ON A BORDERED BACKGROUND
AN EASY WAY TO MAKE LISTS
MAKING A BIG BLOCK OF TEXT INDENT
USING A NON-SCROLLING BACKGROUND
MAKING LINK BUTTONS WITH CODE

INSERTING COMMENTS THAT WILL NOT SHOW ON PAGE: You can use the <COMMENT> </COMMENT> tags or
use the following and anything inside it will not show up as text on your page but will be for your notes only.

USING THE FONT TAG TO CHANGE FONT STYLE, SIZE AND COLOR: The <FONT> tag can have the following attributes:

FACE= (a specific font style name)
COLOR= (a specified color other than the one named in the BODY tag)
SIZE= (a size other than the default size) [-6, -5, -4, -3, -2, -1, +1, +2, +3, +4, +5, +6]

You can specify any font "FACE" (style) you choose, but only those fonts loaded on the hard drive of the viewer’s computer will be seen, otherwise he will just see the browser’s default font. You can change this as often as you wish within the page. For example:
<FONT FACE="Arial">

You can specify any font "COLOR" you choose. Lets say you want one word to be a different color than the text color specified in the <BODY> tag, you can put the color change in a <FONT> tag right before the word, then you would have to use a </FONT> tag right after the word to change the color back. For example:
My favorite color is<FONT COLOR="006400">green </FONT> because it is the color of nature.
The text would then appear like this: My favorite color is green because it is the color of nature.

You can specify any font "SIZE" you choose from this range:
[-3, -2, -1, +1, +2, +3, +4, +5, +6]
the plus numbers being the larger ones.

You can combine more than one attribute in the same <FONT> tag like this:
<FONT FACE="Arial" COLOR="FFFFFF" SIZE=+5>
Notice the required spacing between each attribute. Notice that the font style is capitalized because that is the way the font's style name is written in the computer's font files. And remember that a <FONT> Tag needs a corresponding </FONT> tag. back to contents list

LINKING TO SPECIFIC PLACES WITHIN A PAGE: When you want your link to not only go to another page, but also to a specific place on that page, you must first create an anchor within the other page, then you create a link that points both to the other page and also to that anchor. The browser will link to the page, then scroll down to the point on the page where the anchor is.

FOR EXAMPLE.......lets say you want to place the link on "index.html" page and to link to "pg2.html" page and to the words "animals" on that page.

STEP 1: place this tag on "p2.html" (the page you are linking to) at the point where you want the anchor to be
<A NAME="animals"></A>
STEP 2: place this tag on "index.html" (the page where the link is to be established)
click <A HREF="p2.html#animals">here</A> read about animals

When you want to link to an anchor on the same page, set up the same way but you leave off the name of another page in the tag for example if the anchor for the word "animals" was on the same page as the link, the tag would look like this
click<A HREF=#animals>here</A> to read about animals

(the list of links at the top of this page, entitled "CONTENTS", is an example of linking to anchors on the same page) back to contents list

ALIGNING IMAGES: You have already learned that you can align an image to the center by surrounding the IMAGE tag with the CENTER tag and CLOSE CENTER tag.
<CENTER><IMG SRC="image.gif"></CENTER>

You also can line up the image with the line of text next to it with:

ALIGN=TOP aligns the text with the topmost part of the image
ALIGN=MIDDLE aligns the text with the middle of the image
ALIGN=BOTTOM aligns the text with the bottom of the image

FOR EXAMPLE: <IMG SRC="image.gif" ALIGN=TOP>
However only one line of text will be displayed beside the image. If the text needs to wrap to a 2nd line, then it will begin the 2nd line under the image. If you want several lines of text to be displayed in the blank space to one side of an image, then use the following procedure:

write the image tag using either ALIGN=RIGHT or ALIGN=LEFT inside the tag to indicate which side you want the image to be on
then before you write the text, use <ALIGN=RIGHT> or <ALIGN=LEFT> to indicate which side you want the text to be on.(note that this will be opposite of what ever side you chose for the image)

The text will then be displayed beside your image, wrapping as many times as it needs to. Be aware that if it runs out of room it will then wrap to the far left of the next line below the image. Also note that to force the next tag or line of text to begin below the image you can use the attribute CLEAR= in a BREAK tag. Use RIGHT or LEFT after the = sign depending on which side your image was on.
FOR EXAMPLE: if your image was on the left and your text on the right, then use this tag after
<BR CLEAR=LEFT> (note there is a required space between BR and CLEAR)

Following is an example of using text beside an image:
<IMG SRC="kids.gif ALIGN=LEFT>
<ALIGN=RIGHT>
"Make new friends<BR>
But keep the old<BR>
One is silver <BR>
and the other is gold"
<BR CLEAR=LEFT>
and this is how it would look as displayed on a page:

back to contents list

USING BACKGROUND SOUND: Sound can be a wonderful addition on a web page to set a mood. Keep in mind that WAV files are very large and usually require too long a loading time for a web page. MIDI files are much smaller and therefore a better choice. Midi files are made on a computer keyboard so they will not be "recorded" music. That is why they have no "words". There are many sites on the net that offer free midi files to use on your non-commercial pages. One of my favorites is Laura's MIDI Heaven. You will need to download the midi file you want and upload it to your web page server the same as the image files for your site. There are several different ways to write the HTML for background sound. Some sites even use JAVA script to do this. Netscape and Microsoft Internet Explorer even require two different tags. This can cause a little problem if you want all your visitors to be able to hear the sound, no matter which browser they are using. I like to use the following set of tags...it has a tag for each browser plus a little extra tag to keep the IE browser happy because it gets confused when it sees the Netscape tag too. It also hides the console for the buttons that turn the sound off and on. I think they clutter a page and a visitor can always disable the sound on his monitor if he chooses to turn it off.
<EMBED SRC="_____.mid" width=2 height=0 autostart=true loop=true>
<noembed><bgsound src="_____.mid" loop=infinite> </noembed>
Note that you will substitute your file name for the blank line two times and note also that there is a required space between each of the attributes in each tag. You may put this tag anywhere in your document between the BODY and the CLOSE BODY tags. I like to put it at the top under the BODY tag so that it can begin playing right away while the rest of the page loads. back to contents list

ALIGNING PAGE TO FIT ON A BORDERED BACKGROUND: When you are using a background that has a border down the left side, there may be a problem with the contents of your page overlapping that border and maybe becoming difficult to read. You can shift the pages contents to the right to avoid the overlap. You do this by creating what is called a "TABLE". A TABLE is a defined area of your page that the browser then arranges in rows and columns as you designate (sort of like a spreadsheet on a word processor). The tables can have borders drawn around the cells or just defined empty space between the cells. Cells can be blank or contain data (text or images), and that data can be aligned within the cell in whatever way you define. So the idea here is to use this TABLE feature to tell the browser that your page is divided into one row with two columns.......your background's bordered left-hand edge being the first column and the rest of the page being the second column and you tell it that you want NO borders (boxes drawn around the cells).

You set up the TABLE tag like this and place it right under your BODY tag:
<TABLE BORDER=0 WIDTH=85% ALIGN=RIGHT> <TR><TD>

You are saying that the page, from this point until the CLOSING TABLE tag, will be arranged as a borderless "table" and the cell on the right will be 85% of the page. (adjust this percentage to fit the width of your border). Then the <TR> is saying begin the first (and only) row, and the <TD> is saying here's what is in the right column. Then down at the bottom of your HTML document right before the CLOSE BODY tag, you will put the CLOSE TABLE tags:
</TD></TR> </TABLE>

Sounds confusing? Just add those opening and closing tags, adjusting the percentage to fit your border, and you have it! More on using TABLES in advanced extras. back to contents list

AN EASY WAY TO MAKE LISTS: Sometimes you may want to make lists and have them indent to set apart from the rest of the text. The UNORDERED LIST tag allows you to do this. FOR EXAMPLE:
THINGS I LOVE:
<UL>
<LI>God
<LI>my family
<LI>sunshine
<LI>gardens
<LI>beaches
<LI>rainbows
</UL>

would be displayed like this:

THINGS I LOVE:

God
my family
sunshine
gardens
beaches
rainbows

Notice how you have little dots beside each item in the list. If you use lists within list the symbol will change for each level......first dots, then circles, then squares. If you want to force the use of a square, for example, in any level, then use the TYPE=attribute in the <UL> tag like this:
<UL TYPE="SQUARE">

And if you want the list to be numbered, then just use <OL> for ORDERED LIST and your list will look like this:

THINGS I LOVE:

God
my family
sunshine
gardens
beaches
rainbows

If you want Roman Numerals use:
<OL TYPE=I">

MAKING A BIG BLOCK OF TEXT INDENT: You can indent an entire large block of text by using the <BLOCKQUOTE> tags. Just put your text between the following:

<BLOCKQUOTE> </BLOCKQUOTE>

USING A NON-SCROLLING BACKGROUND: Perhaps you have a background that is one large image like a scene and you do not want it to scroll along with the rest of the page's contents. You can add the following to the <BODY> tag:

BGPROPERTIES="FIXED"

Be aware that this will ONLY work at present with the IE Browser. Netscape and the others will ignore the command and still scroll your background. Also keep in mind that large background images take a long time to load so if you use one, limit your other images on the page.

MAKING LINK BUTTONS WITH CODE: You can, of course, make a graphic image of a button for your link, however there is a way to make the button with code. Put the following commands in your HTML document where you want the button to appear:

<FORM METHOD="LINK" ACTION="http://members.aol.com/ladybug703/index.html/">
<INPUT TYPE="SUBMIT" VALUE="CLICKABLE BUTTON">
</FORM>

then substitute whatever URL you are linking to (always use the entire URL here), and for VALUE= substitute what ever words you want to appear on the button. Our example will appear on the page like this and will be linked to my personal web site. Go ahead and click on it, but remember to return here for more classes. Something else to keep in mind.....for some reason you will need to always put a slash at the end of the URL you are linking to. It prevents a mysterious question mark from appearing in the linked page's window heading. Too complicated to think about?....just trust me, put the slash!

I have tried to cover the basics. If you have questions or want me to add a function not discussed here, email me.

It looks like you have graduated..... and are now ready to try some advanced techniques in web design, such as using JAVA scripts, image maps, and CGI on your page.

click to continue or go to:
[ HOME , lesson 1 , lesson 2 , lesson 3
extras , advanced extras , colors , graduation ]

visit Ladybug's Garden, my personal pages