7 adding graphic elements. adding inline images the image tag
TRANSCRIPT
7
Adding Graphic
Elements
Chapter 9
Adding Inline Images
Inline Images Graphics that are part of the
flow of the HTML content Illustrations
Banner headlines
Navigational toolbars
Advertisements
Placed using the <img> tag Must be a GIF, JPEG, or PNG file
The Image Tag
<img src=“file name or URL”>
Basic tag that tells the browser to place a graphic here
Placed in the flow of HTML text at the point you want the graphic to appear
By default, graphics are displayed with their bottom edges lined up with the baseline of the surrounding text
Alternative Text
alt=“text” The alt attribute allows you to
provide a brief text description of your image if the graphic cannot be displayed in the browser.
<img src=“products.gif” alt=“PRODUCTS”>
Image Size
Image size Width=“#” Height=“#”
Give number in pixels or percentage
Let’s Try It
Complete Exercise 9-1 Handout
Image Borders Image borders
The border attribute adds a border around a graphic that is a specified number of pixels thick
The color of the border matches the text color of the page
<img src=“tomato.gif” border=“10”>
To turn off borders
<img src=“tomato.gif” border=“0”>
Positioning Graphics
Vertical Alignment Align=“top|middle|bottom”
Affects the positioning of the graphic in relation to the neighboring line of text
You say tomato! I say tomato!
You say tomato! I say tomato!
You say tomato! I say tomato!
Positioning GraphicsWrapping Text Around a
Graphic Align=“left|right”
Adjusts horizontal positioning
hspace=“#”
Use this attribute to specify an amount of space (in pixels) to be held clear on the left and right of the image.
vspace=“#”
Use this attribute to specify an amount of space (in pixels) to be held clear above and below the image.
Positioning GraphicsAlignment, No Wrap
If you want to position a graphic on the right edge of the page without text wrap, put the image tag in a paragraph <p>, then align the paragraph to the right.
<p align=“right”><img src=“tomato.gif”></p>
Drain the tomatoes, finely chop them and add to the onion in the pan. Season with red pepper flakes and salt and pepper. Simmer 20 minutes, stirring occasionally.
Stopping The Text Wrap
Turn Off
Insert a line break <br> enhanced with the clear attribute
Instructs the browser to start the next line of text below the image when the margin is clear
Clear Attribute
3 possible values (left, right, all)
<br clear=“all”>
Let’s Try It
Complete Exercise 9-2 handout
Background Tiles
Background Tags
Added within the body tags.
<body background=“tile1.gif”>
Solid Colors
<body bgcolor=“color name” or “#”>
Non-Tiled Backgrounds
Giant Background Graphic
Save as 1500 x 1200 pixels use a photo editor
Save as PNG, GIF or JPEG file format
Let’s Try It
Complete Exercise 9-3 Hand out
Horizontal Rules Horizontal rule (line)
<hr> tag
Draws an embossed shaded line across the full available width of the page
Cannot place a rule on the same line as text
Size
Size=“#”
Rule thickness
Width
Width=“# or %”
Determines how long the line should be
Alignment
Alignment=“left|right|center”
Horizontal alignment
Horizontal Rules
No Shade
<hr noshade>
Makes a rule with a solid line
Let’s Try It
Complete Exercise 9-4 Hand out
Test Yourself
1. Which attribute in the <img> tag can you absolutely not do without?
2. How should you write the code for adding an image called furry.jpg that is in the same directory as the HTML file?
3. Why is it important to include alternative text?
Test Yourself4. What is the advantage to including width
and height attributes for every graphic on the page?
5. What might be wrong if your images don’t appear when you view the page in the browser? There are three key explanations.