HTML Information

In addition to the basic tags that were covered in Chapter 1, there are many more tags for laying out information in an HTML page. The recommended way to create pages is to use HTML to define the layout and use Cascading Styles Sheets (CSS) to define style. For instance, part of the layout may be that a heading is needed for a paragraph. The current paragraph has a heading of "HTML Information". It is not important which font is used. It is only important that the heading be displayed in a manner that sets it apart from the paragraph. This is the layout. After the paged is laid out, a designer can then add a style sheet to control the font of the heading. This style sheet could then be modified in the future, and all headings would be changed at the same timed.

It is possible to defined lists of items. There are three types of lists: ordered, unordered, and definition.

Ordered and unordered lists have similar structures. They each use nested <LI> tags to indicate an item in the list. All the items in the list are enclosed within the paired tags for the list. Ordered lists start with <OL> and end with </OL>. Unordered lists start with <UL> and end with </UL>. List items for ordered lists will have a number inserted automatically. List items for unordered lists will have a bullet inserted automatically.

Definition lists start with the <DL> tag and end with the </DL> tag. Two tags are needed to define each item in a definition list: the term and the definition. The idea of a definition list is that there will be a short term, and then a longer definition of this term. Use the <DT> tag to indicate the term, and use the <DD> tag to indicate the definition.

Ordered List

<OL> <LI>First <LI>Second <LI>Third </OL>

First
Second
Third

Unordered List

<UL> <LI>Red <LI>Green <LI>Blue </UL>

Red
Green
Blue

Definition List

<DL> <DT>Miami <DD>A city in Florida that has a tropical climate. <DT>Maine <DD>A state in the northeast part of the country. <DT>Marne <DD>A river in France. </DL>

Miami
A city in Florida that has a tropical climate.
Maine
A state in the northeast part of the country.
Marne
A river in France.

Ordered List
<OL> <LI>First <LI>Second <LI>Third </OL>	First Second Third
Unordered List
<UL> <LI>Red <LI>Green <LI>Blue </UL>	Red Green Blue
Definition List
<DL> <DT>Miami <DD>A city in Florida that has a tropical climate. <DT>Maine <DD>A state in the northeast part of the country. <DT>Marne <DD>A river in France. </DL>	Miami A city in Florida that has a tropical climate. Maine A state in the northeast part of the country. Marne A river in France.

Tables are the most sophisticated and most complicated way to layout HTML. Most pages for news agencies use tables to arrange the content on the site. Tables begin with the <TABLE> tag and end with the </TABLE> tag. Tables use nested <TR> tags to indicate rows in the table. Each row has nested <TD> tags that indicate the data that is in each row. Each <TD> tag represents one square in the table. The browser will adjust the table so that all rows will display the same number of squares, even if the rows are defined with different numbers of <TD> tags. The row with the most <TD> tags determines the number of squares for all the rows in the table.

The default for a <TD> tag is that it is equivalent to one square in the table. This can be altered with the rowspan and colspan attributes in the <TABLE> tag. The rowspan indicates that the <TD> tag will cover successive squares in different rows, starting in the current row. The colspan indicates that the <TD> will occupy successive squares in the same row. A <TD> tag can have both a rowspan and colspan attributes.

<TABLE border=1> <TR> <TD rowspan=2> <IMG SRC="/~downeyt/images/FACE1.gif"><BR> <IMG SRC="/~downeyt/images/FACE1.gif"></TD> <TD colspan=2> <IMG SRC="/~downeyt/images/FACE1.gif"> <IMG SRC="/~downeyt/images/FACE1.gif"></TD> </TR> <TR> <TD rowspan=2 colspan=2> <IMG SRC="/~downeyt/images/FACE1.gif"> <IMG SRC="/~downeyt/images/FACE1.gif"><BR> <IMG SRC="/~downeyt/images/FACE1.gif"> <IMG SRC="/~downeyt/images/FACE1.gif"></TD> </TR> <TR> <TD><IMG SRC="/~downeyt/images/FACE1.gif"></TD> </TR> <TR> <TD><IMG SRC="/~downeyt/images/FACE1.gif"></TD> <TD><IMG SRC="/~downeyt/images/FACE1.gif"></TD> <TD><IMG SRC="/~downeyt/images/FACE1.gif"></TD> </TR> </TABLE>

