Scribd
Upload
14 views

HTML Lab File

Lab practical of HTML for Engineering Students

Uploaded by

ritikbisla27
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

HTML Lab File

Lab practical of HTML for Engineering Students

Uploaded by

ritikbisla27
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 85

ARAVALI COLLEGE OF ENGINEERING

&MANAGEMENT
JasanaTigoan Road, Greater Faridabad Haryana, 121006

Internet And Web Technology Lab

BCA-23-205

DEPARTMENT OF COMPUTER SCIENCE &


ENGINEERING(2023-2024)

Submitted to: Submitted by:

Mahima Mam Akash Maurya

23011312003
INDEX

S.NO. EXPERIMENT NAME DATE OF SIGNATURE


PRACTICAL
1. Introduction to HTML

2. Write a program to create basic


table in html

3. Write a program to create simple


event in html

4. Write a program to diplay date and


time in html

5. Write a program of sum operation


in javascript

6. Write a program to display simple


animation in Html
7. Create a Program to Change Text
Color Using
document.getElementById in
JavaScript
8. Write a program to display shadow
in html
9. Write a program to create Array in
javascript
10. Write a program to display an
image using HTML.
11. Write a program to create
hyperlinks in HTML
12. Write a program to create simple
form in Html
13. Write a program to create Image
gallery in Html

14. Write a program to create


navigation bar in html

15. Write a program to create button in


Html
16. Write a program. to use CSS in
HTML

17. Write a program to show transform


tag in html

18. Write a program to print a simple


message in HTML.

19. Write a program to formatting tags


like heading tags.

20. Write a program to create


unordered lists.

21. Write a program to create ordered


lists

22. Write a program to create nested,


description and control counting
lists.
23. Write a program to create frames.

24. Write a program to create frames.


25. Write a program to use various tags
in HTML.

26. Program to create a webpage using


HTML
PROGRAM – 1

INTRODUCTION TO HTML

HTML stands for Hyper Text Markup Language. It is used to design web pages using markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages. Markup language is used to define the text document within tag
which defines the structure of web pages. This language is used to annotate (make notes for the
computer) text so that a machine can understand it and manipulate text accordingly. Most of
markup (e.g. HTML) languages are human readable. Language uses tags to define what
manipulation has to be done on the text.

HTML is a markup language which is used by the browser to manipulate text, images and other
content to display it in required format. HTML was created by Tim Berners-Lee in 1991. The
first ever version of HTML was HTML 1.0 but the first standard version was HTML 2.0 which
was published in 1999.
PROGRAM - 2
AIM: Write a program to create basic table in html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Basic Table</title>

<style>

