HTML 101

HTML Training Videos on CD-ROM

PLEASE NOTE: This is the full text listing for the handbook to our HTML 101 course. There is a lot more to the course than is listed here. This page is only provided for the search engines. If you would like to learn more about this course, please click here for our full HTML 101 course outline. Our normal handbooks include full-color screen shots which have been removed from this page. For more info, visit our Handbooks page.

HTML 101
Course Handbook Supplement

By Richard Rost

Published By
Amicron Computing
PO Box 1308, Amherst NY 14226 USA
www.599cd.com

First Printing 8/7/2004
Copyright 2004 by Amicron Computing
All Rights Reserved

Welcome

Welcome to the 599CD HTML 101 Handbook.

This handbook is designed to be a supplement to the full 599CD video course for HTML 101. We recommend you use this handbook to follow along with the class videos. This handbook is not meant as a stand-alone study guide.

We do recommend that you watch the course videos one time through, paying attention to the lessons covered. Follow a/long with the course videos using this guide. Take notes on the pages where needed. Then, watch the videos a second time, practicing the examples yourself on your computer.

Table of Contents

Welcome 2
Table of Contents 2
Introduction 3
Lesson 1. What is HTML? 5
Lesson 2. Creating a Web Page 7
Lesson 3. Formatting HTML Text 13
Lesson 4. Hyperlinks 21
Lesson 5. Images 28
Lesson 6. More Text Formatting 38
Lesson 7. Miscellaneous Tips 47
Review 48

Introduction

Welcome to HTML 101, brought to you by 599CD.com. I am your instructor, Richard Rost.

Objectives for today’s class:

It is recommended that you take our Internet 101 course before taking this course. We also recommend you take FrontPage 101 if you are planning to use Microsoft FrontPage to design your web site. Word 101 and Windows 101 are also helpful classes to take previous to this one.

In this class we will be using HTML version 4. The good thing about HTML is that it’s universal. You can use just about any operating system, and web browser, and any text editor you want. There is no special software required to build a web page.

We will be using Windows XP in this class, along with the Notepad accessory to edit our pages. We will use the Microsoft Internet Explorer browser to view our pages. Again, however, it does not matter what operating system, editor, or browser you use.

There is updated information for this class available on our web site at www.599cd.com / HTML / 101.

Lesson 1. What is HTML?

In Internet 101 we learned about many of the key concepts behind the Internet, and what makes it work. We learned about computers, local area networks, peer-to-peer and client/server networks, wide area networks, and the World Wide Web. We learned about web pages, web browsers, hyperlinks, web sites, web servers, URLs, http protocol, and domain names.

Hypertext is a computer-based text retrieval system that enables a user to access particular locations in web pages or other electronic documents by clicking on links within specific web pages or documents.

HTML (HyperText Markup Language) is a language used to structure text and multimedia documents and to set up hypertext links between documents, used extensively on the World Wide Web.

Begin today by opening up your web browser and visiting a web page. We’ll visit a sample web site we have set up at www.pcresale.net, a fictitious company.

You can see the text formatting, links between different pages, and other features like the horizontal line. These are all basic HTML components.

How do you view the HTML code behind the page, in Microsoft Internet Explorer, click on View > Source.

You will then notice a text editor called Notepad opens. Notepad will show you the HTML source behind the web page.

You can see some of the basic tags in the page, such as the <HTML> tag, the <BODY> tag, and so on. We’ll discuss these tags shortly.

Lesson 2. Creating a Web Page

When editing your web pages, you have several different options for editors.

You can use simple, basic text editors like Notepad. It’s free – it comes with Windows. You can also use any normal text editor you wish.

You can also use word processors like Word or WordPerfect, however when you save your document, make sure you save your file in plain text format.

You can also use HTML editors like FrontPage which are specifically designed to edit web pages.

Visit our web site at www.599cd.com / HTML / 101 for a list of HTML editors.

Begin by opening Notepad. In Windows XP, you will find it under Start > All Programs > Accessories > Notepad. You should find it in the Accessories folder in all versions of Windows.

Notepad opens. Notice it is a simple text editor with few bells and whistles.

Let’s begin by typing in some real simple text.

Let’s save our page by clicking on File > Save.

Notepad wants to save this file in our My Documents folder. Normally that’s not a problem, but for the purposes of class, let’s save the document on our desktop – so we can easily get to it. Click on the Desktop button.

Now, let’s give the file a name. Let’s call it ricks-web-page.htm.

We want to make sure to save your file with the .htm file extension. This is so Windows knows it’s a web page file. Click save. Now, notice the file sitting on your desktop.

