View
41
Download
0
Category
Preview:
DESCRIPTION
CGS 3175: Internet Applications Spring 2008 CSS In-class Practice. Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs3175/spr2008. School of Electrical Engineering and Computer Science University of Central Florida. - PowerPoint PPT Presentation
Citation preview
CGS 3175: Internet Applications (Assignment 1) Page 1 © Mark Llewellyn
CGS 3175: Internet ApplicationsSpring 2008
CSS In-class Practice
School of Electrical Engineering and Computer ScienceUniversity of Central Florida
Instructor : Dr. Mark Llewellyn markl@cs.ucf.edu
HEC 236, 407-823-2790http://www.cs.ucf.edu/courses/cgs3175/spr2008
CGS 3175: Internet Applications (Assignment 1) Page 2 © Mark Llewellyn
Web Page Layout
Header – Level 1
Paragraph of text.
Header – Level 2
Ordered list with 5 elements.
Header – Level 2
Unordered list with 3 elements.
Header – Level 2
Paragraph of text.
CGS 3175: Internet Applications (Assignment 1) Page 3 © Mark Llewellyn
Web Page Layout With Desired Styles
Header – Level 1
Paragraph of text.
Header – Level 2
Ordered list with 5 elements.
Header – Level 2
Unordered list with 3 elements.
Header – Level 2
Paragraph of text.
Blue text. Centered on page.
font size 14 pt.
Red text. Left justified.
List elements in purple. 12pt font size
List elements in green.
Font size 12 pt.
Orange text.
CGS 3175: Internet Applications (Assignment 1) Page 4 © Mark Llewellyn
Initial XHTML – without any styling<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- This is the header section --><head><title> CSS In-class Practice Problem </title></head><!-- This is the body of the document --><body><h1> 2008 Softball Season </h1><p>This is an Olympic year for softball, so the Bejing Games are dominating the international softball season. The US National Team is about to begin a national tour in which they will play many different training games around the country. They will play the UCF softball team on February 29th.</p><h2>Some Members of the 2008 US Women's National Softball Team</h2><ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li></ol><h2>Some Teams the National Team will play</h2><ul> <li>UCF</li> <li>Arizona</li> <li>DePaul</li></ul><h2>Bound For Bejing Tour</h2><p> The Bound for Bejing Tour (B4B Tour) will canvas more than 25 states in the US. In June, the US team will meet both China and Mexico in training games in Oklahoma City. ESPN will televise several of these games.</p></body></html>
CGS 3175: Internet Applications (Assignment 1) Page 5 © Mark Llewellyn
Initial XHTML Rendering
CGS 3175: Internet Applications (Assignment 1) Page 6 © Mark Llewellyn
Creating the CSS
/* CSS for CSS In-class Practice */
/* define the h1 element */h1 { color:blue; text-align: center;}
/* define the h2 element */h2 { color: red; text-align:left;}
/* define paragraph element */p { font-size: 14pt;}
/* define list elements */li {color:purple; font-size: 12pt;}
Don’t forget to validate the CSS
CGS 3175: Internet Applications (Assignment 1) Page 7 © Mark Llewellyn
Modify the Initial XHTML to include linked style sheet<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- This is the header section --><head><title> CSS In-class Practice Problem </title><link rel="stylesheet" href=“inclassCSS.css" type="text/css" /></head><!-- This is the body of the document --><body><h1> 2008 Softball Season </h1><p>This is an Olympic year for softball, so the Bejing Games are dominating the international softball season. The US National Team is about to begin a national tour in which they will play many different training games around the country. They will play the UCF softball team on February 29th.</p><h2>Some Members of the 2008 US Women's National Softball Team</h2><ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li></ol><h2>Some Teams the National Team will play</h2><ul> <li>UCF</li> <li>Arizona</li> <li>DePaul</li></ul><h2>Bound For Bejing Tour</h2><p> The Bound for Bejing Tour (B4B Tour) will canvas more than 25 states in the US. In June, the US team will meet both China and Mexico in training games in Oklahoma City. ESPN will televise several of these games.</p></body></html>
Add the link element for the linked style sheet.
CGS 3175: Internet Applications (Assignment 1) Page 8 © Mark Llewellyn
Rendering Using CSS
Is this what we wanted?
CGS 3175: Internet Applications (Assignment 1) Page 9 © Mark Llewellyn
Modify the CSS
/* CSS for CSS In-class Practice */
/* define the h1 element */h1 { color:blue; text-align: center;}
/* define the h2 element */h2 { color: red; text-align:left;}
/* define paragraph element */p { font-size: 14pt;}
/* define list elements */li {color:purple; font-size: 12pt;}
/* define class for green list elements */li.green {color:green; font-size: 12pt;}
/* define class for orange text */.orange {color:orange;}
/* define 12 pt font class */.twelvept {font-size:12pt;}
CGS 3175: Internet Applications (Assignment 1) Page 10 © Mark Llewellyn
Modify the XHTML to include style changes<?xml version="1.0" encoding="UTF-8" standalone="no" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- This is the header section --><head><title> CSS In-class Practice Problem </title><link rel="stylesheet" href="inclassCSS.css" type="text/css" /></head><!-- This is the body of the document --><body><h1> 2008 Softball Season </h1><p>This is an Olympic year for softball, so the Bejing Games are dominating the international softball season. The US National Team is about to begin a national tour in which they will play many different training games around the country. They will play the UCF softball team on February 29th.</p><h2>Some Members of the 2008 US Women's National Softball Team</h2><ol> <li>Jeanne Finch</li> <li>Cat Osterman</li> <li>Jessica Mendosa</li> <li>Natasha Watley</li> <li>Stacey Neuvman</li></ol><h2>Some Teams the National Team will play</h2><ul> <li class="green">UCF</li> <li class="green">Arizona</li> <li class="green">DePaul</li></ul><h2 class="orange">Bound For Bejing Tour</h2><p class="twelvept"> The Bound for Bejing Tour (B4B Tour) will canvas more than 25 states in the US. In June, the US team will meet both China and Mexico in training games in Oklahoma City. ESPN will televise several of these games.</p></body></html>
CGS 3175: Internet Applications (Assignment 1) Page 11 © Mark Llewellyn
Final Rendering
Recommended