Tuesday, 17 July 2012
<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>
</body>
</html>
Result is:
Tuesday, 17 July 2012 by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Hello!">
</form>
</body>
</html>
by Unknown · 0
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<textarea cols="30" rows="10">My dog is here
</textarea>
</div>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="cars">
<option value="maruthi">maruthi</option>
<option value="hyundai">hyundai</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="checkbox" name="vehicle" value="cycle" /> I have a cycle<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<form action="">
Username: <input type="text" name="user" /><br />
Password: <input type="password" name="password" />
</form>
<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or circles).</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<form action="">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Tea</li>
<li>Cocoa
<ul>
<li>Black tea</li>
<li>Cocoa</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Banana</li>
<li>Bananas</li>
<li>Lemon</li>
<li>Orange</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>plum</li>
<li>palm</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Carrot</li>
<li>Beans</li>
<li>cocoa</li>
<li>Orange</li>
</ul>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
<li>plum</li>
<li>lemon</li>
<li>juice</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>papays</li>
<li>banyan</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>coconut</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Flowers/li>
<li>rose</li>
<li>Lemon</li>
<li>Oranges</li>
</ol>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>sugar</li>
<li>rice</li>
<li>spices</li>
</ol>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>sugar</li>
<li>Tea</li>
<li>complan</li>
</ul>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
<b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support
the "frame" attribute.
</p>
<h4>With frame="border":</h4>
<table frame="border">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="box":</h4>
<table frame="box">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="void":</h4>
<table frame="void">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="above":</h4>
<table frame="above">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="below":</h4>
<table frame="below">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
Note: This control the distance between cells
<!DOCTYPE html>
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
Note: This control the white space between cell content and the borders
<!DOCTYPE html>
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>poi</li>
<li>thai</li>
<li>apples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill bore</td>
<td>555 77 888</td>
<td>555 77 888</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill bore</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 888</td>
</tr>
<tr>
<td>555 77 888</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<table border="1">
<caption>Monthly spend</caption>
<tr>
<th>Month</th>
<th>spend</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill bore</td>
<td>555 77 888</td>
<td>555 77 888</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill bore</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 888</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 888</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>This table has no borders:</h4>
<table>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</html>
In the numbers field insert what you want inside tables
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>10</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>60</td>
</tr>
</table>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>
by Unknown · 1
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="url here">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="url here">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" />
The align attribute of the image is set to "left". The image will float to the left of this text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" />
The align attribute of the image is set to "right". The image will float to the right of this text.
</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" />
with align="bottom".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" />
with align="middle".</p>
<p>An image
<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" />
with align="top".</p>
<p><b>Tip:</b> align="bottom" is default!</p>
<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" />
An image before the text.</p>
<p>An image after the text.
<img src="smiley.gif" alt="Smiley face" width="32" height="32" /></p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>An image from another folder:</p>
<img src="your image" alt="name of image" width="33" height="32" />
<p>An image from website:</p>
<img src="image url here" alt="name here" width="104" height="142" />
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
An image:
<img src="here your img.gif" alt="name of image" width="32" height="32" />
</p>
<p>
A moving image:
<img src="here your img.gif" alt=" name of image " width="48" height="48" />
</p>
<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
This is another mailto link:
<a href="example@example.com?cc=example@example.com&bcc=andexample@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
This is an email link:
<a href="example@example.com?Subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>
</body>
</html>
Note: will only work if you have mail installed
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>Locked in a frame?</p>
<a href="collegeprojectandtests.blogspot.com/" target="_top">Click here!</a>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>use your texts here</p>
<h2>Chapter 2</h2>
<p> use your texts here </p>
<h2>Chapter 3</h2>
<p> use your texts here </p>
<h2><a name="C4">Chapter 4</a></h2>
<p> use your texts here </p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>use your texts here</p>
<h2>Chapter 7</h2>
<p> use your texts here </p>
<h2>Chapter 8</h2>
<p> use your texts here </p>
<h2>Chapter 9</h2>
<p> use your texts here </p>
<h2>Chapter 10</h2>
<p> use your texts here </p>
<h2>Chapter 11</h2>
<p> use your texts here </p>
<h2>Chapter 12</h2>
<p> use your texts here </p>
<h2>Chapter 13</h2>
<p> use your texts here </p>
<h2>Chapter 14</h2>
<p> use your texts here </p>
<h2>Chapter 15</h2>
<p> use your texts here </p>
<h2>Chapter 16</h2>
<p> use your texts here </p>
<h2>Chapter 17</h2>
<p> use your texts here </p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<a href="collegeprojectandtests.blogspot.com" target="_blank">Visit collegeprojectandtests.blogspot.com!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:
<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>
<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.
</p>
<p>
<a href="collegeprojectandtests.blogspot.com/">Cpt</a> This is a link to a website on the World Wide Web.
</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>formatted with an external style sheet</h1>
<p>ok!</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<a href=" http://collegeprojectandtests.blogspot.in/ " style="text-decoration:none;">Visit http://collegeprojectandtests.blogspot.in/ !</a>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>All the elements here will be red</h1>
<h2>All header 2 elements her will be blue</h2>
<p>All text in paragraphs here will be green.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p style="font-family:verdana;font-size:110%;color:green">
insert the text you want to use
</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue">This is heading</h1>
<p style="color:red">This is paragraph.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:200%">This is heading</h1>
<p style="font-size:110%">This is paragraph.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana">This is heading</h1>
<p style="font-family:courier">This is paragraph.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center heading</h1>
<p>This is paragraph.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">paragraph.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Line 1</h2>
<p style="background-color:green;">line 2</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
<p>My favorite pen is <del>parker</del> <ins>reynolds</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body>
</html>
by Unknown · 0
<!DOCTYPE html>
<html>
<body>
A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>
A short quotation:
<q>This is a short quotation</q>
<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>
</body>
</html>
by Unknown · 0
Subscribe to:
Posts (Atom)