Double-click on this icon to open your web page in your browser.

And there we go. Your web page opens in Internet Explorer. There’s nothing fancy in it, but it’s your first web page nonetheless. Go ahead and close the browser window and return to Notepad.

Now, use the and tags to bold the word “Rick’s.” The tag indicates where the bold should begin, and the tag indicates where the bolding should end.

Open the file in your web browser, and notice the bolded text.

Properly formatted web pages will have a few tags that are “supposed” to be in them. The open and close <HTML> tags are used to note the start and end of the HTML document. The body of the page should go between two <BODY> tags.

In front of the body section, you can also have an optional Header section, denoted with open and close <HEAD> tags.

You can use the header section to put a TITLE on your web pages.

Save your page and open it up in the browser. Notice the title on the Title Bar of the window.

TIP: Web search engines like Google and Yahoo will often use this page title when they list your site in search results. Make sure all of your pages have good titles.

Lesson 3. Formatting HTML Text

Let’s begin by changing the page as follows. Delete all of the text in the BODY of the page, and replace it with:

Save your work and preview it in your browser.

Notice that the web browser ignores the blank lines in our HTML.

Change your page slightly. Add a headline to it, and place a tag in front of the first paragraph.

Place tags as shown – or wherever you want a paragraph break to occur.

Save your work. Preview it in your browser. Notice the paragraph breaks,

Try placing paragraph breaks in front of the address lines like this:

Notice how it produces text that’s too spaced out.

For this, we would use a line break tag. Change the HTML as follows:

Notice how that produces a more desirable effect:

Here’s another new tag. Insert an <HR> tag after the headline.

This will produce a horizontal line.

Earlier we learned how to bold text. You can bold the headline with the and tags.

If you want to center a paragraph on the page horizontally, you use the and tags.

Which will produce…

You can also specify ALIGN=left or ALIGN=right. The default is browser specified, which is usually left. You might also sometimes see these parameters inside of quotes, such as:

 or 

Most browsers do not care which way you format these.
HTML supports the use of an actual Header tag which used to be important for properly displaying documents, however few people use them anymore. You can specify headers using the <Hx> and </Hx> tags, where “x” is a number – usually 1, 2 or 3, but could go higher.

For example, the first main header on your page could be indicated by <H1> as shown:

Which will display as:

You can also specify an H2 header, which usually would be for a subtitle, or the second level of an outline (for example).

H2 normally looks like this. It’s a little smaller.

Usually, I personally only use H1, unless I’m making an outline. The main benefit of using headers is that search engines utilize them. If you’ve got search terms in your header as well as your page title and the text of the page, it will be beneficial for your site in search engine rank.

You can also place certain parameters inside the header tag, such as <H1 ALIGN=center> to center the header on the page horizontally.

Lesson 4. Hyperlinks

Come down to the bottom of your body text and type in:

We want that 599CD to link to our company web page at 599cd.com. We can do this with the <A HREF> tag as shown:

A hyperlink tag consists of:

<A HREF="http://www.website.com"> Text To Display </A>

Notice my hyperlink is now formed in the browser. If I click on it, it will jump to that page.

You can also try variations such as:

Which yields:

Personally, I recommend you keep relevant keywords in your hyperlinks. “599CD” in this case would be better than “click here.” Why? Again, search engines!

Next, let’s create a new link to a page about my hobbies. The page doesn’t exist yet. That’s OK. We’ll create it in a minute. For now, let’s just create the link:

Notice how I don’t need all that “http://” stuff. This is a link to a file in the same folder as the current page.

Notice how I have a hyperlink all set:

If I click on it, I’ll get an error, because the page doesn’t exist.

Let’s now make that page. Let’s make a copy of the page we’ve been working with on our desktop. Right-click on it and select copy.

And then right-click on your desktop and select Paste.

Now, simply rename that page hobbies.htm.

Now go back to your web browser and click on that link we created to the hobbies page. The page opens up – and it’s an exact duplicate of the other one.

With our hobbies page open, let’s edit it. Click on View > Source.

Change the TITLE and header tag to say “Richard Rost’s Hobbies.”

Delete the remainder of the body text. Replace it with…

TIP: You can delete all of the text between two spots by clicking at the beginning of the section, hold down the SHIFT key, and click at the bottom. Hit Delete.
Close all of your pages, and notepad. Rename your ricks-web-page.htm file to index.htm. This is a special file name that web servers will use to indicate the start (home) page.

Let’s put a link in the Hobbies page back to the home page.

Load the page in your browser, and you should have:

