LIS 605

Download Report

Transcript LIS 605 

Fun with Formatting: DIV
tags and Cascading Style
Sheets
Dr. donna Bair-Mundy
The <div> Tag
• Defines a division or section
in an HTML document
• Visually, allows us to make
containers that can be
formatted
Without any <div> tags
<html>
<head></head>
<body>
<h2>Fun with Div Tags and CSS</h2>
<p>Aloha!</p>
<p>Let’s play with div tags. These tags create
divisions within a web page that can be formatted
using style elements. </p>
</body>
</html>
Basic page
The <div> tag
<html>
<head></head>
<body>
<h2>Fun with Div Tags and CSS</h2>
<div>
<p>Aloha!</p>
</div>
<div>
<p>Let’s play with div tags. These tags create
divisions within a web page that can be formatted
using style elements. </p>
</div>
</body>
</html>
Basic page with Div tags
The <div> tag
<html>
<head></head>
<body>
<h2>Fun with Div Tags and CSS</h2>
<div style="color:blue">
<p>Aloha!</p>
</div>
<div style="color:green">
<p>Let’s play with div tags. These tags create
divisions within a web page that can be formatted
using style elements. </p>
</div>
</body>
</html>
Div tags with style element
The <div> tag
<html>
<head></head>
<body>
<h2>Fun with Div Tags and CSS</h2>
<div style="color:blue">
<p>Aloha!</p>
</div>
<div style="color:purple ; backgroundcolor:pink">
<p>Let’s play with div tags. These tags create
divisions within a web page that can be formatted
using style elements. </p>
</div>
</body>
</html>
Div tags with style element
Creating nested boxes with div tags
<html>
<head></head>
<body>
<div style="background-color:blue ; padding:3em ;
margin-top:1em">
<h2>Box 1</h2>
<div style="background-color:pink ; padding:2em ;
margin-top:1em">
<h2>Box 2</h2>
<div style="background-color:green ; padding:1em ;
margin-top:1em">
<h2>Box 3</h2>
</div>
</div>
</div>
</body>
</html>
Colored boxes
Many Boxes with Same Formatting
Many Boxes with Same Formatting
<html>
<head>
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ; padding : 0.5em ; }
</style>
</head>
<body>
<h2>Format Many Boxes with One Style Sheet</h2>
<p>Sometimes you want to add many boxes with the same formatting. You can use div tags
to do this. However, putting style elements in each one of the boxes to be formatted can be
time-consuming.</p>
<div class="tip"> Tip: Using a style sheet helps. </div>
<p>Adding a style sheet means you only have to do the formatting once. And to change the
formatting on all the boxes you make only one change. This can save you much time. It can
also make your web files smaller and easier to manage.</p>
<div class="tip"> Tip: Using a different background color helps call
attention to text. </div>
</body>
</html>
Adding class to our div tags
<body>
...
<div class=“tip>
Tip: Using a style sheet helps.
<div class=“tip”>
</div>
...
<div class=“tip>
Tip: Using a different background color
helps call attention to text.
</div>
</body>
Marked-up manuscript
A
Chapter One
fleur
graphic
Mysterious Visitor
¶ It was a dark and stormy
night. As was my custom on a
Friday night, I was curled up
in my favorite armchair reading
Cataloging & Classification. ital.
All of a sudden, I heard a loud
b.f.
“Tap, tap, tap” on the window.
¶ Wondering what type of
person would be out and about
on such a stormy night, I went
over, pulled aside the curtain,
and peered out into the
darkness.
BA
Between the Head Tags
<head>
...
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ; padding : 0.5em ; }
</style>
...
</head>
but first . . .
Without a style sheet
Without a style sheet
<html>
<head>
<title>Basic HTML document with paragraphs</title>
</head>
<body>
<h1>Cascading Style Sheets</h1>
<h2>Introduction</h2>
<p>
Cascading Style Sheets (CSS) are used to format the way things appear on a Web page.
When using Cascading Style Sheets HTML is used to provide structure and the style
sheet is used to control how the elements look on the page.
</p>
<h2>The Term</h2>
<p>
The term "Style sheet" refers to a list of rules for formatting various elements.
The word "Cascading" refers to the fact that you can have multiple style sheets
which follow rules of precedence. </p>
</body>
</html>
With a style sheet
With a style sheet
<html>
<head>
<title>Basic HTML document with paragraphs</title>
<style type="text/css">
h2 { color : blue ; }
</style>
</head>
<body>
<h1>Cascading Style Sheets</h1>
<h2>Introduction</h2>
<p>
Cascading Style Sheets (CSS) are used to format the way things appear on a Web
page. When using Cascading Style Sheets HTML is used to provide structure and the
style sheet is used to control how the elements look on the page.
</p>
<h2>The Term</h2>
<p>
The term "Style sheet" refers to a list of rules for formatting various elements.
The word "Cascading" refers to the fact that you can have multiple style sheets
which follow rules of precedence. </p>
</body>
</html>
Adding a style sheet
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
cascading
style sheet
<style type="text/css">
</style>
</HEAD>
Style-sheet rule
Selector
Declaration block
h2 { color : blue ; }
Property
Value
Adding a style sheet
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
<style type="text/css">
h2 { color : blue ; }
</style>
</HEAD>
Add background color to our header
<html>
<head>
<title>Basic HTML document with paragraphs</title>
<style type="text/css">
h2 { color : blue ; background-color : pink ; }
</style>
</head>
<body>
<h1>Cascading Style Sheets</h1>
<h2>Introduction</h2>
<p>
Cascading Style Sheets (CSS) are used to format the way things appear on a Web
page. When using Cascading Style Sheets HTML is used to provide structure and the
style sheet is used to control how the elements look on the page.
</p>
<h2>The Term</h2>
<p>
The term "Style sheet" refers to a list of rules for formatting various elements.
The word "Cascading" refers to the fact that you can have multiple style sheets
which follow rules of precedence. </p>
</body>
</html>
Adding background color
using our style sheet
Adding a style sheet
<HEAD>
<TITLE>
donna’s Web portal
</TITLE>
<style type="text/css">
body { background : #FFC0FF ; }
h1 { color : green ; }
h2 { color : blue ; }
</style>
</HEAD>
Color coding in
hexadecimal numbers
#FFC0FF
Red
R
G
B
Green
Blue
Binary numbers
100 10
1
0 0 7
4
2
1
1 1 1
Base Ten 0 1 2
3
4
5
6
7
8
9
10
Base Two 0 1 10 11 100 101 110 111 1000 1001 1010
Hexadecimal numbers
Counting…
2 5 5
100 10
Decimal number
1
0 0
1
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
16
1
F F
256 16
Hexadecimal number
1
Base Ten 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Base 16
0 1 2 3 4 5 6 7 8 9 A
B C
D E
F 10
Coding black in hexadecimal
numbers
00
00
00
#000000
Coding red in hexadecimal
numbers
FF
00
00
00
#FF0000
Coding green in hexadecimal
numbers
00
00
FF
00
#00FF00
Coding blue in hexadecimal
numbers
00
00
FF
00
#0000FF
Coding white in hexadecimal
numbers
FF
00
FF
00
FF
00
#FFFFFF
Coding turquoise in
hexadecimal numbers
00
FF
00
FF
00
#00FFFF
Coding fuchsia in
hexadecimal numbers
FF
00
00
FF
00
#FF00FF
Coding lilac in hexadecimal
numbers
FF
00
C0
00
FF
00
#FFC0FF
C0
12 x 16 = 192
Source for named colors
http://www.w3schools.com/html/html_colornames.asp
Hexadecimal codes for colors
http://www.december.com/html/spec/color.html
Web search on: hexadecimal codes web page
Formatting with the div tag
The <div> tag
<html>
<head>
<title>Basic HTML document with paragraphs</title>
<style type="text/css">
h2 { color : blue ; }
div { background-color : #FFDDFF}
</style>
</head>
<body>
<h1>Cascading Style Sheets</h1>
<div>
<h2>Introduction</h2>
<p>Cascading Style Sheets (CSS) are used to format the way things appear on a Web page. When
using Cascading Style Sheets HTML is used to provide structure and the style sheet is used to
control how the elements look on the page. </p>
</div>
<div>
<h2>The Term</h2>
<p>The term "Style sheet" refers to a list of rules for formatting various elements.
The word "Cascading" refers to the fact that you can have multiple style sheets
which follow rules of precedence. </p>
</div>
</body>
</html>
Formatting with the div tag
Many Boxes with Same Formatting
Between the Body Tags
<body>
...
<div class="tip">
Tip: Using a style sheet helps.
</div>
<div class=“tip”>
...
<div class="tip">
Tip: Using a different background color
helps call attention to text. </div>
</body>
Between the Head Tags
<head>
...
<style type="text/css">
</style>
...
</head>
Add formatting for our tip box
<head>
...
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ;
padding : 0.5em ; }
</style>
...
</head>
div.tip
Add formatting for our tip box (2)
<head>
...
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ;
padding : 0.5em ; }
</style>
...
</head>
{ } enclose formatting
statement
Add formatting for our tip box (2)
<head>
...
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ;
padding : 0.5em ; }
</style>
...
</head>
border : solid 2px purple ;
Add formatting for our tip box (2)
<head>
...
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ;
padding : 0.5em ; }
</style>
...
</head>
background-color : #FFDDFF ;
Add formatting for our tip box (2)
<head>
...
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ;
padding : 0.5em ; }
</style>
...
</head>
margin : 1em ;
Margin attribute
Previous text.
Tip: Adding a margin around text
emphasizes it.
Following text.
The margin is the white
space surrounding the box.
Add formatting for our tip box (2)
<head>
...
<style type="text/css">
div.tip { border : solid 2px purple ;
background-color : #FFDDFF ;
margin : 1em ;
padding : 0.5em ; }
</style>
...
</head>
padding : 0.5em ;
Margin attribute
Previous text.
Tip: Adding a margin around text
emphasizes it.
Following text.
The padding is the space
surrounding the text within the box.
The Result
You’ve already seen this...
http://www2.hawaii.edu/~donnab/infocomm/dns_assignment.html
Use div tags create a page like this
You will chose your own colors (do
not duplicate mine).