DayDream warriors
Dr Psychotic Home PageDayDream Warriors Main PageArticlesMediaCommunityContact
Basic HTML...Lesson 1 By Bob Craypoe
Punksters.net comic Strip
Hi boys and girls. Today we’re going to learn how to create a basic Web page using windows notepad as an editor. First off, let’s explain why you even need to know HTML. After all, aren’t there GUI (graphical User Interface) Web page editors available? Why yes, there are. But believe it or not, sometimes they don’t always work without a hitch. There are occasions when you attempt to perform a certain task, and it just won’t let you. You may then be forced to go and do some editing on the HTML level. If you don’t know basic HTML, you are in trouble.

HTML stands for Hypertext Markup Language in case you didn’t know and is fairly simple to learn. Our Web page will begin with what is referred to as the HTML tag and it looks like this: <html> Tags are elements that provide the main function of the HTML code. The tags name is enclosed in brackets <> So an HTML tag looks like this: <html> This will be at the beginning of the document and at the end will be a closing tag like this: </html> Everything in between will be the html code for your page. Notice how the closing HTML tag has a slash before the html. This makes it a closing tag. All closing tags will have that slash within them.

So open up windows notepad and put in the following information, exactly as it appears below:

<html>
<head>
<title>My Title</title>
</head>
<body>
</body>
</html>


Now save the document as a text file. Name it lesson1.txt.
Go to where you saved the file and right click on it and select rename.
Change the file extension from .txt to .html. If you don’t see the file extension, then you’ll have to set up your system to view them.

In an XP system here’s how:
Select My Computer on your desktop.
Then select Tools then Folder Options.
Then click on the View tab and take the check mark off where it says Hide Extensions for known file types and hit the OK button on the bottom. You should now see the file extension of the file. Change it from .txt to .html and, when you’re asked if you’re sure, say yes. You just created a basic Web page in Notepad.

If you double-click on the file, it should open up in your browser. The only thing you’ll see is the title “My Title” in the title bar of the browser, the document itself will be a blank one. Now you’ll probably want to have more than a blank page with just a title. So let’s add a heading.

In your browser, click view, then source and the document will come up in notepad, ready for you to edit. Heading tags go from h1 to h6 and the higher the number, the smaller the text. So let’s add a large heading by doing the opening and closing heading tag with some text between. Add the following to your Web document within the two body tags.
<h1>This is a Heading!</h1> save the document without closing notepad but just go to your browser again and hit the refresh button. The heading should be there. Your document should now have the following code:

<html>
<head>
<title>My Title</title>
</head>
<body>
<h1>This is a Heading!</h1>
</body>
</html>

Now let’s add a horizontal line. The horizontal line tag can be referred to as an empty tag. What is meant by empty is that is it doesn’t have an opening and closing tag like all of the tags used so far. Tags that have an opening and closing tag are called container tags. An empty tag has the slash after the word within the brackets. So here’s what the horizontal line tag looks like: <hr /> by the way, hr stands for horizontal rule. Your code should now look like this:

<html>
<head>
<title>My Title</title>
</head>
<body>
<h1>This is a Heading!</h1>
<hr />
</body>
</html>

Save the document, go back to your browser and hit the refresh button. You should now see the horizontal line. Now let’s change the color of the page. Within the opening body tag, put bgcolor=”blue”. It should look like this:
<body bgcolor=”blue”> bg stands for background, by the way.
Save the document and hit the refresh button in your browser. The page should now be blue and your code should now look like this:

<html>
<head>
<title>My Title</title>
</head>
<body bgcolor=”blue”>
<h1>This is a Heading!</h1>
<hr/>
</body>
</html>
Now let’s italicize your heading. Before h1 opening tag, add this: <i> and after the closing tag put </i> Your tags should look like this:
<i><h1> This is a Heading!</h1></i> save the document and refresh in your browser. You should see that the heading is now italicized.

Hey, why don’t we center our heading? Within the opening heading tag we can use align=”center” to center the alignment. Align being the attribute of the heading element and center being the value of the align attribute. The whole line should look like this:
<i><h1 align="center">This is a Heading!</h1></i> Save the document and hit the refresh button. The text should now be centered. Your code should look like this:

<html>
<head>
<title>My Title</title>
</head>
<body bgcolor=”blue”>
<i><h1 align="center">This is a Heading!</h1></i>
<hr/>
</body>
</html>

Summary:
So now you know all of the basic tags needed for a Web page to work which are:
<html> <head> <title> <body> All of which are container tags.

You have also learned about the heading and horizontal line tags which are:
<h1> <hr /> The horizontal line tag is an empty tag.

You’ve even learned about the basic building blocks of html code like the element <h1>, the align attribute and the center value: <1 align=”center”> Remember that all values to every attribute assigned to an element will be enclosed in quotation marks. So play around with these tags and try to commit them to memory.

Next lesson will consist of text formatting.
Back To The Top Of The Page

This Site Is Brought To You By Craypoe.com: Craypoe.com HOME