Practical no. 3 Lists,images and semantics
3A) Demonstrate use of multiple image tag in web Page.
CODE:
<!DOCTYPE HTML>
<html>
<body>
<h2 align="center"> COMPUTER & PHONE</h2>
<div align="center">
<img src="mac.jpg" align="center" alt="mac"
width="150" height="150">
<div>
<img src="phone.jpg" align="center" alt="phone"
width="150" height="150">
<p><b> A computer is a device that can
be instructed to carry out arbitrary sequence of
arithmetic or logical opertion automatically.</b></p>
<p><b> A telephone or phone is a telecommunication deivce
that permits two or more user to conduct a converstion when
they are too far apart to be heard directly.</b></p>
</div>
</body>
</html>
OUTPUT:
3B) Design a webpage with Imagemaps.
CODE:
<!DOCTYPE HTML>
<html>
<body>
<h2 align="center"> IMAGE MAPS</h2>
<div align="center">
<p><b>Click on the computer, the phone, or the cup of coffee to go
a new page and read more about the topic:</b></p>
<img src="workplace.jpg" align='center" alt="workplace" usemap="#workmap"
width="400" height="379">
<map name="workplace">
<area shape="rect" coords="34,44,270,350" alt="computer" target="_blank"
href="mac.html">
<area shape="rect" coords="290,172,333,250" alt="cellphone" target="_blank"
href="phone.html">
<area shape="circle" coords="337,300,44" alt="coffee" target="_blank"
href="coffee.html>
</map>
</div>
</body>
</html>
OUTPUT:
SUBCODE: COMPUTER PAGE
<!DOCTYPE HTML>
<html>
<body>
<h2 align="center"> COMPUTER</h2>
<div align="center">
<img src="computer. jpg" width="400" height="397"
usemap="#workmap">
<p><b> A computer is a device that can
be instructed to carry out arbitrary sequence of
arithmetic or logical opertion automatically</b></p>
</div>
</body>
</html>
SUBCODE: PHONE PAGE
<!DOCTYPE HTML>
<html>
<body>
<h2 align="center">PHONE</h2>
<div align="center">
<img src="phone. jpg" align="center" alt="mac"
width="400" height="349" usemap="#workmap">
<p><b> A telephone or phone is a telecommunication
deivce that permits two or more user to conduct a converstion when
they are too far apart to be heard directly. </b></p>
</div>
</body>
</html>
SUBCODE: COFFEE PAGE
<!DOCTYPE HTML><html>
<body>
<h2 align="center">COFFEE</h2>
<div align="center">
<img src="coffee. jpg" align="center"
alt="mac" width="400" height="397" usemap="#workmap">
<p><b>
Coffee is a brewed drink prepared from roasted coffee beans,
which are the seeds of berries from the coffee plant. </b></p>
</div></body></html>
OUTPUT:
 |
| OUTPUT OF COMPUTER PAGE |
 |
| OUTPUT OF PHONE PAGE |
 |
| OUTPUT OF COFFEE PAGE |
3C) Design a web page demonstrating use of various semantics tags
CODE:
<html>
<body>
<section>
<h1>WWF</h1>
<p> The world wide fund for nature (WWF) is an international
organisation working on issues regarding the conservation, research
and restoration of the enivornment, formerly named the world wildlife
fund .WWf as founded in 1961.</p>
</section>
<article>
<header>
<h2> What Does WWF Do?</h2>
<p> WWF's mission:</p>
</header>
<p> WWf's mission is to stop the degradationof our planet's natural
environment, and build a future in which human live in harmony with
nature.</p>
</article>
<article>
<h3> WWF's Panda symbol</h3>
<p> The Panda has become the symbol of WWF. The well-know panda
logo of WWF originate from a panda named Chi Chi that was transferred
from the Beijing zoo to the London Zoo in the same year of the
establishment of WWf.</p>
</article>
<aside>
<h4> Epcot Center</h4>
<p> Epcot is a theme park at walt disney world resort featuring
exciting attraction special events.</p>
</aside>
<figure>
<img src="villa_for_rent_in_italy_051.jpg" alt="Trulli"
style="width:40%">
<figcaption>Fig.1-Trulli,puglia,Italy.</figcaption>
</figure>
<footer>
<p> Author:Hege Refsness</p>
<p><a href="mailto:hege@example.com">hege@example.com
</a></p>
</footer>
</body></html
OUTPUT:
