HTML presentation Embedding Graphics in Web Pages n HTML uses an empty tag called the (image tag) n n n or n n n Note: all web production tools do insert these commands through the product’s GUI interface. But it is good to recognize the set of tags that accomplishes this action

HTML presentation Background Graphics n n n tag is inserted after the tag

HTML presentation Contrast and Brightness Rules n If you use a light background, choose dark font colors n Light font->dark background n You may need to adjust your font color when choosing a new background

HTML presentation Adding a background or graphic to your Homepage n You can use a simple editor and type in the HTML commands from the previous slides n or n use Netscape Composer

HTML presentation Composer n Built in HTML editor in Netscape n enter the page address for updating and File- >Edit Page n or directly go to File->Open Page->Choose File (will display the familiar Open Window) n then make changes (very similar to Word environment), when finished n File-> Save As n File->Close

HTML presentation Adding Inline Images using Composer n Inline image - graphic that appears as part of the Web page n Composer allows gif, jpeg and also bmp files by converting them to jpeg format when you place them in your document n Click on the HTML page where you want the graphic to appear. (insertion point)

HTML presentation Adding Images Using Composer n Click the image button. (4th from the right on the Composition toolbar)

HTML presentation Adding Images Using Composer

HTML presentation Adding Images Using Composer n Click the image button. (4th from the right on the Composition toolbar) n Then point to the Choose File button and find your graphic file. n Next choose an alignment. The alignment buttons indicate the position of the selected image relative to the text, as shown in the buttons

HTML presentation Adding Images Using Composer n Not all alignment changes can be viewed in Composer, preview your page in the browser. n Click OK. That’s it! n Also, lets say you are using a bullets that are graphics. You can also use copy and paste to insert them in various place instead of insertion.

HTML presentation Setting a Background Image n Under the Format Option click the Page Colors and Properties Command n A tabbed dialog box will appear, choose the Colors and Background tab. n Note, you can also set your current text color settings. n At the bottom of the page in the Background Image, click Use Image

HTML presentation Setting a Background Image n Click the Choose File button. This will open up the normal choose file box, find the background file, double-click on it, this file will be displayed in the Use Image text box. Finally click the OK button.