Web I 02 - XHTML Introduction

XHTML An Introduction

HTML Standard

Hypertext Markup Language

While initially developed by Tim Berners-Lee of CERN in 1990, the World Wide Web Consortium (W3C) now officially controls HTML standard.

In practice, Netscape, then Microsoft controlled the development of HTML.

Tags added or supported by their browsers influence/control the HTML standard.

HTML Standard

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.1

XHTML 2.0

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

XHTML

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 Defined

HTML defines elements which are indicated by tags .

The basic HTML tag has four parts:

An opening delimeter, the < symbol

The Tag name

Optional list of attributes that modify the way that tag works.

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

Containers

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 slash (/).

For example:

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.

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

Tags can be nested.

Hello <b><i>emphasized</i></b> there

will result in

hello emphasized there

The order is important. <b>This word is <i>emphasized</i> here </b>  <b>This word is <i>emphasized</b> here </i> ×

Correct (no overlapping lines) Incorrect (overlapping lines)

Attributes

Attributes extend or modify the way a tag operates.

Most (but not all) tags accept several attributes.

order of attributes is unimportant

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 (" " 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

line breaks He llo t here

tabs and multiple spaces Hello there

multiple <P> tags Hello<P><P><P><P><P>There

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

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

Hello there Hello there Hello there Hello there displays as

Character Entities

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 © today

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

Hello     there

Hello there

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

results in results in

XHTML Differences

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

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 under two general categories:

WYSIWYG (What You See Is What You Get) authoring tools

HTML Editors

WYSIWYG Authoring Tools

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.

These programs try to shield the user from the tags

Theoretically, the user doesn’t need to know HTML

Examples

Microsoft FrontPage and Microsoft Visual Studio

Adobe Dreamweaver

Adobe GoLive

Microsoft Visual Studio

Macromedia Dreamweaver

WYSIWYG Authoring Tools

Advantages

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, 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 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

Viewed in Internet Explorer 4 Viewed in Netscape 4 As displayed in FrontPage As displayed in Dreamweaver WYSIWYG Problems

HTML Editors

Programs that facilitate the process of entering/typing HTML

user still needs to know HTML

Examples

Notepad

HomeSite

BBEdit

Microsoft Notepad

Macromedia HomeSite

Structure of HTML

The two basic parts of a web page are:

The head

The body

HTML Skeleton

<html> defines the beginning of the HTML document

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

<title> is displayed in browser title bar and used for bookmarks

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

<html> <head> <title>My Mom</title> </head> <body> Contents here </body> </html>

html element

Should contain namespace and language declaration.

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

DOCTYPE Declaration

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 Declaration

Possible DOCTYPEs:

XHTML 1.1

Only supported by FireFox

XHTML 1.0 strict

Supported by Firefox and IE 7

XHTML transitional

Supported by FireFox, IE6 and later

None / Quirks mode

No use of standards

Default if no valid DOCTYPE present

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

The <head>

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. Required for HTML 3.2 compatibility.

<script> Contains Javascript code

<style> Contains style sheet information

<link> For linking to an external style sheet file

<meta> Element

Meta tags were intended to provide additional semantic meaning (meta-information) to web pages.

Early search engines used them, but due to abuses, most search engines now heavily discount them.

Two styles:

<meta http-equiv="name" content="content"> <meta name="name" content="content">

e.g.

<meta name="description" content="randy’s home page">

<meta name="keywords" content="first, second, third">

<meta name="expires" content="01 jun 2007">

<meta name="robots" content="index,nofollow">

<script> Element

Used to contain a client-side script

Usually Javascript, but could also be VBScript (IE only)

Often contained with the <head> but valid anywhere.

E.g.

<script type="text/javascript"> document.write("Hello World!"); </script>

Both contained within <head>

<style>

Used to define a CSS style(s) in a document.

<style type="text/css" >

h1 { font-weight: bold; font-size: 18pt; }

</style>

<link>

Generally used to define a link to an external stylesheet.

<link rel="stylesheet" type="text/css" href="theme.css" />

<body> Element

Contains the contents of the document

Can contain the following attributes, which allow 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 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

For XHTML strict, do not use these attributes.

Body Margins

By default, browsers have a margin of 10 to 12 pixels.

The margin varies depending upon the browser and platform.

Netscape 4 Internet Explorer 5

Body Settings

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

e.g.,

<style>

body {

background-color : #FFFFFF;

background-image: url(images/Pattern1.gif);

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

color : #000088;

margin: 0px;

}

</style>

Color

Color can be specified in two ways

"#rrggbb"

"#rgb"

"color name"

rrggbb is a hexadecimal RGB (red-green-blue) triplet FFFFFF=white 000000=black FF0000=red 00FF00=green FFFF00=yellow OOFFFF=cyan

rgb is converted to rrggbb by replicating digits.

#F6C == #FF66CC

HTML 4.0 supports 16 color names

Browsers supports 140 color names

Semantic markup

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, paragraphs.

We should use HTML elements because of what they mean, not because of the way they "look."

We can change the way elements look via CSS.

Structuring Text

There are a number of ways of structuring blocks of text.

breaking text into paragraphs and lines

using headings to create sections

grouping info into lists

Paragraph and Line Breaks

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 should be used to indicate a section (which might contain multiple <p> tags.

<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. </body></html>

Styling the <p> and <div>

Do not use align attribute of <p> or <div>.

Do not use <p> tags just to create space.

Use it to indicate a logical paragraph.

Use the <div> tag to indicate a section of paragraphs.

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

CSS <p> and <div> <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"> Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators. </p> </div>

Headings <h1>, <h2>, etc

There are six levels of heading

Level 1 is the largest and level 6 the smallest

Most browsers allow user to alter relative size

We can use CSS to determine the precise appearance

Examples

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

<h3>smaller heading</h3>

Old School Headings <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 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 <h2>The Beauty of CSS Design</h2>

Lists

There are three types of lists

Unordered, or bulleted lists

Ordered, or numbered lists

Definition lists

Unordered Lists <ul> <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 <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> <dl> <dt> happy </dt> <dd> feeling or expressing joy </dd> <dt> sad </dt> <dd> Expressive of sorrow or unhappiness </dd> </dl>

CSS Lists

Formatting Characters

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

physical tags

Logical Style Tags

Describes the text's meaning, context, or usage; it does not describe how it is to be displayed (the browser 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

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

<B> Bold <U> Underline

<I> Italic <S> Strikethrough

<TT> Monospaced

<FONT> Font

Linking

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

Links can be to created to:

jump to an external site

jump to another page in the current site

jump to another part of the current page

Linking

A link has three parts:

a destination

a label

a target

Linking

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 destination will be displayed.

The target might be a new window, a different frame, or, most common, the current window.

The Anchor Tag <a> <a href="http://www.mtroyal.ab.ca">Click here</a> Label Destination <a href="www.mtroyal.ab.ca" target="_blank">Click here</a> Target (this would display page in new window) <a name="top"> Defines 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 URLs

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., /office/word )

file name (e.g., index.htm, exam.cgi, menu.jpg)

Example:

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

Absolute URLs

File-based absolute references should not be used for referencing files within your own site. For example:

C:/My Documents/comp1274/assign2/product.htm Why?

when you move your site to your web server, 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

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

index.html href=products.html products.html Some Folder

Root Reference

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

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 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 .

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.

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.abc.com www.xyz.com

Referencing Syntax

The synatx used is based on the UNIX operating system (but similar to DOS)

Slash separates folder from file name

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

Use forward slash (/) not backslash ()

Use .. to move up a folder

../My Documents/file.htm

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

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

<img src=????> Q1: in pants.htm , how would we reference hats.htm ? Q2: in sales.htm , how would we reference index.htm ?

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

URLs

Have the following syntax:

protocol://server domain name/path/filename

For example:

http://www.this_server.com/docs/index.html

http://www.mtroyal.ab.ca/

ftp://ftp.shareware.com/pub/file.zip

mailto://bgates@microsoft.com

courses/1235.html

#bottom

1235.html#bottom

relative references absolute references Another page in the current site Defined location in current page Defined location in another page in current site

Anchor Tag, continued

Usual attributes:

href="url" Defines destination.

name="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:

_blank loads document in new browser window

_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 into new window)

