CS181Week11_New_1

Transcript CS181Week11_New_1

Cascading Style Sheets
http://www.w3.org/Style/CSS/
Example of HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> <head> <title>My first Web site</title> </head>
<body>

<ul>
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>

<h1>My first styled page</h1>
<p>Welcome to my first page!
</body>
</html>
Result
Adding color
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN">
<html>
<head>
<title>My first web page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
……
<body>
Result
Style sheet
• Style sheets in CSS are made up of rules.
Each rule has three parts:
• the selector (in the example: “body”), which
tells the browser which part of the document is
affected by the rule;
• the property (in the example, 'color' and
'background-color' are both properties), which
specifies what aspect of the layout is being set;
• and the value ('purple' and '#d8da3d'), which
gives the value for the style property.
Look at the example again
SELECTOR
<style type="text/css">
body {
value
color: purple;
property background-color: #d8da3d }
</style>
Style sheets
• Creating a style
• Applying styles in HTML files
Style sheets
• Creating a style
• Applying styles in HTML files
Creating a Style rule
• Step 1: Determine Selector (which identifies the
elements you wish to format). Put { next to it
Example: h1{
• Step 2: Determine property: value in which
property is the name of CSS property that applies
this format and value is one of valid options for
that property
Example: color:red
• Step 3: Combine the results of step 1 and step 2
and put } at the end.
If you have more than one property: value pairs, use
semicolon (;) to separate them.
Example: h1{color:red}
Creating a selector
• The type or name of elements
For instance: body, paragraph
• The context in which the element is found
For instance: paragraphs in the middle of the web
page
• The class or id of an element
For instance: the name of a paragraph in a web
page.
Examples
• For the type or name of elements
h2 {color:red}
h1 {color: purple}
• The context in which the element is found
div#gaudi p {color:red}
• The class or id of an element
div#gaudi {color:red}
DIV tag
• The <div> tag: defines logical divisions in a Web
page.
• determines the alignment of that section of the page.
• defines the style of whole sections of HTML.
• names certain sections of your documents so that you
can affect them with style sheets or Dynamic HTML
• Syntax:
<div [align=“<left><center><right><justify>”]
[id =name]>
<!– this is a body of the div tag 
</div>
Example for DIV tag
<div id="gaudi" align="center">
<p>Many tourists are drawn to Barcelona
to see Antoni Gaud’'s incredible
architecture. </p>
<p>Barcelona <a
href="http://www.gaudi2002.bcn.es/english
/flash/home/GO.htm">celebrates</a> the
150th anniversary of Gaud’'s birth in
2002.</p>
</div>
Example for DIV tag
Many tourists are drawn to Barcelona to see Antoni Gaud’'s incredible
architecture.
Barcelona celebrates the 150th anniversary of Gaud’'s birth in 2002.
Style sheets
• Creating a style
• Applying styles in HTML files
1. Putting style sheet in HTML files
2. Putting style sheet in a separate file
Putting style sheet in HTML files
<style type="text/css">
<!– This is where you put Style sheet
information 
</style>
Example
<html> <head>
<title>Antoni Gaud’ - Introduction</title>
<style>
h1 {color: purple}
Style sheet in
</style>
HTML file
</head>
<body>
<h1>Antoni Gaud’</h1>
Style affects
this h1 tag
<div id="gaudi" align="justify">
<p>Many tourists are drawn to Barcelona to see Antoni
Gaud’'s incredible architecture. </p>
</div>
</body>
</html>
Result
Putting the style sheet in a separate file
• Step 1: Open a new text file
• Step 2: Cut and paste the content inside
<style> </style> tags (except the tag)
• Step 3: Save in the same folder with HTML
file with the extension *.css (e.g
mystyle.css)
• Step 4:Replace <style> and </style> tag
with:
<link rel="stylesheet“ href="mystyle.css">
Example
<html> <head>
<title>Antoni Gaud’ - Introduction</title>
<link rel="stylesheet" type="text/css" media="screen" href="descendant.css"
/>
</head>
<body>
<h1>Antoni Gaud’</h1>
<div id="gaudi" align="justify">
<p>Many tourists are drawn to Barcelona to see Antoni
Gaud’'s incredible architecture. </p>
</div>
</body>
</html>
Example of descendant.css
• h1 {color:purple}
Adding fonts
body {
font-family: Georgia, Times New Roman,
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
Adding fonts
More about fonts
Font family:
font-family: Georgia, Times New
Roman, Times, serif;
Font size:
font-size:20px
Font type: bold, italic
font-style: italic
Font color:
color:#cc00ff
Example for font styles
• Choosing Font Family
• Choosing Italic
• Choosing Text color
Practice
1. Cut and paste (or type) the following code
<html> <head>
<title> Styled Page </title>
<link rel="stylesheet" type="text/css"
media="screen" href=“style.css" />
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
Practice
2. Open a new file in TextPad and create style sheet
rules:
- text color: purple for the entire web page
- background color: #d8da3d for entire web page
- color red, font Times New Roman, size=20px
and bold style for H1 tag
- font Arial, size 12px for normal paragraph
Save this file as style.css (in the same directory
where you save your html file
Practice
Insert the HTML code so that it creates the
following web page
The text doesn’t have to be the same but you should at least have a title
and two paragraphs
Style.css
body {
color: purple;
background-color: #d8da3d}
h1 {
color: red; font-family: Times New Roman;
font-size: 20px; font-style: bold}
p{
font-family: Arial; font-size: 12px}
Style.html
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
</head>
<body>
<center> <h1> Antoni Gaudí </h1> </center>
<p> Gaudí's non-conformity, already visible in his teenage years, coupled
with his quiet but firm devotion to the church, made a unique
foundation for his thoughts and ideas. ………
</body>
</html>
Elements in HTML file
• Are like labels that identify and structure
different parts of a Web page
Example: header, paragraph, division, table
• Elements can contain other elements
Layout with style
•
•
•
•
Block vs. Inline
Box model
Positioning a box
Changing padding, border, margin, size,
alignment and color
Block vs Inline
• An element of a web site can be block or
inline:
• If it is a block level, it will always be displayed
on a new line
Example:
<p> This element is at block level </p>
• If it is an inline level, it will always be
displayed in the current line
<p>……………
This is a <em> inline element </em>
</p>
Box model
• A web site can be treated as if every element is
contained in an invisible box:
•
•
•
•
Content area
Space surrounding that area (padding)
Border
Margin
• Four basic ways to position element box:
• Static: leave the box in the flow
• Absolute: specify its exact coordinates with respect to
its parent (which is the element contains the current
element)
• Fixed: specify its exact coordinates with respect to the
browser windows
• Relative: move the box with respect to its default
position in the flow
Changing from inline to block and vice versa
• Rule: <selector> {display:block}
Example: #navigation a {display:block}
Results:
• Rule:
<selector> {display:inline}
Positioning Elements Absolutely
• Rule:
<selector> {position:absolute;
top:<value>; left: <value>;
bottom:<value>; right:<value>}
<value> is the offset between this element
and its parent element
Example:
Affixing an element to the Browser Window
• Rule:
<selector> {position:fixed;
top:<value>; left: <value>;
bottom:<value>; right:<value>}
<value> is the distance between this element
and the edge of the browser windows
Example:
Note: IE 6 does not support this
Changing the Background
• Rule: <selector> {backgroundcolor:<color value or color name>}
Or
<selector> {background-color: transparent}
Example:
Changing the Foreground
• Rule: <selector> {color:<color value or
color name>}
Or
<selector> {background-color: transparent}
Example:
Changing the Border
• Rule:
<selector> {
border-style:<type>;
Border-width: <n>;
Border-color: <color>;
Border-top: <value>;
Border-right:<value>;
Border-left: <value>;
Border-bottom: <value> }
type: none, dotted, dashed, solid, double…
n: desired width (E.g 4px)
value: width (e.g 2px)
Example:
Changing the Margin
• Rule:
<selector> {
margin: x }
X: desired space to be added expressed as a
length, or a percentage of the width of the
parent element or “auto”
Example:
Adding Padding around element
• Rule:
<selector> {
padding: x }
X: desired space to be added expressed as a
length, or a percentage of the width of the
parent element
Example:
Example of HTML again
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> <head> <title>My first Web site</title> </head>
<body>

<ul>
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>

<h1>My first styled page</h1>
<p>Welcome to my first page!
</body>
</html>
Result
Adding style for navigation bar
(navigation.css)
body {
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
Em: equals to the element’s font size. 2em: equals to “twice the font size”
Adding style for navigation bar
(navigation.css)
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none;
font-family:Arial;
font-size:18px}
a:link {
color: blue }
a:visited {
color: purple }
Using navigation bar
<html> <head> <title>My first Web site</title>
<link rel="stylesheet" type="text/css" media="screen"
href="navigation.css"/>
</head>
<body>

<ul class =“navbar”>
<li><a href="index.html">Home page</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>

<center> <h1>My first styled page</h1> </center>
</body>
</html>
Results
Practice
1. Cut and paste (or type) the following code
<html> <head>
<title> Styled Page </title>
<link rel="stylesheet" type="text/css"
media="screen" href=“style.css" />
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
Practice
2. Open a new file in TextPad and create style sheet rules for:
- text color: purple for the entire web page and
background color: #d8da3d for entire web page
- unorderlist: navbar with top:2em, left:4em, width:25em
- for items in unorderlist:navbar with white background,
border-right: 1em solid black; display: inline
- for links in navigation bar navbar: font: Arial, size:
18px, no text decoration
- color of a link in this web page: blue
- color of a visited link: purple
- h1 heading: position:absolute and left alignment with top
margin: 2em
Save this file as style.css (in the same directory where you
save your html file
(Look at the css code that we have learned)
Practice
Insert the HTML code so that it creates the
following web page
CSS file (navigation.css)
body {
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 4em;
width: 25em }
CSS file (navigation.css)
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black;
display: inline }
ul.navbar a {
text-decoration: none;
font-family:Arial;
font-size:18px;
}
a:link {
color: blue}
a:visited {
color: purple}
h1 {
position:absolute;
text-align:left;
margin-top:2em;}
HTML code
<html> <head> <title>My first Web site</title>
<link rel="stylesheet" type="text/css" media="screen"
href="navigation.css"/>
</head>
<body>

<ul class="navbar">
<li><a href="index.html">Home </a>
<li><a href="hobby.html">Resume</a>
<li><a href="hobby.html">Hobby</a>
<li><a href="links.html">Links</a>
</ul>

<h1>Welcome to my personal web page</h1>
</body>
</html>
Images
• Creating Web images
Adobe Photoshop
Photoshop Elements
Paint Shop Pro
Images on the Web
•
•
•
•
•
•
Format
Color
Size and Resolution
Speed
Transparency
Animation
Format
• The format of an image on the Web should be
recognizable by Macs, Unix, Windows based OS
• GIF (Graphic Interchange Format):
widely supported image-storage format promoted by CompuServe.
Resolution is limited to 8-bits, or 256 colors.
• JPEG (Joint Photographic Experts Group )
• 24 bits. the compression scheme sacrifices some image
quality in exchange for a reduction in the file's size.
• PNG (Portable Network Graphics).
• A compressed image file format similar to JPEG
Color
•
•
•
•
24 bits
16 bits
8 bits
Browsers can mix two colors to produce
the missing color or can shift the missing
color to the one in the current set
Other factors
• Size and resolution:
• Images will be displayed depending on each
monitor’s resolution
• Recommend to keep a page < 600 pixels
• More pixels always translate to a bigger size
image
• Speed
Keep the size of an image smaller
Compress the image
Getting image
• Using search engines to find images
• Buy images on CD
• Buy a digital camera
Using images
• Inserting images on a page
• <img src=“file name or URL” width=“x”
height=“y” />
Example:
<center>
<h1> Welcome to My Web site</h1>
<img src="autumn.jpg" width ="500"
height="400" />
<p> Autumn in Wisconsin </p> </center>
Result
Alternate Text
• If the images does not appear for some
reasons, the text will appear
• Example:
<img src="autumn.jpg" width ="500"
height="400" alt =“Picture of Foliage in
Wisconsin”/>
Result
Specifying size for Speedier Viewing
• Find the size of an image:
• Right click the image
• Choose Properties or Get Image Info
• Link a thumbnail to a larger image
<A HREF="autumn.jpg">
<img src="autumn_little.jpg" alt ="Picture of
Foliage in Wisconsin" /> </a>
<p> Autumn in Wisconsin </p> </center>
Result
Result
Making Images Float
<img src="Castle.jpg" align="left" alt="Edinburgh Castle in Scotland"
width="500" height="480" />
<p> Edinburgh Castle in Scotland. Edinburgh Castle dominates the city
of Edinburgh like no other castle in Scotland , and Edinburgh Castle is
unequalled in the whole of the British Isles . Over one thousand years
of history sit on top of the famous Edinburgh rock and it is easy to see
why over a million visitors a year visit Edinburgh Castle .
When you come and visit Edinburgh Castle you will see why the early
inhabitants of the area we now call Edinburgh , made their first
settlements here, in what is now the city of Edinburgh . People have
always sought a safe refuge, and the volcanic rock that forms the base
of Edinburgh Castle , has always afforded the ultimate safe and
defensive position in Edinburgh
</p>
Making Images Float
Adding Space around an Image
<img src="Castle.jpg" align="left"
alt="Edinburgh Castle in Scotland"
width="500" height="480“
vspace=“32” hspace="20" />
Adding Space around an Image
Adding Horizontal Rules
<hr size="10" width="80%"
align="center" noshade="noshade" />
Adding Horizontal Rules
Practice
Practice
1. Open TextPad, cut and paste (or type) the
following code
<html> <head>
<title> Image page /title>
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
And save it as image.html
Practice
2. Use Google (or any search engine that
supports image searching) at
www.google.com. Click on images. Type
in the keywords of the image that you are
looking for.
3. Modify the image.html file by adding html
code to display that picture and the
description of the picture.

CS181Week11_New_1

Transcript CS181Week11_New_1

Directory