[go: up one dir, main page]
Scribd
Upload
85 views14 pages

Guide To XHTML

Easy way to understand XHTML, improve and develop XHTML. Written by one of the best computer experts in a flawless way now in a e-book.

Uploaded by

rameshramanan98
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
85 views14 pages

Guide To XHTML

Easy way to understand XHTML, improve and develop XHTML. Written by one of the best computer experts in a flawless way now in a e-book.

Uploaded by

rameshramanan98
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

1/21/2013

Need for Markup Languages

Markup languages are used to tell a web browser how to format and display a web page. Most common language used for web publishing is HTML (Hyper Text Markup Language) HTML can be viewed as a subset of SGML (Standard Generalized Markup Language), which is a markup language that defines standard document format. Basic idea - using pre-defined tags to add structure to content of the document, which is then formatted for display by browsers parser.
Dept of I.T., NITK Surathkal

eXtensible Hypertext Markup Language


XHTML

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

XHTML (eXtensible Hypertext Markup Language)

HTML vs. XML


Differences between HTML and XML 1. HTML uses a pre-defined and fixed set of tags. 2. HTML is designed to display data to humans 3. Browsers are very tolerant of errors in HTML 4. Not case sensitive With XML you make up your own tags (and define what they mean in a separate document) XML is designed to describe data to computers XML documents must be wellformed (syntactically correct) Case Sensitive, in fact all markup must be written in lowercase.

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

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

1/21/2013

HTML vs. XHTML


1. Not case sensitive. A mix of case is also allowed. 2. HTML is designed to display data to humans 3. If tags are not matched or missing , browsers assume them. 4. No need for explicit attribute values or quotes 5. No strictness in processing
Dept of I.T., NITK Surathkal

Document Type Definitions


Case sensitive and only lowercase allowed. XHTML is XML based and is used to add structure for machine use. XHTML documents must be wellformed (syntactically correct) Attributes should be quoted and have explicit values. All XHTML docs will need the declaration of a DOCTYPE.

A DTD, or Document Type Definition describes the syntax to use for the current document. These DTDs are public and on the web. An XHTML document always contains a reference to one of these DTDs. There are four different DTDs for XHTML.

XHTML 1.0. Strict XHTML 1.0. Transitional XHTML 1.0. Frame Set XHTML 1.1

Dept of I.T., NITK Surathkal

Document Type Definitions (contd.)

DOCTYPE declaration

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 the document 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.
Dept of I.T., NITK Surathkal

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

<!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/xhtml1transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

(Essentially the same as XHTML 1.0 Strict)

Dept of I.T., NITK Surathkal

1/21/2013

Markup Validation

Basic XHTML Document Structure


<?xml version=1.0 encoding =utf-8 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A simple document</title> </head> <body> <p>A simple paragraph.</p> </body> </html>

The W3C HTML/XHTML Validation Tool http://validator.w3.org/

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

File Extension: A file containing an HTML page should have the extension .html According to W3C, an XHTML page should have the extension .xhtml

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

Basic XHMTL Document Structure (contd.) <body> tag

Basic Text Markup Heading

The <body> tag has following common 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.

Six levels of headings. <h1>, <h2> up to <h6> <h1>, <h2> ,<h3> are for larger fonts. <h4> is normal size font. (as defined by browser settings.) <h5> and <h6> are smaller than normal fonts. Attributes include align (values center, left, right and justify) Default alignment is left. For e.g
<h1 align=center> Hello World</h1>

Colors are represented by hexadecimal codes. (64,456 colors) For e.g. #000000 - Black; #ffffff - White
Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

1/21/2013

Basic Text Markup (contd.) Paragraphs


Basic Text Markup (contd.) Block Quotations

<p> </p> Attributes include align (values center, left, right and justify) Default alignment is left.

For e.g
<p align=justify> my first XHTML document </p>

To set off a block of text within a paragraph from the normal flow of text in a document. Different browsers handle the <blockquote> tag in different ways. (e.g. by indenting or by italizing) For e.g.
<p> Quote for the day <blockquote> Work is Worship </blockquote> .. </p>

Note : Multiple spaces in the source paragraph are replaced by a single space in the displayed text. To preserve spaces, use <pre> tag. To introduce line breaks, use <br /> tag.
Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

Basic Text Markup (contd.) Horizontal Rule

Basic Text Markup (contd.) Font


