XHTML
******************************************************
* XML language is used for define XHTML.
* XML is a language for define other Markup languages like XHTML.
* XML used for describing data.
* XHTML is an application of XML.
******************************************************
Structure of XHTML document
===========================
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
</body>
</html>
------------------------- Description
/* It is XML declaration. It is required for XML.
It is not required for XHTML. XHTML validator required it.
So it is a good idea to use it. */
<?xml version="1.0" encoding="utf-8"?>
/* This DOCTYPE element is required by the XHTML.
The second line is optional, but it is a good idea to use it. */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
/* The attribute "xmlns" of <html> tag is required.
It tell the parser which Namespace is used in the
XML language.xmlns stands for xml Namespace */
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
</body>
</html>
-------------------------
We must follow above structure of XHTML document, other wise
It show invalid XHTML document when validating XHTML document
Using http://validator.w3.org.
XHTML Valuator:
http://validator.w3.org
-------------------------
******************************************************
Short Cuts
----------
<hr> </hr> ---> <hr />
******************************************************
* In XHTML all tags name must be lowercase letters.
Uppercase and Mixed cases are not allowed in XHTML.
* But the DOCTYPE tag is in Uppercase, because it is outside the <html> tag.
--------------
* In XHTML all attributes must be in quotation mark (double quotes).
This is another difference between XHTML and HTML.
<p align="right"> Hello How are you </p>
--------------
******************************************************
-------------- XML declaration
<?xml version="1.0" encoding="utf-8"?>
* Indicate that this document is used in an application of XML.
* XHTML is an application of XML.
* We must use this XML declaration when the character encoding of
the document is other than default utf-8 or utf-16 and no encoding is
Determined by higher level protocols.
<?xml version="1.0" encoding="iso-8859-1"?>
* It also specifies the version of XML.
* UTF stands for Universal Text Format.
--------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* DOCTYPE specifying which version of XHTML is using, here it is XHTML 1.0.
* DTD stands for Document Type Definition.
* There are 3 versions of XHTML DTD, they are Strict,Transitional and Frameset.
* Here version of XHTML DTD is Strict.
* Strict DOCTYPE is used with Style Sheet (css).
* Three different DOCTYPEs are Strict,Transitional and Frameset.
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional .dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd">
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
******************************************************
* <center> </center> tag is not support in Strict DOCTYPE.
-----------------
<body>
<p> paragraph-1 </p>
<p> paragraph-1 </p>
<p> paragraph-1 </p>
</body>
* Here "p" is called Tag or Container.
* "p" tag ignoring the leading spaces after the opening tag <p>.
-----------------
* In XHTML and HTML all sequence spaces are folded into one space character.
* In XHTML and HTML all white spaces are folded into one white space.
-----------------
<body>
<p align="left"> paragraph-1 </p> <--- Default.
<p align="right"> paragraph-1 </p>
<p align="center"> paragraph-1 </p>
</body>
-----------------
******************************************************
Block Level Tags and Inline Tags or Elements
============================================
Block Level Elements
====================
* <p>, <div>, <center>, <h1> are block level elements.
* Block level elements take block of space on the browser.
* Block level elements not float with in a block.
* <p> tag is special, because it only contains Inline elements.
It not allowed containing other Block level elements.
* <div> and <center> are allowed to contain other Block level elements.
* Some of the Block level elements only allowed containing other Block level elements.
* Look www.w3.org for more details.
Inline Elements
===============
* Words and Images are example of inline elements.
* <img>,<em> are examples of inline elements.
* Inline elements float with in a block.
* We can include the <img> inline elements inside a table cell or
Center tag to change it behavior.
<br />,
******************************************************
Non Bracking Space ( )
===========================
* --> Non Bracking Space.
* "SAJU Madhavan" and "SAJU Madhavan" are different.
* "SAJU Madhavan" ---> Contain two words 'SAJU' and 'Madhavan'.
* "SAJU Madhavan" ---> Considered as one word 'SAJU Madhavan'
* Non Bracking Space ( ) is not consider as a white space when
we wrap a text.So not breaking the line or text with
when we wrap a text.
* That is is not a white space.
* If you want a paragraph not wrap, then search replace all white space
with Non Bracking Space ( ), then all the words in that paragraph are
considered as a single word , then we can see that paragraph in a single line.
-----------------------
<br /> ---> force line break or force wrap.
* <br /> is an Inline element, because it float after line break.
******************************************************
Inline Phrase Element
=====================
* Phrase Elements are used to give meaning to block of text.
<em> </em>
<strong> </strong>
<q> </q> <--- Quotes(not working in Internet Explorer).
<code> </code>
<abbr> </abbr>
<acronym> </acronym>
<dfn> </dfn>
<kbr> </kbr>
<samp> </samp>
<var> </var>
-----------------Examples
<p> <em>Hello</em> How are you </p>
<p> <strong>Hello</strong> How are you </p>
******************************************************
Font-Markup Tag or Elements
===========================
* Font-Markup element changes the look of the text.
<b> </b>
<big> </big>
<i> </i>
<s> </s> <-- Same as the <strike> element.(draw a line above the text).
<small> </small>
<strike> </strike>
<tt> </tt>
<u> </u>
******************************************************
Headings <h1> --- <h6>
======================
* Headings are block level elements or containers.
* There are 6 levels of headings.
* Search engines like google read the head tag and index the page.
******************************************************
Blockquote
==========
<blockquote> </blockquote>
* The text between this tags are intended both left and right in the browser window.
* Used for intend text.
* We can also use css instead of this element.
Quotes
======
<q> </q> <--- Quotes (not working in Internet Explorer).
"
“ <--- Left double quote
” <--- Right double quote
------------------------Examples
<q> hello </q>
" hello "
“ hello “
” hello ”
******************************************************
<pre> Element or Tag
====================
* 'pre' means preformatted text.
* <pre> tag display the text in original format without changing it.
* <pre> tags deny the properties of XHTML.
* Inside the <pre> tag white spaces are not consider as a single white space.
* This tag turns off the tendency of XHTML to fold the spaces into one space.
<pre>
hello
how are you
</pre>
******************************************************
<font> element
--------------
* It is an inline element.
<font >
Hello how are you
</font>
font size
---------
<font >
<font size="+2"> Hello </font>
how are
<font size="-2"> you </font>
</font>
******************************************************
Lists
=====
* There are 3 types of lists.
1) Unordered List (ul)
2) Ordered List (ol)
3) Defenition List (dt)
1. <ul> Unordered List Element
==============================
* ul --> Unordered list.
* li --> list item.
* 'ul' and 'li' element have three options to set types,
they are 'circle','square',and 'disc'.
-------
<ul type="circle">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
-------
<ul type="circle">
<li> One </li>
<li type="square"> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
-------
2. <ol> Ordered List Element
============================
* ol --> Ordered list.
* li --> list item.
* 'ol' and 'li' element have different options to set "type" attribute,
they are '1','I','i','A' and 'a'
* 'ol' have another attribute called "start", to set starting and it must be number.
-------
<ol type="A">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ol>
-------
<ol start="10" type="i">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ol>
-------
3. <dt> Defenition List Element
===============================
* dl --> Definition List
* dt --> definition term
* dd --> Definition
* We can use other list inside the definition list.
-------
<dl>
<dt>one</dt>
<dd>name</dd>
<dt>two</dt>
<dd>address</dd>
</dl>
-------
<dl>
<dt>one</dt>
<dd>name</dd>
<ol type="A">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ol>
<dt>two</dt>
<dd>address</dd>
</dl>
-------
******************************************************
Hyperlinks
==========
a --> anchor tag.
href --> Hyperlink reference.
title --> toot tip.
<a href="http://www.google.com" title="google"> Click Here </a>
* Here 'http' is the protocol and 'google' is the domain name.
Attribute 'target' of <a> tag
=============================
Set target="_blank" or target="new" to open link in new browser window or tab.
<a href="http://www.google.com" title="google" target="_blank"> Click Here </a>
Attributes of <body> tag
========================
vlink --> to set visited link color.
link --> to set link color.
<body link="#FFCC" vlink="#FCCA">
</body>
******************************************************
Different Types of URLs
=======================
valitive url
---------------------------
<a href="test.html" > Click Here </a>
* Here not specifying any protocol and domain name.
* In this case the browser search in the current location in the
webserver for the file 'test.html'.
Another Type of valitive url
----------------------------
<a href="subdir/test.html" > Click Here </a>
* Specifying a subdirectory in this type url.
* In this case the browser search in the current location in the
webserver for the directory 'subdir'.
Another Type of valitive url
----------------------------
<a href="../test.html" > Click Here </a>
* Search in one directory back from the current directory for the file 'test.html'.
* ../ ---> Means move one directory back.
Different Parts of URLs
=======================
scheme://host:port/path:parameters?query#fragment
scheme:
//host
:port
/path
:parameters
?query
#fragment
******************************************************
<base/> Element
==============
<base href="http://www.mysite.com/misc/test/"/>
<a href="testone.html"> Click Here </a>
-------------
* In this example, searching for file 'testone.html' in the base location
'http://www.mysite.com/misc/test/', when we click on 'Click Here' link.
* <base> element give different reference or location for valitive url.
* <base> element specify a location or directory to search for valitive url.
* <base> element directory specification must end with slash '/'.
* <base> element changing the location of current document.
* <base> element is used for change the location to be search for valitive url.
* <base> element is used for change the search location for <a> tag.
* It is used occasionally, when we want to move few pages from one location to another.
******************************************************
Fragment
========
<a href="#SA"> Click Me <a/>
<a name="SA"></a>
Fragment link
-------------
<a href="#SA"> Click Me <a/>
Fragment Identifier
-------------------
<a name="SA"></a>
------------------
* For creating Link to specific points in the same web page.
* When we click on the Fragment link, the view change to fragment identifier in the page.
* Here we using 'href' and 'name' attributes of <a> tag.
* # --> used for specify fragment.
* Remember, not write any content between <a> and </a> tags in the case of Fragment Identifier,
that may cause problems when using css.
------------------
<a href="#ADDR"> Address <a/>
<a name="ADDR">Address</a>
Myaddress here
Myaddress here
------------------
******************************************************
<img> Element
=============
<img src="user.gif" alt="picture of user" title="user" width="300" height="200" />
* It is an inline element.
* alt --> this attribute is used for display message
for browsers that not able to display the image.
* title --> tool tip attribute.
* Specifying the width and height attribute in <img> tag make
the browser to render the page quickly.
* The browser first read all html code from the server and creating a layout of the page in the browser. If we don’t specifying the image width and height in <img> tag, then the browser has to load the image and find the width and height before displaying the layout of the page, that is time consuming.
* If we don’t Specifying the width and height attribute in <img> tag, then the browser display the page only after loading all the images to local sysytem,
that take long time.
Attributes of <img> tag
=======================
align --> For float image left and right.
hspace --> for make space horizontally on left and right side of the image.
vspace --> for make space vertically on top and bottom side of the image.
border --> for make border.
<p>
<img src="user.gif" alt="picture of user" title="user" width="300" height="200"
align="left" hspace="4" border="1" />
</p>
How break the text around the image to come next down after the image (inline <img> tag)
=======================================================================================
* <img> is an inline element or floating object.
* Clear --> This attribute clear any floating object or
Inline element on left or right side.
* Because <img> is an inline element, we can consider <img> as text and treat like text.
*If we break the text around the image using <br /> tag, then the text still be the side
of the image. The text not comes next down the image.
* Because the <img> is an inline tag, we can not break the text
Around the image and put down after the image using <br /> tag.
For break text around the <img> tag use the <br /> tag with
attribute 'clear=left' or right or all'.
* If image is aligned left, then use <br clear="left" />
* If image is aligned right, then use <br clear="right" />
* We can use <br clear="all" /> for left and right aligned image.
-------Example
<p>
<img src="user.gif" width="300" height="200" align="left"/>
some text here some text here some text here
some text here some text here some text here
<br clear="left" />
some text here some text here some text here
some text here some text here some text here
</p>
******************************************************
XHTML CSS
*********
<div> ---> Block level tag for apply style.
<span> ---> Block level tag for apply style.]
Units of Measure
----------------
%
em
ex
px
******************************************************
<table> Element
===============
<table border="1">
<tr>
<th> </th>
<th> </th>
</tr>
<tr valign="top">
<tr> </tr>
<tr> </tr>
</tr>
</table>
******************************************************
******************************************************