table {

width: 50%;

border-collapse: collapse;

margin: 20px auto;

th, td {

padding: 10px;

text-align: left;

border: 1px solid #333;

th {

background-color: #333;

color: white;
}

tr:nth-child(even) {

background-color: #f2f2f2;

</style>

</head>

<body>

<h2 style="text-align: center;">Basic HTML Table</h2>

<table>

<tr>

<th>Name</th>

<th>Age</th>

<th>City</th>

</tr>

<tr>

<td>Alice</td>

<td>24</td>

<td>New York</td>

</tr>

<tr>

<td>Bob</td>
<td>30</td>

<td>Los Angeles</td>

</tr>

<tr>

<td>Charlie</td>

<td>28</td>

<td>Chicago</td>

</tr>

</table>

</body>

</html>
OUTPUT:
PROGRAM – 3
AIM: Write a program to create simple event in html?

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Simple Event Example</title>

</head>

<body>

<h2>Click Event Example</h2>

<!-- Button to trigger the event -->

<button onclick="displayMessage()">Click Me!</button>

<!-- Paragraph to display the message -->

<p id="message"></p>

<script>

// JavaScript function to display a message

function displayMessage() {

document.getElementById("message").innerText = "Hello! You clicked the button!";

</script></body>

</html>
OUTPUT
PROGRAM – 4
AIM: Write a program to display date and time in html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Display Date and Time</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 20%;

#date-time {

font-size: 1.5em;

font-weight: bold;

color: #333;

</style>

</head>

<body>

<h2>Current Date and Time</h2>


<p id="date-time"></p>

<script>

function updateDateTime() {

// Get the current date and time

const now = new Date();

const date = now.toLocaleDateString();

const time = now.toLocaleTimeString();

// Display the date and time in the paragraph

document.getElementById("date-time").innerText = date + " " + time;

// Update the date and time every second

setInterval(updateDateTime, 1000);

updateDateTime();

</script>

</body>

</html>
OUTPUT:

PROGRAM – 5
AIM: Write a program of sum operation in java script

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Sum Operation</title>

</head>

<body>

<h2>Simple Sum Calculator</h2>

<!-- Input fields for numbers -->

<label for="num1">Enter first number:</label>

<input type="number" id="num1" required>

<br><br>

<label for="num2">Enter second number:</label>

<input type="number" id="num2" required>

<br><br>

<!-- Button to trigger the sum operation -->

<button onclick="calculateSum()">Calculate Sum</button>

<!-- Paragraph to display the result -->


<p id="result"></p>

<script>

// JavaScript function to calculate the sum

function calculateSum() {

// Get values from input fields

const num1 = parseFloat(document.getElementById("num1").value);

const num2 = parseFloat(document.getElementById("num2").value);

// Check if inputs are valid numbers

if (isNaN(num1) || isNaN(num2)) {

document.getElementById("result").innerText = "Please enter valid numbers.";

return;

// Calculate the sum

const sum = num1 + num2;

// Display the result

document.getElementById("result").innerText = "The sum is: " + sum;

</script>

</body>

</html>

OUTPUT:
PROGRAM – 6
AIM: Write a program to display simple animation in Html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Simple Animation</title>

<style>

/* Container to hold the animation */

.animation-container {

width: 100%;

height: 200px;

position: relative;

overflow: hidden;

background-color: #f2f2f2;

/* Styling the ball */

.ball {

width: 50px;

height: 50px;

background-color: #3498db;

border-radius: 50%;

position: absolute;

top: 75px;
animation: moveBall 3s linear infinite;

@keyframes moveBall {

0% {

left: 0;

50% {

left: calc(100% - 50px);

100% {

left: 0;

</style>

</head>

<body>

<h2>Simple Ball Animation</h2>

<!-- Container with animated ball -->

<div class="animation-container">

<div class="ball"></div>

</div>

</body>

</html

OUTPUT:
PROGRAM – 7
AIM: Create a Program to Change Text Color Using
document.getElementById in JavaScript

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Change Text Color</title>

</head>

<body>

<h2>Click the button to change the text color</h2>

<!-- Text that will change color -->

<p id="text">This is the text that will change color.</p>

<!-- Button to trigger the color change -->

<button onclick="changeColor()">Change Color</button>

<script>

// JavaScript function to change text color

function changeColor() {

// Get the element by ID

const textElement = document.getElementById("text");


// Change the color to a new random color

textElement.style.color = getRandomColor();

// Function to generate a random color

function getRandomColor() {

const letters = '0123456789ABCDEF';

let color = '#';

for (let i = 0; i < 6; i++) {

color += letters[Math.floor(Math.random() * 16)];

return color;

</script>

</body>

</html>

OUTPUT:
PROGRAM – 8
AIM: Write a program to display shadow in html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Shadow Effects</title>

<style>

/* Shadow effect for text */

.text-shadow {

font-size: 2em;

font-weight: bold;

color: #333;

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

margin: 20px;

text-align: center;

/* Shadow effect for a box */

.box-shadow {

width: 200px;

height: 100px;

background-color: #3498db;

margin: 20px auto;

border-radius: 10px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);

display: flex;

align-items: center;

justify-content: center;

color: white;

font-size: 1.2em;

</style>

</head>

<body>

<h2 class="text-shadow">Text Shadow Effect</h2>

<div class="box-shadow">Box Shadow Effect</div>

</body>

</html>
Output:

PROGRAM – 9
AIM: Write a program to create Array in javascript
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>JavaScript Array Example</title>

</head>

<body>

<h2>JavaScript Array Operations</h2>

<!-- Button to show array operations -->

<button onclick="displayArray()">Display Array</button>

<button onclick="addItem()">Add Item</button>

<button onclick="removeLastItem()">Remove Last Item</button>

<!-- Paragraph to display array contents -->

<p id="array-display"></p>

<script>

// Creating an array of fruits

const fruits = ["Apple", "Banana", "Orange", "Mango"];

// Function to display the array


function displayArray() {

document.getElementById("array-display").innerText = "Array: " + fruits.join(", ");

// Function to add a new item to the array

function addItem() {

fruits.push("Pineapple");

displayArray(); // Update display after adding

function removeLastItem() {

fruits.pop();

displayArray(); // Update display after removing

</script>

</body>

</html>

OUTPUT:
PROGRAM - 10
AIM: Write a program to display an image using HTML.
<!DOCTYPE html>

<html>

<head>

<title>Using Image in Webpage</title>

</head>

<body>

<p><h3>PUP</p>

<img src="F:\PICS ECHELON\SUCP2630.jpg" alt="scobby" style="width:600 px; height:367


px;"/>

</body>

</html>

OUTPUT:
PROGRAM - 11
AIM: Write a program to create hyperlinks in HTML

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink</title>

</head>

<body>

<p>Click following link</p>

<a href="http://www.facebook.com" target="_blank">Facebook page</a><br>

<a href="http://www.youtube.com" target="_self">Youtube page</a><br>

<a href="http://www.tutorialspoint.com" target="_parent">HTML language</a><br>

<a href="http://www.myntra.com" target="_top">online shopping site</a><br>

</body>

</html>

OUTPUT:
PROGRAM – 12
AIM: Write a program to create simple form in Html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Simple HTML Form</title>

<style>

/* Basic styling for the form */

.form-container {

width: 300px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 8px;

background-color: #f9f9f9;

font-family: Arial, sans-serif;

.form-container h2 {

text-align: center;

.form-container label {

display: block;

margin-top: 10px;

}
.form-container input, .form-container textarea, .form-container button {

width: 100%;

padding: 8px;

margin-top: 5px;

border: 1px solid #ccc;

border-radius: 4px;

.form-container button {

margin-top: 15px;

background-color: #4CAF50;

color: white;

cursor: pointer;

.form-container button:hover {

background-color: #45a049;

</style>

</head>

<body>

<div class="form-container">

<h2>Contact Us</h2>

<!-- Simple HTML form -->

<form action="#" method="post">


<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" required></textarea>

<button type="submit">Submit</button>

</form>

</div>

</body>

</html>

OUTPUT:
PROGRAM – 13
AIM: Write a program to create Image gallery in Html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Image Gallery</title>

<style>

/* Container for the gallery */

.gallery {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

gap: 15px;

padding: 20px;

/* Style for each image in the gallery */

.gallery img {

width: 100%;

height: auto;

border-radius: 8px;

cursor: pointer;

transition: transform 0.3s ease;

}
/* Hover effect on images */

.gallery img:hover {

transform: scale(1.05);

/* Lightbox (for displaying image in a larger view) */

.lightbox {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.7);

display: none;

align-items: center;

justify-content: center;

.lightbox img {

max-width: 80%;

max-height: 80%;

/* Close button for lightbox */

.close-btn {
position: absolute;

top: 10px;

right: 10px;

font-size: 30px;

color: white;

background: none;

border: none;

cursor: pointer;

</style>

</head>

<body>

<h2 style="text-align: center;">Simple Image Gallery</h2>

<!-- Image Gallery -->

<div class="gallery">

<img src="https://via.placeholder.com/300" alt="Image 1" onclick="openLightbox(this)">

<img src="https://via.placeholder.com/300" alt="Image 2" onclick="openLightbox(this)">

<img src="https://via.placeholder.com/300" alt="Image 3" onclick="openLightbox(this)">

<img src="https://via.placeholder.com/300" alt="Image 4" onclick="openLightbox(this)">

<img src="https://via.placeholder.com/300" alt="Image 5" onclick="openLightbox(this)">

<img src="https://via.placeholder.com/300" alt="Image 6" onclick="openLightbox(this)">

</div>
<!-- Lightbox (for showing enlarged image) -->

<div class="lightbox" id="lightbox">

<button class="close-btn" onclick="closeLightbox()">×</button>

<img id="lightbox-img" src="" alt="Enlarged Image">

</div>

<script>

// Open the lightbox with the clicked image

function openLightbox(image) {

const lightbox = document.getElementById("lightbox");

const lightboxImg = document.getElementById("lightbox-img");

lightboxImg.src = image.src;

lightbox.style.display = "flex";

// Close the lightbox

function closeLightbox() {

const lightbox = document.getElementById("lightbox");

lightbox.style.display = "none";

</script>

</body>

</html>

OUTPUT:
PROGRAM – 14
AIM: Write a program to create navigation bar in html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Navigation Bar</title>

<style>

/* Style for the navigation bar */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

/* Navigation bar container */

.navbar {

background-color: #333;

overflow: hidden;

/* Navigation links container */

.navbar a {

float: left;

display: block;
color: white;

text-align: center;

padding: 14px 20px;

text-decoration: none;

/* Change color on hover */

.navbar a:hover {

background-color: #ddd;

color: black;

/* Responsive: Make the navbar links stack vertically on small screens */

@media screen and (max-width: 600px) {

.navbar a {

float: none;

display: block;

text-align: left;

</style>

</head>

<body>

<!-- Navigation bar -->


<div class="navbar">

<a href="#home">Home</a>

<a href="#about">About</a>

<a href="#services">Services</a>

<a href="#contact">Contact</a>

</div>

</body>

</html>

OUTPUT:
PROGRAM – 15
AIM: Write a program to create button in Html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Create a Button in HTML</title>

<style>

.button {

background-color: #4CAF50; /* Green background */

border: none; /* No borders */

color: white; /* White text */

padding: 15px 32px; /* Padding inside the button */

text-align: center; /* Text alignment */

text-decoration: none; /* Remove underline from link */

display: inline-block; /* Make button inline with text */

font-size: 16px; /* Text size */

margin: 4px 2px; /* Spacing around the button */

cursor: pointer; /* Pointer cursor on hover */

border-radius: 12px; /* Rounded corners */

.button:hover {

background-color: #45a049; /* Darker green on hover */


}

</style>

</head>

<body>

<h2>Click the Button</h2>

<!-- Button that triggers a JavaScript function -->

<button class="button" onclick="displayMessage()">Click Me!</button>

<script>

// Function to display a message when the button is clicked

function displayMessage() {

alert("Hello! You clicked the button.");

</script>

</body>

</html>

OUTPUT:
PROGRAM – 16
AIM: Write a program. to use CSS in HTML
INTERNAL CSS & INLINE CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: yellow;
font-family: verdana;
font-size: 300%;}
body { background-color: powderblue;}
p {color: red;}
#p01 {color: green;}
p.error {color: orange;}
</style>
</head>
<body>
<h1>CSS Stands for "Cascading Style Sheet." Cascading style sheets are used to format the
layout of Web pages.</h1><br>
<h2 style="color:blue;">CSS helps Web developers create a uniform look across several pages
of a Web site. </h2><br>
<p id="p01">If the pages all reference the same style sheet, the text size only needs to be
changed on the style sheet and all the pages will show the larger text.</p>
<p class="error">While CSS is great for creating text styles, it is helpful for formatting other
aspects of Web page layout as well. <p>
<p> CSS gives Web developers more exact control over how Web pages will look than HTML
does. </p>
</body>
</html>

OUTPUT:
EXTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>A web browser (commonly referred to as a browser) is a software application for accessing
information on the World Wide Web.</h1>
<p>When a user requests a particular website, the web browser retrieves the necessary content
from a web server and then displays the resulting web page on the user's device.</p>
</body>
</html>

STYLES.CSS

body { background-color: pink;}


h1 {color: green;}
p {color: magenta;}

OUTPUT:
PROGRAM – 17
AIM: Write a program to show transform tag in html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>CSS Transform Example</title>

<style>

/* Style for the container */

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f0f0f0;

/* Box that will be transformed */

.box {

width: 200px;

height: 200px;

background-color: #4CAF50;
color: white;

display: flex;

justify-content: center;

align-items: center;

font-size: 24px;

transition: transform 0.5s ease;

/* Hover effect for the transform */

.box:hover {

transform: rotate(45deg) translateX(50px) translateY(50px);

</style>

</head>

<body>

<div class="box">

Hover me!

</div>

</body>

</html>

OUTPUT:
PROGRAM - 18
AIM: Write a program to print a simple message in HTML.
<!doctype html>

<html>

<head>

<title> Program 2 </title>

<head>

<body>

<p> HTML (HyperText Markup Language) is the most basic building block of the Web. It
defines the meaning and structure of web content.

Other technologies besides HTML are generally used to describe a web page's
appearance/presentation (CSS) or functionality/behavior (JavaScript).

<br /><br />

"Hypertext" refers to links that connect web pages to one another, either within a single website
or between websites.

Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to
pages created by other people, you become an active participant in the World Wide Web. </p>

</body>

</html>

OUTPUT:
PROGRAM – 19
AIM: Write a program to formatting tags like heading tags.

<!doctype html>

<html>

<head>

<title> Program 3a </title>

</head>

<body>

<h1> HTML (HyperText Markup Language) is the most basic building block of the Web. </h1>

<h2> It defines the meaning and structure of web content. </h2>

<h3> Other technologies besides HTML are generally used to describe a web page's

appearance/presentation (CSS) or functionality/behavior (JavaScript).</h3>

<h4> Links are a fundamental aspect of the Web. </h4>

<h5> HTML consists of elements, each of which may be modified by some number of attributes.
</h5>

<h6> HTML documents are connected to each other with links. </h6>

</body>

</html>

OUTPUT
PROGRAM – 20
AIM: Write a program to formatting tags like font tags.

<!doctype html>

<html>

<head>

<title> Program 3b </title>

</head>

<body>

<p><font color="cyan" face="Algerian, Geneva, sans-serif" size="6">

Hypertext Markup Language (HTML) is the standard markup language for documents designed
to be displayed in a web browser.

It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages.

HTML describes the structure of a web page semantically and originally included cues for the
appearance of the document.

</font>

</p>

</body>

</html>

OUTPUT:
PROGRAM – 21
AIM: Write a program to create unordered lists.
<!doctype html>

<html>

<head>

<title></title>

<body>

<h2>UNORDERED LIST</h2>

<ul>

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ul><br />

<ul style="list-style-type:circle;">

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ul><br>

<ul style="list-style-type:square;">

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ul><br>

<ul style="list-style-type:disc;">

<li>coffee</li>

<li>tea</li>
<li>milk</li>

</ul><br>

<ul style="list-style-type:none;">

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ul><br>

</body>

</head>

</html>

OUTPUT:
PROGRAM – 22
AIM: Write a program to create ordered lists.

<!doctype html>

<html>

<head>

<title></title>

</head>

<body>

<h2>ORDERED LIST</h2>

<ol>

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br />

<ol type="A">

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br />

<ol type="a">

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br />

<ol type="I">
<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br />

<ol type="i">

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br />

<ol type="1">

<li>coffee</li>

<li>tea</li>

<li>milk</li>

</ol><br />

</body>

</html>

OUTPUT:
PROGRAM – 23
AIM: Write a program to create nested, description and control counting lists.

HTML NESTED LIST


<!doctype html>

<html>

<head>

<title>Lists</title>

</head>

<body>

<h2>Nested Html List</h2>

<ul>

<li>coffee</li>

<li>tea

<ul>

<li>black tea</li>

<li>grean tea</li>

</ul>

</li>

<li>milk</li>

</ul>

</body>

</html>

OUTPUT:
HTML DESCRIPTION LIST
<!doctype html>

<html>

<head>

<title>Lists</title>

</head>

<body>

<h2>Description List</h2>

<dl>

<dt>Coffee</dt>

<dd>-Black hot drink cappuchino</dd>

<dt>Milk</dt>

<dd>-White drink amul motherdairy</dd>

</dl>

</body>

</html>

OUTPUT:
CONTROL LIST COUNTING
<!doctype html>

<html>

<head>

<title>Lists</title>

</head>

<body>

<h2>Control list counting</h2>

<ol start="20">

<li>tea</li>

<li>coffee</li>

<li>water</li>

</ol>

</body>

</html>
OUTPUT:

PROGRAM – 24
AIM: Write a program to create frames.

<!DOCTYPE html>

<html>

<head>

<title>HTML Frames</title>

</head>

<frameset rows="40%,60%,30%">

<frame name="Top" src="F:\iphone pics\OJZC3287.jpg" />

<frame name="Main" src="F:\iphone pics\IMG_E7768.jpg" />

<frame name="Bottom" src="F:\iphone pics\IMG_E7951.jpg"/>

<noframes>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>

OUTPUT:
PROGRAM – 25
AIM: Write a program to use various tags in HTML.
<!doctype html>

<html>

<head>

<title> TAGS </title>

<head>

<body style="background-color:orange;">

<p> HTML (HyperText Markup Language) is the most basic building block of the Web. It
defines the meaning and structure of web content. </p>

<p><font color="cyan" face="Algerian, Geneva, sans-serif">

<h4> Other technologies besides HTML are generally used to describe a web page's
appearance/presentation (CSS) or functionality/behavior (JavaScript). </h4>

</font></p>

<p style="border: 6px solid green;">In 1980, physicist Tim Berners-Lee, a contractor at CERN,
proposed and prototyped ENQUIRE, a system for CERN researchers to use and share
documents. </p>

<h3>UNORDERED LIST</h3>

<ul>

<li>coffee</li>

<li>tea</li>

</ul>

<h4>ORDERED LIST</h4>

<ol type="a">

<li>coffeed</li>

<li>milk</li>

</ol>
<a href="http://www.facebook.com" target="_blank">Facebook page</a><br>

<img src="F:\PICS ECHELON\SUCP2630.jpg" alt="scobby" style="width:60 px; height:36


px;"/>

<a href="http://www.facebook.com" target="_blank">Facebook page</a><br>

</body>

</html>

OUTPUT:
PROGRAM – 26
AIM: Program to create a webpage using HTML
using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

publicpartialclassHome : System.Web.UI.Page

protectedvoid Page_Load(object sender, EventArgs e)

{ }}

<%@PageTitle=""Language="C#"MasterPageFile="~/
MasterPage.master"AutoEventWireup="true"

CodeFile="Home.aspx.cs"Inherits="Home"%>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="Server">

<divclass="content">

<divstyle="width:100%;height:555px;background:#eee
url('<%#ResolveUrl("~/App_Themes/Hospital/image/pattern.png") %>'); ">

<divclass="banner bh">

<divclass="container">

<divclass="slideshow"id="slideshow">

<olclass="slides">

<liclass="current"style="background-color: #ddd;">

<divclass="description">

<h2>National Perfect Hospital</h2>

<pstyle="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">


We thank all our patients and partners for their continued support_n_patronage.

Avail FREE consultation with our super specialists and enjoy exclusive discounts on our
services. Click here or get in touch with us at +91 88000 91958 for more information</p>

</div>

<divclass="tiltview col">

<ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/Hospitals4_Mercy.jpg") %>"/></a>

</div>

</li>

<li>

<divclass="description">

<h2> Innovation Everyday</h2>

<pstyle="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">

In our endeavor to providing quality healthcare to the masses at affordable costs, our teams of
doctors workhard to make you better everyday! Super specialists across multi specialties adopt
innovative techniques to ensure that patients are back to their normal routine life at the
earliest.</p>

</div>

<divclass="tiltview row">

<ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/hospital_2079352b.jpg") %>"/>

</a><ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/Patient-caring-at-Hospital.jpg")
%>"/></a>

</div>

</li>

<li>
<divclass="description">

<h2>Touching a billion lives</h2>

<pstyle="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">

World class health care delivered with experience, expertise and empathy.</p>

</div>

<divclass="tiltview col">

<ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/best_hospital.jpg") %>"/>

</a><ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/iStock_000009782912Large.jpg")
%>"/></a>

</div>

</li>

<li>

<divclass="description">

<h2>Treatments That Attack Cancer, Not The Patient</h2>

<pstyle="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">

We ensure our cancer treatments are effective in not just eliminating the tiniest and toughest of
tumours, but also protect our patients.</p>

</div>

<divclass="tiltview col">

<ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/1a_2.jpg") %>"/>

</a><ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/max_hospital_operation1.jpg")
%>"/></a>
</div>

</li>

<li>

<divclass="description">

<h2>General Ward Services</h2>

<pstyle="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">

Six to eight patients in a cubicle and toilets in the wings of the ward, Fully-equipped Nursing

Station, Attendant Couch, Qualified dietician for diet advice and diet Service.</p>

</div>

<divclass="tiltview row">

<ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/hospital.gif") %>"/>

</a><ahref="#">

<imgsrc="<%#ResolveUrl("~/App_Themes/Hospital/image/hospital-hallway.jpg") %>"/></a>

</div>

</li>

</ol>

</div>

</div>

<scriptsrc="<%#ResolveUrl("~/App_Themes/Hospital/js/classie.js") %>"></script>

<scriptsrc="<%#ResolveUrl("~/App_Themes/Hospital/js/tiltSlider.js")
%>"type="text/javascript"></script>

<script>

new TiltSlider(document.getElementById('slideshow'));

</script>
</div>

<divclass="circle_link"style="width: 1170px; height: 150px; background-color: #ddd;

margin: 0 auto; padding-top: 5px;">

<ul>

</div>

</div>

</div>

<divstyle="width: 100%; height: 30px; border: 1px solid #ccc; padding-top: 5px;

padding-bottom: 5px; margin-bottom: 20px; color: #666;">

<marqueeloop="-1"scrollamount="3"width="100%"height="100%">

Emergency Contact Number: 01294721890 01294178688 9856236740 9978342076


</marquee>

</div>

</div>

</div>

</asp:Content>

OUTPUT:

You might also like