Scribd
Upload
6 views

WT LAB

Uploaded by

yasaswinisrit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

WT LAB

Uploaded by

yasaswinisrit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

22A81A0624 Web Technologies Lab

Task-1
Design HTML fundamental constructs

i)Headings ii)Links iii)Paragraph iv)Images v)Tables

Headings:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body>

<h1>My First Example with H1 size</h1>

<h2>My First Example with H2 size</h2>

<h3>My First Example with H3 size</h3>

<h4>My First Example with H4 size</h4>

<h5>My First Example with H5 size</h5>

<h6>My First Example with H6 size</h6>

</body>

</html>

Output:

1
22A81A0624 Web Technologies Lab
Link:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body>

<h3>Links Example</h3>

<p><a href="https://www.w3schools.com/">click here</a></p>

</body>

</html>

Output:

2
22A81A0624 Web Technologies Lab
Paragraph:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body>

<p title="Random Paragraph" align="justify">

In the quiet hush of dawn, the city awoke with a tentative stretch,its streets still glistening with the
remnants of last night's rain.

A lone figure made its way through the labyrinth of alleys, their footsteps echoing softly against the
cobblestones.

Above, the sky shifted from a deep indigo to a pale wash of morning blue, promising a day of
possibilities.

Far away, the distant murmur of traffic began to grow,gradually punctuating the serene stillness of the
early hour.

</p>

</body>

</html>

Output:

3
22A81A0624 Web Technologies Lab
Table:

<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body>

<table border="5" align="center">

<tr>

<th>DAY/PERIOD</th><th>1</th>

<th>2</th>

<th>3</th>

<th>4</th>

<th rowspan="7">Break</th>

<th>5</th>

<th>6</th>

<th>7</th></tr>

<tr>

<th>Mon</th>

<td colspan="2" align="center">PCS</td>

<td>DM</td>

<td>AI</td>

<td align="CENTER" colspan="3">MCCP</td>

</tr>

<tr>

4
22A81A0624 Web Technologies Lab
<th>Tue</th>

<td>OS</td>

<td colspan="3" align="center">DM LAB</td>

<td>AI</td>

<td>WT</td>

<td>DM</td>

</tr>

<tr>

<th>WED</th>

<td>DM</td>

<td colspan="2" align="center">WT</td>

<td>LIB</td>

<td>AI</td>

<td>DM</td>

<td>SPORTS</td>

</tr>

<tr>

<th>THU</th>

<td>AI</td>

<td>OS</td>

<td>DM</td>

<td>OS</td>

<td colspan="3" align="center">WT LAB</td>

</tr>

<tr>

5
22A81A0624 Web Technologies Lab
<th>FRI</th>

<td>DM</td>

<td>AI</td>

<td>OS</td>

<td>WT</td>

<td colspan="3" align="center">MCCP</td>

</tr>

<tr>

<th>SAT</th>

<td>WT</td>

<td>DM</td>

<td colspan="2" align="center">PCS</td>

<td>AI</td>

<td colspan="2" align="center">OS</td>

</tr>

</table>

</body>

</html>

Output:

6
22A81A0624 Web Technologies Lab
Task-2
Design HTML fundamental constructs

i)Frames ii)Forms and HTML controls

Frames:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<frameset cols="50%,50%">

<frame src="a.html">

<frame src="b.html">

</frameset>

</html>

a.html:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body>

<h1>CST</h1>

</body>

</html>

7
22A81A0624 Web Technologies Lab
b.html:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body>

<h1>CLASS</h1>

</body>

</html>

Output:

8
22A81A0624 Web Technologies Lab
Forms and HTML Controls:

<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body bgcolor=pink>

<form align="center">

<h1 align="center"><u>REGISTRATION FORM</u></h1>

<table border="2" align="center" bordercolor="black">

<td>

<table border="0" align="CENTER">

<tr>

<td align="left">First Name:</td>

<td><input type=text></td>

</tr>

<tr>

<td align="left">Last Name:</td>

<td><input type=text></td>

</tr>

<tr>

<td align="left">Gender:</td>

<td><input type=radio name=g>Male<input type=radio name=g>Female</td>

</tr>

<tr>

9
22A81A0624 Web Technologies Lab
<td align="left">Email:</td>

<td><input type=text></td>

</tr>

<tr>

<td align="left">Password:</td>

<td><input type=password></td>

</tr>

<tr>

<td align="left">Confirm Password</td>

