HTML Basics Part 2

	Sign In Sign-Up

HTML Basics

HTML Basics Part 2
Headings, Line, and Paragraph Breaks
Now that you understand the basic structure of a Web page, you can focus on formatting your text to make it more attractive and better-organized.
We'll start off by learning about three new tags: the line-break tag, paragraph tag, and heading tag.
As mentioned in the previous exercise, all text formatting, even a simple line break (where text is forced to begin on a new line) is accomplished with tags.
Browsers ignore any text formatting done with your HTML editor.
We're going to make some modifications to our original sample Web page to see how these three new tags work.
First open the page you created in the last exercise in your text editor or word processor and update the file as follows:
<.HTML>*** <.HEAD> <.TITLE>My First Web Page<./TITLE> <./HEAD> <.BODY> Welcome to my first Web page! <.P> This is my first experience with HTML and Web page design.
I hope you enjoy it.
This page will demonstrate what I've learned from the HTML Tutorial. <./BODY> <./HTML>
Notice we've added one new tag, <.p>. This is the paragraph tag, and it tells the browser the text that follows should appear in a new paragraph.
We could have added the closing tag, <./p>, at the end of the paragraph, but in practice, it's not necessary, and very few Web designers do it.
Save the file and load it into your browser to see what happens.
Notice there's a space separating the first line of text from the second.
Try deleting this tag, saving the file, and reloading it.
Do you see how the browser interprets all the text as being in the same paragraph?
Put the <.p> tag back and resave the file.
Try resizing the browser window by making it narrower or wider, and see how the paragraph text is automatically reformatted to fit the browser window.
Now we'll add some more text and learn about the line-break tag, <.br>. The line-break tag will force the text that follows it to begin on the next line.
To see it in action, update the body section of your Web page as follows:
<.BODY> Welcome to my first Web page! <.P> This is my first experience with HTML and Web page design.
I hope you enjoy it.
This page will demonstrate what I've learned from the AOL HTML Tutorial. <.P> This is what you will need to create your own Web pages: <.BR> A text editor or word processor <.BR> A Web browser <.BR> The AOL HTML Tutorial <./BODY>
Notice we've added an additional paragraph ("This is what you will need ...") followed by a line break that forces the list of items to begin on the next line.
Each item is positioned on a separate line by using additional line-break tags.
Save the file and load it into your browser to see the results of this formatting.
Our sample page is beginning to shape up, but it's still rather boring.
We'll need to add additional text formatting to enhance its appearance and lend some organization to the text.
To begin, we'll apply a new tag to our page, the heading tag.
The proper use of the heading tag will make your page more appealing to the eye and easier to read.

HTML has six levels of headings: <.h1> (the largest), <.h2>, <.h3>, <.h4>, <.h5>, and <.h6> (the smallest).
To see how the heading tag works, change the first line of the body text as follows: <.H1>Welcome to my first Web page!<./H1>
Save the HTML file and reload it into your browser.
Notice how the line of text now displays much larger and bolder than the remaining text.

Experiment with the rest of the heading sizes by changing the <.h1> to <.h2>, and so on with the remaining sizes.
Remember also to change the <./h1> closing tag, or all the remaining text will display at this larger size.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
Text Formatting - Center, Blockquote
The default format for all elements (text or graphics) in HTML is left alignment.
There will be times when we may want to have text appear centered on the page.
To accomplish this, we use the <.center> tag.
Make the following change to your sample change to see how it works:

<.CENTER>*** <.H1>Welcome to my first Web page!<./H1> <./CENTER>
This tag tells the browser to display the heading "Welcome to my first Web page!" at the center of the browser window.
Go ahead and update your sample page, save it, and reload it in your browser.
Resize the browser window by making it narrower or wider and see how the heading is repositioned to automatically display in the center of the window.
There will be times when you want to indent some text to set it apart from the other text.
Quotations are a good example of when to indent text.
Whenever you wish to indent text, you'd use the <.blockquote> tag.
For example, view the sample Web page you've created, then look at the following section of HTML:

