WEB PAGE 101

Introduction to HTML
Free! Create Your Own Web Page

by Timothy Dwelle

Version 2.0 Last Updated October 2002

System Requirements: Any popular Web browser and Windows Operating System. The Notepad Word Processor from Windows must be installed on your computer. Incidentally, on 10/10/07, I used Notepad to make a few edits at the top and bottom of this Webpage.

Let me know what you think about Web Page 101! E-mail

Copyright 1997-2007 Timothy Dwelle. All Rights Reserved.

TIMTV.com


Put Your Pages On The Web! Some Web page hosts are free!
Visit Web Page 101 Home for options and updates.

www.timtv.com/webpage101


For easy reference, Print this Web page or Save it to disk. To save it to disk, click on File (top left), and select Save As, then click Save. You can work with this Web page and make your own Web pages when you're offline. When the page is ready, find a place to put it on the Web!

Every Web page has it's own HTML Source Code. HTML stands for HyperText Markup Language. To see the Code for any Web page, click on View at the top left of your Browser, then select Source. That will open the file in Notepad.

The HTML Source Code for your Web pages will be edited in a text file in Notepad. To make a Web page, you name and Save the text file with a .htm or .html extension. For example, if you're online, look at your browser Address window. You'll see the name of the file for this Web page at the end of the Web address:

webpage2002.htm

When giving names to HTML or graphics files, use lower-case letters, with no spaces between characters.

The easiest way to keep track of your Web pages on your computer is to create a new Folder on the Windows Desktop. Keep your .htm or .html files there.


Let's Make A Web Page!

Creating the HTML Source Code for a Web page is simply a matter of making a text file that has HTML tags. For emphasis, all tags shown will be orange.

Tags begin with < and end with > and tell a Web browser how and where to display text and graphics. On your computer keyboard, < and > are to the right of letter M.

Editing

When editing files in Notepad, you must Save the file before the changes take effect. After saving a file, minimize the Notepad window. Click on Refresh (top of browser window) to show the updated page.

When editing in Notepad, save time and use Copy and Paste to duplicate complex tags quickly. (Copy - Highlight text/Right mouse click/select Copy. Paste - Right mouse click/select Paste.)

While in Notepad, maximize the window and use Word Wrap. (Select Edit, then make sure Word Wrap is selected.)

When editing Source Code, be sure not to delete < or >, or any characters between them.

Most often, a beginning tag and ending tag are needed, which will affect the text contained between them. Please note that ending tags begin with </


The following is a basic Web page, with text, a graphic, an E-mail link, and a link to another Web page. You can Save this file and use it to create your own Web page. Simply add or delete tags and text as needed. If you're online, click HERE to open a new Window and see the code displayed as an actual Web page.

How To Save The File:

To Save the file, open a text file in Notepad on your computer. Copy the following HTML code from this Web page, then Paste it into the text file. Then, click on File (upper left of Notepad window), and select Save. Then, give it a name (like mypage), along with an .htm or .html extension.

To add a photo or graphic file - like .gif or .jpg - you need to put the file in the same directory and folder as the .htm or .html file.

The complete HTML code below begins with <html> at the top, and ends with </html>

 

<html>
<head>
<meta name="description" content="
Your Info Here">
<meta name="keywords" content="
Your Info Here">
<title>
Your Info Here</title>
</head>
<body bgcolor="#
FFFFFF">
<!--
While in Notepad, you can edit info within the Tags above. And be sure to keep them in order. -->

<CENTER><h1>
My New Web Page</h1></CENTER>
<P>
Hello! This is the first paragraph. This basic page has black text on a white background. I could make this paragraph short or long, and add more paragraphs as well. It all depends on what I want to say and how much I want to type. Here is a graphic:
<P>
<p align="
center"><img src="computer.gif" alt="Computer Graphic" width="186" height="184"></p>

<P>
This is the second and final paragraph. I look forward to making more Web pages. Like anything else, practice makes perfect. Well, that's all folks!
<P>
<CENTER><a href="http://
www.timtv.com">TIMTV.com</a></CENTER>

