List, Color, Image, and Sound in HTML Documents

In the above headline, three links and an anchor are prepared for intradocument references:

<h1>
  <a href="#list">List,</a>
  <a href="#color">Color,</a>
  <a href="#image">Image,</a> and
  <a href="#sound">Sound</a> in
  <a name="top">HTML</a> Documents </h1>

The attributes of the body tag are set as:

<body vlink="#ff33FF" TEXT = "#330099"
  Background = "noteb-bg.gif">

The default setting of <h1>, <h2>, and <em> are changed by using <style> tag in the head section:

<style>
  h1 {font-size: 250%; font-weight:900; text-align:center; }
  h2 {font-size: 200%; font-weight:900; color:33ff33; }
  em {color:red; font-weight:600; }
  .....................
</style>

List Back to the top

List tags itemize different descriptions. There are three types: <ul>, <ol>, and <dl>. Each of them should have an end tag to end the scope of the itemization. In a list, <li> starts a new item.

<ul> tag:

<ul> Activities in different seasons:
<li> Winter: Indoor: Swim, racketball, aerobics. Outdoor: ski, snowboarding, ice fishing. <li> Spring:
<li> Summer: Indoor: Swim, racketball, aerobics. Outdoor: soccer, fishing, baseball.
<li> Autumn:
</ul>
gives the following result:
Nested list:
Activities in different seasons:
<ul>
  <li> Winter:
   <ul>
     <li> Indoor: swim, racketball, aerobics.
     <li> Outdoor: ski, snowboarding, ice fishing.
   </ul>
  <li> Spring:
   <ul>
     <li> Indoor:
     <li> Outdoor:
   </ul>
  <li> Summer:
   <ul>
     <li> Indoor: swim, racketball, aerobics.
     <li> Outdoor: soccer, fishing, baseball.
   </ul>
  <li> Autumn:
   <ul>
     <li> Indoor:
     <li> Outdoor:
   </ul>
</ul>
gives the following result:

Activities in different seasons:

Activities in different seasons:
<ul>
  <li> Winter:
   <ul>
     <li> Indoor:
      <ul>
       <li> swim
       <li> racketball
       <li> aerobics
      </ul>
     <li> Outdoor:
      <ul>
       <li> ski
        <ul>
         <li> downhill
         <li> cross country
        </ul>
       <li> snowboarding
       <li> ice fishing
      </ul>
   </ul>
  <li> Spring:
</ul>
gives the following result:

Activities in different seasons:

The TYPE attribute of <li> in <ul> list changes the face of the bullets.
<ul>
<li type="disk"> Winter
<li type="square"> Spring
<li type="circle"> Summer
<li> Autumn
</ul>
gives the following result:

<ol> tag:

<ol> Activities in different seasons:
<li> Winter: Indoor: Swim, racketball, aerobics. Outdoor: ski, snowboarding, ice fishing. <li> Spring:
<li> Summer: Indoor: Swim, racketball, aerobics. Outdoor: soccer, fishing, baseball.
<li> Autumn:
</ol>
gives the following result:
    Activities in different seasons:
  1. Winter: Indoor: swim, racketball, aerobics. Outdoor: ski, snowboarding, ice fishing.
  2. Spring:
  3. Summer: Indoor: swim, racketball, aerobics. Outdoor: soccer, fishing, baseball.
  4. Autumn:
Nested list:
Activities in different seasons:
<ol>
  <li> Winter:
   <ol>
     <li> Indoor: swim, racketball, aerobics.
     <li> Outdoor: ski, snowboarding, ice fishing.
   </ol>
  <li> Spring:
   <ol>
     <li> Indoor:
     <li> Outdoor:
   </ol>
  <li> Summer:
   <ol>
     <li> Indoor: swim, racketball, aerobics.
     <li> Outdoor: soccer, fishing, baseball.
   </ol>
  <li> Spring:
   <ol>
     <li> Indoor:
     <li> Outdoor:
   </ol>
</ol>
gives the following result:

Activities in different seasons:

  1. Winter:
    1. Indoor: swim, racketball, aerobics.
    2. Outdoor: ski, snowboarding, ice fishing.
  2. Spring:
    1. Indoor:
    2. Outdoor:
  3. Summer:
    1. Indoor: swim, racketball, aerobics.
    2. Outdoor: soccer, fishing, baseball.
  4. Autumn:
    1. Indoor:
    2. Outdoor:
