HTML 101 Handbook
By Richard Rost
14 years ago
This is the full text listing of one of our handbooks. There is a lot more to this handbook. The full-color screen shots have been removed for this page. This text is simply provided so that the search engines will index the course contents. This is so any customer searching for a topic can find what class it's covered in. If you are interested in more about information about our courses, click here for our complete course listing. For details on how to purchase a handbook, visit our handbooks page.
Course Handbook Supplement
By Richard Rost
PO Box 1308, Amherst NY 14226 USA
First Printing 8/7/2004
Copyright 2004 by Amicron Computing
All Rights Reserved
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
Table of Contents 2
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
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 tag, the 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 tags are used to note the start and end of the HTML document. The body of the page should go between two tags.
In front of the body section, you can also have an optional Header section, denoted with open and close 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.
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
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
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:
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 and 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
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
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 tag as shown:
A hyperlink tag consists of:
Text To Display
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:
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.
tag can be used to strikeout text.
There is also and for superscript and subscript text, respectively.
There is also the 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.
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
tag for that.
The tags denote the start and end of your list. Inside the list, use the
- tag to denote each List Item.
Do make this a Numbered List (also called an Ordered List) just change the list tags to
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 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:
PO Box 1308
Amherst NY 14226 USA