This is what you'll need to create your own Web pages: <.BR> A text editor or word processor <.BR> A Web browser <.BR> The HTML Tutorial
Let's make the list of three items stand out a bit more by modifying the section of HTML above as follows:
This is what you'll need to create your own Web pages: <.BLOCKQUOTE> A text editor or word processor <.BR> A Web browser <.BR> The HTML Tutorial <./BLOCKQUOTE>
Notice we removed the <.br> tag below the first line and replaced it with the <.blockquote> tag.
Then the tag was closed by inserting <./blockquote> at the end of the list.
Save your changes and see how this new tag improves the page's appearance.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents.
For example: use and not <.tag>.
Text Styles - Bold, Underlined, Italic
The next three tags we'll learn about are used to change the appearance of single letters, words, sentences, or paragraphs of text.
We'll begin with the bold tag, <.b>***, to add emphasis to certain portions of the text.
Make the following changes to the body text in your Web page:

<.B>This is what you will need to build Web pages:<./B>
Save your file and view it in your browser.
Notice the line "This is what ..." now appears bold.
Whatever text you enclose within the <.b> and <./b> tags will be displayed bold in the browser window.
Make sure you always close the <.b> tag with the <./b> tag, otherwise, you wind up formatting text you didn't intend to and the page will look rather sloppy.
The underline and italic tags are used in the same manner as the bold tag.
Add the following to your body text right under the line "The HTML Tutorial" to demonstrate all three text styles:
<.B>Here are the three text style tags I have learned:<./B> <.BLOCKQUOTE> This is <.B>bold<./B> text <.BR> This is <.U>underline<./U> text <.BR> This is <.I>italic<./I> text <./BLOCKQUOTE>
Be sure to copy it exactly as it appears above.
Save the file and view the changes you've made.
Your page should now be beginning to take shape.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials.
Omit the period in your own html documents.
For example: use and not <.tag>.

Font Tags - Font color, Font face : FONT FAQ
In the previous exercise, we learned how to change the appearance of text by modifying its style (making it bold, italicized, or underlined).
Well-designed Web pages need more than this, however, to attract the viewer's eyes and make the text more readable.
The tag that lets our designs reach this next level is the <.font>*** tag.
With this tag, we can change the size, color, and font face of the text adding emphasis, clarity, and organization to our Web pages.

The structure of the <.font> tag is more complex than the ones we've used so far.
In addition to the name of the tag, you'll supply a parameter and value to indicate what font attribute is to be modified.
The font parameters we'll cover here are size, color, and face.
The structure of the font tag is as follows:
<.FONT PARAMATER ="value">
To change the size of the font, for example, we would replace the word parameter with the word size.
Then we would need to indicate the desired size of the text by replacing the word value with a number.
Browsers are designed to display one of seven different font sizes beginning with size 1 as the smallest and ending with 7 as the largest.
The default size of text in all browsers is 3, so all the text you have seen in our example page (with the exception of the heading) has been size 3.
Let's take a look at what all the remaining sizes look like.
Copy the following HTML into your page after the code from the previous exercise:
<.FONT SIZE="1">This is font size 1<./FONT><.BR> <.FONT SIZE="2">This is font size 2<./FONT><.BR> <.FONT SIZE="3">This is font size 3<./FONT><.BR> <.FONT SIZE="4">This is font size 4<./FONT><.BR> <.FONT SIZE="5">This is font size 5<./FONT><.BR> <.FONT SIZE="6">This is font size 6<./FONT><.BR> <.FONT SIZE="7">This is font size 7<./FONT><.BR>
Save your page and load it into your browser.
These seven font sizes are set by the browser.
You can change the font size of any text on your Web page using this tag.
There may be times when you'll want to change the color of text, which is black by default.
You can do this easily with the color parameter of the font tag.
The value of the color parameter can either be the color name or the six-digit hexadecimal value that specifies the RGB (red, green, blue) values of the color.
The following table shows some basic colors and their corresponding RGB values:
RED - FF0000 PINK - FFC0CB MAROON - 800000 VIOLET - EE82EE PURPLE - 800080 GREEN - 008000 LIME - 00FF00 BLUE - 0000FF YELLOW - FFFF00 ORANGE - FFA500 GOLD - FFD700 CYAN/AQUA - 00FFFF BROWN - A52A2A WHITE - FFFFFF BLACK - 000000
Better color chart Color Chart Here
Enter the following HTML code into your sample page to see how to use the color parameter:
<.P> This is an example of <.FONT COLOR="red">red text.<./FONT><.BR> This is an example of <.FONT COLOR="00FF00">green text.<./FONT>
Here we have used the color name to specify the color of the red text and the RGB value to specify the color of the green text.
It's better to get in the habit of using the RGB values instead of the color names.
You can find a table of the most common colors to use here:
PSP Color Chart.
(While the information listed here is for Paint Shop Pro, it applies to all programs.)
The last font parameter is font face.
HTML lets you use any of the fonts that reside on your computer in your Web page.
Keep in mind, however, that not everyone has the same fonts installed on their computer system as you do.
If the computer that accesses your Web page doesn't have the font you specified, the browser will substitute the default font, and the page may not look as you intended.
There are ways to avoid this problem, and we'll discuss them later on.
For now, let's try out this new tag.
If you're using a Windows-based computer, add the following code to your sample Web page:
<.P>
<.FONT FACE="Arial">The font tag can be used to display the Arial font face.<./FONT>
Notice we're using the same structure as the size and color parameters.
Here, face is the parameter and either Arial or Helvetica is the value.
Note: When using the face parameter, you must type the name of the font exactly as it appears in the font menu of your computer.
To get around the problem of differences in viewers' installed fonts, the font tag will let you include a list of several possible fonts for the browser to use.
The browser will check each font face, starting from the left, and use the first one the computer system has installed.
This powerful feature will let you design one page that will look good on any computer platform.
For example, we know the face Arial is installed on just about every Windows computer.
We also know that similar-looking Helvetica face is installed on most Macs.
We can combine the two examples from above as follows:
<.P>
<.FONT FACE="Arial,Helvetica">This text will look similar on both Macintosh and Windows computers.<./FONT>
Instead of coding our pages for different computer systems, we can use this one line for both the Mac and Windows computer.
When a browser reads this line of HTML code, it will first check to see if the font Arial is installed on the computer.
If not, it will the check for Helvetica.
You can add additional fonts to this list -- just be certain to separate their names with a comma.
Any of the above font parameters can be combined together in one tag as illustrated in the following example:
<.FONT SIZE=3 FACE="Arial,Helvetica" COLOR="blue">
Just be certain to place a space in between each parameter.
FONT FAQ
***We add a period to HTML tags between the < and tag name to show the code in these tutorials.
Omit the period in your own html documents.
For example: use and not <.tag>.

