So far, you should have a blank page...doesn't look much for a couple of pages of reading and fiddling, but they are very necessary steps in building a page. The steps you went through are:
- "<html>" - stating what coding your webpage will use (there are others!)
- "<head>" - this is where any instructions go.
- "<title>" - your first instruction! This was how you put the name in the top of the browser.
- "</head>" - and last but not least, you learnt how to close a 'tag' down, to finish a certain command.
Now comes the fun, you need some body!!!
We move onto the main section of the webpage. We're going to be dealing with what actually gets shown. You've closed off your
<head> section, now you need to start the
<body>.
TIP: if you've closed your notepad down from last lesson and you're not quite sure how to get back to it, there's an easy solution! Go to the folder where you saved your page, and double click on the html file (MyPage.html). When it opens, go up to "view" at the top of the browser, then click on "source". This will open up a notepad called "MyPage.html". Work on this, save it when you want to, and it will get saved directly to your html file!!
Ok, back on track again. What you need to do now is type in
<body> on the line after
</head>.
To see what your notepad is supposed to be looking like, click
here.
Give your page a heading...
To give your page a heading that you can actually see, the easiest way is to use the "
<h1>" tag. This formats your heading to a 'heading' size. If you want a sub-heading, you use "
<h2>". Remember to close the tags at the end of the text for each one.
On your notepad, after it says "
<body>", type in
<h1>This is my heading
</h1>
<h2>...and this is my sub-heading
</h2>.
Save your notepad, refresh your html page and see what it did. You should have something that looks like this:
This is my heading
...and this is my sub-heading
To see how your notepad should look, click
here
How to put some text onto your page...
We have covered that when you put something within <> tags, it doesn't get displayed on the page. To have text displayed, you just type it in. No mess, no fuss. Just type. You don't need any special tags just to get text to show. Wanna try it??
On the line under where you typed your
<h2> line, type in a few words. Heck, be daring...type a sentence!!!! Then save your notepad file (as it's still named MyPage.html it will save directly into your html page). After you've done that, refresh your 'webpage' (you should leave it open all the time while you're doing this!!) and see what you have.
Hmmm....now that's pretty boring, isn't it. Granted, you have words there. They're just tucked away at the very top left of the browser. Boring black. Some webpage you've built there! Guess you really can't build one after all. Hey, don't give up your day job, will you??
Sheesh, touchy little thing, aren't you. Can't a person make a joke??? Yes, there is more to it than that. By adding certain
<tags> you can get the text to do what you want it to do. I did it on this page. It won't be long until you're at that stage, too.
To see what your notepad is supposed to look like right now, click
here.
