Scribd
Upload
12 views26 pages

Iwt Lab

The document provides code examples for creating various HTML elements and structures including lists, tables, forms, frames with anchors, and style sheets. It includes the HTML code and expected output for practical exercises involving using basic HTML tags to develop structures like ordered and unordered lists, tables, forms, embedded frames, and applying internal CSS styles.

Uploaded by

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

Iwt Lab

The document provides code examples for creating various HTML elements and structures including lists, tables, forms, frames with anchors, and style sheets. It includes the HTML code and expected output for practical exercises involving using basic HTML tags to develop structures like ordered and unordered lists, tables, forms, embedded frames, and applying internal CSS styles.

Uploaded by

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

MANISH

2822941 NAYAK

PRACTICAL-1

Aim :Create a new document that takes the format of a business letter. Combine <P> and <BR> tags to properly
separate the different parts of the documents. Such as the address, greeting, content and signature.

THEORY:
<p> :The <p> tag defines a paragraph.Browsers automatically add a single blank line before and after
each <p> element.
<p>This is some text in a paragraph.</p>

<br> : The <br> tag inserts a single line break.The <br> tag is useful for writing addresses or poems.The <br> tag
is an empty tag which means that it has no end tag.
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

CODE :
<html>
<head>
<title>Business Letter</title>

</head>
<body bgcolor="lightpink">
<p>RUKSANA</p>

<p>56 wolf street</p>


<p>jammu, 132102</p>

<p>Date: October 10, 2023</p>


<br>
<p>Dear Ms. Urvinder,</p>
<p>I hope this letter finds you well. I am writing to discuss the upcoming project that we have been working on
together.
As we approach the final stages, I wanted to share some important updates.</p>

IWT
MANISH
2822941 NAYAK

<p>Our team has made significant progress, and we are on track to meet the project deadlines.

However, there are a few key milestones that require your attention and input.
We would greatly appreciate your feedback on these matters.</p>
<br>
<p>Please let us know a convenient time for you to meet and discuss these issues in more detail.
Your insights and guidance are crucial to the success of this project.</p>

<p>Thank you for your continued support, and we look forward to your response.</p>

<br>
<p> Yours Sincerely</p>
<p>RUKSANA</p>
<p>Student,3rd Year</p>
</body>

</html>

IWT
MANISH
2822941 NAYAK

OUTPUT:

IWT
MANISH
2822941 NAYAK

PRACTICAL-2

Aim : a) Create a seven-item ordered list using Roman numerals. After the fifth item, increase the next list value
by 5.

b) Beginning with an ordered list, create a list that nests both an unordered list and a definition list.

THEORY:
<ol> : The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

<li> : The <li> tag defines a list item.The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in
menu lists (<menu>).
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul> : The <ul> tag defines an unordered (bulleted) list.Use the <ul> tag together with the <li> tag to create
unordered lists.

<dl> :The <dl> tag defines a description list.The <dl> tag is used in conjunction with <dt> (defines terms/names)
and <dd> (describes each term/name).

<dd> : The <dd> tag is used to describe a term/name in a description list.The <dd> tag is used in conjunction
with <dl> (defines a description list) and <dt> (defines terms/names).Inside a <dd> tag you can put
paragraphs, line breaks, images, links, lists, etc.
<dt> : The <dt> tag defines a term/name in a description list.The <dt> tag is used in conjunction
with <dl> (defines a description list) and <dd> (describes each term/name).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

IWT
MANISH
2822941 NAYAK

CODE :
<html>
<head>

<title>LIST</title>
</head>
<body bgcolor="grey">
<ol type="I">
<li>Item 1</li>

<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 9</li>

<li>Item 14
<ul>

<li>Unordered Item 1</li>


<li>Unordered Item 2</li>
</ul>
<dl>

<dt>Definition Term 1</dt>


<dd>Definition Description 1</dd>
<dt>Definition Term 2</dt>
<dd>Definition Description 2</dd>

</dl>
</li>
</ol>
</body>

