For ALL PSP versionsHome  >  Tutorials  >   Web Applications  >
Basic HTML 101
E-mail this tutorial to a friend Email to a Friend

Basic HTML 101
Created by: Zu

 
Before we start, you need to open your browser and a simple text editor. You can create HTML documents with big-time word processing software like Microsoft Word or Lotus WordPro, but I do not recommend it. Word processors get their name because they like to process what you write. We want our HTML code left exactly as we type it. Therefore, I recommend using the simplest text editor you have... such as Windows Notepad. (I know Mac users have something similar, but I'm afraid I don't know what it's called.)
 
Windows Notepad Text Editor

I will explain an aspect of HTML, give you an example, then have you type it into your text editor, save it in .html or .htm format, then view it in your browser.

This way you can actually see what you are doing.

 
HomeSite Text Editor

NotePad+

If you have a program designed specifically for HTML coding (i.e. HomeSite or HTML Kit) or an improved text editor like NotePad+ and you are familiar with it, feel free to use that. If you are not already familiar with the program, do not use it. You don't want to be learning HTML and your software at the same time.


Get the basics using Notepad (or something similar) then experiment with the software.


Do not use a WYSIWYG page generating program (i.e. Dreamweaver, Page Maker, AOLPress, etc.). These programs often alter your HTML code to their own peculiar liking, which we do not want. Besides, if you have one of those, why do you need me? ;o)

 
Word Wrap checked in text editor Notepad It may make it easier to view your document if you go to Format on the toolbar of Notepad and put a check by Word Wrap (in Windows 98 the Word-Wrap option was in the Edit menu).
 

First, a few definitions:

HTML stands for Hyper Text Markup Language and is used to create documents for use on the World Wide Web (WWW). This language uses a collection of commands known as "tags" which tell web browsers how to display the information contained in the document.

These tags are always enclosed in brackets: <tag>. Like shoes and socks, tags almost always occur in pairs ... an opening tag and a corresponding closing tag. These pairs are identical except that the closing tag also includes a forward slash: /. Also as with shoes and socks, most tags are of little use without their corresponding partner. ;o)

Example: opening <tag> closing </tag> (The word "tag" is not an actual HTML tag, just an example.) Pertinent information is inserted between these tags and the tags tell the browser what to do with the enclosed info.

A few tags do not require a closing tag (kind of like the lone socks our kids make puppets out of ... just one does just fine *G*). When we come to one of these I will point it out. To the best of my knowledge, you can still use closing tags with these, they just aren't required. When in doubt, always use a closing tag. ;o)

HTML is not case sensitive. In other words <tag> is the same as <TAG>. Using uppercase for certain tags can make them stand out and easier to find when viewing the document ... this is a common practice and strictly a personal preference thing.

However, there are areas in the document when case becomes very important (i.e. file names) ... more on that later. ;o)

Every HTML (Hyper Text Markup Language) document must have the following four tags:
– <html>
– <head>
– <title>
– <body>

HTML Tag: <html></html> – This element tells your browser that the file contains HTML-coded information. Since HTML is created in a text format, this is the signal to the browser to treat your text as HTML tags, not simple text. Without it, the browser will not be able to interpret your tags as commands.

Also, when you save an HTML document you use the .html or .htm file extension, not .txt or .wrd or .sam or whatever your editor uses as default. Either extension will work, although I recommend you be consistent (don't save some as .html and others as .htm)
Note: Some older software may not recognize four character extensions, which will limit you to using .htm.

<html> should be the first tag in your document and </html> should be the last.

 
Example of HTML tags in text editor In your text editor type <html>, hit enter about three times, then type </html>. We will type everything else in between these tags, so you won't have to worry about remembering to close the HTML tag later.
 
Standard Toolbar - Save (image) button Now save your document. You need to type either the .html or .htm extension after the filename you choose to identify this as an HTML document. We're going to skip viewing at this point ... there's nothing to see ... yet. ;o)
 
Example of Head tags

Head Tag: <head></head> - The head element identifies the first part of your HTML-coded document. This part contains the title (among other things) and (with the exception of the title) is not displayed by the browser.