Activities in different seasons:
<ol>
  <li> Winter:
   <ol>
     <li> Indoor:
      <ol>
       <li> swim
       <li> racketball
       <li> aerobics
      </ol>
     <li> Outdoor:
      <ol>
       <li> ski
        <ol>
         <li> downhill
         <li> cross country
        </ol>
       <li> snowboarding
       <li> ice fishing
      </ol>
   </ol>
  <li> Spring:
</ol>
gives the following result:

Activities in different seasons:

  1. Winter:
    1. Indoor:
      1. swim
      2. racketball
      3. aerobics
    2. Outdoor:
      1. ski
        1. downhill
        2. cross country
      2. snowboarding
      3. ice fishing
  2. spring:
In <ol> list, the TYPE attribute of <li> changes the font of the numbers and VALUE assigns a value to the current item number.
<ol>
<li value="3"> Winter
<li type="i"> Spring
<li type="a"> Summer
<li type="i" value="8"> Autumn
<li> Other
</ol>
gives the following result:
  1. Winter
  2. Spring
  3. Summer
  4. Autumn
  5. Other

<dl> tag:

In some cases, we don't want bullets or numbers when using list to itemize our description. We just need some proper indentations.
<dl> Activities in different seasons:
  <dt> Winter:
   <dd> Indoor: Swim, racketball, aerobics.
   <dd> Outdoor: ski, snowboarding, ice fishing.
  <dt> Spring:
  <dt> Summer:
   <dd> Indoor: Swim, racketball, aerobics.
   <dd> Outdoor: soccer, fishing, baseball.
  <dt> Autumn:
</dl>
gives the following result:
Activities in different seasons:
Winter:
Indoor: swim, racketball, aerobics.
Outdoor: ski, snowboarding, ice fishing.
Spring:
Summer:
Indoor: swim, racketball, aerobics.
Outdoor: soccer, fishing, baseball.
Autumn:

Color Back to the top

There are many places we can choose colors in the HTML documents. There are:
<body vlink="#ff33FF" link="green" TEXT = "#330099"
      BGCOLOR = "pink">

<font color="blue">....

All colors are generated by mixing three primary color: Red, Green, Blue.

<font size="6">
<font color="FF0000"> Red,</font>
<font color="00FF00"> Green, </font>
<font color="0000FF"> Blue. </font>
</font>
Such method is called RGB color Model.

This is a very useful reference page for colors: Colors and their values in HEX.

Image Back to the top

The northern continent of the Western Hemisphere, extending northward from the Colombia-Panama border and including Central America, Mexico, the islands of the Caribbean Sea, the United States, Canada, the Arctic Archipelago, and Greenland. This is supposed to be a map of North America North America is roughly wedge shaped, with its broadest expanse in the north. Most of its bulk is in the middle latitudes, with a considerable northern section in the Arctic and a narrow part around the tropic of Cancer. The continent sprawls east-west across some 176° of longitude, from longitude 12° west at Nordost Rundingen (Northeast Foreland) in northeastern Greenland to longitude 172° east at the western extremity of Attu Island, Alaska. Its north-south extent is some 69°, from latitude 83° north at Cape Morris Jesup in eastern Greenland to latitude 14° north in southern Mexico. This is supposed to be a map of North America North America is bordered on the north by the Arctic Ocean; on the east by the Atlantic Ocean; on the south by the Gulf of Mexico, Central America, and the Pacific Ocean; and on the west by the Pacific Ocean. The area of the continent is 23.7 million sq km (9.2 million sq mi). This is supposed to be a map of North America The outline of North America is exceedingly irregular; some extensive coastal reaches are relatively smooth, but by and large the coastline is broken and embayed, with many prominent offshore islands. The continent has three enormous coastal indentations: Hudson Bay in the northeast, the Gulf of Mexico in the southeast, and the Gulf of Alaska in the northwest. There are many small islands near the eastern and western coasts, but the most prominent islands are in the far north. This is supposed to be a map

The <img> tag together with its attributes control the appearance of images.

