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.

Layout Tags

There are two ways that tags are inserted into pages: in-line and block. In-line tags can be embedded in a line of text. Block tags will start on a new line. Some examples of in-line tags are bold, italic and underline. There are also six pre-defined headings that are block tags.

<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

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.

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>

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 an example of the code for a page that uses the above styles. Notice how the specific TD tag is specified by <TD class="money"> or <TD class="sky">. (For demonstration purposes only, I am including the style directly in the page.)

<HTML>
<HEAD>
  <STYLE type="text/css">

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;
}
  </STYLE>
  <TITLE>Test page for CSS</TITLE>
</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.
</P>

<TABLE border>
  <TR>

    <TD width="400">Normal Text</TD>
    <TD width="400">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.</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
</P>
This is not in a paragraph
</BODY></HTML>

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