Practical file(XHTML)web designing

With XHTML,CSS,JAVASCRIPT
Submitted to : Dr.arpana chaturvedi

SNO TOPIC REMARK
1 Headings,image,anchor tag
2 Use of special character
3 Table
4 Span in table
5 Image hyperlinks(navigation bar)
6 Anchor tag
7 Question 7:form(feedback)
8 DIV tag
9 Descendent selector(through div and para tag)
10 Child selector (using para and div tag)
11 Javascript
12 Internal links
13 drag and drop

Question 1:headings,image,anchor tag
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> XHTML</title>
</head>
<bodybgcolor="lightblue">
<p align="center"><h1><b>BCA Department</b></h1></p>
<h1>semester 1</h1>
<h2>semester 2</h2>
<h3>semester 3</h3>
<h4>semester 4</h4>
<h5>semester 5</h5>
<h6>semester 6</h6>
<img src="C:UserssonusDesktopfb.jpg" height="100" width="100" alt="image
cannot open"/>
<a href="https://www.google.com/" target="_blank">
<b><u> CLICK ME gift for you</u></b></a>
<h3>ANCHORING IMAGE</h3>
<a href="temp.jfif">open image</a>
</body>
</html>

Question 2: Use of special character
<?xml version="," encoding="utf-"?>
<!DOCTYPE html PUBLIC "-//W3//DTD XHTML strict//EN"
"http"//www.w3.org/TR/xhtml/DTD/xhtml -strict.dtd">

<html xmlns="https"//www.w3.org//xhtml">
<head>
<title>Example of usage of special character </title>
</head>
<body>
<h1 align="center">Example of use of special character using mailto</h1>
<h>Here is the link to the email address ofHOD-BCA </h>
<p><strong>Clickhere to go to m Email ADdres </strong></p>

<p><ahref="mailto:artisolanki1234@gmail.com">ARTI KUMARI</a></p>
Click the address and your default email client will open an email
<hr/>

<p>All information on the site is <strong>©
HOD-BCA & JIMS associates 20007</strong></p>

<p><del>Youmay download 3.14*10<sup>2</sup>
character worth of information from this site </del>
only <sub>one</sub>download per hour is permited</p>
<p><em>Note< ¼ of the information presented here is updated daily
</em></p>
</body>
</html>

Question 3 : Table
<?xml version="." encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN"
"http://www.w3.org/TR/xhtml strict dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Asimple XHTML table </title>
</head>
<body>
<table border="1" width="40"
summary="this table provides information about the prices of fruit">
<caption<<strong>Priceof fruit </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>$1.00</td>
</tr>
<tr>
<td>pineAPPle</td>
<td>$2.00</td>
</tr>
<tbody>
</table>
</body>
</html>

Question 4: span in table
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 strict //EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ROWSPAN and COLSPAN </title>
<head>
<body>
<h1>table Example using rowspan and colspan </h1>
<table border="1">
<caption>here is a more complex sample table <caption>
<thead>
<tr>
<th rowspan="2">
<img src="blue.png" width="205" height="167" alt="picture
of rose"/>
</th>
<th colspan="4">
<h1>Camelid comparison</h1>
<p>approximate as of 6/2007</p>
</th>
</tr>

<tr>
<th>#ofhumps </th>
<th>indigenous region</th>
<th>spits?</th>
<th>producewool?</th>
<tr>
</thead>
<tbody>
<tr>
<th>camel</th>
<td>2</th>
<td>africa/asia</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<th>lamas</th>
<td>1</td>
<td>andes mountains</td>
<td>yes</td>
</tr>
</tbody>
</table>

</body>
</html>
<?xml version="." encoding="utf-"?>
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML .strict//EN"
"http://www.w3.org/TRxhtml/DTD/xhtml-strict.dtd">

<html xmlns="htp://www.w3.org//xhtml">
<head>
<title>Example of naviation Bar</title>
</head>
<body>
<h1 align="center">Example of navigation Bar</h1>
<h>Example of links to show navigation using image <h>
<p><ahref="https://www.jimssouthdelhi.com">
<img src="home.jfif" width="65" height="50"
alt="Home page"/></a>
<a href="https://www.jimssouthdelhi.com/course-bhm.html">
<img src="lis.png" width="65" height="50"
alt="List Example page "/></a>
<a href="https://www.jimssouthdelhi.com/cultural.html">
<img src="contact.png" width="65" height="50"
alt="contact page"/></a>
</p>

Question 5:Image hyperlinks
<?xml version="." encoding="utf-"?>
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML .strict//EN"
"http://www.w3.org/TRxhtml/DTD/xhtml-strict.dtd">

<html xmlns="htp://www.w3.org//xhtml">
<head>
<title>Example of naviation Bar</title>
</head>
<body>
<h1 align="center">Example of navigation Bar</h1>
<h>Example of links to show navigation using image <h>
<p><ahref="https://www.jimssouthdelhi.com">
<img src="home.jfif" width="65" height="50"
alt="Home page"/></a>
<a href="https://www.jimssouthdelhi.com/course-bhm.html">
<img src="lis.png" width="65" height="50"
alt="List Example page "/></a>
<a href="https://www.jimssouthdelhi.com/cultural.html">
<img src="contact.png" width="65" height="50"
alt="contact page"/></a>
</p>
</body>

Question 6:anchor tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>DOCUMENTATION</title>
</head>
<body>
<h1 align=center>Example of Anchor tag</h1>
<h>here are the links to various JIMS institutions WEbsites</h>
<p><strong>click a name to go to that page</strong></p>

<p><ahref="https://www.jimsd.org">JIMS vasant kunj-II </a></p>
<p><ahref="https://www.jimsd.org">JIMS kalkaji </a></p>
<p><ahref="https://www.jimsd.org">JIMS rohini </a></p>
<p><ahref="https://www.jimsd.org">JIMS greater noida </a></p>
</body>
</html>

