The following links to tutorials and references on HTML are helpful in designing web pages:
Scientists working on a variety of computer systems around the world are able to access databases easily through the World Wide Web (WWW). From the late 1960s to the early 1990s, primarily scientists and the United States military used the Internet for email, file transfer, and work on remote computers. In the late 1980s and early 1990s, Tim Berners-Lee, a physicist at CERN, invented the World Wide Web so that particle physicists could easily and quickly exchange text, graphic, and sound data. In less than ten years, a revolution occurred in which the WWW dramatically increased and expanded the utility of the Internet for scientists and nonscientists alike.
As an example of its utility, suppose an ornithologist has a web site that explains the evolution of finches in the Galapagos Islands using formatted text and a diagram of the birds' "family tree." Several photographs and sound files illustrate the variety of finches on different islands, while videos show their behaviors. The site has links to other sites with addition information on finches, the Galapagos Islands, Darwin, the scientists doing the study, and the organization sponsoring the work. The ornithologist maintains a database of information on the finches. Anyone visiting the site can access the data by completing and submitting a simple web-based form. The requested data displays on the screen, and the user can download that data or anything else appearing on the site.
In this module, we will introduce how to create some simple web pages. In the next modules on "Web Forms for Database Queries" and "CGI Programs and Web Forms," we will learn how to produce a web-based form and take the values from the request form, access a database, process the data, and return information to the user. The discussion is not intended to be a comprehensive study of web development, but with this background you will be able to generate web pages to interface to databases and know how to extend your knowledge for more complex web projects.
Most web pages are written in HTML or Hypertext Markup Language. Browsers, such as Netscape and Internet Explorer, interpret the HTML instructions to display the pages. To indicate formats, links, and other instructions, HTML uses markup tags or tags, which begin with "<" and end with ">".
For example, consider a page modified from the National Institute of Standards and Technology (NIST) giving "NIST ONLINE Reference Databases." (URL for the original NIST site on "Online Scientific Databases" is http://www.nist.gov/srd/online.htm.) If under the View menu we select Page Source in Netscape or Source in Internet Explorer, we see the HTML for the page. The page begins with <html> and ends with the corresponding </html>. Most beginning tags have a matching ending tag that has a forward slash (/) followed by the same name. Unless otherwise noted, we assume tags occur in such beginning-ending pairs. Markup tags are not case sensitive, so we could also use <HTML> and </HTML>.
Next follows the head:
<head>NIST Standard Reference Data - Online Databases</title>
<title>
The string between the tag pairs <title> and </title> appears in the browser's title bar at the top of the window.
|
Quick Review Questions |
| Quick
Review Question 1. Use lowercase for markup tags.
|
On the page "NIST ONLINE Reference Databases," as with all pages, after the head comes the body, which the pair of tags <body> and </body> delimit. By default, the text appears in black with a gray background on many browsers. To designate a white background, in the body tag we employ the attribute bgcolor with the value "#FFFFFF", as follows:
<body bgcolor = "#FFFFFF">
To call up the image that appears at the top of "NIST ONLINE Reference Databases", we have the image tag <img>. In its source attribute, src, we specify the file ("banner.jpg") containing the image, as follows:
"banner.jpg"></img><img src =
The paragraph tag, <p>, has an optional matching end tag, </p>. We must have such formatting tags in the page source, because the browser ignores line returns, tabs, indentations, and more than one blank. Without paragraph tags or line break tags, which we discuss shortly, the text in a web page would run together in one long paragraph. However, for readability of the source text, it is advisable to start a paragraph on a new line and to use appropriate blank lines and extra spaces.
Another formatting tag is the direction to center, <center>. The following segment advances to a new paragraph after centering a large, bold heading:
NIST ONLINE Reference Databases</h1><center>
<h1>
Heading tags range from <h1>, indicating the largest heading, to <h6>, indicating the smallest.
|
Quick Review Questions |
| Quick
Review Question 2.
Use lowercase for markup tags.
|
The sentence that follows the heading in "NIST ONLINE Reference Databases" wraps according to the width of the browser screen. After the text, <hr> indicates a horizontal line separator between the introductory sentence and the table of contents. The following <font> tag specifies Arial font and green color (#006400) for the text between the opening and closing font tags:
Arial color=#006400><font font=
The site "ColorServe Java" gives the codes for other colors.
In this case, the text, "Contents," is a subheading that should appear smaller than the page's title, so tag <h2> surrounds the text, as follows:Contents</h2><h2>
The table of contents consists of a list of online reference databases from NIST Laboratories with hyperlinks to descriptions further down on the web page. The following line results in "Atomic Spectra Database" appearing in color and underlined on the page and being a hyperlink to the anchor ASD in the current HTML document:
#ASD">Atomic Spectra Database</a><a href="
The anchor tag, <a>, has hyperlink reference attribute, href. The pound sign, #, before the URL (Uniform Resource Locator) indicates that the address is in the base document, which is the current document unless otherwise specified. Below the table of contents, the following html anchor tag with name attribute ASD marks the target location for the link:
ASD"></a><a name="
The subsequent paragraph begins with "The Atomic Spectra Database (ASD)," which is underlined to indicate a link. The page source indicates the link by preceding the text with anchor tag and hyperlink reference to the appropriate URL and by following the text with the closing anchor tag:
<a href="http://physics.nist.gov/cgi-bin/AtData/main asd">
The Atomic Spectra Database (ASD)
</a>
HTTP or Hypertext Transfer Protocol is the mechanism for exchanging information between a Web server and a browser. In this case, using this protocol, we wish to fetch from the computer physics.nist.gov the document named asd in the AtData subdirectory of the cgi-bin directory.
|
Quick Review Questions |
| Quick
Review Question 3. Use lowercase for markup tags and only
necessary blanks. Do not have blanks around an equals sign.
|
Before leaving the table of contents, we should note that the line break tag, <br>, follows each item. The line break causes single spacing between lines, whereas the paragraph tag, <p>, displays what appears to be a blank line before the next material. In the subsequent paragraphs of the page source of "NIST ONLINE Reference Databases," a paragraph tag occurs before and after each horizontal line tag. Like the paragraph tag, the line break tag does not occur in a pair.
In the the NIST Database for the Isotopic Composition of Selected Atmospheric Constituents" paragraph, we display the subscript in CH3D by using the subscript tag, <sub>, and its closing tag around the subscript, 3, as follows:
CH<SUB>3</SUB>D
Similarly, The superscript tag, <sup>, precedes the superscript, 13, in 13CH4, as follows:
<SUP>13</SUP>CH<SUB>4</SUB
At the end of the document, a solicitation for questions and comments appears. In the page source, we again use an anchor tag with hypertext reference attribute. However, the value of this attribute begins with mailto: and ends with an email address, srdata@nist.gov. So that the email address appears on the web page, the HTML source also has the address between the <a> and </a> tags, as follows:
Questions and comments:
<a href="mailto:srdata@nist.gov">srdata@nist.gov</a>
If the user clicks the resulting link, an email form with target address srdata@nist.gov appears.
Quick Review Questions |
| Quick
Review Question 4. Use lowercase for markup tags and
no blanks.
|
We have referred to the table of contents (TOC) as a list, but suppose we want the TOC to appear as a bulleted list, as follows:
Contents
Atomic Spectra Database
Physical Reference Data
...
In this case, we use the unordered list tag, <ul>, before the list and the list item tag, <li>, before each bulleted item. As the following source segment shows, <li> does not have a matching ending tag, and we do not use a paragraph or line break tag:
<a href="#ASD">Atomic Spectra Database</a><ul>
<li>
For an numbered (ordered) list, we employ the ordered list tag, <ol>, and obtain the following:
Contents
…
|
Quick Review Questions |
Scientists often use tables to display data and to layout web pages. For example, consider the following table of three Radionuclide Half-Life Measures, derived from one on the NIST site (http://physics.nist.gov/PhysRefData/Halflife/halflife.html):
| Radionuclide | Number of Sources |
Number of Half Lives Followed |
Half Life* | Statistical Standard Uncertainty |
Other Standard Uncertainty |
Reference |
|---|---|---|---|---|---|---|
|
|
||||||
| 3H | 18 | 3.0 | 4500 ± 8 d | 8 | 0 | 1 |
| 18F | 3 | 13.1 | 1.82951 ± 0.00034 h | 0.00024 | 0.00024 | |
| 22Na | 5 | 1.9 - 4.7 | 950.97 ± 0.15 d | 0.09 | 0.12 | |
| 24Na | 14 | 1.1 - 7.6 | 14.9512 ± 0.0032 h | 0.0009 | 0.0031 | |
| 44Ti | 1 | 0.33 | 22154 ± 456 d | 180 | 419 | 2 |
| 46Sc | 4 | 3.6 - 10.3 | 83.831 ± 0.066 d | 0.030 | 0.059 | |
| 51Cr | 11 | 2.3 - 8.9 | 27.7010 ± 0.0012 d | 0.0007 | 0.0009 | |
| 54Mn | 2 | 3.3 - 7.4 | 312.028 ± 0.034 d | 0.034 | 0.0 | |
| 57Co | 7 | 4.7 - 10.4 | 272.11 ± 0.26 d | 0.09 | 0.25 | |
| 58Co | 1 | 9.1 | 70.77 ± 0.11 d | 0.11 | 0.0 | |
| 59Fe | 6 | 4.0 - 9.3 | 44.5074 ± 0.0072 d | 0.0048 | 0.0053 | |
| 60Co | 8 | 0.9 - 3.4 | 1925.12 ± 0.46 d | 0.14 | 0.44 | |
| 62Cu | 13 | 4 - 7 | 9.67 ± 0.03 min | 0.03 | 0.0 | 3 |
| 65Zn | 1 | 3.2 | 244.164 ± 0.099 d | 0.099 | 0.0 | |
| 67Ga | 13 | 1.8 - 8.3 | 3.26154 ± 0.00054 d | 0.00015 | 0.00052 | |
| 75Se | 19 | 2.4 - 8.7 | 119.809 ± 0.066 d | 0.014 | 0.065 | |
| 85Kr | 1 | 1.0 | 3934.4 ± 1.4 d | 1.1 | 0.9 | |
| 85Sr | 8 | 1.1 - 4.8 | 64.8530 ± 0.0081 d | 0.0039 | 0.0071 | |
| 88Y | 8 | 1.3 - 8.1 | 106.626 ± 0.044 d | 0.017 | 0.041 | |
| 99Mo | 14 | 3.6 - 9.5 | 65.9239 ± 0.0058 h | 0.0031 | 0.0049 | |
| 99mTc | 33 | 2.1 - 12.0 | 6.00718 ± 0.00087 h | 0.00015 | 0.00086 | |
| 109Cd | 2 | 3.4 - 5.3 | 463.26 ± 0.63 d | 0.36 | 0.51 | |
| 110mAg | 1 | 9.3 | 249.950 ± 0.024 d | 0.024 | 0.0 | |
| 111In | 11 | 1.4 - 9.3 | 2.80477 ± 0.00053 d | 0.00017 | 0.00051 | |
| 113Sn | 11 | 2.3 - 11.0 | 115.079 ± 0.080 d | 0.025 | 0.076 | |
| 117mSn | 10 | 1.5 - 4 | 14.00 ± 0.05 d | 0.05 | 0.0 | 4 |
| 123I | 3 | 5.4 - 12.7 | 13.2235 ± 0.0019 h | 0.0019 | 0.0 | |
| 125I | 18 | 1.4 - 6.2 | 59.49 ± 0.13 d | 0.03 | 0.12 | |
| 125Sb | 1 | 3.9 | 1007.56 ± 0.10 d | 0.10 | 0.01 | |
| 127Xe | 5 | 1.1 - 11.5 | 36.3446 ± 0.0028 d | 0.0028 | 0.0 | |
| 131I | 21 | 1.0 - 10.9 | 8.0197 ± 0.0022 d | 0.0005 | 0.0021 | |
| 131mXe | 2 | 1.8 | 11.934 ± 0.021 d | 0.014 | 0.016 | |
| 133Ba | 4 | 1.2 | 3853.6 ± 3.6 d | 1.6 | 3.2 | |
| 133Xe | 3 | 4.8 - 11.2 | 5.24747 ± 0.00045 d | 0.00045 | 0.0 | |
| 134Cs | 5 | 1.7 - 3.0 | 753.88 ± 0.15 d | 0.11 | 0.11 | |
| 137Cs | 6 | 0.4 - 0.6 | 11015. ± 20. d | 6. | 19. | |
| 139Ce | 9 | 1.5 - 6.4 | 137.734 ± 0.091 d | 0.029 | 0.086 | |
| 140Ba | 10 | 1.8 - 4.4 | 12.7527 ± 0.0023 d | 0.0009 | 0.0022 | |
| 140La | 2 | 4.2 | 40.293 ± 0.012 h | 0.008 | 0.009 | |
| 141Ce | 1 | 6.1 | 32.510 ± 0.024 d | 0.024 | 0.0 | |
| 144Ce | 1 | 3.5 | 284.558 ± 0.038 d | 0.038 | 0.0 | |
| 152Eu | 4 | 1.0 | 4945.5 ± 2.3 d | 1.0 | 2.1 | |
| 153Gd | 2 | 7.3 | 239.472 ± 0.069 d | 0.041 | 0.055 | |
| 153Sm | 1 | 7.3 | 46.2853 ± 0.0014 h | 0.0014 | 0.0 | |
| 154Eu | 3 | 1.1 - 1.3 | 3138.2 ± 6.1 d | 3.1 | 5.2 | |
| 155Eu | 2 | 2.3 - 2.4 | 1738.97 ± 0.49 d | 0.46 | 0.18 | |
| 166Ho | 1 | 7.2 | 26.7663 ± 0.0044 h | 0.0044 | 0.0 | |
| 169Yb | 14 | 3.4 - 9.5 | 32.0147 ± 0.0093 d | 0.0026 | 0.0089 | |
| 177Lu | 4 | 2 - 5 | 6.64 ± 0.01 d | 0.01 | 0.0 | 5 |
| 181W | 3 | 5.9 - 6.6 | 121.095 ± 0.064 d | 0.042 | 0.048 | |
| 186Re | 2 | 5.7 - 6.5 | 89.248 ± 0.069 h | 0.018 | 0.067 | |
| 188Re | 2 | 7.0 - 7.1 | 17.021 ± 0.025 h | 0.014 | 0.021 | |
| 192Ir | 1 | 2.4 | 73.810 ± 0.019 d | 0.019 | 0.0 | |
| 195Au | 5 | 0.6 - 6.0 | 186.098 ± 0.047 d | 0.021 | 0.042 | |
| 198Au | 4 | 4.5 - 7.4 | 2.69517 ± 0.00021 d | 0.00021 | 0.0 | |
| 201Tl | 12 | 2.6 - 11.5 | 3.0456 ± 0.0015 d | 0.0004 | 0.0014 | |
| 202Tl | 1 | 1.4 | 12.466 ± 0.081 d | 0.081 | 0.0 | |
| 203Hg | 14 | 1.7 - 6.6 | 46.619 ± 0.027 d | 0.007 | 0.026 | |
| 203Pb | 7 | 1.8 - 2.8 | 51.923 ± 0.037 h | 0.013 | 0.034 | |
| 207Bi | 2 | 0.6 | 11523. ± 19. d | 10. | 16. | |
| 228Th | 6 | 1.7 - 8.3 | 698.60 ± 0.36 d | 0.14 | 0.33 | |
We announce that a table follows by using the table tag, <table>, in the source code. The current table has three attributes, border, cellpadding, and align. The border value of 1 indicates a thin border around each cell. If the value is 0 or the attribute is missing, the table does not have a border. In this table, the cell padding is 8, indicating a padding of 8 pixels (picture elements or dots on the computer screen) in each direction within a cell. Such spacing makes the information in the cells more readable. The align attribute, in this case center, gives the horizontal alignment of the entire table. Without this attribute, the table would be flush against the left margin. The opening tag for this table with its three attributes follows:
<table border=1 cellpadding=8 align=center>
Each row is surrounded by the opening table row tag, <tr>, and the closing tag </tr>. On the first row, each cell value is boldfaced and horizontally centered. Before each cell value on this first row, we have the table header cell tag, <th>; and the corresponding closing tag </th> appears at the end of each cell item. Several headings, such as "Number of Half Lives Followed," are rather long. To avoid an inordinately wide cell, we break such headings at appropriate places with the line break tag, <br>. The html code that generates the heading line follows:
Radionuclide</th><th>Number of<br>Sources</th><tr>
<th>
We generate the subsequent rows using table row tag, <tr>, with an align attribute. With a value of center, the horizontal alignment of each item in a cell of the row is centered. To generate the plus-or-minus symbol, ±, in the Half Life column, we employ the ASCII code for the symbol, 177, with &# before and a semicolon after the code (±). To delimit the information in each cell, we use the table data tag, <td>, and its corresponding closing tag </td>. The HTML code for the second row could appear on one line; but for emphasis here, we display the rows on separate lines, as follows:
<sup>3</sup>H</td><tr align=center>
<td>
Because browsers collapse several blanks into exactly one, the HTML code ( ) that forces a blank is very useful for proper spacing. For example, suppose, either within a table cell or elsewhere, we wish to have exactly two spaces after a colon, as follows:
Value: 23:8
To accomplish the spacing, we can employ the following code, using two times:
Value:<br> 23.8
|
Quick Review Questions |
|
Quick Review Question 6. Give the tag or code for each of the following: |
Table 1 presents a summary of the HTML that this introduction covers. By looking at the source code for web pages and references, such as those listed in this module's "Links to HTML References" section, we can learn to generate a great variety of web pages for scientific and other applications. The exercises and projects consider some additional HTML commands. In the next module, we cover web-based forms and how to use such forms to access databases.
HTML tags in this module
|
HTML Tag |
Meaning |
|
<a href = "URL"> |
Link to URL |
|
<a href = "#URL"> |
Link to URL in base document, which is current document unless otherwise specified |
|
<a href="mailto: EmailAddress"> |
Send email to EmailAddress |
|
<a name = AnchorName> |
Anchor for target location AnchorName |
|
<body> |
Body of page |
|
<br> |
Line break |
|
<body bgcolor = ColorName> |
Body of page with background color ColorName |
|
<center> |
Center |
|
<font font = FontName color = ColorName> |
Font FontName and color ColorName of enclosed text |
|
<h1> |
Largest heading |
|
<h6> |
Smallest heading |
|
<hr> |
Horizontal rule |
|
<html> |
HTML document |
|
<img src = filename> |
Image source file filename |
|
<li> |
List item |
|
<ol> |
Ordered list |
|
<p> |
Paragraph |
|
<sub> |
Subscript |
|
<sup> |
Superscript |
|
<table border=n1 cellpadding=n2 align=Alignment> |
Table with designated border, cell padding, and horizontal alignment of center, left, or right |
|
<th> |
Table header |
|
<title> |
Title in browser title bar |
|
<tr align =Alignment> |
Table row with horizontal alignment of center, left, or right |
|
<ul> |
Unordered list |
|
&#nnn; |
Character with ASCII code nnn |
| ± | ± |
1. a. Write HTML code to display single-spaced with no bullets or numbers the following list from a chemistry laboratory manual:
MATERIALS and APPARATUS
1 metal object
platform balance
hanging pan balance
b. Write HTML code to display the list with the items bulleted.
c. What do you need to change to have a numbered list.
2. Write HTML code to display a mathematics formula that has superscripts.
3. Write HTML code to display a chemical formula that has subscripts.
4. Write the HTML code to display two graphics in grp1.gif and grp2.gif, beside each other. Hint: Use a table.
5. Give all changes to the HTML code for a hyperlink from this question to the section on "Tables."
6. Give all changes to the HTML code for a hyperlink from this question to your school's web site.
7. Write the HTML code to link to your email address for an email message.
8. Write the HTML code for the
a. Third row of the Radionuclide Half-Life Measures table
b. Fourth row of the table
9. Write the HTML code to generate the table with headers in Figure 1 of "Database Introduction."
10. Write the HTML code to generate the table with headers in Figure 2 of "Database Introduction."
11. Write the HTML code to generate the table with headers in Figure 4 of "Database Introduction."
12. Write the HTML code to generate the header and five rows of Table 2 of "Accessing Databases with SQL."
13. Write the HTML code to generate a table from one of your science books.
14. a. Look at the source page for the "Analytical Chemistry Databases" (Derived from the page http://www.nist.gov/srd/analy.htm) Describe how to generate the definition list, which alternates definition terms and definition descriptions. On a web page, a definition description usually appears indented on a new line.
b. In a science or mathematics book, find three definitions. Write the HTML code to create a complete web page that lists the definitions. On the page, a term should appear on a line by itself, and its indented definition should start on the next line.
15. a. Look up how to italicize in HTML.
b. Write HTML code to display the bibliographic reference for a science book with italicized title.
16. a. Look up how to boldface in HTML.
b. Write HTML code to display a sentence from a science book. Have a word or phrase in bold for emphasis.
17. a. Look up how to underline in HTML.
b. Write HTML code to display a sentence from a science book. Have an underlined word or phrase for emphasis.
18. a. Look up how to do change font size in HTML.
b. Write HTML code to display a sentence from a science book. For emphasis, have an word or phrase larger than the rest of the sentence.
1. Create a web site for a science topic. Use as many HTML tags discussed in this section as possible. Include at least one table.
2. Create a web site for a scientific experiment you have performed. Use as many HTML tags discussed in this section as possible. Include at least one table.
3. Create a web site for this or another science or mathematics course you are taking. Use as many HTML tags discussed in this section as possible.
Copyright © 2002, Dr. Angela B.
Shiflet
All rights reserved