PowerPoint Presentation
Adding ImagesWeek 2 (Part 2 of 3)1 tag
The img stands for image. The src stands for source; it is an
attribute of the tag.
The source of the image is going to be the address of the
image.
2Pointers to keep in mind800 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.3Keep 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. 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.
Pointers to keep in mind4JPEG or GIF??...
Lets Practice!Go to Google shared folder and download the
following files under the TESTING folder:index.htmmugsy.pngCreate a
sub-folder named TESTING in your LASTNAME FIRSTNAME folderPlace the
downloaded files to your TESTING folder
Index.htm
Image and document on the same location
syntax:
This is where and how everything changes!Adding Images
Image file (.png) and document file (.htm) is located on the
same locationAdding Images
Image file is located in another sub-folder (Images)Adding
ImagesWhat if its the document file (.htm) is located in another
sub-folder?Adding Images
What if the document file is located in another
sub-folder?Adding ImagesWhat if the document file is located 2 more
sub-folders down?Adding
ImagesTESTINGIMAGESHTML2HTML3mugsy.pngindex.htmWhat if the document
file is located 2 more sub-folders down?
Adding Images Using ../
Common/StandardSpecific
Adding ImagesTESTINGIMAGESHTMLmugsy.pngindex.htm
Image and document on the same location
syntax:
Specifies an alternate text for an image, 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.It's courtesy for people who's browser does not support
images.The Alt Attribute 17The border attribute places a border
around the image. In the following example a 1-pixel border is
applied:
Border Size Attribute
18If 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:
Border Size Attribute19
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" Text Wrapping20You can create space
between the image and surrounding text by defining vertical and
horizontal space like so:
Spacing Attributes21 tag attributes
until the background image is loaded, the background color will
be shown.22It'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 folderAdding Images located in
another folder
Adding Images located in another folder
