Web-based Application Development Lecture 5 January 24, 2006 Anita Raja.

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

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

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

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

Internal Style Sheets

h2 { color:red }

Style definition

Name of tag Property

Value

Internal Style Sheets

h2 { color:#D61130 }

Internal Style Sheets Alignment

Options are: left, center, right, justify


</style>

h2 {color:red; text-align:center}

Uh, oh. I need bigger

section headings

Formatting Fonts Using Styles Could find & replace all <h2> with <h1> Why not?

What if some <h2> had been used for other things?

Formatting Fonts Using Styles Use font-size property:


</style>

h2 {color:red; text-align:center; font-size:24pt}

Formatting Fonts Using Styles Other choices for font-size value:

150% smaller

small, x-small, xx-small larger

large, x-large, xx-large

Formatting Fonts Using Styles Use font-style property:


</style>

h2 {… font-style:italic …}

Also normal, oblique

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

Formatting Fonts Using Styles Paragraph styles

Only works for content enclosed within <p> elements

<style type=“text/css”> p {font-size:14pt}

</style>

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>

Formatting Fonts Using Styles Font Families

What if not installed on user’s browser?

<style type=“text/css”> p {font-family:”Lucida”}

</style>

Formatting Fonts Using Styles Include more than one font families:

<style type=“text/css”> p {font-family:”Lucida”,”Arial”}

</style>

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

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>

Do all paragraphs have to be the same?

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}

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>

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>

No existing tag is quite right. Now

what?

Custom Tags Can create entirely new elements Generic tags:

<div> (block level) <span> (inline)

Custom Tags

<style type=“text/css”>span {font-size:18pt}

</style>

Let me make something <span>perfectly</span> clear.

Custom Tags Classes may be defined for custom tags

<style type=“text/css”>span.red {color:red}

</style>

I’m going to get tired of

entering style definitions into

all my web pages.

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

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

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”>

External Style Sheets Problem: older versions of browsers might not

recognize style definitions Could use comments:

<style type=“text/css”>

</style>

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

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

Chapter 4

Attributes, Lists, and Tables

Programming the Web using XHTML and JavaScript

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

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

Extensions and Deprecations At www.w3c.org …

Site Index

H

HTML 4.01 Specification

A. Changes

3.1 Deprecated Elements

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

Extensions and Deprecations <font> vs. <style> <font> is deprecated <style> isn’t Which would be preferable for making

changes to an entire document?

Tags and Attributes Styles have properties


h2 {text-align:center}

</style> Attributes have values

<font align=“center”> … </font>

No quotation marks

Quotation marks

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”>

Tags and Attributes Alignment = “left”, “center”, “right” Using tags:

<h2 align=“center”>

<p align=“right”> Centering

<center>this text is centered</center>

Tags and Attributes Preferred method using styles:


h2 {text-align:center}

p {text-align:center}

</style>

Tags and Attributes Background colors

<body> tag bgcolor and text attributes

Using tags:

<body bgcolor=“yellow” text=“blue”>

Tags and Attributes Using styles in the body:


body {background-color:yellow; color:blue}

</style>

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

Next Class HW 2 due

2 debugging assignments Complete Chapter 4 PTW Chapter 2 WWG

Web-based Application Development Lecture 5 January 24, 2006 Anita Raja.

Documents

Transcript of Web-based Application Development Lecture 5 January 24, 2006 Anita Raja.