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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Practical file(XHTML)web designing

Semelhante a Practical file(XHTML)web designing (20)

Último

Último (16)

Practical file(XHTML)web designing