[ Home | HTML code colors | Free Webpage Backgrounds | Free Hamster Webpages!]
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:
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.
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.
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.
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.
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:
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:
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:
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/seangels/">Hamster Haven</A>And when viewed by a browser, it would look like:
Hamster HavenIf you want to try out this link, then you must be connected to the Net.
mailto:whatever the email address isIf I wanted you to mail me about something, I would type:
Click <A HREF="mailto:email@example.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/seangels/bera.gif">This would place an image of a banner on the screen, taken from the address given between the quote marks.
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/seangels/bera.gif" ALT="Load this to see a banner">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/seangelsand 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.
<IMG src="//www.oocities.org/seangels">Then add a slash to the address:
<IMG src="//www.oocities.org/seangels/">Then add the name of the image:
<IMG src="//www.oocities.org/seangels/bera">And then add the extension:
<IMG src="//www.oocities.org/seangels/bera.gif">To round it off, you may wish to add the ALT part:
<IMG src="//www.oocities.org/seangels/bera.gif" ALT="Load this to see a banner">Remember to always ask the permission of the author of a page before you use his images.
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:
eg. <BODY BACKGROUND="http://www.oocities.org/seangels/bera.gif">You can get images for this in exactly the same way that you can get images for putting directly onto your page.
Click for an all-expense payed flight back to Hamster Haven. Don't you love us?