HTML

1
HTML

• HTML was defined with SGML (Standard Generalized
  Markup Language)
• Intended for general layout of documents that
  could be displayed by a wide variety of computers
• Recent versions
• HTML 4.0 (1997) - Introduced many new features
  and deprecated many older features
• HTML 4.01 (1999) - A cleanup of 4.0
• XHTML 1.0 (2000) - Just 4.01 defined using XML,
  instead of SGML
• XHTML 1.1 (2001) - Modularized 1.0, and dropped
  frames

2
HTML vs XHTML

• HTML has lax syntax rules, leading to sloppy and
  sometime ambiguous documents
• XHTML syntax is much more strict, leading to
  clean and clear documents
• HTML processors do not even enforce the few
  syntax rule that do exist in HTML
• The syntactic correctness of XHTML documents can
  be validated

3
Basic Syntax

• Elements are defined by tags (markers)
• Tag format
• Opening tag ltnamegt
• Closing tag lt/namegt
• The opening tag and its closing tag together
  specify a container for the content they enclose
• Not all tags have content
• If a tag has no content, its form is ltname /gt
• The container and its content together are called
  an element
• If a tag has attributes, they appear between its
  name and the right bracket of the opening tag

4
Basic Syntax (2)

• Comment form lt!-- --gt
• - Browsers ignore comments, unrecognizable tags,
  line breaks, multiple spaces, and tabs
• Tags are suggestions to the browser, even if they
  are recognized by the browser

5
XHTML Document Structure

• Every XHTML document must begin with
• lt?xml version"1.0" encoding "utf-8"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  
• "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"gt
  
• lthtml xmlns "http//www.w3.org/1999/xhtml"gt
• World Wide Web Consortium (W3C)
• Home page http//www.w3.org
• Validation Servicehttp//validator.w3.org/file-u
  pload.html
• Schools http//www.w3schools.com/default.asp

6
XHTML Document Structure (2)

• Document consists of a head and a body
• lthtmlgt, ltheadgt, lttitlegt, and ltbodygt are required
  in every document
• lttitlegt tag in head is used to give the document
  a title,normally displayed in the browser
  windows title bar at the top of the display

7
Basic Text Markup

• Text is normally placed in paragraph elements
• ltpgt tag breaks the current line and inserts a
  blank line - the new line gets the beginning of
  the content of the paragraph
• The browser puts as many words of the paragraphs
  content as will fit in each line
• Extra white space is skipped

8
Basic Text Markup (2)

• ltbr /gt tag causes a line break
• Effect same as ltpgt, except for the blank line
• Note the space and / -- there is no closing tag
• Headings specified with lth1gt to lth6gt
• 1, 2, and 3 use font sizes that are larger than
  the default font size
• 4 uses the default size
• 5 and 6 use smaller font sizes
• Content is heading text
• Closing tag

9
Basic Text Markup (3)

• ltblockquotegt
• Used to set a block of text off from the normal
  flow and appearance of text
• Browsers often indent, and sometimes italicize
• Font Styles and Sizes (can be nested) -
  Boldface - ltbgt - Italics - ltigt - Larger -
  ltbiggt - Smaller - ltsmallgt - Monospace -
  ltttgt
• Superscripts and subscripts
• Subscripts with ltsubgt
• Superscripts with ltsupgt
• Horizontal rule lthr /gt

10
Character Entities

• Char. Entity Meaning amp Ampersand lt lt
  Less than gt gt Greater than " quot Double
  quote ' apos Apostrophe (Single
  quote) ¼ frac14 One quarter ½ frac12 One
  half ¾ frac34 Three quarters ? deg Degree
  nbsp Non-breaking space

11
Images

• GIF (Graphic Interchange Format)
• 8-bit color (256 different colors)
• JPEG (Joint Photographic Experts Group)
• 24-bit color (16 million different colors)
• Both use compression, but JPEG compression is
  better
• PNG (Portable Network Graphics)
• Relatively new
• May eventually replace both gif and jpeg

12
Images (2)

• Inserted into a document with the ltimg /gt tag
• src attribute specifies source
• alt attribute also required by XHTML
• Non-graphical browsers
• Browsers with images turned off
• Example ltimg src "comets.jpg" alt
  "Picture of comets" /gt
• The ltimggt tag has 30 different attributes,
  including width and height (in pixels)

13
Hypertext Links

• Hypertext is the essence of the Web
• A link is specified with the href (hypertext
  reference) attribute of ltagt (the anchor tag)
• The content of ltagt is the visual link in the
  document
