Intro to HTML
 
[prev][home][next]
Quick side note: Do we really need to know the content of this page (HTML codes, etc.)? Answer: no. However, it's worth knowing a little bit about HTML to give a better understanding of how Web pages work and what you can do with formatting in them.
 

What is HTML?
(We know this Answer: "HyperText Markup Language.") So, what do these pages that are being sent across the world by Web servers actually look like? We just saw that each page on the WWW is actually just a bunch of text (you're reading text right now) with "notes" in it to tell the browser how to display it. For example, the text in figure 1 is displayed by a browser as shown in figure 2. 

 This is
 <strong>strong</strong><br>
 There is a space here:<p>
 <a href="index.html">This is a
 link</a> to the "Workshop
 Home" page, <code>index.html</code>.
    This is strong
There is a space here:

This is a link to the "Workshop
Home" page, index.html.

 Figure 1: HTML Markup      Figure 2: Markup Displayed

The "notes" in figure 1 (shown in blue) are HyperText Markup Language (HTML) tags. An HTML tag is anything between angle brackets: e.g., <p> or <strong>. The tags <code> and </code>, for example, tell the browser to display any text between them (in teal) in computer code-like font.

Note that we even need to say where to put a line break or paragraph spaces (with <br> and <p>)! The Markup tells everything about the formatting of the page!

So: If we want to create Web (HTML) documents, by hand without using a program like DreamWeaver or saving things as HTML from something like Microsoft Word, we just need to learn what the tags are and what they do. No problem.

The files we create containing the markup are plain old text files: which can be saved from Simpletext, Notepad, emacs, vi, or even Microsoft Word (if we select File -> Save As and tell it to save as Text with Line Breaks). 

 <html>
 <head>
 <title>title of document</title> 
 </head>
 <body>
 text of document here
 </body>
 </html>
 Figure 3: Basic HTML Document 
(A follow-up note: Why might we bother to know something about HTML before trying to write Web pages? A couple of reasons: (1) editors and word processors aren't always on top of the latest HTML, (2) it's easier to figure out why they can or can't do things on the page with a knowledge of HTML, and of course (3) coding it all yourself is fun and allows greater control of what is displayed. This is not to say that one shouldn't use and editor.)

Basics of HTML
(If you don't care to try and learn HTML, skip to the end.) The basics of HTML (grand flourish here): every document looks like that shown in figure 3. Know this, and you know everything there is to know, at least sort of. In fact the only thing that is left after this is understanding

  1. Closing tags: tags enclosing text always have closing tags, which are the same tag with a "/": <tag>enclosed text</tag>.
  2. Attributes of tags: adding descriptors that modify how a tag behaves -- for example, changing the <body> tag to <body bgcolor="blue" text="white" link="yellow" vlink="orange"> to make the background color of the page blue, the text white, links yellow, and visited links orange. Attributes always have the form attributename="value". To be safe, always put values in quotes.
  3. Including and Linking to Other Files: To make a link to another file, use the anchor tag:
    <a href="URL of page">link text</a>
    For example, the HTML <a href="02labinfo.html">link to lab info</a> is a link to the file 02labinfo.html in the same directory on the same Webserver as the current page. It's displayed as: link to lab info.

    To link to a page that's on a different server, use the full URL:
    <a href="http://www.nebrwesleyan.edu/">link to NWU</a>
    is link to NWU, a link to the Wesleyan home page.

    Images are included as files in a similar manner. In this case we use a img tag:
    <img src="URL of image file">
    For example, the tag <img src="images/on-symbol.gif"> includes the image on-symbol.gif from the directory images immediately below that in which the current file is found. It produces the following: . There are several attributes of the img tag:

    <img src="images/on-symbol.gif" alt="on-symbol">:   on-symbol
    <img src="images/on-symbol.gif" align="top">:   
    <img src="images/on-symbol.gif" align="middle">:   
    (specifying align="left" or align="right" causes the image to "float" on one or the other side of the page, with text wrapping around it.)
  4. The Rest of the Tags: Once you have all that down, the only remaining question is what the rest of the tags are. I have several lists of tags that I've put together, for example, this list and information about anchor tags, images, forms, frames and more frames from a course I did on Web publishing a while ago. If that weren't enough, the resources page has other sites to check out.

Important Stuff
  • Web pages are just plain text files with HTML markup that tells the browser how to display the page,
  • They can be created by learning the HTML, by using a word processor that can save files as HTML, or by using a Web Editor.
  • There are some good reasons to have at least a hazy idea of what HTML is.
[ prev ] [ home ] [ next ]
Gavin's HHMI 02 Web Workshop: Intro to HTML
Last Modified: Fri May 31 10:04:14 EDT 2002
Comments to glarose@umich.edu
©2002 Gavin LaRose, UM Math Dept