getting set up | simple text | anchors/links | images | lists | advanced topics
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).
Before a browser can read your file, you will need to set
file permissions. Go to your home directory then enter
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
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
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
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.
Ok, here is a rather short HTML document:
The above document would look like:
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.
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.
chmod 751 .
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.]
chmod 751 public_html
chmod 644 public_html/index.html
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.)
http://www.physics.utah.edu/~user/my_other_file.html
firefox file.html
This will cause the browser to load up with a display of file.html.
A simple HTML document.
<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.
<head>
<title>HTML Example</title>
</head>
<body>
<h1>An HTML Example</h1>
<p>
Hello,
world <i>wild</i> web!
</body>
</html>
An HTML Example
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.) 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> |