 |
In
your homepage or in most other
documents you want to have images -
pictures, graphics,
or even some animations that are always there
whenever your document is loaded. This needs two ingredients |
|
1. You must have an image
and it must be available in a format that
browsers understand (usually .gif, .jpg, or .jif). |
|
 |
You also must have your images in a file that
has a fixed relation that must never change to the file that contains your
document! |
|
|
If you intend to produce more that just your
homepage, i.e. several documents, it is generally not a good idea. to put the images (graphics,
pictures, videos, ....), in the same file as the document. A good idea is to have specific folders for specific
purposes (we will come to that later). |
|
2. You must have a link at the
appropriate place in your document to the image or whatever else that you want
to appear at that place. |
|
|
And, of course, you must specify that place -
which involves a certain degree of formatting. |
|
With HoTMetaL, it is easy to install
the links to images. |
|
|
With the cursor at the right place - i.e. where you want the image to
appear - you click on "Insert
Image" (the button with a little landscape on it). A little menu
pops up. |
|
|
At this point, you use the function
"Choose", which gives you the file structure of the PC you are
working with. Click your way through the files until you find the image you
want. Click on it. |
|
|
A new menu appears. Interestingly, the path to
the image is now written out, it usually begins with a series of "../../" signs. This denotes what is known as a
relative path or a relative link. |
|
A relative
link (in contrast to an absolute
link)) does not give the complete address of the file you are
after (which would always, in our cases, start with
http://www.tf.uni-kiel.de/....), but only the location relative to the file you are
working from. The sign "../" simply
means "go one file up" |
|
The menu gives you some more options
and information. The most important ones are described below. |
|
|
Alignment: There are more options than
intuitively understandable. Anyway, "Left" "Right" and "Middle" are clear - try it. generally, here you
define where your image will be relative to some formats already present. For
example, "Left" in the cell of a
table is different from "Left" in
an unformatted document. |
|
|
Width: usually, there is already a number
in this line - the width if the image you picked. If you change it (which you
can) , your picture will become distorted. |
|
|
Height: Same as width in the vertical
direction. If you change width and height proportionally, your picture will be
larger or smaller than the original, but you transmit the same amount of bits.
It is thus not a good idea to make small pictures by playing with width and
height - make the original smaller instead. |
|
|
Border:: Gives the width of a line
bordering the image. Nothing or "0" means no border; with
increasing numbers the line size increases - try it. |
|
|
A tip: If no numbers are
entered into the width entries, the browser does not know how much space to
leave while constructing the page. It the must wait until all data including
the files containing the images have been transferred so it can take the size
of the image from the image itself. This may considerably prolong the time
needed to load a page! So do leave the numbers coming up when loading the
image, or change them sensibly! |
|
Time to try this: |
|
|
Find an image somewhere and try out what has been
discussed. |
|
|
|
Now you have the image in your
HTML document; HoTMetaL will usually show it, too (You can turn off the
image with: "Tools", "Options", "View"). |
|
The image is contained in the
image tag <IMG></IMG>. As
with all tags, we can now turn to attributes. This is a good example to explain
a possible confusion with attributes: |
|
|
Clicking on the tag, a attribute menu comes up upon hitting
F6. It may contain, among other options "Alignment" (in
particular of your image is inside a table). You could now choose
"center", for example, hoping to
center your image. |
|
|
Setting the cursor
inside the tag and hitting F6
creates a different attribute menu; but still gives the option
"center" for your image. |
|
What is the difference??? |
|
|
Well, look at what appears in the
top line of the attribute menu! In the
first case it will contain "TD", or "Body" or, or whatever structure contains the tag. And you now defined the
alignment of the image and of everything else inside
that structure, e.g. inside the same table cell. |
|
|
In the second case you define the
alignment of the image relative to other objects in the same structure,
normally text This is a bit tricky, the "help" menu of HoTMetaL offers the following.
|
|
|
|
|
|
You can set the image alignment to the following:
• MIDDLE – Aligns the baseline of the current line with the middle of
the image.
• TOP – Image aligns with the top of the tallest item in the line.
• LEFT – Image `floats' on the left margin and text wraps around it
to the right.
• RIGHT – Image `floats' on the right margin and text wraps around it
to the left.
• TEXTTOP – Image aligns with the top of the tallest text in the
line.
• BASELINE – Same as BOTTOM.
• ABSMIDDLE – Aligns the middle of the current line with the middle
of the image.
• ABSBOTTOM – Aligns the bottom of the image with the bottom of the
current line.
Not all of these image alignments are supported by all browsers, so use them
with caution and make sure that your page looks acceptable on several different
browsers.
For left and right images, text wraps around the image, but the IMG tag remains
inline to indicate its actual location in the document.
Note that there is no 'center' alignment: if you want to center an image,
surround it with a block element (such as P) that you can then center-align.
Some browsers also support the CENTER element, which you can put around the
image. |
|
|
|
|
This needs a little trial and error,
here some examples |
| |
|
|
|
| Three images in a table cell; no alignments
whatsoever; text written after the images. |
| Three images in a table cell; image tag alignments
(= alignment of everything in the cell; top line says "TD") is
center. Text written after the images |
| Three images in a table cell; no
alignment in the cell; text written after the images. First image alignment is
"left", second is "middle", third is
"right". |
Three images in a table cell; no alignment in the cell; text
written after each image.
First image alignment is "top";
second image alignment is "middle",
third image alignment is "absbottom". |
|
|
|
|
The effects are not so clear because the image is
not much different in size from the text. Lets repeat the last line from the
table above with better suited images (the borders of the arrow image are shown
for clarity) |
|
|
|
|
Three images in a table cell; no alignment in the cell; text
written after each image.
 First image alignment is "top";
second image alignment is "middle",
third image alignment is
"absbottom". |
|
No alignment
2H2 + O2
2H2O |
|
Alignment "top"
2H2 + O2
2H2O |
|
| |
|
Alignment "absmiddle"
2H2 + O2
2H2O |
|
Alignment "middle"
2H2 + O2
2H2O |
|
| |
Alignment "baseline"
2H2 + O2
2H2O |
|
Alignment "bottom"
2H2 + O2
2H2O |
|
| |
|
|
|
|
|
You get the idea - but this needs
practicing! |
|
Finally a few useful hints |
|
|
Bit size
considerations You always transfer the full number of bits for your
image; even if you make it small by giving appropriate numbers in the
"Width" and "Height" attributes. Only make your image small
("Thumbnails") this way if the user
is supposed to be able to blow it up. Otherwise make it smaller with a graphics
program, this will reduce the number of bits it needs. |
|
|
If you include text as
an image (e.g. mathematical formulas or scanned-in texts), be very
careful with changing the size. Letters become unreadable very quickly. |
|
|
What formats
to use for what occasion we will learn in
chapter 4. |
|
|
For fast transfer, you may want to include your
images as thumbnails, i.e. at a very small
size which change to the real image if you click on them. Produce the thumbnail
with a graphics program and than put a link on it (using the
image map link option) |
|
|
You may want to use an
image for the
background of your document. This the must be an attribute to
"Body". If you try F6
inside the body tag, you will find the line "Background"; and if you click on it, the file
structure will be shown. You may now select any image; it will be your
background - repeated as often as necessary if it is too small. |
|
|
Downloading other
peoples images. You can do this, of course, but do consider that
Copyrights are not just for fun! |
|
|
|
