Guide To XHTML

8/22/2019 Guide To XHTML

1/14

1/21/20

eXtensible Hypertext Markup Language

XHTML

Sowmya Kamath S., Dept of I.T.,NITK Surathkal

Need for Markup Languages

Dept of I.T.,NITK Surathkal

Markup languages are used to tell a web browser how to format anddisplay a web page.

Most common language used for web publishing is HTML (Hyper TextMarkup Language)

HTML can be viewed as a subset of SGML (Standard GeneralizedMarkup Language), which is a markup language that defines standarddocument format.

Basic idea - using pre-defined tags to add structure to content of thedocument, which is then formatted for display by browsers parser.

XHTML (eXtensible Hypertext Markup Language)


Based on XML (eXtensible Markup Language)

XML is a markup language designed for describing data.

XHTML is a stricter and cleaner version of HTML

XHTML is HTML redefined as an XML application

XHTML is set to replace HTML

HTML vs. XML


Differences between HTML and XML

1. HTML uses a pre-definedand fixed set of tags.

With XML you make up your owntags (and define what they mean ina separate document)

2. HTML is designed to displaydata to humans

XML is designed to describe datato computers

3. Browsers are very tolerantof errors in HTML

XML documents must be well-formed (syntactically correct)

4. Not case sensitive Case Sensitive, in fact all markupmust be written in lowercase.


2/14

1/21/20

HTML vs. XHTML


1. Not case sensitive. A mix ofcase is also allowed.

Case sensitive and only lowercaseallowed.

2. HTML is designed to display

data to humans

XHTML is XML based and is used to

add structure for machine use.

3. If tags are not matched ormissing , browsers assume them.

XHTML documents must be well-formed (syntactically correct)

4. No need for explicit attributevalues or quotes

Attributes should be quoted andhave explicit values.

5. No strictness in processing All XHTML docs will need thedeclaration of a DOCTYPE.

Document Type Definitions


A DTD, or Document Type Definition describes the syntax touse for the current document.

These DTDs are public and on the web.

An XHTML document always contains a reference to one ofthese DTDs.

There are four different DTDs for XHTML. XHTML 1.0. Strict

XHTML 1.0. Transitional

XHTML 1.0. Frame Set

XHTML 1.1

Document Type Definitions (contd.)


XHTML 1.0 Strict

Use for really clean markup, with no display information. (no font,color, or size information)

Use CSS (Cascading Style Sheets) if you want to define how thedocument should be displayed.

XHTML 1.0 Transitional

Use with standard HTML and/or with CSS.

Allows deprecated HTML elements. XHTML 1.0 Frameset

Use if your document uses HTML frames.

XHTML 1.1

Like 1.0 Strict, but with added support for Chinese.

DOCTYPE declaration


Every XHTML document must begin with one of the DOCTYPEdeclarations (DTDs):


3/14

1/21/20

Markup Validation


The W3C HTML/XHTML Validation Tool

http://validator.w3.org/

is an online tool for checking (but not fixing) HTML andXHTML documents.

Basic XHTML Document Structure


A simple document

A simple paragraph.

File Extension:

A file containing anHTML page should havethe extension .html According to W3C, anXHTML page should have

the extension .xhtml

Basic XHMTL Document Structure (contd.)

tag


The tag has following c ommon attributes:

background - specifies URL of background image.

bgcolor - specifies background color.

text - default color of text on webpage.

Link - color of hyperlinks not yet visited.

alink - color of active hyperlinks.

vlink - color of visited hyperlinks.

Colors are represented by hexadecimal codes. (64,456 colors)

For e.g. #000000 - Black; #ffffff - White

Basic Text Markup

Heading


Six levels of headings. , up to

, , are for larger fonts.

is normal size font. (as defined by browser settings.)

and are smaller than normal fonts.

Attributes include align (values center, left, right and justify)

Default alignment is left.

For e.g

Hello World
http://validator.w3.org/http://validator.w3.org/


4/14

1/21/20

Basic Text Markup (contd.)

Paragraphs


Attributes include align (values center, left, right and justify)

Default alignment is left.

For e.g

my first XHTML document

Note : Multiple spaces in the source paragraph are replaced by a singlespace in the displayed text.

To preserve spaces, use tag.

To introduce line breaks, use
tag.


Block Quotations


To set off a block of text within a paragraph from the normalflow of text in a document.

Different browsers handle the tag in different

ways. (e.g. by indenting or by italizing)

For e.g.

Quote for the day

Work is Worship

..


Horizontal Rule


To insert a horizontal line, tag is used.

Attributes are

align - alignment method.

noshade - display using solid color (black)

size - sets thickness in pixels

width - sets width (100% whole page, or in pixels)


Font


Used to define font properties.

Attributes

color - defines font color

face - defines font style

size - default sizes (1 to 7)

For e.g.

.


5/14

