web-based application development lecture 4 january 19, 2005 anita raja
TRANSCRIPT
![Page 1: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/1.jpg)
Web-based Application Development
Lecture 4
January 19, 2005
Anita Raja
![Page 2: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/2.jpg)
Agenda Email from TA Creating a Basic Web Page (concluded)
PTW Chapter 2 Cascading Style Sheets
PTW Chapter 3
![Page 3: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/3.jpg)
The HTML Source Document<html>
</html>
Page content goes here
<title>Page Title</title><head>
</head><body>
</body>
![Page 4: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/4.jpg)
The HTML Source Document Ch02-Ex-03
![Page 5: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/5.jpg)
The HTML Source Document Use plain-text editors (Notepad)
Other types of editors (like MS WORD) use hidden formatting codes
Filename.htm (or .html) No spaces (underscore character instead) Enclose in quotes when using Notepad
File – Open … Drag icon into open browser window
![Page 6: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/6.jpg)
HTML, XML, and XHTML Writing HTML code:
Indent Nest properly
![Page 7: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/7.jpg)
HTML, XML, and XHTML<head>
<title>Chapter 2</title></head>
<head><title>Chapter 2
</head></title>
Correct
Incorrect
![Page 8: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/8.jpg)
HTML, XML, and XHTML Browsers:
Evaluate from the top down Ignore whitespace
Tabs, extra spaces, line breaks
Make your HTML code easily read by humans
Ch02-Ex-03 but without human formatting Does HTML code have to be lower case?
![Page 9: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/9.jpg)
HTML, XML, and XHTML Browsers developed along diverging paths
Netscape Explorer
Features were added – not always in the same way
1994 - W3C created Create an “official” version of HTML
![Page 10: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/10.jpg)
HTML, XML, and XHTML PCs – not much of a problem Handheld devices – HUGE problem Need:
A standardized version of HTML Compatible with all types of devices
PCs, handhelds, others?
HTML development stopped at V4
![Page 11: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/11.jpg)
HTML, XML, and XHTML XML – Extensible Markup Language Specifies a universal, structured format Data is classified by its meaning Users could create custom tags Car dealer: <make> <model> <year> Very strict syntax rules ensure universality Case matters!
![Page 12: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/12.jpg)
HTML, XML, and XHTML XHTML – Extensible HTML Official release January 2000 XHTML is not XML but it is based on XML Inherits rules and benefits of XML Thus, XHTML is case-sensitive:<body> ≠ <BODY> ≠ <Body> ≠ <BoDy> Why?
![Page 13: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/13.jpg)
HTML, XML, and XHTML Exceptions imply complexity
Software cannot be written simply It must account for each exception individually Programs must therefore be larger and more
difficult to maintain Complexity requires
Additional processing (slower) an More memory (larger and more expensive)
![Page 14: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/14.jpg)
HTML, XML, and XHTML How to make HTML into XHTML? Before <html> add: <?xml version=“1.0”> <!DOCTYPE html PUBLIC ¬ “-//W3C//DTD XHTML 1.0 Transitional//EN” ¬ http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd>
1st line: XML Declaration 2nd line: Document Type Definition
![Page 15: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/15.jpg)
HTML, XML, and XHTML Also, change <html> tag itself:
<html xmlns=“http://www.w3.org/1999/xhtml”>
“Tags defined in this document conform to the W3C definitions found at ...”
Start using the new standards NOW Ch02-Ex-04
XML namespace
![Page 16: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/16.jpg)
HTML, XML, and XHTML <meta> tag describes document content Useful for search engines Optional, goes in <head> section Attributes:
Name: “keywords”, “description” Content
<meta name=“keywords” content=“coffee, tea, imported” />
![Page 17: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/17.jpg)
Paragraphs and Line Breaks Can’t use whitespace to format document HTML uses elements (tags) and only
elements to define document’s structure Paragraph tag <p>
Classifies a block of text as a paragraph Preceded and followed by a blank line
(usually) Can add other attributes (Chapter 3)
![Page 18: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/18.jpg)
Paragraphs and Line Breaks Break tag <br>
Generates a line break Without inserting a blank line like the <p> tag. “Empty” tag – no </br> needed <br /> instead (space optional) / required by XHTML to indicate an empty
element Ch02-Ex-05
![Page 19: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/19.jpg)
Adding More Tags Emphasizing text
<em> - italics
HTML: This <em>word</em> is italicizedBrowser: This word is italicized
<strong> - bold HTML: This <strong>word</strong> is bold Browser: This word is bold
Ch02-Ex-06
![Page 20: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/20.jpg)
Adding More Tags Italics <i> … </i> Bold <b> … </b> Why use <em> or <strong>? <i> and <b> define the presentation (display) <em> and <strong> define the structure
![Page 21: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/21.jpg)
Adding More Tags Structure vs. Presentation: so what? In early HTML, designers used tags for
both: structure and presentation Problem: Those Web pages display well
only on PCs Other devices required other versions of
the HTML code. Presentation does not have to be visual!
![Page 22: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/22.jpg)
Adding More Tags By defining structure and presentation
separately this problem is eliminated Structure defined by HTML code Presentation defined elsewhere:
Browser Style sheet definitions (Chapter 3)
This is the point of XHTML
![Page 23: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/23.jpg)
Adding More Tags Block-level elements
Define a complete section of text Preceded and followed by a blank line Body, header, paragraph tags
Inline elements Apply to a sequence of characters within a block Emphasis and strong tags
![Page 24: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/24.jpg)
Adding More Tags Blocks may contain anything:
Other blocks<body>…<p>…</p>…</body>
Inline elements<h2>…<em>…</em>…</h2>
Inline elements may contain Other inline elements
<em>…<strong>…</strong>…</em> BUT NOT BLOCKS!
<em>…<h2>…</h2>…</em>
![Page 25: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/25.jpg)
Adding More Tags Font size:
<big>…</big> <small>…</small> Do NOT use header tags to control the
appearance of text This misclassifies the text
![Page 26: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/26.jpg)
Adding More Tags Can fonts be specified directly? Font tag
<font name=“courier”>…</font> Defines presentation, not structure Style sheet method is preferred (Chapter
3)
![Page 27: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/27.jpg)
Adding More Tags Who should control appearance?
Designer? Surfer?
Default is surfer (by controlling browser settings)
![Page 28: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/28.jpg)
Adding More Tags Comments
< ! - - anything at all - - > Annotate code Prevent code from being processed
![Page 29: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/29.jpg)
Assignment Debugging Exercise, p. 52 Correct errors Post corrected document to your Web space
as “Lagerstrom-Ch-2.html” Grade based on:
Appearance Technical correctness of code
![Page 30: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/30.jpg)
Programming the Web using XHTML and JavaScript
Chapter 3
Cascading Style Sheets
![Page 31: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/31.jpg)
The Power of Styles Structure and content do NOT equal
presentation! Presentation is not meant to be
determined by HTML elements Defaults exist
<h1> = 24-pt, bold, Times Roman Reason: Not all Web pages display in PC
browser windows
![Page 32: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/32.jpg)
I’ll bet red headings
would look nice
![Page 33: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/33.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 34: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/34.jpg)
Internal Style Sheets <style> element in <head> section
<style type=“text/css”>
…
</style>The style sheet instructions in this elements are:• Written in plain text format• Using the cascading style sheet language
![Page 35: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/35.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 36: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/36.jpg)
![Page 37: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/37.jpg)
Internal Style Sheets
h2 { color:red }
Style definition
Name of tag Property
Value
![Page 38: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/38.jpg)
Internal Style Sheets
h2 { color:#D61130 }
![Page 39: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/39.jpg)
Internal Style Sheets Alignment
Options are: left, center, right, justify
<style type=“text/css”>
</style>
h2 {color:red; text-align:center}
![Page 40: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/40.jpg)
Uh, oh. I need bigger
section headings
![Page 41: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/41.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 42: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/42.jpg)
Formatting Fonts Using Styles Use font-size property:
<style type=“text/css”>
</style>
h2 {color:red; text-align:center; font-size:24pt}
![Page 43: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/43.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 44: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/44.jpg)
Formatting Fonts Using Styles Use font-style property:
Also normal, oblique
<style type=“text/css”>
</style>
h2 {… font-style:italic …}
![Page 45: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/45.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
![Page 46: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/46.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 47: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/47.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 48: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/48.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 49: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/49.jpg)
Formatting Fonts Using Styles Include more than one font families:
<style type=“text/css”> p {font-family:”Lucida”,”Arial”}
</style>
![Page 50: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/50.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 51: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/51.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 52: Web-based Application Development Lecture 4 January 19, 2005 Anita Raja](https://reader036.vdocuments.mx/reader036/viewer/2022081519/56649cfe5503460f949cf2d6/html5/thumbnails/52.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