Pract1 Pooja

Name- pooja dhami
Rollno- 50
Section -C2
Practical 1:-Create a static webpage using table tags of HTML
Code-
<!DOCTYPE html>
<html>
<head>
<title>Specification Table</title>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
margin-inline:10x;
text-align: center;
.left_shift
text-align: left;
.Empty
border-color:rgb(14, 14, 14);
</style>
</head>
<body><div>
<table>
<caption><b>Specification Table with Hours and Marks</b></caption>
<thead>
<tr>
<th rowspan="2">Unit No.</th>
<th rowspan="2">Unit Title</th>
<th rowspan="2">Teaching Hours</th>

Name- pooja dhami
Rollno- 50
Section -C2
<th colspan="4">Distribution of Theory Marks</th>
</tr>
<tr>
<th>R Level</th>
<th>U Level</th>
<th>A Level</th>
<th>Total Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>I</td>
<td class="left_shift">Introduction to Internet Technology</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>0</td>
<td>8</td>
</tr>
<tr>
<td>II</td>
<td class="left_shift">Basics of HTML & CSS</td>
<td>6</td>
<td>0</td>
<td>2</td>
<td>6</td>
<td>8</td>
</tr>
<tr>
<td>III</td>
<td class="left_shift">Active Server Pages 3.0</td>

Name- pooja dhami
Rollno- 50
Section -C2
<td>6</td>
<td>4</td>
<td>8</td>
<td>0</td>
<td>12</td>
</tr>
<tr>
<td>IV</td>
<td class="left_shift">Server Side Coding with VBScript and XML</td>
<td>8</td>
<td>2</td>
<td>4</td>
<td>8</td>
<td>14</td>
</tr>
<tr>
<td>V</td>
<td class="left_shift">ASP Objects & Components</td>
<td>10</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>14</td>
</tr>
<tr>
<td>VI</td>
<td class="left_shift">Accessing database with ASP & ADO</td>
<td>10</td>
<td>4</td>
<td>4</td>
<td>6</td>
Name- pooja dhami
Rollno- 50
Section -C2
<td>14</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="Empty"></td>
<td><b>Total</b></td>
<td><b>42</b></td>
<td><b>18</b></td>
<td><b>26</b></td>
<td><b>26</b></td>
<td><b>70</b></td>
</tr>
</tfoot>
</table></div>
</body>
</html>
Name- pooja dhami
Rollno- 50
Section -C2
output-
Practical 2:-Demonstrate the use of different style sheet.

