Develop and demonstrate an XHTML document that illustrates the use of external style sheet, ordered list, table, borders, padding, color, and the tag

By | July 16, 2012

Prog.html

<?xml version = “1.0” encoding = “utf-8”?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

<html xmlns= “http://www.w3.org/1999/xhtml”>

<head> <title> basic html tags </title>

<!–calling Prog.css file –>

<link rel = “stylesheet” type = “text/css” href=”Prog.css”/>

</head>

<body>

<h3> Program that illustrates the use of the ecternal style sheet</h3>

<p class = “major”>

Welcome you all for the workshop on “Web Programming”

</p>

<p class = “minor”>

Hope you enjoy the sessions and make it a grand success

</p>

<h2> Introduction </h2>

<h3> 1.1 The Basics of WEB </h3>

<ol>

<li> Introduction to XHTML </li>

<li> Introduction to XML </li>

<li> Introduction to javascript </li>

<li> Introduction to Dynamic Documents </li>

</ol>

<table border = “10px”>

<caption> Sessions dates </caption>

<tr>

<th> </th>

<th class = “red”> <font color= ‘blue’> xhtml </font> </th>

<th class = “orange”> CSS </th>

<th class = “blue”> XML </th>

</tr>

<tr>

<th> thur </th>

<td> 8-9 </td>

<td> 10-11 </td>

<td> 12-11 </td>

</tr>

<tr>

<th> Fri </th>

<td> 8-9 </td>

<td> 10-11 </td>

<td> 12-1 </td>

</tr>

<tr>

<th> sat </th>

<td> 8-9 </td>

<td> 10-11 </td>

<td> 12-1 </td>

</tr>

</table>

<p>

<font color =’blue’> Now it is </font>

</p>

<p class = “one”>Now is the time for all good web programmers to learn to use stylesheets.

<br> </p>

<p>Lab session are held in the <span class = “spanred”> afternoon.

</span>

</p>

</body>

</html>

 

Prog.css

 

p.major {

font-size : 18pt;

font-style : italic;

font-family : ‘Times New Roman’;

}

 

 

p.minor {

font: 10pt bold ‘Courier New’;

}

 

h2 {

font-family : ‘Times New Roman’;

font-size: 20pt; font-wieght:bold

}

 

 

h3 {

font-family: ‘Courier New’;

font-size :16pt;

color :red;

}

 

table {

border-top-width: medium;

border-bottom-width: thick;

border-top-color: red;

border-bottom-color: blue;

border-top-style: dotted;

border-bottom-style: dashed;

}

 

p {

border-style: dashed; border-width: thin; border-color: green;

}

 

p.one {

padding: 0.2in;

background-color: #cococo;

border-style: solid;

}

 

th.red {color: red}

th.orange {color: orange}

th.blue {color: blue}.spanred {font-size: 24pt; font-family: Arial; color: red;

}

Output

Please Share: Tweet about this on TwitterShare on FacebookShare on Google+Share on RedditPin on PinterestShare on LinkedInDigg thisShare on StumbleUponShare on TumblrBuffer this pageShare on VKEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *