Chapter 6: Adding Images 

 

A. Download the compressed zip folder AssignmentFilesChap6.zip to your desktop.

 

B. Create a Chapter7 folder on your deskop. Copy and place the 9 files from the zip folder into your Chapter 7 folder.

 

C.  Open the HTML document in Wordpad.   Link the HTML document to the cascading style sheet- mystyle.css.   The following style sheet link tag should be inserted in between the <HEAD> and </HEAD> tags.

                   <LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">

 

D.  Open the CSS document- mystyle.css in WordPad. Copy the style rules below to your external stylesheet- mystyle.css   Save your style sheet.   See the attached sample of the CSS file 

/* style rules for image */
.imageleft{float: left; padding-right: 10px}
.imageright{float: right; padding-left: 10px}
.imageleftborder {float: left; margin-right: 10px; border: 2px solid navy}
.padimage{padding-right: 15px}

 

E.   Insert all the image files and add the image formatting properties illustrated in this chapter to your HTML document.  Follow the step-by-step demo instructions for this chapter exercise (see chapter 7 lecture presentation under Course Documents). See the attached sample of the completed HTML document with the image tags - Sample of HTML Document_Chap 7.pdf

 

F.  Save your HTML document. View and verify your web page displays in your browser.  See the attached sample of the web page output - Sample Output- Understanding HTML Syntax and Rules_Chap7.pdf

 

G.  Verify if the HTML document- chapter6.html passes the W3C Markup Validation Service.  You will need to upload your HTML document to the site-  http://validator.w3.org/.

 

H. Verify if the CSS document – mystyle.css passes the W3C CSS Validation Service.  You will need to upload your CSS document to the site-  http://jigsaw.w3.org/css-validator/

 

I. Submit your work:

a. All the following files are required- 1) HTML document- Chapter6.html, 2) cascading style sheet - mystyle.css and 3) all 7 image files.
b. Zip up and upload your Chapter6 compressed folder to the Canvas Chapter 6 Assignment dropbox.

 

Chapter Topics

Points

1   Insert an Image

3

2   Specify an Image Size

3

3.  Add Alternative Text

3

4.  Add an Image Horizontally using CSS

3

6.  Center an Image using CSS

2

7.  Wrap Text Between Images using CSS

2

9.  Set an Image Border using CSS

2

10.  Add Space Around an Image using CSS

2

11.  HTML document passes W3C Markup Validation Service

10

Total

30