1/21/20


Font Styles


, and - are called content based tags since tagindicates the style of the text that appears in their content.

Other tags:

Emphasis

Strong

Subscript/superscript and

Code

Blinking Text

Moving Text


Character Entities


A collection of special characters that are sometimes needed in naturaltext, but cannot be used as themselves in marked up text.

XHTML uses character entities to represent these in the browser.

Character Entity Meaning

& & Ampersand

> Greater Than " Double quotes

' Single quotes

Fraction

o Degree

(space) Non breaking space

TM Trademark Symbol

Plus or minus


Block tags and Inline tags


Block Tags

an element that creates large blocks of content like paragraphs orpage divisions.

They start new lines of text when used

can contain other blocks as well as inline elements and text ordata.

Inline Tags

an element that defines text or data in the document.

don't start new lines when you use them.

they generally only contain other inline tags and text or data. Orthey include nothing at all, like the
tag.


Image tag


E.g.

Attribute Name Description

src Gives the file name/path/url of the image to be displayed.

align Left, right or center

alt Gives a description of the image

border Sets border size (in pixels)

height In pixels

width In pixels

hspace Specifies additional horizontal space to be added around image.

vspace Specifies additional horizontal space to be added around image.


6/14

1/21/20


Hypertext Links


Anchor tags are used to create clickable links.

May point to a file, a URL or any other resource.

Syntax: Google

Contact Us

Links can include images in their content, then browser displays the imagewith the link.


Hypertext Links id Attribute


used to create a bookmark inside an XHTML document.

Example: A sub heading with an unique id inside an XHTMLdocument:Useful Tips Section

Create a link to the "Useful Tips Section" inside the same document:

Go to Useful Tips Section

Or, create a link to the "Useful Tips Section" from another page:

Go to Useful Tips Section


Hypertext Links - target Attribute


The target attribute specifies where to open the linked document.

E.g. open the linked document in a new browser window or a new tab:

Search on Google

Value Description

_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked

(this is default)_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

framenameOpens the linked document in a named frame


Lists


Used to format text using a list for ease of reading.

1. Unordered Lists:

tag to create the list, tag to specify each list item.

tag has an attribute type(values circle, square and disc)

2. Ordered Lists:

Used for lists where order of items is important.

tag to create the list, tag to specify each list item. Attribute typedefines numbering style. (values1, a, A, i, I ).

Attribute startdefines initial value.

tag has an attribute value that overrides previous numbering.

/ /


7/14

1/21/20


Lists (contd.)


Used to format text using a list for ease of reading.

3. Definition Lists:

Used to specify lists of terms and their definitions such asglossaries.

creates the list.

term to be defined.

term description.

Each term appears at left margin, and the description is displayedon the next line. (with indent.)


Tables


A table is a matrix of rows and columns, each intersection of a rowand a column is called a cell.

Syntax:

Header 1Header 2

row 1, cell 1row 1, cell 2

row 2, cell 1row 2, cell 2


Tables


Table can be g iven a title by using tag.

Attributes of the tag are as follows -

Attribute Name Description

align Table is aligned left, right or center

bgcolor Background color

border Sets border (in pixels)

width Defines table width.

cellpadding Sets padding between data and cell border (in pixels)

cellspacing Sets spacing between data cells (in pixels)

rowspan specifies no. of rows spanned by a data cell.

colspan specifies no. of columns spanned by a data cell.


Tables cellpadding and cellspacing attributes


1/21/20


8/14

1/21/20


Table - rowspan and colspan attributes


colspanspecifies no. of columns spanned by a data cell.

rowspanspecifies no. of rows spanned by a data cell.

Example

Month

Savings

January

$100

February

Sum: $100

XHTML Forms


Most common way of interaction between user and system.

XHTML provides tags to generate commonly used objects on a

screen form. (called controls or form widgets.)

All tags to create widgets are inline tags and appear inside the tag.

Each widget can have a value, given by user input. Together, allvalues in a form are called form data.

XHTML Forms

tag


is a block tag.

Syntax:

Attribute Description

action Provides URL of the server-side program/script forprocessing form data.

method Specified HTTP method for passing data to the server.If GETdata is attached to the destination URL using aquery string.If POSTdata is embedded inside the HTTP requestmessage.

XHTML Forms

tag


- The root element which is the block element for all the formwidgets

- Defines the different input e lements within the tag.

1/21/20


9/14

1/21/20

XHTML Forms

Types of input widgets


Textbox

Used for collecting simple text.

All input widgets use the tag, but type attribute definesthe kind of widget to be rendered on the screen.

XHTML Forms

Types of input widgets (contd.)


Password Textbox

Special textbox for entering a password.

Checkbox Used for choosing among a no. of items as applicable. Multiple

checkboxes can be selected at a time. If a checkbox is checked, that name=value pair is passed to the ser ver

