WWW programming
description
Transcript of WWW programming
![Page 1: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/1.jpg)
WWW programming
Lesson 5
Basic styles, stylesheets, spans,
div and layering
![Page 2: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/2.jpg)
Basic Styles
3 ways to apply styles:
1. Within a basic HTML tag
2. As part of the heading section <head>
3. In an external file called stylesheet
![Page 3: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/3.jpg)
<html> <head> <title>My stylesheet test</title> <style> h1{ color: red; border: thin groove; } </style>
</head> <body> <h1>Simple Stylesheet</h1>
<p>The first paragraph is unchanged</P>
<p style="margin-left: 10%; border: ridge; background: #ffffcc"> But this paragraph is substantially changed by the style formatting done in this section of the document</p>
<p>And the last paragraph is unchanged again</P> </body></html>
Changing the style for <h1> in the whole
document
Basic Styles
RECAP from
lesson 4
![Page 4: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/4.jpg)
<html> <head> <title>My stylesheet test</title> <style> h1{ color: red; border: thin groove; } </style>
</head> <body> <h1>Simple Stylesheet</h1>
<p>The first paragraph is unchanged</P>
<p style="margin-left: 10%; border: ridge; background: #ffffcc"> But this paragraph is substantially changed by the style formatting done in this section of the document</p>
<p>And the last paragraph is unchanged again</P> </body></html>
Changing the style for one paragraph
only
Basic Styles
RECAP from
lesson 4
![Page 5: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/5.jpg)
<html> <head> <title>My stylesheet test</title> <style> h1{ color: red; border: thin groove; } </style>
</head> <body> <h1>Simple Stylesheet</h1>
<p>The first paragraph is unchanged</P>
<p style="margin-left: 10%; border: ridge; background: #ffffcc"> But this paragraph is substantially changed by the style formatting done in this section of the document</p>
<p>And the last paragraph is unchanged again</P> </body></html>
The Resulting web page
RECAP from
lesson 4
![Page 6: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/6.jpg)
Style Rules
A rule have two parts: a selector and a set of declarations:
body {
background-color: 000255;
}
h1 {
color: #eeebd2;
background-color: #d8a29b;
font-family: “Book Antiqua”, Times, serif;
border: thing groove #9baab2;
}
![Page 7: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/7.jpg)
ClassesYou can use classes create your own formatting,
that you can call later:
<html> <head> <title>The Unofficial LR CC Website - Promo Page 1</title> <style>
h1.myway{ color: “#eeebd2”;
background-color: “#d8a29b”; font-family: “Book Antiqua”, Times, serif;
border: thin groove #9baab2; } </style> </head>
<body><h1 class=myway> This is a heading formatted my way</h1><h1>This is an unformatted heading</h1>
</body></html>
![Page 8: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/8.jpg)
The resulting web page
![Page 9: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/9.jpg)
The style sheet (an example)
body { background-color: "#eeebd2";
margin: 5px 5px 5px 5px; }
h1{ color: "#eeebd2"; background-color: "#d8a29b"; font-family: “Book Antiqua”, Times, serif; border: thin groove #9baab2; }
h2{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; border: thin groove #8b007c; }
h3{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; }
![Page 10: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/10.jpg)
The style sheet (more..)
em{font-weight: bold;
font-style: italic }
hr{margin-right=10%;margin-left=10%;
}
p.link{ color: "#8b007c";
text-align=Left; font-family: “Lucida Casual”, Times, serif;
font-weight: bold;font-size: 10pt;margin-left: 0%;
}
p{text-align=justify;
font-family: “Bookman Old Style”, Times, serif;margin-left: 10%;
}
![Page 11: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/11.jpg)
strong{font-family: Arial, sans-serif;font-size: 12pt;color: red;
}
th{ background-color: "#b2a474";
color: "#b8007c";align=center;
}
table{padding: 2pt 2pt 2pt 2pt;
}
td.firstcol{ background-color: "#00acac";
font-weight: bold;align=center;
}table.main{
padding: 0px 0px 0px 0px; }
The style sheet (more..)
![Page 12: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/12.jpg)
Notice : no headings body or other tags
![Page 13: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/13.jpg)
Using the Stylesheet
<html> <head> <title>Bill Smiggens Inc</title>
<link rel=StyleSheet href="./Stylesheet.htm" type="text/css" media=screen>
</head> <body bgcolor="#ffffff" text="#362e00"> <! -- start of table -->
<table class=main> <tr> <! -- the logo --> <td colspan=2 align="center" bgcolor="#000000"> <img src="hammer.jpg"ALIGN=RIGHT HSPACE=1 VSPACE=0
BORDER=1 WIDTH=750 HEIGHT=50 ALT="Bill Smiggen's hammer image"></td>
</tr>
Links the stylesheet
Will use the respective formatting from the stylesheet
![Page 14: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/14.jpg)
Using the Stylesheet<tr> <td bgcolor="#7cb98b" with="20%" valign="top">
<! -- and then the links -->
<h2 align="center">links</h2> <hr with="50%">
<h3>
<p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">
<a href="http://www.yahoo.com">Yahoo</a></p>
<p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">
<a href="http://www.lrc.edu">Lenior-Ryhne</a></p>
<p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">
<a href="http://www.google.com">Google</a></p>
<p class=link><img src="flowers.jpg"ALIGN=Left HSPACE=0 VSPACE=0 BORDER=0 WIDTH=50 HEIGHT=30 ALT="Flowers image">
<a href="http://www.cnn.com">CNN</a></p>
Will use the respective formatting from the stylesheet
![Page 15: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/15.jpg)
Using the Stylesheet <br><hr with=50%"><br>
</h3></td>
<td with="70%"><! -- The information -->
<h2>About our company</h2><p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
<hr><h3>More about our company</h3><p align="center">>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
<hr with="50%"></td>
</tr> </table> </body></html>
Will use the respective formatting from the stylesheet
![Page 16: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/16.jpg)
The resulting Page
![Page 17: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/17.jpg)
Using the style formats
h1{ color: "#eeebd2"; background-color: "#d8a29b"; font-family: “Book Antiqua”, Times, serif; border: thin groove #9baab2; }
h2.some{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; border: thin groove #8b007c; }
.anyelement{ color: "#8b007c"; font-family: “Book Antiqua”, Times, serif; }
Applies to all h1 headings
Applies only when the class is called by an h2 tag
Can be called by any element tag (h1, h2, h3, p etc)
![Page 18: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/18.jpg)
Divisions
To format a section using a class you can use divisions:
<div class=anyelement><h2>About our company</h2><p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
<hr><h3>More about our company</h3><p align="center">>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
</div>
![Page 19: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/19.jpg)
Span
To format a section using a class you can also use spans:
<h2><span class=anyelement>About</span> our company</h2><p>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
<hr><h3>More about our company</h3><p align="center">>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</p>
</div>
NOTE: The use of span should be limited to DHTML documents in general, and normally should be used very carefully, as it takes away brower control and
makes it hard to maintain or change formatting
![Page 20: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/20.jpg)
Layering text<html> <head> <title>layering</title> </head> <body>
<h1>layering text</h1><div style="z-index: 2; left: 50px; top: 250px;position: absolute; color: red; text: white;font-size:36pt; border: thin groove;"><p>The TOP TEXT</p></div>
<div style="z-index: 1; left: 100px; top: 225px;position: absolute; color: magneta; background-color: green; font-size:46pt; border: thin groove;"><p>Additional text</p></div>
<div style="z-index: 4; left: 10; top: 30px; width: 150px;position: absolute; color: black; background-color: yellow;text: white; font-size:18pt;"><p>Text that does not go right across the screen.</p></div>
</body></html>
![Page 21: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/21.jpg)
The resulting web page
![Page 22: WWW programming](https://reader035.fdocuments.us/reader035/viewer/2022062723/56813c84550346895da626c5/html5/thumbnails/22.jpg)
In-class discussion
Why use stylesheets?
How can stylesheets be used by large projects?
How can you “enforce” the use of certain fonts or layout?
When is layering text useful?