Writing Your First Web Page
This page covers:
A Brief Intro to HTML
Some Introductory HTML Elements
Writing Your First HTML Page
A Brief Introduction to HTML
HTML stands for HyperText Markup Language. Basically, it's the language spoken by web servers and
understood by web browsers. HTML tags organize the structure of a page by marking up
"elements" (such as a paragraph or a title or header). Click here to see a list of HTML 4.0 elements
and their tags. These tags are then read and interpreted by the browser. Because browsers can
differ greatly, not all browsers will read all tags in the same way, and not all browser support all
tags.
HTML tags are always enclosed in <
and > tags. Most HTML tags also have an
accompanying closing tag that begins with a forward slash, for example you'll
use <HTML> at the start of an
HTML page and </HTML> at the
end of an HTML page. There are a couple elements such as the <BR>
(line break) and the <HR>
(horizontal rule), which have no accompanying closing tags, and there are
a several elements (such as the META
and AREA elements) that are
forbidden to have closing tags. For the time being we won't be concerned
with this issue.
Some Introductory HTML Elements
Let's begin creating our first HTML page. HTML is not case
sensitive, but I recommend you capitalize your tags for better readability
of your code. All HTML documents should start with a document type
declaration which names the document type definition (DTD)
in use for the document (it identifies what version of HTML it is
using - in this case HTML 4.0).
There are three DTDs specified in HTML 4.0. For the time being, just cut and paste the following code into a new text document. Click here for more information on what the following code means.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Now, save your text file as filename.htm
or filename.html. Remember, you must save your files
with either the htm or html
file extension and make sure to save it as a text file if you are in a
word editor program.
Here begins the code you really need to understand. After you declare what version of HTML your document is using, you will be placing the body of your web page in the HTML element. Your second line should be:
<HTML>
The HEAD element
contains information that is not viewable from the browser, but is
important information nonetheless. I will come back to this issue, but
for the time being, I'll only discuss the <TITLE> element.
The TITLE element tags go in between
the opening and closing HEAD tags.
This is the title that appears at the top of your browser window (for example,
you should see the title of this page - "harcoder.com" - at the top of your
browser). Here is how these tags look:
<HEAD>
<TITLE>The Title of Your Document</TITLE>
</HEAD>
Writing Your First HTML Page
We just learned the tags we need to put at the top of an HTML document
so let's start adding some text. All the content of your page goes
in between the BODY tags. There
are a variety of attributes you can set for the BODY
element (such as the color of your text, links, background color or background image).
I'll discuss these later. For now, we'll just put in a paragraph about our
favorite cat. The paragraph will go in between the paragraph tags, <P> </P>.
<BODY>
<P>Welcome to UmperTheCat.com. Here Umper will chronicle his adventures (and his measurements) in the hopes of finding that ever elusive, all seductive, burning in heat type of female kitty he can snuggle up with for good (or for at least nine lives).</P>
</BODY>
If this paragraph was all we wanted to have on this HTML page, here's what it would look like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>UmperTheCat.Com</TITLE>
</HEAD>
<BODY>
<P>Welcome to UmperTheCat.com. Here Umper will chronicle his adventures (and his measurements) in the hopes of finding that ever elusive, all seductive, burning in heat type of female kitty he can snuggle up with for good (or for at least nine lives).</P>
</BODY>
</HTML>
Click here to see this page in action. As you can see, this is a very simple page. The next page will talk about changing the background color and using an image for the background.
Next Page: Background Colors & Images & Link Colors
Previous Page: Introduction to HTML Tutorial
|
