web based application development
Download
Skip this Video
Download Presentation
Web-based Application Development

Loading in 2 Seconds...

play fullscreen
1 / 53

Web-based Application Development - PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Web-based Application Development' - carter


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
web based application development

Web-based Application Development

Lecture 5

January 24, 2006

Anita Raja

agenda
Agenda
  • Cascading Style Sheets
    • PTW Chapter 3
  • Attributes, Lists, and Tables
    • PTW Chapter 4
programming the web using xhtml and javascript

Programming the Web using XHTML and JavaScript

Chapter 3

Cascading Style Sheets

internal style sheets
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 sheets1

The style sheet instructions in this element are:

  • Written in plain text format
  • Using the cascading style sheet language
Internal Style Sheets
  • <style> element in <head> section

<style type=“text/css”>

</style>

internal style sheets2
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 sheets3

Style definition

Name of tag

Property

Value

Internal Style Sheets

h2 { color:red }

internal style sheets4
Internal Style Sheets

h2 { color:#D61130 }

internal style sheets5
Internal Style Sheets
  • Alignment
  • Options are: left, center, right, justify

<style type=“text/css”>

</style>

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

formatting fonts using styles
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 styles1
Formatting Fonts Using Styles
  • Use font-size property:

<style type=“text/css”>

</style>

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

formatting fonts using styles2
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 styles3
Formatting Fonts Using Styles
  • Use font-style property:

<style type=“text/css”>

</style>

h2 {… font-style:italic …}

formatting fonts using styles4
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 styles5
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 styles6
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 styles7
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 styles8
Formatting Fonts Using Styles
  • Include more than one font families:

<style type=“text/css”>

p {font-family:”Lucida”,”Arial”}

</style>

formatting fonts using styles9
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 styles10
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>

tags with multiple styles
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 styles1
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
  • Local styles take precedence over other style definitions

<p>The text in this paragraph won’t be red</p>

<p style=“color:red”>The text in this paragraph will</p>

custom tags
Custom Tags
  • Can create entirely new elements
  • Generic tags:
    • <div> (block level)
    • <span> (inline)
custom tags1
Custom Tags

<style type=“text/css”>

span {font-size:18pt}

</style>

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

custom tags2
Custom Tags
  • Classes may be defined for custom tags

<style type=“text/css”>

span.red {color:red}

</style>

external style sheets
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 sheets1
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 sheets2
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 sheets3
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>

external style sheets4
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
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
programming the web using xhtml and javascript1

Programming the Web using XHTML and JavaScript

Chapter 4

Attributes, Lists, and Tables

extensions and deprecations
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 deprecations1
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 deprecations2
Extensions and Deprecations
  • At www.w3c.org …

Site Index

H

HTML 4.01 Specification

A. Changes

3.1 Deprecated Elements

extensions and deprecations3
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 deprecations4
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

No quotation marks

Quotation marks

Tags and Attributes
  • Styles have properties

<style type=“text/css”>

h2 {text-align:center}

</style>

  • Attributes have values

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

tags and attributes1
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 attributes2
Tags and Attributes
  • Alignment = “left”, “center”, “right”
  • Using tags:

<h2 align=“center”>

<p align=“right”>

  • Centering

<center>this text is centered</center>

tags and attributes3
Tags and Attributes
  • Preferred method using styles:

<style type=“text/css”>

h2 {text-align:center}

p {text-align:center}

</style>

tags and attributes4
Tags and Attributes
  • Background colors
    • <body> tag
    • bgcolor and text attributes
  • Using tags:

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

tags and attributes5
Tags and Attributes
  • Using styles in the body:

<style type=“text/css”>

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

</style>

tags and attributes6
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
Next Class
  • HW 2 due
    • 2 debugging assignments
  • Complete Chapter 4 PTW
  • Chapter 2 WWG
ad