WP Lab Activity1

XHTML
Introduction:
HTML is defined using the Standard Generalized Markup Language(SGML),which is an ISO

standard notation for describing text-formatting languages.
XHTML stands for eXtensible HyperText Markup Language. Developed in the year 2000,
it’s a hybrid of the programming languages of HTML and XML; and it is used to develop the
structure of your web site.
It carries the balance of browser-friendliness and popularity found in HTML with the
extensibility and strictness of XML.
HTML was designed to specify document structure at a higher and more abstract level
HTML specified documents had to be displayed on a variety of computer systems, often
using different browsers.
The latest version of HTML,4.01 was approved by w3c in late 1999.
XHTML stands for Extensible Hypertext Markup Language:
The XHTML 1.0 standard was approved in early 2000. XHTML is a redefinition of HTML
4.01 using XML. Now the latest version is XHTML1.1.
It is not a programming language, it is used to describe the general form and layout of
documents by a browser.
HTML VERSUS XHTML:-
1. HTML has lax syntax which is much easier to write, whereas XHTML requires a
level of discipline which most of us naturally resist.
2. HTML documents are widely supported by various browsers whereas some older
browsers have problems with some part of XHTML.
3. HTML has a few syntactic rules, whereas XHTML has strict syntactic rules that
impose a consistent structure on all XHTML documents.
4. XHTML has good quality and consistency in electrical wiring, while HTML has few
syntactic rules and they don’t enforce the rules.
5. XHTML is case-sensitive, HTML is not. All tags and attributes must be lowercase in
XHTML.
HTML documents can be converted into XHTML documents using software tools like tidy.
Tools for creating XHTML documents are XHTML editors and WISIWYG[WHAT-YOU-
SEE-IS-WHAT-YOU-GET].
DISADVANTAGES:-
 Limited practical use.
At present, there are hardly any browsers that offer benefits when receiving and
processing XHTML documents. The most frequently used browser (Microsoft
Internet Explorer) does not even support XHTML.
STANDARD XHTML DOCUMENT STRUCTURE:

The first line of every XHTML document is:
<?xml version= “1.0” encoding=”utf-8” ?>
Then SGML document command
<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd >
The HTML identifies root element <html>, includes an attribute, xmlns ,that specifies
XHTML namespace, as shown
<html xmlns= “http://www.w3.org/1999/xhtml”>
An XHTML document consists two parts: ‘head’ and ‘body’ ,the <head> element contains
information about the document and the <body> contains content of the document and also
having a ‘title’ for title inclusion.
XHTML SYNTAX:-
The following general syntax rules will help you use XHTML:
1. All tags begin with< and end with >. The tag name is given immediately following
the leading <.Any attribute is given following the tag-name in the form:
<tag attribute1=”value” attribute2=”value”…>
2. Tag and attribute names are given in lower case. They are of the form:
attribute_name=”value” where the value is case sensitive.
3. Unrecognized tags and attributes are ignored by browsers.
4. Most elements include opening and closing tags.
5. Elements must be well-informed.
6. Attributes can be required or optional and can be given in any order.
7. Extra white spaces and line breaks are allowed between the tag name and attributes
and around the +sign inside an attribute.
8. The block element may contain only block-level HTML element.
CORE ATTRIBUTES:-
The following are the core attributes of XHTML:
1. Id: Uniquely identifies the elements in a page.

2. Style: gives presentation styles for the individual elements
3. Class: specifies the style class for the elements
Benefits of XHTML over HTML:
 Accessibility to screen readers and other browsers for the visually impaired
 Becoming the language of choice for browsers on cell phones and mobile devices
 Compatible with programs written in XML (eXtensible Markup Language)
 More “Future-Friendly” with the emerging advancements in internet technology
 Web-based forms with enhanced interactivity and features
XHTML Tags:
<p> : paragraphs in the body of document

