|
Before attempting to
add an image to a page, one obvious requirement is to have an
image to add.
Right-click
on the picture of the dog below (or, if you're using a Macintosh,
CTRL-Click). A menu should appear. One of the options will either
say "Save Image As" (if you're using Netscape) or "Save
Picture As" (if you're using Internet Explorer). Choose this
option by left-clicking on it.
Save the file in the
same directory you've saved your test.htm file in.
Once this is saved
in the same directory as the test.htm file, you can proceed on
to the next step.
Images can be embedded directly into an HTML document by means
of another tag command.
This command is the
<IMG> tag. By itself, the <IMG> tag does nothing.
It requires additional parameters in order to function properly.
The one absolutely
required parameter is the “SRC” or “source”
parameter. This tells the tag command what image file to display.
<IMG>
Tag Parameters
- SRC = “Source”
(Which file to display)
- BORDER = Width of
the border around the image.
- WIDTH = Width of
image, in pixels.
- HEIGHT = Height
of image, in pixels.
- NAME = A name assigned
to the image.
EXAMPLES:
<IMG
SRC=“IMAGE1.GIF”>
<IMG
SRC=“IMAGE1.GIF” BORDER=3 WIDTH=320 HEIGHT=240 NAME=
“First”>
Image
File Types
While there are dozens
of image file types available in software packages, at this point,
most major browsers can only view three basic file types:
- GIF = “Graphics
Interchange Format”
- JPG (or JPEG) =
“Joint Photographic Experts Group”
- PNG = “Portable
Network Graphics”
Each of these has its
own advantages and disadvantages, as shown below:
|
FORMAT
|
ADVANTAGES
|
DISADVANTAGES
|
| GIF |
Supported by all
browsers, can have a transparent color, can be “animated”
or “interlaced.”
|
Largest of the
file formats, only 256 colors, copyrighted by CompuServe |
| JPG |
Supported by all
browsers, 24-bit color, much smaller file format in most cases.
|
No transparency,
animated version not supported by all browsers, quality directly
proportional to file size. |
| PNG |
24-bit color,
smaller than .GIF, always has 100% quality, can have transparent
color, can be “interlaced”
|
Not supported
by all browsers yet, no animation capability yet. |
Let's try adding the
file we just saved above to our web page. Open the test.htm file
and modify the code so that it looks like the following (because
the page code is starting to get a little long, I've highlighted
the changes in red):
(Reminder once more:
make sure the "dog.jpg" file is saved in the SAME DIRECTORY
as "test.htm" )
<html>
<head>
<title>My First Web Page</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#00FF00 LINK=#FFFF00 VLINK=#FFFFFF
ALINK=#FFCC00>
This is some text!
<pre>This is preformatted text</pre>
This web page is ©2001 by Me.
This should be a few spaces over
to the right.
<H1>This is going to be big text on its own line.</H1>
<font face="Arial" size=5>This will be almost
as big, and in Arial font!</font>
<br>
<div align="right">This should be on the next
line and on the right side of the screen.</div>
<br>
<center>This should be centered text.</center>
<br>
<img src="dog.jpg">
<br>
<hr width=75% size=6 align="left">
<br>
<br>
<br>
<div align="center">So should this, but several
more lines down the page.</div>
<br><br>
<a href="http://www.tmlp.com">Click here to go
to the TMLP Home Page.</a>
<br>
<br>
<ol>
<li> <font size="5">Text 1</font>
<ul>
<li><i>Text 1a</i>
<li><u>Text 1b</u>
</ul>
<li> <font size="7">Text 2</font>
</ol>
</body>
</html>
Open your page in your
browser. It should look something like this:
Images
can be aligned just like text. If you place the <div align=center>
</div> tag pair around the <IMG> tag in the above
code, you'll see that the picture of the dog will be centered
on the page.
Next,
we'll look at how to make images into links...very useful if you
want to make "buttons" your viewers can click on to
link to other pages.
|
