HTML

Let's take a look at a simple example:

<p>
Don't look at your instruments and adjust 
the flight controls to, for example, 
keep the altimeter steady.  The instruments 
have a tendency to <b>lag behind reality</b> 
and therefore you're overcorrecting and
oscillating.
</p>

HTML consists of tags, such as <p>, interspersed with plain text. The <p> tag begins a paragraph; </p> ends the paragraph. Similarly, <b> starts text emboldening and </b> ends it.

Basics

Some tags have attributes, such as the face attribute of the <font> tag. Example:

<font face=arial>

If an attribute value contains a space, it is necessary to enclose it in quotation marks:

<font face="arial narrow">

Logical Markup

Here are a few examples of semantic tags:

You can fly all day <em>in mid-air</em> 
without using the airplane's rudder.

On short final, press relatively hard
on <strong>both</strong> rudder pedals.

Alaska and Hawaii's airports are 
identified starting with a
<code>PA</code> for "Pacific".

<h1>Flight Plan</h1>

<h2>Flight Plan</h2>

<h3>Flight Plan</h3>

<h4>Flight Plan</h4>

<h5>Flight Plan</h5>

<h6>Flight Plan</h6>

Physical Markup

Use the flight controls 
to keep the nose of the airplane 
at <b>a constant attitude</b>
relative to the horizon.

Have you read <i>Stick and
Rudder</i>?

Flying in the clouds on a summer
afternoon, you run the risk of
entering an <u>embedded
thunderstorm</u>.

Avogadro's number is
approximately equal to 6.022
x 10<sup>23</sup>

log<sub>e</sub>x

I want a <font size=+2>huge
</font> house, a
<font size=+1>big</font>
dog, and a <font size=-1>
small</font> waist.

An airplane's navigation lights
are <font color=green>green</font>
on the right wing and 
<font color="#ff0000">red</font>
on the left.

The <font face="arial narrow,
arial, helvetica">NASA Aviation
Safety Program</font> is the only
source of innovation.

The terminal forecast called 
for winds <tt>02015G25KT</tt>,
which means from the northeast at 
15 knots, gusting to 25 knots.

Winds aloft for Buffalo, Boston, 
and Nantucket, at 3000, 6000, and
9000':
<pre>
    3000    6000    9000
BUF 0517 0215+01 3306-01
BOS 2218 2325+08 2321+03
ACK 2118 2012+08 1917+03
</pre>

    3000    6000    9000
BUF 0517 0215+01 3306-01
BOS 2218 2325+08 2321+03
ACK 2118 2012+08 1917+03

Aviation safety quote:
<blockquote>
All life is the management of
risk, not its elimination. 
<br>
&mdash; Walter Wriston, 
former Chairman of Citibank 
</blockquote>

It's generally considered more tasteful to use logical markup instead of physical markup. It has become especially important now that there is such a wide variety of devices on which to browse Web sites, e.g., mobile phones and handheld devices. A phone might ignore <font size> tags, but it will probably try to make headlines (<h1>) stand out.

Hyperlinks

An absolute link is a hyperlink that specifies the full URL of the destination. Example:

<a href="http://aviationweather.gov/">aviationweather.gov</a>

Relative links are hyperlinks to documents in relation to the location of the current document. You do not need to specify the server name in the URL. Example:

<a href="glossary">Glossary</a>

You can make a Web page open up in a new browser window by specifying a target window:

<a href="glossary" target="glossary_window">Glossary</a>

If there is no browser window named glossary_window, a new window will pop up. However, you should use this feature sparingly because the appearance of new windows can be confusing to users. Furthermore, a number of users have pop-up ad blockers installed; these ad blockers will also prevent legitimate windows from popping up. If you're reading this book online, try it out right here: Glossary.

You can also link to specific locations within a document so that your user doesn't have to scroll down to find a particular item on the page. To accomplish this, first you have to mark the location in the document to which you need to link. For example,

<a name="DNS">DNS</a>

see the <a href="glossary#DNS">glossary entry for DNS</a>

You will often see a question mark followed by form variables at the end of a URL; this is called the query string. For example,

<a href="http://groups.google.com/groups?hl=fr&group=rec.aviation.student">rec.aviation.student newsgroup</a>

Breaks

