Web I - 02 - XHTML Introduction

EASING INTO WEB DEVELOPMENTDEVELOPMENT2 HTML2. HTML

INTRODUCTION1HTML2

3 TABLES3FORMS4 FORMS4HTTP5 HTTP5CSS6 CSS6CSS FRAMEWORKS7DIGITAL MEDIA8

2 USABILITY9

HTML StandardHTML Standard3

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 development of HTML. Tags added or supported by their browsers

influence/control the HTML standardinfluence/control the HTML standard.

HTML StandardHTML Standard4

F d 2002/3 th h b t b k t h i From around 2002/3, there has been movement back to having W3C control the standard for HTML

W3C standards: HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 1.0 XHTML 1.1 XHTML 2.0N i f b h i f ll h Now, most recent versions of browsers are having to follow the standards FireFox supports XHTML 1.1 IE 6 (almost) supports XHTML 1.0 IE 7 (almost) supports XHTML 1.1

XHTMLXHTML5

XHTML (Extensible HTML) as a standard came about due to browser inconsistencies. Few differences 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 DefinedTags Defined6

HTML d fi l t hi h i di t d b t HTML defines elements which are indicated by tags. The basic HTML tag has four parts:

An opening delimeter, the < symbolp g , y The Tag name Optional list of attributes that modify the way that tag works. A closing delimeter the > symbol A closing delimeter, the > symbol

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

ContainersContainers7

M t HTML t t i i th b i i t t b Most HTML tags are containers, meaning the beginning tags must be matched by a closing tag.

The end tag will have same name as start tag but preceded with a l h (/)slash (/).

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 XHTML standard requires all tags to be 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 TagsNested Tags8

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

will result inihello emphasized there

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)

AttributesAttributes9

Att ib t t d dif th t t Attributes extend or modify the way a tag operates. Most (but not all) tags accept several attributes.

order of attributes is unimportantp 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 IgnoreInformation Browsers Ignore10

line breaksHello there

Hello theredisplays as

tabs and multiple spacesHello there Hello there

multiple <P> tagsHello<P><P><P><P><P>There

Hello

there

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

there

Hello there

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

Character EntitiesCharacter Entities11

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

This has © Copyright © todayresults in

One of the more helpful character entities is that for a non-breakable space ( )

Hello there

Hello there results in

However you should never need to use non-breakable spaces to achieve this type of look (we will use CSS instead)

XHTML Differences 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 XHTML requires all tags to be closed

HTML EditingHTML Editing13

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 yunder two general categories: WYSIWYG (What You See Is What You Get) authoring WYSIWYG (What You See Is What You Get) authoring

tools HTML Editors HTML Editors

WYSIWYG Authoring ToolsWYSIWYG Authoring Tools14

f Tools with graphical interfaces that make writing 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 t t hi ld th f th t These programs try to shield the user from the tags Theoretically, the user doesn’t need to know HTMLE l Examples Microsoft FrontPage and Microsoft Visual Studio Adobe Dreamweaver Adobe GoLive

15 Microsoft Visual Studio

di16

Macromedia Dreamweaver

WYSIWYG Authoring ToolsWYSIWYG Authoring Tools17

Ad t Advantages good for beginners good for quick prototyping 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 that is, the result often looks different in browser than in WYSIWYG

program, and unless you know HTML you cannot fix it. However, with better browser support of standardized XHTML,

WYSIWYG tools are getting better and betterg g

WYSIWYG ProblemsWYSIWYG Problems

As displayed in FrontPageAs displayed in Dreamweaver

18 Viewed in Internet Explorer 4 Viewed in Netscape 4

HTML EditorsHTML Editors19

Programs that facilitate the process of entering/typing HTML user still needs to know HTML

Examples Examples Notepad HomeSite HomeSite BBEdit

Microsoft Notepad

20

di i21

Macromedia HomeSite

Structure of HTMLStructure of HTML22

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

HTML SkeletonHTML Skeleton23

<html> defines the beginning of the HTML document

<html>

h d <head> defines the beginning document header, which contains information about the document

<head>

<title>My Mom</title>the document<title> is displayed in browser title bar and used for bookmarks

</head>

<body>

<body> contains the content to be displayed in browser window

Contents here

</body>

</html>

html elementhtml element24

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 HTMLinvalid in HTML.

