123Webmaster.com : Onsite : Building
The ABC of HTML: Lesson 5

by Janine Dalton
http://www.httpcity.com/jalouda/
 

Lesson 5 - Tips And Tricks

Are you feeling brave and adventurous? It does not really matter, because you are not about to learn some complicated techniques! For a start, I don't know any :o)

Now that you have a good grasp of the basics, I thought that I would end with a few tips and tricks. Nothing fancy really; just a few bits and pieces that would have been out of place earlier on.

TEXT

Let's start with a couple of text tricks. Unfortunately neither work in both Internet Explorer (IE) and Netscape, but if you are able to tell from traffic statistics that your visitors nearly all use the same browser, it might be worth jazzing up your page with these.

Firstly, here is a simple way to make your text blink when viewed with Netscape. Just use the BLINK tag:

<BLINK>This text will just keep on blinking</BLINK>

However be warned, for some strange reason most people find blinking text extremely annoying! Many would like to see it banned altogether, but if you only use it once in a while to convey a special message to your visitors, I don't consider its use a mortal sin :o)

Far classier and almost as easy to implement, scrolling text is a trick that will unfortunately only work in IE. Simply place the words you want displayed as a scrolling message inside the MARQUEE tag. You can specify whether it scrolls to the left or right by including the DIRECTION attribute. You can even decide how any times you want the message to scroll by setting the LOOP property. Set it to infinite if you never want it to stop scrolling:

<MARQUEE DIRECTION="left" LOOP="5">These words will scroll across the screen from right to left 5 times!</MARQUEE>

LINKS

Another snazzy effect which will only work in IE is the hover effect, which can liven up your links by changing their colour when visitors move their mouse over them. However, since all that is involved is placing a few short lines of code into the HEAD of your document, feel free to give this one a try. Netscape viewers will have no trouble viewing your page but when they move their mouse over your links, no colour change will occur. Just place the following in the HEAD part of your code:

<STYLE>
<!--
a:hover{color: #ff0000}
-->
</STYLE>

This will result in your links changing to the colour which you specify (red in the example above) whenever anyone moves their mouse (hovers) over them. When you move your mouse away from the link, it reverts back to its original colour.

Now onto an effect that should work in both IE and Netscape (finally!). If the underlining of links annoys you, you can quickly get rid of it. You will need to include the STYLE attribute in the opening part of your link tag to remove the underlining from that particular link:

<A HREF="secondpage.html" STYLE="text-decoration: none">this link will not be underlined<A>

The STYLE="text-decoration: none" bit probably looks like something from outer space to you, but if you copy this code exactly and place it in your standard link tag it will do the trick!

Once again, you can see this effect working in my pink navigation bar on the left. Note that some advise against removing underlines from links, since this is the way links are universally recognised. You must ensure that visitors will still know where to click!

If you do want to remove underlining from all links on a page, you do not have to go to the trouble of rewriting every link tag. Using a technique similar to that used for the hover effect, you can simply include one short piece of code in the head of your document:

<STYLE>
<!--
a {text-decoration: none}
-->
</STYLE>

You probably find the idea of adding this strange gobbledy gook inside the head part of your document a bit daunting and hard to grasp, especially since I said earlier that in basic pages not that much code appears in the head. Don't worry if you don't want to bother with any of this strange stuff. Both these effects use Cascading Style Sheets (CSS), an important tool for controlling the layout of your pages. You do not need to know anything about style sheets to make pages but it can help a lot, especially if you want to move onto more complicated designs. You can't use ordinary HTML to create these effects at all, whereas tiny bits of code using CSS can make huge changes to a page. So I just included a couple bits to whet your appetite! To find out more try Builder.com's guide.

Finally, where links are concerned, one common annoyance is that of the underline extending too far in either/both directions. This is caused by spaces in your code. Normally spaces don't matter too much. If you include too many they are automatically reduced to one. However, when writing the code for links, ensure that the < and > symbols surround the link text tightly. If you want one word in a sentence to be a link, type the spaces in the code before and after the opening and closing parts of your A tag, not before and after your link text!

So don't do this:

This is my<a href="pics.html"> picture page </a>

Instead use this code:

This is my <a href="pics.html">picture page</a>

LISTS

One thing you can do to give your page a professional touch with little effort is to include a list

You can choose from an ordered (numbered) list, an unordered (bulleted) list or a definition (indented) list. Simply surround your entire list with the OL (ordered list), UL (unordered list) or DL tag to create it.

If you are creating a numbered or bulleted list, then inside the OL or UL tag, just place the LI tag in front of every entry in your list. This will have the effect of placing either a solid round bullet or a number in front of each entry.

Don't worry if you add or remove entries at a later date, the numbering will be adjusted automatically. in the example below, the code would create a bulleted list consisting of 3 entries:

<UL>
<LI>item 1
<LI>item 2
<LI>item 3
</UL>

Note that, unusually, the LI tag has no closing part. However, like the P tag, you can include a closing part if you wish. In the case of both tags, the closing part is purely optional.

If you are creating a definition list, you will need to use DT and DD tags. DT stands for definition title, whereas DD stands for definition description. This list will consist of things you want to define or describe in the DT tags, followed by indented descriptions which you place in the DD tags. Like the LI tag, you can close DT and DD tags if you wish, but you don't have to. It is easier to just look at an example, so see my web design links page for an example of a definition list.


Well that's about all there is to the ABC of HTML. I hope that this guide has been helpful. Any comments, compliments or criticisms would be much appreciated. If you have any questions or problems I would be only too happy to try and help :o)

You have learned more than enough to start creating pages of your own. Regardless of how much you learn, this will always prove challenging, annoying and hopefully enjoyable!

The big areas that have not been included in this guide are tables, frames and forms, but I plan to cover these in the future. If you want to know more about these areas, I have found the tutorials at Webmonkey to be particularly useful.

You will also find links to sites that deal with almost every aspect of building a website, including HTML, on my web design links page. As these sites will show you, absolutely anyone can create their own site. So don't be intimidated and give it your best shot! Good Luck :o)

Lesson Index

Introduction: Anyone Can Learn HTML!
Lesson 1: First Steps
Lesson 2: Text
Lesson 3: Colours & Graphics
Lesson 4: Sound & Links
Lesson 5: Tips & Tricks



Discussion - HTML Layout
Related Sites - Check out the extensive list of html tutorial links on 123webmaster.com , to further your html understanding.