XHTML

HTML – HTML stands for Hyper Text Markup Language

3 type of HTML

Strict:

[code]<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></h3>
[/code]

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed.

Transitional:

[code]<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">[/code]

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

Frameset:

[code]<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">[/code]

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

Basic Concept:

Deprecated Elements:  font, center

Event Attributes /Not Deprecated Elements /phrase tags:

 <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, and <cite>

Strong Tag: div, p, blockquote, pre,  dl dt, dl dd, ul li, ol li, center

Weak Tag: span, a, strong, font, b

Strong Tag = Weak Tag + Display Block

Most Important Part of HTML

  1. Margin / Padding
  2. Float (Left/Right/none/inherit)
  3. Position (Absolute/Relative/Fixed)
  4. Z-index
  5. DOM Tree

Margin / Padding

Margin: Contain Space Outside of Tag

Padding: Contain Space Inside of Tag

Margin Vs Padding

Width = 200px

Height = 100px

Example:

When we’ll use margin and padding from

 Top = 10px

Left = 10px

What’s happen for both?

Margin:

Width = 200px;

Height = 100px;

Padding:

Width = 200px + 10px

Height = 100px + 10px

Float (Left/Right/none)

Without overflow hidden:

Once you know how to get an element to float, it’s important to know how to turn off the float. You turn off the float with the CSS Clear property. You can clear left floats, right floats or both:

clear: left;

clear: right;

clear: both;

clear a right floating image

[code]
<p>
<img src="image.gif" alt="image" style="float: right;" /></code>
This text will flow on the left side of the image.</code>
<br style="clear:right;" /></code>
This text will display below the image.</code>
</p>
[/code]

Position (Absolute/Relative/Fixed)

Absolute: Depends on Monitor screen point (0, 0).

Relative: Depends on Tag point (0, 0).

Fixed: Depends on Browser that’s fixed on the Browser screen not move anywhere.

Property Values

Value Description
absolute Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties
relative Generates a relatively positioned element, positioned relative to its normal position, so “left:20” adds 20 pixels to the element’s LEFT position
fixed Generates an absolutely positioned element, positioned relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties
static Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)
inherit Specifies that the value of the position property should be inherited from the parent element

Z-index

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Example

Set the z-index for an image:

[code]

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
<h1>This is a heading</h1>
<img src="deshisoft.gif" width="100" height="140" />
[/code]

<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

DOM Tree

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

The DOM presents an HTML document as a tree-structure.

Download : professional