To insert a horizontal line, <hr /> 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)

Used to define font properties. Attributes color - defines font color face - defines font style size - default sizes (1 to 7)

For e.g.
<font color=#00abec size=4 face=arial,courier> . </font>

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

1/21/2013

Basic Text Markup (contd.) Font Styles


Basic Text Markup (contd.) Character Entities


<b>, <i> and <u> - are called content based tags since tag indicates the style of the text that appears in their content. Other tags:
Emphasis Strong Subscript/superscript Code Blinking Text Moving Text <em> <strong> <sub> and <sup> <code> <blink> <marquee>

A collection of special Entity characters that are sometimes needed in natural Character Meaning text, but cannot be used as themselves in marked up text. Ampersand & &amp; XHTML uses character entities to represent these in the browser. Lesser Than < &lt;

>
o

&gt; &quot; &apos; &frac14; &deg; &nbsp; &trade; &plusmn;

Greater Than Double quotes Single quotes Fraction Degree Non breaking space Trademark Symbol Plus or minus

(space) TM
Dept of I.T., NITK Surathkal Dept of I.T., NITK Surathkal

Basic Text Markup (contd.) Block tags and Inline tags

Basic Text Markup (contd.) Image tag <img>


Attribute Name Description

Block Tags an element that creates large blocks of content like paragraphs or page divisions. They start new lines of text when used can contain other blocks as well as inline elements and text or data. 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. Or they include nothing at all, like the <br /> tag.
Dept of I.T., NITK Surathkal

src align alt border height width hspace vspace

Gives the file name/path/url of the image to be displayed. Left, right or center Gives a description of the image Sets border size (in pixels) In pixels In pixels Specifies additional horizontal space to be added around image. Specifies additional horizontal space to be added around image.

E.g. <img src =/images/logo.gif align = center


alt =Company Logo />
Dept of I.T., NITK Surathkal

1/21/2013

Basic Text Markup (contd.) Hypertext Links


Basic Text Markup (contd.) Hypertext Links id Attribute


Anchor tags are used to create clickable links. May point to a file, a URL or any other resource.
<a href = http://www.google.com/>Google</a> <a href = mailto:webmaster@site.com>Contact Us</a>

used to create a bookmark inside an XHTML document. Example: A sub heading with an unique id inside an XHTML document:
<h2 id ="tips">Useful Tips Section</h2>

Syntax:

Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Go to Useful Tips Section</a>

Links can include images in their content, then browser displays the image with the link.
<a href = http://www.google.com/> <img src=/images/google.jpg alt=google_logo_pic /> </a>
Dept of I.T., NITK Surathkal

Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.mysite.com/help.html#tips"> Go to Useful Tips Section</a>
Dept of I.T., NITK Surathkal

Basic Text Markup (contd.) Hypertext Links - target Attribute

Basic Text Markup (contd.) Lists

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:
<a href="http://www.google.com/" target="_blank"> Value Description Search on Google</a> Opens the linked document in a new window or tab _blank _self _parent _top Opens the linked document in the same frame as it was clicked (this is default) Opens the linked document in the parent frame Opens the linked document in the full body of the window

Used to format text using a list for ease of reading. 1. Unordered Lists: <ul> tag to create the list, <li> tag to specify each list item. <ul> tag has an attribute type (values circle, square and disc) 2. Ordered Lists: Used for lists where order of items is important. <ol> tag to create the list, <li> tag to specify each list item. Attribute type defines numbering style. (values 1, a, A, i, I ). Attribute start defines initial value. <li> tag has an attribute value that overrides previous numbering.
Dept of I.T., NITK Surathkal

framename Opens the linked document in a named frame


Dept of I.T., NITK Surathkal

1/21/2013

Basic Text Markup (contd.) Lists (contd.)

Basic Text Markup (contd.) Tables

Used to format text using a list for ease of reading. 3. Definition Lists: Used to specify lists of terms and their definitions such as glossaries. <dl> creates the list. <dt> term to be defined. <dd> term description. Each term appears at left margin, and the description is displayed on the next line. (with indent.)

A table is a matrix of rows and columns, each intersection of a row and a column is called a cell.
Syntax: <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

Basic Text Markup (contd.) Tables


Basic Text Markup (contd.) Tables cellpadding and cellspacing attributes

Table can be given a title by using <caption> tag. Attributes of the <table> tag are as follows Attribute Name Description