<img src="NorthAm.jpg"
    alt="This is supposed to be a map"
    title="This a map of North America"
    BORDER="1"
    height="80"
    width="100"
    hspace="20"
    vspace="5"
    align="center">

Some common image formats:

  file extention     stand for  
  BMP BitMap
  GIF Graphics Interchange Format
  JPEG Joint Photographic Experts Group
  JPG (same as JPEG)
  PNG Portable Network Graphics
  PCX PC Paintbrush
  TIFF Tagged-Image File Format

When align is assigned to a value "right" or "left", the text will wrap around the image.

<img src="NorthAm.jpg"
    alt="This is supposed to be a map"
    title="This a map of North America"
    BORDER="1"
    height="240"
    width="300"
    hspace="20"
    vspace="5"
    align="right">
For example:

Natural RegionsPrint section

This is supposed to be a map Text source from http://encarta.msn.com/

North America can be divided into five major natural regions. The eastern half of Canada, as well as most of Greenland and sections of Minnesota, Wisconsin, Michigan, and New York in the United States, are part of the Canadian Shield (or Laurentian Plateau), which is a plateau region underlain by ancient crystalline rocks. The region has poor soil, and dense forests cover much of its southern part. A second region is made up of a coastal plain in most of the eastern United States and Mexico. In the United States the coastal plain is bordered on the west by a third region, comprising a relatively narrow cordillera of mountains and hills, notably the rounded Appalachian Mountains. A fourth region consists of the central portion of the continent, from southern Canada to southwestern Texas, which encompasses an extensive lowland that has experienced alternating periods of submergence beneath the sea and uplift, with the result that it is deeply covered with layers of sedimentary rock. It is not an uninterrupted flatland but includes much undulating and even hilly terrain, such as the Ozark Plateau. The western portion is made up of the Great Plains, which slope upward to the foot of the Rocky Mountains. This is supposed to be a map The fifth, and westernmost, region of North America, taking in most of Mexico, is an active zone of mountain building; its recent geological history is dominated by crustal movements and volcanic activity. Adjacent to the Great Plains in the United States and Canada are the Rocky Mountains, which are geologically related to the Sierra Madre Oriental range of Mexico. To the west is an area of scattered basins and high plateaus, including the Interior Plateau of British Columbia in Canada, the Colorado Plateau and the Great Basin of the United States, and the vast central plateau of Mexico. Along the Pacific coast are a number of lofty mountain systems, extending from the Alaska Range to the Sierra Madre Occidental and Sierra Madre del Sur of Mexico. In between are ranges such as the Coast Mountains of British Columbia and the Cascade Range, the Coast Ranges, and the Sierra Nevada of the United States. Interspersed are some low-lying areas, notably the fertile Central Valley of California. The highest point in North America, Mount McKinley, or Denali (6,194 m/20,320 ft), is situated in the Alaska Range, and the lowest point, 86 m (282 ft) below sea level, is in Death Valley, California, a part of the Great Basin.

Sound Back to the top

There are two types of audio information used on the Internet.
Streaming audio:
The source of a streaming audio is like an ordinary radio station but uses the Internet as its broadcasting media.
Sound clips:
Sound is prepared in a file; it is known as static audio because the audio file is stored on the computer, and one can retrieve it whenever he/she wants. The entile file has to be completely downloaded before we can start listening to the sound.

Some common sound clips formats:

  file extention     stand for  
  AU AUdio
  WAV WAVe form
  MID MIDI: Musical Instrument Digital Interface
  AIF AIFF: Audio Interchange File Format
  MP3 MPEG-3: MPEG Audio Layer 3
Moving Picture Expert Group
  WMA Windows Media Audio

<EMBED> Tag

<embed src="hotel_cal.mid"
    autostart="false"
    height="20"
    width="500"
    volume="100"
    hidden="false"
    loop="1">

Hotel California
(hotel_cal.mid 68KB)
Hotel California
(Hotel_California.wma 7651KB -- not available here)

<BGSOUND> Tag

MS IE 3.0+ uses this tag to play background music when the page is open. This tag must be placed in the head section. Netscape does not support this tag.
<head>
..........
<bgsound src="hotel_cal.mid" loop="1">
..........
</head>

Back to the top