<br> : line breaks
<pre> : to preserve a white space in text
<h i> : is used for headings size,i=1,2,3,4,5,6
<blockquote> : block of text to be set off from the normal form
<i> : italic format
<b> : for bold
<em> : specifies that textual content is special
<sub> : subscript characters can be specified
<sup> : superscript characters can be specified
<strong> : is like the emphasis and content is bold
<code> : to specify a monospace font
<hr> : horizontal line
<meta> :to provide addition information about document
To include an image:
<img src=”path” alt=”picture name”/>
To point a different document specify the address in link tag:
<a href=”filename.html”>
<ul> : creates an unordered list
<li> : for list item
<ol> : ordered list
<dl> :definition list
<dt> : each term to be defined
<dd> : dentitions themselves are specified
<table> : to define a table
<tr> : table row
<th> : table heading
<td> : table data
<form> : components of form appear
<input> : to specify the controls
<select> : a menu is specified
<option> : a value of menu item
<textarea> : to specify a text field
<frameset> : no.of frames & their layouts can be specified
Exercise :1. CREATION OF STATIC WEBSITE USING XHTML
File name as completehtmlproj.html

<html>
<head>
<title>My XHTML Sample Page</title>
<style type="text/css">
body {
height: 100%;
margin-bottom: 30px;
}
#fixedheader {
position:relative;
top:0px;
left:0px;
width:100%;
height:30px;
color:red;
background:wheat;
padding:10px;
text-align:center;
font-size:34pt;
}
#fixedfooter {
position:absolute;
width:100%;
left:0px;
right:0px;
bottom:0px;
height:30px;
color:red;
background:wheat;
padding:10px;
text-align:center;
font-size:15pt;
}
#middle
{width: 150px;
height:150px;
background:yellow;
position:relative;
float:left;
}
#upleft {
width:200px;
position:relative;
height: 200px;
background:blue; float:right;
}
#upleft1 {
width:270px;
position:absolute;
height: 10px;
float:center;
}
#upright {
width:450px;
position:relative;
height:270px;
background:orange;
float:left;
}
.sp_gr {font-size: 25pt; font-family: Verdana; color: green}
p{fornt-size: 10pt; font-family: Arial; background-color:orange;}

h5 {font-size: 8pt; font-family: 'Times New Roman';}
h6 { font-size: 22pt; font-family: 'Courier New'; font-style:italic; }
input:hover {color: red;}
input:focus {color: green;}
</style>
</head>
<body bgcolor="aqua">
<div id="fixedheader"> Deccan College of Engg & Tech. </div>
<img src="E:\3year-2sem WPS 2017\Desert.jpg"