align bgcolor

Table is aligned left, right or center Background color

border
width

Sets border (in pixels)


Defines table width.

cellpadding Sets padding between data and cell border (in pixels) cellspacing Sets spacing between data cells (in pixels) rowspan colspan
Dept of I.T., NITK Surathkal

specifies no. of rows spanned by a data cell. specifies no. of columns spanned by a data cell.
Dept of I.T., NITK Surathkal

1/21/2013

Basic Text Markup (contd.) Table - rowspan and colspan attributes


XHTML Forms

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

Most common way of interaction between user and system.

Example
<table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr><td>January</td> <td rowspan="2">$100</td> </tr> <tr> <td>February</td> </tr> <tr> <td colspan="2">Sum: $100 </td> </table>

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 <form> tag. Each widget can have a value, given by user input. Together, all values in a form are called form data.
Dept of I.T., NITK Surathkal

</tr>

Dept of I.T., NITK Surathkal

XHTML Forms <form> tag

XHTML Forms <input> tag

is a block tag.
Syntax: <form action=pgm url method =GET or POST> </form> Attribute action method Description Provides URL of the server-side program/script for processing form data. Specified HTTP method for passing data to the server. If GET data is attached to the destination URL using a query string. If POST data is embedded inside the HTTP request message.

<form> - The root element which is the block element for all the form widgets <input> - Defines the different input elements within the <form> tag.
<form name=frm1 action= method= >

<input type= name= id = value= /> </form>

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

1/21/2013

XHTML Forms Types of input widgets

XHTML Forms Types of input widgets (contd.)

Textbox

Password Textbox

Used for collecting simple text. All input widgets use the <input> tag, but type attribute defines the kind of widget to be rendered on the screen.

Special textbox for entering a password. <input type=password name=pwd id=txt2 size=20 maxlength=8 />

<form name=frm1 action=submit.php method=post> <input type=text name=cname size=20 maxlength=50 /> </form> id=txt1

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 server for processing.
<label>Hobbies </label> <input type=checkbox name=hobbies id=chk1 value=Books checked=checked/> Books <input type=checkbox name=hobbies id=chk2 value=Travel/> Travel
Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

XHTML Forms Types of input widgets (contd.)

XHTML Forms Types of input widgets (contd.)

Radio Buttons

Textarea (Content Tag)


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

Creates a multiline textarea. Text has no limitation in length (both horizontal and vertical) Horizontal scrolling is provided automatically when needed.

<label>Age group</label>
<input type=radio name=age id=rad1 value=18 - 25 selected=selected />18 - 25 <input type=radio name=age id=rad2 value=26 - 35 /> 26 35 <label> Comments </label> <br /> <textarea name=comments rows=6 cols=50 > Please give your valuable feedback. </textarea>

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

1/21/2013

XHTML Forms Types of input widgets (contd.)

XHTML Forms Types of input widgets (contd.)

Select Menu <select> tag


Select Menu (contd.)

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) <option> tag is used to specify options available for selection.

Creating a selection menu (example)

<select name=state id=select1 size =1> <option value=Karnataka>Karnataka</option> <option value=Kerala>Kerala</option> </select>

<label>Your favorite cities </label><br /> <select name="city" size="5" multiple="multiple"> <option value="Surathkal">Surathkal</option> <option value="Mangalore">Mangalore</option> <option value="Udupi">Udupi</option> <option value="Goa">Goa</option> <option value="Bangalore">Bangalore</option> </select>

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

XHTML Forms Types of input widgets (contd.)

XHTML Forms An example

Action Buttons: Types: Button creates a clickable button. Reset clears all form widgets and resets them to their initial states. Submit When submit is pressed

Form data is encoded and sent to the server. Server is requested to execute the program specified in the action attribute. (which will process form data and return response to user.)

<input type=submit name=Submit value=submit form/> <input type=reset name=Reset value=reset form /> <input type=button name=Clickme value=Click Me!/>

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

10

1/21/2013

Frames

Frames (contd.) <frameset> tag


Used to display more than one webpage at a time on the browser display window. Window can be divided into rectangular areas, each of which is a frame, and so can display separate documents. XHTML1.1 does not support frames.

Number of frames and their layout in the browser window is specified with <frameset> tag. the <frameset> element is used instead of the <body> element. A document has either a <body> or a <frameset>, but cannot have both.

