Greetings. Here is my HTML guide. Started on March 5, 1998. Let's start at the very beginning. Firstly, a few words on HTML. HTML stands for "HyperText Markup Language". And it is exactly that. Hypertext is a fancy way of describing documents that are "linked" in the sense that you can get from one document to another by using "links" (for example, you click on a link in Netscape and you travel to another document). Markup language ? Well to explain this, we require a brief discussion regarding what goes on behind the scenes. Basically, a HTML file is a text document which consists of a mixture of text that is included in the document, and instructions that "tell" the browser how to display the text. For example,
<CENTER> <BIG> HELLO </BIG> </CENTER>
TElls the browser to print the word "Hello " in the center of
the page. It looks like this:
There are several other instructions to tell the browser other things
such as including inline graphics, including wallpaper, and even including
embedded Java applets, which are computer programs that run within a web
page.
I guess you're obviously interested in this topic if you even bothered to look at this page.
A bit of UNIX specific information: usually, on a UNIX system eg (Solaris, SunOS, IRIX, Linux, SCO, FreeBSD, etc), your web page will go in a directory under your home directory called public_html. (this is true for users at Rutgers, and many other places). It is important that your home directory is accesible for this to work.
If you have no idea what your home directory is, or how to create a public_html directory, or how to edit a text file, take a look at my UNIX tutorial
chmod -R a+X $HOME
will suffice to make the directory accesible after it has
been created. The documents in there also need to be accesible. They can
be made that way by using
chmod -R a+r $HOME/public_html
For more details on chmod, see my UNIX tutorial
First, I outline a very simple example : the generic HomePage. The name
of the file is index.html ( and on most UNIX systems, it goes in your
public_html directory)
It goes like this :
<HTML>
<HEAD>
<TITLE>
My Page
</TITLE>
</HEAD>
<BODY>
Hello. This is my homepage. I hope you enjoy your
visit. Please come again.
</BODY>
</HTML>
This is actually a pretty simple looking page. It looks like this :
The contents of the angled brackets are called TAGS and they
are instructions that tell the browser how to lay out the surrounding
text. Any HTML document should have the initial and final HEAD ,
BODY and HTML tags. Note the general format of the
tags. Some of the tags, like the HEAD tag, mark the beginning of
a section of the document. As a rule, this section is closed by the same
tag with a / inserted in front of it. For example ,
<FOO>
This text has the 'FOO' formatting command applied to it.
</FOO>
This text doesn't.
The most fundamental aspect of writing a
webpage is creating a Hypertext link. This is done by using the following HTML command
<A HREF="http://URL_NAME.html"> Link text </A>
.
This creates a clickable link to URL_NAME. An example :
<A HREF="http://pegasus.rutgers.edu/~elflord/webdesign/test.html">Try this !</A>
Works like this : (TRY IT!!!)
Try this !
Note that we could achieve exactly the same thing
with
<A HREF="test.html">
Try this!</A>
since the pages are in the same webpage account, on the same webserver
and in the same directory. You can use directory paths to reference your
pages instead of using the full URL to link to pages within your own site.
An example :
<A HREF="directory/test2.html">click here</A>
Which works like this :
click here
Another way of creating hypertext links is creating them within a page. To
create a hypertext anchor, we use this:
<A NAME="anchor">
and to link to the anchor, you put in something like
<A HREF="#anchor"> go to anchor</A>
<A HREF="#hypertext"> go back to top of hypertext section</A>
And it works like this: (TRY IT!!!)
go to anchor
go back to top of hypertext section
You can also go to an
anchor within a page
by going
<A HREF="URL_NAME.html#anchor_name">click here</A>
Notation
Back to contents
We write the tags in the following format to describe the syntax:
<TAG [ATTRIBUTE a1] [ATTRIBUTE a2] ...
[ATTRIBUTE b1=value] [ATTRIBUTE b2=value2 ...
[ATTRIBUTE c1|ATTRIBUTE c2] [ATTRIBUTE c3|c4] ... >
The square brackets correspond to an optional component of the tag.
The words in italics correspond to numbers or options (eg RIGHT or LEFT) and the vertical
bar | is a logical or. For example, the above means the tag
The philosophy behind logical markup is this: you tell the browser what your text "is", whether it's a heading, subheading, citation, emphasised text or whatever. The browser then lays it out appropraitely. Since the browser ultimately lays out (and hence controls the appearance of) your document, this philosophy is consistent with the design of the HTML language.
With the recent invention of style sheets, one can create user defined styles (that is , add appropriate meanings to the heading level tags among other things) to add more flexibility.
The obvious alternative is physical markup, which involves direct control on the part of the user over the page layout. This is the kind of markup that beginners cling to, as it is the type used in most major word processors, and most users are familiar with it.
So the next question is this: which is better? The short answer is that logical markup is much more powerful, but current implementations of logical markup (other than style sheets) in HTML are not. In paractice, the <STRONG> tag looks just like the <B> tag, so it doesn't make any difference which one you use. Note that style sheets are worth trying, but you risk leaving Netscape 3 users looking at a fairly dull page. Check what browser your visitors use. If they are all using Netscape 4, IE 3 and 4, then you can safely use style sheets.