Organizing Your Data with Lists
We often take for granted the power of lists to help us organize tasks and simplify written communication.
Laundry, shopping, and to-do lists are three examples of how we use them in our day-to-day tasks.
HTML provides three kinds of lists to help us better organize the Web page data: ordered lists, unordered lists, and definition lists.
Lets take a look at each of these to make sense of what they offer us.

First begin by creating a new Web page. We'll need two different Web pages for the hyperlink exercise later in this tutorial, so this would be a good time to build a new page.
Create a new document in your text editor or word processor and enter the following HTML:
<.HTML>*** <.HEAD> <.TITLE>My Second Web Page<./TITLE> <./HEAD> <.BODY> <.H1>Using additional HTML Tags<./H1> <./BODY> <./HTML>
Name the file mypage2.html and save it to your hard drive. You'll be adding to this page in the following exercises.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials.
Omit the period in your own html documents.
For example: use and not <.tag>.
Ordered lists
Ordered lists are sometimes called numbered lists because the browser sequentially numbers each item in the list.
You'll use two different tags to create an ordered list, the <.ol>*** (ordered list) tag, which will contain all the items of the list, and the <.li> (list item) tag, for each item in the list.
For our exercise, we'll assume we need to create a list of the days of the week.
Enter the following text just below the page heading ("Using additional �"):

