Web I - 02 - XHTML Introduction

EASING
INTO WEB
DEVELOPMENT
2.
2 HTML

1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY

HTML Standard
3

 Hypertext Markup Language
 While initially developed by Tim Berners-Lee of
y p y
CERN in 1990, the World Wide Web Consortium
(
(W3C) now officially controls HTML standard.
) y
 In practice, Netscape, then Microsoft controlled the
development of HTML
HTML.
 Tags added or supported by their browsers
influence/control the HTML standard
standard.

HTML Standard
4

 From around 2002/3, there has been movement back to having
F d 2002/3 th h b tb kt h i
W3C control the standard for HTML
 W3C standards:
 HTML 3.2
 HTML 4.01
 XHTML 1.0
 XHTML 1.1
 XHTML 2.0
 Now, most recent versions of browsers are h i to follow the
N i fb having f ll h
standards
 FireFox supports XHTML 1.1
 IE 6 (almost) supports XHTML 1.0
 IE 7 (almost) supports XHTML 1.1

XHTML
5

 XHTML (Extensible HTML) as a standard came
about due to browser inconsistencies.
 Fewdifferences between HTML and XHTML
 XHTML is stricter than HTML and has additional rules.
 As well, several tags and many attributes are no longer
supported.

Tags Defined
6

 HTML d fi
defines elements which are i di t d b t
l t hi h indicated by tags.
 The basic HTML tag has four parts:
 An opening delimeter, the < symbol
p g , y
 The Tag name
 Optional list of attributes that modify the way that tag works.
 A closing delimeter the > symbol
delimeter,
 A typical tag might look like this:
<p align="center">
 Tags are not case sensitive.
 However, in XML (eXtensible Markup Language) and XHTML, tags must
be lower-case.
 If your browser encounters a tag it doesn’t support, it simply ignores
it.

See page(s): 94 ff

Containers
7

 Most
M t HTML t tags are containers, meaning the beginning t
t i i th b i i tags must be tb
matched by a closing tag.
 The end tag will have same name as start tag but preceded with a
slash (/).
l h (/)
 For example:
 This is <b>Bold text</b> but not this
This is <b>Bold text</b> but not this
 Will result in:
 This is Bold text but not this
 The text enclosed within the tags will follow the tag’s instructions.
 For some tags, the end tag is optional.
 XHTML standard requires all tags to be closed
closed.
 For those tags without end tags in the HTML original (e.g., <br>) then
close tag is contained within tag (e.g., <br/>)

See page(s): 71

Nested Tags
8

 Tags can be nested.
Hello <b><i>emphasized</i></b> there

will result in
hello emphasized there
i

 The order is important.
<b>This word is <i>emphasized</i> here </b>  Correct (no overlapping lines)

<b>This word is <i>emphasized</b> here </i> × Incorrect (overlapping lines)

Attributes
9

 Attributes t d
Att ib t extend or modify the way a tag operates.
dif th t t
 Most (but not all) tags accept several attributes.
 order of attributes is unimportant
p
 Most attributes take values, which follow an equal sign (=). For