Here are some common breaks:

<p>
"I'll be seeing you,"
he said.
</p>
<p>
Then he walked away.
</p>

Carson's Plumbing<br>
123 Main St.<br>
Seattle, WA 98101

And they lived happily
ever after.
<hr>
The End

Notice that <br> and <hr> have no closing tags. Additionally, the </p> tag is optional; the browser assumes that, when it encounters a new <p> tag, the old paragraph has ended.

Lists

Alaska summer survival gear:

<ol>
<li>rations for each occupant 
<li>one axe or hatchet
<li>one first aid kit
</ol>

Common training airplanes:

<ol type=A>
<li>Cessna 172
<li>Diamond DA20
<li>Piper Tomahawk
</ol>

Class B VFR Weather Minimums:
<ol type=i>
<li>3 statute miles visibility
<li>clear of clouds
</ol>

Checklist for Mexican Flying:
<ul>
<li>proof of airplane ownership
<li>proof of liability insurance
<li>pilot's license and medical
<li>seldom asked-for documents:
  <ul>
  <li>radio station license
  <li>radio operator's license
  </ul>
<li>border-crossing flight plan
</ul>

<dl>
<dt>IFR
<dd>Instrument Flight Rules
<dt>VFR
<dd>Visual Flight Rules
<dt>VOR
<dd>Very High Frequency Omni Ranging
radio navigation beacon
</dl>

Images

<img src="http://www.eveandersson.com/alex.jpg">

There are many optional attributes for images. The most important are the width and height attributes; by telling the browser the size of the image, it can render the entire Web page, leaving space for the image, before it has downloaded the image file itself.

Attribute	Code Example	Typical Rendering
Dimensions width/ height	<img width=100 height=100 src="http://www.eveandersson.com/alex.jpg">
Border border	<img width=100 height=100 border=2 src="http://www.eveandersson.com/alex.jpg">
Alignment align	<img align=right width=100 height=100 src="http://www.eveandersson.com/alex.jpg"> Canine-American	Canine-American
Alignment align	<img align=left width=100 height=100 src="http://www.eveandersson.com/alex.jpg"> Canine-American	Canine-American
Horizontal Space (on both sides) hspace	<img hspace=10 align=left width=100 height=100 src="http://www.eveandersson.com/alex.jpg"> Canine-American	Canine-American
Vertical Space (top and bottom) vspace	<img vspace=10 width=100 height=100 src="http://www.eveandersson.com/alex.jpg">

Tables

<table>, </table>

start and end a table

<tr>, </tr>

table row

<td>, </td>

table cell

<th>, </th>

table heading; like a table cell except that the text is bold and centered

<table border=2
  cellspacing=5
  cellpadding=5>
<tr>
 <th>Year</th>
 <th>Revenue</th>
 <th>Expenditures</th>
 <th>Profits</th>
</tr>
<tr>
 <td>1999</td>
 <td>$58,295</td>
 <td>$73,688</td>
 <td>$(15,393)</td>
</tr>
<tr>
 <td>2000</td>
 <td>$902,995</td>
 <td>$145,400</td>
 <td>$757,595</td>
</tr>
</table>

<!-- reduce the
cellspacing and
right-align the
text in the cells -->

<table border=2
  cellspacing=2
  cellpadding=5>
<tr>
 <th>Year</th>
 <th>Revenue</th>
 <th>Expenditures</th>
 <th>Profits</th>
</tr>
<tr>
 <td>1999</td>
 <td align=right>
   $58,295</td>
 <td align=right>
   $73,688</td>
 <td align=right>
   $(15,393)</td>
</tr>
<tr>
 <td>2000</td>
 <td align=right>
   $902,995</td>
 <td align=right>
   $145,400</td>
 <td align=right>
   $757,595</td>
</tr>
</table>

<!-- remove the
border -->

<table border=0
   cellspacing=2
   cellpadding=5>
<tr>
 <th>Year</th>
 <th>Revenue</th>
 <th>Expenditures</th>
 <th>Profits</th>
</tr>
<tr>
 <td>1999</td>
 <td>$58,295</td>
 <td>$73,688</td>
 <td>$(15,393)</td>
</tr>
<tr>
 <td>2000</td>
 <td>$902,995</td>
 <td>$145,400</td>
 <td>$757,595</td>
