1 / 53

### Web-Based Application Development: CSS and Formatting Fundamentals Overview ###

In this lecture on web-based application development, we cover key topics including Cascading Style Sheets (CSS) and their application in XHTML and JavaScript. We explore the structure and functionality of internal style sheets, attributes, lists, and tables. Formatting techniques such as text alignment, font properties, and the use of classes for defining styles are discussed in detail. Additionally, strategies for enhancing presentation through multiple font families and custom tags are introduced, providing essential insights for effective web design. ###

carter
Télécharger la présentation

### Web-Based Application Development: CSS and Formatting Fundamentals Overview ###

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Agenda • Cascading Style Sheets • PTW Chapter 3 • Attributes, Lists, and Tables • PTW Chapter 4

  3. Programming the Web using XHTML and JavaScript Chapter 3 Cascading Style Sheets

  4. I’ll bet red headings would look nice

  5. 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

  6. 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>

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

  8. Style definition Name of tag Property Value Internal Style Sheets h2 { color:red }

  9. Internal Style Sheets h2 { color:#D61130 }

  10. Internal Style Sheets • Alignment • Options are: left, center, right, justify <style type=“text/css”> </style> h2 {color:red; text-align:center}

  11. Uh, oh. I need bigger section headings

  12. Formatting Fonts Using Styles • Could find & replace all <h2> with <h1> • Why not? • What if some <h2> had been used for other things?

  13. Formatting Fonts Using Styles • Use font-size property: <style type=“text/css”> </style> h2 {color:red; text-align:center;font-size:24pt}

  14. Formatting Fonts Using Styles • Other choices for font-size value: • 150% • smaller • small, x-small, xx-small • larger • large, x-large, xx-large

  15. Formatting Fonts Using Styles • Use font-style property: <style type=“text/css”> </style> h2 {… font-style:italic …}

  16. Also normal, oblique

  17. 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

  18. Formatting Fonts Using Styles • Paragraph styles • Only works for content enclosed within <p> elements <style type=“text/css”> p {font-size:14pt} </style>

  19. 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>

  20. Formatting Fonts Using Styles • Font Families • What if not installed on user’s browser? <style type=“text/css”> p {font-family:”Lucida”} </style>

  21. Formatting Fonts Using Styles • Include more than one font families: <style type=“text/css”> p {font-family:”Lucida”,”Arial”} </style>

  22. 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

  23. 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>

  24. Do all paragraphs have to be the same?

  25. 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}

  26. 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>

  27. 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>

  28. No existing tag is quite right. Now what?

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

  30. Custom Tags <style type=“text/css”> span {font-size:18pt} </style> Let me make something <span>perfectly</span> clear.

  31. Custom Tags • Classes may be defined for custom tags <style type=“text/css”> span.red {color:red} </style>

  32. I’m going to get tired of entering style definitions into all my web pages.

  33. 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

  34. 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

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

  36. 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>

  37. 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

  38. 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

  39. Programming the Web using XHTML and JavaScript Chapter 4 Attributes, Lists, and Tables

  40. 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

  41. 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

  42. Extensions and Deprecations • At www.w3c.org … Site Index H HTML 4.01 Specification A. Changes 3.1 Deprecated Elements

  43. 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

  44. Extensions and Deprecations • <font> vs. <style> • <font> is deprecated • <style> isn’t • Which would be preferable for making changes to an entire document?

  45. 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>

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

  47. Tags and Attributes • Alignment = “left”, “center”, “right” • Using tags: <h2 align=“center”> <p align=“right”> • Centering <center>this text is centered</center>

  48. Tags and Attributes • Preferred method using styles: <style type=“text/css”> h2 {text-align:center} p {text-align:center} </style>

  49. Tags and Attributes • Background colors • <body> tag • bgcolor and text attributes • Using tags: <body bgcolor=“yellow” text=“blue”>

More Related