Embed Size (px)
Citation preview
Web-based Application Development
Lecture 4
January 19, 2005
Anita Raja
Agenda Email from TA Creating a Basic Web Page (concluded)
PTW Chapter 2 Cascading Style Sheets
PTW Chapter 3
The HTML Source Document<html>
</html>
Page content goes here
<title>Page Title</title><head>
</head><body>
</body>
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<head>
<title>Chapter 2</title></head>
<head><title>Chapter 2
</head></title>
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 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
1994 - 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: <make> <model> <year> 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:<body> ≠ <BODY> ≠ <Body> ≠ <BoDy> 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 <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
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
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” />
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)
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
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
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
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<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>
Adding More Tags Font size:
<big>…</big> <small>…</small> 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
<font name=“courier”>…</font> 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
< ! - - anything at all - - > 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
<h1> = 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 <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
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 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
<style type=“text/css”>
</style>
h2 {color:red; text-align:center}
Uh, oh. I need bigger
section headings
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 Styles Use font-size property:
<style type=“text/css”>
</style>
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
<style type=“text/css”>
</style>
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 <p> elements
<style type=“text/css”> p {font-size:14pt}
</style>
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 Styles Font Families
What if not installed on user’s browser?
<style type=“text/css”> p {font-family:”Lucida”}
</style>
Formatting Fonts Using Styles Include more than one font families:
<style type=“text/css”> p {font-family:”Lucida”,”Arial”}
</style>
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
<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>
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
