Scribd
Upload
14 views11 pages

WT Lab File

Uploaded by

jatin.work.99
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
14 views11 pages

WT Lab File

Uploaded by

jatin.work.99
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/ 11

Q-3 Design a table with row span and column span and make use of attributes

colspan, rowspan, width, height, cellpadding, cellspacing etc.


CODE:
<html>

<head>

<title>Table Example</title>

<style type="text/css">

table {

width: 500px;

border: 1px solid black;

padding: 10px;

cellpadding: 5px;

cellspacing: 10px;

th {

background-color: #ccc;

font-weight: bold;

td {

text-align: center;

</style>

</head>

<body>

<table>

<tr>

<th colspan="2">Product</th>

<th>Price</th>

</tr>

<tr>

<td rowspan="2">Computer</td>

<td>Laptop</td>

<td>$1,000</td>

</tr>

<tr>
<td>Desktop</td>

<td>$500</td>

</tr>

<tr>

<th width="50">Category</th>

<td colspan="2">Electronics</td>

</tr>

</table>

</body>

</html>

OUTPUT:
Q-4

CODE:
 FRAMESET.HTML
<html>

<head>

<title>Frameset Example</title>

</head>

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

<frame src="mainmenu.html" name="leftFrame">

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

<frame src="top_right_half.html" name="topRightFrame" >

<frame src="bottom_right_half.html" name="bottomRightFrame" >

</frameset>

</frameset>

</html>

 EXPLANATION_LIST.HTML
<html>

<head>

<title>List Explanation</title>

</head>

<body>

<dl>

<dt>LIST</dt>

<dd>The HTML element is used to represent an item in a list. It must be contained


in a parent element: an ordered list , an unordered list .

In unordered lists, list items are usually displayed using bullet points. In ordered
lists, they are usually displayed with an ascending counter on the left, such as a
number or letter.</dd>

</dl>

<ul>
<li><a href="example_list.html" target="bottomRightFrame">Example</a></li>

</ul>

</body>

</html>

 EXPLANATION_TABLE.HTML
<html>

<head>

<title>Table Explanation</title>

</head>

<body>

<dl>

<dt>TABLE</dt>

<dd><html>

<head>

<title>List Explanation</title>

</head>

<body>

<dl>

<dt>LIST</dt>

<dd><html>

<head>

<title>List Explanation</title>

</head>

<body>

<dl>

<dt>LIST</dt>

<dd>In HTML, the table element is used to create structured tabular data. A table
consists of rows and columns, with each cell containing data. Tables are commonly used
to organize and display data in a grid-like format</dd>

</dl>

<ul>

<li><a href="example_table.html" target="bottomRightFrame">Example</a></li>

</li>

</ul>

</body>

</html>
 EXPLANATION_FRAME.HTML
<html>

<head>

<title>Frame Explanation</title>

</head>

<body>

<dl>

<dt>FRAME</dt>

<dd>In HTML, the term "frame" typically refers to a feature known as "frames" or
"HTML framesets." Frames were a way to divide a web page into multiple independent
sections or frames, each with its own content. Frames were commonly used in the early
days of the web for creating multi-pane layouts, such as split-screen views or
navigation menus that remained constant while other content changed.</dd>

</dl>

<ul>

<li><a href="example_frame.html" target="bottomRightFrame">Example</a></li>

</ul>

</body>

</html>

 EXAMPLE_LIST.HTML
<html>

<head>

<title>List Examples</title>

</head>

<body>

<h1>HTML Lists</h1>

<h2>Ordered List (ol)</h2>

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

<h2>Unordered List (ul)</h2>

<ul>

<li>Item A</li>
<li>Item B</li>

<li>Item C</li>

</ul>

<h2>Definition List (dl)</h2>

<dl>

<dt>Term 1</dt>

<dd>Definition 1</dd>

<dt>Term 2</dt>

<dd>Definition 2</dd>

<dt>Term 3</dt>

<dd>Definition 3</dd>

</dl>

</body>

</html>

 EXAMPLE_TABLE.HTML
<html>

<head>

<title>Table Example</title>

</head>

<body>

<table border="1">

<caption>Monthly Expenses</caption>

<tr>

<th>Category</th>

<th>Amount (USD)</th>

</tr>

<tr>

<td>Rent</td>

<td>1000</td>

</tr>

<tr>

<td>Utilities</td>

<td>200</td>

</tr>
<tr>

<td>Groceries</td>

<td>300</td>

</tr>

</table>

</body>

</html>

 EXAMPLE_FRAME.HTML
<html>

<head>

<title>Frame Example</title>

</head>

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

<frame src="">

<frame src="">

</frameset>

</html>

OUTPUT:
Q19) Write a Program to show the usage of alert box and confirm box.
Input(Code):-
<html>

<head>

<script>

function myfunction()

alert("I am an alert box");

</script>

</head>

<body>

<input type="button" onclick="myfunction()" value="Show alert box"/>

</body>

</html>

Output:-

Q20) Write a program to implement event handling using onclick, onmouseover and
onmouseout events.

i)Onclick
Input(Code):-
<html>

<head>
<script type="text/javascript">

function sayHello(){

alert ("Hello World")

</script>

</head>

<body>

<input type ="button" onclick="sayHello()" value="CLICK HERE"/>

</body>

</html>

Output:-

ii) Onmouseover and Onmouseout Events

Input(Code):-
<html>

<head>

<script type="text/javascript">

function f1() {

alert("Hello World")

</script></head>

<input type="button" value="Click Me for mouse over" onmouseover="f1()">

<input type="button" value="Click Me for mouse out" onmouseout="f1()">


Output:-

You might also like