Making a web-page is more than creating a document and posting it! The purpose of this workshop is to provide an overview of what is involved, how to do things the easy way, but still for them to turn out proper and acceptable (from a technical, not a content, aspect!).
If there were textbook resources for this workshop, they would be:
1. Realization 1: We have to let go of the appearance! The user has more or less control of the appearance of our web-site!
2. Realization 2: On-line, imitation is the highest form of flattery. It's OK to copy ideas:
3. Making a web-page: to code or not to code? Well, it's a good idea to have an idea, but go the faster way! Use an html editor or whatever it may be called. Hyper-text markup language (html) is the most popular code for web publishing.
Free popular html editors:
You can define:
The language of a page is defined in the top line. Define the language and/or character set in which you are posting! Most editors will do this automatically.
Because of the lack of certainty as to the appearance of a document and especially the layout, prefer the pdf format to post long text or reprints.
You can organize your text in tables:
Tables make an excellent text organizer! See an example at: http://www.soest.hawaii.edu/oceanography/courses_html/OCN201/.
You can select a piece of text or an image, so that when you click on it with a mouse it takes you to another file. This file could be another page of your web-site or another web-site, it could be an image or it could be a pdf file. Linking to files such as MS Word and Excel documents is very tricky! I believe that recent versions of MS Internet Explorer can open such documents if MS Office is loaded on the machine used.
The preferred format of an image on-line is called jpg - it is a compressed type of image, so it does not take a lot of memory. Another type of image you want to use is the gif format - it allows you to have a transparent background which is useful if you are using different colors for various pages on your web-site. When putting an image in your web-page, always define:
This is an image definitions window of Adobe Photoshop 5.5. What a web browser needs to know is the above set of figures. The one below concerns print.
4. The web-site structure: technically, you could just throw everything in one folder, but it's usually easier to organize it. Here's an example:
The above example is from my hard disk. I have an exact copy of my web-site on my hard disk and I can transfer files back and forth onto the server (see below) while maintaining the same structure. Every directory should have a file called "index.html" or "default.html" (at SOEST and UH servers it is the former). Just entering the name of the directory will load this file automatically.
5. Loading it up:
To load a file onto a server (a machine that can take a request from a browser for a web-page and deliver) you need:
To connect, you will need to enter your user name and password. Then, you can move files or whole folders from your hard disk or other storage devices onto the server. But you have to make sure it can be seen, by settting the permissions properly, and you can do so for the owner (you), the group (UH, SOEST etc.), and others separately! The example below is from SSH (Windows):
Make sure you know what your url (uniform resource locator). It's not obvious! For example, a file with the name random.html that sits in your public_html directory can be accessed at http://www2.hawaii.edu/~yourusername/random.html.
Your web-site has to be accessible to people with disabilities, who use special web browsers to look at web-pages. You can check by entering the relevant web address in the free on-line feature of Bobby here: http://bobby.watchfire.com/bobby/html/en/index.jsp. Alternatively, you can make sure that your web-page is validated by w3c here: http://validator.w3.org/.
Place on your web-page (typically at the bottom) some indication of the last date on which you modified the web-page, along with your name. This way, visitors can say whether something that looks odd to them is actually dated.
A common problem is broken links, i.e. links that do not work anymore. Check for broken links by using Checklink from w3c, available here http://validator.w3.org/checklink, and fix them!
Last modified: August 2005