<.P> <.B>AN ORDERED LIST:<./B> <.P> The days of the week: <.OL> <.LI>Sunday <.LI>Monday <.LI>Tuesday <.LI>Wednesday <.LI>Thursday <.LI>Friday <.LI>Saturday <./OL>
Be certain you include the closing tag, <./ol>, or the browser will continue to add whatever text follows "Saturday" to the seventh element of the list.
Save your Web page and load it in your browser.
Notice how each day is numbered, and the list is indented slightly, adding to the clarity and organization of the data.
You can have the list numbered in Roman numerals by changing the <.ol> tag to <.ol type="I">.
In this example, "type" is the parameter, and the letter "I" is the value.
Using a capital "I" will display capital Roman numerals, and using a lowercased "I" will display lowercased Roman numerals.
You can also have the list "numbered" with the letters of the alphabet by using either "A" or "a" as the type.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials.
Omit the period in your own html documents.
For example: use and not <.tag>. Unordered Lists
Unordered lists are also called bulleted lists.
When the items of the list are displayed, the browser will include a bullet element before each item.
Unordered lists begin with the <.ul>*** tag and end with the <./ul>. Each item within this container begins with the <.li> tag.
Notice this is similar to the ordered list above.
The following example demonstrates the proper structure of an unordered list:
<.P> <.B>AN ORDERED LIST:<./B> <.P> Some of my favorite Websites: <.UL> <.LI>AOL <.LI>Yahoo <.LI>Netguide <.LI>ABC News <.LI>CD Now <./UL>
Add this code to your sample page, after the ordered list code from the previous exercise, and see how it appears in your browser.
Notice how the browser inserts small bullets before each item.
You can change the type of bullet by using the type parameter.
Change the <.ul> tag in the exercise above as follows:
<.UL TYPE="square">
The bullet graphic will then be a small square.
Try changing the value "square" to "circle."
The browser will display a small hollow circle for a bullet.
The last value for the type parameter is "disc," which is the same as the default bullet (when no type is specified).
***We add a period to HTML tags between the < and tag name to show the code in these tutorials.
Omit the period in your own html documents.
For example: use and not <.tag>.
Dividing Up the Page with Horizontal Rules
HTML provides a very simple way to add sections to your Web page -- sort of like a visual punctuation -- without the use of graphics.
Wherever you place the <.hr>*** tag in your HTML code, the browser will insert a horizontal rule.
Like the font tag, the hr tag can contain several parameters.
These are size, width, align, and noshade.
The size parameter refers to the height of the line in pixels.
When size isn't indicated, it defaults to a 2-pixel height.
The WIDTH parameter refers to the width of the line in pixels.
When no WIDTH is indicated the Horizontal rule will be the width of the Web page.
The align parameter determines whether the horizontal rule is left, center, or right aligned on the Web page.
The noshade parameter will make the rule appear as a solid line with no shading.
Add the following line to your new sample page inbetween the order list and unordered list code from the above exercises:
<.HR >
Save the file and view it in your browser.
Notice how the horizontal rule provides a clean division between the two items on the page.
Make the following change to the horizontal rule and view the results:
<.HR WIDTH=300>
The rule should now narrow the width of the page.
Next try modifying the line as follows:
<.HR WIDTH=300 SIZE=8>
This change will make the rule appear thicker.
Finally add the last parameter, no shade, to the horizontal rule as follows:
<.HR WIDTH=300 SIZE=8 NOSHADE>
The rule will now appear as a solid gray bar.
You will most often use horizontal rules to create logical divisions, and thus provide visual cues to the viewer to see how the information on your pages is organized.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials.
Omit the period in your own html documents.
For example: use and not <.tag>.

Top of page