Hyperlink Example 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/> blah, blah blah ... ... ... <a id="bottom"> This is the bottom </a>

Images

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.

How Graphics Can Be Used

As a simple graphic

As a link

As an imagemap

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

As spacing devices

many designers use a single transparent pixel that can be resized to create white space

<img> Tag

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

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

Graphics as Links

To make a graphic a link, place anchor tags around the IMG tag. For example:

<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 link.

Most designers prefer not to have this border

We can use CSS to remove it

default

Alternative Text

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 when mouse positioned over image

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

Image Width and Height

width and height indicate the dimension of image.

While optional, the use of these attributes is 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 Height: 205 File Size: 102K image resized in image editor Width: 200 Height: 133 File Size: 26K downloaded image resized in browser Width: 511 Height: 205 File Size: 102K downloaded <img src="ski.gif" width=200 height=133> <img src="ski2.gif" width=200 height=133>

Original image Width: 100 Height: 249 Image resized in image editor Width: 200 Height: 498 Image resized in browser Width: 200 Height: 498

<img src=????> <img src=menu.gif> Q: in products.htm, how would we display 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>

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

Two Types of Image Map

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

Two Types:

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 the server. All processing of coordinates occurs in the browser.

Image Map menu.gif index.htm browse.htm search.htm about.htm

Creating a client-side IM

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

The second step is to use map tags to define the image map. You do this within your HTML file.

The final step is add a attribute to the image tag, to tell the browser to use the image as an image map instead of a normal image

<map> Tag

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

href="link" sets the link for the specified area by identifying the linked URL. The URL can be either a full or a relative URL.

Using the Image Map

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" />

Example Map Definition <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 With hot spots indicated

Drawbacks to ImageMaps

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

Split image into smaller images, and reassemble using tables (our next topic) or CSS.

Create image links as per slides. E.g.,

Split image with table borders displayed Split image with table borders turned off <a href="browse.htm"><img src="menur2c4.gif" alt="browse“/></a>

Accessibility and XHTML

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

US and Canadian governments require accessible sites.

Who is the Most Important Blind User?

Search Engines!!!

Accessibility and XHTML http://www.youtube.com/watch?v=tNFPHLiO-os http://www.youtube.com/watch?v=d5oZf9ULAyw http://www.youtube.com/watch?v=VGeppPO5lQ0 http://www.youtube.com/watch?v=0ftQIQ91Ff4