Intro Web-page design lecture notes
John Kerl · SWIG · Sep. 5, 2007
- Overview: Basics at the beginning; more advanced stuff at the end.
- Potential employers want to see your CV, papers, and general web savviness.
- Collaborators want to read your preprints.
- Students want to see your course policy, homework list, etc.
- It's the 21st century!
- HTML files are mostly just plain text, with a few special symbols called
markup tags, usually contained in start-and-end pairs. Example:
is displayed as italic text.
- There are two kinds of programs:
those that display <i>italic text</i>
(plain-text editors and View Page Source)
those that display
italic text (e.g. web browsers and WYSIWYG editors — including
what you're looking at right now!).
- Most important tags
- Template file; right-mouse and use View Page Source.
- Directories and folders:
- Your home directory is stored on a machine in the server room.
on host grad.
- You can see it from any Linux machine you log into. This is
because we use NFS (Network File System) and basically you don't
need to think about it. For example,
on host gila, or iguana, or anupama, or
- Access it from the Linux command line as
(replace kerl with your
username). If the user is named homer, then that user's
home directory is ~homer.
- The main point I want to make about NFS for today is that you
can edit your web pages from any machine on the math network.
- Web-server and browser views:
- The Web server (a computer program running on host
which also sits in the server room) sees the same directory tree
- Your home directory already contains a subdirectory named
- When a client (a web browser) asks the Web server for
this URL is chopped up and reassembled:
part is what got this particular
web server's attention in the first place.
part is replaced with the path to user kerl's home
- The subdirectory
is silently inserted.
Note that this means web browser's cannot see your entire
home directory — only the stuff you put in this special directory.
- The rest of the URL, namely,
is appended to that.
- The full NFS path is
- The server sends a copy of that file over the internet back to the browser,
and the browser displays it. In particular, stuff between
<i> and </i> is converted to
italics and so on.
- Extra index.html rule: If the client asks for a directory, then:
- The web server will check to see if there's a file named
in that directory. If so, it will send the browser back a copy of
- If not, the web server will send the client a directory listing.
(Some web servers won't generate directory listings, e.g.
- Using the template:
- While logged into a Linux machine (e.g. in one of the computer labs),
point your browser to the template file
and save it as
- Try to load the file as
If you get "permission denied", then at the command line, type:
chmod 744 ~yourusername/pub_http_internet/index.html
- Edit the file
perhaps using Applications -> Accessories -> Text Editor on Ubuntu
machines (other alternatives are explored below) and change the
information to match your own.
- As my great-grandpappy used to say, "Save frequently and often."
- Then push reload in the browser window to view your changes.
- When it looks serviceable, send e-mail to system at
math.arizona.edu so that we may link to it.
- To create hyperlinks, you need to be aware of markup tags and directory structures
as described above. Hence HTML = hypertext markup language.
- First option: a full URL.
Department is implemented by
- You need to type in the http:// here, always.
- You can put whatever you want
between <a href=...>
and </a> — e.g. "click here" or something entirely misleading.
(This is how phishing scams work — they put amazon.com or
paypal.com or somesuch as the displayed text, but the actual
hyperlink takes you to something much nastier.)
- Second option: a relative path.
- File in same directory:
<a href="otherfilename.html">link text here</a>
- File in subdirectory:
<a href="subdir/otherfilename.html">link text here</a>.
Always do this relative to where the file containing the link is.
- File in parent directory:
<a href="../index.html">link text here</a>.
- More important than you think.
Q: "Why can't they just push the back button?"
A: They might not have come from where you think. Maybe they
got to this page from a bookmark, or a link embedded in an
e-mail message, etc.
- Example: Put this at the bottom of pages (other than your main index.html file):
<a href="../index.html"> <-- Back to my home page</a>.
- What's "back" from your home page? You might include links to the department and/or the university:
<a href="http://www.arizona.edu"> UA </a>,
<a href="http://math.arizona.edu"> math department </a>.
- Always test out your hyperlinks. It's easy to copy files around from one directory to another
and forget to change the links inside them.
- Plain-text editors (emacs, vim, gedit, Notepad).
- You always have two windows open: editor and browser.
- Edit and save in the editor window.
- Push the Reload button in the browser window.
- Mozilla composer (Linux/Windows)
- ooweb (Linux)
- MS Word (Windows). Make sure to do Save As HTML.
- Regardless, always try to view your pages on a few different browsers: Firefox on Windows,
Explorer on Windows, Mac.
- Use Linux and simply work in the directory tree, as discussed above.
- Use Windows:
- Compose with Notepad, Word, fancy HTML tools.
- Preview by pointing your web browser to
- Transfer to your Linux account using pscp or psftp.
- Be careful about what directories you're in on the Windows and Linux sides.
(I find this method very error-prone.)
- For text-mode programs such as sftp: pwd and cd
refer to the remote (Linux) directories. !cd and
lcd refer to the local (Windows) directories.
- For drag-and-drop programs such as WinSCP: less error-prone since
you can navigate folders.
- Warning: Windows is case-insensitive; Linux and other Unix-like
operating systems are case-sensitive. And, our web servers run on
Linux. What this means to you is that if you have a file called
mypic.JPG on your C: drive, and an HTML file with
a link to <img src="mypic.jpg">, then when you look
at the HTML file using your browser on your PC it will work fine.
But when you transfer those files to your account, the image file
will not be found when other people access your pages. So,
always surf to your URL after publishing to make sure things still