Computer Infotech

Table of Contents

A Simple Way to Create Web Pages

Some Simple Tags

This section will introduce you to some basic HTML tags. These tags will allow you to format paragraphs, font styles, line breaks, and text alignment. You will enter these tags in Notepad. 

Tip #1: It is a good idea to keep both Notepad and Internet Explorer open. You can minimize one or the other by clicking on the _ (minus) in the upper, right hand corner of either program. Minimizing drops the Program window to the taskbar. To bring it back up, merely click on the Program name on the taskbar.

Tip #2: Use the copy and paste command to copy the HTML code from my page to your Note Pad file. Put the mouse pointer at the beginning of the line or section you want to copy. Click and hold the mouse button down. Drag over the text you want to copy. Once it is highlighted, hold the Control (Cntrl) key on the keyboard and hit the letter c. This copies the text to your computer's clipboard. Go to Note Pad. Click in the place you want the text to appear. Hold the Control key down on the keyboard and hit the letter v (hit it once, quickly - do not hold the v key down!). This will paste the text into your file.

The Title

The first tag you will use was created already. You have <title></title> in our document. Insert your cursor between the opening and closing tag and type: This is my first web page. Save the file.  Click on Internet Explorer on the taskbar and bring the window back up. You should still see your page in the Window. Click on Refresh on the toolbar. Now look at the very top of the screen. You should see the words "This is my first web page." This is the title of your document.

Paragraphs

The Paragraph tag creates a paragraph in your document. Paragraphs start a new line with a blank line in between. The tag to create a new paragraph is <p>. When used without attributes, the <P> tag (Remember, HTML is not case sensitive; therefore you can type it in caps or in lower case. Web Browsers will read either.) does not require a closing tag. This is because whenever the browser encounters a new <p> tag, it knows to start a new paragraph; thereby, recognizing the end of the previous paragraph. Type <p> after the first sentence in your file. Save the file.  Click on Internet Explorer on the taskbar and bring the window back up. Click on Refresh on the toolbar. You should see your text separated into two lines with a blank line in between like this:

This is my first try at creating a web page.

I will do my best to do good work. I am going to learn many new things before we are through. I will create an entire web site!

Return to Notepad.

Line Breaks

You can also begin a new line without a blank space in between. This is called a break. The break tag is <br>. It does not need a closing tag. Type <br> after the second sentence. Save your work and view it in Internet Explorer. Don't  forget to click on Refresh. You should see the last two sentences begin on a new line without a space between them and the previous sentence:

This is my first try at creating a web page.

I will do my best to do good work.
I am going to learn many new things before we are through. I will create an entire web site!

Fonts

There are several ways to format your text. One way is to use the <font> tag. The font tag can have the following attributes:

  • size - controls the size of the text with the numbers 1-7 (1 is the smallest)

  • color - controls the color of the text and you can specify basic color word or a color number (#45ff34)

  • face - controls the font type (arial, times, courier, etc.)

To use these attributes, place your cursor before the word web in your first sentence. Type <font color="red">. You should place double quotes around the attribute control. After the word page, type </font>. Remember, for every tag, there is a closing tag (with very few exceptions). When you use a tag, all of the text located between the opening tag and the closing tag is affected by that tag. Save your work and view it in Internet Explorer. Remember to click on the Refresh button! You should see these results:

This is my first try at creating a web page.

I will do my best to do good work.
I am going to learn many new things before we are through. I will create an entire web site!

Here are some examples of the use of the <font> tag. You can combine attributes in one <font> tag. Try typing these into your Note Pad file. Save your work and view it in Internet Explorer:

<font color="red" size="5" face="arial">I am trying a font color and a font face.</font>  When viewed, it looks like this: 

I am trying a font color and a font face.

<font face="courier" size="-1">Since Web Browsers view unformatted text in a standard size, using a plus or minus before a number increases or decreases the font size in that number increment. This would be one smaller than the standard. "+1" would be one larger than the standard.</font> Here is what it looks like:

Since Web Browsers view unformatted text in a standard size, using a plus or minus before a number increases or decreases the font size in that number increment. This would be one smaller than the standard. "+1" would be one larger than the standard.

Bold, Underline and Italics

You can create bold faced, underlined and italic text. Type the following lines:

<b>This is bold.</b>
<br>
<u>This is underlined.</u>
<br>
<i>This is in italics.</i>

Save your work and view it in Internet Explorer. This is what you see:

This is bold.
This is underlined.
This is in italics.

You can combine these tags as well. Type the following, save and view.

  • <b><u><i>This is in bold, underlined and in italics.</i></u></b>

  •  <b><i>This is in italics and underlined.</i></b>

In your Browser window, it looks like this:

This is in bold, underlined and in italics.
This is in italics and underlined.

 

Creating HTML Documents   More Tags


This information compliments of
Computer Infotech®
Maine Web Design & Hosting Services
(207) 223-5103
Contact Us

© Copyright 2000 by Computer Infotech®

Updated December 2004