HTML Tutorial Part 2

HTML Part 2

If you haven't read Part 1 please go there first.

Hyperlinks

Well, this is probably the most popular command on the Internet - the clickable link or the hyperlink. If you have been on the Internet for more than a day, you have probably seen zillions of these. Want to go to Yahoo or Google?

Y A H O O G O O G L E
So how is that done? We'll just show the code for the Yahoo link.
<CENTER><a href="http://www.yahoo.com">Y A H O O</a></CENTER>
As you can see, the hyperlink is created with the
<a href="web address"> and </a> tags.

No doubt you'll want to know how to make a fancy image hyperlink? Just replace the text with an image source tag.
And here's the HTML for that link:
<CENTER> <a href="http://www.1728.com"><IMG SRC="1728.gif"></a> </CENTER>
Would you like to put a border aroung that image? Then add this code to the link:
<CENTER><a href="http://www.1728.com"><IMG SRC="1728.gif" border=5></a></CENTER>
and the link now gets a border:

Character Entities
Spaces in HTML require special commands. For example, let's take this phrase:
MY PAGE
That looks "squeezed" so let's put 2 spaces between the words: MY PAGE
That still looks too "tight" so let's try 25 spaces between the 2 words: MY PAGE
That's right, there are actually twenty-five spaces between the words "MY" and "PAGE" but HTML will display any number of spaces as just one space.
In order to make more than 1 space, we use one of the HTML character entities. These are special control characters which are entered into HTML documents in order to display special symbols. To display a space we use the character entity:  
Returning to our example, if we enter two of these particular character entities between the two words in our HTML document,
MY     PAGE
then it will display as this:

MY PAGE

There are certain characters - the ampersand '&' the less than symbol '<' the greater than symbol '>' and many others which have certain functions in HTML. In order to avoid display errors in your HTML documents, it is advisable to use the character entities instead of the actual characters.

Here are the codes for displaying the 3 symbols mentioned above.
& Ampersand
< Less Than
> Greater Than
For other Character Entity values go here

Comments  The 2 tags shown directly above are the opening and closing tags for comments and are used like this:

IMPORTANT Always leave a space after the opening tag and a space before the closing tag.
We strongly recommend that you use comments in your HTML documents. As you learn more about HTML and other web languages, your files are going to get longer and more complex. Should you want to go back and edit a file several months (or years) later, it may look totally unfamiliar to you.

Images
No doubt you will want to add graphics to your site to make it look more professional, colorful, interesting, etc. How can you get graphics?
1) Many Internet websites offer graphics that are "public domain" - you can use these for free and don't even have to link back to the site.
2) Other sites make original graphics and usually want credit and a link to their website.
3) You could even make your own graphics.
If you have Windows™, then you have MS Paint, which is good for making simple graphics and it is free. We suggest that you make "gif" "jpg" or "png" graphics. (Of the three, we think "png" graphics look the best).
We also suggest not making bitmap graphics (these have a .bmp extension). They usually are big files (250K to 1 MByte - or more) and you don't want website visitors waiting too long for huge files to download.

IMPORTANT: When you are writing HTML files on your computer, if you do not have the graphic in the same directory as your HTML file, you will see the infamous broken link graphic or . Similarly if you don't have the graphic uploaded to the same directory as the HTML page that references it, visitors to your page will see the broken link graphic.

Incidentally, how do you save graphics to your computer? Right click on the image and save it in the appropriate directory on your hard drive. Remember, some graphics may be the intellectual property of others.

Displaying Graphics
The tag to display graphics on your webpage is: <IMG SRC="pic1.gif"> where pic1.gif is the file name of the graphic.

By default, the image will go directly to the left margin (see above).

If you use the align=left attribute, <IMG SRC="pic1.gif" align=left> an interesting thing happens. The image is still on the left, but the displayed text will wrap around the image. We'll use some asterisks to complete the "text wrap". ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

Note: If you wanted to stop the text aligning at any point, use the <BR clear="all"> command.
By using the align=right attribute, <IMG SRC="pic1.gif" align=right> the same thing happens except that now the image is on the right. Again, we'll add asterisks to complete the example. ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** ***** *****

When we use the align=top attribute, <IMG SRC="pic1.gif" align=top> the top of the image gets aligned with the top of the text but you only get one line of "wrapped" text.

Using the align=middle attribute, <IMG SRC="pic1.gif" align=middle> not surprisingly, does this.
And lastly when using align=bottom <IMG SRC="pic1.gif" align=bottom> the text looks like this.

Well, we have covered a LOT in these 2 lessons of HTML and yet there is still much more to learn (although you are now off to a darned good start). If nothing else, use your favorite search engine to find more HTML tutorials or perhaps you could even buy a good book about HTML.
Good luck with your website building !!!

________________________________________________________

Yes, not only this webpage but this entire website was written using Notepad™ as the only editor.

________________________________________________________

Return To Home Page