Indiana University
Division of Continuing Studies

March 26, 2001 (Module One)


Do you Yahoo?

Behind every web address stands a web server, likely an Apache web server, perhaps running under Unix. For every browser request, the reply comes encoded in HTML: the hypertext markup language that allows seamless interconnection of information over the network.

Not all HTML is typed by humans, some HTML pages are the output of programs written by humans. But the encoding is always the same. This class will introduce you to Unix, HTML, and the Apache web server. At the end of this module you should be able to

We start with HTML. To learn HTML you don't need a network connection. You only need a browser. (So one other key question becomes: do you know your browser?) We start with a review of basic HTML, which we summarize below.

1. Basic Document Structure

<html>
  <head><title>This is a title</title></head>
  <body>
    This is my first HTML document. 
  </body>
</html>
2. Attributes and values

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=white>
    This is my first HTML document. 
  </body>
</html>
3. Font Formatting

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=white>
    This is my first HTML document. <p>

    This <font color=red>word</font> will appear in red. 

    This one will be 
    <font size=+6>bigger</font> and somewhat 
    <font color="#0066ff">blue</font>. 
  </body>
</html>
4. Headings

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=white>
    Here are some headings. 

    <h1> Heading One   </h1>
    <h2> Heading Two   </h2>
    <h3> Heading Three </h3>
    <h4> Heading Four  </h4>
    <h5> Heading Five  </h5>
    <h6> Heading Six   </h6>
    
    This is my first HTML document. 
  </body>
</html>
5. Lists

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=white>

  Here some of the Pacers of last year: 

  <ul>
    <li> Mark Jackson  
    <li> Chris Mullin
    <li> Dale Davis 
    <li> Antonio Davis 
  </ul> 

  The order last year was: 

  <ol>
    <li> Los Angeles Lakers 
    <li> Indiana Pacers 
    <li> New York Knicks 
    <li> Utah Jazz 
  </ol> 

  </body>
</html>
6. Paragraphs, breaks, and preformatted text

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=white>

    <p> New paragraph. 
    <p> New paragraph. 
    <p> New paragraph. <br> A line break. 
    <br> Another line break. 
    
This text  
will be rendered
normally, on one line. <p> 

<pre>This text  
appears in between 
preformatting tags
and therefore 
will stay
as 
typed.</pre>

    You get the idea. 

  </body>
</html>
7. Images (size, borders and alignment)

<html>
  <head><title>This is a title</title></head>
  <body>
    <img src="http://www.cc.columbia.edu/low3.gif">
  </body>
</html>
You can try to align the picture (perhaps adding some text on the page also)
<img src="http://www.cc.columbia.edu/low3.gif" align=right>
You can try changing the size of the picture:
<img src="http://www.cc.columbia.edu/low3.gif" width=34 
                                               height=24>
7.1 For the fun of it: applets

  1. Here's one (very nice) example.

  2. Here's a more involved one.

8. Links

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=whiteX>

    <img src="http://www.cs.indiana.edu/classes/a113-dger/left.gif"> Do 
    you <a href="http://www.yahoo.com">Yahoo</a>? <p> 

  </body>
</html>
9. Tables

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=white>
    <table border cellpadding=6>
      <tr> <td> (1, 1) </td> <td> (1, 2) </td> <td> (1, 3) </td> </tr> 
      <tr> <td> (2, 1) </td> <td> (2, 2) </td> <td> (2, 3) </td> </tr> 
    </table>
  </body>
</html>
Here's an example of cells spanning more than one column and more than one line.

<html>
  <head><title>This is a title</title></head>
  <body bgcolor=white>

    <table border cellpadding=6>
      <tr> <td rowspan=2 align=center> One </td> 
           <td colspan=2 align=center> Two </td> 
      </tr> 
      <tr> <td align=center bgcolor=lightgrey> Three </td> 
           <td align=center> Four </td> 
      </tr> 
    </table> 

  </body>
</html>
10. Frames

A web page is displayed one at a time - unless you use frames. Using frames allows you to display more than one web page at a time, although they may appear to be just one page. Frames divide a browser window into sections, with each section being an HTML document. We will look at frames a bit later, in a specific context.
11. Forms

I include a fairly comprehensive form, with all the elements discussed in class.

<html>
  <head><title>This is a title</title></head>
  <body>
    <form>
    Username: <input type="text"> <p> 
    Password: <input type="password"> <p> 
    What is the capital of Italy? 
    <blockquote>
    <input type="radio" name="question"> Milan
    <input type="radio" name="question"> Turin
    <input type="radio" name="question"> Rome
    </blockquote>
    Presidents of the United States (check all that apply): 
    <blockquote>
    <input type="checkbox" name="q2"> Ross Perot 
    <input type="checkbox" name="q2"> Bill Clinton 
    <input type="checkbox" name="q2"> George Bush 
    <input type="checkbox" name="q2"> Al Gore 
    </blockquote>
    <select name="capital"> 
      <option> What 
      <option> Milan 
      <option> Rome
      <option> Turin 
    </select> is the capital of Italy. 

</form>
  </body>
</html>
Emphasis is on the GUI aspects of the elements.

Note that the form is missing some of the attributes needed for CGI.

12. Adding sound and video.

Just one example.
An example of each, as a matter of fact.
13. Cascading Style Sheets

A relatively newer way to structure HTML documents is through the use of cascading style sheets, or simply CSS for short. The idea of using CSS as a formatting tool for HTML documents was first proposed in 1996; but it is just now finding widespread use and browser support. (Sometimes the Internet doesn't move as fast as you'd like).

Cascading style sheets allow you to determine how a variety of page elements will be displayed with precision, thus removing the limitations of HTML. This applies to font sizes, page positioning, and other page formatting options. It also introduces new elements that were not possible with just HTML. We'll take a look at CSS later in the module.

14. Creating image maps

We'll work a few image map examples also, a bit later.
15. Comments

<html>
  <head><title>This is a title</title></head>
  <body>
    <!-- This is a comment. -->
  </body>
</html>
16. Validators and other resources

Here are some typical resources (I will add more later):


Last modified by Adrian German on April 2, 2001 for the IU CTED WebDev Certificate Program