Professional Documents
Culture Documents
Web Technologies
Web Technologies
Lab experiments
Directorate of Distance Education, Kurukshetra University
Output:
4. Write HTML for demonstration of cascading stylesheets.
d. Embedded stylesheets.
e. External stylesheets.
f. Inline styles.
Embedded stylesheets:
<html>
<head>
<title>Embedded Style sheets</title>
<style type=”text/css”>
body{backgroun d-color:
pink;}
h1
{color:orange; text-align:
center;
}
p{
font-family: "Times New
Roman";
font-size: 20px;
}
</style>
</head>
<body>
</html>
Output:
External Stylesheets:
extern.css:
body {background-color: #d0e4fe;} h1 {
color: orange; text-align: center;
}
p{
font-family: "Times New Roman"; font-size: 20px;
}
External .html:
<html>
<head>
<title>External Style Sheets</title>
<link rel=”stylesheet” type=”text/css” href=”extern.css”>
</head>
<body>
<h1>External Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
Inline styles:
<html>
<head>
<title>HTML Tables</table>
</head>
<body bgcolor=‟pink‟>
<center>
<h1>Creating HTML Tables</h1><br>
<table border=”2” cellpadding=”4” cellspacing=”4”>
<tr>
<th colspan=”2” style=”background-color:red”> WebSites</th>
</tr>
<tr>
<th style=”background- color:blue”>MailSites</th>
<td style=”background-color:grey”>Gmail</td>
<td style=”background-color:aqua”>Naukri</td>
</tr>
<tr>
<td style=”background- color:yellow”>Yahoo</td>
<td style=”background- color:purple”>JobStreet</td>
</tr>
</table>
</center>
</body>
</html>
Output:
5. Write a program to display contents of XML file in a table using Extensible Style Sheets ?
Book.xml:
<?xml version="1.0"?>
<?xml:stylesheet type="text/xsl" href="book.xsl"?>
<book>
<bookinfo>
<title>C</title>
<authorname>Balaguru Swamy</authorname>
<isdnno>1234</isdnno>
<publisher>pearson</publisher>
<edition>4th</edition>
<price>$50</price>
</bookinfo>
<bookinfo>
<title>c++</title>
<authorname>Balaguru Swamy</authorname>
<isdnno>5678</isdnno>
<publisher>technical</publisher>
<edition>3rd</edition>
<price>$100</price>
</bookinfo>
</book>
Book.xsl:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" omit-xml-declaration="no"/>
<xsl:template match="/">
<html>
<head>
<title>Book</title>
</head>
<body>
<center>
<table border="1" bgcolor=”grey”>
<thead >
<tr>
<th>title</th>
<th>authorname</th>
<th>isdnno</th>
<th>publisher</th>
<th>edition</th>
<th>price</th>
</tr>
</thead>
<xsl:for-each select="book/bookinfo">
<tr>
<td style="background-color:pink"><xsl:value-of select="title"/></td>
<td style="background-color:red"><xsl:value-of select="authorname"/></td>
<td style="background-color:green"><xsl:value-of select="isdnno"/></td>
<td style="background-color:purple"><xsl:value-of select="publisher"/></td>
<td style="background-color:brown"><xsl:value-of select="edition"/></td>
<td style="background-color:yellow"><xsl:value-of select="price"/></td>
</tr>
</xsl:for-each>
</table>
</center>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Output:
Test Formatting
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is <sup>superscripted</sup> text.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<small>This is some smaller text.</small>
<em>This text is emphasized</em>
<i>This text is italic</i>
<strong>This text is important!</strong>
<b>This text is bold</b>
<pre>
My Bonnie lies over the ocean.