Position your cursor on the line below <html>. Type <head>, hit enter twice, type </head>. Save your document, if desired.

 
The title is showing in the Browser title bar

Title Tag: <title></title> - The title is typically displayed in the title bar at the top of the browser window. The title is also what is displayed on someone's hotlist or bookmark list.

In the image on the left the title is "PSPUG Tutorials - Basic HTML Lesson".

 
Title of page in Title Tags Place your cursor on the line below <head>. Type <title>My Title</title>. You may substitute the title of your choice for the words "My Title". ;o) Save your document.
 
Body Tags and Text

Body Tag: <body></body> - This section contains the portion of the code which will actually generate a visible page in the browser. All of your content goes within the body tags.

Place your cursor on the line below </head> (make sure it is above </html>), hit enter and type <body>. Hit enter again.

Type some text ... at least three complete sentences. (I typed: Check this out! I don't need any silly WYSIWIG page generator. I can hand-code my pages.) Do not hit enter after each sentence. Hit enter only after the last sentence, then type </body>.

 
Standard Toolbar - Save (image) button Make sure you save your document this time.
 
Example of how a page would look in a browser

Go to your browser and type in the complete location of the document you just saved. For instance, if you saved your page in a directory named "WebPages" just below the root directory c:\ your location would be c:/WebPages/yourdocument.htm (or .html).

You should get a page displaying whatever text you typed within the body. Your title should appear in the title bar of the browser window.

 

Congratulations! You just hand-coded your first HTML document. However, this very basic page is kind of colorless ... lets jazz it up a bit. ;o)

Many tags have "attributes" which you can set for a bit more creative freedom. You can customize the background, text, and link colors on your page by specifying your color choices in the attributes of the Body tag.

Attribute settings are usually (but not always) enclosed in quotes. " ". As with end tags, you can sometimes leave the quotes out in special circumstances but not always. To be safe, always enclose them in quotes. ;o)

 
body bgcolor

An example of a body tag with attribute settings is as follows:
<body bgcolor="blue" text="white" link="yellow" vlink="red">. Type this in place of the simple <body> tag you put in earlier. Save your document.

Go to your browser and hit Refresh or Reload.

This tag will produce a blue background, white text, yellow link, and red visited link. Since we haven't added any links yet, you will only see white text. We will add links later. ;o)

 

You can choose from the 16 Windows colors (black, white, red, green, blue, yellow, magenta, cyan, purple, gray, lime, maroon, navy, olive, silver, and teal) or you can type the hexadecimal code of any custom color.

Hexadecimal is a 6-digit code for a color. The first two digits set the red value, the second two set the green, and the last two the blue. This code is preceded by a number sign: #. We don't have time to cover hexadecimal here, but I can give you a cheat-sheet: FF = full brightness, -CC = 80%, 99 = 60%, 66 = 40%, 33 = 20%, and 00 = none of this color. Plug one of these values for each of the red, green and blue components to get your color.

Thus bright red is #FF0000, dark green is #003300, bluish purple is #660099, white is #FFFFFF, black is #000000 and medium gray is #999999 ... to give just a few examples.

The first option is easier because you don't have to remember or find the hexadecimal code, the second gives you more creative freedom.

Here's a Hexadecimal RGB Color Chart. It may come in handy. (And remember you can always choose your color in your PSP, then copy and paste the hexadecimal code from the PSP Color dialog into your code.)

But keep in mind that different monitors display the same color differently, so use with caution.

 
Hexadecimal Color

Change the setting of the bgcolor attribute in the body tag from bgcolor="blue" to bgcolor="#660099".

The entire tag should now look like this:
<body bgcolor="#660099" text="white" link="yellow" vlink="red">. Save your document.

Go to your browser and hit Refresh or Reload. Your background color should change from blue to purple.

 
Background Image Attribute

You can also use images for backgrounds. The image will tile over and over to fit the size of the browser window.

To do this add the background attribute to your body tag as follows:

<body bgcolor="#660099" background="/tutorial/html/tutweb/bg.jpg" text="white" link="yellow" vlink="red">

 

"/tutorial/html/tutweb/bg.jpg" would actually be the name and extension of the image you wish to use. This is one of the instances when case is very important. If you type in "BG.JPG" and your image is actually named "/tutorial/html/tutweb/bg.jpg" the browser will not realize it is the same image and your background image will not display.