example,
<p align=left>
<font face="arial, tahoma">
<a href="http://www.abc.com">
<body bgcolor="#ffcc00">

 Strictly speaking, values should be enclosed in straight quotes (" "
y p g, g q (
not “ ”).
 You can omit the quotes if the value contains only letters, digits, hyphens,
or periods.
 XHTML requires quotes around attributes.
 Browsers ignore unknown attributes.

Information Browsers Ignore
10

 line breaks displays as
He Hello there
llo t
here

 tabs and multiple spaces
Hello there Hello there

 multiple <P> tags Hello
Hello<P><P><P><P><P>There
there

 unrecognized tags and attributes
<randy nose=large>hello there</randy> Hello there

 text in comments
<!-- this is a comment --!>

Character Entities
11

 In order to display special characters (such as ©, á,
&, <, >, ñ, ü, etc), you must use character entities.
 You can specify these with either the name code or the
number code (not all special symbols have names). E.g.,
This has © Copyright © today
results in
This has © Copyright © today

 One of the more helpful character entities is that for
a non-breakable space ( )
Hello     there
results in
Hello there
 However you should never need to use non-breakable spaces to achieve this
type of look (we will use CSS instead)

XHTML Differences
12

 XHTML is case sensitive and thus tags must be
lowercase
 XHTML requires attributes to be quoted
 XHTML requires all tags to be closed

HTML Editing
13

 HTML documents are simple ASCII text files
 as such, you can use Notepad, Word, or any other
program that can write ASCII text files.
 There are specific HTML-creation tools. They fall
p y
under two general categories:
 WYSIWYG (What You See Is What You Get) authoring
tools
 HTML Editors

WYSIWYG Authoring Tools
14

 Tools with graphical interfaces that make writing
f
HTML more akin to working with a word processor.
 Instead of typing tags, you can select commands from
pull down menus, and click and drag items.
 Th
These programs t t shield th user f
try to hi ld the from th t
the tags
 Theoretically, the user doesn’t need to know HTML

 Examples
E l
 Microsoft
FrontPage and Microsoft Visual Studio
 Adobe Dreamweaver
 Adobe GoLive

Macromedia Dreamweaver
di
16

WYSIWYG Authoring Tools
17

 Advantages
Ad t
 good for beginners
 good for quick prototyping
 can save bother of writing
 Disadvantages
 often generate bad HTML or browser-specific HTML (e.g.,
FrontPage)
 often will automatically change an HTML document when opened,
y g p ,
removing tags it doesn’t like or support (e.g., FrontPage)
 never true WYSIWYG
 that is, the result often looks different in browser than in WYSIWYG
is
program, and unless you know HTML you cannot fix it.
 However, with better browser support of standardized XHTML,
WYSIWYG tools are getting better and better
g g

WYSIWYG Problems

As displayed in Dreamweaver As displayed in FrontPage

Viewed in Netscape 4
18 Viewed in Internet Explorer 4

HTML Editors
19

 Programs that facilitate the process of
entering/typing HTML
 user still needs to know HTML
 Examples
 Notepad

 HomeSite

 BBEdit

Macromedia HomeSite
di i
21

Structure of HTML
22

 The two basic parts of a web page are:
 The head
 The body

HTML Skeleton
23

<html> <html> defines the beginning of the HTML
document
<head>
h d
<head> defines the beginning document
<title>My Mom</title> header, which contains information about
the document
</head>
<title> is displayed in browser title bar
<body> and used for bookmarks
Contents here <body> contains the content to be
displayed in browser window
</body>
</html>

html element
24

 Should contain namespace and language
declaration.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 Note: the xmlns attribute is required in XHTML but is
invalid in HTML
HTML.

DOCTYPE Declaration
25

 XHTML requires that an HTML document needs a
DOCTYPE declaration as the first element.
 Itspecifies which document type definition (DTD) you
are following.
 Current browsers can use this information to help
determine which rules it should use to display the
markup (i.e., should it use strict XHTML rules, no XHTML,
or both).

See page(s): 107

DOCTYPE Declaration
26

 Possible DOCTYPEs:
P ibl DOCTYPE
 XHTML 1.1
 Only supported by FireFox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 1//EN"
-//W3C//DTD 1.1//EN
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 XHTML 1.0 strict
 Supported by Firefox and IE 7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 XHTML transitional
 Supported by FireFox, IE6 and later
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 None / Q i k mode
N Quirks d
 No use of standards
 Default if no valid DOCTYPE present

The <head>
Th <h d>
27

 The head
Th h d section provides information
i id i f i
about the document.
 The following elements can be within the
head
<meta> Provides additional information about the document
<title> Displayed by browser in title bar. Required
for HTML 3.2 compatibility.
<script> Contains Javascript code
<style> Contains style sheet information
<link> For linking to an external style sheet file

<b d > El t
<body> Element
31

 Contains the contents of the d
C h f h document
 Can contain the following attributes, which allow
you to specify global settings (i.e., for entire
(i e
document) for background image and color as
well as text colors:
 background=url Specifies a background picture, where url is
the name (and path) of the picture file. The
picture is tiled and set behind all images and text
 bgcolor=color Specifies background color of page
 text=color Sets the color of normal text
 link=color Sets the color of hypertext links
 vlink=color Sets the color of visited hypertext links
yp

 For XHTML strict, do not use these attributes.

Body Margins
32

 By default, browsers have a margin of 10 to 12
pixels.
 The margin varies depending upon the browser and
platform.

Internet Explorer 5 Netscape 4

Body Settings
33

 To set colors images, and margins, and
colors, images margins
other stylistic settings, you should use CSS.
 e.g.,
<style>
body {
background-color : #
b k d l #FFFFFF;
background-image: url(images/Pattern1.gif);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #000088;
margin: 0px;
}
</style>

Color
C l
34

 Color can be specified in three ways
 "#rrggbb"
 "#rgb"
 "color name"
 rrggbb is a hexadecimal RGB (red-green-blue)
p
triplet
FFFFFF=white 000000=black FF0000=red
00FF00=green FFFF00=yellow OOFFFF=cyan

 rgb is converted to rrggbb by replicating digits.
# 6C
#F6C == # 66CC
#FF66CC

 HTML 4.0 supports 16 color names
 Browsers supports 140 color names

Semantic markup
35

 To benefit from XHTML, you need to think about your
T b fit f XHTML d t thi k b t
markup in semantic (meaning) rather than visual
terms.
 XHTML markup is not about presentation; it's about
document structure and content (meaning).
 That is, we should use XHTML as HTML was originally
intended.
 We should structure our document into headings, lists
headings lists,
paragraphs.
 We should use HTML elements because of what they mean,
not because of the way they "look."
tb f th th "l k "
 We can change the way elements look via CSS.

Structuring Text
36

 There are a number of ways of structuring blocks of
text.
 breaking text into paragraphs and lines
 using headings to create sections
g g
 grouping info into lists

Paragraph and Line Breaks
37

 You can't use carriage returns to create new
'
paragraphs or to break lines
 The <br/> tag creates line breaks
 multiple <br/> tags okay, but discouraged
 The <p> tag creates paragraph breaks
 multiple <p> tags ignored
 <p> isa container and thus needs a </p>
 The <div> tag also creates paragraph breaks, but
<div>
should be used to indicate a section (which might
contain multiple <p> tags.
p p g

<html><head><title>line and Paragraph Breaks</title></head>
<body bgcolor="white">
HyperText Markup

Language, a markup <br/> language defined by an SGML Document Type Definition
(DTD).To a document writer,<p>
HTML is simply a collection of tags used to mark blocks of
text and assign them <p align="right">special meanings.
g p g g p g
</body></html>

38

Styling the <p> and <div>
39

 Do not use align attribute of <p> or <div>.
 Do not use <p> tags just to create space.
p g j p
 Use it to indicate a logical paragraph.
 Use the <div> tag to indicate a section of paragraphs
<div> paragraphs.
 Instead, you can use CSS to style or position the
text.
t t

CSS <p> and <div>
40
<div id="preamble">
id preamble >
<p class="p1">
Littering a dark and dreary road lay the past relics of browser-specific tags,
incompatible DOMs, and broken CSS support.
</p>
<p class="p2">
Today, we must clear the mind of past practices. Web enlightenment h
d l h i d f i b li h has b
been achieved thanks to the
hi d h k h
tireless efforts of folk like the W3C, WaSP and the major browser creators.
</p>
</div>

Headings <h1>, <h2>, etc
41

 There are six levels of heading
 Level 1 is the largest and level 6 the smallest
g
 Most browsers allow user to alter relative size
 We
W can use CSS to determine the precise
t d t i th i
appearance
 Examples
<h1>This is a big heading</h1>
<h3>smaller heading</h3>

Old School Headings
42

<html><head><title>Headings</title></head>
<body bgcolor="white">
<h1>HTML Defined</h1>
HyperText Markup Language, a markup language defined by an
SGML Document Type Definition (DTD) To a document writer HTML is simply a collection
(DTD). writer,
of tags used to mark blocks of text and assign them special meanings.
<h3 align=center>HTML Introduction</h3>
Here is some more text
</body>
</html>

CSS School Headings
43

<h2>The Beauty of CSS Design</h2>

Lists
44

 There are three types of lists
 Unordered, or bulleted lists
 Ordered, or numbered lists

 Definition lists

Unordered Lists < l>
U d d Li t <ul>
45
<ul>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ul>
/

Ordered Lists < l>
O d d Li t <ol>
46
<ol>
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ol>
/

Definition Lists <dl>
47
<dl>
<dt>happy</dt>
<dd>feeling or expressing joy</dd>
<dt>sad</dt>
<dd>Expressive of sorrow or unhappiness</dd>
/
</dl>

Formatting Characters
49

 These tags change the emphasis and appearance
of characters within blocks of text.
 These tags also referred to as inline type styles as the
tags appear within lines of text.
 Two categories
 logicaltags
 physical tags

Logical Style Tags
L i l St l T
50

 Describes the text's meaning, context,
D ib h ' i
or usage; it does not describe how it is
to b displayed (the browser
be d l d(h b
determines that).
 Examples:
<em> Characters are to be emphasized (often italic)
<strong> Emphasized more (often bold)
<code> Characters are code sample (often courier)
<acronym> Defines an acronym (e.g., ASP)
<span> Used to group inline elements

Physical Style Tags
51

 Indicates exactly the way the text is to be
formatted
 XHTML
 Some of these (<font>, <u>, <s>) are prohibited
 Even if not prohibited, use of these is discouraged in
XHTML
 Use logical style instead

 Examples
p
<B> Bold <U> Underline
<I> Italic <S> Strikethrough
<TT> Monospaced
M d
<FONT> Font

Linking
52

 Your web site should be a collection of several
separate pages connected together via hypertext
links
 Hyperlink is created via anchor tag <a> and the
yp g
document's unique address known as a URL (Uniform
Resource Locator).
 Links can be to created to:
j
jump t an external site
to t l it
 jump to another page in the current site

 jump to another part of the current page

Linking
53

 A link has three parts:
a destination
 a label

 a target
g

Linking
54

 The destination is the most important part. It
specifies what page will be loaded when user clicks.
 The label specifies the text of the hyperlink.
 The target is optional It determines where the
optional.
destination will be displayed.
 The target might be a new window, a different frame
window frame,
or, most common, the current window.

The Anchor Tag <a>
55

Label
L b l

<a href="http://www.mtroyal.ab.ca">Click here</a>
Destination

<a href="www.mtroyal.ab.ca" target="_blank">Click here</a>

Target (this would display page in new window)

<a name="top">

Defines l
D fi location for internal link
ti f i t l li k

<a href="#top">Click here to go to top of page</a>

Destination is internal link (i.e., within current page)

Absolute URLs
56

 Absolute URL
 used to specify exactly where a file is located.
 used for linking to an external site.
 Three parts:
 protocol (e.g., HTTP://, FTP:// )
 host/server name (e.g., www.microsoft.com)
 path name, if necessary (e.g., / ff /
f /office/word )
 file name (e.g., index.htm, exam.cgi, menu.jpg)
 Example:
http://www.microsoft.com/office/word/index.htm

Absolute URLs
57

 File-based b l
Fil b d absolute references should not b
f h ld t be
used for referencing files within your own site. For
example:
l
C:/My Documents/comp1274/assign2/product.htm

Why?
 when y
you move y your site to y
your web server, y
, your
links (and image references) will not work (since it is
quite likely that your files will not be on the same
drive and directory on the server).
 You should almost always use relative references
for referencing files within your own site!!

Relative References
58

 A reference to another document relative to the
location of the document that contains the reference.

Some Folder

href=products.html

index.html products.html

Root Reference
59

 Another thing to be aware of is that a reference
that begins with the slash is a root reference.
 A root reference is an absolute references.

Root Reference
60

 A root reference has a different meaning on the
web server than it does on your local machine.
 e.g.,/images/logo.gif
 On a local machine without a web server, the root
,
reference (e.g., “/”) refers to the root of the physical
drive.
 Thus the above example references a file in the folder
images which is in the root of the drive.
 i.e., it will reference c:/images/logo.gif

61

Root Reference
 e.g., /images/logo.gif
 On the web server, this references a file in the folder
images which is in the root of the site.
g
 Remember that a web server can host multiple sites.
 Each site is contained within its own “virtual” folder that is
independent of each site’s actual physical location.
p p y www.abc.com

 So, on a web server the root reference (e.g., “/”)
refers to the root of the site’s virtual folder, not the root
of the physical drive. www.xyz.com

62

Referencing Syntax
 The synatx used is based on the UNIX
y
operating system (but similar to DOS)
 Slash separates folder from file name
p
products/sales.htm
/
 Slash separates folder from folder name
web/products/sales.htm
 A slash in front of first folder name means
root directory
/file.htm
/My Documents/file.htm
Documents/file htm
 Use forward slash (/) not backslash ()
 Use .. to move up a folder
../My Documents/file.htm

<img src=????>
img src ????
Q: in sales.htm, how would we reference pants.htm ?
A)
) p
pants.htm
B) products
C) C:/My Documents/web/products/pants.htm
D) /products/pants.htm
E) products/pants.htm
63

<img src=????>
img src ????
Q: in pants.htm, how would we reference sales.htm ?
A)
) sales.htm
B) web/sales.htm
C) C:/My Documents/web/sales.htm
D) /products/sales.htm
E) ../sales.htm
64

<img src=????>
img src ????

Q1: in pants.htm, how would we reference hats.htm ?

Q2: in sales.htm, how would we reference index.htm ?

65

Q: in fred.htm, how would we reference pants.htm ?
A) pants htm
pants.htm
B) ../products/pants.htm
C) /products/pants.htm
D) products/pants.htm
E) ../pants.htm
66

URLs
URL
67

 Have the following syntax:
protocol://server domain name/path/filename

 For
F example:
l
http://www.this_server.com/docs/index.html
http://www.mtroyal.ab.ca/
ftp://ftp.shareware.com/pub/file.zip
absolute references
mailto://bgates@microsoft.com

courses/1235.html Another page in the current site

#bottom Defined location in current page relative references

Defined location in another
1235.html#bottom page in current site

Anchor Tag, continued
68

 Usual attributes:
href="url" Defines destination.

name="name"
name "name" Defines target for i
D fi f internal h
l hypertext li k
link.

target="window" Link should be loaded into window or frame.

Not supported in XHTML Strict.
window can have the following values:
_blank
bl k loads d
l d document i new b w window
t in w browser wi d w
_parent loads into parent of current document
_self loads into current window
_top loads into main browser window
frame name loads into named frameset (if doesn't exist then
loads i t
l d into new window)
i d )

