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. |
