HTML Practical File

Name-Tushar Pandey
Course- BCA Sem- 4

Section:-D2 Roll No- 63
University Roll No-2222101
Subject- Web Technologies

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<hr>
<h4 style="text-align: center;">Name:-Tushar Pandey</h4>
<h4 style="text-align: center;">RollNo:-63 Course: -B.C.A</h4>
<hr>
<table style="margin: 0 auto; text-align: center;" border="5px solid " cellpadding="15">
<caption style="font-weight: bold;">Specification Table With Hours and Marks</caption>
<thead>
<tr>
<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>
</tr>
<tr>
<td>R Level</td>
<td>U Level</td>
<td>A Level</td>
<td>Total Marks</td>
</tr>
</thead>
<tr >
<td>I</td>
<td>Introduction to Internet Technology</td>
<td>2</td>
<td>4</td>
<td>4</td>
<td>0</td>
<td>8</td>
</tr>
<td>II</td>
<td>Basics of HTML & CSS</td>
<td>6</td>
<td>0</td>
<td>2</td>
<td>6</td>
<td>8</td>
</tr>
<td>III</td>
<td>Active Server Pages 3.0</td>
<td>6</td>
<td>4</td>
<td>8</td>
<td>0</td>
<td>12</td>
</tr>
<td>IV</td>
<td>Server Side Coding with VBScript and XML</td>
<td>8</td>
<td>2</td>
<td>4</td>
<td>8</td>
<td>14</td>
</tr>
<td>V</td>
<td>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>Accessing Database with ASP&ADO</td>
<td>10</td>
<td>4</td>
<td>4</td>
<td>6</td>
<td>16</td>
</tr>
<tfooter>
<tr>
<th></th>
<th>Total</th>
<th>42</th>
<th>18</th>
<th>26</th>
<th>26</th>
<th>70</th>
</tr>
</tfooter>
</table>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="p2.css">
<title>Css</title>
</head>
<style>
h1 {
color: red;
text-align: center;
p{
font-size: 20px;
color: purple;
text-align: center;
</style>
<body>
<hr>

<hr>
<h1 style="color: blue; text-align: center;">Hey..! This is an Inline Style Heading</h1>
<p style="font-size: 18px; color: green; text-align:center;">This paragraph has an inline style applied.</p>
<h1>Hey..! This is an Embedded Style Heading</h1>
<p>This paragraph has an embedded style applied.</p>
<h1 class="head">Hey..! This is an External Style Heading</h1>
<p class="para">This paragraph has an external style applied.</p>
</body>
</html>
</body>
</html>
External Css:-
.head {
color: orange;
text-align: center;
.para {
font-size: 22px;
color: brown;
text-align: center;
}
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title style="text-align: center;">Internal Hyperlink Example</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>
<hr>
<hr>
<h1>Top of the Page</h1>
<p>
Graphic Era University is an Indian private deemed university located in Clement Town, Dehradun,<br>
Uttarakhand. It was founded by Dr. Kamal Ghanshala in 1993. In 2008, the then-institute was accorded<br>
the status of deemed university. In 2022, the university was accredited by the NAAC with Grade A+.
</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.<br>
graphic era university</p>
</div>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tech X Company - Innovative Technology Solutions</title>
<style>
body {
margin: 0;
padding: 0;
color: #333;
header {
background-color: #007bff;
color: #fff;
text-align: center;
padding: 20px;
nav {
background-color: #333;
text-align: center;
padding: 10px;
nav a {
color: #fff;
margin: 0 10px;
}
main {
padding: 20px;
.intro {
text-align: center;
.intro p {
font-size: 18px;
line-height: 1.6;
.intro button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
.key-features {
margin-top: 20px;
.key-features h2 {
color: #007bff;
.key-features ul {
list-style-type: none;
padding: 0;
}
.key-features li {
margin-bottom: 10px;
.smartphone {
margin-top: 20px;
text-align: center;
.smartphone img {
max-width: 100%;
height: auto;
footer {
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
</style>
</head>
<body>
<hr>
<hr>
<header>
<h1>Tech X Company - Innovative Technology Solutions</h1>

</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Capabilities</a>
<a href="#">Contact</a>
</nav>
<main>
<section class="intro">
<p>We are Tech X Company, your partner in innovative technology solutions. Explore our capabilities and
discover how we can transform your business with cutting-edge technologies.</p>
<button>Learn More</button>
</section>
<section class="key-features">
<h2>Key Features</h2>
<ul>
<li>Text Generation: We provide advanced text generation services for various applications.</li>
<li>Translation: Our language experts offer fluent language translation services.</li>
<li>Question Answering: Get informative answers to your questions, no matter how complex.</li>
<li>Code Completion: Enhance your coding experience with our intelligent code completion
solutions.</li>
</ul>
</section>
<section class="smartphone">
<h2>Discover Our Latest Smartphone</h2>
<img src="smartphone_image.jpg" alt="Latest Smartphone">
</section>
</main>
<footer>
<p>© 2024 Tech X Company - Innovative Technology Solutions</p>
</footer>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<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: 400px;
input,button{
margin-top: 10px;
margin-top: 20px;
img{
height: 140px;
width: 150px;
</style>
<body>
<hr>
<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>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Centered Links Example</title>
<style>
body {
display: flex;
height: 100vh;
margin: 0;
flex-direction: column;
.container {
text-align: center;
margin-top: 20px;
a{
display: block;
margin: 10px;
h4 {
hr {
height: 2px;
border: none;
background-color: #ccc;
width: 50%;
margin: 10px auto;
</style>
</head>
<body>
<hr>
<hr>
<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-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<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 {
overflow: auto;
marquee {
color: #ff0000;
font-weight: bold;
white-space: nowrap;
span {
display: block;
margin: 0 auto;
text-align: center;
</style>
</head>
<body>
<hr>
<hr>
<header>
<h1>This is a Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<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>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,
0,0" />
<title>Login Page</title>
</head>
<style>
body {
margin: 0;
h4{
.body{
height: 500px;
width: 500px;
margin-top: 30px;
margin-left: 500px;
background-color: aquamarine;
text-align: center;
.main{
height: 280px;
width: 400px;
margin-left: 50px;
border: white;
background-color:white;
margin-top: 80px;
.user,.pass,.logine{
margin-top: 20px;
border: white;
margin-left: 10px;
button{
margin-left: 10px;
background-color: antiquewhite;
.foot{
text-align: center;
margin-top: 30px;
background-color:lightblue;
.login{
display: flex;
border: black;
.f{
margin-left: 200px;
}
</style>
<body>
<hr>
<hr>
<div class="body">
<div class="main">
<h4 >LOGIN</h4><hr>
<div class="user">
username: <br>
<span class="material-symbols-outlined">
contacts_product
</span><input type="text" placeholder="username">
</div><hr>
<div class="pass">
password: <br>
lock_person
</span><input type="password"placeholder="password">
</div>
<hr>
<div class="login"><button class="logine">Login</button> <p class="f">Forgot Password?</p></div>
</div>
<P class="foot">ErrorPage|SuccessFullLogin</P>
<p class="foot">Coded by RSM23</p>
</div>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dropdown</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column; /* Stack content vertically */
height: 100vh;
.container {
text-align: center;
.header {
text-align: center;
.navbar {
display: flex;
.nav-item {
margin: 0 10px;
padding: 8px 12px;
.dropdown {
position: relative;
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
.dropdown:hover .dropdown-content {
display: block;
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
.dropdown-content a:hover {
}
.sliding-text-container {
margin-top: 20px;
</style>
</head>
<body>
<div class="container">
<hr>
<hr>
<div class="navbar">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="dropdown">
<div class="nav-item">Products</div>
<div class="dropdown-content">
<a href="#">Smartphone</a>
<a href="#">Laptop</a>
<a href="#">Smartwatch</a>
</div>
</div>
<div class="nav-item">Contact Us</div>
</div>
<div class="sliding-text-container">
<p class="sliding-text" id="slide">Welcome to our official page...! Thank you for visiting us..!</p>
</div>
</div>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Without Hover: -
Hover: -
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<style>
body{
background-color: whitesmoke;
.main{
display: flex;
text-align: center;
margin-top: 150px;
.second{
margin-left: 50px;
background-color: white;
height: 250px;
width: 400px;
input,button{
margin-top: 10px;
margin-top: 20px;
}
</style>
<body>
<hr>
<hr>
<div class="main">
<div class="first">
<h2 style="color: blue;">Facebook</h2>
<p>connects with friends and the worlds around you on facebook</p>
</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>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,
0,0" />
<title>Employee Registration Form</title>
</head>
<style>
.main{
text-align: center;
height: 570px;
width: 500px;
margin-left: 500px;
h2{
text-align: center;
color: red;
</style>
<body>
<hr>
<hr>
<form action="/action_page.php" method="post" class="main">
<div>
person_apron
</span>
<h2>Employee Registration Form</h2>
<label for="title">Title:</label>
<select id="title" name="title">
<option value="Mr">Mr.</option>
<option value="Mrs">Mrs.</option>
<option value="Ms">Ms.</option>
</select>
</div>
<div>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" placeholder="Your first name..">
</div>
<div>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
<div>
<label for="adr">Mail Address 1:</label>
<input type="text" id="adr" name="address1" placeholder="Your mail address..">
</div>
<div>
<label for="adr">Mail Address 2:</label> <input type="text" id="adr2" name="address2"

placeholder="Your mail address..">
</div>
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" placeholder="Your city..">
</div>
<div>
<label for="state">State:</label>
<input type="text" id="state" name="state" value="Gujarat" readonly> </div>
<div>
<label for="zip">Zip:</label>
<input type="text" id="zip" name="zip" placeholder="Your zip..">
</div>
<div>
<label for="file">Upload Photo:</label>
<input type="file" id="file" name="photo">
</div>
<div>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" placeholder="Your e-mail..">
</div>
<div>
<label for="mobile">Mobile:</label>
<input type="tel" id="mobile" name="mobile" placeholder="Your mobile number..">
</div>
<div>
<label>Languages known:</label><br>
<input type="checkbox" id="language1" name="language[]" value="Gujarati">
<label for="language1">Gujarati</label><br>
<input type="checkbox" id="language2" name="language[]" value="Hindi">

<label for="language2">Hindi</label><br>
<input type="checkbox" id="language3" name="language[]" value="English">
<label for="language3">English</label><br>
<input type="checkbox" id="language4" name="language[]" value="Marathi">
<label for="language4">Marathi</label><br>
</div>
<div>
<label for="other">Additional Information:</label><br>
<textarea id="other" name="other" rows="5" cols="33" placeholder="Write something.."></textarea>
</div>
<div class="form-actions">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>List Types Example</title>
<style>
.list-container {
text-align: center;
ul, ol, dl {
margin: 0;
padding: 0;
text-align: left;
li {
margin-bottom: 5px;
</style>
</head>
<body>
<hr>

<hr>
<div class="list-container">
<h2>Unordered List (ul):</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2>Ordered List (ol):</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</div>
<h2>Description List (dl):</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language.</dd>
<dt>CSS</dt>
<dd>Cascading Styling Sheet.</dd>
<dt>JSON</dt>
<dd>Java Script Object Notation.</dd>
</dl>
</div>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audio and Video Example</title>
</head>
<style>
body{
text-align: center;
justify-content: center; }
</style>
<body> <hr>
<h4 style="text-align: center;">RollNo:-63 Course: -B.C.A</h4> <hr>
<h2>Audio</h2>
<audio controls>
<source src="your_audio.mp3" type="audio/mpeg">
<source src="your_audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<h2>Video</h2>
<video width="400" height="300" controls>
<source src="your_video.mp4" type="video/mp4">
<source src="your_video.webm" type="video/webm">
Your browser does not support the video element.
</video>
</body> </html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT
Name-Tushar Pandey
Course- BCA Sem- 4

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frames and Iframes Example</title>
</head>
<style>
body{
} div{
margin-left: 450px;
margin-top: 50px; }
</style>
<body> <hr>
<h4 style="text-align: center;">RollNo:-63 Course: -B.C.A</h4> <hr>
<div>
<frameset rows="50%, 50%">
<frame src="p1.html" name="frame1">
<frame src="p10.html" name="frame2"> </frameset>
<iframe src="iframe.html" width="400" height="300" frameborder="0" allowfullscreen></iframe>
<img src="../Project/images/dhari devi.jpg" alt="Example Image" width="300" height="200">
</div>
</body>
</html>
Name-Tushar Pandey
Course- BCA Sem- 4
OUTPUT

HTML Practical File

Uploaded by

Copyright:

Available Formats

You might also like

HTML Practical File

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

HTML Practical File

Uploaded by

Copyright:

Available Formats

Name-Tushar Pandey

Course- BCA Sem- 4

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

<h4 style="text-align: center;">Name:-Tushar Pandey</h4>

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

<table style="margin: 0 auto; text-align: center;" border="5px solid " cellpadding="15">

<caption style="font-weight: bold;">Specification Table With Hours and Marks</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>Introduction to Internet Technology</td>

<td>Basics of HTML & CSS</td>

<td>Active Server Pages 3.0</td>

<td>Server Side Coding with VBScript and XML</td>

<td>ASP Objects & Components</td>

<td>Accessing Database with ASP&ADO</td>

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

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

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

<h4 style="text-align: center;">Name:-Tushar Pandey</h4>

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

<h1 style="color: blue; text-align: center;">Hey..! This is an Inline Style Heading</h1>

<h1>Hey..! This is an Embedded Style Heading</h1>

<p>This paragraph has an embedded style applied.</p>

<h1 class="head">Hey..! This is an External Style Heading</h1>

<p class="para">This paragraph has an external style applied.</p>

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

<title style="text-align: center;">Internal Hyperlink Example</title>

<h4 style="text-align: center;">Name:-Tushar Pandey</h4>

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

<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.<br>

graphic era university</p>

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

<title>Tech X Company - Innovative Technology Solutions</title>

padding: 10px 20px;

<h4 style="text-align: center;">Name:-Tushar Pandey</h4>

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

<h1>Tech X Company - Innovative Technology Solutions</h1>

<li>Translation: Our language experts offer fluent language translation services.</li>

<h2>Discover Our Latest Smartphone</h2>

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

<p>&copy; 2024 Tech X Company - Innovative Technology Solutions</p>

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

border: 2px solid black;

border: 2px solid black;

<h4 style="text-align: center;">Name:-Tushar Pandey</h4>

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

<p>Photography is all about capturing good moments</p>

<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>

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

<p>© 2024 Tech X Company - Innovative Technology Solutions</p>

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