|
CSS Tutorials: Creating a Basic HTML Web Page
Creating a Folder for Your Web Page
Prior to creating your web page, your first step
should be to create a folder on your desktop or within your My Documents
folder to hold your new web page files. You can call it web site
or whatever you'd like.
Your next step will be to create a basic HTML page. Simply open a plain
text editor, such as Note Pad, and type or paste in the HTML code that
you see in the box below. Each element of that code will be explained
below, as it is important that you understand what these codes are and
what they mean.
Here is the code that you should copy and paste into your text editor:
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
Your Web Page Content
</body>
</html> |
HTML Tags
Everything you see between the < and > symbols
are html codes, which are also referred to as html tags. These tags are
telling the web browser how they should display the page.
- The <html> tag tells the browser that it
is about to see HTML coding.
- The <head> tag contains information about
the page, such as the TITLE, META tags for proper Search Engine indexing,
STYLE tags, which determine the page layout, and JavaScript coding for
special effects.
- The <body> tag tells the browser that the
part of your web page that should be viewable by others is about to
start. The various tags used inside the body tag tell the browser how
to display the page.
Each HTML tag contains an opening tag and a closing tag. The opening
tag is written with the command enclosed with brackets.
Example: <HTML>
The closing tag contains a forward slash followed by the command enclosed
with brackets.
Example: </HTML>
The opening tag is telling the browser to begin the specified action
and the closing tag is telling the browser to end the action.
Saving Your HTML Document
Once you have copied and pasted the above HTML code
into your text editor, your next step will be to save the document into
the new folder you created. If your new web page will be your main or
starting page, you should save it as index.htm or index.html,
as index is the file name most web servers will look for when someone
types your web address into a web browser. Secondary pages should be saved
using the pages most relevant keyword phrase. For example, if your page
is about dog grooming tips, then you might save your page as dog_grooming_tips.htm.
Next, place some content in your new web page between
the <body> and </body> tags. The content may be an article
or whatever you'd like:
| <body>
This Is Content.
This is content that others will be able to
see when they visit your web page. When content is pasted in, it
won't have any formatting. It will just be text that reads from
left to right, in one long paragraph. It should have a heading,
followed by the actual content. In this section, you will learn
how to format the text so that it is easier to read and understand.
Use any article or content that you have written, and simply copy
and paste it into the HTML document that you have created.
</body>
|
Formatting HTML Text
Now, as you can see, the text isn't formatted. It
isn't laid out in paragraphs, and it's not that special. Even if you copy
text in that is formatted and separated into paragraphs, you will find
that when you view it in a web browser, the formatting is gone. That is
because the format requires special tags.
Heading Tags
Let's start with the heading of the page. In the example above, the heading
says This Is Content. To turn that into something that looks like a heading,
we use the heading tags. Heading tags are presented as <H1></H1>
and may go as high as <H6></H6>. The lower the number, the
bigger the text will appear. The title or heading of the page goes between
these tags, so that it appears like this: <H1>This Is Content</H1>.
Paragraph Tags
Your next step will be to divide the content into paragraphs. This is
done by enclosing each paragraph with the <p></p> tags.
The opening <p> tag is used at the beginning of a paragraph, and
the closing </P> tag is used at the end of each paragraph.
If you'd like to move a sentence or some text to the next line, you can
do so by using the <br> (break) tag at the end of or in between
your paragraphs.
Bold, Italics and Underline
To further format your text, you can use additional HTML tags, such as
<b></b> tag, which will make any text between the opening
and closing <b> tags bold. To italicize your text, use the <i></i>
tags. You can underline your text with the <u></u> tags.
This is very easy to memorize: b stands for bold, I stands for italicize,
and u stands for underline. P stands for paragraph, and br stands for
break. H1 stands for heading 1.
By implementing these tags, you will see that your code looks like the
following example:
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<u><H1>This Is Content</u></H1>
<p>This is
content that others will be able to see when they visit your webpage.
When content is pasted in, it won't have any formatting. It will
just be text that reads from left to right, in one long paragraph.
It should have a heading, followed by the actual content. </p>
<p>In this section, you will learn
how to <b><i>format</i></b>
the text so that it is easier to read and understand. Use any article
or content that you have written, and simply copy and paste it into
the HTML document that you have created. </p>
</body>
</html>
|
All of the HTML tags are in red so that they are
easier for you to see, but they will not actually be in red within your
HTML document. When you view the web page in your browser, you will see
that it looks like this:
| This Is Content
This is content that others will be able to
see when they visit your webpage. When content is pasted in, it
won't have any formatting. It will just be text that reads from
left to right, in one long paragraph. It should have a heading,
followed by the actual content.
In this section, you will learn how to format the
text so that it is easier to read and understand. Use any article
or content that you have written, and simply copy and paste it into
the HTML document that you have created.
|
If any of your tags appear within the document when
you view it in your browser, this usually means that you didn't close
a tag that you opened. Now, you are ready to learn how to use CSS.
 
|
