1 / 12

Embedding Graphics in Web Pages

Learn how to embed graphics in web pages using HTML tags, adjust background settings, add images using Composer, and set background images. Discover essential tips and tricks to improve your homepage appearance.

oxford
Download Presentation

Embedding Graphics in Web Pages

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. Embedding Graphics in Web Pages • HTML uses an empty tag called the <IMG> (image tag) • <IMG SRC=“image URL”> • or • <IMG SRC=“path/filename”> • 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

  2. Background Graphics • <BODY BACKGROUND = “paper.gif”> • tag is inserted after the <BODY> tag

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

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

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

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

  7. Adding Images Using Composer • Click the image button. (4th from the right on the Composition toolbar)

  8. Adding Images Using Composer

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

  10. Adding Images Using Composer • Not all alignment changes can be viewed in Composer, preview your page in the browser. • Click OK. That’s it! • 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.

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

  12. Setting a Background Image • 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.

More Related