<P>
<CENTER><a href ="mailto:
timtv@atlanta.com">E-mail</a></CENTER>

<P>

<!--
Do not alter the code below this line. -->
</body>
</html>


If you're online, click HERE to open a new Window and see the code displayed as an actual Web page.

In the previous example, the following tags were used:

<P> Creates a space between paragraphs. This one is used quite often.

<CENTER> Text and graphics between these tags will be centered on the page.</CENTER>

<h1>Creates Type this size</h1>

 

Comments can be placed within the HTML code, but they will not be displayed on the actual Web page. They can be seen when viewing the Source code. Comments start with <!-- and end with --> You can modify the text between the tags, or erase the entire line - including tags - as comments are optional.

Example:
<!-- Text between these tags won't be displayed on a Web page. -->

 

The tags below will require editing in Notepad, when you create your Web pages:

<a href ="mailto:timtv@atlanta.com">E-mail</a>

This adds an E-mail link. In the tag, simply replace timtv@atlanta.com with the E-mail address of your choice, and E-mail with your own description. Displayed on a Web page, the E-mail example would look like this: E-mail

 

<a href="http://www.timtv.com">TIMTV.com</a>

This adds a link to another Web page. In the tag, simply replace www.timtv.com with the Web address of your choice, and TIMTV.com with your own description. Displayed on a Web page, it would look like this: TIMTV.com

 

Add Photos and Graphics

<p align="center"><img src="computer.gif" alt="Computer Graphic" width="186" height="184"></p>

This is the actual HTML for the graphic below:

To edit the tag for your own page:

1) Replace computer.gif with the name of the file you want to use.
2) Replace Computer Graphic with a description of your own photo or graphic.

3) To put the graphic on the left side of the Web page, use left (instead of center). To put it on the right side of the page, use right (instead of center). And be sure to use the </p> at the end.

4) Replace the width and height numbers with the actual dimensions of your photo or graphic. (To get the numbers, right-mouse-click on an image or icon and select Properties. Most photo editing programs give the info as well.)

Don't forget, a photo or graphic file needs to be in the same directory and folder as the .htm or .html file.


Meta Tags - Before putting your page on the Web (and registering with Search engines), edit the following Meta tags in your HTML:

<meta name="description" content="Your Info Here">

Meta Description: Put a description or slogan about your Web page in the tag. Replace Your Info Here with your own information. Here's an example. A music store called Pluto Music Express could use:

<meta name="description" content="Pluto Music Express Sells CDs For Less!">

 

<meta name="keywords" content="Your Info Here">

Meta Keywords: Add Search terms related to your Web page to the tag. Replace Your Info Here with your own information. Separate words and phrases with a comma. Using the previous example, Pluto Music Express could use:

<meta name="keywords" content="rock, CD, compact disc, music, video, music video, new, artist, classic, mail, order, album">


TITLE - Here are the tags for the Title of the page. This info will not appear on the Web page itself, but it will appear at the very top left of your Web browser. For example, the Title of this Web page is Web Page 101 - Intro To HTML

<title>Your Info Here</title>

Replace Your Info Here with your own Title.


More Tags


<BR> Creates a break between lines of text, without adding a space.

<HR> Creates a solid line across the screen.

<B>Text between these tags will appear in Bold type.</B> 

<I>Text between these tags will appear in Italics.</I>


When other text appears next to an E-mail or Web page link, don't forget about spaces that may be before and/or after the link. Here's an example:

Brought To You By <A HREF="http://www.timtv.com">TIMTV.com</A> and Web Page 101

Note there is a space after By and after </A>

On a Web site, it would look like this:

Brought To You By TIMTV.com and Web Page 101


The following tags change the size of the type on a Web page:

<font size="7">Type Size</font>

<h1>Type Size</h1>

<h2>Type Size</h2>

<h3>Type Size</h3>

<font size="2">Type Size</font>

 

If no type size is specified, the default size will be displayed, which is the same as this line.


To change the background color of your Web page:

Use the following tag in your HTML file for a WHITE background:

<body bgcolor="#FFFFFF">

