1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration...
-
Upload
clyde-ford -
Category
Documents
-
view
217 -
download
0
Transcript of 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration...
![Page 1: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/1.jpg)
1
Lecture 5
Markup Languages:HTML and XHTML
![Page 2: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/2.jpg)
2
HTML “Hello World!”
DocumentTypeDeclaration
DocumentInstance
![Page 3: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/3.jpg)
3
HTML “Hello World”
![Page 4: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/4.jpg)
4
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
![Page 5: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/5.jpg)
5
HTML Element Tree
RootElement
![Page 6: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/6.jpg)
6
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)
![Page 7: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/7.jpg)
7
HTML head and body Elements
• The body element contains information displayed in the browser client area
• The head element contains information used for other purposes by the browser:– title (shown in title bar of browser window)– scripts (client-side programs)– style (display) information– etc.
![Page 8: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/8.jpg)
8
HTML History
• 1990: HTML invented by Tim Berners-Lee• 1993: Mosaic browser adds support for
images, sound, video to HTML• 1994-~1997: “Browser wars” between
Netscape and Microsoft, HTML defined operationally by browser support
• ~1997-present: Increasingly, World-Wide Web Consortium (W3C) recommendations define HTML
![Page 9: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/9.jpg)
9
HTML Versions
• HTML 4.01 (Dec 1999) syntax defined using Standard Generalized Markup Language (SGML)
• XHTML 1.0 (Jan 2000) syntax defined using Extensible Markup Language (XML)
• Primary differences:– HTML allows some tag omissions (e.g., end tags)– XHTML element and attribute names are lower case
(HTML names are case-insensitive)– XHTML requires that attribute values be quoted
![Page 10: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/10.jpg)
10
SGML and XML
![Page 11: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/11.jpg)
11
HTML “Flavors”
• For HTML 4.01 and XHTML 1.0, the document type declaration can be used to select one of three “flavors”:– Strict: W3C ideal– Transitional: Includes deprecated elements
and attributes (W3C recommends use of style sheets instead)
– Frameset: Supports frames (subwindows within the client area)
![Page 12: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/12.jpg)
12
HTML Frameset
![Page 13: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/13.jpg)
13
HTML Document Type Declarations
• XHTML 1.0 Strict:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML 1.0 Frameset:<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• HTML 4.01 Transitional:<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“"http://www.w3.org/TR/html4/loose.dtd">
![Page 14: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/14.jpg)
14
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
![Page 15: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/15.jpg)
15
XHTML White Space
![Page 16: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/16.jpg)
16
XHTML White Space
![Page 17: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/17.jpg)
17
Unrecognized HTML Elements
Misspelledelement name
![Page 18: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/18.jpg)
18
Unrecognized HTML Elements
title characterdata
Belongshere
![Page 19: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/19.jpg)
19
Unrecognized HTML Elements
title characterdata
Displayedhere
![Page 20: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/20.jpg)
20
Unrecognized HTML Elements
• Browsers ignore tags with unrecognized element names, attribute specifications with unrecognized attribute names– Allows evolution of HTML while older
browsers are still in use
• Implication: an HTML document may have errors even if it displays properly
• Should use an HTML validator to check syntax
![Page 21: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/21.jpg)
21
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 <
![Page 22: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/22.jpg)
22
HTML References
![Page 23: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/23.jpg)
23
HTML References
• Since < and & begin markup, within character data or attribute values these characters must always be represented by references (normally < and &)
• Good idea to represent > using reference (normally >)– Provides consistency with treatment of <– Avoids accidental use of the reserved
string ]]>
![Page 24: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/24.jpg)
24
HTML References
• Non-breaking space ( ) produces space but counts as part of a word– Ex: keep together keep together
…
![Page 25: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/25.jpg)
25
HTML References
• Non-breaking space often used to create multiple spaces (not removed by normalization)
+ spacedisplays as twospaces
![Page 26: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/26.jpg)
26
HTML References
• Non-breaking space often used to create multiple spaces (not removed by normalization)
two spacesdisplay as one
![Page 27: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/27.jpg)
27
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
![Page 28: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/28.jpg)
28
XHTML Attribute Values
• Can contain embedded quotes or references to quotes
• May be normalized by browser– Best to normalize attribute values yourself for
optimal browser compatibility
![Page 29: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/29.jpg)
29
Common HTML Elements
![Page 30: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/30.jpg)
30
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
![Page 31: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/31.jpg)
31
Common HTML Elements
![Page 32: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/32.jpg)
32
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!
![Page 33: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/33.jpg)
33
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
![Page 34: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/34.jpg)
34
Common HTML Elements
![Page 35: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/35.jpg)
35
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
![Page 36: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/36.jpg)
36
Common HTML Elements
![Page 37: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/37.jpg)
37
Common HTML Elements
![Page 38: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/38.jpg)
38
Common HTML Elements
• Horizontal rule is produced using hr• Also an empty element
• Style can be modified using style sheet technology
![Page 39: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/39.jpg)
39
Common HTML Elements
![Page 40: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/40.jpg)
40
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)
![Page 41: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/41.jpg)
41
Common HTML Elements
• If height and width not specified for image, then browser may need to rearrange the client area after downloading the image (poor user interface for Web page)
• If height and width specified are not the same as the original dimensions of image, browser will resize the image
• Default units for height and width are “picture elements” (pixels)– Can specify percentage of client area using string
such as “50%”
![Page 42: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/42.jpg)
42
Common HTML Elements
• Monitor resolution determines pixel size
768 lines
1024 elements per line
500 pixel wide line is almosthalf the width of monitor
![Page 43: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/43.jpg)
43
Common HTML Elements
• Monitor resolution determines pixel size
1024 lines
1280 elements per line
500 pixel wide line is lessthan half the width of monitor
![Page 44: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/44.jpg)
44
Common HTML Elements
![Page 45: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/45.jpg)
45
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)
![Page 46: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/46.jpg)
46
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
![Page 47: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/47.jpg)
47
Common HTML Elements
• Comments are a special form of tag
• Not allowed to use -- within comment
![Page 48: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/48.jpg)
48
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
![Page 49: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/49.jpg)
49
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
![Page 50: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/50.jpg)
50
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)
![Page 51: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/51.jpg)
51
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
![Page 52: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/52.jpg)
52
Relative URL’s
![Page 53: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/53.jpg)
53
Relative URL’s
• Query and fragment portions of a relative URL are appended to the resulting absolute URL– Example: If document URL is
http://localhost:8080/PageAnch.html and it contains the anchor element
then the corresponding absolute URL is http://localhost:8080/PageAnch.html#section1
![Page 54: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/54.jpg)
54
Relative URL’s
• Advantages:– Shorter than absolute URL’s– Primary: can change the URL of a document
(e.g., move document to a different directory or rename the server host) without needing to change URL’s within the document
• Should use relative URL’s whenever possible
![Page 55: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/55.jpg)
55
Lists
![Page 56: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/56.jpg)
56
Lists
Unordered List
Ordered List
Definition List
List Items
![Page 57: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/57.jpg)
57
Lists
![Page 58: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/58.jpg)
58
Tables
Rules
RulesBorders
![Page 59: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/59.jpg)
59
Tables
Table Row
Table Data
Border 5 pixels, rules 1 pixel
![Page 60: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/60.jpg)
60
Tables
![Page 61: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/61.jpg)
61
Tables
Table Header
![Page 62: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/62.jpg)
62
Tables
![Page 63: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/63.jpg)
63
Tables
cellspacing cellpadding
![Page 64: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/64.jpg)
64
Tables
cellspacing cellpadding
![Page 65: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/65.jpg)
65
Tables
cellspacing cellpadding
![Page 66: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/66.jpg)
66
Frames
![Page 67: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/67.jpg)
67
Frames
1/3,2/3 split
![Page 68: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/68.jpg)
68
Frames
• Hyperlink in one frame can load document in another:
• Value of target attribute specification is id/name of a frame
![Page 69: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/69.jpg)
69
Frames
• User interface issues:– What happens when the page is printed?– What happens when the Back button is clicked?– How should assistive technology “read” the page?– How should the information be displayed on a small
display?
• Recommendation: avoid frames except for applications aimed at “power users”
![Page 70: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/70.jpg)
70
Forms
![Page 71: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/71.jpg)
71
FormsEach form is content of a form element
![Page 72: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/72.jpg)
72
Forms
action specifies URL where form data is sent in an HTTP request
![Page 73: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/73.jpg)
73
Forms
HTTP request method (lower case)
![Page 74: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/74.jpg)
74
Forms
div is the block element analog of span (no-style block element)
![Page 75: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/75.jpg)
75
Forms
Form control elements must be content of a block element
![Page 76: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/76.jpg)
76
Forms
Text field control (form user-interface element)
![Page 77: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/77.jpg)
77
Forms
Text field used for one-line inputs
![Page 78: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/78.jpg)
78
Forms
![Page 79: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/79.jpg)
79
Forms
Name associated with this control’s data in HTTP request
![Page 80: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/80.jpg)
80
Forms
Width (number of characters) of text field
![Page 81: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/81.jpg)
81
Forms
input is an empty element
![Page 82: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/82.jpg)
82
Forms
Use label to associate text with a control
![Page 83: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/83.jpg)
83
Forms
Form controls are inline elements
![Page 84: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/84.jpg)
84
Forms
textarea control used for multi-line input
![Page 85: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/85.jpg)
85
Forms
Height and width in characters
![Page 86: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/86.jpg)
86
Forms
textarea is not an empty element; any content is displayed
![Page 87: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/87.jpg)
87
Forms
![Page 88: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/88.jpg)
88
Forms
Checkbox control
![Page 89: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/89.jpg)
89
Forms
Value sent in HTTP request if box is checked
![Page 90: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/90.jpg)
90
FormsControls can share a common name
![Page 91: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/91.jpg)
91
Forms
Submit button: form data sent to action URL if button is clicked
![Page 92: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/92.jpg)
92
Forms
![Page 93: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/93.jpg)
93
Forms
Form data (in GET request)
![Page 94: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/94.jpg)
94
Forms
Displayed on button and sent to server if button clicked
![Page 95: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/95.jpg)
95
Forms
Radio buttons: at mostone can be selected ata time.
![Page 96: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/96.jpg)
96
Forms
Radio button control
![Page 97: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/97.jpg)
97
Forms
All radio buttons with the same name form a button set
![Page 98: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/98.jpg)
98
Forms
Only one button of a set can be selected at a time
![Page 99: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/99.jpg)
99
Forms
This button is initially selected (checked attribute also applies to check boxes)
![Page 100: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/100.jpg)
100
Forms
Boolean attribute: default false, set true by specifying name as value
![Page 101: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/101.jpg)
101
Forms
Represents string: >50
![Page 102: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/102.jpg)
102
Forms
Menu
![Page 103: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/103.jpg)
103
Forms
Menu control; name given once
![Page 104: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/104.jpg)
104
Forms
Each menu item has its own value
![Page 105: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/105.jpg)
105
Forms
Item initially displayed in menucontrol
![Page 106: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/106.jpg)
106
Forms• Other form controls:
– Fieldset (grouping)– Password– Clickable image– Non-submit buttons– Hidden (embed data)– File upload– Hierarchical menus
![Page 107: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/107.jpg)
107
Forms
![Page 108: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/108.jpg)
108
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., >
![Page 109: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/109.jpg)
109
XML Element Type Declaration
Element type name
![Page 110: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/110.jpg)
110
XML Element Type Declaration
Element type content specification (or content model)
![Page 111: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/111.jpg)
111
XML Element Type Declaration
Element type content specification (or content model)
![Page 112: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/112.jpg)
112
XML Element Type Declaration
Element type content specification (or content model)
![Page 113: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/113.jpg)
113
XML Element Type Declaration
Element type content specification (or content model)
![Page 114: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/114.jpg)
114
XML Element Type Declaration
Element type content specification (or content model)
![Page 115: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/115.jpg)
115
XML Element Type Declaration
Element type content specification (or content model)
![Page 116: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/116.jpg)
116
XML Element Type Declaration
Element type content specification (or content model)
![Page 117: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/117.jpg)
117
XML Element Type Declaration
Element type content specification (or content model)
<!ELEMENT textarea (#PCDATA)>
![Page 118: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/118.jpg)
118
XML Element Type Declaration
Element type content specification (or content model)
<!ELEMENT textarea (#PCDATA)>
![Page 119: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/119.jpg)
119
XML Element Type Declaration
Element type content specification (or content model)
![Page 120: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/120.jpg)
120
XML Element Type Declaration
Element type content specification (or content model)
![Page 121: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/121.jpg)
121
XML Element Type Declaration
Element type content specification (or content model)
![Page 122: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/122.jpg)
122
XML Element Type Declaration
• Child elements of table are:
![Page 123: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/123.jpg)
123
XML Element Type Declaration
• Child elements of table are:– Optional caption
![Page 124: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/124.jpg)
124
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by
![Page 125: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/125.jpg)
125
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements
![Page 126: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/126.jpg)
126
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or
![Page 127: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/127.jpg)
127
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements
![Page 128: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/128.jpg)
128
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then
![Page 129: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/129.jpg)
129
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then– Optional header
![Page 130: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/130.jpg)
130
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then– Optional header followed by
![Page 131: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/131.jpg)
131
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then– Optional header followed by optional footer
![Page 132: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/132.jpg)
132
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then– Optional header followed by optional footer
then
![Page 133: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/133.jpg)
133
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then– Optional header followed by optional footer
then– One or more tbody elements
![Page 134: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/134.jpg)
134
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then– Optional header followed by optional footer
then– One or more tbody elements or
![Page 135: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/135.jpg)
135
XML Element Type Declaration
• Child elements of table are:– Optional caption followed by– Any number of col elements or any number
of colgroup elements then– Optional header followed by optional footer
then– One or more tbody elements or one or more tr elements
![Page 136: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/136.jpg)
136
XML Attribute List Declaration
Element type name
![Page 137: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/137.jpg)
137
XML Attribute List Declaration
Recognized attribute names
![Page 138: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/138.jpg)
138
XML Attribute List Declaration
Attribute types(data types allowed as attribute values)
![Page 139: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/139.jpg)
139
XML Attribute List Declaration
ASCII characters: letter, digit, or . - _ :
![Page 140: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/140.jpg)
140
XML Attribute List Declaration
Attribute value must be ltr or rtl
![Page 141: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/141.jpg)
141
XML Attribute List Declaration
Like NMTOKEN but must begin with letter or _ :Attribute value must be unique
![Page 142: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/142.jpg)
142
XML Attribute List Declaration
Any character except XML special characters < and &or the quote character enclosing the attribute value
![Page 143: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/143.jpg)
143
XML Attribute List Declaration
![Page 144: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/144.jpg)
144
XML Attribute List Declaration
Attribute default declarations
![Page 145: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/145.jpg)
145
XML Attribute List Declaration
![Page 146: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/146.jpg)
146
XML Entity Declaration
• Entity declaration is essentially a macro
• Two types of entity:– General: referenced from HTML document
using &
Entity name
![Page 147: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/147.jpg)
147
XML Entity Declaration
• Entity declaration is essentially a macro
• Two types of entity:– General: referenced from HTML document
using &
Replacement text;recursively replaced if it is a reference
![Page 148: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/148.jpg)
148
XML Entity Declaration
• Entity declaration is essentially a macro
• Two types of entity:– General: referenced from HTML document
using &
– Parameter: reference from DTD using %
![Page 149: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/149.jpg)
149
XML Entity Declaration
• Entity declaration is essentially a macro
• Two types of entity:– General: referenced from HTML document
using &
– Parameter: reference from DTD using %
![Page 150: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/150.jpg)
150
DTD Files
• DTD document contains element type, attribute list, and entity declarations
• May also contain declaration of external entities: identifiers for secondary DTD documents
System Identifier: URL for primary DTD document
![Page 151: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/151.jpg)
151
DTD Files
External entity name
![Page 152: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/152.jpg)
152
DTD Files
System identifier (relative URL)
![Page 153: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/153.jpg)
153
DTD Files
Entity reference; imports content (entity declarations, called entity set) of external entity at this point in the primary DTD
![Page 154: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/154.jpg)
154
HTML Creation Tools
• Mozilla Composer
• Microsoft FrontPage• Macromedia Dreamweaver• Etc.
![Page 155: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/155.jpg)
155
Case Study
![Page 156: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/156.jpg)
156
Case Study
Borderless table used to lay out form
![Page 157: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/157.jpg)
157
Case Study
Special text field for passwords
![Page 158: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/158.jpg)
158
Case Study
Fix thislater with“style”
Useref. toget <
![Page 159: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/159.jpg)
159
Case Study
![Page 160: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/160.jpg)
160
Case Study
Banner
Blog entries
Side information
Table used for side-by-side layout
![Page 161: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/161.jpg)
161
Case Study:Blog Entry
![Page 162: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/162.jpg)
162
Case Study:Side Information
Represent & in attribute value
Keep monthand yeartogether
![Page 163: 1 Lecture 5 Markup Languages: HTML and XHTML. 2 HTML “Hello World!” Document Type Declaration Document Instance.](https://reader035.fdocuments.in/reader035/viewer/2022062408/56649f045503460f94c17eec/html5/thumbnails/163.jpg)
163
End of Lecture 5b