Let’s take the email address on our home page and make it a mailto link, which will open up the visitor’s email program when they click on it. Open the source for your home page again. Edit it as follows:

This will produce:

If you click on the link, your mail program loads.

Lesson 5. Images

We need to copy an image from an existing web page. I’m going to grab my picture from my www.599cd.com/site/about page. Navigate to a page that has a picture you want. Right-click on the picture, and select Save Picture As…

Save the picture on your desktop. This one is called richard.jpg. That’s fine.

All of these files are starting to make a mess on my desktop. Let’s organize them into a folder of their own. Right-click anywhere on your Windows desktop and select New > Folder.

Name this folder anything you want. I’ll call it Richards Web. Now, draw a box around all three of your files to select them. Then drag and drop them onto this folder.

If you open this folder up now, you should see your three files in it. This is your Web.

HANDBOOK-ONLY TIP: Notice now that you can still navigate around your web. This is because the hyperlinks inside your web only point to files… not folder locations. These are relative hyperlinks. They’re relative to the current folder; unlike absolute hyperlinks like www.599cd.com/about/index.htm which points to an exact location.

Now, let’s put that image in our home page. Edit your home page source as follows:

View the page in your browser. The picture shows up.

You can also specify a height and width for the picture, in pixels (dots). Let’s try this:

Notice how the picture is now smaller.

Go even smaller to 130 pixels.

TIP: You can specify a height and/or a width. If you specify just one or the other, your picture’s height/width ratio will not be distorted. If you specify both, you may distort your picture.
Notice how the picture pushes the text down out of the way.

We want the text to wrap around the picture and sit next to it. Notice I have tags around the following paragraph. That will set the picture and paragraph apart right there, so let’s remove them.

This will produce:

Notice how the text is now next to the picture, but it’s still not wrapping around it.

Try this. Add the following text to the IMG tag: ALIGN=Left

This will yield:

That produces the desired effect. The picture is now aligned to the LEFT of the text. You can also align RIGHT.

One more thing you should do with images is to specify a text description of the picture. Again, it’s good for search engines, but it’s also good for people who have images turned off in their browser.

If you look at the image now in your browser, nothing appears different. However, if you move your mouse over it, you’ll see a little popup with the description.

If you want to see what the page will look like with images turned off, here’s how: using Microsoft Internet Explorer, click on Tools > Internet Options.

Click on the Advanced tab.

In the Multimedia section, click off the Show Pictures box.

Reload the page, and this is what you see:

Turn pictures back on. You can turn pictures into hyperlinks. Edit the page as shown to make the picture a link to the hobbies page. Notice the IMG tag is now nested inside of the A HREF tag.

View the page in your browser. Notice the hyperlink finger appears if I move over it. Also, notice the funny border around the picture now. This is caused by the hyperlink.

To get rid of the border, edit the HTML as follows:

Notice how the border is now gone.

Lesson 6. More Text Formatting

We’ve already learned how to Bold text.

You can also use and to underline and italicize text, respectively. These can also be combined.

The <STRIKE> tag can be used to strikeout text.

There is also and for superscript and subscript text, respectively.

There is also the <TT> tag which produces “typewriter text.” This looks like a courier font.

You can change font faces with the tag as shown:

And, of course, you can bold it…

If you type in a font that the user doesn’t have, the browser will substitute a different font for it – usually the default font of Times New Roman. Fonts that most users have are Times New Roman, Arial, and Courier New. These fonts are pretty much universal.

You can specify two fonts separated by commas. If the browser doesn’t have the first one, it will use the second one.

Return the font to Arial. You can change the size of the font:

Size one is the smallest font. Size 7 is the largest font.

You don’t get an exact point size like you do with word processors like Microsoft Word. HTML only allows for these 7 point sizes. Let’s set the font size to 2.

To set the color of the text, use the following syntax:

Nothing appears to change. That’s because the color 000000 is black. The number consists of three components. The first two digits represent RED, the second two GREEN, and the last two BLUE. The numbers are hexidecimal, so you can go from 00 to FF.

HANDBOOK-ONLY TIP: Hexadecimal numbers basically are base-16 numbers. That means if you were counting in hexadecimal, you’d count like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13… There are sixteen digits in a hexadecimal number. So A=10 in decimal, B=11 decimal, and so on. Why do programmers use Hex numbers? It’s a long story, but basically computers understand things better in multiples of 2… so 16 (which is a perfect square) works well.

If I set the value to FF0000, I get all red, no green, and no blue.

Likewise, I would get all green with 00FF00 and all blue with 0000FF. By adjusting these three values you can work through all of the colors in the rainbow. FFFFFF is black. 000000 is white.

