Web based application development
Download
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

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>


Do all paragraphs have to be the same?


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 all my web pages.

  • 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 all my web pages.

  • 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 all my web pages.

  • 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 all my web pages.

  • 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 all my web pages.

  • 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 all my web pages.

  • 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 all my web pages.

Chapter 4

Attributes, Lists, and Tables


Extensions and deprecations
Extensions and Deprecations all my web pages.

  • 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 all my web pages.

  • 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 all my web pages.

  • At www.w3c.org …

    Site Index

    H

    HTML 4.01 Specification

    A. Changes

    3.1 Deprecated Elements


Extensions and deprecations3
Extensions and Deprecations all my web pages.

  • 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 all my web pages.

  • <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 all my web pages.

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 all my web pages.

  • <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 all my web pages.

  • 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 all my web pages.

  • Preferred method using styles:

    <style type=“text/css”>

    h2 {text-align:center}

    p {text-align:center}

    </style>


Tags and attributes4
Tags and Attributes all my web pages.

  • Background colors

    • <body> tag

    • bgcolor and text attributes

  • Using tags:

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


Tags and attributes5
Tags and Attributes all my web pages.

  • Using styles in the body:

    <style type=“text/css”>

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

    </style>


Tags and attributes6
Tags and Attributes all my web pages.

  • 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 all my web pages.

  • HW 2 due

    • 2 debugging assignments

  • Complete Chapter 4 PTW

  • Chapter 2 WWG


ad