1 / 20

Adding Graphic Elements

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.

art
Download Presentation

Adding Graphic Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding Graphic Elements Chapter 9

  2. 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

  3. The Image Tag • <imgsrc=“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

  4. 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. • <imgsrc=“products.gif” alt=“PRODUCTS”>

  5. Image Size • Image size • Width=“#” Height=“#” • Give number in pixels or percentage

  6. Let’s Try It • Complete Exercise 9-1 Handout

  7. 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 • <imgsrc=“tomato.gif” border=“10”> • To turn off borders • <imgsrc=“tomato.gif” border=“0”>

  8. 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!

  9. Positioning Graphics • Wrapping 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.

  10. Positioning Graphics • Alignment, 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”><imgsrc=“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.

  11. 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”>

  12. Let’s Try It • Complete Exercise 9-2 handout

  13. Background Tiles • Background Tags • Added within the body tags. • <body background=“tile1.gif”> • Solid Colors • <body bgcolor=“color name” or “#”>

  14. Non-Tiled Backgrounds • Giant Background Graphic • Save as 1500 x 1200 pixels use a photo editor • Save as PNG, GIF or JPEG file format

  15. Let’s Try It • Complete Exercise 9-3 Hand out

  16. 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

  17. Horizontal Rules • No Shade • <hr noshade> • Makes a rule with a solid line

  18. Let’s Try It • Complete Exercise 9-4 Hand out

  19. Test Yourself • Which attribute in the <img> tag can you absolutely not do without? • How should you write the code for adding an image called furry.jpg that is in the same directory as the HTML file? • Why is it important to include alternative text?

  20. Test Yourself • What is the advantage to including width and height attributes for every graphic on the page? • What might be wrong if your images don’t appear when you view the page in the browser? There are three key explanations.

More Related