Scribd
Upload
7 views13 pages

Pdf&rendition 1

The document contains various HTML examples demonstrating different elements such as images, nested lists, tables, internal and external linking, forms, datalists, drag and drop functionality, audio and video embedding, and canvas creation. Each section showcases specific HTML features and their implementations. The examples illustrate how to structure web content effectively using HTML.

Uploaded by

dusyaa15042007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views13 pages

Pdf&rendition 1

The document contains various HTML examples demonstrating different elements such as images, nested lists, tables, internal and external linking, forms, datalists, drag and drop functionality, audio and video embedding, and canvas creation. Each section showcases specific HTML features and their implementations. The examples illustrate how to structure web content effectively using HTML.

Uploaded by

dusyaa15042007
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Images

<!DOCTYPE html>

<body>

<p>

<img src = "fish.jpg" width = "160" height = "140"

border=10 alt = "fishes in the river" />

<img src = "flow11.jpg" height = "150" border=5

alt = "marigold flower" />

</p>

</body>

</html>

Nested Lists
<!DOCTYPE html>

<body>

<h2> Hotel Hiland - Menu</h2>

<ul>

<li>break fast / dinner

<ol type="a">

<li>Idli

<ul>

<li>Rava Idli

<li>mini idli

</ul> Output:

<li>Dosai

<ul>

<li>Rava Dosai

<li>ghee Dosai

</ul>
<li>chapatti

</ol>

<li>lunch

<ol type="i">

<li>Meals

<ul>

<li>Ordinary

<li>Spl. Meals

</ul>

<li>Mini Meals

<ul>

<li>lemon rice

<li>sambar rice

</ul>

</ol>

</ul>

</body>

</html>

TABLES
<!DOCTYPE html>

<html>

<body>

<table border = "5" bgcolor=pink>

<caption><strong>Table of Fruits (1st column) and

Their Prices (2nd column)</strong> </caption>

<thead>

<tr>

<th>Fruit</th>
<th>Price</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Total</th> <th>$3.75</th>

</tr>

</tfoot>

<tbody>

<tr>

<td>Apple</td>

<td>$0.25</td>

</tr>

<tr>

<td>Orange</td>

<td>$0.50</td>

</tr>

<tr>

<td>Banana</td>

<td>$1.00</td>

</tr>

<tr>

<td>Pineapple</td>

<td>$2.00</td>

</tr>

</tbody> </table> </body> </html>

TABLES
<!DOCTYPE html>

<html>

<body>
<table border = "10">

<tbody>

<tr>

<th colspan=3>Price List of seeds(per Kg)</th>

</tr>

<tr>

<th rowspan=2>Paddy</th>

<td>Ponni</td>

<td>Rs. 150</td>

</tr>

<tr>

<td>Sorna</td>

<td>Rs. 90</td>

</tr>

<tr>

<th rowspan=3>Millet</th>

<td>Co-1</td> Outpiut:

<td>Rs. 80</td>

</tr>

<tr>

<td>Co-2</td>

<td>Rs. 110</td>

</tr>

<tr>

<td>ADT-95</td>

<td>Rs. 90</td>

</tr>

</tbody>

</table>

</body>

</html>
INTERNAL LINKING
<!DOCTYPE html>

<html>

<body>

<a name="top"> <hr color="red" /> </a>

<h2 align="center">

<a href="#favorite">Click here to see my favorite</a>

</h2>

<hr color="red" />

<pre>

10

11

12

13

14

15

16

17

18

19

20
21

22

23

24

25

26

</pre>

<hr color="red" />

<a name="favorite">My Favorites</a>

<hr color="red" />

<ul>

<li> listening music

<li> swimming in the sea

<li> Reading News paper

<li> Watching TV

</ul>

<hr color="red" />

<a href="#top">back to top</a>

<hr color="red" />

</body>

</html>

EXTERNAL LINKING
<!DOCTYPE html>

<html>

<body>

<h1>Click link to take action</h1>

<ul>

<li><a href = "http://www.google.co.in">google search engine</a></li>

<li><a href = "INTERNAL.HTML#favorite">My favcorites</a></li>

<li><a href = "http://www.dinamalar.com/download/latha.ttf">


Download Tamil font</a></li>

<li><a href = "mailto:[email protected]?subject=Test">

send e-mail</a></li>

</ul>

</body>

</html>

FORM
<form method="get" action = "http://www.xyz.com/validate.php">

User Name:

<input type = "text" autofocus name="username"/>

<p>

Password :

<input type = "password" name="passwd"/>