</tr>
</table>

<!-- shade every
other row -->

<table border=0
  cellspacing=2
  cellpadding=5>
<tr bgcolor="#cecece">
 <th>Year</th>
 <th>Revenue</th>
 <th>Expenditures</th>
 <th>Profits</th>
</tr>
<tr bgcolor=white>
 <td>1999</td>
 <td>$58,295</td>
 <td>$73,688</td>
 <td>$(15,393)</td>
</tr>
<tr bgcolor="#cecece">
 <td>2000</td>
 <td>$902,995</td>
 <td>$145,400</td>
 <td>$757,595</td>
</tr>
</table>

Forms

<form method=POST action=/register/new>

The form's method can be either GET or POST. The only difference is that, with method=GET, the variables that the user submits are presented in the query string of the following page's URL. This is useful if you want the user to be able to bookmark the resulting page. However, if the user is expected to enter long strings of data, method=POST is more appropriate because some old browsers only handle query strings containing fewer than 256 characters (newer browsers can handle a few thousand). Note further that if you use the GET method, the form variable values will appear in the server access log and could create a security or privacy risk.

<form method=POST action=/survey/demographic>
<input type=hidden name=user_id value=2205>
Age: <input type=text size=2><br>
Sex: <input type=radio name=sex value=m>male
     <input type=radio name=sex value=f>female<br>
What are you interested in (check all that apply)?
<input type=checkbox name=interest value="aerobatics">Aerobatics
<input type=checkbox name=interest value="helicopters">Helicopters
<input type=checkbox name=interest value="IFR">IFR
<input type=checkbox name=interest value="seaplanes">Seaplanes
<br>
Where do you live?
         <select name=continent_live>
         <option value=north_america>North America
         <option value=south_america>South America
         <option value=africa>Africa
         <option value=europe>Europe
         <option value=asia>Asia
         <option value=australia>Australia	
         </select>
         <br>
Which continents have you visited?<br>
         <select multiple size=3 name=continent_visited>
         <option value=north_america>North America
         <option value=south_america>South America
         <option value=africa>Africa
         <option value=europe>Europe
         <option value=asia>Asia
         <option value=australia>Australia	
         </select>
         <br>
Describe your favorite airplane trip:<br>
<textarea name=favorite_trip_story rows=5 cols=50></textarea>
<p>
<input type=submit value="Continue">
</form>

Special Characters

piñata

café

¿Qué pasa?

a     b

4 > 3

5 < 6

© 2004

£50

HTML Document Structure