<td><input type="password"></td> </tr>

<tr>

<td align="left">Country:</td>

<td><select name=country>

<option>India</option>

<option>USA</option>

<option>Nepal</option>

<option>Srilanka</option>

</select></td>

</tr>

<tr>

<td align="left">Zip Code:</td>

<td><input type=text></td>

</tr>

<tr>

<td align="left">Date Of Birth:</td>

10
22A81A0624 Web Technologies Lab
<td>Day<select>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

<option>7</option>

<option>8</option>

<option>9</option>

<option>10</option>

</select>Month

<select>

<option>Jan</option>

<option>Feb</option>

<option>Mar</option>

<option>Apr</option>

<option>May</option>

<option>Jun</option>

<option>Jul</option>

<option>Aug</option>

<option>Sep</option>

<option>Oct</option>

<option>Nov</option>

<option>Dec</option>

11
22A81A0624 Web Technologies Lab
</select>Year

<select>

<option>2001</option>

<option>2002</option>

<option>2003</option>

<option>2004</option>

<option>2005</option>

</select>

</td>

</tr>

<tr>

<td align="left">Hobbies:</td>

<td><input type=checkbox name=hobbies value="Playing Cricket">Playing Cricket</td>

</tr>

<tr>

<td align="left">Address:</td>

<td><textarea rows="5" cols="20"></textarea></td>

</tr>

</table>

</td>

<center><input type=submit name=submit value=Submit></center>

</table>

</form>

</body>

</html>

12
22A81A0624 Web Technologies Lab
Output:

13
22A81A0624 Web Technologies Lab
Task-3
Design Cascading Style Sheets

i)Internal ii)External iii)In-line

Internal CSS:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

<style type="text/css">

h1{

background-color: rgb(0, 255, 128);

font-style: italic;

font-family: 'Times New Roman'; }

p{

background-color: yellow;

body{

background-color: pink;}

</style>

</head>

<body>

<h1>This is Example Of Internal CSS</h1>

<p>This will show clear difference about html paragraph</p>

<h2>For this we didn't apply CSS</h2>

</body>

</html>

14
22A81A0624 Web Technologies Lab
Output:

15
22A81A0624 Web Technologies Lab
External CSS:
HTML file

<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

<link type="text/css" rel="stylesheet" href="external.css">

</head>

<body>

<h1>This is H1 Tag</h1>

<p>This will show clear differences about html Paragraph Tag</p>

</body>

</html>

CSS File

body{

text-align: right;

font-family: 'Times New Roman';

h1{

font-size:30px;

color:tomato;

text-align:center;

p{

font-size:20px

16
22A81A0624 Web Technologies Lab
Output:

17
22A81A0624 Web Technologies Lab
In-Line CSS:
<!DOCTYPE html>

<html>

<head>

<title>22A81A0624</title>

</head>

<body>

<h1 style="color:blue;text-align: center;font-size: 15px;font-family:Arial;background-color:


aquamarine;";>This is H1 Tag with In-line CSS</h1>

<p style="color:blue;text-align:right">Paragraph</p>

</body>

</html>

Output:

18
22A81A0624 Web Technologies Lab
Task-4
Write an XML file which will display the Book information which includes the following:

i)Title of the Book ii)Author Name iii)ISBN Number

iv)Publisher Name v)Edition vi)Price

a)Write a Document Type Definition(DTD) to validate the above XML file.

b)Write a XML Schema Definition(XSD)

bookstore.xml:
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bookstore SYSTEM "bookstore.dtd">

<bookstore>

<book category="Programming" language="English" availability="in_stock">

<title> C Programming</title>

<author>E.Balaguru Swamy</author>

<isbn>9856543210</isbn>

<publisher>Pearson Publications</publisher>

<edition>4th</edition>

<price currency="USD">$100</price>

</book>

<book category="Programming" language="English" availability="out_of_stock">

<title> Java Programming</title>

<author>James Gosling</author>

<isbn>9856543288</isbn>

<publisher>Pearson Publications</publisher>

<edition>4th</edition>

<price currency="USD" discount="10%">$90</price>

</book>

19
22A81A0624 Web Technologies Lab
<book category="AI" language="English" availability="in_stock">

<title>AI: A Modern Approach</title>

<author>Stuart J. Russell</author>

<isbn>9876543220</isbn>

<publisher>Princeton Hall</publisher>

<edition>6th</edition>

<price currency="USD">$36.09</price>

</book>

