Learn HTML lesson 01 - Your first webpage
First what you need to do is open up a text editor such as Notepad which we will be using to type our html code.
In HTML you get things called tags for example:
<font>
The above example is an opening tag and the following one is a closing tag:
</font>
The 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 all for lesson 1. Go practice what we've just learnt then try lesson 2.