WEB TECNOLOGY
EXPERIMENT NO-1
CREATE A HTML PAGE THAT USES THE
TAGS LIKE HEAD,TITLE,BODY
<html>
<head>
<title> my sample html page</title>
</head>
<body>
<h1>welcome to my web page</h1>
<p>this is simple html page created as example</p>
<h2>about</h2>
<p>this page demonstrates the basic structure of an html document by using essential tags</p>
<h2>features</h2>
<ul>
<li>header files with title</li>
<li>body with content</li>
</ul>
</body>
</html>
output
EXPERIMENT-2
CREATE A HTML PAGE THAT USING
FORMATTING TAGS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Text Formatting in HTML</title>
</head>
<body>
<h1>HTML Formatting Tags Example</h1>
<p>This paragraph demonstrates different HTML text formatting tags.</p>
<h2>Basic Formatting Tags</h2>
<p>
<b>Bold text: </b> This is <b>bold</b> text.<br>
<strong>Strong text:</strong> This is
<strong>strong</strong> text.<br>
<i>Italic text:</i> This is <i>italic</i> text.<br>
<em>Emphasized text: </em> This is <em>emphasized</em> text.
</p>
<h2>Superscript and Subscript</h2>
<p>
<sup>Superscript:</sup> H<sup>2</sup>0<br>
<sub>Subscript: </sub> CO<sub>2</sub>
</p>
<h2>Other Text Styles</h2>
<p>
<u>Underlined text:</u> This is <u>underlined</u> text.<br
<del>Deleted text:</del> This is <del>deleted</del> text.<br>
<ins>Inserted text:</ins> This is <ins>inserted</ins> text.<br>
<mark>Highlighted text:</mark> This is
<mark>highlighted</mark> text.
</p>
<h2>Code and Quote Formatting</h2>
<p>
<code>Code text: </code> This is an example of <code>inline code</code>.<br>
<q>Short quote:</q> Here is a short <q>inline quote</q>.<br>
<blockquote>
Blockquote: This is a longer quotation that stands alone in the document.
</blockquote>
</p>
</body>
</html>
output
EXPERIMENT NO-3
CREATE A HTMLN PAGE THAT USES
ANCHOR TAGS AND IMAGE TAG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0"
<title>Anchor and Image Tags Example</title>
</head>
<body>
<h1>Anchor and Image Tags in HTML</h1>
<h2>Anchor Tag Example</h2>
<p>
Visit the <a href="[Link] target="_blank">Example Website</a> for more information.
</p>
<p>
Click <a href="#image-section">here</a> to jump to the image section below.
</p>
<h2>Image Tag Example</h2>
<p id="image-section">
Below is an example of an image displayed using the
<code><img></code> tag:
</p>
<img src="[Link] alt="Sample
Image" width="300" height="200">
<p>Here's a linked image:</p>
<a href="[Link] target="_blank">
<img src="[Link]
alt="Example Website Link Image" width="150"
height="100">
</a>
</body>
</html>
output
EXPERIMENT NO-4
CERATE A HTML PAGE THAT USES
MARQUEE TAG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale-1.0">
<title>Marquee Tag Example</title>
</head>
<body>
<h1>HTML Marquee Tag Example</h1>
<h2>Scrolling Text</h2>
<marquee>Welcome to my webpage! This is a scrolling text
using the marquee tag.</marquee>
<h2>Scrolling Text with Direction</h2>
<marquee direction="up" scrollamount="3">This text scrolls
upwards.</marquee>
<h2>Scrolling Image</h2>
<marquee direction="right" scrollsmount="5">
<img src="[Link] alt="Scrolling Image">
</marquee>
<h2>Bouncing Text</h2>
<marquee behavior-"alternate" scrollamount="4">This text
bounces back and forth.</marquee
</body>
</html>
output
EXPRIMENT NO-5
CREATE A HTML PAGE THAT USES
UNORDERLIST AND ORDERED LIST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, Initial-scale-1.0">
<title>HTML Lists Example</title>
</head>
<body>
<hi>Using Ordered and Unordered Lists in HTML</h1>
<h2>Unordered List of Fruitss/h2>
<p>here is a list of fruits displayed an an unordered list:</p>
<21>
<11>Apple</li>
<11>Banana</i>
<11>Cherry</11>
<11>Grapes</i>
</ul>
<h2>Ordered List of Steps</h2>
<p>Bere is a step-by-step process displayed as an ordered
List:</p>
<ol>
<li>Waah the vegetables.</li>
<li> Chop the vegetables.</li>
<Exileat the pan.4/115
<li>Add the vegetables and couk.</li>
<li>Serve hot.</li>
</et>
<h2>Hested List</h2>
<p>You can also creste lista within liats, Haze's an
example:</p>
<ul>
<li>Books
<li>Fiction</li>
<li>lon-fiction</li>
<li>Science Fiction</li>
</ul>
</li>
<li>movies
<li>Action</li>
<li>Соведу</li>
<li>Drama</li>
</ol>
</li>
<ui>
</body>
</html>
output
EXPRIMENT NO-6
CREATE A HTML PAGE WITH A TABLE
CONSISTING OF A HEADER,BODY AND
FOOTER
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale-1.0">
<title>HTML Table with Beader, Body, and Footer</title>
<style>
table (
width: 100%;
border-collapse: collapse:
th, td {
border: 1px solid #333;
padding: 10px;
text-align:left
tfoot{
background-color:
#f2f2f2;
font-weight: bold;
</style>
</head>
<body>
<h1>Product Table Example</h1>
<table>
<1-Table Header ->
<thead>
<tr>
<th>Product Name</th>
<th>Category</th>
<th>Price (5)</th>
<th>Quantity</th>
</tr>
</thead>
<!- Table Body ->
<tbody>
<tr>
<td>Apple</td>
<td>Fruit</td>
<td>1.50</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>Fruit</td>
<td>0.50</td>
<td>200</td>
</tr>
<tr>
<td>Carrot</td>
<td>Vegetable</td>
<td>0.75</td>
<td>150</td>
</tr>
</tbody>
<1- Table Footer ->
<tfoot>
<tr>
<td colspan="4">Total Products: 34</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output
\
EXPERIMENT NO-7
CREATE A HTML PAGE WITH A FORM
CONTAINING VARIOUS CONTROLS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale-1.0">
<title>Sample Form with Various Controls</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="/submit form" method="post">
<!- Text Input ->
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<!- Email Input ->
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required>
<br><br>
<!- Password Input ->
<label for="password">Password: </label><br>
<input type="password" id="password" name="password"
required> <br><br>
<1- Radio Buttons >
<label>Gender: </label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender"
value="female">
<label for "female">Female</label><br><br>
<1- Checkbox->
<label>Interests:</label><br>
<input type="checkbox" id="sports" name="interest"
value="sports">
<label for="sports">Sports</label><br>
<input type="checkbox" id="music" name="interest"
value-"music">
<label for="music">Music</label><br>
<input type="checkbox" id="reading" name="interest"
value-reading">
<label for="reading">Reading</label><br><br>
<!- Dropdown List ->
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value-"usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select><br><br>
<-Date Picker ->
<label for="dob">Date of Birth:</label><br>
<input type-"date" id="dob" name="dob"><br><br>
<1- File Upload ->
<label for="resume">Upload Resume: </label><br>
<input type="file" id="resune" name-"resume"><br><br>
<label for="comments">Additional Comments:</label><br>
<textares id="comments" name="comments" rows="4"
cole-"50"></textarea><br><br>
<!-Submit Button->
<button type="submit">Submit</button>
</form>
</body>
</html>
EXPRIMENT NO-8
DEVELOP A HTML PAGE THAT USES
INTERNAL CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Page with Internal CSS</title>
<style>
/* Styling the body */
body (
font-family: Arial, sans-serif;
background-color: #f0f8ff
color: #333;
margin: 0;
padding: 20px;
hi {
color: #4CAF50;
text-align: center)
h2{
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottoms Sopes
margin-top: 20px;
/ Paragraph styles/
p{
line-height: 1.6,
margin: 10px 0;
.highlight {
background-color: #ffffee;
padding: 5px;
border-radius: 5px;
/* Styling the button /
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
.btn:hover {
background-color: #45a049/
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<h2>About This Page</h2>
<p>This is an example of an HTML page that uses
<strong>internal CSS</strong> for styling. Internal css is defined within the <code><style></code> tag inside
the <code><head></code> section of the HTML document.
</p>
<h2>Highlighted Section</h2>
<p class="highlight">This paragraph is styled using a specific class called <code>.highlight</code>. It has a light
background color and rounded corners.
</p>
<h2>Button Example</h2>
<p>Here is a styled button using CSS:</p>
<button class="btn">Click Me</button>
</body>
</html>
EXPERIMENT NO-9
DEVELOP A HTML PAGE THAT USES
EXTERNAL CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>My Web Page</title>'
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<ul>
<li><a href="about">About</a></li>
<li><a href="services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About Us</h2>
<p>This is a simple webpage that demonstrates how
to use external CSS.</p>
</section>
<section id="service
<h2>Our Services</h2>
<p>We offer a variety
of services to meet your needs.</p>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>You can reach us at
<a href="mailto: info@[Link]">infoß[Link]</a>.</p>
</section>
</main>
<footer>
<p>scopy: 2024 My Web Page. All rights reserved.</p>
</footer>
</body>
</html>
[Link] the CSS File ([Link])
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin:0px
padding: 0;
header{
background: #4CAF50;
color: whiter;
padding: lem 0;
text-align: center;
nav ul {
list-style:none;
padding: 0;
nav ul 11 1
display: inline;
margin: 0 15px;
nava {
color: white,
text-decoration:none;
main {
padding: 20px;
section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
footer {
text-align: center;
padding: lem 0;
background: #flflfl;
position: relative;
bottom: 0;
width: 100%;
}
EXPERIMENT NO-10
DEVELOP A HTML PAGE THAT USING CSS
MARGIN.
HTML PAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Margins Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to the CSS Margins Example</h1>
</header>
<main>
<section class="section">
<h2>About Us</h2>
<p>We are dedicated to providing high-quality
services.</p>
</section>
<section class="section">
<h2>Our Services</h2>
<p>We offer a wide range of services to cater to your needs.</p>
</section>
<section class="section">
<h2>Contact Us</h2>
<p>Get in touch with us at
<a href="[Link]
</section>
</main>
<footer>
<p>© 2024 CSS Margins Example. All rights
reserved.</p>
</footer>
</body>
</html>
[Link] FILE
/[Link]/
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
header{
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
main {
padding: 20px
section {
background-color: #f9f9f9;
border: 1px solid #ddd;
margin: 20px 0; / Vertical margin for spasing between sections
padding: 15px; Inner padding for content
border-radius: 5px; / Rounded corners/
footer {
text-align: center;
padding: 10px;
background-color: #fiflfi,
margin-top: 20px; / Space above the footer/
}
EXPERIMENT NO-11
DEVELOP HTML PAGE THAT USING CSS
PADDING
HTML PAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Padding Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to the CSS Padding Example</h1>
</header>
<main>
<section class="card">
<h2>About Us</h2>
<p>We are a team committed to providing high-
quality services.</p>
</section>
<section class="card">
<h2>Our Services</h2>
<p>Our services are designed to meet all your needs.</p>
</section>
<section class="card">
<h2>Contact Us</h2>
<p>Reach us at
<a href="[Link]
</section>
</main>
<footer>
<p>© 2024 CSS Padding Example. All rights
reserved.</p>
</footer>
</body>
</html>
CSS FILE
body {
font-family: Arial, sans-serifr;
margin: O;
padding: 0;
header{
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px; / Padding for the header/
main{
padding: 20px: Fadding for the main content/
card {
background-color:
#191929:
border:
1px solid #ddd;
padding: 20px;
Inner padding for content within each card
margin: 15px 0;/ Margin for specing between cards/
border-radius: 5px;
footer {
text-align:center;
padding:10px;
background-color;#fififl;
}
EXPERIMENT NO-12
DEVELOP JAVA SCRIPT CODE USING
ARITHEMATIC OPERATOR