Select a new color from the list below, and replace the F's with the color code:

000000 Black          FF0000 Red        0000FF Dark Blue

99CCFF
Light Blue      FF6600  Orange      FFFF00 Yellow

00CC33
Light Green          008000 Dark Green ------ CCCCCC Gray

Notice there are 6 characters between # and "
Use zero or capital O
If you use a
black background, specify a text color (below), as default black text won't show up.

* If you don't specify a background color, a Gray background will be shown. *


Changing Text Colors

If black text is desired, no font color tags are necessary. To change the color of text, add the following tags to your HTML file. As an example, the Red color code is used:

<font color ="#FF0000">Your Text Here</font>

On a Web page, it would look like this:

Your Text Here

 

To change the color, refer to the Color list above, and replace the 6-digit color code in the tag.


Changing fonts (or type style)

If you don't use a Tag for a font, Times New Roman will be used as default. It's the font used on this line.

Here are the Tags for some other fonts:

<font face="Eurostar Regular Extended">Eurostar Regular Extended Font</font>
______________________________________________

<font face="Arial">Arial Font</font>

______________________________________________

<font face="Tahoma">Tahoma</font>

_________________________________________

<font face="Creepy">Creepy</font>

_________________________________________

<font face="Wide Latin">Wide Latin</font>


Here is a combination of tags:

<h2><center><font color="#008000"><I><B>Your Text Here</B></I></font></center></h2>

On a Web page, it would look like this:

Your Text Here

Notice that there are tags for font size, font color, Bold , Itallics and Center. You can Copy the code above, then Paste into your HTML file. Simply edit the font color and/or delete the tags, as needed. To remove Bold, delete the <B> and </B>. To remove Itallics, delete the <I> and </I>.

 

Add a Font Style - Here's how to specify the font color and font style. In this example, a dark green font color and the Tahoma font style are used:

<h1><center><font color="#008000" face="Tahoma"><I><B>Your Text Here</B></I></font></center></h1>

On a Web page, it would look like this:

Your Text Here

Within the tag, simply replace the font color and font face with the color and face you wish to use.


Add a Background Image to your Web page:

<body background="mypicture02.jpg">

Simply replace mypicture02.jpg with the .jpg or .gif graphics file of your choice.

Note: Background images are purely optional.


To make a Web page link open in a new browser window, add target="_blank"

<A HREF="http://www.timtv.com" target="_blank">TIMTV.com</A>


Here's a Copyright symbol. If needed, Copy and Paste it into your HTML.


Here are all of the Tags covered in Web Page 101. Text in green will need editing! Simply Copy and Paste them into your HTML file, one at a time, then edit:

<!-- Comments are optional. And it's OK to erase this entire line. -->

<body background="timtv.jpg">

<P>

<BR>

<HR>

<font size="7">Extra Large Type</font>

<h1>h1 Type Size</h1>

<h2>h2 Type Size</h2>

<h3>h3 Type Size</h3>

<font size="2">Small Type Size</font>

<h2><center><font color="#008000"><I><B>Your Text Here</B></I></font></center></h2>

<h1><center><font color="#FF6600" face="Tahoma"><I><B>Your Text Here</B></I></font></center></h1>

<B>Text will be Bold</B>

<I>Text will be in Itallics</I>

<CENTER>Text will be centered.</CENTER>

<font color="00CC33">This font color is Light Green</font>

<font face="Arial">This font face is Arial.</font>

<A HREF="http://www.timtv.com">TIMTV.com Home Page</A>

<A HREF="http://www.timtv.com" target="_blank">Link Opens In A New Window</A>

<a href="mailto:timtv@atlanta.com">TIMTV E-mail</a>

<p align="center"><img src="timtv.gif" alt="TIMTV Graphic" width="100" height="100"></p>


Put Your Pages On The Web! Some Web page hosts are free!
Visit Web Page 101 Home for options and updates.

www.timtv.com/webpage101

Copyright 1997-2007 Timothy Dwelle. All Rights Reserved

.Let me know what you think about Web Page 101! E-mail

TIMTV.com