Hyperlink Example
69
Here is some text<br/>
/
Click <a href="index.html">right here</a> will open the index
page we created earlier<br/>
Click <a href="#bottom">here</a> will take us to bottom of this
p g
page<br/>
/
blah, blah blah ...
...
...
<a id="bottom">This is the bottom</a>
/

Images
70

 Two general classes of images
 inline images
 appear on a web page along with text and links and are
automatically displayed by browser when page is loaded
 external images
 stored
separately from web page and are loaded only on
demand (usually as a result of a link).
 Images are graphical picture files that are
downloaded and displayed by browser.
 Image files must be GIF or JPG or PNG format.
g

How Graphics Can Be Used
71

 As a simple graphic
 As a link
 As an imagemap
a simple graphic in which multiple hotspots/links have
been defined
 As
A spacing d i
i devices
 many designers use a single transparent pixel that can
be i d
b resized to create white space
hi

<img> Tag
<i > T
72

 Graphics displayed by the <img> tag. For
example:
<img src="image.gif" />

 Accepted attributes:
src="filename" specifies path or filename of file
alt="description" text to be displayed in place of image
width="n" width of image in pixels
g p
height="n" height of image in pixels
longdesc="url" A URL to a document that contains a long description of the image
usemap="url" indicates image is client-side imagemap
Title=“description”

