HTML


HTML Escape Characters (Entities)

http://www.w3schools.com/html/html5_intro.asp

A DOM (Document Object Model) tree is a data structure that defines the structure of a document—usually an HTML or XML document. The document is presented as a tree structure, where the first element is the root. The API is standardized (see http://w3.org).


 <html>
<title>Title goes here!</title>
<body background="background.jpg">
<! comment>
Body goes here!
</body>
</html>
  Each HTML tag can have the following standard attributes:
id: A unique id for the element
class: CSS class used for styling
style: inline style of the tag instead of CSS
title: text to be displayed as tooltip when mouse hovers over the tag.
 <p>My first paragraph.</p>  My first paragraph.
  <hr />: used to create an horizontal line.  <h1> through <h4> are used to specify (sub)titles
<br>
<b>Bold</b>
<i>Italic</i>		  
Bold
Italic
 <pre> This is preformatted text. It preserves both spaces and line breaks.</pre>
The pre tag is good for displaying computer code. 
This is preformatted text. It preserves both spaces and line breaks.
 <p style="font-family:verdana;color:green;font-size:18px;text-align:center;background-color:yellow">
Inline styling</p>

Inline styling
Anchor<a> :if it has a name it will be the reference point for future links to this anchor. if it has href it will link out to that address.
<a> is <a name="label">anchor</a>

<a href="page.htm">This text</a>

<a href="page.htm" target="_blank">Link opens to new window</a>

<a href="page.html#label">Any content</a>

<a href="page.html#label"> <img border="0" src="Flower.jpg" width="65" height="38"> </a>

Locked in a frame?
<a href="http://www.av.com/ "target="_top">Click here to get your page out of frame!</a>

<p>
e-mail link: <a href="mailto:a@av.com?subject=Hello%20again"> Send Mail</a>
another e-mail link:
<a href="mailto:a@av.com ?cc=a@b.com&bcc=m@n.net&subject=my%20Subject&body=body%20part"> Send Mail with CC, BCC, Subj & body</a>
</p>


<a> is anchor  it means that if you click on a link that refers to to the anchor with this name you will be navigated right here of the page.
This text is a link to any content on the internet



Link opens to new window


Any content

Image as a link.


Locked in a frame? click here to get your page out of frame!



 e-mail link: Send e-Mail


another e-mail link: Send e-Mail with CC, BCC, Subj & body

Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly.

basic image tag: <img src="Flower.jpg" alt="alt: an alternative to what you can't see Flower.jpg" width="100" height="200"/>

<p>
An image
<img src="Flower.jpg" align="bottom">
<img src="Flower.jpg" align="middle">
<img src="Flower.jpg" align="top">
<img src="Flower.jpg">
alignments and the text
</p>

<p>
An image <img src="Flower.jpg" align="bottom"> in the text
</p>

<p>
image <img src ="Flower.jpg"
align="middle"> in the text
</p>

<p>
image<img src ="Flower.jpg" align="top" > in the text
</p>


<p>
<img src ="Flower.jpg"
align ="left">
LONG PARAGRAPHHHHHHH
</p>

<p>
<img src ="Flower.jpg" align="right"
LONG PARAGRAPHHHHHHH</p>
<br>


image map: sections of an image to link to different locations

<img src="Flower.jpg" usemap="#planetmap">

<map name="planetmap">
<area alt="Sun" coords="0,0,20,20" href="sun.htm" shape="rect">
<area alt="Mercury" coords="20,30,3" href="mercur.htm" shape="circle">
<area alt="Venus" coords="30,30,8" href="venus.htm" shape="circle">
</map>

<p>
<a href="tryhtml_ismap.htm">
<img src="planets.gif"
ismap width="146" height="126">
</a>
</p>
bbbb

Note: that if you hold the mouse pointer over the image, most browsers will tooltip display the "alt"-text.


image alignments and the text


image in the bottom alignment



image in the middle alignment


image in the top alignment

A paragraph with a left aligned image. The align attribute of the image is set to "left". The image will float to the left of this text. A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT

A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT A LONG TXT





maped image. Sun Mercury Venus


Note: The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element, therefore we have added both the "id" and "name" attributes to the map element.


ismap When present, it specifies that the image is part of a server-side image-map (an image-map is an image with clickable areas). When clicking on a server-side image-map, the click coordinates are sent to the server as a URL query string. Note: The ismap attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute.
<table>
  <caption>Monthly savings</caption>
<tr>
  <th>Name</th>
  <th colspan="2">Telephoneeeee</th>
</tr>
<tr>
  <td>Morteza Shahriari Nia</td>
  <td>123</td>
  <td>123</td>
</tr>
</table>

<table>
<tr>
  <th>Name</th>
  <td>Morteza Shahriari Nia</td>
</tr>
<tr>
<th rowspan="2">Telephoneeeeee </th>
  <td>123</td>
</tr>
<tr><td>123</td></tr>
</table>

<table>
<tr>
  <td>First</td> <td>Row</td>
</tr>  
<tr>
  <td>Second</td> <td>Row</td>
</tr>
</table>

<table cellpadding="10">
<tr>
  <td align="right">First</td>
  <td>Row</td>
</tr>  
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<table cellspacing="10">
<tr><td>First</td><td>Row</td></tr>  
<tr><td>Second</td><td>Row</td></tr>
</table>
Monthly savings
Name Telephoneeeee
Morteza Shahriari Nia 123 123


Other table attributes:     border="1"      bgcolor=#FFFFFF   bgcolor=red   background="bgdesert.jpg"




Name Morteza Shahriari Nia
Telephoneeeeeee 
123
123





Use cellpadding to create more white space between the cell content and its borders.

Without cellpadding:

First Row
Second Row


With cellpadding:

First Row
Second Row


Use cellspacing to increase the distance between the cells.

First Row
Second Row
bb
 
<h2>Lists</h2>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Lists

  • Coffee
  • Milk


  1. Coffee
  2. Milk
   

h1 Heading

h2 heading

h3 heading

h4 heading
 Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*").
<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>		 




bb