Syntax:
<html > <head> </head> <frameset . > </frameset> </html>
Dept of I.T., NITK Surathkal

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

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


Dept of I.T., NITK Surathkal

Frames (contd.) Attributes of the <frameset> tag

Frames (contd.) <frame> tag


rows and cols


rows no. of rows of frames that will occupy the window. (values may be specified as pixels, % or *) e.g. <frameset rows =200,300,400></frameset> or <frameset rows =30%, *, *></frameset> cols no.of colums of frames that will occupy the window. (values may be specified as pixels, % or *) e.g. <frameset cols=25%,*> ...</frameset>

The content of the frame is specified using the <frame> tag. <frame> is a inline tag, so it can appear only within its block tag <frameset> Syntax
<frameset rows =20%, 80%> <frame name=top src=top.html /> <frame name=bottom src=bottom.html /> </frameset>

Each frame defined within the frameset has an associated <frame> tag that gives the filename of the document that is to be displayed within it. Hence sequence of definition is important.
Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

11

1/21/2013

Frames (contd.)
Attribute frameborder src name noresize scrolling Description

Frames (contd.) Nested Frames


If border is to be displayed or not (0 or 1) Specifies URL of initial document to be loaded. Specifies a name for id purposes Does not allow users to change size of frame Indicates whether a scrollbar is used (yes, no, auto)

More than one frameset tags can be used to create a nested set of frames. <?xml .?> The attributes rows and cols can be used separately or together. <DOCTYPE.. .>
<html ..> <head><title> index.html</title> </head> <frameset rows=20%, 80%> <frame name=banner src=mybanner.html/> <frameset cols=30%,70%> <frame name=nav src =mylinks.html/> <frame name=content src =mypage1.html/> </frameset> </frameset> </html> index.html

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

Frames (contd.) Nested Frames Example

Frames (contd.) Nested Frames


Using target attribute (of the anchor tag <a>) Used to specify the region where a webpage should be displayed.
<a href=mypage2.html target=content>About Us</a>

mypage2.html whenever clicked will be displayed in the frame with id 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.)
Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

12

1/21/2013

Frames (contd.)

Frames (contd.) <noframes> tag

Frames have several usability problems.


Some browsers do not support frames.

You cannot bookmark a collection of documents in a frameset, or send someone 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 results usually give you pages without the navigation context that was intended.

Use <noframes> tag which provides a message to users whose browsers do not support frames.

Syntax:
<html> <head> </head> <frameset . > <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html>
Dept of I.T., NITK Surathkal

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

Dept of I.T., NITK Surathkal

<head> tag Meta Element


<head> tag (contd.) Meta Element

Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parseable.

Some search engines will use the name and content attributes of the meta element to index your pages.
<meta name="author" content=Dept of IT" /> <meta name="revised" content="2013/01/01" /> <meta name="description" content=Client side Programming with XHTML and CSS" /> <meta name="keywords" content=XHTML, CSS" />

The metadata can be used by browsers (how to display content or reload 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 other metadata.

http-equiv attribute

can be used to redirect the user to a new web

address.
<meta http-equiv = refresh content = 5; url=http://www.newsite.com"/>

Dept of I.T., NITK Surathkal

Dept of I.T., NITK Surathkal

13

1/21/2013

Other tags in HTML

From HTML to XHTML

Embedding multimedia objects

XHTML documents must be well-formed.


<html ..> <head> ... </head> <body> ... </body> </html>

<embed>, <object>, <audio>, <video> tags <map>, <area> tags <script> tag

Image maps

Scripts

XHTML elements must be properly nested.


<b><i>bold and italic</b></i> is wrong

Cascading Style Sheets

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:
<br />, <hr />, <img src="smile.gif" />
Dept of I.T., NITK Surathkal

<style> and <link /> tags

Dept of I.T., NITK Surathkal

From HTML to XHTML (contd.)

Attribute values must be properly quoted (double quotes preferred)

Example: <table width="100%">

Attribute minimization is forbidden

Example: XHTML <table border=border"> HTML <table border>

The id attribute replaces the name attribute


Wrong: <img src="picture.gif" name="pic1" /> Right: <img src="picture.gif" id="pic1" /> Best: <img src=nitk.gif" name=nitk_pic
id = "pic1"/>

Dept of I.T., NITK Surathkal

14

You might also like