HTML Tutorials

Class 1
Class 2
Class 3

Class 1
Class 2
Class 3

All you need is a text editor or wordprocessor that can save in Text Mode (ASCII text).

At the top of your text page enter the following on separate lines:

Here's what we have just accomplished:

"" identifies the page as an HTML document;

"" tells the browser that the header will be appearing;

"" ends the title entry;

"" ends the header entry.

Now enter the following on separate lines:

Welcome to My Home Page!

"" tells the browser that the body of the page or document is next;

"

" tells the browser that the headline size 1 is to be used.

"Welcome to My Home Page!" will appear in large text;

"

There are six levels of headlines, 1 being the largest. 6 the smallest. You can use the different sizes to indicate subtopics for your page if you have a lot of text.

Enter the following on separate lines:

My home page is in the beginning stages. In a short time,
this will have information about my interests, business, or hobbies.

Recap:

"

" tells the browser there is a new paragraph

and immediately enters the text following it;

"My home page is the .... " will continue as a single paragraph;

You can enter in more text if you would like. Be sure to use

to separate your paragraphs. The text from a paragraph will continue as one block of text until the browser encounters another

or headline tag.

Enter the following on separate lines:

Final Recap:

"" closes the body of the page;

"" closes the HTML.

Click on your text window now to make sure it is the active window.

If you are in Windows, save your file as index.htm. If you are in Windows95 or on the Mac, you can save your file as index.html. The .htm or .html is required by the browser to indicate a web page. You can use either one but try to be consistent.

Make sure you save. your file now.

This will cover the , tags and the mailto function.

, is actually a combination of Anchor and Hypertext REFerence, and is used to link to other files.

is the Inline Image tag, and is used to display .jpg or .gif graphic files.

The mailto: function works with the A HREF to link an email address to the browser.

Briefly, links via the path that you spell out for it.

For example:

Jay's Place

tells the browser to go to the server "www.geocities.com";

the subdirectory "bourbonstreet/6644";

show the page "index.htm";

and make the link with the text "Jay's Place"

At the top of your text page enter the following on separate lines:

Anchor Lesson

Note:

There is not a recap (explanation) on this first part since it simply is a repeat of the topics from the first section. You will see that these tags appear in virtually every web page created.

Enter the following on separate lines:

My first link will follow this line:

This is my first link.

Recap:

""

shows the URL and ends the URL with a closing bracket;

"This is my first link." is the text that will be highlighted for clicking;

"" closes the anchoring.

What this means is that when the member clicks on the words "This is my first link." the browser will then go to the web page at http://geocities.datacellar.net/bourbonstreet/6644 ... this will work for any URL you enter.

NOTE: When you start to link to your own files, you do not have to put in the full path if the files you want to link to are in your own server directory. You can have a shortened path. For example, if you have your index.html page and your family.html page in the same directory, you can put your link into the index.html as follows:

Meet my family

Enter the following on separate lines:

Image Source Lesson

My first image will appear below:

Recap:

" is the path to a graphic in Jay's Place.

The paths for images work the same way as the paths to linked pages. Most often, your graphic will be in your own directory, so the path will be easier to see. For example, on my home page it would be:

NOTE: Just like the links, the filenames and paths to the graphics are case-sensitive. If you have a page show up without the graphic, then double-check to see if you are using the correct case and if you have the right spelling.

ANOTHER NOTE: Browser images are called inline images. This means that they will appear in the browser where the IMG SRC tag is put. They are not embedded images though, that is, they are not actually part of the HTML page. This means you need to remember to upload your images when you upload the HTML file.

Enter the following on separate lines:

Image Source and Link Lesson

I'm learning how to link an image to a page!

You're getting it!

Recap:

"" shows the full link of where we want to go;

"" shows the element we want to use as the link;

"" closes the anchor!

"You're getting it!" is just to let you know how well you're doing!

What happens here, is the graphic "lavalamp.gif" will become a clickable image in the browser and when the member clicks on it, they will be taken to the Jay's Place. Again, this is case-sensitive and the rules that apply to text hyperlinks apply here, as do the rules for just displaying an image.

NOTE: For those of you who don't like the blue border that will show up on a linked image, you can add BORDER=0 to the IMG tag to remove the border. For example:

Enter the following on separate lines:

Email Lesson

Your name here

Recap:

"A HREF=" starts the anchor link;

"mailto:address@server.com" calls to the mailer and says send to your address at server.com. Make sure you put in the server.com because that is needed for receiving mail via the Internet;

"Your name here" says who you are and closes the anchor!

Enter the following on separate lines:

This will show how to use bold and italics for enhancing your text, and how to make lists.

Enter the following on separate lines:

Learning Italics, Bolding, and Lists

Note:

There is not a on this first part since it simply is a repeat of the topics from the first two classes. You will see that these tags appear in virtually every web page created.

Enter the following on separate lines:

Italics and Bolding Lesson

The following text is italicized.

The next part of the text is bold.

Recap:

"The following text is italicized" will show the words "is italicized" in italics;

"The next part of the text is bold" will show the words "is bold" in bold letters.

One note to remember in page design, is the overuse of either italics or bolding will remove their impact, so only use them where they will truly help with the needed emphasis.

The next sections will cover the use of lists.

Enter the following on separate lines:

Bulleted List Lesson

• 10 years experience in Direct Sales
  
• Managed staff of 15 Sales Representatives
  
• Director for Sales Professionals Association
  

Recap:

"

" tells the browser that an unordered list is coming;

"

• 10 years experience in Direct Sales" is the first item of the list and the line starts with a bullet;

  "

• Managed staff .." will start with a bullet;

  "

• Director for Sales .." will start with a bullet;

  "

A bulleted list is known as an unordered list. An ordered list will use numbers (or another sequence) in place of the bullets. The next section shows you how.

Enter the following on separate lines:

Numbered List Lesson

Online Services Ranked by Number of Members

1. America Online
   
2. CompuServe
   
3. Prodigy
   

Recap:

"

" tells the browser that a numbered list is coming;

"

1. America Online" will start with the number one;

   "

2. CompuServe" will start with the number two;

   "

3. Prodigy" will start with the number three;

   "

NOTE: Lists can be nested within each other and there are some fine examples on the Web and in HTML books. We encourage you experiment and have fun!

Enter the following on separate lines: