Download as pdf or txt
Download as pdf or txt
You are on page 1of 54

S.NO.

INDEX SIGNATURES
1 WAP TO SHOW LIST IN HTML

2 WAP TO INSERT IMAGE IN HTML

3 WAP TO DRAW TIME TABLE

4 WAP TO SHOW FRAME IN HTML

5 WAP TO DRAW A FORM IN HTML

6 WAP TO SHOW VARIOUS TEXT STRUCTURING TAG

7 WAP TO SHOW EXTERNAL & INTERNAL LINKING

8 WAP TO SHOW VARIOUES PAGELAYOUT TAGS

9 WAP TO SHOW TABLE ATTRIBUTES

10 WAP TO SHOW VARIOUS TEXTSTYLE TAGS

CREATE A WEBPAGE TO SHOW TYPES OF CSS


11 (INTERNAL,EXTERNAL,INLINE)
CREATE A TABLE USING CSS PROPERTIES
12

WAP OF XML USING EXTERNAL CSS


13

WAP OF XML
14
WAP OF JAVASCRIPT IN EVENT HANDLERS
15

WAP OF VBSCRIPT
16
CREATE A WEBPAGE TO SHOW DIFFERENT LINK
17 USING CSS
WRITE A PROGRAM OF JAVASCRIPT TO SHOW
DIFFERENT MESSAGE AND INPUT BOX
18
CREATE A WEBPAGE ADDING SOUND AND
VIDEO IN CSS
19
CREATE A WEBPAGE TO SHOW WEBPAGE OF
20 AMAZON
1) CREATE A WEBPAGE TO SHOW LIST IN HTML

<html>
<head>
< tle>list</ tle>
</head>
<body>
<p>orderd list</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>unorderd list</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>descrip on list</p>
<dl>
<dt>Coffee</dt>
<dd>‐ black hot drink</dd>
<dt>Milk</dt>
<dd>‐ white cold drink</dd>
</dl>
<p>nested list</p>
<ul>
<li>Recipes</li>
<ul>
<li>Christmas Recipes</li>
<ul>
<li>Cookies</li>
<li>Sweet Potato</li>
</ul>
<li>Fall Recipes</li>
<ul>
<li>Pasta</li>
<li>Pancakes</li>
<ul>
<li>Pancakes 1</li>
<li>Pankes 2</li>
</ul>
<li>Pumpkin Pie</li>
</ul>
<li>Indian Recipes</li>
<ul>
<li>Bu er</li>
<li>Chole</li>
</ul>
</ul>
<li>Ingredients</li>
</ul>
</body>
</html>
2) CREATE A WEBPAGE IMAGE IN HTML

<html>
<head>
< tle>insert a image</ tle>
</head>
<body>
<b>this is an image of html icon</b><br>
<img src="th.jpg" alt="HTML5 Icon" width="300" height="300" border="5">
</body>
</html>
3) WAP TO DRAW TIME TABLE