DOCTYPE DeclarationDOCTYPE Declaration25

XHTML requires that an HTML document needs a DOCTYPE declaration as the first element. It specifies 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 DeclarationDOCTYPE Declaration26

P ibl DOCTYPE Possible DOCTYPEs: XHTML 1.1

Only supported by FireFox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 1//EN"

XHTML 1.0 strict Supported by Firefox and IE 7

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Supported by FireFox, IE6 and later

N / Q i k d

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

None / Quirks mode No use of standards Default if no valid DOCTYPE present

Th <h d>The <head>27

Th h d i id i f i The head section provides information 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. Requiredfor 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> Element31

C h f h d Contains the contents of the document Can contain the following attributes, which allow

you to specify global settings (i e for entire you to specify global settings (i.e., for entire document) for background image and color as well as text colors:

background=url Specifies a background picture, where url isthe name (and path) of the picture file. Thepicture 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 linksyp

For XHTML strict, do not use these attributes.

Body MarginsBody Margins32

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

platform.

Netscape 4Internet Explorer 5 Netscape 4Internet Explorer 5

Body SettingsBody Settings33

To set colors images and margins and To set colors, images, and margins, and other stylistic settings, you should use CSS.

e.g.,<style>

body { b k d l #background-color : #FFFFFF; background-image: url(images/Pattern1.gif); font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; color : #000088; margin: 0px;

} </style>

C lColor34

Color can be specified in three ways "#rrggbb" "#rgb" "color name"

rrggbb is a hexadecimal RGB (red-green-blue) tripletpFFFFFF=white 000000=black FF0000=red00FF00=green FFFF00=yellow OOFFFF=cyan

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

HTML 4.0 supports 16 color names Browsers supports 140 color names

Semantic markupSemantic markup35

T b fit f XHTML d t thi k b t To benefit from XHTML, you need to think about your 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 We should structure our document into headings, lists,

paragraphs. We should use HTML elements because of what they mean,

t b f th th "l k " not because of the way they "look." We can change the way elements look via CSS.

Structuring TextStructuring Text36

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

Paragraph and Line BreaksParagraph and Line Breaks37

' 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> is a container and thus needs a </p> The <div> tag also creates paragraph breaks, but The <div> tag also creates paragraph breaks, but

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 oftext and assign them <p align="right">special meanings. g p g g p g</body></html>

38

Styling the <p> and <div>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 Use the <div> tag to indicate a section of paragraphs.

Instead, you can use CSS to style or position the t ttext.

CSS <p> and <div>CSS <p> and <div>40

<div id="preamble"><div 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">

d l h i d f i b li h h b hi d h k hToday, we must clear the mind of past practices. Web enlightenment has been achieved thanks to thetireless efforts of folk like the W3C, WaSP and the major browser creators.

</p></div>

Headings <h1>, <h2>, etcHeadings <h1>, <h2>, etc41

There are six levels of heading Level 1 is the largest and level 6 the smallestg Most browsers allow user to alter relative size W CSS t d t i th i We can use CSS to determine the precise

appearance Examples

<h1>This is a big heading</h1>

<h3>smaller heading</h3><h3>smaller heading</h3>

Old School HeadingsOld School Headings42

<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 collectionSGML Document Type Definition (DTD). To a document writer, HTML is simply a collection 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 HeadingsCSS School Headings43

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

ListsLists44

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

U d d Li t < l>Unordered Lists <ul>45

<ul><ul><li>This is the first item</li><li>This is the second item</li><li>This is the third item</li>

/</ul>

O d d Li t < l>Ordered Lists <ol>46

<ol><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>Definition Lists <dl>47

<dl><dl><dt>happy</dt><dd>feeling or expressing joy</dd><dt>sad</dt>

/<dd>Expressive of sorrow or unhappiness</dd></dl>

CSS ListsCSS Lists48

Formatting CharactersFormatting Characters49

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 logical tags logical tags physical tags

L i l St l TLogical Style Tags50

D ib h ' i Describes the text's meaning, context, or usage; it does not describe how it is

b d l d ( h bto be displayed (the browser determines that).

Examples:<em> Characters are to be emphasized (often italic)

<strong> Emphasized more (often bold)<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 TagsPhysical Style Tags51

Indicates exactly the way the text is to be Indicates exactly the way the text is to be formattedXHTML XHTML Some of these (<font>, <u>, <s>) are prohibited Even if not prohibited, use of these is discouraged in

XHTML Use logical style instead

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

LinkingLinking52

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 gdocument's unique address known as a URL (Uniform Resource Locator).Resource Locator).

Links can be to created to: j t t l it jump to an external site jump to another page in the current site jump to another part of the current page

LinkingLinking53

A link has three parts: a destination a label a targetg

LinkingLinking54

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 The target is optional. It determines where the

destination will be displayed. The target might be a new window a different frame The target might be a new window, a different frame,

or, most common, the current window.

The Anchor Tag <a>The Anchor Tag <a>55

L b l

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

Label

DestinationDestination

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

Target (this would display page in new window)Target (this would display page in new window)

<a name="top">

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

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

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

Absolute URLsAbsolute URLs56

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)

f / ff / path name, if necessary (e.g., /office/word ) file name (e.g., index.htm, exam.cgi, menu.jpg)

Example: Example:http://www.microsoft.com/office/word/index.htm

Absolute URLsAbsolute URLs57

Fil b d b l f h ld t b File-based absolute references should not be used for referencing files within your own site. For

lexample:C:/My Documents/comp1274/assign2/product.htm

Why? when you move your site to your web server, your y y y , y

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 ReferencesRelative References58

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 ReferenceRoot Reference59

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 ReferenceRoot Reference60

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

Root Reference61

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. www.abc.comp p y

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

Referencing Syntax62

Referencing Syntax The synatx used is based on the UNIX y

operating system (but similar to DOS)

Slash separates folder from file nameproducts/sales.htmp /

Slash separates folder from folder nameweb/products/sales.htm

A slash in front of first folder name means A slash in front of first folder name means root directory

/file.htm

/My Documents/file htm/My Documents/file.htm

Use forward slash (/) not backslash (\)

Use .. to move up a folder../My Documents/file.htm

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

A) pants.htm

