I want to thank you for taking the time to visit me.
In this website you will learn all the basics needed to
create your own webpage. These pages will continue to evolve so
keep checking back.
I hope you enjoy your visit here, and if you like my pages, bookmark
them for future visits. I also invite you to visit my other 4
websites while you're here. You will find everything you need in
the directory listed below.
Please choose from the table below to go wherever you would like.
Jump Within Your Document
It is easy to create "hot links" within your document that can be "clicked" by the reader to jump to another part of the document. There are two steps involved.
- INSERT A TARGET at the place you want the link to jump to. This is an example of a target:
<A NAME="target_name_here">
- INSERT A LINK to be clicked to cause the jump. The link looks like this:
<A HREF="#target_name_here">hotlink_text</A> The hotlink text will appear underlined and in the "link" color. When the user clicks the hotlink, the web browser will jump to the target text. Go to index. is a good example of a hotlink. Use the VIEW, SOURCE feature of your browser to see the HTML tags surrounding the hotlink and the target text at the top of the index.
Jump To A Document On The Same System
It is easy to create a "hotlink" that will cause the web browser to open another file located on the same server as the file from which it is being called. The tag format for this kind of link is:
><A HREF="relative_path_and_filename">hotlink_text </A> If you want to jump to another page within the same website it is only necessary to specify the filename. An example of jumping to a document on the same server would be: Let's say the page you are on is called "Misty's Window On the World" (with the URL being "http://www.geocities.com/Broadway/4718".) The page you want to jump to is named "My Story". The tag would be written as <A HREF="me.html"></A>. This is one example of jumping to another page on the same system.
Another example is what I have done in this website. I have split my help site into two pages. If you look under View, DOCUMENT SOURCE, in your browser in the table of contents you'll see that I have two sides. The items on the left side are on "index.html". The items on the right side are on "index-2.html". Here is the combination I have used to allow you to jump within my website.
<A HREF="#index.html">Jump To A Document On The Same System</A> I have this combination on the page you "jump" to:
<A NAME="jumpto">hotlink_text</A> Using "A NAME" will tell the browser that you are going to this specific place on that page. Where the example above of going to "me.html" on "My Story" tells the browser that you are just going to that page.
Jump To A Document On Another System
Creating a hotlink that jumps to a document on another system anywhere on the Internet is very similar to creating a link to a document on the same system. The only difference is that instead of using the relative path and filename of the called file, the URL (uniform resource locator, or "internet address") is used. The link:
<A HREF="http://www.geocities.com/SiliconValley/Lakes/2639/">Go to "Misty's Magical Designs" </A> will take you to a page called "Misty's Magical Designs" located at http://www.geocities.com/SiliconValley/Lakes/2639/. You will find a link on that page to return you here, or use the "back" button on your browser. Try it!
Go to "Misty's Magical Designs"
Putting Graphics On Your Page
You can put graphic images on your pages when the graphic image exists as a separate file on your server. The file format must be readable by browsers. I suggest either the GIF or JPG format for your image. Your page shouldn't "depend" on the graphic, since some browsers are "text only" and will not display graphics. In it's simplest form, the tag used to add a graphic to your page looks like this:
<IMG WIDTH=128 HEIGHT=92 ALT="MMDesigns" SRC="1logo.gif" ALIGN="bottom"> This tag will cause a graphic file named "1logo.gif" to be aligned like text on your page, and it will look like this:
You will notice that I have added the width and height attributes in this tag. By doing so it allows the webpage to load faster. You see, when browsers "read" a webpage, they look at everything on that page, including graphics. When size attributes of the image are not indicated, the browser will take longer to read your page. Your broswer doesn't know how much space to allot for everything on the page until it's fully loaded. By adding these size attributes it tells the browser that this much space needs to be set aside, allowing the browser to load the page at a faster rate.
You will also see the inclusion of the ALT tag. This is used to indicate to your visitor what this image is while the page is loading. If you have a "Welcome" image at the top of your page, using the ALT tag will tell your visitor they are being welcomed to your webpage long before the image fully loads. It's not critical that you include this in your tag line, but it is a nice convenience to your guests.
You can control the positioning of the image by adding tags. Here is an example of surrounding the image tag with <CENTER> tags:
You can also combine the image tag with other elements of your document. For instance, the following combination:
<IMG WIDTH=128 HEIGHT=92 ALT="MMDesigns" SRC="1logo.gif" ALIGN=bottom> <A HREF="#index">Go to index.</A> gives this display:
You can also have a "clickable" image. The following combination will allow the image to be clicked on and the link will take you to that location. As in the case of my "logo" button, clicking on it will take you to "MMDesigns". Here is the combination you need to have a "clickable" image.
<CENTER><A HREF="http://www.geocities.com/SiliconValley/Lakes/2639"><IMG BORDER=0 WIDTH=128 HEIGHT=92 SRC="1logo.gif"></A></CENTER> Here is what it will look like:
You may have noticed a new part to this tag. It's the inclusion of the BORDER=0. When you are using an image to link to another location using BORDER=0 in the code will eliminate the line around your image. If you run your curser over the image it will show you that it's a "linked" image.
There is much more to be said about graphic images, since they are a key element in really good pages (and the only element in really bad ones...lol). Graphic images can also detract from your page by making it very "slow" to load. Make sure if you use graphic images, you use them well. You might want to ask yourself this one question: Does this image ADD to my theme, or detract from it? If the answer is "detract", you might want to rethink using that specific image.
Add Music
Adding music to your page is a nice finishing touch. One important thing to remember when choosing your musical selection is how well does it fit into the theme of your page? If your page consists of reading materical you might want to have "easy listening" type music. There is nothing more maddening (not to mention disrupting) than trying to read a webpage when the music is loud and distracting. Music should enhance what you've spent hours writing, not detract from it.
There are many filters used in web browsers to "read" music HTML. I use Crescendo. You will want to make sure your web browser is enabled to "read" music HTML.
Not all of us have the same preference in music, so it is important to allow your visitor the option of turning off the music. The following combination will place your musical selection on your page. It will appear as a small button. By right clicking on this button, your visitor can choose to stop the music.
Here is an example of the combination used for adding music to your page:
<EMBED SRC="BridgeOverTroubledWaters.mid" AUTOSTART="TRUE" HEIGHT=16 WIDTH=16 VOLUME=50><BGSOUND="your.mid"> Gives this display:
Well, there you have it, all the basics needed to create your own webpage. I hope this has been some help to you beginners, and possibly a refresher to old timers with short memories (like mine..lol) I will be adding some tutorials on making your own graphics in the very near future. I will attempt to teach you how to make your own bars, buttons, and backgrounds. If you have any suggestions as to other things you might like to see me attempt to teach, send me an e-mail with your suggestion.
© 1997, 1998 Misty's Magical Designs, All Rights Reserved,
written permission needed to use all or part of
anything on this page.