Scribd
Upload
11 views86 pages

Ch2 MarkupLanguages Updated

The document provides an overview of web development focusing on markup languages, specifically HTML and XHTML. It covers essential concepts such as HTML tags, elements, document structure, and common HTML elements like headings, lists, tables, and forms. Additionally, it discusses the importance of proper syntax and validation in HTML documents.

Uploaded by

aldhme577
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views86 pages

Ch2 MarkupLanguages Updated

The document provides an overview of web development focusing on markup languages, specifically HTML and XHTML. It covers essential concepts such as HTML tags, elements, document structure, and common HTML elements like headings, lists, tables, and forms. Additionally, it discusses the importance of proper syntax and validation in HTML documents.

Uploaded by

aldhme577
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 86

CSCE 362

Web Development

Markup Languages:
XHTML 1.0
HTML “Hello World!”
Documen
t Type
Declaratio
n

Docume
nt
Instance

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 2


S

HTML “Hello World”

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 3


HTML Tags and Elements

 Any string of the form < …j > is a tag


All tags in document instance of Hello World are either
end tags (begin with </) or start tags (all others)
so
 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,
j
including tags, is an element
 Content of element excludes its start and end tags

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 4


HTML Element Tree
Root
Eleme
nt

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 5


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 the xml namespace xmlns
attribute specification (name/value pair)

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 6


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:
I 
title (shown in title bar of browser window)

scripts (client-side programs)

style (display) information

etc.Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 7
SGML and XML
g

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 8


HTML “Flavors”

 For HTML 4.01 and XHTML 1.0, the


document type declaration can be used
to select one of three “flavors”:
wow

Strict: W3C ideal

Transitional: Includes deprecated elements and
attributes (W3C recommends use of style sheets
instead)

Frameset: Supports frames (subwindows within
the client area)
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 9
HTML Frameset

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 10


XHTML White Space
I
 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

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 11


XHTML White Space

v54
I I

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 12


XHTML White Space

wine

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 13


Unrecognized HTML Elements

Misspelled
element
name o is

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 14


Unrecognized HTML Elements

Belong
s here
title
character data

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 15


Unrecognized HTML Elements
Ñ

title
character data
D
i
s
p
l
a
y
e
d
h
e
r Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 16
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
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 17
Unrecognized HTML Elements

Example for non-frame browsers (old)


<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAME src="contents_of_frame1.html“ />
<FRAME src="contents_of_frame2.html“ />
<NOFRAMES>
<P>This doc contains frames</P>
</NOFRAMES>
</FRAMESET>
</HTML>

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 18


HTML References

Since < marks the beginning of a tag, how do


on
you include a < in an HTML document?
 Use markup known as a reference
e

 Two types:

Character reference specifies a character by its
Unicode code point
 For <, use &#60; or &#x3C; or &#x3c;

Entity reference specifies a character by an
HTML- defined name
 For <, use &lt;
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 19
HTML References

 Since < and & begin markup, within


e
character data or attribute values these
characters must always be represented
by references (normally &lt; and
&amp;)
 Good idea to represent > using
reference (normally &gt;)

Provides consistency with treatment of <

Avoids accidental use of the reserved string
]]>Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 20
HTML References

 Non-breaking space ( &nbsp; )


produces space but counts as part of a word

Ex: keep&nbsp;together keep&nbsp;together
…

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 21


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

&nbsp; +
space
displays as
two spaces

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 22


Common HTML Elements
title

et

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 23


Common HTML Elements

Headings are produced using h1, h2, …,


h6 elements:

Should use h1 for highest level, h2 for next


o
highest, etc.

Change style (next chapter) if you don’t like the “look”
of a heading
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 24
Common HTML Elements

0,30pin

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 25


Common HTML Elements

 Use pre to retain format of text and


display using monospace font:
7 15

Note that any embedded markup (such


as
<br /> ) is still treated as markup!
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 26
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
5
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
to
followed immediately by end tag), but many browsers
do not understand this for empty elements
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 27
Common HTML Elements

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 28


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
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 29
Common HTML Elements

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 30


Common HTML Elements

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 31


Common HTML Elements

Horizontal rule is produced using hr


Also an empty element
 Style can be modified using style
sheet technology

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 32


Common HTML Elements

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 33


Common HTML Elements

1
 Images can be embedded using img
element I

e
 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
on
will occupy (recommended)
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 34
Common HTML Elements

 Hyperlinks are produced by the anchor element a

-
sina me - em es ij

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)
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 35
Common HTML Elements

Comments are a special form of tag

Not allowed to use -- within


comment
0
3511is
a sin

if

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 36


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

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 37


Lists

l
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 38
Lists

Unordered
List
List
1.2.3 Items
Ordered
List

a
De\nition
List

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 39


Lists

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 40


Tables

Rule
s

Border
s Rule
s

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 41


Tables

Border 5 pixels, rules 1


pixel

Table
Row

Table
Data
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 42
Tables

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 43


Tables

I
Table
Header

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 44


Tables

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 45


Tables

cellspacin cellpaddin
g g

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 46


Tables

cellspacin cellpaddin
g g

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 47


Tables

cellspacin cellpaddin
g g

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 48


Frames
is isi as
i

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 49


Frames

1/3,2/3
split

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 50


Frames

 Hyperlink in one frame can load document


in another:
as

 Value of target attribute specification is


id/name of a frame

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 51


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”

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 52


Forms

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 53


Forms
Each form is content of a form
element

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 54


Forms
action speci\es URL where form data is sent in an HTTP
request

am

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 55


Forms
HTTP request method (lower
case)

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 56


Forms

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


element)

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 57


Forms

Form control elements must be content of a block


element

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 58


Forms

Text \eld control (form user-interface


element)

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 59


Forms

Text \eld used for one-line


inputs

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 60


Forms

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 61


Forms

Name associated with this control’s data in HTTP


request

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 62


Forms

Width (number of characters) of


text \eld

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 63


Forms

input is an empty
element

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 64


Forms

Use label to associate text with a


control

Only one control inside a label


element!

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 65


Forms

Form controls are inline


elements

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 66


Forms

textarea control used for multi-line


input

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 67


Forms

Height and width in


characters

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 68


Forms

textarea is not an empty element; any content is


displayed

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 69


Forms

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 70


Forms
Checkbox
control

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 71


Forms
Value sent in HTTP request if box is
checked

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 72


Forms
Controls can share a common name

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 73


Forms

Submit button: form data sent to action URL if button


is clicked

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 74


Forms

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 75


Forms

Displayed on button and sent to server if button


clicked

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 76


Forms

Radio buttons: at
most one can be
selected at a time.

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 77


Forms
Radio button
control

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 78


Forms

All radio buttons with the same name form a


button set

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 79


Forms

Only one button of a set can be selected at


a time

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 80


Forms

This button is initially


selected (checked attribute
also applies to check boxes)

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 81


Forms

Boolean attribute: default


false, set true by
specifying name as value

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 82


Forms

Represents string:
>50

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 83


Forms

Men
u

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 84


Forms

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 85


HTML Creation Tools

Mozilla Composer

Microsoft FrontPage
Macromedia Dreamweaver
Etc.
Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 86

You might also like