I'm terrible with analogies, so I'm going to give you just the one throughout this whole chapter. Skip the first paragraph if you already know what HTML is and what it does, for the ``teach me something already, dammit'' section of the chapter. But if you're unfamiliar with what HTML is, do read on.
HTML is the language that is used to write web pages you see on the internet. It is basically a formatting language, which can turn a plain text document into something nice and presentable, including graphics and links to other web pages, with the help of a browser such as Internet Explorer or Netscape. I would ask you to think of it in terms of using Microsoft Word's little formatting buttons on the toolbar at the top of the screen, but HTML is a little more stubborn than Word - it needs some extra work on your behalf, just like an authentic English cottage rose garden, or a complete Australia Post stamp collection which has been maintained since 197513.1.
A browser, by the way, is a program that will convert the HTML gobbledygook you've written into something formatted, swish and pretty so that others can admire it too. By far the most common browser around is Microsoft's Internet Explorer [insert huge debate about Netscape, Microsoft and the antritrust case right here, baby.] If you're keen on making your website browser-independent, you'll need to keep in mind that there are other browsers being used, like Netscape, Mozilla, Opera, Safari and the text-only Lynx.
Something that looks great in MSIE may not look so great in Netscape, and will definitely look even worse in Lynx if it's composed purely of graphics. Text alternatives for your graphical pages, or those that are heavily formatted, are a good idea.
But back to the HTML. What you need to be able to publish your own web site is: a) a place to store your files, and b) the HTML to format those documents or files into something presentable.
Luckily, ProgSoc members get an account on ProgSoc servers where you can store files for a web site. You can also store files on your Faculty of IT account, if you're doing a faculty course or subject at UTS. And hopefully you'll also be able to get the skills to write your own HTML for your web site from this chapter.
Now, to store your web site on your ProgSoc or IT account, you'll need to create a directory in your account called public_html. In that directory you'll need to make a file called index.html or index.htm, like so:
[aperson@ftoomsh]$ mkdir public_html [aperson@ftoomsh]$ cd public_html [aperson@ftoomsh]$ vi index.html
It needs to be index.html because if someone types in an address such as http://www.progsoc.org/˜example/, which is not a particular file but a directory, the web server will look for a file called index.html and serve that.
If you don't make an index.html or index.htm file, your visitor will be presented with a message from the server saying the file doesn't exist. Note that this doesn't happen if your visitor types in the full address, http://www.progsoc.org/˜example/page.html, but human beings tend to be lazy, and try to get away with doing the least amount of work possible to achieve something13.2.
So even though your page exists, at home.html, because you've done things your own creative way your visitor won't be able to see your work of art.13.3
You can save yourself this heartache, by following the index.html convention for every new site you make, and for every new folder that you store your HTML files in.
But off my digressing path -- once you've created your index you'll need to change the permissions of the file and any directories that your files are stored in to readable (r) for group and others so that everyone can view them. If they're CGI scripts then they'll need to be executable (x) for group and others as well. Generally,
[example@ftoomsh]$ chmod 755
should do the trick, or if you want to give everyone read and execute permissions to everything in your public_html/ directory, type
[example@ftoomsh]$ chmod -R go+rx public_html
If you're using your FIT account, make sure your home directory is executable for group and others as well. Type
[example@charlie]$ chmod 711 .
while in your home directory13.4. ProgSoc home directories seem to be executable for group and others by default (in my experience) but I may be wrong. Check the permissions of your home directory by typing
[example@ftoomsh]$ ls -ld .
while in your home directory. If all appears to be well, we're ready to start with the HTML.
HTML is ever-evolving, and let me tell you there's been a hell of a lot of advancement since the last TFM was written :-) There's no possible way that all of the HTML tags known can be listed here, but there are several comprehensive indexes and tutorials on the net, which can help you if you're stuck on any concepts, or want to find a particular tag or attribute.
Now for the brave souls who haven't abandoned ship...
HTML tags work like brackets, and their logic is very simple. If you 'open' a tag <i> for example (which stands for italics) and write this sentence:
The word <i>italics</i> will be italicised.
Then...well, the word italics will be italicised. Neat, huh? However, if you wrote:
The word <i>italics will be italicised.
Then the rest of the sentence after the word ``italics'' would be in italics. That's because you didn't ``close'' the tag, with </i>. A command that is opened with <command> should always be closed (eventually) by the </command> tag. As with all rules, there are some exceptions, but don't fret - we'll cover those later.
You can also nest tags, like so:
The word <b><i>italics</i> will be bolded and italicised</b>.
and your tags can also have attributes, or options, which you specify inside a particular tag when you open it. For example, the <hr> tag stands for horizontal rule, and it will rule a line across your page which is the full width of your browser. But by adding just one nifty attribute, you can make it 80% the width of your browser window.
voila! There's no real limit to the number of attributes that you can add to a particular tag either13.5. The aforementioned HTML compendium has an extensive list of attributes that are available with a particular HTML tag, and there's a list of basic attributes further on in this chapter. Experiment and see what your page looks like in different browsers.
These are the basic tags that you really can't do without; almost any document needs these with varying frequency.
<META name="author" CONTENT="Daphne Chong"> <META name="description" CONTENT="TFM's HTML chapter"> <META name="keywords" CONTENT="HTML, guide, tutorial"> et al.
<A HREF="http://www.progsoc.uts.edu.au">A link to ProgSoc</A>
and the words ``A link to ProgSoc'' will be, funnily enough, a link to ProgSoc. If you were linking a page within your own site, for example: http://www.progsoc.uts.edu.au/~example/directory/page.html you can use a relative address, rather than a complete address.
Relative Address: <A HREF="directory/page.html">A link to a page</A>
will do exactly the same thing as
Complete Address: <A HREF="http://www.progsoc.uts.edu.au/~example/directory/page.html">A link to a page</A>
only the first is a lot shorter, and if you ever decide to change where you're hosting your web site (the server where your files are stored), then the first also makes your life a lot easier. You can copy your whole public_html/ directory over to your new server, and you won't have to change any links within your page. But if you moved over to http://www.newhost.com/ and all of your pages had http://www.progsoc.uts.edu.au/ linked, then you'd better get lots of caffeine and have your favourite search-and-replace editor at the ready to change them over :-)
Anchors are links within the same page. If you have a table of contents at the top, and you want to create links to the separate sections of the page you can do so like this (using our previous page.html example):
<A HREF="page.html#section1">Section 1</A>
and where the actual text of section 1 starts, you include the anchor
<A NAME="section1">Section 1</A>
then every time you clicked on the ``Section 1'' link, it would take you to the section of the page where the anchor, <A NAME="section1"> is located.
Attributes go inside HTML tags. For example,
<IMG SRC="hello.gif" border="1">.
In this instance the basic tag is IMG, and the attributes are SRC (source) and BORDER.
Many tags share the same attributes - BORDER can be used with <IMG> and <TABLE>; SIZE can be used with <HR> and <FONT>.... The cases listed below are definitely not the only times when certain attributes will work, so feel free to play around.
There is another list type which does not take the <LI> type. This is the <DL> ...</DL> list, which is the definition or glossary list. Elements for this list are <DT> For the term being defined and <DD> for the definition of the term. Like the <LI> tag, these don't have a terminator (i.e. no </LI>), the next tag automatically closes them.
Your average table might look like:
<TABLE BORDER=0 WIDTH=200 HEIGHT=400 CELLSPACING=1> <TR><TD>Example text</TD> <TD><IMG SRC="thing.gif"></TD></TR> </TABLE>Note that anything can be in a table: plain text, links, images, whatever. I could also have written that table on one line, but separating it out makes debugging easier. Believe me, it's often very difficult to find why your table isn't doing what you expect13.10. There are attributes for the <TD> tag as well. The attribute ROWSPAN=X determines how many rows deep a cell is. This is useful if you wish to align an image alongside several boxes of text. Another attribute is COLSPAN, which works the same way, except for columns instead of rows. You can use the ALIGN tag, as you would for images, and there's also a VALIGN tag which takes the values TOP, MIDDLE and BOTTOM. Another reminder: When putting images into table cells, align them using the ALIGN and VALIGN tags in the <TD> tag, rather than in the <IMG> tag. Otherwise, you will get unpredictable results.
HTML has within itself a special system for displaying characters normally used in HTML and foreign characters. Thus HTML will be able to display languages such as French, Italian, Spanish, Portuguese, German, Swiss, and Scandinavian13.16.
In general the syntax for the appropriate character is &(letter)(accent
e.g. &252; is written as ü13.17
Thus typing pâté de foie gras will show the words pâté de foie gras on the page.
The current codes are available13.18:
|Accent||Accent Code||Example||Written As|
Other characters have different codes:
Another code can be used to display a particular ASCII character, eg. if you want the ``A'', for the sake of example, one would type A (The hash symbol (#), must be used when calling the character up.)
A full list of these tags can be found on the web13.19.
The standard form of a link, as mentioned above, is the regular text link, e.g.:
<A HREF="http://www.crap.com/~crap/crap.html">The Crap Page</A>The next way is to put in a nice novelty button to click onto in order to reach the link. A slight step up, but quite okay if you want to keep things simple:
<FORM ACTION="http://www.crap.com/~crap/crap.html"> <INPUT TYPE="submit" VALUE="Visit the Crap Page!"> </FORM>This code will produce a nice button with the text which you put into the VALUE attribute. Pressing this button will link you to the address in the ACTION attribute13.20.
But if you want to go that extra step beyond, go graphic, and use a picture to link to the site:
<A HREF="http://www.crap.com/~crap/crap.html"> <IMG SRC="./images/turd.gif" ALT="[A turd]" BORDER=0> </A><I> Click the turd to reach the Crap Page!</I>Just slip in the image with the <IMG> tag between the <A> ... </A> tags. Pretty easy, provided you have the pictures at hand. Notice that I've slipped in a bit of italics there to enhance the effect of the text. Also, notice the use of the BORDER attribute, BORDER=0 ensures you don't have a blue line around linking pictures, which looks ugly.
sally:~ :1>giftoppm thing.gif > thing.ppm sally:~ :2>ppmtogif -interlace -transparent red thing.ppm > thing2.gifThis produces a GIF89a format image, which is interlaced and has all the pixels which were formerly red13.21 now being transparent (their transparency bit is set). Now that was easy, wasn't it?! Oh, you might have to add something to your paths, ppmtogif is at /usr/X11/bin/ppmtogif.
There's a few other utilities out there --- Gif Construction Kit allows you to make a gif not only interlaced and trasparent, but also animated. A Web search will probably give you a lot of sites dedicated to animated GIFs.
So, what is CGI? It stands for Common Gateway Interface. CGI scripts are special programs that were designed to make our job of being both ProgSoc members and Web page authors a hell of a lot easier13.24. CGI scripts are often used to take input or give output in one way or another: for email, locating people on accounts (a process known as fingering), showing animations, or for searches.
There are various CGI scripts located in cgi-bin directories in two of the university's servers. One such directory is at the university's main UTS server, (http://www.uts.edu.au/cgi-bin/), and our very own ftoomsh, (http://ftoomsh.progsoc.uts.edu.au/cgi-bin/). Here are a few examples: one for email, one for fingering other people's accounts and one for counting hits.
If you want to be able to use the mailing script the following code can be used13.25:
<A HREF="/email@example.com"> firstname.lastname@example.org </A>Another thing that needs to be mentioned is an extension to the address. If you want to have the email script send you your mail with a personalised subject line, you will need to use the following code :
<A HREF="/email@example.com&Subject=Home+Page"> firstname.lastname@example.org </A>You might note that the subject itself must be typed out with plus signs and not spaces. This is the necessary syntax as HTML cannot handle spaces very well. The plus signs are nevertheless treated as spaces when the mail is finally sent.
There is a mailto: protocol, which can be included in your HTML document just like any other link. The syntax is, simply enough, <A HREF="mailto:user@machine">...</A>.
The Finger script does the same thing as the finger command for UNIX - finding information about a particular user, and to see if they are currently on. The following code can be used :
<FORM ACTION="http://www.uts.edu.au/cgi-bin/finger"> <INPUT TYPE="submit" VALUE="Find me!"> <SELECT NAME="isindex"> <OPTION> email@example.com <OPTION> firstname.lastname@example.org </SELECT> </FORM>
The concept of FORMs mentioned in the above example haven't been explained in major detail here, and I don't have enough room in this chapter to go through it (I'm still learning about it, you see). Of course with this code you could modify it so that you could finger a whole lot of other people by adding more <OPTION> tags where shown in the example. But a word of caution. As the selection is made on the email address, it is necessary that you type it correctly, so that the script is executed properly.
There is, of course, the almost ubiquitous counter script. Nearly every page has some version on it. There are plain text and graphical versions, but I think the text versions are better, so that users don't see You are visitor # [image] when it fails to load the picture. To use the text version, simply include this bit of code:
&;lt!--#exec cgi="/cgi-bin/counter" -->This sets up a link to the page of the writers of the script, as well as saying how many times a page has been accessed. If you don't want the link, <!#exec cgi="/cgi-bin/counter-nl" --> should fix that13.26.
Back to table of contents