HTML documents are broken into two main sections: the head and the body. The head contains information pertaining to the entire document (most importantly, the document's title). The body contains the content of the page that appears within the browser window. Here is a basic HTML document:

<html>
<head>
    <title>This is the Title</title>
</head>
<body>
    ... This is the content of the page. ...
</body>
</html>

News pages often include instructions that the browser refetch the page. Here's a tag, located in the head, from news.google.com:

<meta  HTTP-EQUIV="refresh" CONTENT="900">

Also within the head, you can specify keywords and a description of the page. These tags were originally intended to help search engines index pages, but now they are often ignored due to abuse such as page authors using incorrect keywords to get more hits.

<META NAME="description" CONTENT="An owner's review of the Diamond Star DA40">
<META NAME="keywords" CONTENT="Diamond Star DA40 review Cirrus SR20 SR22">

<body bgcolor=white text=black link=blue vlink=purple alink=red>

However, you should use this sparingly; users are accustomed to the standard text colors and may become frustrated if they can't tell what's a link and what isn't.

Cascading Style Sheets

Here are some of the problems with filling up site content and scripts with tags like font and color:

• Older browsers will ignore them; the latest and greatest tags tend to have been introduced with the latest and greatest browsers; H3 and EM, however, are understood by browsers going back to the early 1990s.
• Newer browsers will ignore them; mobile phones, palmtops, and hiptops often have very basic browsers that understand only the basic tags.
• When your service hires a new graphic designer, the programmers will have to edit 10,000 HTML documents and thousands of scripts.

body {margin-left: 10% ; margin-right: 10%}

P { margin-top: 0.3em;  text-indent : 2em }

P.stb { margin-top: 12pt }
P.mtb { margin-top: 24pt; text-indent : 0in}
P.ltb { margin-top: 36pt; text-indent : 0in}

p.marginnote { background: #E0E0E0;
               text-indent: 0in ; padding-left: 5%; padding-right: 5%; padding-top: 3pt;
               font-size: 75%}
p.bodynote { background-color: #E0E0E0 }
...

How does one use a style sheet? Park it somewhere on the server in a file with the extension ".css". This extension will tell the Web server program to MIME-type it "text/css". Inside each document that uses the cascading style sheet, put the following link element inside the document head:

<LINK REL=STYLESHEET HREF="/seia/style-sheet.css" TYPE="text/css">

Okay, now the browser knows where to get the style sheet and that a small thematic break should be rendered with an extra bit of whitespace. How do we tell the browser that a particular paragraph is "of class stb"? Instead of "<P>", we use

<P CLASS="stb">

An excellent CSS reference can be found at http://www.w3schools.com/css/default.asp.

Frames

Frames sounded like a good idea at the time (mid-1990s), but have proven to be painful for both users and developers for the following reasons:

• Frames waste screen space. Often frames have their own scrollbars, which take up valuable space within the browser window. Furthermore, if you are only interested in one frame and you scroll down within that frame, the other frames remain in place, leaving less space for the content you want.
• Frames make it difficult to bookmark pages. When the user follows links that only update one frame, the URL of the page does not change. Suppose Joe User visits a travel site, follows five links within frames to get to a page about a tour of Mexico's Copper Canyon, and then bookmarks that page; the bookmark will point to the front page of the travel site, not the Copper Canyon page.
• Frames make it difficult to share pages. Suppose Joe User wants to see if his friend is interested in going on the Copper Canyon tour. While looking at the tour advertisement, he cuts and pastes the URL from the browser's Address field into an email message. Joe's friend clicks on the URL and gets the travel site home page, not the interior page about the Copper Canyon tour.
• Frames make it difficult to report errors. Consider a frame-using site with 200 scripts. A user isn't happy with the way a page works. You ask her "What's the URL of the broken script?" She looks in her browser's Address field and gives you the URL of the site's front page.
• Frames make scrolling more difficult. Experienced users know that you don't have to use a mouse to scroll through a Web page; you can use the space bar or arrow keys. However, if the page uses frames, the user must first click on the frame in which they wish to scroll.
• Frames break the Reload button. In our hypothetical travel site, if Joe User pushes Reload when looking at the Copper Canyon page, the browser will often show the travel site home page, because the URL has not been updated.
• Frames break the Back button. In some browsers, frames break the Back button; if a user visits a frame-based site and clicks 100 times on interior links, a click on the Back button may take the user back 101 steps rather than 1.
• Search engines send users to subpages. Suppose your site uses two frames: one for navigation and one for content. Since each frame is defined by a separate HTML document at a separate URL, a public search engine such as Google is most likely to send the user to the HTML document containing content only. That user will never see the navigation frame and therefore won't be able to find the other parts of your site.

HTML Considered Harmful?

Part of the genius of HTML and the Web is that all sites using HTML markup and forms work the same. A user who has learned to use amazon.com can apply his or her experience to using Google. Users visit a Web site because they are looking for unique content and services, not a unique interface.

Administration pages may constitute an exception to the "custom interface is bad" rule. Suppose you hire and train customer service agents who will be using the administration pages on a daily basis. If a Macintosh/Windows-like drag-and-drop interface saves them a lot of time (and you money), it is perfectly reasonable to write custom code that will run in their browsers. You may have to spend fifteen minutes training each agent, an unacceptably long time for a casual user, but the long-run productivity dividends make it worthwhile.

The Future

More

• visit your favorite Web page and use the browser command "View Source"
• HTML tag reference: http://www.w3schools.com/html/html_reference.asp (Web) and HTML & XHTML: The Definitive Guide by Musciano and Kennedy (O'Reilly, 2002; print)
• Colors and their hexadecimal equivalents: http://falco.elte.hu/COMP/HTML/colors.html
• Special characters: http://webmonkey.wired.com/webmonkey/reference/special_characters/
• Cascading Style Sheets: http://www.w3schools.com/css/default.asp