Q: in sales.htm, how would we reference pants.htm ?

) pB) productsC) C:/My Documents/web/products/pants.htmD) /products/pants.htm

63E) products/pants.htm


A) sales.htm

Q: in pants.htm, how would we reference sales.htm ?

)B) web/sales.htmC) C:/My Documents/web/sales.htmD) /products/sales.htm

64E) ../sales.htm


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

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

65

A) pants htm

Q: in fred.htm, how would we reference pants.htm ?

A) pants.htmB) ../products/pants.htmC) /products/pants.htmD) products/pants.htm

66

D) products/pants.htmE) ../pants.htm

URLURLs67

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

F l For example:http://www.this_server.com/docs/index.html

http://www.mtroyal.ab.ca/absolute referencesftp://ftp.shareware.com/pub/file.zip

mailto://[email protected]

absolute references

courses/1235.html Another page in the current site

#bottom relative referencesDefined location in current page

Defined location in another1235.html#bottom

Defined location in another page in current site

Anchor Tag, continuedAnchor Tag, continued68

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

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

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

Not supported in XHTML Strict.

window can have the following values:

bl k l d d t i w b w wi d w_blank loads document in new browser window_parent loads into parent of current document_self loads into current window_top loads into main browser windowframe name loads into named frameset (if doesn't exist then

l d i t i d )loads into new window)

Hyperlink ExampleHyperlink Example69

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 page<br/>p g /blah, blah blah .........<a id="bottom">This is the bottom</a>/

ImagesImages70

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 UsedHow Graphics Can Be Used71

As a simple graphic As a link As an imagemap

a simple graphic in which multiple hotspots/links have a simple graphic in which multiple hotspots/links have been defined

A i d i As spacing devices many designers use a single transparent pixel that can

b i d hi be resized to create white space

<i > T<img> Tag72

Graphics displayed by the <img> tag. For example:

<img src="image.gif" />

Accepted attributes: 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 pixelsg 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 LinksGraphics as Links73

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

When an image is a link, it will have a border around it to indicate it has a linkborder around it to indicate it has a link. Most designers prefer not to have this

borderborder We can use CSS to remove it

default

