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 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.
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:
Return to Notepad.
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:
There are several ways to format your text. One way is to use the <font> tag. The font tag can have the following attributes:
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:
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:
<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:
Bold, Underline and Italics
You can create bold faced, underlined and italic text. Type the following lines:
Save your work and view it in Internet Explorer. This is what you see:
You can combine these tags as well. Type the following, save and view.
In your Browser window, it looks like this:
This is in
bold, underlined and in italics.
Maine Web Design & Hosting Services
Copyright 2000 by Computer Infotech®
Updated December 2004
Updated December 2004