Dolphin Haven

Dolphin Haven
`Webpage help`

[Home|HTML code colors|Free Webpage Backgrounds]

Styling text This isn't text that styles, it's how to style text - that means bold, italics, etc.

Breaking up your text The pick-axes of HTML.

Putting links into the page Linking to other things - a bit like this link I suppose.

Getting images on A way to illustrate your point, while decorating your page.

Text and background How to set default colours for these things, and use picture-tiles as a background.

Conclusion Allow my creative juices to summerise and bid you farewell.

Part 1 Go back there if you dare.

Another way to vary the text is to present it in different styles. One of the tags that does this is the B tag, for bold text.

eg. <B> This tag makes me bold. </B>

There are several other wrap-around tags that change the way text appears. They all work like the example that's just above. They are:

The I tag for writing in italics.
The U tag for underlining text.
The STRIKE tag for ~~crossing out what you've written.~~
The SUP tag so that the main text can have ^{superscripts.}
The SUB tag so that the main text can have _subscripts.

There is one more tag that is often used to change how text looks... In fact, it's used too often for my liking, which is why I'm not sure I should give it to you, but if you promise to use it sparingly, then read on.
The tag is used in just the same way as the other tags that wrap around text; eg. the B tag. It is called...
The BLINK tag, and is used to make text flash on and off (or blink).

eg. <BLINK> This text blinks </BLINK>

The reason that I was reluctant about revealing this tag is that people new to HTML seem to think it is so much fun that they need to create web pages where half the text disappears every couple of seconds, and this is very frustrating and difficult to read.
At first you can cope with the odd bit of flashing text. It stands out from the crowd, and can be entertaining. But it soon becomes annoying as you wait for it to appear again so that you can read the next sentence. So make sure you do not put large chunks like this into the BLINK tag, or people will soon leave your page. Some browsers don't even understand the BLINK tag, so they can't annoy their viewers, but the BLINK tag does not confuse them - they just ignore it. Anyway, I think I've made my point, so I shall stop the blinking text, but remember my warning!