<html>
<head>
< tle> me table</ tle>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td colspan="8" align="CENTER">DRONACHARYA DEGREE
COLLEGE</td>
</tr>
<tr>
<TD colspan="8" align="CENTER">BCA TIME TABLE JULY 2023</TD>
</tr>
<TR>
<td></td>
<td></td>
<td>9:45‐10:30</td>
<td>10:30‐11:15</td>
<td>11:15‐12:00</td>
<td>12:00‐12:45</td>
<td>12:45‐1:30</td>
<td>1:30‐2:15</td>
</TR>
<tr>
<td rowspan="3">MONDAY</td>
<td>BCA 1st</td>
<td>103(TK)</td>
<td>101(AB)L</td>
<td>102(PR)L</td>
<td>104(RL)</td>
<td>VAC(SH)</td>
<td>MDC(DE)</td>
</tr>
<tr>
<td>BCA 3rd</td>
<td>233(PR)</td>
<td>231(RS)</td>
<td>232(TK)</td>
<td>235(AB)</td>
<td>234(TK)</td>
<td></td>
</tr>
<tr>
<td>BCA 5th</td>
<td>353(RS)</td>
<td>352(PR)</td>
<TD>354(AB)</TD>
<td>354(TK)L</td>
<td>356(RS)</td>
<td></td>
</tr>
<tr height="15">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">TUESDAY</td>
<td>BCA 1st</td>
<td>103(TK)</td>
<td>101(AB)</td>
<td>SEC(RS)L</td>
<td>104(RI)</td>
<td>VAC(SH)</td>
<td>MDC(DE)</td>
</tr>
<tr>
<td>BCA 3rd</td>
<td>233(PR)</td>
<td>231(RS)L</td>
<td>232(TK)L</td>
<td>235(AB)</td>
<td>234(TK)</td>
<td></td>
</tr>
<TR>
<td>BCA 5th</td>
<td>353(RS)</td>
<td>352(PR)</td>
<TD>354(AB)</TD>
<td>354(TK)L</td>
<td>356(RS)</td>
<td></td>
</TR>
<tr height="15">
<td></td>
<td></td>
<td></td>

<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<td rowspan="3">WEDNESDAY</td>
<td>BCA 1st</td>
<td>103(TK)</td>
<td>101(AB)L</td>
<td>SEC(RS)L</td>
<td>104(RI)</td>
<td>VAC(SH)</td>
<td>MDC(DE)</td>
</tR>
<tr>
<td>BCA 3rd</td>
<td>233(PR)</td>
<td>231(RS)</td>
<td>232(TK)L</td>
<td>235(AB)</td>
<td>236(RB))</td>
<td>234(TK)</td>
</tr>
<TR>
<td>BCA 5th</td>
<td>353(RS)</td>
<td>352(PR)</td>
<TD>354(AB)</TD>
<td>351(TK)L</td> <TD>355(AB)</TD>
<td>356(RS)</td>
</TR>
<tr height="15">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tr>
<td rowspan="3">THRUSDAY</td>
<td>BCA 1st</td>
<td>103(TK)</td>
<td>101(AB)L</td>
<td>AEW(MS/SR/HS)</td>
<td>104(RI)</td>
<td>SEC(RS/SK)L</td>
<td>MDC(DE)</td>
</tR>
<tr>
<td>BCA 3rd</td>
<td>233(PR)</td>
<td>231(RS)L</td>
<td>232(TK)L</td>
<td>235(AB)</td>
<td>236(RB))</td>
<td>234(TK)</td>
</tr>
<TR>
<td>BCA 5th</td>
<td>353(RS)</td>
<td>352(PR)</td>
<TD>356(RS)</TD>
<td>351(TK)L</td>
<TD>355(AB)</TD>
<td></td>
</TR>
<tr height="15">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">FRIDAY</td>
<td>BCA 1st</td>
<td>103(TK)</td>
<td>101(AB)L</td>
<td>AEW(MS/SR/HS)</td>
<td>102(PR)</td>
<td>SEC(RS/SK)L</td>
<td>SEC(RS/SK)L</td>
</tR>
<tr>
<td>BCA 3rd</td>
<td>233(PR)</td>
<td>231(RS)L</td>
<td>232(TK)L</td>
<td>235(AB)</td>
<td>236(RB))</td>
<td>234(TK)</td>
</tr>
<TR>
<td>BCA 5th</td>
<td>353(RS)</td>
<td>352(PR)</td>
<TD>354(AB))</TD>
<td>351(TK)L</td>
<TD>355(RS)</TD>
<td></td>
</TR>
<tr height="15">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">SATURDAY</td>
<td>BCA 1st</td>
<td>103(TK)</td> <td>101(AB)</td>
<td>AEW(MS/SR/HS)</td>
<td>102(PR)</td>
<td>SEC(RS/SK)L</td>
<td></td>
</tR>
<tr>
<td>BCA 3rd</td>
<td>233(PR)</td>
<td>231(RS)L</td>
<td>232(TK)L</td>
<td>235(AB)</td>
<td>236(RB))</td>
<td></td>
</tr>
<TR>
<td>BCA 5th</td>
<td>353(RS)</td>
<td>352(PR)</td>
<TD>354(AB))</TD>
<td>356(RS)</td>
<TD>355(AB)</TD>
<td>351(TK)L</td>
</TR>
</table>
</body>
</html>
4) CREATE A WEBPAGE TO SHOW FRAME IN HTML

