Math on the Web: HTML Lesson 1 -- Building a Basic Web Page

Goals to accomplish during class

  1. Increase your fluency with LaTeX
  2. Build a basic World-Wide Web home page
  3. Make a LaTeX page with included graphics

LaTeX tips

A basic World-Wide Web home page

Your first project for the semester is to build a World-Wide Web home page and to help someone else build one. The page is supposed to contain at least one link and one image.

Today we are going to get started by building a simple home page. During the semester, you will add links and images and further information to the page, but today the goal is just to get a page that works.

World-Wide Web pages are written in HTML (Hyper-Text Mark-up Language). This language is similar to LaTeX in spirit. According to Tim Berners-Lee, the main designer of the Worldwide Web, when you design a web page, you should start by prescribing the logical design of the page, but not the visual design. Thus, you should say, "This is a level-three heading," even if you could say, "This is centered text in a fourteen point bold sans serif font." It is best, at least at the beginning, to let the browser choose how to display what you have designed. Commercial web sites use HTML to get visual effects, so this may be tempting, but it is better to postpone worrying about appearance when you are learning HTML.

In HTML, the mark-up instructions are called "tags". For example the tag that starts a new paragraph is <P> or <p>. Each tag is surrounded by angle brackets. It does not matter whether the tags are upper case or lower case. Most of the tags come in grouped pairs, which work like LaTeX's containers, such as {\em ...} or like the \begin{math} ... \end{math} environment structure. A typical example of a pair of HTML "tags" is the pair <EM>, <\EM> that is used to emphasize text. In your HTML source file you type:
</EM>this is emphasized text</EM>
On the Web browser you are now using it looks like: this is emphasized text. By convention, Web browsers use an italic font to display emphasized text, but the font choice is left to the particular browser. Notice that the end tag looks just like the start tag except that it has a slash after the left angle bracket.

Here is a template for a very basic Web page. Use the mouse to cut this template and paste it into a text editor. Then modify the information so it applies to you. Unlike in LaTeX, blank lines in HTML do not start new paragraphs, so you can use blank lines to make your input file more readable. (In HTML you must use a <P> tag to start a new paragraph in general.)


<html>

<head>
<title>A Very Basic Home Page</title>
</head>

<body>

<h1 align=center>My home page</h1>

<P> Here is some information about me.<br>
Notice that the paragraph tag &lt;P&gt; does not need the optional matching end tag &lt;\P&gt;.<br>
If you want a line break without starting a new paragraph, use &lt;BR&gt;, <br>
If you want a horizontal line as a separator, use &lt;HR&gt;.<br>
Neither &lt;BR&gt; nor &lt;HR&gt; needs a matching end tag.

<h2>This is a level two header</h2>

<OL>
<LI>This is the first item of an ordered list.
<LI>The list item tag &lt;LI&gt; is another one that has an optional end tag, &lt;\LI&gt;.
</OL>

<h3>Information about me</h3>

<ul>
<li>My e-mail address
<li>My telephone number
<li>And so on; this is an unordered list.
</ul>

</body>

</html>


Your browser should display the document title on the title bar of the browser window. Here is what will display in the browser window:


My home page

Here is some information about me.
Notice that the paragraph tag <P> does not need the optional matching end tag <\P>.
If you want a line break without starting a new paragraph use <BR>.
If you want a horizontal line (horizontal rule) use <HR>.
Neither <BR> nor <HR> needs a matching end tag.

This is a level two header

  1. This is the first item of an ordered list.
  2. The list item tag <LI> is another one that has an optional end tag: <LI>

Information about me


After you edit the HTML template, you need to save it as a file and be sure that Web browsers can find it. Each computer system has a special location where it expects to find publicly accessible HTML files. On the Rutgers-Camden servers clam and scivis, the location for HTML files is a subdirectory named html in your home directory. You may have to create the subdirectory yourself and make it world-readable and world-executable by using chmod to give the correct access permissions. Why does the subdirectory need to be world-executable? That's because the browser needs to get a list of the files in the directory, and getting the directory listing is executing the directory. Since the browser starts at your home (=root) directory, that directory also needs to be world-readable and world-executable. We'll now take care of setting permissions for your home directory, your html directory, and for the file index.html.

Move to your home directory by using the command cd at the Unix prompt. Check by using ls whether there is a directory html in your home directory. If it does not exist, then create the subdirectory now with the command mkdir html (no period after html).

Save your basic home page in this special subdirectory with the name index.html (this is a standard name for home pages). Use the "Save As" feature on your text editor: you can probably navigate to the subdirectory html, and then type in the name index.html.

There is one more step: you need to change the access permissions on index.html to make it a world-readable file. Open a terminal window, execute the command cd and then the command chmod go+rx . (the period is required). Now execute the command cd html and then the commands chmod go+rx . (again, the period is required) and chmod go+r  index.html.

Here's some explanation of the command chmod. As stated above, your home directory and the html subdirectory must be made readable and executable to everyone who should be able to read your home page, and the file index.html must be made readable to the same people. We use the command chmod to add (or remove) directory and file permissions. There are three types of operations on a file or directory: you can read, write or execute it. (Executing a directory is just getting a listing of the files in it.) There are three classes of people who need permissions to read, write or execute a file: the user (that's you), the group (which on clam would be those people who have accounts on clam), and other (the world at large). To make it possible for a Web browser to access files in your new html subdirectory, you need to make both your home directory and the new one readable (r) and executable (x) by members of the group (g) and by others (o).

The directory "." is the current directory, so the command "chmod go+rx ." adds to the people in "go" permissions rx for the current directory. From your home directory, you could have used the Unix command chmod go+rx html to add permissions to the html/ subdirectory. Since you were already in the subdirectory html/, then the command was "chmod go+rx ." or "chmod go+rx ./". Similarly, you gave permissions for making the file index.html world readable.

You can now check the permissions for the file index.html by using the command dir index.html, which should show nine symbols arranged in three groups that look like rwx r-- r-- . The first group of symbols indicates that you have permission to read, write and execute the file index.html. The second group indicates that clam users have read permission for the file and the third group indicates that everyone else also has read permission for the file.

Now test it out. Open a Web browser (Netscape Navigator, for example), click on the "Open" button, and type in http://clam.rutgers.edu/~your_user_id/ or if you are working on scivis, try http://scivis.rutgers.edu/~your_user_id/. Your home page should display in the browser. Now have your neighbor try to display your home page (this is an extra check to confirm that the file permissions are correct).

When you have time to go further, you can look at some information for building home pages from the Web Beginner's Corner at Texas A&M University. The Web Beginner's Corner has links to information (such as Tim Berners-Lee's comments on HTML style) that should interest even those who have substantial experience in the constructing Web pages.

Another practical source of information is the section on the internet on the University of Pennsylvania's Math Department home page. I recommend it.

Other tips:

A LaTeX exercise

Reading

Please go ahead and read at least the first two chapters of the textbook "HTML, the Definitive Guide" by Musciano and Kennedy

Finished?

If you have done all the in-class activities suggested above, and there is still time left, here are some other activities you can do.


/ Contents /


karel@camden.rutgers.edu
email for Martin L. Karel

Validate this URL

Valid HTML 3.2!