Name- pooja dhami
Rollno- 50
Section -C2
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<,>, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
.e {
font-color: rgb(136, 32, 32);
text-align: center;
font-size: 25px;
</style>
</head>
<body>
<div>
<h3
style="font-size: 30px;text-align: center;color: rgb(237, 210, 100);font-family:

'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">
This is inline css
</h3>
</div>
<div class="e">
<h2>
This is embeded css
</h2>
Name- pooja dhami
Rollno- 50
Section -C2
</div>
<div>
<p>
this is external css
</p>
</div>
</body>
</html>
Output-
Name- pooja dhami
Rollno- 50
Section -C2
Practical 3:-Create an internal hyperlink from the top of your page to the bottom of the
same page.
Code-
Name- pooja dhami
Rollno- 50
Section -C2
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>internal hyperlink</title>
<style>
body {
margin: 0;
padding: 20px;
text-align: center;
#bottomSection {
background-color: #f0f0f0;
padding: 20px;
display: inline-block;
text-align: left;
a{
text-decoration: none;
color: blue;
</style>
</head>
<body>
</style>
Name- pooja dhami
Rollno- 50
Section -C2
</head>
<body>
<hr>
<h1>Top of the Page</h1>
<p>
the internet sometimes called the net is a worldwide system of a computer
network.
a network sometime users at any one computer can,if they have permission ,get
information from any other
computer.
</p>
<p><a href="#bottomSection">Jump to the Bottom</a></p>
<div id="bottomSection">
<h2>Bottom of the Page</h2>
<p>This is the content at the bottom of the page.</p>
</div>
</body>
</html>
Name- pooja dhami
Rollno- 50
Section -C2
Output-
Practical 4:-Write an html code to create a website of your own (only front page of a
website).
Name- pooja dhami
Rollno- 50
Section -C2
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Tech X Company - Innovative Technology
Solutions</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f8f8f8;
color: #333;
header {
background-color: #00ff2a;
color: #fff;
text-align: center;
padding: 20px;
nav {
background-color: #333;
text-align: center;
padding: 10px;
nav a {
Name- pooja dhami
Rollno- 50
Section -C2
color: #fff;
text-decoration: none;
margin: 0 10px;
main {
padding: 20px;
.intro {
text-align: center;
.intro p {
font-size: 18px;
line-height: 1.6;
.intro button {
background-color: #00ff99;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
.key-features {
margin-top: 20px;
}
Name- pooja dhami
Rollno- 50
Section -C2
.key-features h2 {
color: #64bdea;
.key-features ul {
list-style-type: none;
padding: 0;
.key-features li {
margin-bottom: 10px;
.ayurvedh {
margin-top: 20px;
text-align: center;
.ayurvedh img {
max-width: 100%;
height: auto;
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
Name- pooja dhami
Rollno- 50
Section -C2
</style>
</head>
<body>
<header>
<h1>patanjli</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">help</a>
<a href="#">Contact us</a>
</nav>
<main>
<section class="intro">
<p>Welcome to the offiial website of patanjli. here we are giving you the best
product from patanjli.</p>
<button>Learn More</button>
</section>
<section class="key features">
<h2>Key Features</h2>
<ul>
<li>patanjali ayurvedh limited was enstablished in 2006 with the thought of
rural and urban development.</li>
</ul>
</section>
<section class="ayurvedh">
<h2>Discover Our ayurvedh here.</h2>
<img src="smartphone_image.jpg" alt="Latest

Name- pooja dhami
Rollno- 50
Section -C2
update">
</section>
</main>
<footer>
<p>© ayurvedh</p>
</footer>
</body>
</html>
Name- pooja dhami
Rollno- 50
Section -C2
Output-
Name- pooja dhami
Rollno- 50
Section -C2
Practical 5:-Write an html code to divide the page into two columns using div tag with
proper margin and border properties. One column should display the login page and
other should display the text and image.
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initialscale=1.0"> <title>Document</title>
</head>
<style> body{ background-
color: whitesmoke;
.main{
display: flex; justify-
content: center; align-
items: center; text-
align: center; margin-
top: 100px;
.first{ border: 2px
solid black; height:
250px; width:
400px;
}
.second{ margin-left:
50px; background-
color: white; height:
250px; width:
Name- pooja dhami
Rollno- 50
Section -C2
400px; border: 2px
solid black;
} input,button{
margin-top:
10px; margin-
top: 20px;
img{
height: 140px;
width: 150px;
</style>
<body>
<hr>
<h4 style="text-align: center;">Name:-Gourav Singh</h4>
<h4 style="text-align: center;">RollNo:-63 Course: -B.C.A</h4> <hr>
<div class="main">
<div class="first">
<h2>Photography</h2>
<p>Photography is all about capturing good
moments</p> <img
src="../Project/images/fire.jpg">
</div>
<div class="second"> <input type="text" placeholder="username" style="border:
solid 1px blue;"><br> <input type="passwprd" placeholder="password"
style="border:solid 1px blue"><br>
<button style="background-color: blue; color: white;">Log in</button><br>
<button style="border: white; color: green;">Forgot Password</button><br><hr>
<button style="background-color: green;color: white;">Create New
Account</button><br></div> </div>
Name- pooja dhami
Rollno- 50
Section -C2
</body>
</html>
Output-
Name- pooja dhami
Rollno- 50
Section -C2
Practical 6:- Following target names are reserved while using <A href> . Explain each
by designing single HTML document.
• _blank
• _self
• _parent
• _top -->
Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Centered Links Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
.container {
text-align: center;
margin-top: 20px;
}
Name- pooja dhami
Rollno- 50
Section -C2
a{
display: block;
margin: 10px;
h4 {
margin-bottom: 10px;
hr {
height: 2px;
border: none;
background-color: #ccc;
width: 50%;
margin: 10px auto;
</style>
</head>
<body>
<div class="container">
<h2>Target Names in <code><a></code> Tag</h2>
<p><a href="https://www.example.com" target="_blank">Open in New Tab/Window

(_blank)</a></p>
<p><a href="https://www.example.com" target="_self">Open in Same Tab/Window
(_self)</a></p>
<p><a href="https://www.example.com" target="_parent">Open in Parent Frame

(_parent)</a></p>
<p><a href="https://www.example.com" target="_top">Open in Topmost Window

(_top)</a></p>
</div>
</body> </html>
Name- pooja dhami
Rollno- 50
Section -C2
Output-
Practical 7:-Write a HTML program to demonstrate the use of following tags.

Name- pooja dhami
Rollno- 50
Section -C2
(i) Div (ii) Span (iii) Pre (iv)Marquee (v)Footer (vi)Header (vii)Nav (viii)Article
(ix)Section
Code-
<!DOCTYPE
html> <html lang="en"> <head>
<meta name="viewport" content="width=device-width, initialscale=1.0"> <title>HTML

Tags Demo</title>
<style> body {
margin: 20px;
header, footer, nav, article, section, div, pre, marquee { border: 1px solid #ccc; margin:
10px auto; padding: 10px; text-align: center;
pre { background-color: #f0f0f0; overflow: auto;
marquee { color: #ff0000; font-weight: bold; white-space: nowrap;
span { display: block; margin: 0 auto; text-align: center;
</style>
</head>
<body>
<hr>
<h4 style="text-align: center;">Name:-Gourav Singh</h4>
<h4 style="text-align: center;">RollNo:-63 Course: -B.C.A</h4> <hr>
<header>
<h1>This is a Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
Name- pooja dhami
Rollno- 50
Section -C2
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h2>Section Title</h2>
<article>
<h3>Article Title</h3>
<p>This is some content inside an article.</p>
</article>
</section>
<div>
<h2>Div Container</h2>
<p>This is content inside a div container.</p>
</div>
<span>This is a Span element.</span>
<pre>
This is a preformatted text block. It preserves both spaces and line breaks.
</pre>
<marquee behavior="scroll" direction="left">This is a Marquee element. Scroll from left

to right.</marquee>
<footer>
<p>This is a Footer</p>
</footer>
</body>
</html>
Output-
Name- pooja dhami
Rollno- 50
Section -C2

Pract1 Pooja

Uploaded by

Document Information

Original Title

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

Pract1 Pooja

Uploaded by

Copyright:

Available Formats

Name- pooja dhami

Practical 1:-Create a static webpage using table tags of HTML

border: 1px solid black;

border-color:rgb(14, 14, 14);

<caption><b>Specification Table with Hours and Marks</b></caption>

<th rowspan="2">Unit No.</th>

<th rowspan="2">Unit Title</th>

<th rowspan="2">Teaching Hours</th>

<th colspan="4">Distribution of Theory Marks</th>

<td class="left_shift">Introduction to Internet Technology</td>

<td class="left_shift">Basics of HTML & CSS</td>

<td class="left_shift">Active Server Pages 3.0</td>

<td class="left_shift">Server Side Coding with VBScript and XML</td>

<td class="left_shift">ASP Objects & Components</td>

<td class="left_shift">Accessing database with ASP & ADO</td>

Practical 2:-Demonstrate the use of different style sheet.

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

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

font-color: rgb(136, 32, 32);

style="font-size: 30px;text-align: center;color: rgb(237, 210, 100);font-family:

This is inline css

This is embeded css

this is external css

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

<h1>Top of the Page</h1>

<p><a href="#bottomSection">Jump to the Bottom</a></p>

<h2>Bottom of the Page</h2>

<p>This is the content at the bottom of the page.</p>

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

<title>Tech X Company - Innovative Technology

padding: 10px 20px;

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

<section class="key features">

<h2>Discover Our ayurvedh here.</h2>

<img src="smartphone_image.jpg" alt="Latest

<meta name="viewport" content="width=device-width,

<style> body{ background-

display: flex; justify-

content: center; align-

items: center; text-

align: center; margin-

.first{ border: 2px

solid black; height:

color: white; height:

400px; border: 2px

<h4 style="text-align: center;">Name:-Gourav Singh</h4>

<h4 style="text-align: center;">RollNo:-63 Course: -B.C.A</h4> <hr>

<p>Photography is all about capturing good

<div class="second"> <input type="text" placeholder="username" style="border:

solid 1px blue;"><br> <input type="passwprd" placeholder="password"

style="border:solid 1px blue"><br>

<button style="background-color: blue; color: white;">Log in</button><br>

<button style="border: white; color: green;">Forgot Password</button><br><hr>

<button style="background-color: green;color: white;">Create New

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

<title>Centered Links Example</title>

margin: 10px auto;

<h2>Target Names in <code>&lt;a&gt;</code> Tag</h2>

<p><a href="https://www.example.com" target="_blank">Open in New Tab/Window

<p><a href="https://www.example.com" target="_parent">Open in Parent Frame

<p><a href="https://www.example.com" target="_top">Open in Topmost Window

Practical 7:-Write a HTML program to demonstrate the use of following tags.

html> <html lang="en"> <head>

<h2>Target Names in <code><a></code> Tag</h2>