Physics 3730/6720 Brief Introduction to HTML

by Benjamin Bromley (2000)

examples | overview of commands | hints

getting started | simple text |

HTML--hypertext markup language--is the language of web browsers. It is essentially a set of instructions indicating how to display text and images to a user, and how to enable the user to easily access other such instruction-sets on the internet.

There are alot of resources available on the internet and one would do well to seek them out. One way to learn about specific features of HTML or web-page design is to find pages which are similar to your desired layout and to view the page source with your browser.

This document contains some rudiments of html, with instructions for how to set up a homepage. These may be valid only locally as different systems are set up according to individual security needs (among other things).

Getting started.

Setting up your homepage in your class account.

On a unix system, cd to your home directory and type
mkdir public_html
Then create a text file (see below, for example) using emacs, and call it index.html. Either create the file directly in your public_html directory or copy it there from another directory with cp.

Before a browser can read your file, you will need to set file permissions. Go to your home directory then enter

chmod 751 .
chmod 751 public_html
chmod 644 public_html/index.html
This insures that the world has permission to read your HTML files. [Here is how chmod behaves. The 3 digits of its first argument correspond to you [owner], a group (same as you in our case), and the world, respectively; the numerical value of the digit gives the permissions. For example, the "7" means read+write+execute permission (read=4 + write=2 + execute=1), while a "4" means read-permission only. For directories "execute" means enter, "read" means to list the contents, and "write" means to add, modify and delete files in that directory. So 751 on a directory allows others to enter the directory and access files as long as they know the name of the file.]

Once you have set the permissions for a directory or file, they remain until you change them. For each file you create in your public_html directory, you must set permissions, just as you do for index.html.

To see what your homepage looks like, fire up your browser and enter a URL (Universal Resource Locator) of the form "http://server.domain/~username"; specifically, in the current URL or "open location" field of your browser, type

http://www.physics.utah.edu/~user
where "user" is your physics username. The index.html file is read in by default. The public_html directory is also a default. (But notice that the URL drops public_html.)

If you wish to view a different file, e.g. my_other_file.html, (or make reference to it within an HTML document) then place that file in your public_html directory and use the URL

http://www.physics.utah.edu/~user/my_other_file.html

Alternatively, you may be able to view your file directly from the browser without having to worry about directory defaults or permissions. Use the "Open...document" menus in your browser or start up a new browser process from a shell using

firefox file.html
This will cause the browser to load up with a display of file.html.

If you have trouble, please contact the instructor or the TA. But first, consider the following:

Please recheck the permissions on your home and public_html directories. Make sure you have saved your changes. Then use the reload (or refresh) button on your browser to force it to download your new version, rather than using its previous cached version.

A simple HTML document.

Ok, here is a rather short HTML document:

<html>
<head>
<title>HTML Example</title>
</head>
<body>
<h1>An HTML Example</h1>
<p>
Hello,
world <i>wild</i> web!
</body>
</html>
The things in the angular brackets are called tags. They are commands, usually related to document formatting, that any "compliant" browser can interpret. Upper and lowercase tags are equivalent. Most tags come in "start" and "end" pairs. The end tag starts with a slash /. For example, the full HTML document is bracketed by tags <html> and </html> (to signal the browser that it is indeed an HTML doc); similarly for the header (with title info) and body of the document. The <h1> denotes a Heading/section title (the "1" is the most prominent, large font; "2" would be smaller) while <p> tag denotes a paragraph.

The above document would look like:

An HTML Example

Hello, world wild web!

The title "html example" would likely be displayed on the title bar of the browser, not in the document itself. Note that line breaks and spaces (no matter how many in a row) are treated as a single space between words.


Some important commands.

A good way to learn more about HTML tags is to look at the page source. (Look for the "page source" selection in one of your browser pull-down menus.) Pick a simple document and be sure the document you are viewing is HTML and not something else. HTML documents have the standard file name extension .html or .htm. Here is a list of commonly used HTML tags. For further examples, please look at
and its source.
tag purpose
<HTML> ... </HTML> Surrounds the entire document
<HEAD> ... </HEAD> Surrounds the page header
<TITLE> ... </TITLE> Page title. Put in header.
<BODY> ... </BODY> Surrounds the body of the document.
<H1> ... </H1> Main section or document title.
<H2> ... </H2> Subsection title.
<H3> ... </H3> Subsubsection title.
<H4> ... </H4> Paragraph title.
<P> Paragraph break.
<BR> Line break.
<B> ... </B> Boldface.
<I> ... </I> Italics.
<A> ... </A> Create or refer to a link. See html-simple.html
<IMG> ... </IMG> Display image. See html-simple.html
<UL> ... </UL> Unordered list. Items are tagged with <LI>
<OL> ... </OL> Ordered list. Items are tagged with <LI>
<LI> List item. Used with <UL> and <OL>


Hints

Please let the instructor know of any difficulties you may be having. This section will be updated as problems arise. For now, the best hint is to look at page source code with your browser....


This page is maintained by:
Carleton DeTar detar@physics.utah.edu
Last modified 27 March 2017