Question 7:form(feedback)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0strict//EN"
http://www.w3.org/TR/xhtml/DTD/xhtml strict.dtd">
<html xmlns="http:www.w3.org/1999/xhtml">
<head>
<title>FORMS</title>
</head>
<body>
<h1>FEEDBACK form </h1>
<p> please fill out this form to help us improve our site</p>
<form method="post"action=" ">
<p>
<input type="text" name="recipient"
value="artisolanki1234@gmail.com"/>
<input type="hidden" name="subject"
value="Feedback Form"/>
<input type="hidden" name="redirect"
value="span.html"/>
<p><label>Name:
<input name="name" type="text" size="25"
maxlength="30"/>
</label>

</p>
<p>
<input type="submit" value="submit"/>
<input type="reset" value="clear"/>
</p>
</form>
</body>
</html>

Question 8:DIV tag
<html>
<head>
<title>position in CSS</title>
<style>
.division
{
border:1px solid;
}
#parent
{
width:400px;
height:400px;
position:relative;
left:300;
top:200;
}
#child
{
width:200px;
height:200px;
position:absolute;
left:50;

top:100;
}
</style>
</head>
<body>
<div class="division" id="parent">
<div class="division" id="child">
</div>
</div>
</body>
</html>

Question 9:descendent selector(through div and para tag)
<!DOCTYPE html>
<html>
<head>
<style>
div p{
background-color:cyan;
border-right-style:solid;
border-color:red;

border-right-width:7px;
padding:20px;


}
h1{
font-size;32;
font-family;times new roman;
}
</style>
</head>
<body>
<h1 align="center">Example of descendant selector</h1>

<h2 align="center">through div and para tag </h2>
<div>
<p>paragraph 1 in the div</p>
</div>
<p>paragraph 4 not in the div</p>
</body>
</html>

Question 10:child selector (using para and div tag)
<!DOCTYPE html>
<html>
<head>
<style>
div>p {
background-color:yellow;
border-bottom-style:dotted;
}
</style>
</head>
<body>
<h1 align=center>Example of child selector</h1>
<h2 align=center>This example selects all <p> elements inside <div>
elements</h2>
<div>
<p>Hey JIMS,I am paragraph 1 in the div</p>
<section><p>HeyJIMS,I am paragraph 3 in the div</p></section>
</div>
<p>Hey JIMS,I am paragraph 5 not in a div</p>

<p>And same again, I am paragraph 6 not in a div</p>
</body>
</html>

Question 11:javascript
<html>
<head>
<script type="text/javascript">
function msg()
{
alert("hello javatpoint");
}
</script>
</head>
<body>
<p>Welcome to Javascript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>

Question 12:internal links
<?xml versiom="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1/0 STRICT//EN"
"http://www.w3.org//TR/xhtml/DTD/xhtml -strict.dtd">
<html xmlns=""http://www.w3.org/1999/xhtml>
<head>
<title>Internal links </title>
</head>
<body>
<h1 id="features">The bestfeatures of the internet</h1>
<p><ahref="#bugs">Go TO <em>FAVORITEBUGS </em></a></p>
<ul>
<li>you can meet people from </li>
<li>you have access:
<ul>
<li>new games</li>
<li>new appliances</li>
<ul>
<li>for bussiness</li>
<li>for pleasure</li>
</ul>
<li>around the clock news</li>
<li>search engines</li>

<li> shopping</li>
<li>programming
<ul>
<li>XHTML</li>
<li>JAVA</li>
<li>script</li>
</ul>
</li>
</ul>
</li>
<h1 id="bugs">My3 favorite bugs</h1>
<p>
<a href="#features">Go to <em>Favorite features</em></a>
</p>
<ol>
<li>fire play</li>
<li>gal ant</li>
<li>roman tic</li>
</ol>
</body>
</html>

Question 13:drag and drop
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN"
"HTTP://www.w3.org/TR/xhtml1-strict"
<html>
<head>
<title>
drag and drop
</title>
<script type="text/javascript">
var diffX,diffY,theElement;
function grabber(event)
{
theElement=event.currentTarget;
var posX=parseInt(theElement.style.left);
var posY=parseInt(theElement.style.top);
diffX = event.clientX - posX;
diffY = event.clientY - posY;
document.addEventListener("mousemove",mover,true);
document.addEventListener("mouseup",dropper,true);
event.stopPropagation();

event.preventDefault();
}
function mover(event)
{
theElement.style.left=(event.clientX - diffX) + "px";
theElement.style.top=(event.clientY - diffY) + "px";
}
function dropper(event)
{
document.removeEventListener("mouseup",dropper,true);
document.removeEventListener("mousemove",mover,true);
}
</script>
</head>
<bodystyle="font-size:20;">

<p>
JIMS VASANT kunj-II
<br/>
The Best B.voc ITSD Institute
<br/>
<spanstyle="position:absolute;top:200px; left:0px; background-color:lightgrey;"
onmousedown="grabber(event);">
</span>
Best
<spanstyle="position:absolute;top:200px; left:75px; background-color:lightgrey;"
JIMS
</span>
<spanstyle="position:absolute;top:200px; left:150px; background-
color:lightgrey;" onmousedown="grabber(event);">
Bvoc
</span>
vasant kunj

</span>
II
</span>
<spanstyle="position:absolute;top:200px; left:0px;
background-color:lightgrey;"
Institute
</span>
</p>
</body>
</html>

Practical file(XHTML)web designing

Practical file(XHTML)web designing

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Practical file(XHTML)web designing

Similar to Practical file(XHTML)web designing (20)

Recently uploaded

Recently uploaded (20)

Practical file(XHTML)web designing