WEB PAGE HTML HINTS AND TIPS

Must have in every HTML document:
<HTML>
<HEAD> Top of actual page (large centered letters) Ex: Welcome to My Home Page
<TITLE> Shows up in Title Bar at the very top
</TITLE>
</HEAD>
<BODY> If you have a body background or background color, you don't need this
</BODY>
</HTML>

* Remember, every time you start a command, you have to shut it off when you are done with that command.

BACKGROUNDS:
To add background color or background graphics, add the following command directly below <HEAD>
<BODY BGCOLOR="COLOR"> (replace COLOR with the color you want)
<BODY BACKGROUND="FILENAME.JPG"> (replace FILENAME with the name of the graphic you want to use)
Then leave <BODY> command out

FONTS:
For different size fonts:
<H1> to <H5> 1 is largest and 5 is smallest. Shut off command with </H1> to </H5>

H1

H3

H5

OR

<font size="3">Type text here </font> (This time 1 is smallest and the size increases as the number increases)
When you shut the font command off with </font> the text goes back to the default size.

To change font color:
<font color="color">Type text here </font>
When you shut the color command off with </font> the text goes back to black.

To change the font face:
<font face="verdana">Type text here </font>
When you shut the font command off with </font> the text goes back to the default font.

You can change the face, size and color all in one command:
<font face="verdana" color="red" size="3">Type text here</font>

JUSTIFICATION:

To Center text:
<CENTER> Write text here </CENTER> to shut off when don't want centering anymore

To Right Justify:
<P ALIGN="RIGHT">Type text here </A> to shut off right alignment

To Full Justify: <p align="justify">Type text here </A> to shut off full justification

When you shut off Centering, Right Justification, or Full Justification it goes back to Left Justification.

RETURNS, BLANK LINES AND DIVIDING LINES:
<BR> Break - Like Enter - new line with no space between lines
<P> Paragraph - new line with a blank line between lines

<HR> Horizontal Rule = a line across whole page to divide sections of page.


Use <P><P> <HR> <P> to leave spaces before and after line.

LISTS:
<LI> Bulleted List (don't shut off with </LI>

  • one
  • two
  • three

    <OL> Before list with <LI> Ordered List - Makes a numbered list

    1. one
    2. two
    3. three
    Shut off with </OL>

    GRAPHICS:
    Sample Graphic
    Use either .jpg or .gif
    <IMG SRC="FILENAME.JPG"> (Substitute your graphic filename and location for FILENAME)
    To size graphic, add HEIGHT=100 WIDTH=200 (change numbers up or down to increase or decrease size)
    Ex: <IMG SRC="FILENAME.JPG" HEIGHT=100 WIDTH=200>

    alt-text: pop-up captions that appear over icons when a mouse pointer rolls over them.
    Text reader applications read those words aloud to describe a Web site to a disabled person.
    Ex: <img src="home.jpg" alt="Home">

    SPACING BETWEEN GRAPHICS:
    &#160 or &nbsp - to make spaces between words or graphics - Add &#160 until the spacing is where you want it. It takes a lot of them.
    Ex: Abc             Def
                    

    LINKS:
    To link to another page on your disk:
    <A HREF="FILENAME.HTML">GO TO WHERE YOU ARE LINKING TO</A> (Substitute the name of your html file for FILENAME)
    * </A> shuts off the <A HREF> command
    GO TO ANOTHER PAGE IN THE SAME FOLDER

    To link to a real page on the Internet:
    <A HREF="http://www.address.com">Go to Name of the Page </A>
    This link goes to cnet.com

    If you have a long page, you can give readers a way back to the top of the page when they are at the bottom.
    <A NAME="top"></A> at the top of your page.
    <A HREF="#top">Top</A> at the bottom of your page.

    You can place a named anchor anyplace on your page. You can link to it from any other part of the page.
    <A NAME="middle"></A> wherever you want to direct the reader.
    <A HREF="#middle">Middle</A> where the reader is.

    To have a graphic in your link:
    <A HREF="FILENAME.HTML"><IMG SRC="FILENAME.JPG"> GO TO WHERE YOU ARE LINKING TO</A>
    This link doesn't really go anywhere.

    NO BORDER AROUND GRAPHIC IN LINK:
    To make the graphic in your link not have a blue box around it:
    <img src="filename.gif" border="0">
    You can still click on the star to go to the link even though it does not have the blue box

    EMAIL LINKS:
    Send email to:
    <A HREF="mailto:yourname@gaggle.net">yourname@gaggle.net (Substitute your email address)
    <IMG SRC="FILENAME.JPG"></A> (leave this part out if you don't want a graphic in the email link)
    Send e-mail to:yourname@gaggle.net

    If you want to specify other properties of the mail message, you can add them to the URL as name/value pairs (name=value). Each property name is followed by an equal sign and a value. The list of name/value pairs is separated from the email address by a question mark (?). Name/Value pairs are separated from each other by an ampersand (&):

    mailto:name@whatever.com?cc=friend@internet.com&bcc=someone@internet.com&subject=Your Tips& body=This is where you type the body.

    FORCE NEW WINDOW TO OPEN:
    To force a link to display in a new browser window so users stay at your site.
    <a href="http://www.cnet.com" TARGET="_blank"> Use when link to outside site.
    This opens cnet.com but leaves this page open too

    SOUND:
    <a href="yoursonghere.wav">Play This Song!<a> plays a song when the link is clicked.

    Auto-Loading Sound File: Setting up a WAV file so that it plays as soon as a page loads takes a few extra lines.

    <embed src="happy_birthday.wav" width="144" height="60" autostart="true" loop="true">
    <bgsound src="happy_birthday.wav" autostart="true" loop="infinite">

    Use two separate lines of code because Internet Explorer and Netscape Navigator use slightly different HTML commands for some functions. Putting both versions in your HTML assures that both browsers will read the right one and ignore the other.
    Height and width in the code adjust the appearance of the sound bar displayed when the music kicks in.
    Loop tells the browser to play the sound over and over again.

    VIDEO:
    <embed width="100%" height = "100%" fullscreen="yes" src="welcome.mov">

    Visitors need a plug-in for their browsers to play video, so be sure to link to the Web site for such plug-ins as Apple's QuickTime, Real Network's RealPlayer, or Microsoft Windows Media Player to help them see it.

    Top