Software Interest Group

• Schedule
• Documentation
• Resources
• Thanks

Intro Web-page design lecture notes • Sep. 5, 2007

Why create web pages at all?

• Potential employers want to see your CV, papers, and general web savvy.
• Collaborators want to read your preprints.
• Students want to see your course policy, homework list, etc.
• It's the 21st century!

Markup

• HTML files are mostly just plain text, with a few special symbols called markup tags, usually contained in start-and-end pairs. Example: <i>italic text</i> 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) and those that display italic text (e.g. web browsers and WYSIWYG editors — including what you're looking at right now!).
• Most important tags
• A template file: right-mouse and use View Page Source.

Directories and folders

• NFS:
  • Your home directory is stored on a machine in the server room. For example, /data/u5/kerl 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, /u5/kerl on host gila, or iguana, or anupama, or ... .
  • Access it from the Linux command line as $HOME or ~ or ~kerl (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 www which also sits in the server room) sees the same directory tree you do.
  • Your home directory already contains a subdirectory named $HOME/pub_http_internet.
  • When a client (a web browser) asks the Web server for http://math.arizona.edu/~kerl/doc/swigweb/index.html, this URL is chopped up and reassembled:
    • The http://math.arizona.edu part is what got this particular web server's attention in the first place.
    • The ~kerl part is replaced with the path to user kerl's home directory.
    • The subdirectory pub_http_internet is silently inserted. Note that this means web browsers cannot see your entire home directory — only the stuff you put in this special directory.
    • The rest of the URL, namely, doc/swigweb/index.html, is appended to that.
    • The full NFS path is ~kerl/pub_http_internet/doc/swigweb/index.html.
    • 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 index.html in that directory. If so, it will send the browser back a copy of that file.
  • If not, the web server will send the client a directory listing. For example: http://math.arizona.edu/~kerl/doc. (Some web servers won't generate directory listings, e.g. members.cox.net.)

Using the template

• While logged into a Linux machine (e.g. in one of the computer labs), point your browser to the template file http://math.arizona.edu/~swig/documentation/webpages2/sample-home.html and save it as ~yourusername/pub_http_internet/index.html.
• Try to load the file as http://math.arizona.edu/~yourusername If you get "permission denied", then at the command line, type: chmod 744 ~yourusername/pub_http_internet/index.html
• Edit the file ~yourusername/pub_http_internet/index.html, 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.

Hyperlinking

• 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 <a href="http://math.arizona.edu">Department</a>.
  • 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>.
• Backlinks:
  • 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.

Tools

• 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.
• WYSIWYG:
  • Mozilla composer (Linux/Windows)
  • ooweb (Linux)
  • MS Word (Windows). Make sure to do Save As HTML.
• Fancy:
  • Quanta (Linux)
• Regardless, always try to view your pages on a few different browsers: Firefox on Windows, Explorer on Windows, Mac.

Publishing

• 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 file://C:\My Documents\index.html or whatever.
  • 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 look OK.