Face
Face Face Face

Face Face
Face Face

Face

Face Face Face

Adding Style

The simplest way to add style to an HTML page is to include a style sheet. The style sheet is a separate file that contains style definitions. The contents of the file will be covered in the next section. Use a <LINK> tag in the HEAD section of the HTML file to include the style sheet. The <LINK> tag has three attributes

HREF: This contains the URL for the stylesheet file. It has the same format as the HREF attribute in the <A> tag.
REL: This will always have a value of stylesheet
TYPE: This will have a value of text/css

For example, if the stylesheet is named style.css and is located in the same directory as the HTML file, then the basic tags for an HTML page might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Simple Page</title>
  </head>
  <body>
    <p>This is a <i>simple</i> web page</p>
  </body>
</html>

Defining Style

Cascading Styles Sheets (CSS) have been defined by the World Wide Web Consortium (W3). It is a recommendation that has been adopted by most web browsers. Each browser is different in its level of compliance with the W3 recomendation. Some features will work one way on one browser, and another way on a different browser. The effects will be similar, but will have slight differences.

The best way to define a stylesheet is to place it in a separate file from the HTML that it will control. The reason for this is so that the stylesheet can be used by many different pages. If the style needs to be changed, then it can be modified in one place, and all the pages that reference it will be updated as well.

A stylesheet file contains one or more style blocks.
A style block contains one or more of the styles that have been defined by W3.
A block has an HTML tag and a set of curly braces that enclose the styles that will be applied to it.

HTML_tag {
  style-name: style-value;
  style-name: style-value;
  style-name: style-value;
}

The name of the block must match an HTML tag. The styles within the block will be applied to all tags that have that name.

Scales

Many of the styles deal with a measurement. There are many different ways that length can be specified in a style sheet

px: pixels - dots on the screen. Usually there are 96 to the inch
pt: points - a point is 1/72" and is usually used to specify a font size
in: inches
cm: centimeters
em: the height of the letter M in the current font
ex: the hieght of the letter x in the current font
%: percentage of the parent's property

Styles to be used in the Course

There are many styles defined for CSS. Only a few will be used in this book. The basic styles to be used are

