Web-based Application Development Lecture 4 January 19, 2005 Anita Raja
Agenda from TA Creating a Basic Web Page (concluded) PTW Chapter 2 Cascading Style Sheets PTW Chapter 3
The HTML Source Document Page content goes here Page Title
The HTML Source Document Ch02-Ex-03
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
HTML, XML, and XHTML Writing HTML code: Indent Nest properly
HTML, XML, and XHTML Chapter 2 Chapter 2 Correct Incorrect
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 Ch02-Ex-03 Does HTML code have to be lower case?
HTML, XML, and XHTML Browsers developed along diverging paths Netscape Explorer Features were added – not always in the same way W3C created Create an “official” version of HTML
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
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: Very strict syntax rules ensure universality Case matters!
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: ≠ ≠ ≠ Why?
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)
HTML, XML, and XHTML How to make HTML into XHTML? Before add: <!DOCTYPE html PUBLIC ¬ “-//W3C//DTD XHTML 1.0 Transitional//EN” ¬ 1 st line: XML Declaration 2 nd line: Document Type Definition
HTML, XML, and XHTML Also, change tag itself: “Tags defined in this document conform to the W3C definitions found at...” Start using the new standards NOW Ch02-Ex-04 XML namespace
HTML, XML, and XHTML tag describes document content Useful for search engines Optional, goes in section Attributes: Name: “keywords”, “description” Content
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 Classifies a block of text as a paragraph Preceded and followed by a blank line (usually) Can add other attributes (Chapter 3)
Paragraphs and Line Breaks Break tag Generates a line break Without inserting a blank line like the tag. “Empty” tag – no needed instead (space optional) / required by XHTML to indicate an empty element Ch02-Ex-05
Adding More Tags Emphasizing text - italics HTML: This word is italicized Browser: This word is italicized - bold HTML: This word is bold Browser: This word is bold Ch02-Ex-06
Adding More Tags Italics … Bold … Why use or ? and define the presentation (display) and define the structure
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!
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
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
Adding More Tags Blocks may contain anything: Other blocks … … … Inline elements … … … Inline elements may contain Other inline elements … … … BUT NOT BLOCKS! … … …
Adding More Tags Font size: … Do NOT use header tags to control the appearance of text This misclassifies the text
Adding More Tags Can fonts be specified directly? Font tag … Defines presentation, not structure Style sheet method is preferred (Chapter 3)
Adding More Tags Who should control appearance? Designer? Surfer? Default is surfer (by controlling browser settings)
Adding More Tags Comments Annotate code Prevent code from being processed
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
Programming the Web using XHTML and JavaScript Chapter 3 Cascading Style Sheets
The Power of Styles Structure and content do NOT equal presentation! Presentation is not meant to be determined by HTML elements Defaults exist = 24-pt, bold, Times Roman Reason: Not all Web pages display in PC browser windows
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 element in section … The style sheet instructions in this elements 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: elements go in the 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 h2 {color:red; text-align:center}
Uh, oh. I need bigger section headings
Formatting Fonts Using Styles Could find & replace all with Why not? What if some had been used for other things?
Formatting Fonts Using Styles Use font-size property: 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: Also normal, oblique h2 {… font-style:italic …}
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
Formatting Fonts Using Styles Paragraph styles Only works for content enclosed within elements p {font-size:14pt}
Formatting Fonts Using Styles Indent and line spacing: p {text-indent:25pt; line-height:24pt} p {text-indent:12%; line-height:150%}
Formatting Fonts Using Styles Font Families What if not installed on user’s browser? p {font-family:”Lucida”}
Formatting Fonts Using Styles Include more than one font families: p {font-family:”Lucida”,”Arial”}
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 p {font-style:italic; font-weight:500; font-variant:small-caps; font-size:14pt; line-height:24pt; font-family:”Lucida”,”Arial”} p {font: italic 500 small-caps 14pt/24pt ”Lucida”,”Arial”}
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