Alternative TextAlternative Text74

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 Very important for accessibility reasons (i.e., for

visually-impaired using Voice Reader software some browsers display alt attribute as pop-up tip some browsers display alt attribute as pop up tip

when mouse positioned over image

Alternative TextAlternative Text75

<img src="pack.gif“ />

Really Blue Pack

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

Image Width and HeightImage Width and Height76

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 they allow browser to lay out page even before images

are downloaded

You can use these attributes to resize an image You can use these attributes to resize an image however, it is generally better to resize image in an

image editor because:image editor because: image editors often have better quality interpolation

methods for resizing (i.e., it better quality resize)methods for resizing (i.e., it better quality resize) often faster download (see next slide)

Original imaged hWidth: 511

Height: 205File Size: 102K

image resized in image editorWidth: 200Height: 133File Size: 26K downloaded

image resized in browserWidth: 511Height: 205File Size: 102K downloaded

77

File Size: 26K downloadedFile Size: 102K downloaded<img src="ski.gif" width=200 height=133> <img src="ski2.gif" width=200 height=133>

Original imageWidth: 100Width: 100Height: 249

Image esi ed in Image esi ed inImage resized in image editorWidth: 200Height: 498

Image resized in browserWidth: 200Height: 498

78

Q: in products htm how would we display menu gif

<img src=????>

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

<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

<img src=????>

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

<i i / if>

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

<img src=/westgear/menu gif>

<img src=images/menu.gif>

<img src=/westgear/menu.gif>

<img src=westgear/menu.gif>

<img src=c:menu.gif>

<img src=menu.gif>

g g

80

Two Types of Image MapTwo Types of Image Map81

An image map is a graphic image in which multiple links have been defined.

Two Types: Server-Side Image Maps 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 MapsWorks 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 MapImage Map82

menu.gif

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

Creating a client-side IMCreating a client side IM83

The first thing you need is the image onto which you want to map the link. This can be any GIF or JPEG i image.

The second step is to use map tags to define the image Y d hi i hi HTML fil map. You do this within your HTML file.

The final step is add a attribute to the image tag, to ll h b h tell the browser to use the image as an image map

instead of a normal image

<map> Tag<map> Tag84

<map> starts a map definition. It has 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<area> Tag85

<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 pon the circumference, on a polygon you specify every angle.

href="link" sets the link for the specified area by id if i h li k d URL Th URL b i h f ll identifying the linked URL. The URL can be either a full or a relative URL.

Using the Image MapUsing the Image Map86

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: Example:

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

Example Map DefinitionExample Map Definition87

<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 browserp y

With hot spots indicated

Drawbacks to ImageMapsDrawbacks to ImageMaps88

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 MapsAlternatives to Image Maps89

Split image into smaller images, and reassemble using tables (our next topic) or CSS. Create image links as per slides. E.g.,

< h f "b ht "><i " 2 4 if" lt "b “/></ >

S lit i ith t bl

<a href="browse.htm"><img src="menur2c4.gif" alt="browse“/></a>

Split image with table borders displayed

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

Accessibility and XHTMLAccessibility and XHTML90

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 yeasier to comprehend for the blind.

US and Canadian governments require accessible sites.g q

Who is the Most Important Blind User?Who is the Most Important Blind User?91

Search Engines!!!

Accessibility and XHTMLAccessibility and XHTML92

http://www youtube com/watch?v tNFPHLiO os

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

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

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

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

HTML5HTML593

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. Some controversy: perception that with HTML5 the browser

manufacturers have taken back control of the web.

Browser SupportBrowser Support94

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

HTML5HTML595

Design principles: Don’t break existing web pages Error handling Adding markup to simplify web page structureg p p y p g

Minimal StructureMinimal Structure

! OC ht l

96

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

Yes, no head or body tags needed!

Typical HTML Layout StructureTypical HTML Layout Structure97

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

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

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

</div>

New TagsNew Tags98

New tags have been added to make the markup more semantic (more meaningful). That is, the usual <div id="something"> hodgepodge

has been partially replaced with common markup elements.

Structural ElementsStructural Elements99


<! DOCTYPE html><title>HTML 5 Test</title><header>

<h1>This is the Main Heading</h1>/h d</header>

<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/f t</footer>

Old way of Audio/VideoOld way of Audio/Video104

Web I - 02 - XHTML Introduction

Technology

Transcript of Web I - 02 - XHTML Introduction