<HTML>
<HEAD>
<TITLE>A Complete HTML Frameset Exmaple | TutorialsClass.com</TITLE>
</HEAD>
<frameset cols="60%, 40%" bordercolor="blue" noresize="noresize">
<frameset rows="140, 160" bordercolor="red">
<frame name="first‐frame" src="text style.html">
<frame name="second‐frame" src="image.html">
</frameset>
<frame name="third‐frame" src="list.html">
<noframes>
<p> This document contains frames content. You browser does not support it. </p>
</noframes>
</frameset>
</HTML>
5) WAP TO DRAW A FORM IN HTML
<html>
<head>
< tle>Form</ tle>
</head>
<body>
<form>
<fieldset>
<legend>user informa on</legend>
name:<br><input type="text" name="name" placeholder="name"><br></br>
father's name:<br><input type="test" name="father's name" placeholder="father's
name"><br></br>
class:<br><input type="text" name="class" placeholder="class"><br></br>
roll no.:<br><input type="number" name="roll no." placeholder="roll
noo."><br></br>
date:<br><input type="date" name="date" placeholder="date"><br></br>
gender:<br>male<input type="radio" name="gender" value="male"/>
female:<input type="radio" name="gender" value="female"/><br></br>
hoppy:<br><input type="checkbox" name="game" value="game">game<br>
<input type="checkbox" name="comics" value="comics">comics<br>
<input type="checkbox" name="anima on" value="anima on">anima on<br><br>
password:<br><input type="password" name="password"
placeholder="password"><br></br>
<bu on type="submit"
form="form"
value="submit">submit</bu on>
</fieldset>
</form>
</body>
</html>
6 ) CREATE A WEBPAGE TO SHOW VARIOUS TEXT STRUCTURING TAG

<html>
<head>
< tle>text structring</ tle>
</head>
<body>
<p align="le ">this tag is used to define a paragraph. which is aligned to the le </p>
<p align="right">paragraph align to the right</p>
<p align="center">paragraph align to the centre</p>
this tag is used to to produce a horizontal line this is empty tag <hr>
this tag is used to produce a horoizontal line spread across the width of the browser
window<br>this is empty tag<hr>
horizontal rules having size of 36 pixels
<hr size="30">
horizontal rules having size of 36 pixels with no shades
<hr size=36 noshade>
horizontal rules having size of 36 pixels with no shads and 50% width
<hr size=36 noshade width=50%>
</body>
</html>
7 ) CREATE A WEBPAGE TO SHOW EXTERNAL & INTERNAL LINKING

(EXTERNAL LINKING)

<html>
<head>
< tle>Links</ tle>
</head>
<body>
<h1>External Links</h1>
<sec on>
<p>
<a href="internal linking.html">
this link is the example of internal linking
</a>
</p>
</sec on>
</body>
</html>

(INERTNAL LINKING)
<html>
<head>
< tle>internal linking</ tle>
</head>
<body>
<h1>Internal linking</h1>
<a href="#lession1">Lession.1</a><br><br>
<a href="#lession2">Lession.2</a><br><br>
<a href="#lession3">Lession.3</a><br><br>
<a href="#lession4">Lession.4</a><br><br>
<br />

<a id="lession1">Introduc on of Lession.1</a>


