I'm not going to waste your time teaching you about the history of html and the current versions, all that can be found in almost every encyclopaedic article about the subject. I'll just go straight to what you need to know, and how to use html to create web pages.
First of all, before we begin, you're going to need a text editor such as Notepad which we will be using to type our html code.
Open up that text editor and minimise it, just keep it open, on stand by, till you need to practise typing the code yourself.
Let's begin..
HTML is a really simple language to learn, what you need to understand first of all is that at the heart of html and in all html pages we use "things" called "tags" ; characterised by being enclosed in these signs "<html_tag>"; Let me elaborate, for example:
<font>
The above example is an opening tag and the following one is a closing tag:
</font>
These tags give properties to what you put between them.
Every HTML document must have the HTML tags to define it as a HTML document.
<html>
</html>
Go ahead and type those 2 tags.
Now we need some <head> tags. The <head> tags contain things like the document title. In between the <html> tags I want you to put your <head> tags and in between that you must put the <title> tags so that your entire document looks like this:
<html>
<head>
<title>My Page</title>
</head></html>
Now we must save the file. Make sure you save the file with the name index.html and also make sure that you change the save as type to All Files to make sure that it gets saved as a .html file and not a .txt file. Now open your new .html file in your web browser. Make sure you keep this window open. You need to save each time you have changed your document otherwise the changes won't appear in your web browser. You must also click the refresh button each time to see the changes.
Go back to your text editor and add the <body> tags:
<html>
<head>
<title>My Page</title>
</head>
<body>
</body></html>
You'll notice that the <head> tags go on top of the <body> tags just like a person's head goes on top of their body. The body is the main part of the document and is where most of the code goes.
Now we can learn about giving tags properties. You get your normal tags <body> and then you get properties in them like this:
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor="red">
</body>
</html>
bgcolor="red" is the background color of the page. In this case it will have a red background. You must always put properties between inverted commas.
Go back to your web browser after you have saved and click the refresh button. You now have a red background. We can also add in text:
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor="red">
Hello
</body>
</html>
This time when you go back to your web browser you will see a red background with the word Hello written in black. We can change the text color like this:
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor="red" text="white">
Hello
</body>
</html>
One important thing that you need to know is that pressing ENTER and going to the next line in notepad will not go to the next line in the web browser. You must use the <br> tag. Notice how I say tag and not tags. <br> is one of the only tags that can go by itself. If you want to skip a line then use the <p> tag. Try this:
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor="red" text="white">
Hello<p>
How are<br>
You
</body>
</html>
You will see that even though "How are" is on the same line as "you" it still goes to the next line in your web browser because of the <br>
Try leaving lots of spaces between 2 words like this:
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor="red" text="white">
Hello There
</body>
</html>
Now look at it in your web browser. It still shows up with one space between the 2 words. Web browsers don't allow you to leave spaces open like that. You have to use the special space character.
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor="red" text="white">
Hello There
</body>
</html>
Each is a space so in the above example we would have 3 spaces between "Hello" and "There". Which brings me to skipping multiple lines. You can't just type in <br><br><br> to skip a few lines. You have to put between them like in the next example:
<html>
<head>
<title>My Page</title>
</head>
<body bgcolor="red" text="white">
Hello
<br> <br> <br>
There
</body>
</html>
<p> works in the same way.
That's it for our first lesson, go practice what you've learnt until you've mastered those tags.
Go to the next lesson #2 to continue learning.
Either click the blogger link below saying "newer post" or navigate to the blog archive on the right and find it, alternatively you can search for it at the top of this or any page on the sidebar using the search box we placed there or use the page menu to locate html tutorial lessons; using blogger tags.
