CSS3 TRICKS: XHTML 1

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.

 Hello How are you 

--------------

******************************************************

-------------- 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>
 paragraph-1 
 paragraph-1 
 paragraph-1 
</body>

* Here "p" is called Tag or Container.
* "p" tag ignoring the leading spaces after the opening tag .

-----------------

* 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>
 paragraph-1 <--- Default.
 paragraph-1 
 paragraph-1 
</body>

-----------------

******************************************************
Block Level Tags and Inline Tags or Elements
============================================

Block Level Elements
====================

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

 ,

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

-----------------------

 ---> force line break or force wrap.

* is an Inline element, because it float after line break.

******************************************************
Inline Phrase Element
=====================

* Phrase Elements are used to give meaning to block of text.

 

 

<q> </q> <--- Quotes(not working in Internet Explorer).

<code> </code>

<abbr> </abbr>

<acronym> </acronym>

<dfn> </dfn>

<kbr> </kbr>

<samp> </samp>

<var> </var>

-----------------Examples

 Hello How are you 

 Hello How are you 

******************************************************
Font-Markup Tag or Elements
===========================
* Font-Markup element changes the look of the text.

 

<big> </big>

 

<s> </s> <-- Same as the <strike> element.(draw a line above the text).

 

<strike> </strike>

<tt> </tt>

 

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

******************************************************
 element
--------------
* It is an inline element.


Hello how are you


font size
---------

 Hello 
how are
 you 


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


<img src="user.gif" alt="picture of user" title="user" width="300" height="200"
align="left" hspace="4" border="1" />


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 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 tag.
For break text around the <img> tag use the tag with
attribute 'clear=left' or right or all'.

* If image is aligned left, then use 
* If image is aligned right, then use 
* We can use for left and right aligned image.

-------Example

<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
 
some text here some text here some text here
some text here some text here some text here


******************************************************

XHTML CSS
*********

<div> ---> Block level tag for apply style.
 ---> 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>

******************************************************

******************************************************

CSS3 TRICKS

Saturday, January 30, 2010

XHTML 1

No comments:

Post a Comment

Labels

Blog Archive