A blank white page for a web page is a bit boring and not very useful, so lets improve on this, we will now create a title. To do this we need a H tag followed by a number from 1 to 6 to define the size of the title, some descriptive text for the title and then we must close the tag. There is a TITLE tag but this is used by the search engines, the search engines will often take the text in the TITLE tag and use this when listing a site in the search engine directory. The words in the TITLE tag will also be seen in the Window Menu Bar right at the top of the page and will not be seen on the web page itself. For this reason the H tag was developed which stands for HEADER. The Header text is what your visitors will see as a Title on the web page, so do not get confused with the TITLE tag.
Add the code below to your test page after the opening BODY tag, using the text editor you copied into the Learning Html folder. Remember that your page is called test.html, open this with your editor now and add the code below.
<H1>My First Web Page using HTML code.</H1>
Now save the file and click on the TEST button. Don't forget to click on the Back button to return to this page.
Now you have a Title that you and your visitors will be able to see. To improve this further lets centre your title, to do this we need to use the CENTER tag. Note that this tag requires the American spelling to work. Modify your title (heading) so that the code in your test.html file now looks like the code below and save this.
<CENTER><H1>My First Web Page using HTML code.</H1></CENTER>
When you have saved this code using your Text Editor, return to the tutorial and click on the TEST button once again. You should now see your heading centred, don't forget to click on the Back button of your browser to return to this tutorial page.
Now let's make your web page creation a little more exciting by changing the colour of the Background. There are lots of ways to do this but we will simply change the background colour.
Open your test page using your text editor and add the code below immediately after the closing head tag (</HEAD>)just to remind you what the closing head tag looks like, it is shown in brackets.
<body bgcolor="red">
Add the above line of code now save it and return to this page. Now click on the TEST button, your page should now be red. If this does not work re-check your code and try again.
You can use any of the sixteen predefined HTML colours by this method, the colours you can use by name are as follows; Silver, Grey, Maroon, Green, Navy, Purple, Olive, Teal, White, Black, Red, Lime, Blue, Magenta, Yellow, Cyan.
Now try experimenting with these colours by replacing the red colour, when you have successfully achieved this return to the top of this page and click on the HOME button to return to the main menu for the next stage of the tutorial.
Just for your information the background can also be changed using Hexadecimal codes for colours and this method will allow for 256 different colours and shades. Another way of changing the background would to be to replace the background with an image or picture but these methods are too advanced at this stage of the tutorial but you are now aware of their existence for future reference. Continue now with your experimentation and then return to the main menu for the next stage of this tutorial, Stage 4.
[ TOP ] [ Click here to start the next stage. ]
© Copyright 2002 Able2translate All rights reserved.