computer science

profilew.2.a
assignment_2.docx
Home>Computer Science homework help>computer science

CIST-0190 Web Page Design Assignment 2

Name: - ____________________________________________

For this Assignment, open the HTML document file you named index.htm and incorporate the following elements:

Go to one of the following or find a site that offers free-use images, download some images, and incorporate them into your site.

http://www.freegraphics.com

http://www.abcgiant.com/

http://www.freegraphics.org/

In this exercise you will learn to place images on a page and apply images to a page background. Refer to Chapter of your textbook for help. Use the following table to practice using images:

Assignment 2 - Introducing Graphics

In this exercise you will learn to place images on a page and apply images to a page background. Refer to Chapter of your textbook for help. Use the following table to practice using images:

Assignment 2 Practice Exercise  

 

1

 

 

Right click on the any image and select Save Picture as... or Save Image as (this differs between browser versions) and save the image file to your practice folder.

Repeat this step again and save 2 images to your practice folder.

 

 

2

 

 

Open a text editor and type the following lines of HTML in the blank document and save it at lesson4.htm. The IMG tag is used to place images in your Web pages and the BACKGROUND attribute in the BODY tag is used to apply images to your page background.

 

<!DOCTYPE html >      <html lang="en"l">

<head>

<meta charset="UTF-8"> <title>Applying Images to Web Pages</title> </head> <body background="stonewall.gif"> <h1 align="center">Using Images</h1>

<p><b>When you place an image in your HTML document's background, the browser will display multiples of the image so that it fills the entire browser window. This is called tiling. To ensure your background allows your text and pictures to stand out, use small, low-contrast images.</b></p>

<p align="center"><img  src="type image name here " alt="describe the image " /></p>

<p><b><i>Remember</i>--keep your graphics small, otherwise you'll lose viewers who are too impatient to wait for your images to load.</b></p> </body> </html>

 

 

 

 

3

 

 

View the file in your Web browser.

 

4

 

 

Make the following changes to the HTML document:

· Adjust the size of the image to 200 pixels wide by 134 pixels high.

· Wrap the text of the page around the left side of the image and move the image so that it follows the header.

· Add 10 pixels of space around the image both vertically and horizontally.

· Add a horizontal rule after the header, where the rule's height is 12 pixels.

 

 

5

 

 

Save the document and look at it again in your Web browser…. 

 

6

 

 

If your document does seem have taken your changes, open the file again in your text editor and look at your HTML code again to find your problem. Did you forget to hit the refresh button in your browser?

 

Assignment 2 -- Introducing Graphics Solution

Item

Explanation

1

The background attribute in the body tag specifies the graphic file to use as a background image.

2

The img tag is used to place an image in a document. The src is the only required attribute of this tag.

3

The width and weight attributes set the size of the image in pixels.

4

The align attribute specifies the alignment of the image on the page. Aligning the image "right" will wrap the text on the left.

5

The hspace and vspace attributes adds a buffer around in image and is specified in pixels.

6

The hr tag inserts a horizontal rule, where the size attribute specifies the height in pixels.