| <HR> | Inserts a horizontal rule. |
| <HR size=5> | Makes the line 5 pixels thick (Pixels are graphical measurments). Try any number in place of the five and see what you get. |
| <HR noshade=on> | Makes the line solid, not three-dimensional. |
| <HR align=center> | This centers the line on the page. Left or right will margin the line to the left side or the right side. |
| <HR width=50%> | Makes the line 50% of the page width. Use any percentage up to 100% to adjust the line. |
Blockquotes
This formatting style produces text that resembles a quotation and is interpreted by most browsers as italicized text. The text will also be indented like a quotation. The tags for blockquote text are <BQ> and </BQ>. one additional enhancement is the <CREDIT> and </CREDIT> tag which can be used within the blockquote to give credit for the quotation. An example of the< blockquote> and <credit> tags use are shown here.
BLOCKQUOTE EXAMPLE IN HTML
<BQ><BR>
BLOCKQUOTE EXAMPLE ON SCREEN
This layout is created by using the <PRE> and </PRE> tags so that any text that appears between is said to be preformatted. What this means is that whatever the format (Indents, paragraphs, spacing, breaks etc.) that existed in the text will be preserved. Sounds great doesn't it! The only problem is that the font and style changes to Courier, a monospaced font which resembles typewritten text. If this is OK, use preformatted text, but if you need to keep a consistent look to your text, you may not want to use preformatted text. There are also other ways to format text such as lists and tables which are covered in the next section. What you see below is an example of preformatted text.
PREFORMATTED TEXT EXAMPLE IN HTML
PREFORMATTED TEXT EXAMPLE ON SCREEN
As you can see, the actual spaces and lines that were formatted in the original document were retained in the HTML version and the text was changed to a monospaced font.
There are a number of other ways to format text that will be useful in designing your pages. the first of these is creating lists. Lists, whether they are numbered, bulleted or resemble glossary entries are quite common in web pages and can be used in instructional pages to list topics, outline, provide menu choices, or create glossaries. They are reasonably easy to create and can give your pages a very professional appearance.
There is a simple set of HTML tags that you use to build lists. The first two are the unordered list tags, <UL> and </UL> which create bulleted lists (you donŐt have to insert the bullets), and the ordered list tags, <OL> and </OL> which create numbered lists (you donŐt have to insert the numbers). Each item in either of the lists starts with the same tag, the list item tag, <LI>. There is no closing tag for list items. examples of unordered and ordered lists are shown below.
UNORDERED LIST EXAMPLE IN HTML
<UL>
UNORDERED LIST EXAMPLE ON SCREEN
ORDERED LIST EXAMPLE IN HTML
<OL>
ORDERED LIST EXAMPLE ON SCREEN
The third really useful type of list is the dictionary or definition list. This set of HTML tags allows you to set up glossary type lists. They consist of three tags, the dictionary list tag pair, <DL> and </DL> which begins and ends a dictionary list, and two different tags for the items. These tags are the dictionary term tag <DT> (no closing tag required) and the dictionary definition tag <DD> (no closing tag required. The example shows how all of these work and how the list appears on the page.
DICTIONARY LIST EXAMPLE IN HTML
<DL>
<DT> This is the first term to be defined.
DICTIONARY LIST EXAMPLE ON SCREEN
HTML also includes other list formats such as <MENU> and <DIR> for directory, but for most of these you can use ordered or unordered lists and not see any difference.
The last, and probably most complicated formatting tag is the <TABLE> tag and it's associated tags and attributes. tables are just that, grids that contain information. You can use tables with the grid lines showing to show a table of data, or you can set the gridlines to 0 (None) and use the table as a means of formatting text in different ways. For example look at the text in the table formatting example below. you wouldn't think it was a table since it just appears to be laid out in a different manner, but in the second example you can see that it is just a simple table in which some of the cells are empty.
TABLE FORMATTING EXAMPLE WITH BORDERS:
This might be an additional paragraph of text related to the second
heading. It can go on and on. In conclusion, there are a lot of really unique layout options available
with tables.
NOW WITHOUT BORDERS:
This might be an additional paragraph of text related to the second
heading. It can go on and on. In conclusion, there are a lot of really unique layout options available
with tables.
Writing HTML to set up a table is a bit complicated, but certainly not difficult if you first sketch out the format and determine what text goes into what cells of the table. Once you have done this the various table tags are easier to write. If you don't preplan a table on paper you will have a confusing time of it. I generally like to use an HTML editor or authoring tool to do tables quickly and with less fuss (as you will see later) but simple tables are do-able with plain HTML.
The HTML tags for tables are <TABLE> and </TABLE> which appear at the beginning and end of the table. In between, there are three or four other tags which include <TR> for table rows, <TH> for table head labels, and <TD> for table cell data. Each of these tags defines a specific part of the table and can be written in on the paper draft of your table as you plan it. For purposes of explanation, the roles of each tag are clearer if you see an actual table and it's corresponding markup code. This is a case where it is easier to show you than explain. See the example below!
SAMPLE TABLE HTML TAGS
<TABLE border=3>
<TR><TH>TEST ONE</TH><TH>TEST TWO</TH><TH>TEST THREE</TH>
<TR><TD>98</TD><TD>89</TD><TD>92</TD>
<TR><TD>78</TD><TD>86</TD><TD>88</TD>
<TR><TD>82</TD><TD>90</TD><TD>91</TD>
</TABLE>
SAMPLE TABLE SCREEN DISPLAY
As you can see, the various tags specify where table rows and cell data are displayed. There are three other tags which may be of help as well. These are the table caption tags <CAPTION>< </CAPTION> which allow you to specify a caption for your table and two <TABLE> tag attributes which enable you to display the gridlines (or not) and to provide more space around the text in cells. These are the <TABLE border=1to 10> which allows you to specify the thickness of the table gridlines (0 is invisible) and <TABLE cellpadding=1 to 20> which sets the amount of space (padding) around text. Actually these numbers can be made even larger, but the suggested ranges work well most of the time. Be creative, experiment.
The fact that tables without gridlines are a handy way to format text should be pretty obvious now. To do this, first lay out the table on paper and determine what data goes in what cells (or not). Remember, whole paragraphs can fit into cells, because HTML just keeps expanding the cell to hold everything included in it. Look at the earlier example and you can see what I mean. There are no rules for doing this, but sometimes it allows you to do just the right type of page formatting. In fact, some web pages are all just one or two tables. You can actually put pictures into table cells as well.
Saving HTML documents is really quite simple. Since you have been doing the writing part using some type of word processor, it would seem that all you need to do is "save" the document. This is almost right, but the only differences are that you must give it a name that can be identified as an HTML document and also that you save it in a file format that can be read by any browser.
First, when you save the document, add the characters .html (for Macintosh users) or .htm (for Windows/DOS users) to the end of whatever name you want to use. Of course, keep the name short (Windows/DOS users in particular) and meaningful. Always append the .html or .htm suffix or it will not be recognized by browsers as an HTML document.
The second requirement is that you save the file as either plain text (Text Only) or ASCII format. When you click save, a dialog box will appear in most word processors and one of the selections you must make is for the file format. Usually you just save as the file format that the word processor defaults to, but in the case of HTML, you must select either Text Only or ASCII. OK, OK, ASCII stands for American Standard Code for Information Interchange which is a generic format that all computers can understand. by using Text Only or ASCII (they're the same) you can have your HTML read by any browser that encounters your web page.
Once you have saved your HTML document as Some Name.html (or .htm) and in ASCII or Text Only, you can close your word processor and open your browser (Netscape, Internet Explorer etc.). Pull down the FILE menu and select either "Open File" or "Open Page". When you get a dialog box, find your document and open it. Your page should appear just as you planned it. If that doesn't happen, go back and open it in the word processor , change or correct it, and re-save it. Then check it again with your browser.
Now that you have learned a good deal of text related HTML it time to do some work on your own. Fire up your word processor of choice and have at it. Try out some of your HTML by creating a page and adding text. Experiment with different text formatting techniques and layout devices such as horizontal rules. Also don't forget to try using tag attributes to specify how different tags work. When you have created a few pages, come back here and we will look at how images can be added to your pages with HTML.
To be, or not to be,<BR>
that is the question-<BR>
Whether 'tis nobler in the mind to suffer<BR>
The slings and arrows of outrageous fortune,<BR>
Or to take arms against a sea of troubles,<BR>
And by opposing end them.<BR>
<CREDIT>---Hamlet</CREDIT>
</BQ>
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing end them.
Preformatted text
<PRE> CLASS GRADE ROSTER FOR MAY
Bob 98 89 97 96
Sal 78 88 90 92
Joan 89 81 89 90
Barb 99 97 98 93
CLASS GRADE ROSTER FOR MAY
Bob 98 89 97 96
Sal 78 88 90 92
Joan 89 81 89 90
Barb 99 97 98 93
FORMATTING LISTS AND TABLES
Lists
There are five items on this list.
<LI>This is the first item.
<LI>This is the second item.
<LI>This is the third item.
<LI>This is the fourth item.
<LI>Can you guess which item this is?
</UL>
There are five items on this list.
There are five numbered items on this list.
<LI>This is item number one.
<LI>This is item number two
<LI>This is item number three.
<LI>This is item number four.
<LI>Can you guess which numbered item this is?
</OL>
There are five numbered items on this list.
This can be the stem or heading or title for the list such as GLOSSARY <P>
<DD> This is the definition of the first term.
<DT> This is the second term to be defined.
<DD> This is the definition of the second term.
<DT> This is the third term to be defined.
<DD> This is the definition of the third term.
</DL>
This can be the stem or heading or title for the list such as GLOSSARY
Tables
This might be a number.
This cell might be used for a heading.
This cell may contain text, and lots of it. You can go on and on and
the cell will just grow larger to accomodate the text.
This is another number.
A different heading.
A lot of text related to the second heading.
This might be a number.
This cell might be used for a heading.
This cell may contain text, and lots of it. You can go on and on and
the cell will just grow larger to accomodate the text.
This is another number.
A different heading.
A lot of text related to the second heading.
Setting up a table
TEST ONE TEST TWO TEST THREE
98 89 92
78 86 88
82 90 91
SAVING HTML DOCUMENTS
Filenames
File formats
Viewing your page
ITS TIME FOR YOU TO MAKE A PAGE