HTML Basics Part 2 Headings, Line, and Paragraph Breaks Now that you understand the basic structure of a Web page, you can focus on formatting your text to make it more attractive and better-organized. We'll start off by learning about three new tags: the line-break tag, paragraph tag, and heading tag. As mentioned in the previous exercise, all text formatting, even a simple line break (where text is forced to begin on a new line) is accomplished with tags. Browsers ignore any text formatting done with your HTML editor. We're going to make some modifications to our original sample Web page to see how these three new tags work. First open the page you created in the last exercise in your text editor or word processor and update the file as follows: <.HTML>* <.HEAD> <.TITLE>My First Web Page<./TITLE> <./HEAD> <.BODY> Welcome to my first Web page! <.P> This is my first experience with HTML and Web page design. I hope you enjoy it. This page will demonstrate what I've learned from the HTML Tutorial. <./BODY> <./HTML> Notice we've added one new tag, <.p>. This is the paragraph tag, and it tells the browser the text that follows should appear in a new paragraph. We could have added the closing tag, <./p>, at the end of the paragraph, but in practice, it's not necessary, and very few Web designers do it. Save the file and load it into your browser to see what happens. Notice there's a space separating the first line of text from the second. Try deleting this tag, saving the file, and reloading it. Do you see how the browser interprets all the text as being in the same paragraph? Put the <.p> tag back and resave the file. Try resizing the browser window by making it narrower or wider, and see how the paragraph text is automatically reformatted to fit the browser window. Now we'll add some more text and learn about the line-break tag, <.br>.** The line-break tag will force the text that follows it to begin on the next line. To see it in action, update the body section of your Web page as follows: <.BODY> Welcome to my first Web page! <.P> This is my first experience with HTML and Web page design. I hope you enjoy it. This page will demonstrate what I've learned from the AOL HTML Tutorial. <.P> This is what you will need to create your own Web pages: <.BR> A text editor or word processor <.BR> A Web browser <.BR> The AOL HTML Tutorial <./BODY> Notice we've added an additional paragraph ("This is what you will need ...") followed by a line break that forces the list of items to begin on the next line. Each item is positioned on a separate line by using additional line-break tags. Save the file and load it into your browser to see the results of this formatting. Our sample page is beginning to shape up, but it's still rather boring. We'll need to add additional text formatting to enhance its appearance and lend some organization to the text. To begin, we'll apply a new tag to our page, the heading tag. The proper use of the heading tag will make your page more appealing to the eye and easier to read.
HTML has six levels of headings: <.h1> (the largest), <.h2>, <.h3>, <.h4>, <.h5>, and <.h6> (the smallest). To see how the heading tag works, change the first line of the body text as follows: <.H1>Welcome to my first Web page!<./H1> Save the HTML file and reload it into your browser. Notice how the line of text now displays much larger and bolder than the remaining text.
Experiment with the rest of the heading sizes by changing the <.h1> to <.h2>, and so on with the remaining sizes. Remember also to change the <./h1> closing tag, or all the remaining text will display at this larger size. ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
Text Formatting - Center, Blockquote The default format for all elements (text or graphics) in HTML is left alignment. There will be times when we may want to have text appear centered on the page. To accomplish this, we use the <.center> tag. Make the following change to your sample change to see how it works:
<.CENTER>* <.H1>Welcome to my first Web page!<./H1> <./CENTER> This tag tells the browser to display the heading "Welcome to my first Web page!" at the center of the browser window. Go ahead and update your sample page, save it, and reload it in your browser. Resize the browser window by making it narrower or wider and see how the heading is repositioned to automatically display in the center of the window. There will be times when you want to indent some text to set it apart from the other text. Quotations are a good example of when to indent text. Whenever you wish to indent text, you'd use the <.blockquote> tag. For example, view the sample Web page you've created, then look at the following section of HTML: This is what you'll need to create your own Web pages: <.BR> A text editor or word processor <.BR> A Web browser <.BR> The HTML Tutorial Let's make the list of three items stand out a bit more by modifying the section of HTML above as follows: This is what you'll need to create your own Web pages: <.BLOCKQUOTE> A text editor or word processor <.BR> A Web browser <.BR> The HTML Tutorial <./BLOCKQUOTE> Notice we removed the <.br> tag below the first line and replaced it with the <.blockquote> tag. Then the tag was closed by inserting <./blockquote> at the end of the list. Save your changes and see how this new tag improves the page's appearance. *We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
Text Styles - Bold, Underlined, Italic The next three tags we'll learn about are used to change the appearance of single letters, words, sentences, or paragraphs of text. We'll begin with the bold tag, <.b>,* to add emphasis to certain portions of the text. Make the following changes to the body text in your Web page:
<.B>This is what you will need to build Web pages:<./B> Save your file and view it in your browser. Notice the line "This is what ..." now appears bold. Whatever text you enclose within the <.b> and <./b> tags will be displayed bold in the browser window. Make sure you always close the <.b> tag with the <./b> tag, otherwise, you wind up formatting text you didn't intend to and the page will look rather sloppy. The underline and italic tags are used in the same manner as the bold tag. Add the following to your body text right under the line "The HTML Tutorial" to demonstrate all three text styles: <.B>Here are the three text style tags I have learned:<./B> <.BLOCKQUOTE> This is <.B>bold<./B> text <.BR> This is <.U>underline<./U> text <.BR> This is <.I>italic<./I> text <./BLOCKQUOTE> Be sure to copy it exactly as it appears above. Save the file and view the changes you've made. Your page should now be beginning to take shape. ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
Font Tags - Font color, Font face : FONT FAQ In the previous exercise, we learned how to change the appearance of text by modifying its style (making it bold, italicized, or underlined). Well-designed Web pages need more than this, however, to attract the viewer's eyes and make the text more readable. The tag that lets our designs reach this next level is the <.font>*** tag. With this tag, we can change the size, color, and font face of the text adding emphasis, clarity, and organization to our Web pages.
The structure of the <.font> tag is more complex than the ones we've used so far. In addition to the name of the tag, you'll supply a parameter and value to indicate what font attribute is to be modified. The font parameters we'll cover here are size, color, and face. The structure of the font tag is as follows: <.FONT PARAMATER ="value"> To change the size of the font, for example, we would replace the word parameter with the word size. Then we would need to indicate the desired size of the text by replacing the word value with a number. Browsers are designed to display one of seven different font sizes beginning with size 1 as the smallest and ending with 7 as the largest. The default size of text in all browsers is 3, so all the text you have seen in our example page (with the exception of the heading) has been size 3. Let's take a look at what all the remaining sizes look like. Copy the following HTML into your page after the code from the previous exercise: <.FONT SIZE="1">This is font size 1<./FONT><.BR> <.FONT SIZE="2">This is font size 2<./FONT><.BR> <.FONT SIZE="3">This is font size 3<./FONT><.BR> <.FONT SIZE="4">This is font size 4<./FONT><.BR> <.FONT SIZE="5">This is font size 5<./FONT><.BR> <.FONT SIZE="6">This is font size 6<./FONT><.BR> <.FONT SIZE="7">This is font size 7<./FONT><.BR> Save your page and load it into your browser. These seven font sizes are set by the browser. You can change the font size of any text on your Web page using this tag. There may be times when you'll want to change the color of text, which is black by default. You can do this easily with the color parameter of the font tag. The value of the color parameter can either be the color name or the six-digit hexadecimal value that specifies the RGB (red, green, blue) values of the color. The following table shows some basic colors and their corresponding RGB values: RED - FF0000 PINK - FFC0CB MAROON - 800000 VIOLET - EE82EE PURPLE - 800080 GREEN - 008000 LIME - 00FF00 BLUE - 0000FF YELLOW - FFFF00 ORANGE - FFA500 GOLD - FFD700 CYAN/AQUA - 00FFFF BROWN - A52A2A WHITE - FFFFFF BLACK - 000000 Better color chart Color Chart Here Enter the following HTML code into your sample page to see how to use the color parameter: <.P> This is an example of <.FONT COLOR="red">red text.<./FONT><.BR> This is an example of <.FONT COLOR="00FF00">green text.<./FONT> Here we have used the color name to specify the color of the red text and the RGB value to specify the color of the green text. It's better to get in the habit of using the RGB values instead of the color names. You can find a table of the most common colors to use here: PSP Color Chart. (While the information listed here is for Paint Shop Pro, it applies to all programs.) The last font parameter is font face. HTML lets you use any of the fonts that reside on your computer in your Web page. Keep in mind, however, that not everyone has the same fonts installed on their computer system as you do. If the computer that accesses your Web page doesn't have the font you specified, the browser will substitute the default font, and the page may not look as you intended. There are ways to avoid this problem, and we'll discuss them later on. For now, let's try out this new tag. If you're using a Windows-based computer, add the following code to your sample Web page: <.P> <.FONT FACE="Arial">The font tag can be used to display the Arial font face.<./FONT> Notice we're using the same structure as the size and color parameters. Here, face is the parameter and either Arial or Helvetica is the value. Note: When using the face parameter, you must type the name of the font exactly as it appears in the font menu of your computer. To get around the problem of differences in viewers' installed fonts, the font tag will let you include a list of several possible fonts for the browser to use. The browser will check each font face, starting from the left, and use the first one the computer system has installed. This powerful feature will let you design one page that will look good on any computer platform. For example, we know the face Arial is installed on just about every Windows computer. We also know that similar-looking Helvetica face is installed on most Macs. We can combine the two examples from above as follows: <.P> <.FONT FACE="Arial,Helvetica">This text will look similar on both Macintosh and Windows computers.<./FONT> Instead of coding our pages for different computer systems, we can use this one line for both the Mac and Windows computer. When a browser reads this line of HTML code, it will first check to see if the font Arial is installed on the computer. If not, it will the check for Helvetica. You can add additional fonts to this list -- just be certain to separate their names with a comma. Any of the above font parameters can be combined together in one tag as illustrated in the following example: <.FONT SIZE=3 FACE="Arial,Helvetica" COLOR="blue"> Just be certain to place a space in between each parameter. FONT FAQ ***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
Organizing Your Data with Lists We often take for granted the power of lists to help us organize tasks and simplify written communication. Laundry, shopping, and to-do lists are three examples of how we use them in our day-to-day tasks. HTML provides three kinds of lists to help us better organize the Web page data: ordered lists, unordered lists, and definition lists. Lets take a look at each of these to make sense of what they offer us.
First begin by creating a new Web page. We'll need two different Web pages for the hyperlink exercise later in this tutorial, so this would be a good time to build a new page. Create a new document in your text editor or word processor and enter the following HTML: <.HTML>* <.HEAD> <.TITLE>My Second Web Page<./TITLE> <./HEAD> <.BODY> <.H1>Using additional HTML Tags<./H1> <./BODY> <./HTML> Name the file mypage2.html and save it to your hard drive. You'll be adding to this page in the following exercises. We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>. Ordered lists* Ordered lists are sometimes called numbered lists because the browser sequentially numbers each item in the list. You'll use two different tags to create an ordered list, the <.ol>* (ordered list) tag, which will contain all the items of the list, and the <.li> (list item) tag, for each item in the list. For our exercise, we'll assume we need to create a list of the days of the week. Enter the following text just below the page heading ("Using additional �"): <.P> <.B>AN ORDERED LIST:<./B> <.P> The days of the week: <.OL> <.LI>Sunday <.LI>Monday <.LI>Tuesday <.LI>Wednesday <.LI>Thursday <.LI>Friday <.LI>Saturday <./OL> Be certain you include the closing tag, <./ol>, or the browser will continue to add whatever text follows "Saturday" to the seventh element of the list. Save your Web page and load it in your browser. Notice how each day is numbered, and the list is indented slightly, adding to the clarity and organization of the data. You can have the list numbered in Roman numerals by changing the <.ol> tag to <.ol type="I">. In this example, "type" is the parameter, and the letter "I" is the value. Using a capital "I" will display capital Roman numerals, and using a lowercased "I" will display lowercased Roman numerals. You can also have the list "numbered" with the letters of the alphabet by using either "A" or "a" as the type. We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>. Unordered Lists* Unordered lists are also called bulleted lists. When the items of the list are displayed, the browser will include a bullet element before each item. Unordered lists begin with the <.ul>* tag and end with the <./ul>. Each item within this container begins with the <.li> tag. Notice this is similar to the ordered list above. The following example demonstrates the proper structure of an unordered list: <.P> <.B>AN ORDERED LIST:<./B> <.P> Some of my favorite Websites: <.UL> <.LI>AOL <.LI>Yahoo <.LI>Netguide <.LI>ABC News <.LI>CD Now <./UL> Add this code to your sample page, after the ordered list code from the previous exercise, and see how it appears in your browser. Notice how the browser inserts small bullets before each item. You can change the type of bullet by using the type parameter. Change the <.ul> tag in the exercise above as follows: <.UL TYPE="square"> The bullet graphic will then be a small square. Try changing the value "square" to "circle." The browser will display a small hollow circle for a bullet. The last value for the type parameter is "disc," which is the same as the default bullet (when no type is specified). We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>. Dividing Up the Page with Horizontal Rules* HTML provides a very simple way to add sections to your Web page -- sort of like a visual punctuation -- without the use of graphics. Wherever you place the <.hr>* tag in your HTML code, the browser will insert a horizontal rule. Like the font tag, the hr tag can contain several parameters. These are size, width, align, and noshade. The size parameter refers to the height of the line in pixels. When size isn't indicated, it defaults to a 2-pixel height. The WIDTH parameter refers to the width of the line in pixels. When no WIDTH is indicated the Horizontal rule will be the width of the Web page. The align parameter determines whether the horizontal rule is left, center, or right aligned on the Web page. The noshade parameter will make the rule appear as a solid line with no shading. Add the following line to your new sample page inbetween the order list and unordered list code from the above exercises: <.HR > Save the file and view it in your browser. Notice how the horizontal rule provides a clean division between the two items on the page. Make the following change to the horizontal rule and view the results: <.HR WIDTH=300> The rule should now narrow the width of the page. Next try modifying the line as follows: <.HR WIDTH=300 SIZE=8> This change will make the rule appear thicker. Finally add the last parameter, no shade, to the horizontal rule as follows: <.HR WIDTH=300 SIZE=8 NOSHADE> The rule will now appear as a solid gray bar. You will most often use horizontal rules to create logical divisions, and thus provide visual cues to the viewer to see how the information on your pages is organized. *We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.