Practical WebTech

Practical 1
AIM: An Introduction to HTML: Building the Foundation of the Web

THEORY:
HTML, which stands for Hypertext Markup Language, is the standard markup language used to create
web pages. It is a fundamental technology for building websites and web applications. HTML is used to
structure the content on a web page by using various elements and tags to define different types of
content, such as text, images, links, and more.
Here's a basic example of HTML code:
<html>
<head>
<title>
</title>
</head>
<body>
Hello World
</body>
</html>
HTML is an important part of web development, but it often works in conjunction with CSS (Cascading
Style Sheets) for styling and JavaScript for interactivity to create fully functional and visually appealing
websites.
OUTPUT:
Practical 2
AIM: Exploring Dynamic HTML (DHTML): Enhancing Web Interactivity and User
Experience
THEORY:
Dynamic HTML (DHTML) is a combination of technologies used to create interactive and dynamic web
pages. DHTML allows web developers to manipulate the content and presentation of web pages in real-
time, providing a richer and more engaging user experience. It typically involves the use of HTML, CSS
(Cascading Style Sheets), and JavaScript to achieve these dynamic effects.
Here's an introduction to the key components of DHTML:
1. HTML (Hypertext Markup Language): HTML is the foundation of DHTML. It is used to structure the
content of web pages. Elements and tags define the layout and basic structure of the page, such as
headings, paragraphs, lists, images, and links.
2. CSS (Cascading Style Sheets):CSS is used to control the presentation and styling of web pages.
With CSS, you can change the layout, color, fonts, and other visual aspects of a page. In DHTML, CSS
is often used to create smooth transitions, animations, and style changes that occur dynamically in
response to user actions.
3. JavaScript: JavaScript is a crucial scripting language for DHTML. It allows you to add interactivity and
manipulate HTML and CSS in real-time. JavaScript is used to respond to user actions (like clicks and
mouse movements), update content without requiring a full page reload, and create animations, among
other things.
4. DOM (Document Object Model): The DOM is a programming interface for web documents. It
represents the page so that programs can change the document structure, style, and content.
JavaScript interacts with the DOM to make dynamic changes to the web page. Elements in the DOM
can be accessed, modified, or deleted using JavaScript, allowing developers to create interactive web
applications.
5. Events: Events are user actions or occurrences that happen on a web page, such as mouse clicks,
keyboard inputs, or page load. In DHTML, JavaScript can be used to respond to these events, triggering
actions or animations. Event handling is a fundamental aspect of creating dynamic and responsive web
pages.
DHTML is a key component of modern web development and plays a crucial role in creating engaging
and interactive web applications. It allows for a more responsive and user-friendly browsing
experience, making web pages feel more like applications than static documents.
Practical 3
AIM: Exploring Basic Tags of HTML.
THEORY:
HTML (Hypertext Markup Language) uses a variety of tags to structure and format web content. Here
are some of the most basic and commonly used HTML tags:
1. <!DOCTYPE html>: Declares the document type and version of HTML being used. It should be the
first line in an HTML document.
2. <html>: The root element that contains the entire HTML document.
3. <head>: Contains metadata about the document, such as the title, character set, and links to
external resources like CSS and JavaScript files.
4.<title>: Sets the title of the web page, which appears in the browser's title bar or tab.
8.<body>: Contains the visible content of the web page, including text, images, links, and other
elements.
9. <h1>, <h2>, `<h3>`, `<h4>`, `<h5>`, `<h6>`: Headings of various levels, with `<h1>` being the
highest level and `<h6>` being the lowest.
10.< p>: Defines a paragraph of text.
11. <a>: Creates hyperlinks, allowing you to link to other web pages or resources.
12. <ul>: Represents an unordered (bulleted) list.
13. <ol>: Represents an ordered (numbered) list.
14. <li>: Defines list items within `<ul>` or `<ol>`.
15. <img>: Embeds images in the web page.
16. <br>: Inserts a line break, typically used within text to create a new line.
17. <hr>: Creates a horizontal line or rule, often used for separating content.
18. <div>: A generic container used to group and style sections of content
19.<table>: Defines a table, which can have rows (`<tr>`), columns (`<td>` for data cells or `<th>`
for header cells), and other table-related elements.
20. <form>: Represents a form that can be used to collect user input, such as text fields, checkboxes,
and radio buttons.
21.<input>: Used within a form to create input fields for text, passwords, radio buttons, checkboxes,
etc.
These are some of the most basic HTML tags that are commonly used to structure and format web
content. HTML tags are used in combination to create web pages with text, images, links, forms, and
more.
Here’s an example of a webpage created using basic tags of HTML:
CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Basic HTML Document</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
<h2>Lists</h2>
<ul>
<li>Unordered List Item 1</li>
</ul>
<ol>
<li>Ordered List Item 1</li>
</ol>
<h3>Images</h3>
<img src="example.jpg" alt="Example Image">
<h4>Line Break and Horizontal Rule</h4>

