Lab 2
CSCE 102
Cascading Style Sheets, Lists and Tables
In this lab, you will create a number of web pages. Make sure you name the files as directed and save them in the directory named Labs. Remember to include comments near the top and again near the bottom with your name, email, section number and lab instructors name in all of your files.
lab2a.html ― Internal Cascading Style Sheets:
§ Display your name using the h1 tag
§ Insert an image of you. This can be a digital picture or scanned image.
§ Display your section number using the h2 tag.
§ Define the word plagiarism using a blockquote. If you use someone else’s words, cite the source. (Do not put it within a paragraph element.)
§ Write a short paragraph giving three differences between XHTML and HTML (Refer to your book for examples)
§ Write a short paragraph explaining the difference between a tag, an element and an attribute HTML.
§ Write a short paragraph about how we separate structure from presentation in the creation of a Web page.
§ Use an h2 tag to put a heading above each paragraph
§ In each paragraphs use the following tags: em, strong
§ Include a link on this page to each of the other .html pages you create for this lab.
§ Using the Google Image Search find an image of your favorite place.
§ Make that image a link to a website related to your favorite place.
§ Use an internal style sheet to set the background color of the entire Web page (body) to one color, set the background color of the paragraphs to another color, set the background color of the h2 elements to third color, and use a fourth color to give background color to the text in the strong elements.
§ Also in the style sheet define styles for all of the tags (p, h1, em, etc.) used. Use each of the following properties somewhere in the CSS: color, background-color, text-align, font-size, font-weight, font-style, text-decoration, text-transform. Include line-height and text-indent as properties for the paragraphs and use text-align for the h2 elements. (See Appendix D, page 541) (Define properties that change the presentation; therefore there is no need to define properties that don’t make any changes such as using the property values none or normal)
§ Set the color of your hyperlink using a:hover; a:link, and a:visited. (Page 544)
§ Center the image of you using a paragraph tag using the class attribute as shown on page 114-115.
§ Include two links to “fun” web pages you frequent.
Lab2b.html ― External Cascading Style Sheets::
§ Using save-as, save lab2a.html as lab2b.html (You now have two copies of the same file)
§ Delete the entire style element. (That includes the style tags.)
§ Change the title so that it is different from the title in lab2a.html.
§ Create an external style sheet to modify the tags used, including the body tag (Name the style sheet file style2b.css) NOTE: This external style sheet needs to be completely different from the internal style sheet used in lab2a.html.
§ Also include the link to the CSS file from within the head element using the link tag.
Lab2c.html: Disaster preparedness
· As always include comments with your name, section, etc. near the top and near the bottom of your document.
· Include an appropriate title.
· Include a heading with your name and section number.
· Include an image that shows an aerial view of your home state, country or area.
· Include an image of you.
· If you were in the path of a hurricane, blizzard, zombie attack or other natural disaster, what are the first five things that you would want or need? Make an ordered list of these things using the tags for creating lists.
· Include a heading above the list.
· Create an unordered list three types of disasters you could be confronted with.
· Create a nested list, by inserting a list under each topic in the list you just created containing the disasters, that contains at least two special difficulties involved in dealing with each disaster. Include a heading above the list.
· Include an internal CSS with at least nine property names and values. Apply some of the properties to the list tags. (For list properties see pg. 94. or pg. 544)
· Include a link on this page to lab2a.html
Lab2d.html: Tables and Image maps
§ Use heading tags to display your name, and section number.
§ As always, include an appropriate title.
§ Using an internal style sheet define style properties for this page to make it look presentable.
§ Include a comment in your CSS that contains your name, your section number and your major.
§ Create a table describing four interests or hobbies you enjoy. The table should have at least five rows and at least four columns. You should make sure to use the <th> tag for your table headings and use the colspan attribute for a large header spanning the entire table. Make sure to define styles for all your table-related tags in your internal style sheet. Your table must have a border defined for it as well.
§ Include a link to a page on the web related to each of your hobbies/interests inside the table.
§ Find an appropriate image related to one or more of your hobbies/activities and create an image map with four or more links below the table. Make sure to include one of each possible shape (rectangle, circle and polygon). Each of these should link to a page on the web related to the image.
§ Include descriptive text to explain where to click on for the image map above.
§ Include an image of you that is an image map — when you click on your forehead it will link to the web page you created for lab2a.html. You choose the shape of the link.