This section is about the second type of tags: The ones that don't wrap around text, but exist as an independent unit. (That sounds quite clever, doesn't it.) These types of tags are like plump juicy strawberries in jam (jelly to you Americans) - ie, rare (especially if it's blackcurrent jam). I am only going to introduce four of them on this page, and three in this section.
The first two are used to break up text. The first one is the BR tag, for a break in the line (I said I'd tell you how to do that later, didn't I.)

eg. This is the first line...<BR>...And this will appear under it on a new line.

On a web page this will appear as:

eg. This is the first line...
...And this will appear under it on a new line.

In the example with the BR tag in it, I put everything on one line to show you that it is the tag that makes the line break, and not pressing enter; but it's actually a good habit to type in the Notepad:

eg. This is the first line...<BR>
...And this will appear under it on a new line.

This means that when you look over what you've written on the Notepad you get a better idea of how the web page will look.
The second tag that breaks up text is the P tag, which breaks text up into paragraphs. It uses exactly the same pattern as the BR tag. Just to show you how it looks:

eg. This small lump of text is going to be my first paragraph.<P>This is going to surprise you by being the second.

And on a web page this appears as:

eg. This small lump of text is going to be my first paragraph.

This is going to surprise you by being the second.

As with the BR tag, it's better to break up the line on the Notepad at the same place you insert the P tag. To make the Notepad look more like the eventual web page, press enter twice.
The final tag that I'm going to explain in this section is a bit more complicated, but I'm sure you can cope. The purpose of the tag is to divide the page into sections. On this page, I am doing that with pretty little rainbow coloured strips; but you will often see very thin lines that stretch across the page and break it up. They have a 3-D effect, and look as if they are etched into the page. Do I hear you frantically clicking your mouse as you scroll down the page to find out just how to achieve this marvellous feat? Well, you can stop scrolling now because I'm about to tell you how to do it. The tag you have to use is called the HR tag, and it produces what is properly called a "horizontal rule".

eg. ...and that concludes the first section.
<HR>
To begin my second section...

The above example would produce the following on a web page:

eg. ...and that concludes the first section.

To begin my second section...

Now, I said that this tag is slightly more complicated than the previous two tags, and I wasn't lying. What makes it that bit more complicated is that it can be varied. All I'm going to introduce to you is how to vary how big it is. The first way that this can be varied is by changing how far it stretches across the screen. This can be measured in two ways: the first way is in pixels. One pixel is like an atom on a computer screen - it is the smallest possible amount of space that something can use - a dot. To use this method, you must type:

eg. <HR width=how long you want the line to be, in pixels>

So if you wanted a line that was 100 pixels long, you would type:

eg. <HR width=100>

The above example would produce the following on a web page:

The second way to measure how long you want the line to be is as a per cent of the screen's width. To do this, you have to include the % sign:

eg. <HR width=per cent you want%>

So if you wanted a line that stretched across half of the screen, you would type:

eg. <HR width=50%>

The above example would produce the following on a web page:

The other way I'm going to show you to vary the line is to vary its thickness. This is always measured in pixels, and works as follows:

eg. <HR size=how thick you want the line to be, in pixels>

So if you wanted a line that was 6 pixels thick, you would type:

eg. <HR size=6>

This would produce a line like this:

You can easily combine the two ways of changing the line:

eg. <HR width=75% size=10>

This would produce a line that goes three quarters of the way across the screen, and is ten pixels thick. It would look like this:

And so we must move, onwards, ever onwards, but what do we reach? Tomorrow, and tomorrow, and tomorrow. But, leaving old Shakespeare in his grave for the time being, let us investigate something that he wouldn't have made much sense of: the anchor tag. What makes the World Wide Web what it is, ie. a web, is the links that exist within it. The anchor tag is the gift we are given to create links to other web pages. The tag is A. As with varying the font using the FONT tag, the opening part of the A tag must contain a command. If what you are striving to achieve is a link, then the command you want is:

HREF="Put the address in here"

Now, the A tag is a wrap-around tag, so logically it must wrap around something. What it wraps around is the text that appears underlined and a different colour. So we get the pattern:

<A HREF="The address or location (what is known as the URL)"> You can click on this bit to go to the address </A>

So a link to this page would look like:

<A HREF="http://www.oocities.org/Athens/Forum/5336">The Absolute Beginner's Guide to HTML</A>

And when viewed by a browser, it would look like:

The Absolute Beginner's Guide to HTML

If you want to try out this link, then you must be connected to the Net.
Another link that you might want to include in a page is a link for people to email you. To do this, you have to replace the address with:

mailto:whatever the email address is

If I wanted you to mail me about something, I would type:

Click <A HREF="mailto:tocsin1@hotmail.com">here</A>to mail me.

And this would appear on a web page as:

Click here to mail me.

When you click on this link, a new window comes up with my email address already in it.

All you know at the moment is how to put text onto your page; OK, you know loads of ways to present that text, but it's time to cross the border. And where do we find ourselves? In Graphics Land.
Pages and pages of text can get boring (of course, this site is an exception!), so we all like to see the odd pretty graphic here and there. The IMG tag, for images, is the last of the four tags that follow pattern two, so they stand alone, and do not wrap around anything. The pattern that they follow is:

<IMG SRC="the address of the image that you want to put onto the screen">

The only types of graphics files that can be used on the Web are those with the extension "jpg", "jpeg", or "gif".

eg. <IMG src="//www.oocities.org/Athens/Forum/5155/antelope.jpg">

This would place an image of an antelope on the screen, taken from the address given between the quote marks.
I know you want to see it, so by using the tag shown above, I can put the image on the screen:

Lots of people who surf the web do not automatically load images, so it is helpful to them if there is a bit of text in the space where the image should be. This is done with the ALT command, and the text is put into quote marks.

eg. <IMG src="//www.oocities.org/Athens/Forum/5155/antelope.jpg" ALT="Load this to see an antelope">

The easiest way to get images is to surf the web until you find one you like. Right-click it and select "Save Image/Picture As..." (the former is for Netscape; the latter, Microsoft). Between the quote marks you then have to put the address of the page, then a slash, then the name of the image. (There are much quicker ways to do this process, but they vary depending on who hosts your page. This method always works.) So if you are at the page with the address:

http://www.oocities.org/Athens/Forum/5155

and you see an image of an antelope that you want to use, then right-click on it. Click on "Save Image/Picture As...". The box that says Filename will have the word "antelope" in it, and the box below will say either GIF file, or JPG file /JPEG file. In this example, it will say JPG, because the image of the antelope is a JPG file. YOU DO NOT HAVE TO SAVE THE IMAGE.
You now have all you need to place the image into your page. First type the page address in the IMG tag:

<IMG src="//www.oocities.org/Athens/Forum/5155">

Then add a slash to the address:

<IMG src="//www.oocities.org/Athens/Forum/5155/">

Then add the name of the image:

<IMG src="//www.oocities.org/Athens/Forum/5155/antelope">

And then add the extension:

<IMG src="//www.oocities.org/Athens/Forum/5155/antelope.jpg">

To round it off, you may wish to add the ALT part:

<IMG src="//www.oocities.org/Athens/Forum/5155/antelope.jpg" ALT="Load this to see an antelope">

Remember to always ask the permission of the author of a page before you use his images.
You can also add images by drawing or scanning them into a Paint/Paintbrush file. You then need to use some (not cheap) software to convert the file to a GIF or JPG/JPEG. This method is really a bit too expensive and time-consuming for my liking, but feel free to search the web for more details if you're desperate for ways to use up your time and money.

There is one more way that you can brighten up your web pages, and that is by changing the colours of different types of text throughout the page, and by using a background. If you want to set the standard colour of text on your page (this will be over-ridden by any COLOR commands in the FONT opening tag) then you can use the TEXT command in the opening BODY tag. If we return to the example of a very simple web-page about chocolate, we could add the TEXT command like this:

<HTML>
<HEAD>
<TITLE>The Chocolate page</TITLE>
</HEAD>
<BODY TEXT=the colour you want>
I eat seven bars of chocolate every day, and I weigh 24 stone.
</BODY>
</HTML>

The colour can be a name (one of the 16 I mentioned earlier), or a 6-digit code in hexadecimal (which I also explained earlier).

eg. <BODY TEXT="red">

Or:

eg. <BODY TEXT=#ff0000>

Other (what are known as "Toplevel") tags like this are:

BGCOLOR=
This is for the background colour.
LINK=
This is the colour for the text of a link before it has been visited.
ALINK=
This is what colour a link is while it is active (which means for the second or so that you are clicking on it).
VLINK=
This is the colour for the text of a link that has been visited.

You can put any, all, or none of these commands into the opening BODY tag.
If you want to put tiles behind your text that have an image on them, then you can put a different tag into the opening body tag. It is the BACKGROUND tag.

eg. <BODY BACKGROUND="http://www.oocities.org/Athens/Forum/5155/antelope.gif">

You can get images for this in exactly the same way that you can get images for putting directly onto your page. Or you can use a solid color for your background. Check out Hamster Haven's color guide to find out the code to a ton of "hex" colors, used on webpages!

Dolphin Haven Webpage help

Dolphin Haven

Dolphin Haven
`Webpage help`