Web-based Application Development

1
Web-based Application Development

• Lecture 4
• January 19, 2005
• Anita Raja

2
Agenda

• Email from TA
• Creating a Basic Web Page (concluded)
• PTW Chapter 2
• Cascading Style Sheets
• PTW Chapter 3

3
The HTML Source Document

• lthtmlgt
• lt/htmlgt

ltheadgt lt/headgt
lttitlegtPage Titlelt/titlegt
ltbodygt lt/bodygt
4
The HTML Source Document

• Ch02-Ex-03

5
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

6
HTML, XML, and XHTML

• Writing HTML code
• Indent
• Nest properly

7
HTML, XML, and XHTML

• ltheadgt
• lttitlegtChapter 2lt/titlegt
• lt/headgt
• ltheadgt
• lttitlegtChapter 2
• lt/headgt
• lt/titlegt

Correct
Incorrect
8
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?

9
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

10
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

11
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 ltmakegt ltmodelgt ltyeargt
• Very strict syntax rules ensure universality
• Case matters!

12
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
• ltbodygt ? ltBODYgt ? ltBodygt ? ltBoDygt
• Why?

13
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)

14
HTML, XML, and XHTML

• How to make HTML into XHTML?
• Before lthtmlgt add
• lt?xml version1.0gt
• lt!DOCTYPE html PUBLIC
• -//W3C//DTD XHTML 1.0 Transitional//EN
• http//www/w3/org/TR/xhtml/11/DTD/xhtml1-transi
  tional.dtdgt
• 1st line XML Declaration
• 2nd line Document Type Definition

15
HTML, XML, and XHTML

• Also, change lthtmlgt tag itself
• lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
• Tags defined in this document conform to the W3C
  definitions found at ...
• Start using the new standards NOW
• Ch02-Ex-04

XML namespace
16
HTML, XML, and XHTML

• ltmetagt tag describes document content
• Useful for search engines
• Optional, goes in ltheadgt section
• Attributes
• Name keywords, description
• Content
• ltmeta namekeywords contentcoffee, tea,
  imported /gt

17
Paragraphs and Line Breaks

• Cant use whitespace to format document
• HTML uses elements (tags) and only elements to
  define documents structure
• Paragraph tag ltpgt
• Classifies a block of text as a paragraph
• Preceded and followed by a blank line (usually)
• Can add other attributes (Chapter 3)

18
Paragraphs and Line Breaks

• Break tag ltbrgt
• Generates a line break
• Without inserting a blank line like the ltpgt tag.
• Empty tag no lt/brgt needed
• ltbr /gt instead (space optional)
• / required by XHTML to indicate an empty element
• Ch02-Ex-05

19
Adding More Tags

• Emphasizing text
• ltemgt - italics
• HTML This ltemgtwordlt/emgt is italicized
• Browser This word is italicized
• ltstronggt - bold
• HTML This ltstronggtwordlt/stronggt is bold
• Browser This word is bold
• Ch02-Ex-06

20
Adding More Tags

• Italics ltigt lt/igt
• Bold ltbgt lt/bgt
• Why use ltemgt or ltstronggt?
• ltigt and ltbgt define the presentation (display)
• ltemgt and ltstronggt define the structure

21
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!

22
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

23
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

24
Adding More Tags

• Blocks may contain anything
• Other blocks
• ltbodygtltpgtlt/pgtlt/bodygt
• Inline elements
• lth2gtltemgtlt/emgtlt/h2gt
• Inline elements may contain
• Other inline elements
• ltemgtltstronggtlt/stronggtlt/emgt
• BUT NOT BLOCKS!
• ltemgtlth2gtlt/h2gtlt/emgt

25
Adding More Tags

• Font size
• ltbiggtlt/biggt
• ltsmallgtlt/smallgt
• Do NOT use header tags to control the appearance
  of text
• This misclassifies the text

26
Adding More Tags

• Can fonts be specified directly?
• Font tag
• ltfont namecouriergtlt/fontgt
• Defines presentation, not structure
• Style sheet method is preferred (Chapter 3)

27
Adding More Tags

• Who should control appearance?
• Designer?
• Surfer?
• Default is surfer (by controlling browser
  settings)

28
Adding More Tags

• Comments
• lt ! - - anything at all - - gt
• Annotate code
• Prevent code from being processed

29
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

30
Programming the Web using XHTML and JavaScript

• Chapter 3
• Cascading Style Sheets

31
The Power of Styles

• Structure and content do NOT equal presentation!
• Presentation is not meant to be determined by
  HTML elements
• Defaults exist
• lth1gt 24-pt, bold, Times Roman
• Reason Not all Web pages display in PC browser
  windows

32
Ill bet red headings would look nice
33
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

34
Internal Style Sheets

• ltstylegt element in ltheadgt section
• ltstyle typetext/cssgt
• lt/stylegt

35
Internal Style Sheets

• Also specify default style sheet language for
  entire HTML document
• ltmeta http-equivContent-Style-Type
  contenttext/css /gt
• ltmetagt elements go in the ltheadgt section

36
(No Transcript)
37
Internal Style Sheets

• h2 colorred

38
Internal Style Sheets

• h2 colorD61130

39
Internal Style Sheets

• Alignment
• Options are left, center, right, justify

ltstyle typetext/cssgt lt/stylegt
h2 colorred text-aligncenter
40
Uh, oh. I need bigger section headings
41
Formatting Fonts Using Styles

• Could find replace all lth2gt with lth1gt
• Why not?
• What if some lth2gt had been used for other things?

42
Formatting Fonts Using Styles

• Use font-size property

ltstyle typetext/cssgt lt/stylegt
h2 colorred text-aligncenter font-size24pt
43
Formatting Fonts Using Styles

• Other choices for font-size value
• 150
• smaller
• small, x-small, xx-small
• larger
• large, x-large, xx-large

44
Formatting Fonts Using Styles

• Use font-style property
• Also normal, oblique

ltstyle typetext/cssgt lt/stylegt
h2 font-styleitalic
45
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

46
Formatting Fonts Using Styles

• Paragraph styles
• Only works for content enclosed within ltpgt
  elements

ltstyle typetext/cssgt p font-size14pt lt
/stylegt
47
Formatting Fonts Using Styles

• Indent and line spacing

ltstyle typetext/cssgt p text-indent25pt
line-height24pt lt/stylegt
ltstyle typetext/cssgt p text-indent12
line-height150 lt/stylegt
48
Formatting Fonts Using Styles

• Font Families
• What if not installed on users browser?

ltstyle typetext/cssgt p font-familyLucid
a lt/stylegt
49
Formatting Fonts Using Styles

• Include more than one font families

ltstyle typetext/cssgt p font-familyLucid
a,Arial lt/stylegt
50
Formatting Fonts Using Styles

• Warning multiple fonts may not have the impact
  you intend
• Users display may not include the fonts you
  specified
• Common fonts may be the best choice overall

51
Formatting Fonts Using Styles

• Can compress definition

ltstyle typetext/cssgt p font-styleitalic
font-weight500 font-variantsmall-caps
font-size14pt line-height24pt
font-familyLucida,Arial lt/stylegt
ltstyle typetext/cssgt p font italic 500
small-caps 14pt/24pt Lucida,Arial lt/
stylegt
52
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