web-based application development
DESCRIPTION
Web-based Application Development. Lecture 5 January 24, 2006 Anita Raja. Agenda. Cascading Style Sheets PTW Chapter 3 Attributes, Lists, and Tables PTW Chapter 4. Programming the Web using XHTML and JavaScript. Chapter 3 Cascading Style Sheets. I’ll bet red headings would look nice. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/1.jpg)
Web-based Application Development
Lecture 5
January 24, 2006
Anita Raja
![Page 2: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/2.jpg)
Agenda Cascading Style Sheets
PTW Chapter 3 Attributes, Lists, and Tables
PTW Chapter 4
![Page 3: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/3.jpg)
Programming the Web using XHTML and JavaScript
Chapter 3
Cascading Style Sheets
![Page 4: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/4.jpg)
I’ll bet red headings
would look nice
![Page 5: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/5.jpg)
Internal Style Sheets Redefines the presentation rule (style) for
certain elements “Internal” because contained within the
HTML source document itself Styles may be defined using different style
sheet languages so … … the language used must be specified
![Page 6: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/6.jpg)
Internal Style Sheets <style> element in <head> section
<style type=“text/css”>
…
</style>The style sheet instructions in this element are:• Written in plain text format• Using the cascading style sheet language
![Page 7: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/7.jpg)
Internal Style Sheets Also specify default style sheet language for
entire HTML document:<meta http-equiv=“Content-Style-Type” content=“text/css” />
<meta> elements go in the <head> section
![Page 8: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/8.jpg)
![Page 9: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/9.jpg)
Internal Style Sheets
h2 { color:red }
Style definition
Name of tag Property
Value
![Page 10: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/10.jpg)
Internal Style Sheets
h2 { color:#D61130 }
![Page 11: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/11.jpg)
Internal Style Sheets Alignment
Options are: left, center, right, justify
<style type=“text/css”>
</style>
h2 {color:red; text-align:center}
![Page 12: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/12.jpg)
Uh, oh. I need bigger
section headings
![Page 13: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/13.jpg)
Formatting Fonts Using Styles Could find & replace all <h2> with <h1> Why not?
What if some <h2> had been used for other things?
![Page 14: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/14.jpg)
Formatting Fonts Using Styles Use font-size property:
<style type=“text/css”>
</style>
h2 {color:red; text-align:center; font-size:24pt}
![Page 15: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/15.jpg)
Formatting Fonts Using Styles Other choices for font-size value:
150% smaller
small, x-small, xx-small larger
large, x-large, xx-large
![Page 16: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/16.jpg)
Formatting Fonts Using Styles Use font-style property:
<style type=“text/css”>
</style>
h2 {… font-style:italic …}
![Page 17: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/17.jpg)
Also normal, oblique
![Page 18: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/18.jpg)
Formatting Fonts Using Styles Other properties
text-decoration underline, overline, line-through, blink, none
text-transform capitalize, uppercase, lowercase, none
font-variant small-caps, none
background-color transparent, one of the color names or numbers
![Page 19: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/19.jpg)
Formatting Fonts Using Styles Paragraph styles
Only works for content enclosed within <p> elements
<style type=“text/css”> p {font-size:14pt}
</style>
![Page 20: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/20.jpg)
Formatting Fonts Using Styles Indent and line spacing:
<style type=“text/css”> p {text-indent:25pt; line-height:24pt}
</style>
<style type=“text/css”> p {text-indent:12%; line-height:150%}
</style>
![Page 21: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/21.jpg)
Formatting Fonts Using Styles Font Families
What if not installed on user’s browser?
<style type=“text/css”> p {font-family:”Lucida”}
</style>
![Page 22: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/22.jpg)
Formatting Fonts Using Styles Include more than one font families:
<style type=“text/css”> p {font-family:”Lucida”,”Arial”}
</style>
![Page 23: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/23.jpg)
Formatting Fonts Using Styles Warning: multiple fonts may not have the
impact you intend User’s display may not include the fonts you
specified Common fonts may be the best choice
overall
![Page 24: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/24.jpg)
Formatting Fonts Using Styles Can compress definition
<style type=“text/css”>p {font-style:italic; font-weight:500;font-variant:small-caps; font-size:14pt;line-height:24pt; font-family:”Lucida”,”Arial”}
</style>
<style type=“text/css”>p {font: italic 500 small-caps 14pt/24pt
”Lucida”,”Arial”}</style>
![Page 25: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/25.jpg)
Do all paragraphs have to be the same?
![Page 26: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/26.jpg)
Tags with Multiple Styles The same type of element can have
multiple definitions called “classes”
<style type=“text/css”>p {text-align:justify; font-weight:bold}
</style>p.intro {text-align:center; color:red}
![Page 27: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/27.jpg)
Tags with Multiple Styles The p.intro class includes the styles of the p
class but changes those styles How is this class invoked?
Explains why “none” is an option text-transform; font-variant
<p class=“intro”> … </p>
![Page 28: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/28.jpg)
Local Styles
Local styles take precedence over other style definitions
<p style=“color:red”>The text in this paragraph will</p>
<p>The text in this paragraph won’t be red</p>
![Page 29: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/29.jpg)
No existing tag is quite right. Now
what?
![Page 30: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/30.jpg)
Custom Tags Can create entirely new elements Generic tags:
<div> (block level) <span> (inline)
![Page 31: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/31.jpg)
Custom Tags
<style type=“text/css”>span {font-size:18pt}
</style>
Let me make something <span>perfectly</span> clear.
![Page 32: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/32.jpg)
Custom Tags Classes may be defined for custom tags
<style type=“text/css”>span.red {color:red}
</style>
![Page 33: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/33.jpg)
I’m going to get tired of
entering style definitions into
all my web pages.
![Page 34: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/34.jpg)
External Style Sheets Text-only file Contains style definitions only
h2 {color:red}
h1 {font-size:24pt
p {text-align:center}
p.small {font-size:10pt} No <style> tags needed
![Page 35: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/35.jpg)
External Style Sheets Save in a file with a .css extension css = cascading style sheets Local, internal and external may be present
in the same document Local overrides internal Internal overrides external
![Page 36: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/36.jpg)
External Style Sheets How to specify external style sheets? Add <link> tag in <head> section
<link rel=“stylesheet” type=“text/css” href=“my_styles.css”>
![Page 37: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/37.jpg)
External Style Sheets Problem: older versions of browsers might not
recognize style definitions Could use comments:
<style type=“text/css”><!-- p {text-indent:25pt; line-height:24pt}-->
</style>
![Page 38: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/38.jpg)
External Style Sheets MORE problems: XHTML may not recognize
this use of comments Solution: use <link> method If older version of browser does not recognize
this tag it will ignore it
![Page 39: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/39.jpg)
Assignment Debugging Exercise, p. 81 Correct errors Post corrected document to your Web
space as “Lagerstrom-Ch-3.html” Grade based on:
Appearance Technical correctness of code
![Page 40: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/40.jpg)
Chapter 4
Attributes, Lists, and Tables
Programming the Web using XHTML and JavaScript
![Page 41: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/41.jpg)
Extensions and Deprecations Extensions – features not found in “standard”
HTML Too often, NN’s extensions don’t work in IE
and vice versa Therefore, be careful about non-standard
features Official features listed at www.w3c.org
![Page 42: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/42.jpg)
Extensions and Deprecations Deprecation – feature being phased out May work in older browser versions but
eventually will cease to be supported Obsolete – features that are not supported
by browsers in strict compliance with W3C standards
![Page 43: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/43.jpg)
Extensions and Deprecations At www.w3c.org …
Site Index
H
HTML 4.01 Specification
A. Changes
3.1 Deprecated Elements
![Page 44: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/44.jpg)
Extensions and Deprecations Forms of XHTML (see p. 85)
Strict Does not recognize deprecated elements
Transitional Which should you use?
Transitional Otherwise older browsers won’t display your
pages well
![Page 45: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/45.jpg)
Extensions and Deprecations <font> vs. <style> <font> is deprecated <style> isn’t Which would be preferable for making
changes to an entire document?
![Page 46: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/46.jpg)
Tags and Attributes Styles have properties
<style type=“text/css”>
h2 {text-align:center}
</style> Attributes have values
<font align=“center”> … </font>
No quotation marks
Quotation marks
![Page 47: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/47.jpg)
Tags and Attributes <font>
size= “1” to “7” (smallest to largest) color= “red”, “blue”, etc. face= “Arial”, “Courier”, etc.
<font size=“5” color=“red” face=“Arial”>
![Page 48: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/48.jpg)
Tags and Attributes Alignment = “left”, “center”, “right” Using tags:
<h2 align=“center”>
<p align=“right”> Centering
<center>this text is centered</center>
![Page 49: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/49.jpg)
Tags and Attributes Preferred method using styles:
<style type=“text/css”>
h2 {text-align:center}
p {text-align:center}
</style>
![Page 50: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/50.jpg)
Tags and Attributes Background colors
<body> tag bgcolor and text attributes
Using tags:
<body bgcolor=“yellow” text=“blue”>
![Page 51: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/51.jpg)
Tags and Attributes Using styles in the body:
<style type=“text/css”>
body {background-color:yellow; color:blue}
</style>
![Page 52: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/52.jpg)
Tags and Attributes Horizontal rules Using tags:
<hr size=“7” width=“75%” /> Using styles:
<style type=“text/css”>hr {height:7px; width:75%; background-
color:red}</style>
Ch04-Ex-01
![Page 53: Web-based Application Development](https://reader035.vdocuments.net/reader035/viewer/2022062809/5681594b550346895dc68884/html5/thumbnails/53.jpg)
Next Class HW 2 due
2 debugging assignments Complete Chapter 4 PTW Chapter 2 WWG