Basic HTML For Beginners Part 3

Basic HTML For Beginners Part 3

By Lee Kane


OK! Basically what we did was change the title to your webpage, the webpage background colour and added another line of text to it.

Hopefully changing the title of the webpage was pretty self explanatory however what we did with the background was not.

What we did to the <body> tag was add an attribute, that attribute being bgcolor="lightblue". This attribute told your browser to change the colour of the background colour to light blue. Pay close attention to how the attribute is placed inside the <body> tag as again it is important and failure to get it right will not produce the effect you want. All attributes inside a tag are followed by the = symbol followed by quotation marks " ".

Your folder should now look like this, with two Notepad files and two HTML documents.

html

What we are going to do now is edit the HTML document directly from the Source code. I am going to assume that you are using IE (Internet Explorer), if you are using Firefox then you will have to get the Firebug Add-on and configure the editor to Notepad.

OK, open your webpage (HTML document) called "my_second_webpage.

html

Now click on View look down the menu and click on Source. This will then open the Notepad file.

html
html

The Notepad file that is now displayed is nothing to do with the other two Notepad files in your folder. It is attached to the webpage "my_second_webpage.html" and when edited and saved will enable you to see immediately the changes you make on your page.

So lets test this straight away. Change the colour attribute from light blue to red and change the text to read red instead of light blue:

<html>
<head>
<title>My Second Web Page</title>
</head>

<body bgcolor="red">

<p>Your background should now be red</p>
<p>And your webpage title should say "My Second Web Page"</p>

</body>
</html>

Then on the Notepad file from the File menu click Save,

html

and then on the address bar of your browser click the refresh button.

html
html

VOILÁ!!!!

Next we will add some colour to the text and an image too. See you on the next page.

More Website Building Resources

W3 Schools --- SOCreative Digital --- HTML Code Tutorial

HTML Goodies --- HTML from About.com --- Basic Web Resource Site

The Secrets of Meta Tags --- Top 10 Mistakes in Web Design

You Might Also Like

Share your thoughts!