Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style...
-
Upload
jodie-young -
Category
Documents
-
view
222 -
download
0
Transcript of Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style...
![Page 1: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/1.jpg)
Style and Lists
HTML - Chapters 5 and 6
![Page 2: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/2.jpg)
Objectives
Use and distinguish between various style sheets and properties
Create and distinguish between different types of lists
Alter the default bullets for lists
![Page 3: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/3.jpg)
![Page 4: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/4.jpg)
Style Sheets A style To style sheet -
![Page 5: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/5.jpg)
Style Sheets
![Page 6: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/6.jpg)
Style Sheet Types for HTML
inline styles:
embedded styles:
linked style sheets: in external file and linked with the Web site
![Page 7: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/7.jpg)
![Page 8: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/8.jpg)
![Page 9: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/9.jpg)
Using Inline Styles
<tag style=“style declarations”> “attribute1:value1; attribute2:value2”
![Page 10: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/10.jpg)
Example file
![Page 11: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/11.jpg)
Creating an Embedded Style
<style> tag between the head tags <style>
selector {attribute1:value1; attribute2;value2; ...}
</style>
![Page 12: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/12.jpg)
Values of theList-Style-Type Attribute
This figure shows the possible values of the list-style-type attribute.
![Page 13: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/13.jpg)
Style Properties
Text on page 53 Link and Anchor page 56 Color page 57 MS Training available online
Do a search for training Introduction to cascading style sheets From there is a link to HTML for
Beginners
![Page 14: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/14.jpg)
Creating a Rollover Effect
This figure shows the rollover effect.
![Page 15: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/15.jpg)
The class Attribute
DO NOT USE THE CLASS ATTRIBUTE FOR YOUR ASSIGNMENTS!
THE EXAMPLES IN THE BOOK SHOW HOW TO USE CLASS BUT THAT IS NOT THE ONLY WAY TO COMPLETE THE TASK.
![Page 16: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/16.jpg)
Horizontal Lines
Created with the <hr> tag Modify: color, height, width,
alignment Specify as:
percentage of available space # of pixels
![Page 17: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/17.jpg)
Exercise
What will the following code generate?
![Page 18: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/18.jpg)
<head><title> Adding Style</title><style> h1 {color:red} </style></head>
<body><h1 style="text-decoration:underline">Let's put a line at the top of this page </h1><hr><br><h1>And another one with different style attributes here </h1><hr style="color:aqua; height:50pt"><br/><h1> And a final one of a different height, length and color</h1><hr style="color:green; width:50%; height:25px">
</body></html>
![Page 19: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/19.jpg)
Creating Lists
![Page 20: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/20.jpg)
List Types
ordered list
unordered list
definition list
![Page 21: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/21.jpg)
![Page 22: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/22.jpg)
![Page 23: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/23.jpg)
![Page 24: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/24.jpg)
Lists in Action
http://www.msn.com/
![Page 25: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/25.jpg)
![Page 26: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/26.jpg)
Homework HTML2
Create a file containing characteristics of your current/future/desired web page. You will use an ordered list and a definition list. You will use inline and embedded styles.
Specifics on my web siteStart early so you can get your
questions answered.
![Page 27: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/27.jpg)
Homework Networks - Long & Long, chapter 6
Consider methods to connect to the Internet. Research the following: local availability (company names), max & typical connection speed, price to connect to the Internet (initial and monthly), transmission media (for example twisted pair, wireless-microwave, wireless-radio)
Cellular modems, Internal & External modems, DSL, cable modems, Satellite, T1/T3
![Page 28: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/28.jpg)
Extra Credit Opportunities
3-4 minute PowerPoint presentation Max of 5 points Send presentation to
[email protected] by 8am on the third day following class (Friday for Tuesday classes or Sunday for Thursday classes)
![Page 29: Style and Lists HTML - Chapters 5 and 6. Objectives Use and distinguish between various style sheets and properties Create and distinguish between.](https://reader036.fdocuments.net/reader036/viewer/2022070418/5697bf7c1a28abf838c8403a/html5/thumbnails/29.jpg)
Topics Define any unfamiliar terms used in your presentations.Use your book, other books, the Internet as sources.
Identify the reasons to create a home network. Tell how to connect a home network. Include hardware, software, & costs.
Define client/server and peer-to-peer networks. Identify differences between them? Where are they used? Distinguish client from server.
Discuss the advantages and disadvantages of wireless networks. How are they created? What are the types of wireless networks?