</p> <p>

<input type = "submit" value = "Login" />

<input type = "reset" value = "Clear" />

</form>

FORM
<!DOCTYPE html>

<body>

<h2>New HTML5 Form Controls Demo</h2>

<form method = "post" action = "http://www.xyz.com">

<p>Text Color:

<input type = "color" autofocus/> Hexadecimal code such as #ADD8E6)

</p>

<p>Date of Joining:
<input type = "date" required"/>(yyyy-mm-dd)

</p>

<p>Time of present at office:

<input type = "datetime-local" /> (yyyy-mm-ddThh:mm)

</p>

<p>Email:

<input type = "email" placeholder = "[email protected]" required />

</p>

<p>Year and Month you got promotion:

<input type = "month" />(yyyy-mm)

</p>

<p>Font Size:

<input type = "number" min = "1"

max = "7" step = "1" value = "4""/>

(Enter a number between 1 and 7)

</p>

<p>Your Age:

<input type = "range" min = "17"

max = "55" value = "17"/>(valid between 17 and 55)

</p>

<p>Residence Telephone Number:

<input type = "tel" placeholder = "(###) ###-####"pattern

= "\(\d{3}\) +\d{3}-\d{4}" required />

</p>

<p>Time at which left office:

<input type = "time" placeholder = "hh:mm"/>

</p>

<p>URL address:

<input type = "url" placeholder = "http://www.domainname.com" />

</p>

<p>Week:
<input type = "week" />(yyyy-Wnn, such as 2012-W01)

</p>

<p>

<input type = "submit" value = "Submit" />

<input type = "reset" value = "Clear" />

</p> </form> </body></html>

DATALIST
<!DOCTYPE html>

<body>

<h1>Autocomplete and Datalist Demo</h1>

<form method = "post" autocomplete = "on">

<p>Name:

<input type = "text" id = "eName" placeholder = "Name" required/>

</p>

<p>Email:

<input type = "email" id = "email" placeholder = "[email protected]" />

</p>

<p>Educational Qualification:

<input type = "text" id = "txtList" placeholder = "Select a qualification"

list = "qualification" />

<datalist id = "qualification"/>

<option value = "BSc"/> <option value = "BA"/>

<option value = "BE"/> <option value = "ME"/>

<option value = "MBA"/> <option value = "MA"/>

<option value = "MCA"/>

</datalist>

</p>

<p>

<input type = "submit" value = "Submit" />

<input type = "reset" value = "Clear" />


</p>

</form>

</body>

</html>

DRAG AND DROP


<!DOCTYPE html>

<head>

<script>

function dragStartHandler(event) {

event.dataTransfer.setData("Text",event.target.id);

event.dataTransfer.effectAllowed = 'move'; // only allow moves

function dragOverHandler(event)

event.preventDefault();

function dropHandler(event)

event.preventDefault();

var data=event.dataTransfer.getData("Text");

event.target.appendChild(document.getElementById(data));

</script>

<body>

<p>What fruits do you like?</p><hr/>

<ol ondragstart="dragStartHandler(event)">

<li draggable="true" data-value="apples" id="a">Apples</li>

<li draggable="true" data-value="oranges" id="b">Oranges</li>

<li draggable="true" data-value="pears" id="c">Pears</li>

</ol>
<p>Drop your favorite fruits below:</p><hr/>

<ol ondragover="dragOverHandler(event)"

ondrop="dropHandler(event)">

<li value="fruit-grape">Grapes</li>

</ol></BODY></HTML>

ADDING AUDIO
<!DOCTYPE html>

<body>

<audio controls>

<source src="love.wav" type="audio/wavg">

<source src="Aarao.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>

ADDING VIDEO
<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls poster="sunflower.jpg">

<source src="bear.mp4" type="video/mp4">

<source src="lion.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

</body>

</html>

CREATING CANVA
<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #0000FF;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

/*The fillStyle property can be a CSS color, a gradient, or a pattern The default

fillStyle is #000000 (black) */

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

PATH IN CANVA
<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #ff0000;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();
</script>

</body>

</html>

DRAW IMAGES IN CANVA


<!DOCTYPE html>

<html>

<body>

<p>Image to use:</p>

<img id="scream"

src="fish.jpeg"

align="left" />

<p>Canvas:</p>

<canvas id="myCanvas"

width="150"

height="120" style="border:1px solid #FF0000;">

Your browser does not support the HTML5 canvas tag.

</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var im=document.getElementById("scream");

ctx.drawImage(im,10,10);

</script>

</body></HTML>

You might also like