Here is a list of common colors. This chart is also found on our class web site at:
www.599cd.com / html / 101.

Aqua #00FFFF
Black #000000
Blue #0000FF
Gray #808080
Green #00FF00
Maroon #800000
Navy #000080
Purple #800080
Red #FF0000
Silver #C0C0C0
Teal #008080
White #FFFFFF
Yellow #FFFF00

You can specify a background color for the entire page in the BODY tag as shown:

The color I selected here is Aqua. To make it lighter, move the color BLUE closer to white (FF). Try CCFFFF.

That looks good.

Let’s go back to our Hobbies page now and list some of my hobbies. I want to use a bulleted list, otherwise called an Unordered List. We use the <UL> tag for that.

The <UL> and </UL> tags denote the start and end of your list. Inside the list, use the <LI> tag to denote each List Item.

Do make this a Numbered List (also called an Ordered List) just change the list tags to <OL>.

Lesson 7. Miscellaneous Tips

If you are going to put your web pages on the Internet, you will need to use a program, such as an FTP program (File Transfer Protocol) to copy your pages up to your web server. You will need to contact your web service provider for instructions on how to FTP your pages to your account. Visit our class web site at www.599cd.com / HTML / 101 for a list of FTP programs that we recommend.

Microsoft FrontPage users can use FrontPage itself to publish your web pages up. Just click on File > Publish Web to send your pages up to your web server. We cover this in depth in our FrontPage 101 class.

Notice that FrontPage gives you an HTML tab at the bottom of the editor window that allows you to easily switch between the normal editing view and the HTML view of your page. Also notice that FrontPage nicely colors the HTML tags for you.

I strongly recommend Microsoft FrontPage as an HTML editor. It’s designed to make editing your pages and your entire web very easy. You edit your page in a word-processor-like environment, and FrontPage makes the HTML changes for you.

Review

Review of topics covered in today’s class.

Tell us what you think. Log on to www.599cd.com/Survey and take a short survey about this course.

Take your skills check quiz at www.599cd.com/Test. If you pass, you can print out a Certificate of Completion.

What’s next? Visit www.599cd.com/HTML for our complete list of Microsoft FrontPage courses.

Need Help? Visit www.599cd.com/TechHelp for Microsoft FrontPage assistance.

Make sure you’re on our Mailing List. Go to www.599cd.com/MailingList for details.

Contact Us. If you have any questions, go to www.599cd.com/Contact for information on how you can contact us by phone, email, or live online chat.

This course, handbook, videos, and other materials are copyright 2002, 2003, 2004 by Amicron Computing. All rights reserved. No portion of this course, handbook, videos, or other course materials may be reproduced, copied, edited, or otherwise distributed without the express written permission of Amicron Computing. Amicron Computing shall not be held liable for any errors or omissions in this document.

This document may not be used as part of a training course without express, written permission from Amicron Computing and the purchase of an Instructional License. For details, contact:

Amicron Computing
PO Box 1308
Amherst NY 14226 USA
www.599cd.com

00. Introduction

01. What is HTML
Review of topics from Internet 101
Hypertext
HTML
How to view HTML code in any web page
The Notepad editor
Overview of hypertext tags

02. Creating a Web Page
Choice of HTML Editors
Text Editors v. Word Processors v. HTML Editors
Starting Notepad
Creating a basic web page
The .HTM file extension
Previewing your page in your web browser
Using the tag to bold text
The HTML and BODY tags
The HEAD tag
Setting a Page Title
Why a page title is important

03. Formatting HTML Text
Creating paragraph breaks
Creating line breaks
Creating Horizontal Lines
Changing the horizontal alignment of your paragraphs
Header tags and why they're important

04. Hyperlinks
Creating an external hyperlink
Creating an internal hyperlink
Creating a mailto hyperlink
Creating copies of your web pages to edit

05. Images
Copying images from web pages
Creating folders to store your web pages
Inserting images in your pages
Changing the image width and height
Changing the image alignment
Making text wrap around your image
Alternate picture text
Viewing your web pages without images
Making your image a hyperlink
Changing your image border size

06. More Text Formatting
Italics
Underline
Strikeout
Superscript
Subscript
Typewriter Text
Changing your text font
Changing your font size
Changing your font color
How hexadecimal color values work
Changing your page background color
Bulleted (Unordered) Lists
List Items
Numbered (Ordered) Lists

07. Miscellaneous Tips
Using FTP (File Transfer Protocol) to upload pages to web server
Editing HTML inside Frontpage
The benefits of Frontpage

08. Review