Mail to: K.K. Montgomery at kmontgom@pegasus.cc.ucf.edu

Internet
Basic HTML for Web Pages




HTML stands for HyperText Markup Language. It consists of the tags and codes used to tell browsers how to display the text and graphics that make up a web page. Because HTML goes across computer platforms, there will be some variation in display between systems. However, HTML allows these different computers to view the same document in approximately the same layout. There are lots of WYSIWYG HTML editors to make the task of web page creation easier, but these may not always give the expected results. A knowledge of the basic HTML tags will allow for more precise control over the look of the web page.

 

 

Basic structure of a web page.

Web pages are text and graphics which have tags around them to specify what is displayed and how it is displayed. Many of the tags have functions similar to those of a word processor. The difference is that the web page may be viewed on different types of computers running a variety of browsers. Standard tags are used as a common language that all of these can understand. However, there is always some difference of interpretation. What you have designed will display a little bit differently on each computer.

Tags usually come in pairs, one to begin a section of text, and another with a slash in it to end the section. Pairs of tags bracket the entire document. Below is the basic layout of all web pages.

 

<HTML>

<HEAD>

<TITLE>Title which appears in the title bar of the browser at the top of the window.</TITLE>

</HEAD>

<BODY>This is where the actual content of the page resides. Other tags will be inserted here to make the text shape itself as desired.

 

 

</BODY>

</HTML>

Back to Top

Tags

Most tags are matched by end tags after the text that is to be affected. If more than one tag is applied to the same text, be careful to nest them from the inside out, e.g.,

         <TAG2><TAG1>text</TAG1></TAG2>.

Do not mix up the order of the nesting, e.g., this is wrong:

         <TAG1><TAG2>text</TAG1></TAG2>.


<HTML></HTML>
Forming the outer brackets for the page, this tells the browser that the type of document is HTML, so that it knows how to handle the information.

<HEAD></HEAD>
This header section of the page does not display, except for the information in the TITLE tag which shows in the window’s title bar. Other tags here provide information for the browser, for indexing services such as Yahoo, or for people who code HTML.

<TITLE></TITLE>
Provides the title at the top of the window in the title bar. This tag is always nested inside the HEAD tag.

<BODY></BODY>
Contains the actual contents of the page.

The = attribute and a hexidecimal code can be inserted here to change the background color of the entire web page, e.g., <BODY ="FFFFCC"></BODY>. If no color is specified, the browser will use whatever default is set on the user's computer. An alternative to solid color is the use of a background image. Insert BACKGROUND= plus the address of the graphic into the BODY tag, e.g., <BODY BACKGROUND="watermark.gif"></BODY>. See the note on addresses under the discussion of the <IMG></IMG> tag.

Back to Top

<H1></H1>
Heading size 1. This is usually used for the title of the page that actually appears in the document. In addition to specifying size, Heading tags specify that the text is bold.

 
<H2></H2>
<H3></H3>
<H4></H4>
<H5></H5>
<H6></H6>
These headings display text progressively smaller as the number gets larger. They are in bold.

<P></P>
Specifies the beginning and end of a paragraph. The end tag (</P>) is not required, but it may be useful to avoid confusion in some circumstances.

<EM></EM>
Emphasizes text. On most browsers this is interpreted as italics. The <I></I> tag is available for this, but is discouraged.

<STRONG></STRONG>
Displays text as bold on most browsers. The <B></B> tag is available for this, but is discouraged.

<FONT></FONT>
Adds special characteristics such as size and color to text. For example, to highlight text by displaying it in a rust color, use <FONT COLOR="#CC6633">text</FONT>. Size can be increased or decreased by specifying a number, e.g., <FONT SIZE=5>text</FONT>. These can be used together, but both should be used sparingly:

         <FONT COLOR="#CC6633" SIZE=5>text</FONT>

The browser renders text in the user's default typeface unless the web page specifies another one. Whatever typeface is chosen must already be loaded on the user's computer. This means that it is best to specify several similar, and commonly available, typefaces. If the first is not found, the browser will look for the next one on the user's computer, e.g., <FONT FACE="trebuchet ms, Arial, Helvetica"></FONT>. Unusual fonts should never be specified. If a font is unavailable, the specification will be ignored.

Back to Top

<BLOCKQUOTE></BLOCKQUOTE>
Places text in an indented paragraph with a blank line above and below.

