Week5

On the W3Schools -> HTML Tutorial read:

HTML Images
- Images
- Image Map
- Background Images

HTML Favicon

Online favicon generator https://www.favicon.cc


Lab5

Create a web page file named lab5.html Notice that it is all lowercase, no spaces.

Specify a DOCTYPE as the very first line in the HTML document.

Create a html file that has the correct structure using the doctype, html, head, title, and body opening and closing tags.

Title the page "Your Name lab5" where YourName is your real name.

The page must have these items:

1) An image of your choosing that you find from the web. It should be sized appropriately so that it is not extremely large. Something 300 to 400 pixels in each dimension would be good. There must be an alt attribute assigned.

2) A horizontal rule going half way across the page.

3) Two images of your choice, one left aligned and one right aligned, interspersed with text. Each image must have the alt attribute assigned.

4) I have an original image that I want you to use that is here: collage.bmp

Note: This is an image type (bmp) that should never be used on a web site.

or here

Rotate the image 90 degrees to the right and resize the image to 1/2 of its original size. Save the image as "collage.jpg" Place the image on the page. You must include an alt attribute of "collage".

You have now created a web page.

Verify that your web page validates using the W3C online validator. You must submit a screenshot to the dropbox that the page validates without ANY errors.

Your result should be similar to what you see below.

screenshot

 

You need to turn in all these files zipped together into one zip file for credit:

lab5.html
favicon.ico of your choice
top image of your choice
two side images of your choice
collage.jpg

Your instructor can see if your web page (lab5.html) works correctly only if the ALL images are turned in within the zip file!

When validation is passed, you should see a message like below.

doc check

 

Grading Criteria Possible
Points
20
Your
Points
20
Correct file name. Correct DOCTYPE, HTML, HEAD, TITLE, and BODY structure. 1 1
Favicon icon showing on the page tab. 1 1
Top image of your choice and has alt attribute 2 2
Description text of your image size and type 1 1
Horizontal rule going part way across page. 1 1
Image of your choice left aligned with alt attribute. 2 2
Image of your choice right aligned with alt attribute. 2 2
Interspersed text between the two images. 2 2
Horizontal rule going all the way across page. 1 1
Collage image rotated and resized. 2 2
Collage.jpg inserted on page and has alt attribute. 2 2
Description text of collage image size. 1 1
Document validated without any errors. 2 2

 


Version 1.00.01