CSS Basic HTML Page

Prior to learning how to use CSS, you must know basic HTML. If you don’t, it is HIGHLY recommended that you review the HTML sections prior to trying to learn CSS.

Following is a basic HTML guide to creating a 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 website 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 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 tag tells the browser that it is about to see HTML coding.
• The 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 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.

The closing tag contains a forward slash followed by the command enclosed with brackets.

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 and tags. The content may be an article or whatever you’d like:

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 paste text into the HTML that is formatted and separated into paragraphs, you will find that when you view it in a web browser, the formatting is gone. That’s 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:

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

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.

 
This concludes the CSS Basic HTML Page lesson. In the next lesson, you will learn about embedding CSS.