Scribd
Upload
71 views25 pages

Adding Images in HTML

The document discusses various techniques for adding images to HTML documents, including: - Using the <img> tag and src attribute to specify the image file path - Common image file extensions like .jpg and .png - Best practices like limiting image width to 800 pixels - Using relative paths with ../ to reference images in other folders - Optional attributes like alt, width, height, border, and align

Uploaded by

jventus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
71 views25 pages

Adding Images in HTML

The document discusses various techniques for adding images to HTML documents, including: - Using the <img> tag and src attribute to specify the image file path - Common image file extensions like .jpg and .png - Best practices like limiting image width to 800 pixels - Using relative paths with ../ to reference images in other folders - Optional attributes like alt, width, height, border, and align

Uploaded by

jventus
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

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>
&#60;img src="mugsy.png"&#62;
</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>
&#60;img src="mugsy.png"&#62;
</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

You might also like