Open up notepad (you can find this in start>programs>accessories).
Go up to file, which is in the left hand top corner of notepad, then click on save as. Let's call it Mypage. You do this by typing in MyPage.html in the area at the bottom of the save box called "file name", and then select "all files" from the drop down box under it. This is important, as it saves the page as an html file instead of a text file.
The very first keystroke...
The first thing you need to do is to tell the page that what you are doing with it is html coding. Any words that you see in
red mean they are 'command' tags like <this>. Anything not in <tags> gets displayed on the page, and there's going to be some stuff you just don't want there!!!
So, you need to type your first command at the top of notepad, which is "
<html>" (notice the html is within < > tags...make sure yours looks the same!!!).
The next thing you need to do is insert a "
<head>" tag. This is where you can put all sorts of instructions relating to the page, but they don't get displayed on the page. For instance, you put your keywords and meta tags in the head.
These are for search engines to read, and don't need to be displayed 'on' the page, which is why they go in the head section. You also put your page title in here. Not the one that's displayed on the page, but the one that's in the bar at the very top of the browser. See up there? It says Lesson 1. How you do it is very basic, and it needs to go into the head.
What you should have on your notepad is:
<html>
<head>
Make a name for yourself!!
To put the name of your page into the top of the browser (no, NOT on the page itself, the very very top of your browser!!), you need to tell the page that you are now putting in it's "
<title>". After the word "
<title>", type in the name of your page. Call it My Page. You then need to tell the page that you've finished writing the title bit...otherwise it will display everything else you write after it in the top of the browser!! To 'end' your tags, meaning to tell the page that you've finished that particular command, you use the / key. So, after you've put the name of your page after "
<title>", you need to end the title section by typing "
</title>". Remember, you need to put it into < > the same as I have, and the same with everything else highlighted in red.
That's all you need for now in the "
<head>". So, we need to tell the page we've finished the head section. You guessed it, you need to type in "
</head>"
What you should have on your notepad is:
<html>
<head>
<title>My Page</title>
</head>
Now you've got your head together...
Now go up to 'file' then 'save'. If you now go to your documents where you saved the 'mypage.html' file, double click it and open it. It will be a blank page, but at the top of the browser it will say 'My Page'. How can the page be blank when you've done typing on it??? Remember, everything within < > doesn't get displayed on the page. The only thing out of the < > is the title of the page, and you instructed the page to put THAT bit into the top of your browser by the "
<title>" command. To understand fully how this works, change the name between the "
<title>" and "
</title>" tags to 'Trying something different'. Save the notepad file again, then refresh your MyPage.html page. Notice the change in the title up the top? That's how easily it's done!!
So what you've done up to this stage is taken a notepad, saved it as an html file, typed in that the coding is in
<html>, created a 'secret section' called the
<head> which is where you tell the page what to do, and given the page a
<title>. You're really getting the hang of this, aren't you!!!
To see what your notepad is supposed to look like right now, click
here
Here's where the fun begins...roll on lesson 2!