<CENTER></CENTER>
Center text, images or tables. Place around headings, paragraphs, tables, etc. to center horizontally in the browser window.

<BR>
Line break. Moves the text which follows this to the next line. Do not use the end tag, </BR>.

<HR>
Horizontal Rule. Draws a centered line across the page. Do not use the end tag, </HR>. The thickness of the line may be changed, e.g., <HR SIZE=4>. The width of the horizontal rule may also be changed, either by specifying a width in pixels, e.g., <HR WIDTH=200>, or by percentage of the browser window width, e.g., <HR WIDTH=65%>, or by placing it in a section of text which is narrower than the page, e.g., in a table. The horizontal rule may also be displayed as a solid line, <HR NOSHADE>.

For example, <HR SIZE=4 WIDTH=200> displays as:


<HR NOSHADE WIDTH=30%> displays as:



The bottom rule will change widths as the browser window is resized.

Back to Top

<IMG></IMG>
Image. This tag never appears without an address to tell the browser where the graphic is located. For example, the address for the checkmark used on these pages is <IMG SRC="http://pegasus.cc.ucf.edu/~kmontgom/bullettx.gif"><IMG>.

         

The image may be resized, e.g., <IMG SRC="http://pegasus.cc.ucf.edu/~kmontgom/bullettx.gif" ALT="Checkmark" HEIGHT=40 WIDTH=40></IMG>
         Checkmark

Sometimes that is not a good idea. The attributes of the above <IMG></IMG> tag break out as follows:

  1. the address follows the SRC= attribute and is placed in quotes,
  2. an alternative name (for users who have no graphics available) follows the ALT= attribute and is placed in quotes,
  3. the height of the image is 40 pixels. (This particular image contains some transparent space that is not visible on the screen.)
  4. the width of the image is 40 pixels.

