Custom Search

HTML Lesson 1

by Caroline Seawright

 

Well, I've done HTML for three years as a job, so I guess I can give a little advice to people who want to learn HTML themselves!

The way that I learned HTML was to go and view the source of someone else's page, paste it into my own file and change the content. Bit by bit, I learned what bits could be changed to make the page do what I wanted it to, and how to make the pages viewable on most browsers (rather just the two that people these days seem to aim for), and how to make images, links, background colours, etc.

Well, lets start from basics, so you don't have to do what I did (though you can if you want to, of course! It's a good way to learn! Just don't plagerise the whole page/site, please... people sometimes get upset if they even think you've been using their template for yourself!)

The HTML can be copied into Vi, Notepad, Wordpad, or any other text editor that you may have, and then save the file to your harddrive. Load up your web browser and point it to your saved file to view the web page!

Simple HTML Page

<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
  My text to be written here.
  </body>
</html>

This is the most simple HTML page you could do.

If you try this, the title will be shown up the top of the browser (or however your browser happens to show the title) as 'My Page'. The content will just be 'My text to be written here.' Nothing fancy at all. (FYI, things inside <> are called tags. Attributes are extra pieces of information inside a tag.)

HTML can be this simple!

But you'll notice, that if you've set your browser to have a non-default background colour, the page that was created will show in the browser's set colour. For instance, my Netscape has purple. The page with the above code will be purple. Most people will have the default colour - white - and it will show white. Someone else might have it fluro pink, and so on.

If you want to set a colour for the page, and make sure that everyone sees that colour, this is the next step:

Body Tag

  <body> needs to have the attribute bgcolor added.

You could add a name (eg. white) or a number (#FFFFFF), if you know how to get the numbers for the colours, but this is how we will set the background of your page to white, for everyone:

  <body bgcolor="white">

or   <body bgcolor="#FFFFFF">

Nice, huh? You can try out all the colour names you know, and see how that goes. Some will work, some won't. If you need specific colours, it's best to use the Hex value, which can be found in a program like HomeSite. If you have a graphics program, like Paint Shop Pro or PhotoShop, you can get the RGB values, which you then can turn into Hex values in a program like HomeSite or on a Scientific Calculator (or even the MS Calculator, if you're using Windows).

(For the calculator, if R:125, G:100, B:1 type in a number at a time in Dec, then select Hex, to get that Hex value. This would be R:7D, G:64, B:1 ... so your value would be "#7D6401"! Each Hex value is two digits, so 1 changes to 01!)

Now you want to change your text colour? This is also done in the body tag, using the text attribute!

Again, it needs a colour, and can be done like this:

  <body bgcolor="white" text="black">

or

  <body bgcolor="#FFFFFF" text="#000000">

Other attribues that are commonly used to change colours of a page are link, alink and vlink. These are to do with changing the colour of a link (of course), it's active state (while 'clicking' on the link) and it's visited state (once you've 'clicked' on this link, and go back to the page). They can all be set to different colours, or even to the same colour! Here is how the full body tag might look:

  <body bgcolor="white" text="black" link="gray" alink="gray" vlink="gray">

or

  <body bgcolor="#FFFFFF" text="#000000" link="#C3C3C3" alink="#C3C3C3" vlink="#C3C3C3">

Making Links

Since I've mentioned links, now is probably a good time to find out about them! Links are those underlined words (or images) on a page, where you 'click' to go to another page.

You've just learned how to set their colours, so now you can test them and see them in action for yourself!

  <a href="http://www.thekeep.org/~kunoichi/">ThemeStream<a>

This will make a link from your page to the ThemeStream web site!

These can also be put around images, too:

  <a href="http://www.thekeep.org/~kunoichi/"><img src="image.gif" border=0 width=100 height=100 alt="Image"><a>

You could have page1.html instead of http://www.thekeep.org/~kunoichi/, if you've made up a page with that name, and it's in the same directory as your current file. Test it out (after making another page) and see how it works!

Images

Before I finish this lesson, I guess you want to see how to do images?

<img src="images/image.gif" border=0 width=100 height=100 alt="Image">

They don't need to have links around them - you can put them by themselves as so. The src attribute means 'source' - you can pick out an image at your end, or another site, using the URL of the image, or you can just put in the directory and image name, as above. Play around with it and see how it's done - remember that if you point to the wrong directory, or if you don't have an image, you'll get a broken image (if on a graphic browser).

The border attribute only matters if you have a link around the image - the number at the end could be a 0 (no link showing around the image) or a 1 (to have a link showing around the image). This is up to you - do you want it obvious to people, or do you want it subtle?

Width and height should be added (though they don't have to be there). The width should be the width of the image itself, and the height should be the height of the image. If these are incorrect width and heights, then your image will look squashed and strange. Play around and see what happens!

Finally, the alt tag should always be added, even if it's just a picture. (In that case, if you don't have any words for it, I'd use alt="" without anything inside the quotation marks.) Why? Because some browsers just will have [IMAGE] or [INLINE] which isn't very nice to look at, if you don't have this attribute. It's better to show nothing, for these browsers, or to have actual words (eg. alt="Photo of Me") so people can easily find out what's going on. This is especially important if you want your page useable for blind people, and for people with text-only browsers.

End of Lesson 1

Go on to HTML Lesson 2 when you're ready for the next step!

That's it for this lesson! I hope this helps! ^_^


© Caroline 'Kunoichi' Seawright 2000 - present

If you enjoyed this page, please join my Egyptology & Archaeology Essays Mailing List.

Or contact me on Twitter:

comments powered by Disqus