Graphics as Links
73

 To make a graphic a link place anchor
link,
tags around the IMG tag. For example:
<a href="mtequip htm"><img src="pack gif“ /></a>
href mtequip.htm ><img src pack.gif

 When an image is a link, it will have a
border around it to indicate it has a link
link.
 Mostdesigners prefer not to have this
border
 We can use CSS to remove it

default

Alternative Text
74

 The alt attribute allows you to specify a string of
alternative text to be displayed in place of an
image.
 displayed while image is downloaded
 displayed if graphic display is turned off

 Very important for accessibility reasons (i.e., for
visually-impaired using Voice Reader software
 some browsers display alt attribute as pop-up tip
pop up
when mouse positioned over image

Alternative Text
75

<img src="pack.gif“ />

<img src="pack.gif" alt="Really Blue Pack" />

Really Blue Pack

Image Width and Height
76

 width and height indicate the dimension of image.
 While optional, the use of these attributes is
p ,
recommended because:
 they allow browser to lay out page even before images
are downloaded
 You can use these attributes to resize an image
 however,it is generally better to resize image in an
image editor because:
 image editors often have better quality interpolation
methods for resizing (i.e., it better quality resize)
 often faster download (see next slide)

Original image
Width: 511
dh
Height: 205
File Size: 102K

image resized in browser image resized in image editor
Width: 511 Width: 200
Height: 205 Height: 133
File Size: 102K downloaded File Size: 26K downloaded
<img src="ski.gif" width=200 height=133> <img src="ski2.gif" width=200 height=133>

77

Original image
Width: 100
Height: 249

Image resized in
esi ed Image resized in
esi ed
image editor browser
Width: 200 Width: 200
Height: 498 Height: 498

78

Q: in products.htm, how would we display menu.gif
products htm menu gif

<img src=????>

<img src=menu.gif>
<img src=c:/westgear/images/menu.gif>
<img src=/westgear/images/menu.gif>
<img src=westgear/images/menu.gif>
<img src=images/menu.gif>

79

Q: in products.htm, how would we display menu.gif
products htm menu gif
<img src=????>

<img src=images/menu.gif>
<i i / if>
<img src=c:/westgear/menu.gif>
<img src=/westgear/menu gif>
src=/westgear/menu.gif>
<img src=westgear/menu.gif>
<img src=c:menu.gif>
g g

<img src=menu.gif>

80

Two Types of Image Map
81

 An image map is a graphic image in which multiple
links have been defined.
 Two Types:
 Server-Side
Server Side Image Maps
 Implemented using an image displayed by the client and a
program that runs on the server. Not really used anymore.
 Client-Side Image Maps
 Works the same as above except there is no program run on
p p g
the server. All processing of coordinates occurs in the
browser.

Image Map
82

menu.gif

index.htm browse.htm search.htm about.htm

Creating a client-side IM
client side
83

 The first thing you need is the image onto which you
want to map the link. This can be any GIF or JPEG
image.
i
 The second step is to use map tags to define the image
map. Y do this within your HTML fil
You d hi i hi file.
 The final step is add a attribute to the image tag, to
tell the b
ll h browser to use the image as an image map
h
instead of a normal image

<map> Tag
84

 <map> starts a map definition.
 Ithas one attribute, name. The name you are giving this
map definition must be surrounded by quotation marks.
For example:
<map name="mainmap">
 In between comes one or more <area> tags.
 </map> ends the map definition.

<area> Tag
85

 <area> defines each clickable area on the image
and its link. You may have many area tags within a
map definition. It has 3 attributes:
 shape="rect/circle/poly/point" defines the
shape of the linked area.
 coords="X,Y,X,Y" are the coordinates of the linked
area.
 For a rectangle you set the upper left and lower right x,y
coordinates. For a circle you set the center-point and a point
y p p
on the circumference, on a polygon you specify every angle.
 href="link" sets the link for the specified area by
identifying h linked URL. Th
id if i the li k d URL The URL can be either a full or a
b ih f ll
relative URL.

Using the Image Map
86

 The final step in using an image map is inserting the
image into your file and naming the image map
definition. This is quite straightforward and involves
simply adding a new image attribute called
"usemap."
 Example:

<img src="mainmap jpg" width=46 height=26 usemap="#mainmap" />
src= mainmap.jpg usemap= #mainmap

Example Map Definition
87

<img src="menu.gif" width="369" height="31" usemap="#linkbar" />

<map name="linkbar">
<area shape="rect" coords=" 11,5, 73,29" href="products.htm"></area>
<area shape="rect" coords=" 75,5,137,29" href="stories.htm"></area>
<area shape="rect" coords="140,5,198,29" href="orders.htm"></area>
<area shape="rect" coords="200,5,288,29" href="community.htm"></area>
<area shape="rect" coords="289,5,366,29" href="contact.htm"></area>
</map>

As displayed in browser
p y

With hot spots indicated

Drawbacks to ImageMaps
88

 Imagemaps are almost unusable until most of image
is downloaded.
Image map menu What it looks like while
downloading (or if images
turned off)

Alternatives to Image Maps
89

 Split image into smaller images, and reassemble
using tables (our next topic) or CSS.
 Create image links as per slides. E.g.,
<a href="browse.htm"><img src="menur2c4.gif" alt="browse“/></a>
< h f "b ht "><i " 2 4 if" lt "b “/></ >

Split i
S lit image with table
ith t bl
borders displayed

Split image with table
borders turned
bo de s t ned off

Accessibility and XHTML
90

 Accessibility refers to the process of making web
pages usable (accessible) to users with visual
disabilities.
 These users use screen reader software such as JAWS.
 A web page whose markup is cleanly focused on
content and which contains no formatting is significantly
g g y
easier to comprehend for the blind.
 US and Canadian governments require accessible sites.
g q

Who is the Most Important Blind User?
91

 Search Engines!!!

Accessibility and XHTML
92

http://www.youtube.com/watch?v=VGeppPO5lQ0

http://www.youtube.com/watch?v=tNFPHLiO-os
http://www youtube com/watch?v tNFPHLiO os

http://www.youtube.com/watch?v=d5oZf9ULAyw
p y y

http://www.youtube.com/watch?v=0ftQIQ91Ff4

HTML5
93

 The next version of HTML
 Notice that it is NOT XHTML
 In 2009, W3C stopped work on XHTML 2.0, and
switched focus to HTML5.
 Somecontroversy: perception that with HTML5 the browser
manufacturers have taken back control of the web.

Browser Support
94

 Still uneven
 Main problem, no HTML5 support in IE8 and below

HTML5
95

 Design principles:
 Don’t break existing web pages
 Error handling

 Adding markup to simplify web page structure
g p p y p g

Minimal Structure
96

<! DOCTYPE html>
! OC ht l
<title>something</title>
<h1>heading</h1>
<p>some text blah</p>
<p>some te t blah</p>

Yes, no head or body tags needed!

Typical HTML Layout Structure
97

<div id=“header”>
di id “h d ”
<div id=“menu”>

</div>
</div>
<div id=“sidebar”>

</div>
</di >
<div id=“content”>

</div>

New Tags
98

 New tags have been added to make the markup
more semantic (more meaningful).
 Thatis, the usual <div id="something"> hodgepodge
has been partially replaced with common markup
elements.

Structural Elements
100

<! DOCTYPE html>
<title>HTML 5 Test</title>
<header>
<h1>This is the Main Heading</h1>
</header>
/h d
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
</ul>
</nav>
<article>
<h2>Page Title</h2>
<h2>Page Title</h2>
<p>blah blah blah</p>
</article>
<footer>
Copyright 2012
</footer>
/f t

Web I - 02 - XHTML Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Web I - 02 - XHTML Introduction

Similar to Web I - 02 - XHTML Introduction (20)

More from Randy Connolly

More from Randy Connolly (20)

Recently uploaded

Recently uploaded (20)

Web I - 02 - XHTML Introduction