Web Page

HINTS AND TIPS FOR WEB PAGE BUILDERS


  • Graphics and Backgrounds
    How to get them.

  • Animated Graphics
    When they don't work.

  • Invisible Backgrounds
    Graphics that blend in

  • Horizontal Rule
    Lines on the page.

  • HTML Program
    Learn how a program works.

  • HTML Tags
    The building blocks of a program

  • Add E-Mail
    The "Click Here" to email me code.

  • Adding Graphics
    Put pitcures on your page.

  • Adding Music
    They listen to music while they browse.

  • Linking Somewhere Else
    Links take you to other places

  • Homepage Tables
    A frame that encloses something on the page..

  • When I started on my first Web Page with HTML, most of the things I read said just steal what you need from someone else's page. I searched every tutorial I could find on the web to find information on how to get backgrounds and graphics for the page.
    I accidentally discovered the answer was in my right hand. Click the right mouse button with the cursor on the object you want and a menu will pop up asking where you want to save it and what name you want to use. This includes Graphics, Backgrounds, Midi files (music) and Links (routes to other sites).

  • Return To The Top

  • ANIMATED GRAPHICS

    I couldn't find anything on how to make an " Animated Graphic " work on my shareware html viewer.
    I accidentally discovered that they only work in Netscape or Explorer.

  • Return To The Top

  • INVISIBLE BACKGROUNDS

    I hunted for a long time, trying to discover how to make an invisible background for a graphic.
    Then I ran across the fact that you need Paint Shop Pro (a shareware program that you can download). When you finish your graphic, pick the eyedropper tool and hold it over the background color of your graphic. Note at the bottom of the screen there are 4 sets of numbers following the letters I, R, G and B. You want the number following the "I". Click on FILE then SAVE AS. Then click on OPTIONS in the SAVE AS window. You will get the following screen.

    Set the number in the "Set the Transparency Value to" window to the same number as you saw following the "I" and click on OK. Then click on OK to save the graphic.

  • Return To The Top



  • CREATING A HORIZONTAL RULE

    This is a very easy HTML TAG to use.  If you want a horizontal line to divide your page or highlight something, simply add this as HTML:  <hr>
    That is it.  the <hr> tag will insert a line on your page, like the one below. 


    This page illustrates how they are used. 

    If you want to use a horizontal rule of a different length, use the tag <hr width=50%>  here is the example



    You bay also change the thickness by using <hr size=XX>  Here is an example using <hr size=10> 



    I actually added another attribute to the <hr> tag above called "noshade." Noshade makes a darker line as you can see by comparing it with the one above. It actually reads <hr size=10 noshade>


    Of course there is always more then on way to skin a cat. The colored horizontal rule below is simply a small yellow square graphic set to a different size as follows <CENTER> <IMG SRC="Yelowbar.gif" WIDTH=400 HEIGHT=3> </Center>

  • Return To The Top

  • Now Let's Look At An Actual HTML Program For A Minute

    <HTML>
    </HEAD>
    <TITLE>My Program</TITLE>
    </HEAD>
    <BODY>
    <H2>Corky's Corner;</H2>
    The main part of your program goes here, between the two body tags BODY and /BODY
    </BODY>
    </HTML>

  • Return To The Top

  • The above is an actual HTML program and if you run it in your Browser, it would look like the section below on the screen.


    Corky's Corner

    The main part of your program goes here,
    between the two body tags BODY and /BODY

  • Return To The Top


  • Now, Let's Look At The Tags For A Minute

    A Tag is a coded instruction written between a < Less Than sign and a > Greater Than sign. The Tags do not print to the screen when the program runs. Some Tags tell the browser what to do with the information enclosed between the Tags. or following the Tag.

    For instance the <HTML> Tag at the start of an HTML program tells the browser that the following program is written in Hyper Text Markup Language and the </HTML> at the end of the program tells the browser that the HTML program is finished.

    Other Tags, such as <BR> (Line Break), <HR> (Horizontal Rule) and <P> (Paragraph) are specific instructions for that location and do not need a closing tag </> .

    As a for instance, the <BR> Tag tells the browser to go to the next line, where the <P> Tag tells it to go to the next line. then skip a line. The <HR> Tag tells the browzer to insert a horizontal line.

  • Return To The Top



  • Now it's time for some of the extras that add a little spice to your web page.

    E MAIL

    How to add an E-mail link to your web page so your viewers may write a message to you easily.


      <A HREF="mailto:(Your email address here)">E-mail Me</A>


    In your program, it would appear like the one below. Click on it and see how it looks (the address is mine and it works.)

    E-mail Me

  • Return To The Top



  • ADDING GRAPHICS

    How to add an image to your web page.

      <IMG SRC="Bonnet4.gif">

    In your program, it would appear like this.

    A common mistake is misspelling or using the wrong case when typing the filename and as simple as it sounds you should make sure the graphic file is in the same directory as your program or that the address is typed in correctly.

    If you see the following Icon instead of your graphic, check your program for one of the mistakes listed above.

  • Return To The Top


  • ADDING MUSIC

    The following is how you would create a link to add automatically playing music to your program:

      <embed src="(the name of the file">

    The following is a better way to create a link that will automatically play music in your program:

      <center> <embed src="Blubayou.mid" width=145 height=58 autostart=true loop=3> </embed> </CENTER>

    The (embed src="Blubayou.mid") phrase tells the computer to play Blue Bayou. The <center> and </CENTER> at the beginning and end of the line locates the player image in the center of the line. The (width=145 height=58) phrase sets the size of the player. If it is changed to read (width=15 height=5) there would just be a short dash and hide the player from the viewer. The (autostart=true) means it will start as soon as the program is accessed. The ( loop=3) tells it to repeat the song 3 times.

    The following is how you create a link to add music to your program that the viewer may play if he wants to.

      <A HREF="Blubayou.mid" > Blue Bayou </A>

    In your program, it would appear like this, you can click on it if you wish.

    Blue Bayou

  • Return To The Top

  • LINKS TO OTHER PLACES

    The following is how you create a link that your viewer may click on to go to another location.

      <A HREF="http://(file address and name)"> Your Title </A> An HTML Tutorial

    In your program, it would appear like this,

      Your Title An HTML Tutorial

  • Return To The Top

  • How About Tables

    No, not eating tables.
    Picture frames on your webpage
    that contain information.

    This is a single Row, single Column Table.
    THE CODE WOULD LOOK THIS,

    <CENTER>
    <TABLE BORDER="8" CELLSPACING="2" CELLPADDING="0">
    <TR> <TD>
    <CENTER>
    <H2> No, not eating tables. <BR> Picture frames on your webpage <BR> that contain information. </H2>
    </CENTER>
    </TD> </TR>
    </TABLE>
    </CENTER>

    If you copy the code above and paste it in your page, you can change the text and use it just like the one above. You can change line 2 by adding "BORDERCOLOR=BLUE" or "BGCOLOR=AQUA" like the tables below, or use both (pick your own colors).

  • Return To The Top



  • TABLES FRAMES
    GRAPHICS HTML
    This is a two Row, two Column Table


    This is a one Row, one Column Table framing a graphic, with a specified Border Color.


    This is a one Row, one Column Table, within another table. that is framing a graphic with a specified background color.

    Return To Main Page


    Thanks for stopping by.