Even though both attributes are defined, you will not be able to see both the background color and the background image at the same time. However, by defining both attributes, you can control the background color people will see while they are waiting for your background image to download. Also, if for some reason your background image doesn't download properly, you can ensure a complimentary color will be displayed that won't clash with your site design or interfere with text readability.

 
BGCOLOR removed

If you are unconcerned about the background color during the brief (hopefully) display period prior to the download of your background image, you can just leave the bgcolor attribute undefined.

In that case, your tag would look like this:
<body background="/tutorial/html/tutweb/bg.jpg" text="#FFFFFF" link="#FFFF00" vlink="#FF0000">

 
No background image attribute For now, leave the background attribute out of the tag, since we do not have an image handy to use. However, please experiment with this attribute on your own time. It is a very powerful feature of HTML. We will discuss this attribute again in Lesson 3 when we are dealing with images.
 

Now we have added some color to our page, but our text still appears in one long paragraph. Good news ... there are tags to fix that, too. ;o)

Unlike documents in most word processors, whitespace is not recognized in a HTML document. In other words, to begin a new paragraph, you must enter the Paragraph tag <p> at the beginning of each new paragraph. If you don't do this, your sentences will run together into one large paragraph, just like in our example:

Check this out! I don't need any silly WYSIWIG page generator. I can hand-code my pages.

 
Adding Paragraphs

Place your cursor in the body of your HTML document at the end of the text we typed (right after pages). Hit Enter to drop to the next line and put in a paragraph tag <p>. Retype the first sentence (Check this out!). Hit Enter again and add another <p>. Retype the remaining two sentences after this paragraph tag and save your document.

Note: <p> is one of the tags that do not require a closing tag (though it is good practice to put </p> at the end of a paragraph).

 
Browser view after hitting Refresh or Reload Go to your browser and hit Refresh or Reload. You should now have three paragraphs: the original one; the duplicate of the single, first sentence; and the duplicates of the remaining two sentences. Each of these paragraphs should be separated by a blank line or "whitespace".
 
BR tag

When you use the <p> tag, it automatically places this blank space between the paragraphs. This is easy on the eye and usually works well. However, sometimes we don't want that blank space ... we just want to start on a new line (i.e. for addresses or poetry). That's where the <br> or break tag comes in.

Instead of starting a whole new paragraph, you can drop a word or sentence to the next line with the Break tag <br>. In your text editor, place the cursor in the third paragraph of text, at the end of the first sentence (right after generator). Type <br> and hit Enter. (Hitting Enter just makes the code easier to read. It is not necessary for the tag to work.)

Note: <br> does not require a closing tag.

 
Standard Toolbar - Save (image) button Save your document. Refresh your browser and observe the changes. Neat, huh? ;o)
 
Paragraph Alignment

The paragraph tag has an alignment attribute which can be defined to control the paragraph's ... you guessed it ... alignment. Place your cursor after the p in the first <p> tag but before the closing bracket. Alter this tag to look as follows: <p align="center">. (Though the quotes are optional it is good practice to use them.)

Alter the second <p> tag to look like this: <p align="right">. Again quotes are optional, but if you use them, make sure you use two. ;o) Personally I have gotten into the habit of using quotes around all attributes. That lousy memory again! *G* Assures me of not forgetting which need it and which don't. ;-)

 
Document Saved, Browser Refreshed, showing alignment

Save your document and refresh your browser. The middle paragraph should now be centered and the bottom paragraph should now be aligned with the right margin.


Note that both sentences are right-aligned. Since these are separated by a <br> and not a <p>, they are considered part of the same paragraph and both are affected.

 

You can also set align="left"; however, this is the default setting, so it is not usually necessary to define it. (There are rare exeptions ... aren't there always? ... but we won't go into that now.)

I think that's enough for now ... don't you? ... LOL

Basic HTML 102 will cover additional ways to alter text appearance. Basic HTML 103 will go over adding links and images. So, make sure you keep your work as the lessons build on each other. You will need the file to do the remaining tutorials. *S*

I hope you enjoyed the lesson and that it was informative. ;o)