Chapter2 Intron to XHTML - Web Technologies

7/29/2019 Chapter2 Intron to XHTML - Web Technologies

1/42

3/13/2013 13/13/2013 1

INTRODUCTION TO XHTML

Chapter 2


2/42

3/13/2013 23/13/2013 2

Topics

HTML and XHTML versions and differences

Basic Syntax

XHTML document structure

Images

Hypertext Links

Lists

Tables

Forms

Frames

Syntactic differences between HTML and XHTML


3/42

3/13/2013 3

HTML

HTML browsers do not enforce the strict syntactic rules.High degree of freedom to create docs using their own syntacticpreferences.HTML has few syntactic rules

HTML documents lack consistency, both in low level syntax andoverall structure.

XHTMLXHTML has syntactic rules.

Impose Consistent structure on overall XHTML document.

The syntactic correctness of XHTML docs can be checked eitherby an XML browser or by a validation tool.

3/13/2013 3


4/42

3/13/2013 43/13/2013 4

HTML XHTML

HTML is lot easier to write as the

rules are not strict

XHTML is not so easier to write

as it has syntactic rules

All browsers support HTML There are a few older versions

which do not support XHTML

Whenever a document is in HTML

there are no tools to validate itssyntactic correctness

Whenever a document is in

XHTML there are tools to validateits syntactic correctness which

helps in error identification.

HTML versus XHTML


5/42

3/13/2013 53/13/2013 5

Basic Syntax

TAGS

XHTML doc is a mixture of contents and controls.Controls are specified by tags.

All the tags have to be enclosed within the (angled

brackets) .

All the tag names should be in lowercase letter.

Most of the tags appears in pairs. Whatever that

appears b/n a tag and its closing tag is the content of atag.

Pair of tags and their content are called element

for e.g.

something here


6/42

3/13/2013 6

Basic Syntax contd..ATTRIBUTES

can appear b/n an opening tags name and right pointed brackets.

Attribute names keywords, lowercase letters

Attribute values delimited by double quotes

for e.g. some html text

COMMENTS

All the comments in the XHTML will not be interpreted by the browsers .

They are actually just references in the document

for e.g.

3/13/2013 6


7/423/13/2013 73/13/2013 7

Standard XHTML Document Structure

Every XHTML documents must begin with an XMLdeclaration element.

Version- which is 1.0.

Encoding- encoding . Used for document, utf-8 : Unicodeencoding

xml declaration element: XML DOCTYPE command,

Specifies the particular SGML DOCTYPE

DEFINITION(DTD) with which the doc compiles.


8/423/13/2013 8

Standard XHTML Document Structure contdXHTML doc must include four tags, , ,

& tag.

element includes an attribute, xmlns specifiesnamespace.

xhtml doc consists of two parts: head and body

consists head part of the document, providesinformation about the document rather than content

provides the content of the document.


9/423/13/2013 9

Basic text MarkupParagraphs

Text paragraphs appear as the content of a paragraph

element specified with tag

Line breaks embedded in text are ignored by the

browser.

Browser supplies a line break at the end of each line.

3/13/2013 9


10/423/13/2013 10

Line breaks

Break tag
, inserts a line break without a

preceding blank line.

break tag has no content, so no closing tag.

Space before slash represents absence of content.

Preserving white spaces

White spaces in the text can be preserved using tag

Ignores embedded line breaks

3/13/2013 10


11/423/13/2013 11

Headings

Six levels of headings specified by the tags ,

-highest level of heading

Headings are displayed in bold face

, , use font size larger than that ofdefault size of text.

uses default size.

, use smaller sizes.

Heading tags always break the current line, theircontent appears in a new line.

3/13/2013 11


12/42

3/13/2013 12

Font styles and sizes

tag is used to specify a monospace font, usuallyused for program code.

, tags has become obsolete, since the advent ofCSS.

Subscript and superscript can be specified by

and tags.Horizontal rules

< hr /> tag is used to place horizontal lines in a doc.

Causes a line break and draws a line across the screen.

Browsers displays lines, 3 pixels thick

3/13/2013 12


13/42

3/13/2013 13

Character entities

Entities are special characters, which are names for

special character by the browser. Entity in a document is replaced by its associated

character by the browser.

Commonly used entities Ex

3/13/2013 13

Character Entity Meaning

& &amp Ampersand

< &lt Less than

> &gt Greater than

&apos Apostrope

&quot Double quote0

&deg Degree
http://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/entity.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/entity.html


14/42

3/13/2013 143/13/2013 14

IMAGES

All the modern web pages contain lots of colorful

images loaded as a response to the xhtml request.

All the modern browsers support 2 formats

GIF - uses a 8 bit color representation

can support close to 256 colors.