• Example lta href "http//www.mtsu.edu/"gt MTSU
  lt/agt
• A reference can be absolute or relative
• If the target is not at the beginning of the
  document, the target spot must be marked
• Target labels can be defined in many different
  tags
• An img attrribute in the ltagt tag specifies that
  the link is an image

14
Lists

• Unordered lists
• The list is the content of the ltulgt tag
• List elements are the content of the ltligt tag
• Each item in the display is preceded by a bullet
• Ordered lists
• The list is the content of the ltolgt tag
• List elements are the content of the ltligt tag
• Each item in the display is preceded by a
  sequence value
• Lists can be nested

15
Tables

• A table is a matrix of cells, each possibly
  having content
• Cells can include almost any element
• Some cells have row or column labels and some
  have data
• A table is specified as the content of a lttablegt
  tag
• A border attribute in the lttablegt tag specifies a
  border between the cells
• If border is set to "border", the browsers
  default width border is used
• The border attribute can be set to a number,
  which will be the border width
• Without the border attribute, the table will have
  no lines
• Tables are given titles with the ltcaptiongt tag,
  which can immediately follow lttablegt

16
Tables (2)

• Each row of a table is specified as the content
  of a lttrgt tag
• The row headings are specified as the content of
  a ltthgt tag
• The contents of a data cell is specified as the
  content of a lttdgt tag

17
Tables (3)

• The align attribute in lttrgt, ltthgt, or lttdgt
  elements controls the horizontal placement of
  the contents in a table cell
• Values are left, right, and center (default)
• The valign attribute in ltthgt or lttdgt elements
  controls the vertical placement of the contents
  of a table cell
• Values are top, bottom, and center (default)
• The cellspacing attribute of lttablegt is used to
  specify the distance between cells in a table
• The cellpadding attribute of lttablegt is used to
  specify the spacing between the content of a cell
  and the inner walls of the cell

18
Forms

• Primarily used to pass information from a browser
  to a server
• HTML has tags to create a collection of objects
  called widgets that implement information
  gathering
• Examples radio buttons and checkboxes
• When the Submit button of a form is clicked, the
  forms values are sent to the server
• All of the or components of a form are defined in
  the content of a ltformgt tag
• The only required attribute of ltformgt is action,
  which specifies the URL of the application that
  is to be called when the Submit button is clicked
• The method attribute of ltformgt specifies get or
  post methods

19
Forms (2)

• Many widgets are created with the ltinputgt tag,
  where the type attribute of ltinputgt specifies the
  kind of widget being created. Some types are
• Text
• Creates a horizontal box (default size 20) for
  text input
• size can be changed with the size attribute
• If more characters are entered than will fit, the
  box is scrolled (shifted) leftunless maxlength
  is used
• Checkbox
• to collect multiple choice input
• Every checkbox requires a value attribute, which
  is the widgets value in the form data when the
  checkbox is checked
• A checkbox that is not checked contributes no
  value to the form data
• Radio
• Radio buttons are collections of checkboxes in
  which only one button at a time can be checked
• Every button in a radio button group must have
  the same name
• If no button in a radio button group is checked,
  the browser often checks the first one

20
Forms (3)

• Menus - created with ltselectgt tags
• Menus that behave like checkboxes
• Menus that behave like checkboxes are specified
  by including the multiple attribute, set to
  "multiple"
• Menus that behave like radio buttons (default)
• The name attribute of ltselectgt is required
• The size attribute of ltselectgt can be included to
  specify the number of menu items to be displayed
  (default is 1)
• If size is set to gt 1 or if multiple is
  specified, the menu is displayed as a pop-up menu
• Each item of a menu is specified with an ltoptiongt
  tag, whose pure text content (no tags) is the
  value of the item
• An ltoptiongt tag can include the selected
  attribute, which when assigned "selected"
  specifies that the item is preselected

21
Forms (4)

• Reset and Submit buttons created with
  ltinputgtltinput type "reset" value "Reset
  Form"gtltinput type "submit value "Submit
  Form"gt
• Submit has two actions
• 1. Encode the data of the form
• 2. Request that the server execute the
  server-resident program specified as the value of
  the action attribute of ltformgt
• A Submit button is required in every form

22
Frames

• Frames are rectangular sections of the display
  window, each of which can display a different
  document
• Because frames are no longer part of XHTML, you
  cannot validate a document that includes frames
• ltframesetgt takes the place of ltbodygt
• We wont use frames for this class

23
Differences between HTML XHTML

• Case sensitivity
• Closing tags
• Quoted attribute values
• Explicit attribute values
• id and name attributes
• Element nesting