Adding Images
WEEK 2 (PART 2 OF 3)
<img src> tag
<img src="image.gif">
The img stands for image.
The src stands for source; it is an attribute of the
<img> tag.
The source of the image is going to be the address of
the image.
Pointers to keep in mind
800 pixel is a good rule of thumb for maximum width for an
image.
Assuming your monitor
has 72 pixels per inch, if
you want an image to be
approximately 3 wide and
high, youd make it 72
(pixels) times 3 (inches) =
246 pixels, or, rounding
up, 250 by 250 pixels.
Pointers to keep in mind
The filename does not have to end with .gif. You could
also use a .jpg file as well. These are two of the most
common image file extensions used on the Internet.
Keep in mind, the filename or address of the image IS case
sensitive, so "image.jpg" and "IMAGE.JPG" are considered
two different images to the Web browser.
JPEG or GIF??...
Lets Practice!
Go to Google shared folder and download the
following files under the TESTING folder:
index.htm
mugsy.png
Create a sub-folder named TESTING in your
LASTNAME FIRSTNAME folder
Place the downloaded files to your TESTING folder
Index.htm
<body>
<h1>Image and document on the same location</h1>
<p><p>
<h2>
syntax:
<p>
<img src="mugsy.png">
</h2>
This
This is
is where
where and
and
how
everything
<p>
how everything
changes!
<img src="mugsy.png">
changes!
</body>
</html>
Adding Images
Image file (.png) and
document file (.htm) is
located on the same
location
Adding Images
Image file is located in
another sub-folder (Images)
Adding Images
What if its the document file
(.htm) is located in another subfolder?
Adding Images
What if the document file is
located in another sub-folder?
Adding Images
What if the document
file is located 2 more
sub-folders down?
Adding Images
TESTI
NG
What if the document file is
located 2 more sub-folders down?
IMAGE
S
HTML
2
HTML
3
mugsy.pn
g
index.h
tm
Adding Images Using ../
Common/Standard
Specific
Adding Images
<body>
TESTI
NG
HTML
index.h
tm
IMAGE
S
mugsy.pn
g
<h1>Image and document on the same
location</h1>
<p><p>
<h2>
syntax:
<p>
<img src="mugsy.png">
</h2>
<p>
<img src="../IMAGES/mugsy.png">
</body>
</html>
The Alt Attribute
<img src=image file" alt=text>
The alt attribute provides alternative information for an
image if a user for some reason cannot view it, or simply if
the image cannot be displayed.
Specifies an alternate text for an image,
It's courtesy for people who's browser does not support
images.
WIDTH and HEIGHT Attributes
<img src="image.gif" width=value" height=value>
You could use the width and height attributes to resize
an image, but thats not a good idea. Because if you do
that, youre still downloading the full-size image, and
making the browser do the work to resize the image
It will allow the viewer's browser to format the page
quickly, without having to load each image.
Viewers will be able to read the text on your page as your
image files load.
Border Size Attribute
The border attribute places a border around the
image. In the following example a 1-pixel border is
applied:
<img src="image.jpg" border="1">
Border Size Attribute
If no border attribute is specified, no border is
applied, except when the image is used as a
hyperlink.
In this case a 1-pixel border is applied. If you want to
make an image into a hyperlink without a border,
specify a zero border like so:
<img src="image.jpg" border="0">
Text Wrapping
<img src="next.jpg" align="left" />
To allow text to wrap around an image, you just
need to add one of these commands to the image
tag:
align="left"
align="right"
Spacing Attributes
You can create space between the image and
surrounding text by defining vertical and
horizontal space like so:
<img src="image.jpg" vspace="5" hspace="10">
<body> tag attributes
<body background=image.jpg>
<body background=image.jpg bgcolor=#code >
until the background image is loaded, the
background color will be shown.
<body background=image.jpg bgproperties=fixed>
Adding Images located in another folder
It's very common to place images in a folder other than
where your html doc resides.
Study the following on how to construct a proper src.
Note that
../ means to go up a folder,
../../ means to go up two folders, etc.
Also note that in urls, forward slashes are used --> /
rather than a backward slash --> \
Adding Images located in another folder
Adding Images located in another folder