background-color: green;: The color can be a standard color name or can be a 3 or 6 hex digit number (#036 or #003568). Check out Experiment with colors to play with the numberic values of colors.
background-image: url(fiu.gif);: Enclose the path to the image inside the parentheses. Do not have a space after url.
color: #003399;: The color can be a standard color name or can be a 3 or 6 hex digit number (#036 or #003568). Check out Experiment with colors to play with the numberic values of colors.
font-family: Bazooka, Comic Sans MS, sans-serif;: A number of fonts can be listed. Separate the names by a comma. The browser will use the first font that it finds. List your fonts from most specific to most general. The font names serif, monospace, cursive, fantasy and sans-serif can be used as defaults if the browser can't find any other font specified. Do not include quotes in the string, even if the font name has spaces in it.
font-size: 30pt;: Change the size of the font. The measurement is required. Do not have a space between the number and pt. Internet Explorer will default to pt, but other browsers will not. If you want your page to be readable in all browsers, then include the measurement.
font-style: italic;: Choices are italic, normal, oblique.
font-weight: bold;: Choices are bold, lighter, bolder, normal.
text-align: left;: Choices are left, right, center, justify.
text-decoration: underline;: Choices are underline, overline, none, line-through, blink, normal
text-transform: lowercase;: Choices are lowercase, uppercase, normal, capitalize
margin-left: 20%;: Indents the object from the left margin. You can use percentage or a number
margin-right: 20%;: Indents the object from the right margin. You can use percentage or a number
text-indent: 20%;: Indents the first line of text from the margin. You can use percentage or a number. The value may also be negative.
list-style-type: lower-alpha;: Choices are decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, disc, circle, square

Default Styles

The above styles should be included within curly braces after the name of the HTML tag to be affected. To affect the entire document, include the properties with the <BODY> tag. The following will make the text color red for the document, everything will be aligned to the center, and there will be a left margin that is 20% of the total width of the body.

BODY {
	color: red;
	text-align: center;
        margin-left: 20%;
}

It is also possible to define styles for just a paragraph, table, or any other HTML tag. The following will force all paragraphs to have blue text and to be aligned to the right.

P {
	color: blue;
	text-align: right;
}

Since the <P> tag is nested within the <BODY> tag, the text color will be blue, and there will be right alignment inside of paragraphs. Also, there will be a margin of 20%. Since the paragraph style does not define the margin, it will inherit the margin from the body style.

Multiple Definitions

It is possible to have the same style apply to serveral tags. Use a comma to separate the names of tags that should use this style. The following style would apply to all H1 and H2 tags

H1, H2 {
	text-align: center;
}

Nested Definition

It is possible to indicate that a style should be used only if it is nested inside other tags. Specify the order of nested tags that must appear in order to use this sytle. For example, to control a heading that appears inside a table element, do the following

TD H1 {
	font-size: 20pt;
}

Named Styles

It is also possible to define several styles for a specific tag. For instance, the <TD> tag could have several styles like these

TD.MONEY {
	color: green;
	text-align: left;
}

TD.SKY {
	color: lightblue;
	text-align: center;
}

Then the particular TD would be specified with the class attribute within the TD tag in the HTML code.

Generic Styles

Styles that can be applied to all tags can be created by naming the tag, but omitting the name of an HTML tag. For instance, to create a style to set the color to orange that can be used with any HTML tag, just give it a name that starts with a period

.warning {
  color: orange;
}

Pseudo Tags

In addition to the normal tags like BODY, P and TD, there are some pseudo-tags that allow the hypertext links to be controlled.

A:LINK: Controls the appearance of an unvisited hypertext link.
A:VISITED: Controls the appearance of a visited hypertext link.

Style Examples

Here is the code for a style sheet that includes the styles listed above.

BODY {
  color: red;
  text-align: center;
}

P {
  color: blue;
  text-align: right;
}

TD.money {
  color: green;
  text-align: right;
}

TD.sky {
  color: lightblue;
  text-align: center;
}

.warning {
  color: orange;
}

Here is an example of a page that uses the above style sheet. Notice how the specific TD tag is specified by <TD class="money"> or <TD class="sky">.

<HTML>
  <HEAD>
    <TITLE>Test page for CSS</TITLE>
    <LINK REL="stylesheet" TYPE="text/css" HREF="test.css">
  </HEAD>
  <BODY>
      This is some text that is not included in a paragraph. It should be red and
      centered.
    <P>
      This is the text for the paragraph. It should be blue and aligned right.
    <TABLE border>
      <TR>
        <TD>Normal Text</TD>
        <TD>is Red but not Centered. It is red because the Red of the
	    Body has cascaded into the table. It is not centered because tables have
	    a default alignment of Left, so the Center of the Body does not cascade.
	    It has a bold <b class="warning">warning</b>.</TD>
      </TR>
      <TR>
        <TD class="money">In a TD, Money</TD>
	<TD class="money">is Green and Right</TD>
      </TR>
      <TR>
	<TD class="sky">In a TD, Sky</TD>
	<TD class="sky">is Blue and Centered</TD>
      </TR>
    </TABLE>
    <P>
      This is in a paragraph, too. It is blue.
      It has an underlined <u class="warning">warning</u>.
    </P>
      This is not in a paragraph, it is red.
      It has an italic <i class="warning">warning</i>.
  </BODY>
</HTML>

Check out this link for an example that uses a style sheet with the above properties: test.css.html

Form Elements

Input Elements

Up until this point, all HTML forms have used only three different form elements: text, hidden, and submit. All three of these use the same tag: input.

<input type="text" name="hobby">
<input type="hidden" name="hobby" value="water skiing">
<input type="submit" name="confirmButton" value="Confirm">

There are additional elements that have this same format. The only difference is the value for the type attribute.

password: This behaves just like a text box, but the value in the browser appears as a row of asterisks. There is not really any security in this. If the form uses the GET method, then the value will appear as plain text in the query string.
radio: This has the appearance of a radio button. It can have two states: checked and unchecked. If it is in the checked state when the form is submitted, then the value will be sent to the server. The user cannot change the value, it is hidden. There is an additional attribute for radio elements named checked. If this word appears in the tag, then the button will be checked whenever the page is loaded.
checkbox: This has the appearance of a check box button. It can have two states: checked and unchecked. If it is in the checked state when the form is submitted, then the value will be sent to the server. The user cannot change the value, it is hidden. There is an additional attribute for check box elements named checked. If this word appears in the tag, then the button will be checked whenever the page is loaded.

<input type="password" name="secret_code">
<input type="radio" name="happy" value="elated" checked>
<input type="checkbox" name="color" value="green" checked>

Radio Groups

Radio buttons are most useful when they are placed in groups. A group of radio buttons all have the same name, with different values. Only one of the radio buttons with that name can be in the checked state at any time. Whichever one is checked, that is the value that will be sent in the query string. For instance, if elated is checked, then it will be included in the query string as happy=elated.

<input type="radio" name="happy" value="elated" checked>
<input type="radio" name="happy" value="ecstatic">
<input type="radio" name="happy" value="joyous">

Checkbox Groups

Checkbox groups are also useful, but only for the programmer. A group of checkboxes all have the same name, with different values. In a servlet, a checkbox group can be processed using a loop. More than one element in a checkbox group can be in the checked state at any time. All the checked values will be sent in the query string as separate name=value pairs. For instance, if green and blue are checked, then they would be included in the query string as color=green&color=blue.

<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="green" checked>
<input type="checkbox" name="color" value="blue" checked>

Textarea

Text boxes can only include one line of text. To enter multiple lines of text, use a textarea element.

<textarea name="comments"></textarea>

This will display as a box in which text can be typed. All the text in the box will be sent to the server when the form is submitted. If you want an initial value to display when the page is loaded, place it between the opening and closing textarea tags.

Single Selection List

This appears in the browser as a dropdown list of values. Whichever value the user selects, that is the value that will be sent to the browser. The first value in the list is the default value that will be sent to the browser if the user does not make a selection. The selection list has nested tags for each of the options in the list. To have one of them selected as the default, and to appear in the drop down box whenever the page is loaded, included an attribute named selected in the option.

<select name="airport">
  <option value="mia">Miami</option>
  <option value="fll" selected>Ft. Lauderdale</option>
  <option value="pbi">West Palm Beach</option>
</select>

Multiple Selection List

The only difference between the single selection list and the multiple selection list are two attributes: multiple and size. Multiple indicates that more than one option may be selected by using the shift or control keys. Size is used to set the number of options that are visible in the drop down box. If size is omitted then all the options will be visible.

<select name="team" multiple size="2">
  <option value="heat">Heat</option>
  <option value="marlins">Marlins</option>
  <option value="dolphins">Dolphins</option>
  <option value="panthers">Panthers</option>
</select>

Here is an example of an HTML page that has a form that contains all of the above elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Initialized JSP</title>
  </head>
  <body>
    <p>This is a simple HTML page that has a form in it.</p>
    <p>The value of the hobby that was sent to this page is: water skiing</p>

    <form>
      <p>
        The value of the hobby is used to initialize the element.
      </P>
      <p>
        <select name="team" multiple size="2">
  	  <option value="heat">Heat</option>
  	  <option value="marlins">Marlins</option>
          <option value="dolphins">Dolphins</option>
          <option value="panthers">Panthers</option>
        </select>
        <input type="submit" name="confirmButton" value="Confirm">
      </P>
    </form>
  </body>
</html>

`<b>boldface</b>` boldface	`<i>italic</i>` italic	`<u>underline</u>` underline
`<h1>Heading 1</h1>` Heading 1	`<h2>Heading 2</h2>` Heading 2	`<h3>Heading 3</h3>` Heading 3
`<h4>Heading 4</h4>` Heading 4	`<h5>Heading 5</h5>` Heading 5	`<h6>Heading 6</h6>` Heading 6