IWT
MANISH
2822941 NAYAK

</html>

OUTPUT:

IWT
MANISH
2822941 NAYAK

PRACTICAL-3

Aim : Create a table using HTML basic tags.

THEORY:
<tr> : The <tr> tag defines a row in an HTML table.A <tr> element contains one or more <th> or <td> elements.
<th> : The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells:Header cells -
contains header information (created with the <th> element) and Data cells - contains data (created with
the <td> element). The text in <th> elements are bold and centered by default.The text in <td> elements are
regular and left-aligned by default.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

CODE :
<html>

<head>
<title>Table</title>
</head>
<body>
<table border="1">

IWT
MANISH
2822941 NAYAK

<tr>
<th>Header 1</th>
<th>Header 2</th>

<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>

<td>Row 1, Col 3</td>


</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>

<td>Row 2, Col 3</td>


</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>
</table>
</body>
</html>

IWT
MANISH
2822941 NAYAK

OUTPUT:

IWT
MANISH
2822941 NAYAK

PRACTICAL-4

Aim : Create a online form in HTML.

THEORY:
<h2> : The <h1> to <h6> tags are used to define HTML headings.
<h2>This is heading 2</h2>
<form> : The <form> tag is used to create an HTML form for user input.
<label> : he <label> tag defines a label for several elements:

 <input type="checkbox">
 <input type="color">

<textarea> : The <textarea> tag defines a multi-line text input control.The <textarea> element is
often used in a form, to collect user inputs like comments or reviews.A text area can hold an
unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
CODE :
<html>
<head>
<title>Form</title>
</head>
<body>
<h2>Contact Us</h2>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

IWT
MANISH
2822941 NAYAK

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"required></textarea><br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>

IWT
MANISH
2822941 NAYAK

OUTPUT:

IWT
MANISH
2822941 NAYAK

PRACTICAL-5

Aim : Create frame with anchor tag.

THEORY:
<p> :The <p> tag defines a paragraph.Browsers automatically add a single blank line before and after
each <p> element.
<p>This is some text in a paragraph.</p>.
<br> : The <br> tag inserts a single line break.The <br> tag is useful for writing addresses or poems.The <br> tag
is an empty tag which means that it has no end tag.
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
<iframe> : The <iframe> tag specifies an inline frame.An inline frame is used to embed another
document within the current HTML document.
<iframe src="https://www.w3schools.com" title="W3Schools Online "></iframe>

CODE :
<html>
<head>
<title>Frame</title>
</head>
<body>
<p>Click the link below -></p>
<a href="https://example.com" target="myFrame">Open Example.com</a>
<br>
<iframe name="myFrame" width="800" height="400" frameborder="0"></iframe
</body>
</html>

IWT
MANISH
2822941 NAYAK

OUTPUT:

Gh

IWT
MANISH
2822941 NAYAK

PRACTICAL-6

Aim: Create links in HTML with the graphics embedding. Frame with Anchor Tag

THEORY:

<p>: The <p> tag defines a paragraph. Browser automatically add a single blank line before and after
each <p> element.
<iframe>: The <iframe> tag specifies an inline frame. An inline frame is used to embed another
document within the current HTML document.
<h1>: The <h1> tag is used to define HTML headings.

CODE:

<html>
<head>
<title>Frame with Anchor Tag</title>
</head>

<h1>Embedded Frame</h1>
<body>

<h1>Embedded Frame</h1>
<iframe src="https://www.wikipedia.org" width="600" height="400" frameborder="0"></iframe>
<p>Visit our website: <a href="https://www.wikipedia.org" target="myFrame">Wikipedia</a></p>
</body>
</html>

IWT
MANISH
2822941 NAYAK

OUTPUT

IWT
MANISH
2822941 NAYAK

PRACTICAL-7

Aim: Create a style sheet in HTML

THEORY

<style>: The <style> tag is used to define style information (CSS) for a document. Inside the
<style> element you specify how HTML elements should render in a browser.

