Computer literacy, like any other form of literacy, comes in 2 parts. You have to be able to read: to use software and do the front end of computing. But to be fully computer literate you need to be a dab hand at producing things for Computers, and the most powerful form of that is being able to program and create internet pages.
This tutorial will show you how to use basic HTML. HTML is Hyper-Text Markup Language, and is the standard way of making web pages everywhere.
First things first, you need to tell the computer that your file is a webpage. Open up a document in notepad.
Type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
At the beginning. Ignore the doctype section for now - it makes sure browsers will render your HTML correctly, and should be put before every page you do, but otherwise can be left alone. Okay, onto the important bit. You have opened the HTML
tag - everything within is now known to be a webpage. All tags, as they are known, are done in this format, with the tag name surrounded by pointy brackets. Tags are used to declare anything - images, links, sections of the page, and so on. Now we need to close the tag to end the file. This is done by adding a forward slash after the first pointy bracket;
</html>
Right, you can get on typing then? Well, sadly not. The webpage code has to be divided into two main sectors - the header (<head> tag), used for containing invisible information, and the body (<body> tag), which actually contains the content of the page. The head comes first, then the body, and both have to be within the HTML tag. In fact, EVERYTHING has to be within the HTML tag. If anything ends up outside it, something is wrong. Okay, now try putting your head and body tags in.
You should now have something like this;
<html>
<head>
</head>
<body>
</body>
</html>
Right, now all we need to do is save it as a webpage. Press save as, and find somewhere to save your file. Select "all files" rather than .txt, and at the end of the filename you want add ".html" - this will tell the computer that the file is a webpage. If you now save your file and find it with Windows Explorer, you should be able to open it with a web browser. Well done - your first webpage!
Wait a minute, though - it's blank. It doesn't have ANYTHING on it at all. Right, open up the file again in notepad; we've got work to do.
The first thing you probably want to do is add text. That's simple, at least, type it in the body. Save the file, and it should now appear when you open the webpage. But supposing we want to add a title? Firstly, we have to look at how to get the text on a separate line. But isn't that easy - you can just press enter? Not in HTML - you need to tell the browser that you're putting in a line break. This is achieved with the little
tag. Anything before and after the tag is on separate lines, it's as easy as that. Adding several will put blank lines in. Note that br is a tag that DOES NOT need to be closed.
Okay, you should now have your title and text separate, but they are still both boringly the same. So what can you do to make the title look all lovely and titleish? Add one of the heading formatting tags. This little happy tag family has 3 members - H1, H2, and H3. H1 makes the text biggest, H2 less so, H3 still less so. Just enclose your text with <h1></h1> and you have nice big text! The other simple formatting tags you should know about now are
<b> (bold) and
<i> (italic). These work in the same way as the H1/2/3 family.
Finally in this basic session, we'll look at how to add a bit of colour to our webpage. The first thing here is to learn that some tags have
attributes. Attributes tell the computer what do with the contents of a tag. Each tag has its own set of possible attributes (and many, particularly simple ones such as
or <h1> have no attributes at all). The body tag has a lot of attributes, that can set basic features of the page.
Attributes go inside the pointy brackets but after the tag name, and go in the format <tagname attribute="formofattribute">. In the body tag, we'll give it the color (which here is text colour) and bgcolor (background colour) attributes. Technically it's best to use HTML colour codes for these, but for cimple colours the colour names are just as good.
So we can have:
<body bgcolor="green" color="white">
Note that the body closing tag remains unchanged. The above should turn your background green and your text white; feel free to mess with the colours - any of red, blue, green, white, black, and yellow should work fine. Use them lowercase and make certain they are spelt correctly, though. The computer may know what "green" is but "grean" is as far as it is concerned utterly different (and in this case fully incomprehensible).
So your final code might look like this:
<html>
<head>
</head>
<body bgcolor="green" color="white">
<h1>My Webpage</h1><br>
This is <b>MY</b> webpage. Marvel at its sheer <i>awesomeness.</i>
</body>
</html>Right, congratulations! You can now make basic webpages. Next time, we'll move on to adding images, more advanced text formatting, background images and of course the main point of webpages as opposed to documents: the hyperlink.
Show Posts
