Learn HTML: Standing out

Standing Out

Before we get to publishing your page for everyone to see, lets spruce up that text a little.

First, get to know this guy: He's a Paragraph Break Tag and he is going to become a very good friend. The tag puts an empty line space between words, images or sentences.

Like

this

Another important aquaintance is The tag moves the next word, image or sentence to the very next line. Like 
this.

You can also make your text ITALIC by using or BOLD by using or UNDERLINED by using Note the of use the ending tags. For example; when I put I told the browser I no longer want the text to be underlined.

You can also make your text bigger or smaller by adding tags.

Will make the text big

You can even temporarily change the color of the text by adding a color tag

will make the text red

Try combining the color and size tags

will make the text small and green...heh heh

I can even combine more tags for added effect. Here's an example:

This is large, yellow, centered and bold</CENTER>

You can also change the kind of font the browser sees by adding the FACE code to your FONT tag:

times, arial and courier are the most easily recognized font faces for the average viewers computer, so try to stick with them </CENTER>

times, arial and courier are the most easily recognized font faces for the average viewers computer, so try to stick with them </CENTER>

times, arial and courier are the most easily recognized font faces for the average viewers computer, so try to stick with them</CENTER>

Lets have some more fun:

R A I N B O W

Here's how I did it:
<CENTER>
R
A
I
N
B
O
W
</CENTER>

Adding Images

Well, you've created a homepage and added some colorful text......how about some pitcures? The code to add an image to your page is simple:

It will automatically align to the left:
Example:

Code:
<IMG SRC="bigchoc.gif">

Result:

To center it, try this:

The <CENTER> tag tells the browser to center the image, and the </CENTER> tag tells it not to center anything else after that point.

To align the image to the right use these tags:

Two images side by side? That's easy.
<IMG SRC="celes.gif"><IMG SRC="locke.gif">

If you need some space between the images you can add a "half space" code:
<IMG SRC="filename" HSPACE="number of halfspaces you require here">

Adding Links

At some point you are probably going to come across another page that you want to tell you're visitors about, or you may want to add on to your web site. Either way you're going to need to get familiar with creating links. To tell a browser you are creating a link, use this code:

For example, to create a link so people can Email me I would type:

<A HREF="mailto:Maries_hq64@yahoo.com">Email me!</A>

It would appear like this: Email me!

Important: You need to add the </A> after each link code. That's the ending tag that tells the browser to stop linking the text to the URL.

To link to another persons page you would type the exact URL. For example, to link to this page you would type:

<A HREF="http://geocities.datacellar.net/maries_hq64/tutorial.html">Click here to learn HTML</A>

It would appear like this: Click here to learn HTML

To link to one of your own pages just type the page name:

<A HREF="pagenamehere">Title Here</A>

For example:

<A HREF="zelda64.html">Zelda 64: Ocarina of Time</A>

Would link people to my Zelda 64 walkthrough page, and would appear like this:

Zelda 64: Ocarina of Time

If YOU wanted to link to my Zelda 64 walkthrough, you would have to do a little more typing because my page is located outside of your web space. As I said before, to link to a page outside your web space you need to type the complete URL. That's how the browser knows exactly where to look. Here's what you would type to link to my zelda page:

<A HREF="http://geocities.datacellar.net/maries_hq64/zelda64.html">Zelda 64: Ocarina of Time</A>

You can also use an image as your link, rather than text, like this:

Click here to be transported to HQ64: Nintendo and Playstation Central

I used this code:

Click here <A HREF="index.html"><IMG SRC="banner.gif"></A> to be transported to HQ64: Nintendo and Playstation Central.

I didn't bother typing http://geocities.datacellar.net/maries_hq64/ because both of the items (the image and the page) I am linking to are located in my own web space, so it's unnecessary. If I were linking to another persons site, I would have to use the exact URL. Let me explain that some more:

If YOU were to link to MY page using MY banner, you would have to type the complete URL:

Code:
Click here <A HREF="http://geocities.datacellar.net/maries_hq64/index.html"><IMG SRC="http://geocities.datacellar.net/maries_hq64/banner.gif"></A> to be transported to HQ64: Nintendo and Playstation Central

Result:
Click here to be transported to HQ64: Nintendo and Playstation Central.

