web technologies- html

Ohud92

IT230_Modified_Chapter2_Week3.ppt

Home >Computer Science homework help >web technologies- html

Chapter 2
Markup Languages:
XHTML 1.0

WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE
JEFFREY C. JACKSON

HTML “Hello World!”

Document

Type

Declaration

Document

Instance

HTML Tags and Elements

Any string of the form < … > is a tag
All tags in document instance of Hello World are either end tags (begin with </) or start tags (all others)
Tags are an example of markup, that is, text treated specially by the browser
Non-markup text is called character data and is normally displayed by the browser
String at beginning of start/end tag is an element name
Everything from start tag to matching end tag, including tags, is an element
Content of element excludes its start and end tags

HTML Element Tree

Root

Element

HTML Root Element

Document type declaration specifies name of root element:
<!DOCTYPE html
Root of HTML document must be html
XHTML 1.0 (standard we will follow) requires that this element contain xmlns attribute specification (name/value pair)

SGML and XML

HTML Document Type Declarations

XHTML 1.0 Strict:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01 Transitional:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“
"http://www.w3.org/TR/html4/loose.dtd">

XHTML White Space

Four white space characters: carriage return, line feed, space, horizontal tab
Normally, character data is normalized:
All white space is converted to space characters
Leading and trailing spaces are trimmed
Multiple consecutive space characters are replaced by a single space character

XHTML White Space

Unrecognized HTML Elements

Misspelled

element name

Unrecognized HTML Elements

title character

data

Belongs

here

Unrecognized HTML Elements

title character

data

Displayed

here

HTML References

Since < marks the beginning of a tag, how do you include a < in an HTML document?
Use markup known as a reference
Two types:
Character reference specifies a character by its Unicode code point
For <, use < or < or <
Entity reference specifies a character by an HTML-defined name
For <, use <

HTML References

Non-breaking space (   ) produces space but counts as part of a word
Ex: keep together keep together …

HTML References

Non-breaking space often used to create multiple spaces (not removed by normalization)

  + space

displays as two

spaces

HTML References

Non-breaking space often used to create multiple spaces (not removed by normalization)

two spaces

display as one

XHTML Attribute Specifications

Example:
Syntax:
Valid attribute names specified by HTML recommendation (or XML, as in xml:lang)
Attribute values must be quoted (matching single or double quotes)
Multiple attribute specifications are space-separated, order-independent

Common HTML Elements

Headings are produced using h1, h2, …, h6 elements:

Should use h1 for highest level, h2 for next highest, etc.
Change style (next chapter) if you don’t like the “look” of a heading

Common HTML Elements

Use pre to retain format of text and display using monospace font:

Note that any embedded markup (such as <br /> ) is still treated as markup!

Common HTML Elements

br element represents line break
br is example of an empty element, i.e., element that is not allowed to have content
XML allows two syntactic representations of empty elements
Empty tag syntax <br /> is recommended for browser compatibility
XML parsers also recognize syntax <br></br> (start tag followed immediately by end tag), but many browsers do not understand this for empty elements

Common HTML Elements

Text can be formatted in various ways:
Apply style sheet technology (next chapter) to a span element (a styleless wrapper):

Use a phrase element that specifies semantics of text (not style directly):

Use a font style element
Not recommended, but frequently used

Common HTML Elements

Horizontal rule is produced using hr
Also an empty element
Style can be modified using style sheet technology

Common HTML Elements

Images can be embedded using img element

Attributes:
src: URL of image file (required). Browser generates a GET request to this URL.
alt: text description of image (required)
height / width: dimensions of area that image will occupy (recommended)

Common HTML Elements

Hyperlinks are produced by the anchor element a

Clicking on a hyperlink causes browser to issue GET request to URL specified in href attribute and render response in client area
Content of anchor element is text of hyperlink (avoid leading/trailing space in content)

Common HTML Elements

Anchors can be used as source (previous example) or destination

The fragment portion of a URL is used to reference a destination anchor

Browser scrolls so destination anchor is at (or near) top of client area

Common HTML Elements

Comments are a special form of tag

Not allowed to use -- within comment

Nesting Elements

If one element is nested within another element, then the content of the inner element is also content of the outer element

XHTML requires that elements be properly nested

Nesting Elements

Most HTML elements are either block or inline
Block: browser automatically generates line breaks before and after the element content
Ex: p
Inline: element content is added to the “flow”
Ex: span, tt, strong, a

Nesting Elements

Syntactic rules of thumb:
Children of body must be blocks
Blocks can contain inline elements
Inline elements cannot contain blocks
Specific rules for each version of (X)HTML are defined using SGML or XML (covered later)

Relative URL’s

Consider an <img> start tag containing attribute specification

This is an example of a relative URL: it is interpreted relative to the URL of the document that contains the img tag
If document URL is
http://localhost:8080/MultiFile.html
then relative URL above represents absolute URL http://localhost:8080/valid-xhtml10.png

Relative URL’s

Lists

Unordered List

Ordered List

Definition List

List Items

Lists

Tables

Table Row

Table Data

Border 5 pixels, rules 1 pixel

Tables

Table Header

Frames

1/3,2/3 split

Forms

Each form is content of a form element

Forms

action specifies URL where form data is sent in an HTTP request

Forms

HTTP request method (lower case)

Forms

div is the block element analog of span (no-style block element)

Forms

Form control elements must be content of a block element

Forms

Text field control (form user-interface element)

Forms

Text field used for one-line inputs

Forms

Name associated with this control’s data in HTTP request

Forms

Width (number of characters) of text field

Forms

input is an empty element

Forms

Use label to associate text with a control

Forms

Form controls are inline elements

Forms

textarea control used for multi-line input

Forms

Height and width in characters

Forms

textarea is not an empty element; any content is displayed

Forms

Checkbox control

Forms

Value sent in HTTP request if box is checked

Forms

Controls can share a common name

Forms

Submit button: form data sent to action URL if button is clicked

Forms

Form data (in GET request)

Forms

Displayed on button and sent to server if button clicked

Forms

Radio buttons: at most

one can be selected at

a time.

Forms

Radio button control

Forms

All radio buttons with the same name form a button set

Forms

Only one button of a set can be selected at a time

Forms

This button is initially selected
(checked attribute also applies
to check boxes)

Forms

Boolean attribute: default false,

set true by specifying name as

value

Forms

Represents string: >50

Forms

Menu control; name given once

Forms

Each menu item has its own value

Forms

Item initially displayed in menu

control

Forms

Other form controls:
Fieldset (grouping)
Password
Clickable image
Non-submit buttons
Hidden (embed data)
File upload
Hierarchical menus

Forms

XML DTD

Recall that XML is used to define the syntax of XHTML
Set of XML files that define a language are known as the document type definition (DTD)
DTD primarily consists of declarations:
Element type: name and content of elements
Attribute list: attributes of an element
Entity: define meaning of, e.g., >

XML Element Type Declaration

Element type name

XML Element Type Declaration