WELCOME FROM INFORMATION CENTER
Getting Started With HTML
What you need to get started with HTML| Home | HTML | Beginner | Advanced | List |
To begin using HTML, you will need to have a few things. Here is the big list of items you need to have to get started:
- You will need to have a computer that is running. Most likely you have this already, since you are reading this page.
- You will need a text editor of your choice. If you have windows, Notepad will do the trick. If you have a Mac, you can use BBEdit. To find Notepad/BBEdit on your computer:
- In Windows 3.x, find the program group named "Accessories" and double click to open it.
You should see an icon like this:
. Open it by double clicking on the icon. - In Windows 95 or higher, click the "Start" button, go to the "Programs" folder, then to the "Accessories" folder. You should then see the above icon (but smaller) with "Notepad" written to the side of it. Open it by clicking over this area.
- On a Mac, you should be able to find "BBEdit" under the Apple menu.
- In Windows 3.x, find the program group named "Accessories" and double click to open it.
- You will need a web browser of your choice. If you possibly can, use the latest version of Netscape Navigator or Microsoft Internet Explorer .
- You will need a place to save your work. You can use your hard drive, a floppy disk, or your web server. You don't have to work online, you can write the html and use your web browser offline on your own computer. We will get to that shortly, in the next tutorial.
Okay, once you have the above materials, you can begin creating your own web pages with HTML. Let's move on to the next tutorial, Using the Materials. 
Using Your Materials
A quick look at Notepad and Web Browsers| Home | HTML | Beginner | Advanced | List |
Okay, to begin using HTML you will want to familiarize yourself with the software you will be using. So, to get started, open Notepad (or your text editor). You should see a completely blank page. Now, type in the text below. We will make use of it later with the web browser.
Type the following:
<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
</HEAD>
<BODY>
Hi there, you have just written your first web page!
</BODY>
</HTML>
Once you have finished, go to the "File" menu and click on "Save As" . This will prompt you to create a name for your file. In the box, type in test.htm . At the bottom of the prompt you should see a space that says "Save file as Type" or "Save as Type". The default is .txt, so you will need to change it. Click on the down arrow on the right side of the input box. You should be able to highlight All Files(*.*) . Click on this to make the change. You should see something similar to the picture below:
This is an example using Windows 95. The text was enlarged so you could see the part we are interested in at this point. Now you may choose the drive and directory to save to, and click on "Save". You can use this routine each time you create a new HTML file.
If you do not get the option to save the file as the type All Files(*.*) , then select the plain text file type (usually shown as Text Documents, Text Files (*.txt), or something similar in the dialogue box). Be careful not to save it just yet though if you are using Windows. Windows will save it as test.htm.txt by default. To get around this, you will need to place quote marks around the filename, as shown in the image below:
If you have a Mac, the way to do this will depend on your text editor. Something similar to the methods above should work for you. If someone with a Mac would like to write up something in more detail about this (as I don't have a Mac), feel free to send it to me.
Now you will want to use your web browser to view the file you just created. So, start up your web browser. If you are given an option to connect to the internet, you can cancel the connection and you will likely end up with a blank page. You may also see an error saying the browser could not connect to "http://somepage.html" or something similar. You should be able to hit OK and get a blank page. Now, in the location box (where you manually type urls), type in the path to your html file. If you have the file in a directory called "myfiles", you would type the following: c:\myfiles\test.htm . If the file is on a floppy disk, you can type a:\test.htm , provided you did not place it in another directory on the disk. Most browsers will display the page when you hit enter.
Another option you have, especially if you hate typing paths all day, is to use the "Open Page" option. To use this, go to the "File" menu in your web browser. Look for an option that says "Open Page", "Open File", "Open Local File", or a similar phrase. Click this option and you will be able to browse for your file and open it from there. The image below shows where this can be found in Internet Explorer:
Once the page is displayed, you will see something like the following:
| Hi there, you have just written your first web page! |
I know, it's not much yet, but you have written your first web page. You are now prepared to use HTML to build a web page! Let's move on to Basic Formatting.
HTML: Basic Format
About HTML tags and the basic page format.| Home | HTML | Beginner | Advanced | List |
Now we are able to start learning about HTML tags. An HTML tag will always begin with a "less than" sign, like this: <. The tags will end with a "greater than" sign, like this: >. An example would be the tag used to underline text, <U>. You would place this before the text you want to underline. This is called an opening tag, which begins the operation you wish to perform. In order to end the underlining, you must use a closing tag. A closing tag will always be the same as the opening tag, but will have a forward slash before the command, like this: </U>. So, if you would like to underline the phrase "HTML Rules!", you would write the following in your text editor:
<U>HTML Rules!</U>
The result of this would be:
HTML Rules!
Not all tags will require a closing tag. An example would be the image tag, which will place an image on the page. It looks like this: <IMG src="myimage.gif" mce_src="myimage.gif">. I will explain all the extra stuff later, this is just an example of a tag that requires no closing tag to follow it. Other examples would be a line break: <BR>, a horizontal line: <HR>, and a paragraph: <P>.
Also, you do not need to capitalize the tags. <P> is the same as <p>. You can also use as much space between things as you like. So:
<U> Underline Me! </U>
Is the same as:
<U>Underline Me!</U>
Is the same as:
<U>
Underline Me!
</U>
A basic HTML file will have the format below. Read through and see if you can guess what the different tags will do: (Don't worry, I'll explain them at the end of the example.)
<HTML>
<HEAD>
<TITLE>I Love HTML</TITLE>
</HEAD>
<BODY>
Everything displayed on your page will be in here.
</BODY>
</HTML>
Okay, to make sense of this, go through and find the pairs of opening and closing tags. The first one we see is <HTML>. This signals the beginning of an HTML file. The closing tag , </HTML>, is at the very end of the document. As you might have guessed, it signals the end of the HTML document. Everything (tags, text, images) should be between these two tags, as they are the beginning and end of your page.
The next tag we see is the <HEAD> tag. This opens a section in which you can title your page, use keywords, and add other descriptive information to the page. The section ends with the </HEAD> tag. At this time, the only part of the HEAD section we will deal with is the TITLE, which brings us to the next tag.
The <TITLE> tag allows you to create a title for your page. The title is only used for bookmarks, search engines, and as the name of the browser window. It will not show up on your web page unless you type it in the BODY section (explained below). To end your title, use the </TITLE> tag. For instance, in the example, the title is "I Love HTML" (That's not true all the time, though).
The <BODY> tag opens the section that will be displayed in the web browser. This is where most of our work will be done. To end the body section, use </BODY>. The above example makes a rather boring web page (even worse than the one in the previous tutorial). The browser would display this:
Everything displayed on your page will be in here.
Yuck. All we have is a line of text aligned to the left of the screen. Well, let's go to the next tutorial and see if we can add a little life to our page of text. Let's go to Text Tags.
Okay, it's time to start making our text appear in different ways. Let's start by giving you some tags to work with:
<B></B> This is the tag for bold text.
Example:
<B>Howdy</B>
This will show up on your page like this:
Howdy
Here are a few more to start working with:
<U></U> Underline text
<U>Underline Me!</U>
Underline Me!
<I></I> Italics
<I>Isn't this fun?</I>
Isn't this fun?
<STRIKE></STRIKE>
<STRIKE>You're Out!</STRIKE> You're Out!
<CENTER></CENTER>
<CENTER>This centers text on the page</CENTER>
Having fun yet? You can also use more than one tag at a time. Let's say you wanted something in bold and italics. To do this, just place both opening tags before the text.....and remember to close both tags afterwards....like this:
<B><I>I am bold AND Italic, which makes me cool!</I></B>
This will show up like this:
I am bold AND Italic, which makes me cool!
Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as placing the </HTML> tag before the </BODY> tag). Here's another way to look at working inside out. I could write the HTML this way:
<B>
<I>
I am bold AND Italic, which makes me cool!
</I>
</B>
This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.
So lets try three things: Bold, Italic, and underline!
<B><I><U>Would you stop tagging me!</B></I></U>
This will give us:
Would you stop tagging me!
But this:
<U><I><B>Would you stop</B></I>tagging me!</U>
would give us this!
Would you stop tagging me!
As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!
Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the <CENTER> tag. Anything you place between the <CENTER> and </CENTER> tags will be centered on the page. Here is an example:
<CENTER>I'm in the middle!</CENTER>
This will give us the following:
You can also use it with one or more of the other tags above, like this:
<CENTER><B><I>Look at me now!</I></B></CENTER>
Now you may be wondering why everything is just on one line. Well, in the next section, I'll show you how to make the text move to the next line with the line break tag. You'll also see how to use headings and paragraphs. So, let's move on to the next step, where you will learn about headings, paragraphs, and line breaks.
Headings and Paragraphs
Using Headings, Paragraphs, and Line Breaks| Home | HTML | Beginner | Advanced | List |
Let's start out with heading tags. These tags are good for creating titles or section headings. Here are some examples:
<H1>Large Heading!</H1> will give us:
Large Heading!
<H2>Heading 2</H2>
Heading 2
<H3>Heading 3</H3>
Heading 3
<H4>Getting Small</H4>
Getting Small
<H5>Smaller Still...</H5>
Smaller Still...
<H6>You must have good vision...</H6>
You must have good vision...
Okay, I think you get the idea here. Now let's move on to a line break. The tag for a line break is <BR>. When you insert this tag in your document, the contents will go to the next line. The <BR> tag does not need a closing tag afterward. Here is an example:
End this line now!!<BR>Thanks!
This will generate the following:
End this line now!!
Thanks!
Basically, a line break is like hitting the "enter" key when you are writing text. The browser will not go to the next line until it runs out of space, or sees a tag that will force it to the next line. So typing the following in your text editor will display only one line of text in the browser:
Hello,
I want
a new line.
This gives us:
Hello, I want a new line.
To make the text move to the next line, use your <BR> tag from above:
Hello,<BR>
I want<BR>
a new line.
Now this will do what we wanted it to do:
Hello,
I want
a new line.
Now, let's move on to the paragraph tag, <P>. This tag will skip a vertical space after going to the next line, as though you had typed <BR> twice. This tag is good for skipping a line quickly and for knowing where you wanted a new paragraph to begin. How about an example? Well, O.K.:
This is some cool stuff.
<BR>
This is the next line.
<P>
This is a new paragraph. Is this cool or what?
This will give us the following:
This is some cool stuff.
This is the next line.
This is a new paragraph. Is this cool or what?
The paragraph tag does not require a closing tag, but if you'd like to add one for your own reference, you place a </P> where you would like the paragraph to end, like this:
<P>
This paragraph needs a visual ending!
</P>
<P>
Here is a new paragraph....<BR>
and the end.
</P>
This will give you the same thing as using just the opening <P> tags, like this:
<P>
This paragraph needs a visual ending!
<P>
Here is a new paragraph....<BR>
and the end.
Both of these will give you this:
This paragraph needs a visual ending!
Here is a new paragraph....
and the end.
So, now you can create a web page full of text. Isn't it great? Well, there is still more of this in the next section, Manipulating Font Size and Color .
Manipulating Font Size and Color
How to change font sizes and colors| Home | HTML | Beginner | Advanced | List |
Okay, now we want to see how to change the font size. This is done with the following tag:
<FONT SIZE="x">text to change</FONT>
"x" will be replaced by a number with a + or - sign in front of it. So let's say you wanted to make the font larger. You can use the tag with a +2, like this:
<FONT SIZE="+2">I'm a big sentence now!</FONT>
This will give us the following:
I'm a big sentence now!
Likewise, you can make the font smaller in the same way, using the - sign:
<FONT SIZE="-2">Hey, I'm Small!</FONT>
Will give us this:
Hey, I'm Small!
Here are some more size examples for you:
<FONT SIZE="+4">Hey There</FONT>
Hey There
<FONT SIZE="+3">Hey There</FONT>
Hey There
<FONT SIZE="+2">Hey There</FONT>
Hey There
<FONT SIZE="+1">Hey There</FONT>
Hey There
<FONT SIZE="-1">Hey There</FONT>
Hey There
<FONT SIZE="-2">Hey There</FONT>
Hey There
<FONT SIZE="-3">Can you read this?</FONT>
Can you read this?
Now, suppose you want to change the font color. This is done in much the same way. Here is the tag:
<FONT COLOR="color">
We replace the word color with a color name or the hexidecimal color value. Let's do one using the color name to begin:
<FONT COLOR="red">I'm red!</FONT>
I'm red!
Now let's use the hexidecimal value for red. The hexidecimal representation begins with a # sign and is followed by six letters and/or numbers. Here is the example:
<FONT COLOR="#FF0000">I'm red!</FONT>
I'm red!
That is a # sign, two F's and four zeros. Usually it's easier to remeber the color names, but you may want to have the hex code for more complicated colors. If you want to see a sample list of color names and hex codes, click here .
Now suppose you want to change the size AND the color. To do this, you can use two FONT tags and remember to close them both, like this:
<FONT SIZE="+2"><FONT COLOR="gold">I am gold!</FONT></FONT>
I am gold!
Also, you can use the SIZE and COLOR declarations inside the same tag, and close only one tag. This is done like this:
<FONT SIZE="+2" COLOR="gold">I am gold!</FONT>
I am gold!
You can also declare the font color inside the BODY tag. We will discuss this in a later section called Using the Body Tag Declarations. For now, we will move on to the next section: Special Characters: The extra space, copyright symbol, and more.
Special Characters
How to use special characters in HTML| Home | HTML | Beginner | Advanced | List |
So, have you been wondering how to add an extra space on your page, or how to get a copyright symbol to show up? Then let's see how right now! Special characters are placed on your page by using a special reference to the character you want to use. The reference will begin with an ampersand (&), will be followed by some text or numbers, and end with a semicolon (;) . So as an example, let's say you wanted to place an extra space between two words. To do this, you place the reference where you would like to add the extra space. Here is what you would do:
Hello there!
This gives us two spaces between "Hello" and "there!", like this:
Hello there!
The first space is added just using the "space" bar on the keyboard. The web browser will see the first space, but after that additional spaces will make no difference-- you will only see one space in the browser. By adding the reference, we forced the browser to add an extra space between the two words. You can add as many spaces as you would like by repeating the reference, like this:
Hello There!
This will create the first space, and 4 additional spaces between the two words, for a total of five spaces. It will be displayed like this:
Hello There!
The other one we will discuss is the copyright symbol. You use it the same way as an extra space, by placing its reference where you would like to see the symbol on the page. The reference for a copyright symbol is ©. Here's an example:
This page Copyright © 1999 by me!
This page Copyright © 1999 by me!
This will work the same way for any special character you want to use. Just place the reference where you want the character to be on your page. To see a list of some common special characters and their references, see a list of some special characters.
Well, now you are ready to go on to the next section. Yes, you now get to learn the wonderful art of Linking!
Linking to Other Pages
How to link to other pages in HTML| Home | HTML | Beginner | Advanced | List |
All right, it's time to learn how to link to another page. So let's start out by seeing what tag we use for linking:
<A href="http://www.someplace.com" mce_href="http://www.someplace.com">Display Text</A>
The A stands for anchor, and the HREF=" " is asking for a location to link to. The </A> is the closing tag. The text between the tags is what will show up on your web page as a link. So, if you would like to link to our site, you would place our url, or net address, inside the quote marks. Our url is http://www.pageresource.com, so to create a link to us, place this command on the page where you would like the link to show up:
<A href="http://www.pageresource.com" mce_href="http://www.pageresource.com">The Web Design Resource</A>
It will show up on your page like this:
See how the text was colorized and underlined? In most cases, this will indicate the text is a link. If you move your mouse over the link, you should see the cursor change into a pointing hand. The mouse attribute comes in handy when a page has a whole lot of underlined text.....
As another example, let's create a link to this particular page. Look in your location box near the top of your web browser. You should see the url for this page, which is http://www.pageresource.com/html/linking.htm . To create the link, insert this url into the link tag:
<A href="http://www.pageresource.com/html/linking.htm" mce_href="http://www.pageresource.com/html/linking.htm">Linking to Other Pages</A>
Which gives us this link:
If you click on this link right now, your browser will simply display this page again. If you click on the link from the first example, you will end up at our home page. Great isn't it? Now, if you want to link to your own pages from your home page, just type in the address for your page inside the link tag. This will work for any page because we are using the absolute url, which means we are using the complete address to every page we are creating a link to. If you have all of your files in the same directory, you may use a shortcut called a "local url". Before you try this, be certain any file you want to create a local url link to is in the same directory as the page you are editing. (In most cases, it will be) Now, rather than typing the full url inside the tag, you can just use the filename, like this:
<A href="linking.htm" mce_href="linking.htm">Linking to Other Pages</A>
This will create the same link we just did, but we didn't have to write as much.
If you aren't sure or have doubts, always use the absolute url. Typing in the full address will allow the link to work no matter where it is located on the internet.
If you would like to see some related tutorials, try one of these:
Changing the Link Color
Using an Image as a Link
Linking Within the Same Page
Now that you have linking down, let's move on to even more fun: Adding Images to your Page.
Adding Images to Your Page
How to place images on your page| Home | HTML | Beginner | Advanced | List |
So, have you been wondering how to add an image to your page? Well, let's take a look at the image tag:
<IMG src="image.gif" mce_src="image.gif">
The IMG stands for image. The SRC stands for source. The source of the image is going to be the net address of the image. Most often, you will be able to just type the filename of the image here, like this:
<IMG src="image.gif" mce_src="image.gif">
The filename does not have to end with .gif . You could also use a .jpg file as well. These are the two most common image file extensions used on the internet. If you have images in other file formats, you will probably want to convert them to .gif or .jpg . This can be done with most image editing programs. A commonly used program is Paint Shop Pro, which is available as shareware from JASC.
Now, if your images are in a directory other than the one your html document is in, you will want to link to it using the full address of the image. So, if your image is located at http://www.disney.com/pictures/image.jpg , you would use this url as the image source:
<IMG src="http://www.disney.com/pictures/image.jpg" mce_src="http://www.disney.com/pictures/image.jpg">
If you aren't sure, go ahead and use the full address just to be sure it will work correctly. Now let's work with a real example. One image I have on this site is called "next.jpg". The address for the image is: http://www.pageresource.com/images/next.jpg . If my image and html file were in the same directory, I would type:
<IMG src="next.jpg" mce_src="next.jpg">
Otherwise, I would use the full internet address, like this:
<IMG src="http://www.pageresource.com/images/next.jpg" mce_src="http://www.pageresource.com/images/next.jpg">
Either option would display the image on the page, aligned to the left, like this:
If you want to center the image on the page, you would place the CENTER tag around the image tag, like this:
<CENTER> <IMG src="http://www.pageresource.com/images/next.jpg" mce_src="http://www.pageresource.com/images/next.jpg"> </CENTER>
This will place the image in the center of the screen:
Keep in mind, the filename or address of the image IS case sensitive, so "image.jpg" and "IMAGE.JPG" are considered two different images to the web browser. Be sure to use the correct case in your image tags, or the image may not show up, and that's no fun.
Now, this doesn't give us everything we could possibly want, but it will allow you to add an image to your page on its own line. If you want to see more on using images, check out one of these related tutorials:
Aligning Images and Wrapping Text
Using an Image as a Link
Using a Background Image
Resizing an Image
Using Image "alt" Commands
If you would like to move on, let's go to the next section, Some More Text Tags.
Some Extra Text Tags
A few other tags to try out
| Home | HTML | Beginner | Advanced | List |
There are a few more tags you might like to try while you are creating your pages. The tags I will be talking about in this section are <SUB>, <SUP>, <PRE>, <NOBR>, <WBR>, and the Netscape only <BLINK> tag.
<SUB> and <SUP>
These tags are used to place a number or words slightly above or below your normal text. The <SUB> tag works like this:
Area<SUB>1</SUB>
The result is this:
Area1
And the <SUP> tag allows you to use exponents if you need to:
X<SUP>2</SUP> + Y<SUP>2</SUP> = 0
And this gives you:
X2 + Y2 = 0
These two tags are most useful if you are writing mathematical equations and such on your page, but there are other times you may wish to use them.
The <PRE> Tag
The <PRE> tag is used when you want to keep the same amount of whitespace on your web page as you have in your html code in your text editor. This is useful when you have to post programming code. Here is an example:
<PRE>
x=1;
y=2;
if (x==1)
y=2;
</PRE>
And this somewhat redundant code gives you this:
x=1; y=2; if (x==1) y=2;
Notice how we didn't need to use <BR> or inside the <PRE> tags. This can save you some headaches from writing in line breaks and spaces manually so often.
<NOBR> and <WBR>
Any text you place between the <NOBR> and the </NOBR> tags will not break to the next line, even after reaching the end of someone's browser window. Here is an example:
<NOBR>
I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.
</NOBR>
When viewed on your web page, this will be one really long line, like this:
Unless you had a monitor with some pretty high resolution, you probably had to scroll to the right to see the end of that line. You can use the <WBR> tag inside the NOBR tags to force a line break if you want or need to do so, like this:
<NOBR>
I'll just keep writing like this for a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long <WBR>
long long long long long long long long long long long long long long long long long long long long long long long long long long long long time.
</NOBR>
Now you will have two lines that are not quite as long (though still pretty long in 640x480):
The <BLINK> Tag
Yes, this is the tag everyone has been complaining about. If you are using Netscape you can see the following reason why viewers get annoyed by this tag:
If you have IE, you won't see the text blink, but you can get the general idea. Actually, if the tag is used in a better way, it can help point out important things you want people to see. Just avoid the +10 font size....Here is an example:
This rule is <BLINK>very</BLINK> important!
This gives you the following:
This rule is important!
Just use your own discretion when placing blinking text on your page, and remember it will only blink if your viewer is using Netscape (I think 2.02 or better).
Well, that does it for this section. So, on we go to: HTML Comments.
Adding HTML Comments
Using comments in your html code| Home | HTML | Beginner | Advanced | List |
Comments can be a nice way to help yourself when you are coding your web page. Comments are invisible to a web browser when it displays your web page. The only way to view comments is to look at the source (html) code of the web page. In this way, you can leave yourself notes so that you don't forget something when you come back later to redesign the page. So, how is it done? To write a comment, you begin with a less than sign (<) followed directly by an exclaimation point (!) and two dashes (--). After this, you type in your coments. To end the comment, you use two dashes (--) followed directly by a greater than sign (>).
<!-- I am a comment. I feel invisible though. -->
You can comment on multiple lines, just be sure you remember to end the comment!
<!--
You can't see me....
unless you look at the page source code.
-->
To look at something more useful, you could use a comment to remind yourself that a section of code is supposed to perform a certain task:
<!-- This image should be aligned to the right, and have alt text -->
<IMG src="mypet.gif" mce_src="mypet.gif" align="right" alt="Look at my Kitty Cat!">
Of course, you do not need to have a kitty cat to qualify!
Well, that does it for comments. So, let's move on to the next section: Using HTML Lists.
Using HTML Lists
How to add an HTML list to your page| Home | HTML | Beginner | Advanced | List |
Have you been wanting to add lists to your page? Well, here is the way to add those html lists to your web pages.
To begin, we need a tag to begin and end the entire list. For starters, let's use an unordered list. This will create a list with bullets next to the list items. The opening tag is <UL>, and the closing tag is.....yep, you guessed it...</UL>. Now, to set off each item in your list, you use the <LI> tag, followed by your text. Here is a sample list with two list items:
<UL>
<LI>I am item one
<LI>I am item two
</UL>
This will give us the bulleted list below:
- I am item one
- I am item two
Notice the <LI> tags do not require a closing tag. Also, the list is indented somewhat from the rest of the text. You can indent further by adding more <UL> tags, as long as you remember to close every one of them. Here is a sample of indenting further into the page:
<UL>
<UL>
<UL>
<LI>I am item one
<LI>I am item two
</UL>
</UL>
</UL>
This will give us the following indented list:
-
-
- I am item one
- I am item two
-
Be careful about using the <CENTER> tag around your lists. If each list item is not the same length, you will get more of a mess than a straight list:
- This is item one, how nice it is to be number one.
- Item two is much shorter!
- Item three is somewhere in between..
If you really need the list further in on the page, use the indention method above until it hits the center of the screen (this can mess up in different screen resolutions, though), or you can try using a Table to align the text instead.
You can also use an ordered list in the same way you use the unordered list. Instead of using <UL> </UL>, you would use <OL> </OL>, like this:
<OL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</OL>
This gives you a numbered list rather than the bulleted list:
- Item 1
- Item 2
- Item 3
Well, that does it for HTML lists, so lets go on to the next section: Using the Body Tag Attributes.
Using BODY Tag Attributes
How to use body tag attributes to enhance your page| Home | HTML | Beginner | Advanced | List |
When you create a web page, you can change serveral things in the body of your document by adding extra commands to the <BODY> tag. Here is what a body tag with serveral additions would look like:
<BODY bgcolor="black" text="red" link="yellow" alink="orange" vlink="white" background="image.gif">
Pretty long tag, isn't it? Well, you can use as many or as few of these add-ons as you wish. The options you don't use will be set to the web browser's default values. Below is a brief explaination of each attribute, with a link to the tutorial for each one. (If you are moving through the tutorials in order, we will eventually get to each one of these.) So here we go....
bgcolor="color" Tutorial-Using a Background Color
This changes the background color of your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting varies with your browser, but is usually gray or white.
text="color" Tutorial-Changing the Default Text Color
This changes the default text color the browser will display on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for text color is black.
link="color" Tutorial-Changing the Link Color
This changes the color of all of the non-visited links on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for a non-visited link is usually blue.
alink="color" Tutorial-Changing the Link Color
This changes the color of an active link on your page, which is a link that has just been clicked on by a user's mouse. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here.
vlink="color" Tutorial-Changing the Link Color
This changes the color of a visited link on your page. You can set this to any color you would like to use. Just replace color above with a color name or hex code. For a list of common colors and hex codes, click here. The default setting for a visited link is usually violet.
background="image.gif" Tutorial-Using a Background Image
This adds a background image to your page. If you use this attribute, the background image will take the place of any background color you may have specified. If you don't use a background image, the browser will use your background color or its default background color.
Okay, now you will be prepared for the next series of tutorials (which are the ones listed for the attributes above). So let's move on to Changing the Default Text Color.