<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession2">Introduc on of Lession.2</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession3">Introduc on of Lession.3</a>
<p>This is sub topic.1</p>
<p>This is sub topic.2</p>
<p>This is sub topic.3</p>
<p>This is sub topic.4</p>
<br />
<br />
<a id="lession4">Introduc on of Lession.4</a>
<p>This is sub topic.1</p> <p>This is sub
topic.2</p> <p>This is sub topic.3</p>
<p>This is sub topic.4</p>
</body>
</html>
8) CREATE A WEBPAGE TO SHOW VARIOUES PAGELAYOUT TAGS

<html>
<head>
< tle>page layout</ tle>
</head>
<body topmargin="70"
le margin="100"
rightmargin="100"
background="kk.jpg">
<h1>Page layout</h1>
<b>The page layout feature allow us to use tags to lay out the en re page.
You can page margins, change the background color of a page, and set
background im of a web page. </b><br>
</body>
</html>
7) CREATE A WEBPAGE TO SHOW TABLE ATTRIBUTES

<html>
<head>
< tle>table a ribute</ tle>
</head>
<body>
<table border="1" cellpadding="20" cellspacing="5">
<tr>
<td rowspan="4">table</td>
<td>name</td>
<td>class</td>
<td>score</td>
</tr>
<tr>
<td>ram</td>
<td>bca</td>
<td>88</td>
</tr>
<tr>
<td>akaash</td>
<td>bba</td>
<td>94</td>
</tr>
<tr>
<td colspan="2">total</td>
<td>166</td>
</tr>
</table>
</body>
</html>
10) CREATE A WEBPAGE TO SHOW VARIOUS TEXTSTYLE TAGS

<html>
<head >
< tle>test style</ tle>
</head>
<body>
using the <b>bold tag</b><br></br>
using the <i>italic text</i><br></br>
using the <u>underline tag</u><br></br>
using the < >typewriter tag</ ><br></br>
using the <sup>superscript tag</sup><br></br>
using the <sub>subscript tag</sub><br></br>
using the <s>strike</s><br></br>
using the <small>smaller in size</small><br></br>
using the <big>larger in size</big><br></br>
using the <blink>blinking text</blink><br></br>
<address>used to write address and contact informa onn</address><br>
</body>
</html>
11) CREATE A WEBPAGE TO SHOW TYPES OF CSS
(INTERNAL,EXTERNAL,INLINE)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types</title>

<!-- External CSS -->


<link rel="stylesheet" href="styles.css">

<style>
/* Internal CSS */
.internal {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Types of CSS</h1>

<!-- Inline CSS -->


<p style="color: green;">This is Inline CSS.</p>

<p class="internal">This is Internal CSS.</p>

<p>This is an example of External CSS.</p>


</body>
</html>
12) CREATE A TABLE USING CSS PROPERTIES

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple CSS Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table">
<div class="row header">
<div class="cell">Name</div>
<div class="cell">Age</div>
<div class="cell">Email</div>
</div>
<div class="row">
<div class="cell">John Doe</div>
<div class="cell">30</div>
<div class="cell">johndoe@example.com</div>
</div>
<div class="row">
<div class="cell">Jane Smith</div>
<div class="cell">25</div>
<div class="cell">janesmith@example.com</div>
</div>
<div class="row">
<div class="cell">James Brown</div>
<div class="cell">35</div>
<div class="cell">jamesbrown@example.com</div>
</div>
</div>
</body>
</html>
13) WRITE A PROGRAM OF XML USING EXTERNAL CSS

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


<?xml-stylesheet type="text/css" href="styles.css"?>
<library>
<book>
<title>The Great Gatsby</title>
<author>F. Scott Fitzgerald</author>
<year>1925</year>
</book>
<book>
<title>To Kill a Mockingbird</title>
<author>Harper Lee</author>
<year>1960</year>
</book>
<book>
<title>1984</title>
<author>George Orwell</author>
<year>1949</year>
</book>
</library>
OUTPUT-
14) WRITE A PROGRAM OF XML

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

<library>

<book>

<title>Python Programming</title>