GIF images have a high clarity and lowercompression ratio. These images have a .gifextension


15/42

3/13/2013 153/13/2013 15

JPEG - uses 24 bit for color representation

Can support close to 16 million colors .

The JPEG has some loss of clarity

They have a very high compression ratio Are preferred over the gif formats

These images have a .jpeg or jpg

extension


16/42

3/13/2013 16

tag

3/13/2013 16

specifies an image that is to appear indocument

src- specifies file containing image

alt- text to be displayed, when imageis not displayed

Example
http://../Worked%20ex-WWW/allhtmlfiles/image.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/image.html


17/42

3/13/2013 173/13/2013 17

Hypertext Links

A link is usually a pointer to some resource

an XHTML document, anywhere on the Web

another place with in the current document.


18/42

3/13/2013 18

Links

3/13/2013 18

Specified as an attribute of an anchor tag

anchor tag that specifies a link is calledsource

Document address specified in a link istarget

anchor tag requires hrefattribute(hypertext

reference)

Value of href is target of the link

Example
http://../Worked%20ex-WWW/allhtmlfiles/hypertextlinks.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/hypertextlinks.html


19/42

3/13/2013 193/13/2013 19

Lists

XHTML provides simple and effective ways forarranging the elements in a systematic fashion vialists

There are several types of lists

Ordered Lists

Unordered Lists

Definition Lists


20/42

3/13/2013 203/13/2013 20

The tag which is a block tag creates anunordered list.

Each item in a list is specified with an tag . ul - unordered list.

li - list item.

The example for the unordered list is shown here

UnorderedLists
http://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/unordered.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/unordered.html


21/42

3/13/2013 213/13/2013 21

Ordered Lists

used to create lists which are sequential.

These lists are usually numbered.

These lists generally are enclosed within the

and

Where - ordered lists

Example
http://../Basic%20html%20tags/ordered.htmlhttp://../Basic%20html%20tags/ordered.html


22/42

3/13/2013 223/13/2013 22

This type of list is usually used to list theelement and provide its definition to it .

The tags used is

and - To define a definition list.

and - List the element.

and - Provide the description.

Example

Definition Lists

TABLES
http://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/definitionlist.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/definitionlist.html


23/42

3/13/2013 233/13/2013 23

TABLES

Table is a collection of a set of rows and columns. Each of the intersection ofthese rows and columns are cells .

The basic table tags

TAGS EXPLANATION

and Are the tags which are used to indicate the beginning and ending of

the table. There are 2 attributes to this tag

1 . Border - one around the table

e.g. border=2 : defines that the border with pixel size 2

2 . Rules - one between the cells

e.g. rules=2 : defines the thickness in pixels between cells

and Are the tags which indicate the row in the table. So nesting takes

place these tags are placed within the table tags

and Are the table data tags which are used to place the values withinthe cells

and Are the table heading tags which are also known as labels

These are the tags which are used for the table headings

The html and the corresponding source , Nested list
http://examples/table.htmlhttp://examples/table.htmlhttp://../Basic%20html%20tags/table.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/nestedlist.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/nestedlist.htmlhttp://../Basic%20html%20tags/table.htmlhttp://examples/table.html


24/42

3/13/2013 243/13/2013 24

align some value

valign some value

Additional Attributes

The additional attributes are

align : The align attribute can take left , right and centeras values . If the

align attribute is specified for the thtag its applicable only to the cell. If thealign attribute is specified for the trtag its applicable to values in all the cells.Bydefault the alignment of th is center and td is left

valign: The valign attribute when specified with the th and td tags can take the

values as top and bottom specifying how the alignment of text should be donewithin the cell.

e.g.
http://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/align.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/align.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/align.html


25/42

3/13/2013 253/13/2013 25

cellpadding and cellspacing:

The cellspacing and cellpadding are two other table attributes , thecellpaddingattribute is used to specify the spacing between the content of the celland the inner walls of the cell.

The cellspacingis used to specify the distance between the cells in a table

e.g.

Cellspacing

Cellpadding
http://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/cellspacing.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/cellpadding.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/cellpadding.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/Basic%20html%20tags/cellspacing.html


26/42

3/13/2013 263/13/2013 26

FORMS

A common way for a user to communicate informationfrom a Web browser to Server

XHTML provides tags to generate commonly usedobjects on a screen form :Widgets or Controls

The values of all the controls in a form are called theform data

Every form requires a Submit button.

Form data is encoded and sent to the Web server forprocessing


27/42

3/13/2013 27

Commonly used Form tags are

FORMS contd


28/42

3/13/2013 283/13/2013 28

The tag

All the components of a form appear in the content of a

tag. have several attributes, only one of which action is required.

action specifies the URL of the application on the Web server.

method attributes specifies one of the technique used to passthe form data to the server.

