Exercise 2:
Lists and CSS Basic Styles
In this Exercise we will work with different types of lists and learn some basic CSS to style our pages.
HTML List Elements
- unordered list <ul> </ul>
- type="square", "circle", "disc"
- <li> </li>
- ordered list <ol> </ol>
- type="I", "A", "1", "a"
- start="#"
- <li> </li>
- definition list <dl> </dl>
CSS: Basic Document Styles
Basic CSS Document Styles are placed in the head of your HTML document.
- <style> </style>
- selector {property: value;}
- background-color: x; #hex code or color name
- font-family: n; font name
- color: x; #hex code or color name
- /* CSS Comments */
CSS: Inline Styles
CSS Inline Styles are used in the body of the HTML document.
- <span> </span>
- style="property:value"
- "style" attribute within an HTML open tag
Exercise Requirements
- Create two to three html documents to experiment with all the elements
- Make several types of lists with multiple items.
- Use CSS styles for background colors, fonts and font colors.
- Use CSS Inline styles to modify small amounts of text.
- Content - write a description of what each tag is and what each tag does or use your own content.
- Feel free to use the tags in creative ways.
Additionally:
- Use a Definition List to indent some copy.
- Use an Unordered List to indent some copy.
- Nest an Ordered List at least three levels.
- Nest an Unordered List at least three levels.
|
Design Process and Final Presentation
- Create a project folder named "YourLastNameE2"
- Create your HTML documents in a text program (Notepad or TextEdit). Save as "YourLastNameE2.html"
- Write your text and format it by using the elements and CSS styles.
- Use all the list elements and the CSS styles.
- Review your work in a browser before uploading to the server
- Upload to the school server
Evaluation
This exercise is worth 15 points.
- Coding (3)
- Functionality (3)
- Meeting project requirements (3)
- Your effort (3)
- Meeting deadlines (3)
Due Date
Text Reference
- Chapter 5: page 76 - 79
- Chapter 11: 187 - 194
- Chapter 13: page 233 - 240
- Review Lecture in Course Content on Blackboard
Online Demos
Useful Links
List of HTML Color Names
Fonts for Mac & PC
Exercise Two Elements Defined
A page of tag/element descriptions for Exercise Two
|