alt="Deser image is here" class="gallery" width="50" height="50" />
<a href="E:\3year-2sem WPS 2017\First lab prog XHTML\frames.html"> This page will
take you to DCET branches page</a>
<p> DCET is the <span class = "sp_gr"> best College in Hyderabad </span>for engineering
</p>
<p Take the next right.><!—Comment line will not shown in output page --></p>
<div id="middle">
<h4 > Lists of Teaching staff members in CSE</h4>
<ul><li>Dr.Smith </li>
<li> Dr.John</li>
</ul>
<h4 > Lists of Non-Teaching staff members in CSE</h4>
<ol><li> Allen</li>
<li> Donald</li>
</ol>
</div>
<div id="upleft1">
<img src="dcet_pic.jpg" weight="200" height="270"/></div>
<div id="upleft">
<h4>Below table shows student strength in Each year</h4>
<table border = "1" width="170" height="150" >
<caption> List of students in DCET </caption>
<tr>
<th></th>
<th> CSE</th>
<th> ECE</th>
<th> MECH</th></tr>
<th> I year </th>
<td align="left">90</td>
<td align="right">90</td>
<td align="center">120</td>
</tr>
<tr>
<th> II year </th>
<td align="left">100</td>
<td align="right">130</td>
<td align="center">148</td>
</tr>
</table>
</div>
<div id="upright">
<h4>Fill External Exam form</h4>
<form> <p>Enter name:
<input type = "text" name = "name" size = "12" /></p>
<p>Enter Rollno:<input type = "text" name = "roll" size = "12" /></p>
<p> Select the <input type = "checkbox" name ="web" value = "WPS" checked =
"checked"> WPS
<input type = "checkbox" name ="ppl" value = "PPL"> PPL
<input type = "checkbox" name = "oosd" value= "OOSD"> OOSD
<p> Select Exam:
<input type = "radio" name = "exam" value = "regular" checked = "checked">
Regular
<input type = "radio" name = "exam" value = "supply">Supplementary
<p> select mode of Exam<select name = "exam_mode">
<option> Online</option>
<option> Off-line</option>
<option> Practical </option>
<option> Viva-voce</option>
</select> <br>
Brief in expressing your feedback:
<textarea name = "feedback" rows ="3 cols = "40">
</textarea><br/>
<input type="submit" value="SUBMIT">
</div>
<div id="fixedfooter"> &copy COPY RIGHT TO DCET, Hyderabad</div>
</form>
</body>
</html>
File name as csedept.html
<html>
<head>
body
h1{font-size:30pt;color:violet;background-color:pink;}
h2{font-size:20pt;color:red;}
h3{font-size:15pt;color:green;}
.engg{color:#135790;font-style:italic;font-family:'Times New Roman';}
.desc{color:orange;font-size:25pt; font-style:bold;}
img{float:left}
.spred{font-size:45pt; font-family:arial;color:red;}
</style>
</head>
<body>
<h1>Department of CSE</h1>
<br/><h2>Mission</h2>
<h3><b>Mission:</b>
The main aim of the department is to impart basic as well as latest <br>
and advanced knowledege of Computer Science to the students so as to <br>
prepare them to face with ease any tougher assignments
<br>they might face in future, be it in higher studies or in jobs.</h3>
<p>
<img src="csed.jpg" width="500" height="100"/></p>
<p class="desc"><b>Overview </b><br>
The department was started in 1991 with an intake of 30 students, <br>which has increased
to 90 students presently with 10% additional Lateral entry admission in II year.
<br> The college has a Computer Center that is one of the best in twin cities.<br>
The centre has fully air-conditioned floor area of 6000sq .ft.
<br> and most modern hardware and software facilities.
<br>It consists of 5 IBM Servers, 110 Lenovo i3 and i5 machines arranged in three
laboratories along with the basic facilities.</p>
<h4 class="engg">Our Engineers more demand in india and abroad </h4>
<p class="engg"> best Engineering Education in Hyderabad</p>
<h1> I conclude that <span class="spred">CSE department </span>Best for Engineer.</h1>
</body>
</html>
File name as dcet.html
<html>
<body>
<h1>About DCET</h1>
<h4>file name as dcet.html</h4>
<p>Welcome
Deccan College of Engineering & Technology has been pioneering in excellent education
since 1984. DCET is one of the leading minority education provider in the entire
country.</p>
</body>
</html>
File name as ecedept.html
<html>
<head>
body
img{float:left}
</style>
</head>
<body>
<h1>Department of ECE</h1>
<h3>
Electronics & Communication Engineering dept., <br>
DCET was established in 1984 with an intake of 60 students. <br>
The student strength was later enhanced to 90 with an additional 10%
<br>for lateral entry of students in the II year.
<br>The department has well qualified and highly experienced faculty members helping
<br>the students learn & gain knowledge. The state-of- the art equipment in the laboratories
further helps students in understanding the practical aspects of the course.</h3>
<p>
<img src="eced.jpg" width="500" height="100"/></p>
<p class="desc"><b>Laboratories </b><br>
<h3><b>Laboratories: </b><br>
1.Software Lab <br>
2.Electronic Devices and Circuits Lab <br>
3.Electronic Circuits Lab <br>
4.Pulse and Digital Circuits & IC Lab<br>
<h1> I conclude that <span class="spred">ECE department </span>Best for Engineer.</h1>
</body>
</html>
Output of ecedept.html
File name as itdept.html
<html>
<head>
body
img{float:left}
</style>
</head>
<body>
<h1>Department of IT</h1>
<h3><b>Mission:</b>
The main aim of the department is to impart basic as well as latest <br>
and advanced knowledege of Information Technology to the students so as to <br>
prepare them to face with ease any tougher assignments
<br>they might face in future, be it in higher studies or in jobs.</h3>
<p>
<img src="csed.jpg" width="500" height="100"/></p>
<p class="desc"><b>Overview </b><br>
The department was started in 2000 with an intake of 60 students, <br>which has additional
Lateral entry admission in II year.
<br> The college has a Computer Center that is one of the best in twin cities.<br>
The centre has fully air-conditioned floor area of 6000sq .ft.
<br> and most modern hardware and software facilities.
<br>It consists of 5 IBM Servers, 110 Lenovo i3 and i5 machines arranged in three
laboratories along with the basic facilities.</p>
<h4 class="engg">Our Engineers more demand in india and abroad </h4>
<h1> I conclude that <span class="spred">IT department </span>Best for Engineer.</h1>

</body></html>
Output of itdept.html
File name as frames.html
<html>
<frameset cols="20%, *">
<frame src="index.html">
<frame src="dcet.html" name="descriptions"/>
</frameset>
</html>
Output of frames.html
File name as index.html
<html>
<body>
<h3> List of Branches in DCET</h3>
<h4>file name as index.html</h4>
<ul>
<li> <a href="csedept.html" target="descriptions"> CSE Dept.</a></li>
<li> <a href="ecedept.html" target="descriptions"> ECE Dept.</a></li>
<li> <a href="itdept.html" target="descriptions"> IT Dept.</a></li>
</ul>
</body>
</html>
Output of index.html
File name as csed.jpg
File name as dcet_pic.jpg

File name as eced.jpg
File name as itd.jpg

WP Lab Activity1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WP Lab Activity1

Uploaded by

Copyright:

Available Formats

XHTML

HTML is defined using the Standard Generalized Markup Language(SGML),which is an ISO

HTML VERSUS XHTML:-

 Limited practical use.

STANDARD XHTML DOCUMENT STRUCTURE:

1. Id: Uniquely identifies the elements in a page.

Benefits of XHTML over HTML:

<p> : paragraphs in the body of document

File name as completehtmlproj.html

p{fornt-size: 10pt; font-family: Arial; background-color:orange;}

<img src="E:\3year-2sem WPS 2017\Desert.jpg"

<h4>file name as dcet.html</h4>

File name as ecedept.html

.engg{color:#135790;font-style:italic;font-family:'Times New Roman';}

Electronics & Communication Engineering dept., <br>

DCET was established in 1984 with an intake of 60 students. <br>

The student strength was later enhanced to 90 with an additional 10%

<br>for lateral entry of students in the II year.

<img src="eced.jpg" width="500" height="100"/></p>

<p class="desc"><b>Laboratories </b><br>

1.Software Lab <br>

2.Electronic Devices and Circuits Lab <br>

3.Electronic Circuits Lab <br>

4.Pulse and Digital Circuits & IC Lab<br>

<p class="engg"> best Engineering Education in Hyderabad</p>

<h1> I conclude that <span class="spred">ECE department </span>Best for Engineer.</h1>

.engg{color:#135790;font-style:italic;font-family:'Times New Roman';}

and advanced knowledege of Information Technology to the students so as to <br>

prepare them to face with ease any tougher assignments

<br>they might face in future, be it in higher studies or in jobs.</h3>

<img src="csed.jpg" width="500" height="100"/></p>

<p class="desc"><b>Overview </b><br>

The centre has fully air-conditioned floor area of 6000sq .ft.

<br> and most modern hardware and software facilities.

<h4 class="engg">Our Engineers more demand in india and abroad </h4>

<p class="engg"> best Engineering Education in Hyderabad</p>

<h1> I conclude that <span class="spred">IT department </span>Best for Engineer.</h1>

File name as frames.html

<frameset cols="20%, *">

<frame src="dcet.html" name="descriptions"/>

<h3> List of Branches in DCET</h3>

<h4>file name as index.html</h4>

<li> <a href="csedept.html" target="descriptions"> CSE Dept.</a></li>

<li> <a href="ecedept.html" target="descriptions"> ECE Dept.</a></li>

<li> <a href="itdept.html" target="descriptions"> IT Dept.</a></li>

File name as dcet_pic.jpg

File name as itd.jpg

You might also like