<author>John Doe</author>

<genre>Programming</genre>

<price>29.99</price>

</book>

<book>

<title>Intro to XML</title>
<author>Jane Smith</author>

<genre>XML</genre>

<price>19.99</price>

</book>

</library>
15) WRITE A PROGRAM OF JAVASCRIPT IN EVENT HANDLERS

<!DOCTYPE html>

<html>

<head>

<title>Event Handlers Example</title>

</head>

<body>

<h1 id="demo">Hello, World!</h1>

<button id="changeTextBtn">Change Text</button>

<!-- Include JavaScript -->

<script src="script.js"></script>

</body>

</html>
16) WRITE A PROGRAM OF VBSCRIPT
' VBScript program to greet the user

' Prompt the user for their name

name = InputBox("Enter your name:")

' Check if the user entered a name

If name <> "" Then

' Greet the user with a message

MsgBox "Hello, " & name & "! Welcome to VBScript!", vbInformation, "Greeting"

Else

' Display a message if the user didn't enter a name

MsgBox "Hello, stranger! Welcome to VBScript!", vbInformation, "Greeting"

End If
17) CREATE A WEBPAGE TO SHOW DIFFERENT LINK USING CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Links</title>
<style>
/* CSS Styles */
body {
font-family: Arial, sans-serif;
margin: 20px;
}

/* Basic Link Styles */


a{
display: block;
margin-bottom: 10px;
padding: 10px;
color: #333;
text-decoration: none;
border: 1px solid #333;
border-radius: 5px;
transition: all 0.3s ease;
}

a:hover {
background-color: #333;
color: #fff;
}

/* Styled Links */
.styled-link1 {
background-color: #007bff;
color: #fff;
}

.styled-link2 {
background-color: #28a745;
color: #fff;
}

.styled-link3 {
background-color: #dc3545;
color: #fff;
}

.styled-link4 {
background-color: #ffc107;
color: #333;
}
</style>
</head>
<body>
<h1>Styled Links</h1>

<!-- Different Styled Links -->


<a href="#" class="styled-link1">Styled Link 1</a>
<a href="#" class="styled-link2">Styled Link 2</a>
<a href="#" class="styled-link3">Styled Link 3</a>
<a href="#" class="styled-link4">Styled Link 4</a>
</body>
</html>
18) WRITE A PROGRAM OF JAVASCRIPT TO SHOW DIFFERENT MESSAGE
AND INPUT BOX

<!DOCTYPE html>
<html>
<head>
<title>Message and Input Box Example</title>
<script>
// Function to display a message
function showMessage() {
alert("Hello! This is an alert message.");
}

// Function to ask for user input and display it


function showInput() {
var userInput = prompt("Please enter your name:", "John Doe");
if (userInput != null && userInput != "") {
alert("Hello, " + userInput + "! Your name has been recorded.");
} else {
alert("You did not enter a name.");
}
}

// Function to ask for confirmation


function showConfirmation() {
var result = confirm("Are you sure you want to proceed?");
if (result) {
alert("You clicked OK!");
} else {
alert("You clicked Cancel!");
}
}
</script>
</head>
<body>
<h1>Message and Input Box Example</h1>
<button onclick="showMessage()">Show Message</button>
<button onclick="showInput()">Ask for Input</button>
<button onclick="showConfirmation()">Show Confirmation</button>
</body>
</html>
19) CREATE A WEBPAGE ADDING SOUND AND VIDEO IN CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sound and Video Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Sound and Video Example</h1>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
</div>
</body>
</html>
20) CREATE A WEBPAGE TO SHOW WEBPAGE OF AMAZON

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Amazon Webpage</title>

<style>

body, html {

margin: 0;

padding: 0;

height: 100%;

iframe {

width: 100%;

height: 100vh;

border: none;

</style>

</head>

<body>

<iframe src="https://www.amazon.com/" title="Amazon Webpage"></iframe>

</body>

</html>

You might also like