CODE
<html>
<head>
<title>Styled Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 20px;
}
h1 {
color: black;
}
p{
line-height: 1.5;
}
.highlight {
background-color: lightpink;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
IWT
MANISH
2822941 NAYAK

<p>This is a paragraph of text on my styled page. It will have a line height of 1.5 for better
readability.</p>
<p class="highlight">This paragraph has a special highlight class applied to it.</p>
</body>
</html>

OUTPUT

IWT
MANISH
2822941 NAYAK

PRACTICAL-8

Aim: Find the factorial of a number using looping conditional statement in javascript.

CODE
<html>
<head>
<title>Factorial Calculator</title>
<script>
// Function to calculate the factorial of a number
function factorial(number) {
if (number < 0) {
return "Undefined (factorial is not defined for negative numbers)";
}
if (number === 0) {
return 1;
}
let result = 1;
for (let i = 1; i <= number; i++) {
result *= i;
}
return result;
}
// Function to display the result in the HTML document
function display Factorial() {
const input Number = document.getElementById("numberInput").value;
const result = factorial(parseInt(inputNumber));
document.getElementById("result").innerText = `The factorial of ${inputNumber} is: ${result}`;
}
</script>
</head>
<body>
<h1>Factorial Calculator</h1>
IWT
MANISH
2822941 NAYAK

<label for="numberInput">Enter a number:</label>


<input type="number" id="numberInput" placeholder="Enter a number">
<button onclick="displayFactorial()">Calculate Factorial</button>
<p id="result"></p>
</body>
</html>

OUTPUT

IWT
MANISH
2822941 NAYAK

PRACTICAL- 9
Aim: Create a program to find out whether the string is palindrome or not using javascript.

code
<html>
<head>
<title>Palindrome Checker</title>
<script>
// Function to check if a string is a palindrome
function is Palindrome(str) {
// Remove non-alphanumeric characters and convert to lowercase
const cleanStr = str.replace(/[^A-Za-z0-9]/g, '').toLowerCase();
// Compare the original and reversed strings
return cleanStr === cleanStr.split('').reverse().join('');
}
// Function to display the result in the HTML document
function checkPalindrome() {
const inputString = document.getElementById("stringInput").value;
const result = is Palindrome(inputString) ? "Yes, it's a palindrome!" : "No, it's not a
palindrome.";
document.getElementById("result").innerText = result;
}
</script>
</head>
<body>
<h1>Palindrome Checker</h1>
<label for="stringInput">Enter a string:</label>
<input type="text" id="stringInput" placeholder="Enter a string">
<button onclick="checkPalindrome()">Check Palindrome</button>
<p id="result"></p>
</body>
</html>

IWT
MANISH
2822941 NAYAK

OUTPUT

IWT
MANISH
2822941 NAYAK

PRACTICAL-10

Aim: Create a form & check the form validation through javascript.

Code
<html>
<head>
<title>Form Validation</title>
<style>
.error {
color: red;
}
</style>
<script>
// Function to validate the form
function validateForm() {
// Get form inputs
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const resultMessage = document.getElementById("result");
// Reset previous error messages
nameInput.classList.remove("error");
emailInput.classList.remove("error");
resultMessage.innerText = "";
// Validate name
if (nameInput.value.trim() === "") {
nameInput.classList.add("error");
resultMessage.innerText = "Please enter your name.";
return false;
}
// Validate email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
IWT
MANISH
2822941 NAYAK

emailInput.classList.add("error");
resultMessage.innerText = "Please enter a valid email address.";
return false;
}
// If the form is valid, display a success message
resultMessage.innerText = "Form is valid!";
return false; // Prevent the form from submiƫing
}
</script>
</head>
<body>
<h1>Form Validation</h1>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
<br>
<button type="submit">Submit</button>
</form>
<p id="result" class="error"></p>
</body>
</html>

IWT
MANISH
2822941 NAYAK

OUTPUT

IWT
MANISH
2822941 NAYAK

IWT

You might also like