JMU
Hypertext Markup Language (HTML)
An Introduction


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu


Basics
Syntax
Syntax (cont.)
Versions
The Root Element
The body Element
Major Organizational Elements
Grouping Elements
Classification of Text
Embedded Content
What about Hypertext?
Important Metadata Elements
An Example

A Small Portion of a Textbook Click here for a demonstration.

htmlexamples/basics/multimedia.html 
<!DOCTYPE html>
<html>
  <head>
    <title>An Excerpt from The Design and Implementation of Multimedia Software</title>
    <meta charset="UTF-8"/>
  </head>

  <body>
    <p>
    This is an excerpt from
    <em>The Design and Implementation of Multimedia Software</em> by 
    <a href="/bernstdh">Prof. David Bernstein</a>.
    </p>

    <section>
      <h1>Sampled Static Visual Content</h1>
      <p>
      The sampling of static visual content involves the sampling of
      both the color spectrum and space (usually in that order).  The
      two are similar in that they both involve the discretization of
      continuous information.  They are different in their
      dimensionality.
      </p>

      <dl>
      <dt>Color Sampling</dt>
      <dd>
      A process for converting from a continuous (infinite) set of 
      colors to a discrete (finite) set of colors.
      </dd>
      </dl>

      <p>
      Such processes are sometimes called
      quantization schemes.  The result of color sampling (i.e., the
      discrete set of colors) is often referred to as
      a <em>palette</em>, though one has to be somewhat careful
      because this term is sometimes used to describe the set of
      actual samples and other times is used to describe the set of
      all possible samples.
      </p>
    
      <dl>
      <dt>Spatial Sampling</dt>
      <dd>
      A process for discretizing space.
      </dd>
      </dl>

      <p>
      Though there are many ways to perform spatial sampling, this
      book limits its attention to the plane and, in particular, with
      spatial sampling schemes that involve the use of a finite grid
      with cells of equal size.  In essence, one places a regular grid
      on a planar surface and assigns a single color to each cell in
      the grid.
      </p>

      <p> 
      The result of color sampling and spatial sampling is a
      matrix of picture elements (or <em>pixels</em>), each of
      which contains a single color in the palette.  Such a
      matrix is often called a <em>raster
      representation</em>. One example is
      illustrated in the following Figure.  In practice, sampled
      static visual content is usually created in one of two ways.  In
      some cases, it is created using a <em>scanner</em> that samples
      from a source of some kind (e.g., a drawing or painting).  In
      other cases, it is created on a computer by a person (who
      selects colors from a discrete set) using a
      pointing device of some kind (e.g., a mouse or a pen on a
      graphics tablet) that performs the spatial sampling.  Two common
      examples of sampled static visual content are <em>bitmapped
      images</em> and <em>bitmapped fonts</em>.
      </p>

      <figure>
        <img src="raster.png"/>
        <figcaption>
        A Raster Representation
        </figcaption>
      </figure>

    </section>
  </body>
</html>
Tabular Data
An Example of Tabular Data

A Table of Shell Commands Click here for a demonstration.

htmlexamples/basics/commands.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Shell Commands</title>
    <meta charset="UTF-8"/>
  </head>

  <body>
    <table>
      <caption>Popular Commands</caption>

      <thead>
        <tr><td>Description</td><td>CMD</td><td>Bash</td></tr>
      </thead>

      <tbody>
        <tr>
          <td>Make a directory</td>
          <td><code>mkdir</code></td>
          <td><code>mkdir</code></td>
        </tr>

        <tr>
          <td>Remove a directory</td>
          <td><code>rmdir</code></td>
          <td><code>rmdir</code></td>
        </tr>

        <tr>
          <td>Change the current/working directory</td>
          <td><code>cd</code></td>
          <td><code>cd</code></td>
        </tr>

        <tr>
          <td>List files in the current/working directory</td>
          <td><code>dir</code></td>
          <td><code>ls</code></td>
        </tr>

        <tr>
          <td>Copy a file</td>
          <td><code>copy</code></td>
          <td><code>cp</code></td>
        </tr>

        <tr>
          <td>Delete a file</td>
          <td><code>del</code></td>
          <td><code>rm</code></td>
        </tr>

        <tr>
          <td>Move/rename a file</td>
          <td><code>move</code></td>
          <td><code>mv</code></td>
        </tr>

        <tr>
          <td>Display a text file</td>
          <td><code>type</code></td>
          <td><code>cat</code></td>
        </tr>

        <tr>
          <td>Change file attributes</td>
          <td><code>attrib</code></td>
          <td><code>chmod</code></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
User Input
User Input (cont.)
An Example of User Input

A Course Evaluation Form Click here for a demonstration.

htmlexamples/basics/evaluation.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Course Evaluation</title>
    <meta charset="UTF-8"/>
  </head>

  <body>
    <form>
      <label>Department:</label>
      <select>
        <option>CS</option><option>ENG</option><option>ISAT</option>
      </select><br/>
      <label>Course Number:<input type="text" /></label><br/>
      <label>Course Title:<input type="text" /></label><br/>
      
      Textbook: <label><input type="radio" name="book"/>Excellent</label>
                <label><input type="radio" name="book"/>Satisfactory</label>
                <label><input type="radio" name="book"/>Unsatisfactory</label>
      <br/>
      Classroom: <label><input type="radio" name="room"/>Excellent</label>
                <label><input type="radio" name="room"/>Satisfactory</label>
                <label><input type="radio" name="room"/>Unsatisfactory</label>
      <br/>
      Professor: <label><input type="radio" name="prof" checked="checked"/>Excellent</label>
      <br/>
    </form>
  </body>
</html>
An Aside: Processing User Input