There are two ways by which the data is transferred between theweb pages

1 . Get :- here the value that is transferred is passed along withthe attribute value as a part of the URL ..

2 . Post :- here the value is passed but this is not a part of theURL.


29/42

3/13/2013 29

tag

Used for text, passwords, check boxes, radio buttons

And action buttons reset, submit, plain

typeattribute defines the kind ofcontrols like

- text

- password

-Radio buttons

-Check boxes


30/42

3/13/2013 30

text control creates a horizontal box

User can type a line of text

Default size of text box can be varied with size

attribute of

maxlength attribute to specify maximum number ofcharacters.

Requires name attributeValue of name attribute becomes the value of the

control within the form data.

text control


31/42

3/13/2013 31

password control To avoid display of contents of a text box, a

password control can be used

Text boxes can be labeled using tag. the controls cannot appear directly in the

tag.

must be placed in some block container such asparagraph.

Ex : text control

password control
http://../Worked%20ex-WWW/allhtmlfiles/form.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/form.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/form.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/form.html


32/42

3/13/2013 32

check box

Check box and radio controls are used to collectmultiple choice input from the user.

Requires a name and value attributein tag.

For form processing on the server, name identifies thebutton, value identifies its value

checkedattribute; if the value=checked, button isinitially on.

Checkbox elements should appear in label elements.Ex : check box
http://../Worked%20ex-WWW/allhtmlfiles/checkbox.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/checkbox.html


33/42

3/13/2013 33

Radio control

Radio buttons are related to check boxes.

Difference is only one radio button can be activated atany time.

Every time a radio button is activated , button in thegroup that was previously on is turned off.

All radio buttons in a group must have name

attribute set in tag.All radio buttons in a group must have the same name.

Ex: radio control
http://../Worked%20ex-WWW/allhtmlfiles/radio.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/radio.html


34/42

3/13/2013 34

and

A menu is specified with tag.

two kindsonly one menu can be selected at a time

value sent in the form data :-value of thename attribute and the chosen menu item

multiple items can be selected at a time

value sent in the form data : -value includesall selected menu items.

size attribute specifies number of menu items displayedfor the user.


35/42

3/13/2013 35

tag contd..

Each menu item is a content of an tagnested in select element.

tag can include select attribute select=selected specifies pre selection

Ex. tag(menu 1)

tag (menu2)
http://../Worked%20ex-WWW/allhtmlfiles/menu.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/menu2.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/menu2.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/menu.html


36/42

3/13/2013 36

tag Used to create multi line text area

Text typed into the area is not limited in length

There is implicit scrolling , both vertically andhorizontally.

rows and cols attributes can be set to reasonablesize to see the visible part of the text.

Ex : tag
http://../Worked%20ex-WWW/allhtmlfiles/textarea.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/textarea.html


37/42

3/13/2013 37

Action buttons Reset clears all the content in the form to their

initial state.

Submit button has two actions

1. The form data is encoded and sent to the server.

2. The server is requested to execute the serverresident program specified in action attribute of tag.

Every form requires a submit button

Both are created with tag.

Ex. Action buttons

A complete form
http://../Worked%20ex-WWW/allhtmlfiles/action.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/compleform.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/compleform.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/action.html


38/42

3/13/2013 38

FRAMES

A browser display window is capable of displayingmore than one document at a time.

Window can be divided into rectangular are each ofwhich is called a frame.

Each frame is capable of displaying its owndocument.

The most common use is having a table of contents

displayed in one frame and parts of the maindocument displayed in another.


39/42

3/13/2013 39

Framesets

The number of frames and their layout in thebrowser window are specified with

A document has either a body or a frameset butcannot have both.

tag must have either a rows or a cols

or both.

Rows specifies the number of rows of frames thatwill occupy the window.


40/42

3/13/2013 40

There are three kinds of values for rows

Numbers, percentages, astersiks

Number specifies the height of one row in each

pixel.

Percentages number followed by %sign , specifiespercentage of the total browser window height arowshould occupy.

Astersiks it means the remainder of the windowheight.

Framesets contd


41/42

3/13/2013 41

Ex 1

Ex 2

Ex 3

Cols specifies number of columns of frames.

Ex 4

Framesets contd


42/42

tag

Content of a frame is specified with tag. Can appear only in the content of a frameset

element.

Each frame defined in has an associated tag.

tag gives the filename of a document thatsupplies its content.

Content of frame is specified as the value of srcattribute in tag

Ex. Frames
http://../Worked%20ex-WWW/allhtmlfiles/frames.htmlhttp://../Worked%20ex-WWW/allhtmlfiles/frames.html

Chapter2 Intron to XHTML - Web Technologies

Documents

Transcript of Chapter2 Intron to XHTML - Web Technologies