Note: the address of the graphic may be written out in full (http://pegasus.cc.ucf.edu/~kmontgom/bullettx.gif). This is known as an absolute address. Or, if the graphic is on the same directory of the same server as your web page and if your account allows access to it, you may put in a partial address consisting of just the filename, <IMG SRC="bullettx.gif"></IMG> or supplying the directory and filename (for images in another directory). This is known as a relative address.

Be careful not to overuse graphics. Too many can overpower the message.

Back to Top

 

Lists

Lists use special tags to format how the items in the list are displayed. Items may be shown in numbered, bulleted or definition type formats.


Numbered and Bulleted Lists

<OL></OL>
Specifies the beginning and end of a numbered list, otherwise known as an Ordered List.

<UL></UL>
Specifies the beginning and end of a bulleted list, otherwise known as an Unordered List.

<LI></LI>
Surrounds text given as one list item for Ordered or Unordered lists. Each item in the list gets its own set of <LI></LI> tags.


Examples of Ordered and Unordered lists.

HTML for an Ordered List is : Displays as:
<OL>
<LI>Pick up laundry. </LI>
<LI>Go to the bank.</LI>
<LI>Go to the grocery store</LI>
</OL>
  1. Pick up laundry.
  2. Go to the bank.
  3. Go to the grocery store.

HTML for an Unordered List is: Displays as:
<UL>
<LI>Apples</LI>
<LI>Pears</LI>
<LI>Oranges</LI>
</UL>
  • Apples
  • Pears
  • Oranges

 

Back to Top

Definition Lists

<DL></DL>
Specifies the beginning and ending of a Definition List.

<DT></DT>
Surrounds the text given as the Definition Term.

<DD></DD>
Surrounds the text given as the Definition.



Example of a Definition List

HTML for a Definition List is:
<DL>
<DT>Breakfast</DT>
<DD>Meal eaten at the beginning of the day, soon after waking.</DD>
<DT>Lunch</DT>
<DD>Meal eaten in the middle of the day, usually during a break in the workday.</DD>
<DT>Dinner</DT>
<DD>Meal eaten in the evening, usually after coming home from work.</DD>
</DL>

Displays as:
Breakfast
Meal eaten at the beginning of the day, soon after waking.
Lunch
Meal eaten in the middle of the day, usually during a break in the workday.
Dinner
Meal eaten in the evening, usually after coming home from work.

 

Back to Top

 

Tables

HTML tables may look like obvious tables. Or, they may be used to place a color behind paragraphs, to create newspaper-style columns, or to force right, left and centered alignments of text. Tables can be complicated, but they greatly increase control over text and image placement. Special tags are used to create a table, although the tags discussed above may be used to format text within cells.

<TABLE></TABLE>
Specifies the beginning and ending of a table. Attributes of the table which can be set are:
The TABLE tag is used with row and cell tags to define the nested structure of a table.

Back to Top

Rows and Cells

Table sections are dealt with one row at a time, working on cells from left to right.

<TR></TR>
Specifies the beginning and ending of a table row. The = attribute may be added to color entire row. If color is not specified for a row, it will have the color of the table, if any, or of the page background as specified in the BODY tag.

<TH></TH>
Specifies a cell in a table which is to be formatted as a table heading. This usually means that the text is boldfaced. This tag is not used often because the <TD></TD> tag can be used to do the same thing.

<TD></TD>
Specifies a data cell in a table. Each <TD></TD> tag in a single row starts a new column. Various attributes can be added to this tag:

  1. The VALIGN= attribute is used with TOP, MIDDLE, or BOTTOM to specify the vertical placement of the text in a cell, e.g., <TD VALIGN="TOP">text</TD> forces the text to start at the top of the cell.
  2. The ALIGN= attribute is used with LEFT, CENTER, or RIGHT to specify the horizontal placement of the text, e.g., <TD ALIGN="RIGHT">text</TD>.
  3. The = attribute can be used with a code to specify the color of a single cell. Used in the <TD></TD> tag, this will override colors set by row, table or body tags.
  4. ROWSPAN= and COLSPAN= can be used for text which should run across rows or columns. This is similar to merge cells in word processor. E.g., <TD ROWSPAN=2>text</TD> will take up two rows.

Back to Top

Basic Structure of a Table

This is the basic layout of a table. Rows and columns can be added or merged as needed. For the sake of clarity, a border has been added to this example.

<TABLE BORDER>
<TR>
<TD>This text would appear in the 1st row, 1st column of the table</TD><TD>This would be the 1st row, 2nd column</TD>
</TR>
<TR>
<TD>2nd row, 1st column</TD><TD>2nd row, 2nd column</TD>
</TR>
<TR>
<TD COLSPAN=2>This row spans two columns</TD> </TR>
</TABLE>

This displays as:

This text would appear in the 1st row, 1st column of the tableThis would be the 1st row, 2nd column
2nd row, 1st column2nd row, 2nd column
This row spans two columns

Note how the first row is defined with the opening <TR>, followed by the first data cell, <TD>text</TD>, the second data cell of the same row, and finally the closing </TR> tag. Only after this is the second row begun.

Back to Top

Borders

Unless specified, a table has no border. A border can be added by simply inserting the BORDER attribute into the TABLE tag, <TABLE BORDER></TABLE>:

This is a table with the border feature turned on, but no specification made about how thick the border is.


The thickness of the border may be increased, <TABLE BORDER=5></TABLE>:

The border is shaded to give the illusion of depth.


Borders also appear to be thicker when the CELLSPACING attribute is used to increase the distance between cells, <TABLE BORDER CELLSPACING=10></TABLE>:

Note that while the borders are wider, there is not an increase in shading depth as seen above when border size was adjusted.
This gives the table a flatter look.


While the cellspacing attribute spreads text out, it does not give more white space within the cell. To achieve this, use the CELLPADDING attribute, <TABLE BORDER CELLPADDING=15></TABLE>:

This text avoids the crowded look.


Back to Top

Table Width and Height

By default, tables are only as wide as is necessary to display their contents. This can be varied by specifying either the number of pixels fixing a constant width, <TABLE BORDER WIDTH=600></TABLE>:

This table should always be 600 pixels wide, regardless of how big or small the browser window is set.


or the percentage of open window width, <TABLE BORDER WIDTH=60%></TABLE>:

The width of this table should change as the browser window is made more narrow.


Table height may also be controlled in the same manner, <TABLE BORDER HEIGHT=200></TABLE>:

This table is 200 pixels tall.



Back to Top

Examples of Borderless Tables:





1. Hightlight Paragraphs of Text

HTML is:

<TABLE BORDERS=0 BGCOLOR="#FFFFCC" WIDTH=500 CELLPADDING=10>
<TR>
<TD>Web pages are text and graphics which have tags around them to specify what is displayed and how it is displayed. Many of the tags have functions similar to those of a word processor. The difference is that the web page may be viewed on different types of computers running a variety of different browsers. Standard tags are used as a common language that all of these can understand. However, there is always some difference of interpretation. What you have designed will display a little bit differently on each computer.
<P>Tags usually come in pairs, one to begin a section of text, and another with a slash in it to end the section. Pairs of tags bracket the entire document.</TD>
</TR>
</TABLE>


Displays as:

Web pages are text and graphics which have tags around them to specify what is displayed and how it is displayed. Many of the tags have functions similar to those of a word processor. The difference is that the web page may be viewed on different types of computers running a variety of different browsers. Standard tags are used as a common language that al of these can understand. However, there is always some difference of interpretation. What you have designed will display a little bit differently on each computer.

Tags usually come in pairs, one to begin a section of text, and another with a slash in it to end the section. Pairs of tags bracket the entire document.


This table has one row and one cell in that row. A <P> tag is used to begin a new paragraph while still in the same cell. The WIDTH attribute fixes the breadth of the table.



2. Alignment of Text

HTML is:

<TABLE BORDER="0">
<TR>
<TD ALIGN="RIGHT">Red:&nbsp;&nbsp;</TD>
<TD>255</TD>
</TR>
<TR>
<TD ALIGN="RIGHT">Green:&nbsp;&nbsp;</TD>
<TD>255</TD>
</TR>
<TR>
<TD ALIGN="RIGHT">Blue:&nbsp;&nbsp;</TD>
<TD>221</TD>
</TR>
</TABLE>


Displays as:

Red:   255
Green:   255
Blue:   221

The purpose of this table is to force the left column to align at the right. There are three rows with two cells in each row.

Note: &nbsp; forces an extra space into the text. If this is not used, browsers will place only one space between words no matter how many are typed into the HTML.



3. Alternating Colored Rows

HTML is:

<TABLE BORDER="0" CELLPADDING=10>
<TR>
<TD VALIGN="TOP" BGCOLOR="#C0C0C0" COLSPAN="4"><STRONG>MAIN LIBRARY LOCATION CODES</STRONG></TD>
</TR>
<TR BGCOLOR="FFFFCC">
<TD VALIGN="TOP"><STRONG>LUIS LOCATION DISPLAYS</STRONG></TD>
<TD VALIGN="TOP"><STRONG>LOC</STRONG></TD>
<TD VALIGN="TOP"><STRONG>LCN</STRONG></TD>
<TD VALIGN="TOP"><STRONG>SLOC</STRONG></TD>
</TR>
<TR>
<TD VALIGN="TOP">Atlas</TD>
<TD VALIGN="TOP">main</TD>
<TD VALIGN="TOP">ucf</TD>
<TD VALIGN="TOP">atls</TD>
</TR>
<TR BGCOLOR="#DFDFDF">
<TD VALIGN="TOP">Browsing</TD>
<TD VALIGN="TOP">main</TD>
<TD VALIGN="TOP">bro</TD>
<TD VALIGN="TOP">&nbsp;</TD>
</TR>
<TR>
<TD VALIGN="TOP">General Collection</TD>
<TD VALIGN="TOP">main</TD>
<TD VALIGN="TOP">ucf</TD>
<TD VALIGN="TOP">gen</TD>
</TR>
<TR BGCOLOR="#DFDFDF">
<TD VALIGN="TOP">General Collection – OVERSIZE</TD>
<TD VALIGN="TOP">main</TD>
<TD VALIGN="TOP">ucf</TD>
<TD VALIGN="TOP">osze</TD>
</TR>
<TR>
<TD VALIGN="TOP">General Collection (periodical)</TD>
<TD VALIGN="TOP">main</TD>
<TD VALIGN="TOP">ucf</TD>
<TD VALIGN="TOP">per</TD>
</TR>
</TABLE>


Displays as:

MAIN LIBRARY LOCATION CODES
LUIS LOCATION DISPLAYS LOC LCN SLOC
Atlas main ucf atls
Browsing main bro  
General Collection main ucf gen
General Collection – OVERSIZE main ucf osze
General Collection (periodical) main ucf per


The top row spans the four columns of the table. Light gray is used on alternate rows to make it easier to read across. The color in the white rows is not specified. These rows will be whatever color is designated for the page in the BODY tag. Note: the &nbsp; forces the background color to show in an empty data cell.

For more information on writing HTML, see the links listed at Authoring on the Internet.

Back to Top

kkm/2-04-98, Rev. 5-28-98, Rev. 8-7-98

Return to K.K. Montgomery's Homepage