chapter 3 adding images in html. agenda understanding web page images prepare your images for the...
TRANSCRIPT
![Page 1: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/1.jpg)
Chapter 3
Adding Images in HTML
![Page 2: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/2.jpg)
Agenda• Understanding Web Page Images • Prepare Your Images for the Web • Insert an Image • Specify an Image Size • Add Alternative Text • Create an Image Label • Add Copyright Text to Images • Align an Image Horizontally • Align an Image Vertically • Center an Image • Wrap Text Between Images • Stop Text Wrap • Set an Image Border • Add Space Around an Image • Add a Background Image • Create an Image Banner
![Page 3: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/3.jpg)
Understanding Web Page Images
• You can currently use only three image file formats on the Web: GIF, JPG, and PNG– A new format, SVG, is not yet in common use
• These formats all compress images to create smaller files– Knowing which file format to use for which type of image
is important
• If you choose the wrong file type, your image won’t compress or display properly
![Page 4: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/4.jpg)
GIF (Graphics Interchange Format)• GIF uses a lossless compression technique,
meaning that no color information is discarded when the image is compressed
• The color depth of GIF is 8-bit, allowing a palette of no more than 256 colors
• GIF excels at compressing and displaying flat color areas, making it the logical choice for line art and color graphics
![Page 5: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/5.jpg)
GIF Transparency• With GIF files, you can choose any one color in an
image to appear as transparent in the browser• The background color or pattern will show
through the areas that you have designated as transparent
• Using transparent areas allows you to create graphics that appear to have an irregular outside shape, rather than being bounded by a rectangle
![Page 6: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/6.jpg)
Transparent and nontransparent GIFs
![Page 7: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/7.jpg)
GIF Animation
• The GIF format lets you store multiple images and timing information about the images in a single file
• This means that you can build animations consisting of multiple static images that play continuously, creating the illusion of motion
![Page 8: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/8.jpg)
JPG or JPEG (Joint Photographic Experts Group)
• JPG is best for photographs or continuous tone images
• JPGs are 24-bit RGB images that allow millions of colors
• JPGs use a “lossy” compression routine especially designed for photographic images– When the image is compressed, some color
information is discarded, resulting in a loss of quality from the original image
![Page 9: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/9.jpg)
JPG (continued) • When you create the JPG file, you can also
manually balance the amount of compression versus the resulting image quality
• The higher the compression, the lower the image quality– You can play with this setting to create files that are as
small as possible but still look good
• Many photos can sustain quite a bit of compression while still maintaining image integrity
![Page 10: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/10.jpg)
PNG (Portable Network Graphics)
• A royalty-free file format that is intended to replace GIF
• This lossless format compresses 8-bit images to smaller file sizes than GIF
• PNG supports transparency and interlacing but not animation
![Page 11: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/11.jpg)
SVG (Scalable vector graphics)
• A new standard from the W3C• A language for describing two-dimensional
graphics using XML• SVG graphics are scalable to different display
resolutions and are printable• Not yet supported by most browsers
![Page 12: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/12.jpg)
Insert an Image • The <img> tag defines an image in an HTML
page.• The <img> tag has two required attributes: src
and alt.• Note: Images are not technically inserted into
an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
• Tip: To link an image to another document, simply nest the <img> tag inside <a> tags.
![Page 13: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/13.jpg)
Image Attributes and ValuesAttribute Value Description
align
topbottommiddleleftright
Specifies the alignment of an image according to surrounding elements
alt text Specifies an alternate text for an image
border pixels Specifies the width of the border around an image
height pixels Specifies the height of an image
hspace pixels Specifies the whitespace on left and right side of an image
src URL Specifies the URL of an image
vspace pixels Specifies the whitespace on top and bottom of an image
width pixels Specifies the width of an image
title text Specifies a LABEL for an image
![Page 14: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/14.jpg)
<img src="balloons_sm.jpg" width="200" height="267" alt="Hot Air Balloon image" border="0" title="Up, up and away in a hot air balloon"/>
Example of Image tag
![Page 15: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/15.jpg)
Add Copyright Text to Images
• Type © to create the copyright symbol.<IMG src=“image1.jpg”><br>© 2013 Khawarizmi College , All rights reserved.
• In this example, a line break tag• (<BR>) puts the copyright text on a new line.• The copyright text appears in the browser
window.
![Page 16: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/16.jpg)
Center an Image • Click before the <IMG> tag and• type <DIV>.• Click inside the <DIV> tag and type
ALIGN=”center”.• Click after the closing bracket of• the <IMG> tag and type </DIV>.• The image appears centered on the Web page.Example<div align=“center”> <img src=“img1.jpg></div>
![Page 17: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/17.jpg)
Stop Text Wrap • Click where you want to end thetext wrap and type <BR CLEAR=”?”>, replacing ? With the margin you want to clear, either left, right, or all.• The text wrapping ends at the selected point
on the page.• In this example, the next• paragraph starts on a different• line from the images.
![Page 18: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/18.jpg)
Add a Background Image
Click inside the <BODY> tag and type BACKGROUND=”?”, replacing ? with the path to the image file you want to use.The Web browser displays the image as the page background.Example: <body background=“image1.jpg”>
![Page 19: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/19.jpg)
Create an Image Banner
• At the top of the page, before any body text, type <IMG SRC=”?”>, replacing ? with the path to the banner file you want to use.
• Type WIDTH=”? ” within the <IMG> tag, replacing ? with a value in pixels.
• Type HEIGHT=”? ” within the <IMG> tag, replacing ? with a value in pixels.
• The Web browser displays the image as a banner at the top of the page.
• Example: <img src=“img1.gif” width=“468” height=“60”><BR>
![Page 20: Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative](https://reader035.vdocuments.us/reader035/viewer/2022062321/56649dc65503460f94aba22e/html5/thumbnails/20.jpg)
Lab3Write a code in HTML to achieve the following tasks:• Insert an Image • Specify an Image Size • Add Alternative Text • Create an Image Label • Add Copyright Text to Images • Align an Image Horizontally • Align an Image Vertically • Center an Image • Wrap Text Between Images • Stop Text Wrap • Set an Image Border • Add Space Around an Image • Add a Background Image • Create an Image Banner