<p>This is some text.<br>Here's a line break.</p>
<hr>
<h5>Div Container</h5>
<div>
This is a div container.
</div>
<h6>Table</h6>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<h3>Hyperlink</h3>
<p>Visit our website: <a href="https://www.example.com">Example.com</a></p>
</body>
</html>
OUTPUT:
PRACTICAL 4
AIM: Understanding HTML Tables: Organizing Data with <table>
Theory:
The <table> tag in HTML is used to create tables, which are a way to organize and display data in a
structured grid format. Tables consist of rows and columns, with each cell in the table containing data.
The <table> element is a container that holds all the elements related to the table structure, including
rows and cells.
Here are the key components and attributes of the <table> tag:
1. <table>: This is the opening tag that indicates the start of a table. It can have various attributes
to define the table's properties.
• border: Specifies the width of the border around the table. Common values are 0 (no
border) or 1 (thin border).
• width: Sets the width of the table. You can specify this value in pixels, percentages, or
other units.
• cellspacing: Determines the space between cells. Adding cellspacing="0" will remove
the space between cells.
• cellpadding: Sets the space within each cell, providing padding. Adding cellpadding="5"
will create 5 pixels of padding within each cell.
2. <tr> (Table Row): This tag is used to define a row within the table. It contains one or more <td>
or <th> elements.
3. <th> (Table Header Cell): This tag is used to define header cells within a row. Header cells are
typically used in the first row or column of a table to label or describe the data in the columns.
They are rendered with bold and centered text by default.
4. <td> (Table Data Cell): This tag is used to define data cells within a row. Data cells contain the
actual data that you want to display in the table.
Tables are commonly used to display data, such as charts, schedules, or tabular information. You can
further style and format tables using CSS to meet your design and layout requirements.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Table Example</title>
<style>
table {
width: 70%;
margin: 0 auto;
border-collapse:
}
th, td {
padding: 10px;
text-align: center;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Employee Information</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Position</th>
<th>Department</th>
</tr>
<tr>
<td>John Doe</td>
<td>Web Developer</td>
<td>IT</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Graphic Designer</td>
<td>Design</td>
</tr>
<tr>
<td>Robert Johnson</td>
<td>Marketing Manager</td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>
Output:
PRACTICAL 5:
AIM: Exploring HTML forms
THEORY:
The <form> tag in HTML is used to create a container for various form elements on a web page. It allows
users to input and submit data. Key points to understand about the <form> tag are:
• Purpose: The <form> tag is used to group and organize form elements such as text inputs,
checkboxes, radio buttons, and buttons, which are used for collecting user data.
• Attributes:
• action: This attribute specifies the URL to which the form data will be sent when the
user submits the form. It typically points to a server-side script or a web page for
processing the data.
• method: This attribute defines how the form data should be sent to the server. The two
common values are "GET" and "POST." "GET" appends data to the URL, while "POST"
sends data in the body of the HTTP request.
• Form Elements: Within the <form> element, various form elements can be included to gather
user input, such as text fields, radio buttons, checkboxes, and select lists. Each of these
elements is enclosed within its own HTML tags.
• Label Elements: Using <label> elements is considered good practice. The for attribute of a
label should match the id attribute of the corresponding form element. This associates the label
with the input, making it more accessible and user-friendly.
• Submit Button: Most forms include a "Submit" button. It is typically created using an <input>
element with the type set to "submit." This button allows users to submit their input data to the
server.
In summary, the <form> tag is a crucial HTML element for creating interactive web forms. It provides
the structure and functionality for users to input and submit data, and it allows developers to specify
where and how the form data should be processed.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Table with Colspan and Rowspan</title>
<style>
table {
border-collapse: collapse;
width: 50%;
margin: 20px auto;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Table with Colspan and Rowspan</h1>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row 1, Cell 1 (rowspan 2)</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3">Row 3, Cell 1 (colspan 3)</td>
</tr>
</table>
</body>
</html>
OUTPUT:
PRACTICAL 6:
AIM: Exploring HTML forms
THEORY:
The <form> tag in HTML is used to create a container for various form elements on a web page. It allows
users to input and submit data. Key points to understand about the <form> tag are:
• Purpose: The <form> tag is used to group and organize form elements such as text inputs,
checkboxes, radio buttons, and buttons, which are used for collecting user data.
• Attributes:
• action: This attribute specifies the URL to which the form data will be sent when the
user submits the form. It typically points to a server-side script or a web page for
processing the data.
• method: This attribute defines how the form data should be sent to the server. The two
common values are "GET" and "POST." "GET" appends data to the URL, while "POST"
sends data in the body of the HTTP request.
• Form Elements: Within the <form> element, various form elements can be included to gather
user input, such as text fields, radio buttons, checkboxes, and select lists. Each of these
elements is enclosed within its own HTML tags.
• Label Elements: Using <label> elements is considered good practice. The for attribute of a
label should match the id attribute of the corresponding form element. This associates the label
with the input, making it more accessible and user-friendly.
• Submit Button: Most forms include a "Submit" button. It is typically created using an <input>
element with the type set to "submit." This button allows users to submit their input data to the
server.
In summary, the <form> tag is a crucial HTML element for creating interactive web forms. It provides
the structure and functionality for users to input and submit data, and it allows developers to specify
where and how the form data should be processed.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Sample Form</title>
</head>
<body>
<h1>Sample Form</h1>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br><br>
<label>Languages:</label><br>
<input type="checkbox" id="english" name="languages[]" value="english">
<label for="english">English</label>
<input type="checkbox" id="spanish" name="languages[]" value="spanish">
<label for="spanish">Spanish</label>
<input type="checkbox" id="french" name="languages[]" value="french">
<label for="french">French</label><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>
OUTPUT:
PRACTICAL 7:
AIM: Creating Forms Inside HTML Tables
THEORY:
Forms are an essential part of web development, allowing users to input and submit data. When you
combine forms with tables, you can organize and structure data efficiently. In this section, we will
explore how to create forms within HTML tables.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Forms Inside Table</title>
</head>
<body>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
PRACTICAL 8:
AIM: Dynamic HTML with HTML and CSS
THEORY:
Dynamic HTML (DHTML) involves using HTML and CSS to create interactive and
animated web content. In this section, we will explore the fundamentals of DHTML and
how to use HTML and CSS to achieve dynamic effects.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>DHTML (HTML & CSS)</title>
<style>
.custom-element {
width: 200px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<h2>DHTML (HTML & CSS) Example</h2>
<div class="custom-element">Text </div>
</body>
</html>
OUTPUT:
PRACTICAL 9:
AIM: Implementing Hover Effects with DHTML
THEORY:
Adding hover effects to your website can make it more interactive and engaging. In this
section, we will focus on implementing hover effects using DHTML, combining HTML
and CSS to create responsive elements that change when users hover over them.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>DHTML (HTML & CSS) with Hover</title>
<style>
.hover-element {
width: 200px;
height: 100px;
color: #fff;
text-align: center;
line-height: 100px;
transition: background-color 0.3s;
}
.hover-element:hover {
background-color: #27ae60;
}
</style>
</head>
<body>
<h2>DHTML (HTML & CSS) Example with Hover</h2>
<div class="hover-element">Hover Over Me</div>
</body>
</html>
OUTPUT:
PRACTICAL 10:
AIM: Understanding HTML Frames
THEORY:
Frames in HTML allow you to divide a web page into multiple sections, each of which can
display a separate HTML document. This feature was widely used in the past but has
been largely replaced by other techniques for creating layouts on web pages.
CODE:
<html>
<head>
<title>
</title>
</head>
<frameset cols="30%, 70%">
<frame name="left" src="left.html"/>
<frame name="right"/>
</frameset>
</html>
OUTPUT:
PRACTICAL 11:
AIM: Creating a Frame-Based Menu with Data Updation
THEORY:
This section explores using HTML frames to create a menu frame and a content frame,
where selecting a menu item updates the content frame. While frames are considered
outdated, this example demonstrates the concept.
CODE:
<html>
<head>
<title>
</title>
</head>
<frameset cols="30%, 70%">
<frame name="left" src="left.html"/>
<frame name="right"/>
</frameset>
</html>
OUTPUT:
PRACTICAL 12:
AIM: Creating a CV using HTML & CSS
THEORY:
A Curriculum Vitae (CV) can be created using HTML and CSS to showcase your skills
and experiences. This section discusses the structure and styling of a CV.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Sample CV</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
text-align: center;
background-color: #007BFF;
color: #fff;
padding: 20px;
}
h1 {
font-size: 28px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.section {
margin-top: 20px;
}
.section h2 {
font-size: 24px;
border-bottom: 2px solid #007BFF;
}
.info {
display: flex;
}
.info div {
flex: 1;
}
.info h4 {
margin: 0;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
margin-bottom: 5px;
}
.education {
border-left: 2px solid #007BFF;
padding-left: 15px;
}
.experience {
border-left: 2px solid #007BFF;
padding-left: 15px;
}
.skills {
ul {
display: flex;
flex-wrap: wrap;
}
li {
flex: 1;
margin-right: 10px;
}
}
</style>
</head>
<body>
<header>
<h1>Prasan Kumar Mishra</h1>
<p>Web Developer</p>
</header>
<div class="container">
<div class="section">
<h2>Contact Information</h2>
<div class="info">
<div>
<h4>Address</h4>
<p>Selaqui, Dehradun</p>
</div>
<div>
<h4>Email</h4>
<p>[email protected]</p>
</div>
<div>
<h4>Phone</h4>
<p>7903821421</p>
</div>
</div>
</div>
<h2>Education</h2>
<div class="education">
<h4>Bachelor of Computer Applications</h4>
<p>DOON Business School, 2021 - 2024</p>
</div>
</div>
<h2>Experience</h2>
<div class="experience">
<h4>Web Developer</h4>
<p>XYZ Company, 20XX - Present</p>
<ul>
<li>Developed and maintained company website.</li>
<li>Collaborated with the design team to implement website features.</li>
</ul>
</div>
</div>
<h2>Skills</h2>
<div class="skills">
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
<li>Problem Solving</li>
</ul>
</div>
</div>
</div>
</body>
</html>
OUTPUT:
PRACTICAL 13:
AIM: Understanding Paragraphs and Normal Text
THEORY:
In HTML, you can differentiate between a paragraph and normal text using specific HTML
elements. Here's how to do it:
1. Normal Text:
For normal text, you can use the standard text elements like `<p>` and inline elements
like `<span>`. These elements don't add line breaks before and after the text. The
choice between block-level and inline elements depends on the context.
-<span>`: The <span> element is an inline element that is often used to apply styles
or attributes to a specific portion of text within a larger block of text. It doesn't add line
breaks.
Example:
This is <span style="color: blue;">normal text</span>.
2. Paragraphs:
For paragraphs, you should use the `<p>` element. The `<p>` element is a block-level
element that creates a new block of text, and it typically adds some vertical spacing
(margins) before and after the paragraph to visually separate it from surrounding content.
Example:
<p>This is a paragraph. It starts on a new line and has spacing above and below.</p>
Using the appropriate HTML elements for text content helps structure your document
and applies appropriate styling and spacing. Remember that you can use CSS to style
text within both `<p>` and `<span>` elements as needed.
PRACTICAL 14:
AIM: Creating In-Page Navigation with Anchor Tags
THEORY:
HTML anchor tags (<a>) are used to create links. When used to link to a different location
on the same page, they facilitate smooth in-page navigation. This section explains how
to use anchor tags for this purpose.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>In-Page Navigation</title>
</head>
<body>
<h2><a href="#section1">Jump to Section 1</a></h2>
<h2 id="section1">Section 1</h2>
<p>Content for Section 1 goes here.</p>
</body>
</html>
OUTPUT:
PRACTICAL 15:
AIM: Using Ordered (OL), Unordered (UL), and Descriptive Lists in HTML
THEORY:
HTML provides different types of lists: Ordered Lists (OL), Unordered Lists (UL), and
Descriptive Lists (DL). This section explores these list types and their attributes.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<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 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Descriptive List (DL)</h2>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
</body>
</html>
OUTPUT:
PRACTICAL 16:
AIM: Implementing the HR Tag
THEORY:
The HTML <hr> tag is used to create a thematic break or horizontal line on a web page.
This simple element can be used to separate content.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Rule (HR) Example</title>
</head>
<body>
<h2>Section 1</h2>
<p>Content for Section 1.</p>
<hr>
<h2>Section 2</h2>
<p>Content for Section 2.</p>
</body>
</html>
OUTPUT:
PRACTICAL 17:
AIM: Creating an HTML Table with Basic Tags
THEORY:
HTML tables are used to display data in rows and columns. This section covers the basic
HTML table tags.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<table style="width:50%; margin:0 auto; border-collapse:collapse;">
<tr>
<th style="background-color:#333; color:white;">Header 1</th>
<th style="background-color:#333; color:white;">Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
OUTPUT:
PRACTICAL 18:
AIM: Designing a Registration Form
THEORY:
Registration forms are common in web applications. This section demonstrates how to
create a form with radio buttons, checkboxes, and a dropdown menu.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Example</title>
</head>
<body>
<h2>Registration Form</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<input type="email" id="email" name="email"><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<label>Languages:</label>
<input type="checkbox" id="english" name="language" value="english">
<label for="english">English</label>
<input type="checkbox" id="spanish" name="language" value="spanish">
<label for="spanish">Spanish</label><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk
">UK</option>
</select><br>
<input type="submit" value="Submit">

</form>
</body>
</html>
OUTPUT:
PRACTICAL 19:
AIM: Creating a Registration Form Using HTML5 Tags
THEORY:
HTML5 introduces new elements and attributes that make form creation more
accessible and user-friendly. This section demonstrates how to build a registration form
using HTML5 tags, including text input, email input, password input, date input, and radio
buttons. The "required" attribute ensures that users fill out the required fields before
submitting the form.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
body {
background-color: #f0f0f0;
}
h1 {
text-align: center;
}
form {
max-width: 500px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
[list] {
width: 80%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="checkbox"] {
margin-right: 5px;
}
input[type="submit"] {
background-color: #0078d4;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #00549e;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form action="submit_registration.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="confirm_password">Confirm Password:</label>

<input type="password" id="confirm_password" name="confirm_password"
required><br><br>
<label for="birthdate">Date of Birth:</label>

<input type="date" id="birthdate" name="birthdate" required><br><br>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label for="country">Country:</label>
<input list="countries" id="country" name="country" required>
<datalist id="countries">
<option value="USA">
<option value="Canada">
<option value="UK">
<option value="Australia">

</datalist><br><br>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">

<label for="subscribe">Subscribe to our newsletter</label><br><br>
<input type="submit" value="Register">

</form>
</body>
</html>
OUTPUT:
PRACTICAL 20:
AIM: Designing a Login Page with HTML and CSS
THEORY:
A login page is a crucial component of many websites and applications. In this section,
we'll design a simple login page using HTML and CSS. The form is centered in a container
with a border, creating a clean and appealing interface for users to enter their login
credentials.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: #f2f2f2;
}
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
padding-right: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.container h2 {
margin-bottom: 20px;
}
.container label, .container input {
display: block;
margin-bottom: 10px;
margin-right: 10px;
}
.container input[type="text"],
.container input[type="password"] {
width: 95%;
padding: 10px;
border-radius: 3px;
margin-right: 10px;
}
.container input[type="submit"] {
width: 100%;
padding: 10px;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
margin-right: 10px;
}
.container input[type="submit"]:hover {
background-color: #2980b9;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Login">

</form>
</div>
</body>
</html>
OUTPUT:
PRACTICAL 21:
AIM: The aim of this practical is to create a simple XML file without specifying the XML
version.
THEORY:
XML (eXtensible Markup Language) is a markup language used to store and transport
data. An XML document usually starts with a declaration specifying the version and
encoding. In this practical, we will create an XML file without specifying the version and
encoding, which is not recommended but still valid XML.
CODE:


<root>
<element1>Value1</element1>
</root>
OUTPUT:
PRACTICAL 22:
AIM: The aim of this practical is to create a simple XML file with a specified version and
encoding.
THEORY:
XML documents typically begin with a declaration that specifies the XML version and
character encoding used. This information is important for parsing and processing the
XML file correctly.
CODE:


<?xml version="1.0" encoding="UTF-8"?>
<root>
</root>
OUTPUT:
PRACTICAL 23:
AIM: The aim of this practical is to create a simple XML file with a specified version,
encoding, and standalone declaration.
THEORY:
In addition to specifying the XML version and encoding, you can also include a
"standalone" declaration in the XML declaration. The standalone declaration indicates
whether the document relies on external resources.
CODE:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<root>
</root>
OUTPUT.
PRACTICAL 24:
AIM: The aim of this practical is to create a simple XML file that includes elements
representing different categories.
THEORY:
XML is often used to structure and store data in a hierarchical manner. In this practical,
we will create an XML file that includes elements representing different categories. This
can be useful for organizing and categorizing data.
CODE:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<library>
<category name="Fiction">
<book>Title: Fiction Book 1</book>
<book>Title: Fiction Book 2</book>
</category>
<category name="Non-Fiction">
<book>Title: Non-Fiction Book 1</book>
<book>Title: Non-Fiction Book 2</book>
</category>
</library>
OUTPUT:
PRACTICAL 25:
AIM: The aim of this practical is to introduce the basics of JavaScript, its role in web
development, and how to include JavaScript code in an HTML document.
THEORY:
JavaScript is a versatile and widely-used programming language for web development.
It adds interactivity and dynamic behavior to web pages. JavaScript is executed in web
browsers and can be used to manipulate the Document Object Model (DOM) to change
the content and behavior of a webpage.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Introduction to JavaScript</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
var message = "This is JavaScript!";
alert(message);
</script>
</body>
</html>
OUTPUT:
PRACTICAL 26:
AIM: The aim of this practical is to understand and implement functions in JavaScript,
including creating and calling functions.
THEORY:
Functions are a fundamental concept in JavaScript. A function is a reusable block of

code that performs a specific task or set of tasks. Functions are defined using the
function keyword, and they can accept parameters and return values.
In JavaScript, you can create your own functions, and there are built-in functions
available as well. Functions provide code organization, reusability, and modularity.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Functions in JavaScript</title>
</head>
<body>
<h1>JavaScript Functions</h1>
<script>
function greet(name) {
return "Hello, " + name + "!";
}
var personName = "John";
var greeting = greet(personName);
alert(greeting);
</script>
</body>
</html>
OUTPUT:

Practical WebTech

Uploaded by

Copyright:

Available Formats

Practical WebTech

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practical WebTech

Uploaded by

Copyright:

Available Formats

Practical 1

AIM: An Introduction to HTML: Building the Foundation of the Web

10.< p>: Defines a paragraph of text.

12. <ul>: Represents an unordered (bulleted) list.

13. <ol>: Represents an ordered (numbered) list.

14. <li>: Defines list items within `<ul>` or `<ol>`.

15. <img>: Embeds images in the web page.

Here’s an example of a webpage created using basic tags of HTML:

<h4>Line Break and Horizontal Rule</h4>

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

AIM: Creating Forms Inside HTML Tables

AIM: Understanding HTML Frames

AIM: Creating a Frame-Based Menu with Data Updation

This is <span style="color: blue;">normal text</span>.

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

<label for="confirm_password">Confirm Password:</label>

<label for="birthdate">Date of Birth:</label>

<input type="checkbox" id="subscribe" name="subscribe" value="yes">

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

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

Functions are a fundamental concept in JavaScript. A function is a reusable block of

You might also like