However, to link to one of your own pages or images, you only need to type the name of the image or page. I am linking you to my own home page, using one of my own images, so I only need to type:

Click here <A HREF="index.html"><IMG SRC="banner.gif"></A> to be transported to HQ64: Nintendo and Playstation Central.

To achieve this:
Click here to be transported to HQ64: Nintendo and Playstation Central.

Adding Sound

So, you've created a page and given it some color......You've learned how to make your text stand out and how to add images.....how about adding some background music? If you have a sound file, such as a MID or a WAV you can direct browsers to it using this code:

Want music? <A HREF="filename">Click Here</A>

For example: if the filename of the music you want on your page was dance.mid the code would be:

Want music? <A HREF="dance.mid">Click Here</A>

When clicked, the browser will load a little console and will automatically start playing the sound file you chose.

Try it:

Want music? Click Here

Many people have asked me for codes that hide the little console, or codes that embed it and let it play automatically when the page loads. There are dozens of these codes out there, and I do know a few of them. The problem is, there is no single code that's compatible with all browsers. In fact, some of the most commonly used codes will work great with Internet Explorer, but will cause a page viewed with certain versions of Netscape to stop loading altogether. The "Click Here" code serves two purposes: First of all, it's compatible with any browser. Second of all, believe it or not, not everyone wants to hear your music. If someone is surfing late at night, or at work, they might not want other people to know what they are doing. If they forget to turn off their speakers and stumble on to a page that blasts a midi as soon as it loads, they could be in a lot of trouble. I can guarantee they won't be back to your page after that. The "Click Here" code gives everyone, regardless of browser, the option to hear your music, or not, if they choose to.

Search Engines and Meta Tags

What fun is having a web site if no one sees it? If your page isn't registered with a search engine the only way anyone will ever see it, much less know it even exists, is if they type in the exact URL. What are the chances of that happening? That's why you need to register your site with as many search engines as possible. They're are many, many places that will allow you to register for free. The places I usually go to whenever I make a new page are Add me and Be Seen.

The next step of getting noticed is to make your page search engine friendly and accessable. If you've ever done a search of your own, then you know the search engine brings back not one, not two, but anywhere from 200 to 20,000,000 pages depending on which search engine you used. That's a lot of competition. You can push your site closer to the front of that long line of pages by using META TAGS.

Meta tags are placed right in the HEAD of your page, directly below the TITLE. They are invisible to the person viewing your page with a browser, but they are the first thing the search engines spider will look for after the title of your page. Many people know about Meta Tags, but don't make good use of them. I'm going to show you how to put a lot of information in to one or two sentences, and make those tags work, and work well!

The two most important tags to getting your site noticed are the DESCRIPTION tag and the KEYWORD tag. They should be placed after the </TITLE> tag and before the </HEAD> tag. Let's start with the most important of those two, the DESCRIPTION.

Note: The first thing a search engines spider will look at is your TITLE. Make sure your page has a good one!

This is the description tag:

Eg: Here's the description I used for my Final Fantasy VII page:

"A complete walkthrough of FF7. Square Softs RPG game Final Fantasy VII is one of the best by far for Playstation. This final fantasy 7 walkthrough is thorough, from start to finish and complete with materia, limit breaks and ultimate weapons lists. I'll even help you breed chocobo's!"

Notice I used the title, Final Fantasy VII, several times in various ways. That's because whem people do a search they could type it in as FF7 or Final Fantasy VII or final fantasy 7. I also made a point of using the words Square Soft, RPG, walkthrough, Game and Playstation in my description. Those are common search items, and I want my page to come up if anyone uses them.

Next is your KEYWORDS tag.

eg: Here's my keyword list for my Final Fantasy VII page:

"FFVII, Final Fantasy 7, RPG, walkthrough, strategy guide, role playing, play station, PSX, video games, square soft, free"

I always throw a "free" in there because it's the most commonly used keyword there is. "Games" is also a common keyword.

Here is an example of how your heading should look if you used Meta Tags:

<HTML>
<HEAD>
<TITLE>your pages title here</TITLE>
<META name="description" content="put a brief 2 or 3 sentence description of your page here. Use as many KEYWORDS as you can">
<META name="keywords" content ="several keywords that are relevant to your pages content here">
</HEAD>

Back to

Created using WordPad by ~Marie