CSCE 102 General Application Programming Section 10,11,12

1
CSCE 102 General Application ProgrammingSection
10,11,12

• Instructor Jin Jin
• jinj_at_cse.sc.edu
• 8/29/2006

2
Review

• Basic HTML structure
• lthtmlgt
• ltheadgt
• lttitlegt put your title here lt/titlegt
• lt/headgt
• ltbodygt
• put what you want your webpage to show
  here.
• lt/bodygt
• lt/htmlgt

3
ReviewWe are working on XHTML (new version of
HTML) from now on

• lt!-- XML declaration--gt
• lt?xml version"1.0"?gt
• lt!-- DTD--gt
• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Transitional//EN"
• "http//www/w3/org/TR/xhtml/11/DTD/xhtml11-trans
  itional.dtd"gt
• lt!--XML namespace--gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgt
• lttitlegt put your title here lt/titlegt
• lt/headgt
• ltbodygt
• put what you want your webpage to show
  here.
• lt/bodygt
• lt/htmlgt

4
Review

• Headings insert a blank line at the beginning
  and end
• lth1gt text lt/h1gt
• lth2gt text lt/h2gt
• lth3gt text lt/h4gt
• lth4gt text lt/h4gt
• lth5gt text lt/h5gt
• lth6gt text lt/h6gt

5
Review

• lt!--Write down your comments here--gt
• ltpgt paragraph lt/pgt-- insert a blank line at the
  beginning and end
• ltemgt text lt/emgt
• ltstronggt text lt/stronggt
• ltbiggt text lt/biggt
• ltsmallgt text lt/smallgt
• ltbr /gt
• ltblockquotegt text lt/blockquotegt--insert a blank
  line at the beginning and end

6
Review

• Adding XML declaration and DTD (Document Type
  Definition) for XHTML to the beginning of a
  source HTML document
• Adding XML namespace info to the lthtmlgt tag

7
Block-level vs. Inline elements

• Block-level elements define a complete section
  or block of the text, such as ltbodygt, ltpgt,
  ltblockquotegt, lth1gt etc.
• Inline elements define the structure of a
  sequence of characters within a line of text or
  even a single character. Such as ltemgt, ltbiggt,
  ltsmallgt etc.
• Inline elements cant contain block-level
  elements, but could be included in the
  block-level elements
• Block-level elements could contain other
  block-level elements.
• ltbodygt
• lth1gt your heading goes here lt/h1gt
• lt/bodygt

8
One more tag to format the document

• ltcentergt text lt/centergt
• Its a block element. Note the browser will
  automatically insert a line break after ltcentergt
  element

9
XHTML tags vs. XHTML elements

• XHTML tags are used to mark up the start and end
  of an HTML element.
• Example start tag ltpgt, close tag lt/pgt
• XHTML elements consist of a start tag, content,
  and an end tag.
• Example
• ltpgt This is the content of the paragraph element.
  lt/pgt

10

• Major differences between HTML and XHTML
• XHTML tag names must be in lower caseXHTML is
  case-sensitive
• All XHTML elements must be closed
• XHTML elements must be properly nested
• XHTML documents must be well-formed

11
XHTML elements must be properly nested

• In XHTML all elements must be properly nested
  within each other like this
• Example
• lth2gtltemgtThis header will be both bold and
  italicizedlt/emgtlt/h2gt
• Wrong way
• lth2gtltemgtThis header will be both bold and
  italicizedlt/h2gtlt/emgt

12
XHTML documents must be well-formed

• All XHTML elements must be nested within the
  lthtmlgt root element. All other elements can have
  sub (children) elements. Sub elements must be in
  pairs and correctly nested within their parent
  element.
• lthtmlgt
• ltheadgt
• lttitlegt..lt/titlegt
• lt/headgt
• ltbodygt ... lt/bodygt
• lt/htmlgt

13
All XHTML elements must be closed

• ltbr /gt
• There are also some elements that are empty,
  meaning that they only consist of a single tag
  and do not have any content.
• In XHTML, Empty elements must either have an end
  tag or the start tag must end with /gt. In order
  to ensure backward compatibility with HTML the
  most common way of writing empty elements in
  XHTML is to use minimised tag syntax with a space
  before the trailing /gt