 |
First, you need a file system that
will be your personal system which you will use for all assignments.This file
system is contained in a server partition named "amatstud".
In amatstud you find |
|
 |
A copy of this
Hyperscript (html_en/index.html) with relative links to student
pages. In other words, from this copy the links to
solutions to assignments work! The same links from the Hyperscript
in the Internet will not (and should not)
work - you don't want your first efforts to be accessible to the
world at large. |
|
|
A file named "project", containing files named "group x". One of these files is your
group file. In the group x file is always a document named
"index.html" This is your group
index file and you will add to it in due course. It will essentially contain a
linked listing of all the documents you created. |
|
|
A file named "styles" containing all
kinds of objects that you can use for doing your assignments. |
| |
|
There might be some additional files, containing,
e.g., images or other useful stuff. |
|
You may generate more folders inside
the groupx folder as you like. You might have a folder called
"practice" or "junk" for whatever you are fooling around
with during the course, a folder called "homepage1" and so on. |
|
|
We will not tell you how do to do this
systematically - it is very educational to clean up the messes quickly produced
in a HTML project. |
|
Now file your first practice
document. |
|
|
Remember Gorbatschows famous words: Whoever is
late (in storing), will be punished by life. HoTMetaL on occasion will crash
and you loose whatever has not been stored. |
|
.By now you get the idea of how to
write a text, and how to use the conventional ways of making parts of it appear
bold (use the "B" button), italic (use the
I button), bold and italic (use both), bold and italic and blue (use both and the font
tag), and so on. You create new tags in most cases, and you always can use the
F6 key to look for more detailed attributes. |
|
|
Try the buttons you recognize or understand from
the explanation coming up (if you put the cursor on a button and wait a
little). |
| |
If you tried all this (and monitored your efforts
with the browser), you must have realized by now that there seems to be no way
to format your texts the way you can do it
if you have a "ruler" on top of the page. This has a simple
reason: |
|
|
HTML documents should be manageable on
any computer regardless of the operating system and the screen size.
Formatting documents, however, is always very system specific. To see what that
means, type a very long sentence (it can be meaningless number-jumper) and
watch it with the browser. The sentence will break at the point that your
system (i.e. the browser) decides is the proper point. |
|
|
Now simulate a smaller screen by making the
displayed window smaller. The formatting now changes so that the text adopts to
the new "screen size". This can only be done, if you don't overrule
the system by extensive formatting of a document. That´s why formatting is
a somewhat alien thought to HTML. |
|
However, without some formatting,
documents look unprofessional and boring. That´s why there are a lot of
tricks to format your document anyway. |
|
|
One simple possibility with limited usefulness is
to use the return key. This will introduce the
<BR></BR> tag which signals a conditioned return or break; i.e. your
string of text will jump to the beginning (e.g. left, right or center), but
this is not a new paragraph. |
|
The basic idea for formatting,
however, is to use a table. But tables are
notoriously tricky and will occupy us for while. For starters, do the
following: |
|
|
Insert a table at a good spot, e.g. after a
<P> tag. You do that by finding the command on the pull down menu
"Table" or by using the
"Insert table" button (the one
showing a table without a hand or some other symbol). |
|
|
Answer the questions in the menu coming up any way
you like; try out what happens if you are unsure of the meaning. If the table
coming up contains little rectangles saying "nbsp" (short for
"non breaking space"; may happen with HoTMetaL 5), click most, but
not all, away. |
|
|
The tricky part is the "Width" You have two options: give it in
pixels (absolute values) or in % (of whatever screen the document will
be viewed). Now make another table so you have two tables, and make them about
screen-sized (by entering 100% or the appropriate amount of pixels). Now
look at the two tables in the browser, they should look like the two tables
below. |
|
|
|
|
First you notice that some or all of
the cells of your table do not show up. |
|
|
That is so, because there is no content in the
cells (except for the "nbsp" symbol
in some.) That´s why HoTMetaL 5 puts that symbol in all cells. If you do
have to do it yourself, the easiest way is to put the cursor in a cell, then
hit the return key and the space key. You now get a <BR> tag and
the cell becomes visible. |
|
|
Try it and make your cells visible. |
|
If you now decrease your window size
again, you see the difference between 100% width and fixed pixel count.
A scroll bar appears as soon as the fixed size of the pixel-width cell becomes
larger that the window because the browser can no longer format your document
to the available size. |
|
|
Now put your cursor anywhere in the table, or
right after the table tag, and hit F6. Many possible attributes appear,
try the background color ones. |
|
|
Also write something in some cells. Try short and
long texts and see what you get. |
|
|
Now look at your document in source code. It
starts to look complicated. See if you get a feeling for what happened in the
source code to the table. |
|
Last hint for dealing with tables:
Put your cursor anywhere in the table and use the "Edit Table Properties" key (the one with a
table and a hand or some other symbol). |
|
|
You will get many menus with all kind of options
for sizing rows, columns and single cells with the potential of many conflicting attributes (you may, e.g. size a
column to 45 pixels, but one cell in that column to 73 pixels or
35%). So what is the browser supposed to do in this cases? |
|
|
There is a good chance now that you will mess up
your table and never get it back to what you wanted it to look like. Don't
worry - we see about that in the next chapter. |
|
But now we will
come to your first assignment: |
|
|
|
|
|
|
|
|
|
|
|
|
|
