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. Include links to all of the .html
pages from your assignments.html page. Also 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.
lab2.html ― Internal Cascading Style Sheets:
 Display your name using the h1 tag
 Insert an image of you.
 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
 Add a link to your assignments.html file.
 Using the Google Image Search find an image of your favorite car.
 Make that image a link to a website related to your favorite car.
 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, backgroundcolor, text-align, font-size, font-weight, font-style, text-decoration, texttransform. 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.
 Remember to add the link to lab2.html from assignments.html.
Lab2a.html ― External Cascading Style Sheets::






Using save-as, save lab2.html as lab2a.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 lab2.html.
Create an external style sheet to modify the tags used, including the body tag
(Name the style sheet file style2a.css) NOTE: This external style sheet needs
to be completely different from the internal style sheet used in lab2.html.
Also include the link to the CSS file from within the head element using the link
tag.
Remember to add the link to lab2a.html from assignments.html.
Lab2b.html: Disaster preparedness
 As always include comments with your name, section, etc. near the top and near
the bottom of your document.
 Include a heading with your name and section number.
 Include an appropriate title.
 Include an image that shows an aerial view of part of the coast of South Carolina.
 Include an image of you.
 If you were in the path of a hurricane, blizzard, or other natural disaster, what are
the first ten 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.)
 Include a link to lab2a.html
 Go to assignments.html and put all the links to your lab assignments in an
ordered list.
 Remember to add the link to lab2b.html from assignments.html.
Lab2c.html: Exploring New CSS Properties
 Use heading tags to display your name, and section number.
 As always, include an appropriate title.
 Using an external style sheet include seven cascading style sheet properties that we
have not discussed in class as well as some others to make your page look
presentable.
 Include a comment in your CSS that contains your name, your section number and
your major.
 Use the tags required to properly illustrate the seven new cascading style sheet
properties. To illustrate these properties you may need to include text, images, etc.
with the tags. You must use these new style properties on your web page.
 Create a table describing each of the seven styles you have used. The headings of the
table should include property, purpose, values, and an unordered list of examples.


Your table should look similar to the example table below. Your table will have
seven different properties, not just one. It cannot include properties that have been
discussed in class. The purpose, value and example columns should be filled in using
your own words, not copied from the Web. (Use the th tags to create the headings at
the top of the columns ─ Pages 97-98.)
Include at least two links to the Web to the location where you found the cascading
style sheet information.
Include a link to lab2c.html in the list on your assignments.html page
EXAMPLE TABLE
Property
font-size
Purpose
Values
Specifies the
font size
Point value, or a % of the normal size, or one of the following:
small, medium, large



Examples
font-size:24pt
font-size:150%
font-size:large