<book category="XML" language="English" availability="in_stock">

<title>XML Bible</title>

<author>Elliotte Rusty Harold</author>

<isbn>9876543280</isbn>

<publisher>Hungry Minds</publisher>

<edition>4th</edition>

<price currency="USD">$21.99</price>

</book>

</bookstore>

Output:

20
22A81A0624 Web Technologies Lab
bookstore.dtd:
<!ELEMENT bookstore (book+)>

<!ELEMENT book (title, author, isbn, publisher, edition, price)>

<!ATTLIST book

category CDATA #IMPLIED

language CDATA #IMPLIED

availability (in_stock | out_of_stock) "in_stock">

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT isbn (#PCDATA)>

<!ELEMENT publisher (#PCDATA)>

<!ELEMENT edition (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!ATTLIST price

currency CDATA #REQUIRED

discount CDATA #IMPLIED>

<!ENTITY % currency "USD">

<!ENTITY % availability_in_stock "in_stock">

<!ENTITY % availability_out_of_stock "out_of_stock">

Output:

21
22A81A0624 Web Technologies Lab
Bookstore.xsd:

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

xmlns="http://www.example.com/bookstore"

targetNamespace="http://www.example.com/bookstore"

elementFormDefault="qualified">

<!-- Define the root element -->

<xs:element name="bookstore">

<xs:complexType>

<xs:sequence>

<xs:element name="book" maxOccurs="unbounded">

<xs:complexType>

<xs:sequence>

<xs:element name="title" type="xs:string"/>

<xs:element name="author" type="xs:string"/>

<xs:element name="isbn" type="xs:string"/>

<xs:element name="publisher" type="xs:string"/>

<xs:element name="edition" type="xs:string"/>

<xs:element name="price">

<xs:complexType>

<xs:simpleContent>

<xs:extension base="xs:string">

<xs:attribute name="currency" type="xs:string" use="required"/>

<xs:attribute name="discount" type="xs:string" use="optional"/>

</xs:extension>

</xs:simpleContent>

</xs:complexType>

</xs:element>

22
22A81A0624 Web Technologies Lab
</xs:sequence>

<xs:attribute name="category" type="xs:string" use="optional"/>

<xs:attribute name="language" type="xs:string" use="optional"/>

<xs:attribute name="availability">

<xs:simpleType>

<xs:restriction base="xs:string">

<xs:enumeration value="in_stock"/>

<xs:enumeration value="out_of_stock"/>

</xs:restriction>

</xs:simpleType>

</xs:attribute>

</xs:complexType>

</xs:element>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

Output:

23
22A81A0624 Web Technologies Lab
Bookstore.xsl:

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- Template to match the root element and create the HTML structure -->

<xsl:template match="/bookstore">

<html>

<head>

<title>Bookstore Inventory</title>

<style>

body {

font-family: Arial, sans-serif;

table {

width: 100%;

border-collapse: collapse;

margin: 20px 0;

table, th, td {

border: 1px solid #ddd;

th, td {

padding: 8px;

text-align: left;

th {

background-color: #f4f4f4;

24
22A81A0624 Web Technologies Lab
}

tr:nth-child(even) {

background-color: #f9f9f9;

</style>

</head>

<body>

<h1>Bookstore Inventory</h1>

<table>

<thead>

<tr>

<th>Title</th>

<th>Author</th>

<th>ISBN</th>

<th>Publisher</th>

<th>Edition</th>

<th>Price</th>

<th>Category</th>

<th>Language</th>

<th>Availability</th>

</tr>

</thead>

<tbody>

<!-- Apply templates to each book element -->

<xsl:apply-templates select="book"/>

</tbody>

</table>

25
22A81A0624 Web Technologies Lab
</body>

</html>

</xsl:template>

<!-- Template to match each book element and create a table row -->

<xsl:template match="book">

<tr>

<td><xsl:value-of select="title"/></td>

<td><xsl:value-of select="author"/></td>

<td><xsl:value-of select="isbn"/></td>

<td><xsl:value-of select="publisher"/></td>

<td><xsl:value-of select="edition"/></td>

<td>

<xsl:value-of select="price"/>

</td>

<td><xsl:value-of select="@category"/></td>

<td><xsl:value-of select="@language"/></td>

<td><xsl:value-of select="@availability"/></td>

</tr>

</xsl:template>

</xsl:stylesheet>

Output:

26
22A81A0624 Web Technologies Lab

27

You might also like