"TEACHING PHYSICS USING THE WWW" WORKSHOP, ADV. HTML-- Advanced HTML Formatting

Displayed comments version!

Lists
Tables
Indenting, Alignment






Using Lists

An Ordered List

Life on Mars?

A group of scientists led by David McKay of NASA's Johnson Space Center has published an article in the August 16 issue of Science magazine announcing the discovery of evidence for primitive bacterial life on Mars. An examination of a meteorite found in Antarctica and believed to be from Mars shows: 1) hydrocarbons which are the same as breakdown products of dead micro-organisms on Earth, 2) mineral phases consistent with by-products of bacterial activity, and 3) tiny carbonate globules which may be microfossils of the primitive bacteria, all within a few hundred-thousandths of an inch of each other. Based on age dating of the meteorite, the following scenario has been proposed:

The following <ol> tag begins the construction of an Ordered List. In an Ordered List, each list item is preceded by a sequential number, which the browser generates. Within the list, each list item is preceded by an <li> "list item" tag. The list is closed (ended) with the </ol> "End-Ordered-List" tag. Note that, unlike most tags, the <li> "list item" tag does NOT have an </li> "End-List-Item" counterpart.

  1. The original igneous rock solidified within Mars about 4.5 billion years ago, about 100 million years after the formation of the planet. (Based on isotope ages of the igneous component of the meteorite)

  2. Between 3.6 and 4 billion years ago the rock was fractured, presumably by meteorite impacts. Water then permeated the cracks, depositing carbonate minerals and allowing primitive bacteria to live in the fractures.

  3. About 3.6 billion years ago, the bacteria and their by-products became fossilized in the fractures. (Based on isotope ages of the minerals in the fractures)

  4. 16 million years ago, a large meteorite struck Mars, dislodging a large chunk of this rock and ejecting it into space. (Based on the cosmic ray exposure age of the meteorite)

  5. 13,000 years ago, the meteorite landed in Antarctica.

  6. The meteorite, ALH84001, was discovered in 1984 in the Allan Hills region of Antarctica.

The full article about life on Mars is available from NASA.



Back to the top of this document




An Unordered List

Current and Previous Missions to Mars

The following <ul> tag begins the construction of an Unordered List. In an Unordered List, each list item is preceded by a bullet of some sort, which the browser generates and whose style can be selected/changed in the tags. As with the Ordered List, each list item is preceded by an <li> "list item" tag. The list is closed (ended) with an </ul> "End-Ordered-List" tag.




Back to the top of this document




Using a TABLE to present information

Mars Global Surveyor Spacecraft Characteristics

(Note: The full MGS reference page is also available.)

The table construction begins with the <Table> tag. Here, the "border=5" specifies the width in pixels of the box-like frame of the table cells. "Border=0" would generate a table without any frame at all.

Each row within the table begins with a <TR> "Table Row" tag and ends with a </TR> tag.

Within a table row are the table elements, which can be either "Table Headers" or "Table Data". The <TH> "Table Headers" are used for row and column header elements, and the text of such an element appears in a bold font. Each of the "Table Header" and "Table Data" tags has corresponding </TH> "End-Table-Header" and </TD> "End-Table-Data" tags.

Within a table row, each column element is specified, from left to right. Thus, a 3 column table would have three <TD>bla bla</TD> types of entries for each table row. The first "Table Header" element in this case has nothing in it, so the <TH> and </TH> are right next to one another.

To make the html source code more readable, it is helpful to use an indenting scheme to display table data and rows.

This is the end of the first row of the table. This table has 2 elements per row. In the first row, the first element was blank, and the second element was a Header whose contents were "Mass".

This is the end of the 2nd row of the table. In this second row, the first element has contents "Spacecraft Bus" and the second element has contents "598.4 kg".

Mass
Spacecraft Bus 598.4 kg
Fuel 387.7 kg
Science Payload 75.8 kg
Total (at Launch) 1,061.9 kg
The table is closed or completed with the </TABLE> "End-Table" tag. The browser decides how big the table needs to be in order to properly display the elements in the table.




Back to the top of this document




Using a TABLE for layout

The following table is used just to accomplish a certain layout on the page. The table has just one row, and has three elements (columns or cells) in that row. The first and last elements are used to hold images, while the middle element contains text. This achieves a page layout with images on the left and right and text in the middle, all aligned vertically. In the <Table> tag, the "cellpadding=10" statement sets the amount (in pixels) of white space or "padding" there is between the edges of the cell and the placement of the cell contents. No cellpadding (or "cellpadding=0") results in text or images placed right next to the cell border or frame. The greater the cellpadding, the more white space there is between the cell frame and the cell contents.

As a December 2, 1996 CNN article says, "Sojourner is not much bigger than a toy radio-controlled car, but instead of spinning around a suburban driveway, it will -- if all goes well -- cruise the rocky surface of Mars."

All did go well, and on July 5, 1997, Sojourner rolled down a ramp and into history, "becoming humanity's first autonomous vehicle to travel on the surface of another planet." (CNN July 6, 1997.)

It didn't take long for the Rover to spring into action!




Back to the top of this document





Using the UL tag for indents

Destination: Mars!

An advanced formatting feature is alignment of the text on the page accomplished by using <ul> "unordered list" list tags. The browser automatically indents and left justifies the text placed between <ul> and </ul> tags. If no <li> list items are specified, there are no "items" in the list, but the text between the <ul> and </ul> tags is still formatted by being indented and left justified. If a list is placed within a list, the "inner" list is indented further, and the contents of that list are again all left justified. Thus, an outline type of indentation scheme is easy to accomplish by using a series of nested lists which don't contain any list items.




Back to the top of this document






Back to the Resource Table