XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement...
-
Upload
frederica-payne -
Category
Documents
-
view
212 -
download
0
Transcript of XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement...
![Page 1: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/1.jpg)
XHTML
Images
![Page 2: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/2.jpg)
Images are important Purpose: to enhance your web site. Add only when they complement or
add additional impact to your message.
![Page 3: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/3.jpg)
Images: Increase your download time. If only “neat” or “flashy” may annoy
your viewers, and take away from the content quality of you Web site.
![Page 4: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/4.jpg)
Graphic File Formats GIF - Graphics InterChange Format JPG - Joint Photographic Expert
Group These are bitmapped. They are
created by changing the colors of individual pixels.
![Page 5: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/5.jpg)
GIF file format
“lossless” compression (doesn’t lose quality)
maximum of 256 colors May have one color transparent. Supports transparency Can be animated Good for images with large areas of
solid colors, such as simple illustrations, logos, cartoons, etc.
![Page 6: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/6.jpg)
JPG 16.7 million colors (called 24-bit). Better for photos, watercolor
images, pencil drawings Lossy compression
![Page 7: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/7.jpg)
![Page 8: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/8.jpg)
Adding Images
Image Source tag:<img src=“mypic.jpg” />
mypic.jpg is the name of a file in the same folder as the html source document being displayed.
![Page 9: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/9.jpg)
Organizing Web Page Files A common means of
organization is to create a subdirectory for graphics files, named “images”.
To insert an image from the images folder:
source
images
<img src=“images\mypic.jpg” />
![Page 10: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/10.jpg)
Labeling an Image alt=“text here” attribute alt stands for alternate text because
the message will appear in place of the image or in a little box whenever the mouse pointer passes over an image
![Page 11: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/11.jpg)
Labeling an Image Example: <img src=“mypic.jpg”
alt=“Picture of me and Molly” />
![Page 12: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/12.jpg)
Image Sizes
width=“#“and height=“#” attributes Where the # following height and width
specifies the number of pixels. Example: <img src=“mypic.jpg”
width=“50” height=“100” />
![Page 13: XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.](https://reader035.fdocuments.in/reader035/viewer/2022072014/56649e795503460f94b79aca/html5/thumbnails/13.jpg)
Assignment Images Exercise 1