CSS Tutorial: Getting Started - 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.
For a complete list of HTML codes and examples, visit
our HTML Codes
Chart section.
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.
You can find many more tags you can use within the
HTML Codes Chart
section.
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>
<H1><u>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.
 |
 |
Previous |
Next |
 An Introduction to Cascading Style
Sheets
Creating a Basic HTML Page
Embedding Cascading Style Sheets
Using Cascading
Style Sheets (CSS) to Specify Web Page Formatting
Manipulating Bulleted
and Numbered Lists with Cascading Style Sheets (CSS)
Formatting Hyperlinks
with Cascading Style Sheets (CSS)
Creating Tables within a
Web Page with Cascading Style Sheets (CSS)
Cascading Style
Sheets (CSS) Classes and ID's
Cascading Style Sheet
Codes Chart - Property Index
Web Development Tutorials
Cascading Style
Sheets Tutorial: An Introduction to Cascading Style Sheets
JavaScript
Tutorial: An Introduction to JavaScript
Web
Development: A step by step guide to developing a successful Internet
business
HTML
Codes Chart: Copy and paste HTML codes for your web page
HTML Tips:
Copy and paste special effect HTML codes for your web page
Web Design
Tips: Tips, tricks, and special effect codes for your web page
JavaScript
Code Snippets: Copy and paste special effect JavaScript codes for your
web page
216
Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
ASCII Character
Codes Chart: American Standard Code for Information
Interchange character codes chart
|
|