for processing.Hobbies

Books

Travel

XHTML Forms



Radio Buttons

Used for choosing among a no.of items as applicable. Only one can beselected at a time.

Age group

18 - 25

26 35

XHTML Forms



Textarea (Content Tag)

Creates a multiline textarea. Text has no limitation in length (bothhorizontal and vertical)

Horizontal scrolling is provided automatically when needed.

Comments

Please give your valuable feedback.

1/21/20


10/14

1/21/20

XHTML Forms



Select Menu tag

Creates a dropdown list or a select menu.

size attribute defines how many fields are to be displayed.

multiple attribute allows more than one selection. (for select menu)

tag is used to sp ecify options available for selection.

Karnataka

Kerala

XHTML Forms



Select Menu (contd.)

Creating a selection menu (example)

Your favorite cities

Surathkal

Mangalore

Udupi

Goa

Bangalore

XHTML Forms



Action Buttons:

Types:

Buttoncreates a clickable button.

Resetclears all form widgets and resets them to their initial states.

Submit

When submit is pressed - Form data is encoded and s ent to the ser ver. Server is requested to execute the program s pecified in the action

attribute. (which will process form data and return response to user.)

XHTML Forms

An example


1/21/20


11/14

1/21/20

Frames


Used to display more than one webpage at a time on the browserdisplay window.

Window can be divided into rectangular areas, each of which is aframe, and so can display separate documents.

XHTML1.1 does not support frames.

XHTML docs with frames cannot be validated unless they include theFrameset DTD.)

Frames (contd.)

tag


Number of frames and their layout in the browser window is specifiedwith tag.

the element is used instead of the element.

A document has either a or a , but cannot haveboth.

Syntax:

Frames (contd.)

Attributes of the tag


rowsand cols

rowsno. of rows of frames that will occupy the window. (values may bespecified as pixels, % or *)

e.g.

or

colsno.of colums of frames that will occupy the window. (values may bespecified as pixels, % or *)

e.g. ...

Frames (contd.)

tag


The content of the frame is specified using the tag.

is a inline tag, so it can appear only within its block tag

Syntax

Each frame defined within the frameset has an associated tagthat gives the filename of the document that is to be displayed within it.

Hence sequence of definition is important.

1/21/20


12/14

1/21/20

Frames (contd.)


Attribute Description

frameborder If border is to be displayed or not (0 or 1)

src Specifies URL of initial document to be loaded.

name Specifies a name for id purposes

noresize Does not allow users to change size of frame

scrolling Indicates whether a scrollbar is used (yes, no, auto)

Frames (contd.)

Nested Frames


More than one frameset tags can be used to create a nested set offrames.

The attributes rowsand colscan be used separately or together.

index.html

index.html

Frames (contd.)

Nested Frames Example


Frames (contd.)

Nested Frames


Using target attribute (of the anchor tag )

Used to specify the region where a webpage should be displayed.

About Us

mypage2.html whenever clicked will be displayed in the frame withid content.

Other options _blank - display page in a new browser window (with frame setup )

_self - display page in originating frame.

_top - display page in full browser window (without any frames.)

1/21/20


13/14

1/21/20

Frames (contd.)


Frames have several usability problems.

You cannot bookmark a collection of documents in a frameset, or sendsomeone a reference to the collection.

Smaller devices often cannot cope with frames as their screen is not big

enough to be divided up. Some times your page may be displayed differently on different computers

due to different screen resolution.

Search engines find (X)HTML pages, not Framed pages, so search resultsusually give you pages without the navigation context that was intended.

XFrames is an XML application for composing documents together,replacing HTML Frames.

Frames (contd.)

tag


Some browsers do not support frames. Use tag which provides a message to users wh ose browsers do not

support frames.

Syntax:

Your browser does not support frames.

tag

Meta Element


Metadata is information about data. The tag providesmetadata about the HTML document.

Metadata will not be displayed on the page, but will be machineparseable.

The metadata can be used by browsers (how to display content orreload page), search engines (keywords), or other web services.

Meta elements are typically used to specify page description,

keywords, author of the document, last modified, and othermetadata.

tag (contd.)

Meta Element


Some search engines will use the name and content attributes of themeta element to index your pages.

1/21/20


14/14

/ /

Other tags in HTML


Embedding multimedia objects

, , , tags

Image maps

, tags Scripts

tag

Cascading Style Sheets

and tags

From HTML to XHTML


XHTML documents must be well-formed.

...

...

XHTML elements must be properly nested.bold and italic is wrong

Tag & attribute names (and values) must be in lowercase.

All XHTML elements must be closed.

If an XHTML tag is not a container, close it like this:

, ,

From HTML to XHTML (contd.)


Attribute values must be properly quoted (double quotes preferred)

Example:

Attribute minimization is forbidden

Example: XHTML

Documents

Guide To XHTML