DIG 111 – Introduction to Web Design

Project 2: Structure and format a website using XHTML & CSS

Objectives:
1. Create two linked web pages using XHTML code to structure the page.
2. Create a website that contains graphics: .jpg, .png, transparent gif, and favicon.
3. Create a website that contains ordered, unordered, definition, and nested lists.
4. Create a website that contains relative, absolute links, and anchors
5. Create a website that contains an email link
6. Use Internal, Inline, and External Cascading Style Sheets to format the web pages.

Formatting Project 2
Before you begin adding styles to your web pages, make sure that you have not added any formatting using
HTML tags (e.g. strong, center, or small/big tags). Make sure that the (X)HTML code validates. All formatting
must be accomplished using CSS.

In order to demonstrate that you understand the three ways to apply a style sheet, you will create one
external style sheet that will contain styles for both pages, internal (embedded) style sheets for each page,
and one inline (local) style.

Adding divs and spans

Before you begin formatting the web pages, you must add some additional structuring code to them. You will
add some <div> and <span> elements to group elements together. You will also add some class and id
names to existing elements.

(X)HTML STRUCTURE
Please Note: Create your own class and id names. Do not use the examples provided here.
*Please note: class and id names cannot have any spaces in them.
Genre page
Create a <div> with a class name to encompass the Genre Heading and First Image eg. <div
class=”center”>
Create a <div> with a class name to encompass the two paragraphs about the film genre e.g. <div
class="genreinfo">
Create a <span> with a class name for every film title in the two paragraphs about the genre eg. <span
class=”filmTitle”
Create a class name for the copyright info. (If copyright info is NOT inside a block level element – create one
and add the class name to that element e.g. <p class="copyright">&copy; name, 2010</p>
Create any additional <div>, <span>, class and id names as you deem necessary for your page.
Film page
Create a <div> with a class name to encompass the Film Name Heading and the image eg. <div
class="center">. Same class name as for Genre Heading and image on first page.
*Please Note: If you did not place the image after the Film Name, you should create the code to do this.
Create a <div> with an id name to encompass the transparent gif image and the two paragraphs about the
film e.g. <div id="filmInfo">
Add the same <span> and class name that you used on page one for every film title in the paragraphs on this
page.
Create <div> with id name to surround the nested list.
Create a <div> with an id name to encompass the Actor's name, his/her image, and the paragraph about the
actor e.g. <div id=”actor”>
Add the same class name for the copyright info as on page one. (If copyright info is NOT inside a block level
element – create one and add the class name to that element e.g. <p class="copyright">&copy; name,
2010</p>
Create any additional <div>, <span>, class and id names as you deem necessary for your page.

After you add this code to the html documents, run through the XHTML validator to make sure the document is
still valid. Fix any mistakes before proceeding.
DIG 111 – Project #2: Structure and Format web pages with XHTML & CSS Page 2 of 4

FORMATTING WITH STYLE SHEETS

You MUST include all of the required formatting. This is the only way I will know that you understand how to use
the different style rules. (The next project you will be given much more freedom). You may create additional
styles if desired but make sure that you have fulfilled the basic requirements first. Also, make sure any additional
styles do not override the basic style requirements for this assignment.
1. Create the External Style Sheet first. This will create styles that apply to both pages.
2. Create the Internal Style Sheets second. These will apply to specific sections on each page.

EXTERNAL STYLE SHEET

Formatting Requirements applied to both pages
Create External Style Sheet that will be applied to both pages using plain text editor or Top Style Lite.
Save as project2Styles.css to the Project 2 folder.
Create link from pages 1 and 2 to the style sheet in the <head> section of the both html documents (p. 129). Example:
<link rel="stylesheet" type="text/css" href="lastname_project2Styles.css" />
Create style for Background Color for the both pages Use body tag as selector
(other than default white) Use rgb color code for background color
Create style for font-family and color for all text Use hexadecimal color code for color
elements except the headings. Create font-family value that will apply to all text
elements on the page (paragraphs, lists, links)
Create style to format the <div> surrounding the Use the class name as the selector e.g. div.classname
Genre Heading and the Image on page 1 and the Film text-align MUST be centered
Heading and Image on page 2 so it is centered
• text-align (p. 171)
Create style for font-family for all heading tags used Use grouped selectors (e.g. h1, h2, h3) if you used
on both pages more than just one type of heading tag.
• Font-family should be a different generic category
from font-family applied to other text elements in
the body selector
• For example, if you chose "Georgia, times, serif" for
your base font, then choose "arial, Helvetica, sans-
serif" for your headings font.
Resources:
• http://www.typetester.org/
• http://www.w3.org/Style/Examples/007/fonts.html
• http://www.speaking-in-styles.com/web-
typography/Web-Safe-Fonts/
Create style to format unordered lists for: Use ul tag as selector
• list-style-type (p. 218) Any non-alpha/numeric bullet except disc
Create styles to Format links. You must change: apply to: a:link, a:visited, a:focus, a:hover, and
• color a:active (p. 146)
You can also change any other font or text styles such as • color value must use hexadecimal code for value
text-decoration, font-style, font-weight, font-size, etc.
Create style for <span> and class name applied to Apply to class name for the span.
film titles in paragraphs • text-decoration CANNOT be "none" or "inherit"
• text-decoration (p. 166)
• one other style of your choice
Create style for horizontal rules Use hr tag as selector
• color • color must use rgb color code for value
• background-color • background color must use same rgb color code for
• width value
• height (if desired)
Create style for class name applied to copyright info: Create style for copyright info. Use class name as
Set font values all at once (p. 159) selector.
• font-family (p. 152 – 153) • font-size must use px for value
• font-size (p. 156) • font-style CANNOT use "normal"
• font-style (p. 154) • font-weight CANNOT use "normal"
DIG 111 – Project #2: Structure and Format web pages with XHTML & CSS Page 3 of 4
• font-weight (p. 155) • text-align CANNOT use "inherit" or “left”
Also set styles for:
• text-align

INTERNAL (EMBEDDED) STYLE SHEET

Format Requirements for PAGE 1 (project2_genreName.html)
Create internal (embedded) style sheet for page 1 (p. 131)
Create after the link to the external style sheet in head section of web page after the link to the external style
sheet.
<style type="text/css"> Style Rules created between the <style> </style> tags.</style>
Create Styles for <div> surrounding 2 paragraphs Apply to the class name given the <div> (p. 140)
about the genre for: • font size must be a KEYWORD
• font-size ( (p. 156) • color must be HEXADECIMAL code
• color (p. 160) • text-indent must be LENGTH (not "0")
• text-indent (p. 163) • line height must be a PERCENTAGE (not "normal")
• line-height (p. 158)
Create style for Definition Term (dt) Use dt as selector
• font-weight (p. 155) • font-weight CANNOT use "normal"
• line height (p. 158) • line-height MUST be a percent
Create style for Definition (dd) Use dd as selector
• font-style (p. 154) • font-style CANNOT use "normal"
Create style for Ordered List Use ol as selector
• list-style-type • any alpha/numeric value except decimal
Create styles for any other elements, divs, or spans you
created.

INTERNAL STYLE SHEET

Format Requirements for Page 2 (project2_filmName.html)
Create internal (embedded) style sheet for page 2 (p. 131)
Create after the link to the external style sheet in head section of web page.
<style type="text/css"> Style Rules created between the <style> </style> tags.</style>
Create styles for <div> surrounding 2 paragraphs Apply to id name for the <div>
about the film for: • font-size MUST be a KEYWORD
• font-size (p. 156) word-spacing CANNOT be "normal"; must be at least
•
• word-spacing (p162) 5 px.
• color MUST be HEXADECIMAL code for value
(different from page 1)
Create style to float the transparent image in Float image to left or right of the paragraphs.
relationship to the two paragraphs. Use contextual selectors to float the image e.g.
Create style to clear after the paragraphs. div#filminfo img {float:right;}
p. 181 - 182
Create styles for all images on page: Borders p. 184 – 185
• border (.jpg image only) Margins p. 176
• padding Padding p. 177
• margin
Create styles for paragraphs within <div> Contextual Selector: Apply to p within the div
surrounding the Actor Name, Image, and paragraphs For example: #actor p {text-transform:uppercase; text-
for: indent: 10px;}
• text-transform text-transform value CANNOT be "none" or "inherit"
• text-indent text-indent value = pixels
Create style to float .jpg image in relationship to the Float image to left or right of the paragraph.
paragraph about the actor. Use Contextual selectors to float the image e.g.
Create style to clear after the paragraphs div#actor img {float: left;}
Use contextual selectors to format nested list for: Use id plus list element (ul or ol) plus li element to
• list-style-type (p. 218) create unique styles for each list inside the nested list.
• font-weight (See page 224 – 225)
• font-size
DIG 111 – Project #2: Structure and Format web pages with XHTML & CSS Page 4 of 4
Use any list-style-type except the default (disc for
unordered list and decimal for ordered list)
Create styles for any other elements, divs, or spans you
created.

INLINE (LOCAL) STYLE

Applied to Index.html page
Apply INLINE (LOCAL) style to the Projects Heading Apply to <hn> tag for Projects Heading
you created on your Index.html page. • font-size MUST use "em" for value
• font-family
• any other styles you want to apply

Apply INLINE (LOCAL) style to the ordered or Apply to <ul> or<ol> tag for list of projects
unordered list to change list-style-type • font-family
• font-size
• font-style

All values for the styles must be designated (don't use "none" or "normal" or "inherit").

CSS VALIDATION
When you have finished creating the style sheets, go to the CSS Validator to validate the code:
http://jigsaw.w3.org/css-validator/ . Fix any mistakes before uploading the files to the web2 server.

Once you get the Styles to validate, copy and paste the CSS Validator code after the XHTML Validator code on
your web pages.

Handing in Project 2
1. Re-upload index.html file to the public_html directory (replace the existing file with the new one).
a. set permissions on the new index.html file
2. Upload the project2 folder (contains 2 .html files – project2_genreName.html and
project2_filmName.html, images folder with image files, and .css file – lastname_project2Styles) to
the web2 server.
a. set permissions for the project2 folder and all files/folders within it.
3. Open ANGEL and go to the drop box for project 2.
a. In the Message section of the drop box,
• type the URL for the index page (Homepage).
URL should look similar to this:
http://web2.niagaracc.suny.edu/~firstname.lastname1/index.html
• In the message section of the drop box,
o Write a paragraph describing your reaction to using style sheets to format
the web pages.
o Discuss any challenges you faced in using the style sheets.
o Explain the impact of using style sheets had (or will have) on your design of
web pages.
o What was the most difficult part of the assignment?
o Describe your experience using the XHMTL and CSS Validator for this
assignment.

I will not grade your project until I see that you have entered the required information into the ANGEL Drop
box. If I cannot view your project for any reason (you didn't upload it correctly, you didn't set permissions, you
didn't create a new link to your index page, etc.), I will not grade it. Please double check to make sure
everything is working correctly after you upload it to the web2 server. If it doesn't work, FIX IT!

PLEASE NOTE: You cannot earn an "A" on this project if your code (HTML and CSS) does not
validate!