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.
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:
With cellpadding:
Use cellspacing to increase the distance between the cells.
bb
|
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> | |