Scribd
Upload
44 views20 pages

Awt Solutions

Advance we technology .

Uploaded by

cyberwalls77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views20 pages

Awt Solutions

Advance we technology .

Uploaded by

cyberwalls77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

1. Create a Web Page Using Basic HTML Controls.

<html>
<head>
<title>Practical 1</title>
</head>
<body>
<h1>HTML Heading tag</h1>
<p> HTML headings are defined with the h1 to h6 tags. h1
defines the most important heading. h6 defines the least
important heading. </p>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag :</p>
<a href="https://www.raisoni.net">This is a link</a>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src= "
C:\xampp\htdocs\dashboard\images\team\paul-hinz.jpg”
alt="Raisoni College Image" width="104" height="142">
</body>
</html>

2.Create a Web Page for displaying a paragraph using block level tags, HR
tags.
<html>
<head>
<title>Practical2</title>
</head>
<body>
<h1>Basic Internet Terms</h1>
<h2>Browser</h2>
<p>Browser software is specifically designed to convert HTML
and XML computer code into human-readable documents.</p>
<hr>
<h2>Web Page </h2>
<p>A web page is what you see in a web browser when you're
on the internet.</p>
<hr>
<h2>Uniform Resource Locators (URLs)</h2>
<p>Uniform Resource Locators (URLs) are the web browser
addresses of internet pages and files.</p>
</body>
</html>

3.Create a Web Page Using Text Level tags.


<html>
<head>
<title>Practical 3</title>
</head>
<body>
<h1 style="color:#ff00ff;border:2px solid red;">HTML Text
Level tags and Special Characters</h1>
<h2>1.Bold Tag</h2>
<p style=" color:green;border:2px solid green; ">
<B> Bold Text </B></p>
<h2>2.Italic Tag</h2>
<p style=" color:Tomato;border:2px solid #ff0000; ">
<i> Italic Text </i></p>
<h2>3.Underline Tag</h2>
<p style=" color:Orange;border:2px solid rgb(238, 130, 238);">
<u> Underline Text </u></p>
<h2>4.STRIKE Tag</h2>
<p style=" color:DodgerBlue;border:2px solid #6fa9e6; ">
<STRIKE> Strike-through Text </STRIKE></p>
<h2>5.Subscript Tag</h2>
<p style=" color:MediumSeaGreen;border:2px solid rgb(255,
41,108); ">a
<SUB> b </SUB></p>
<h2>6.Superscript Tag</h2>
<p style=" color:SlateBlue;border:2px solid #ffa500; ">a
<SUP> b</SUP></p>
</body>
</html>

4.Write an HTML Code to illustrate the usage of Ordered List.


<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>C Programming</li>
<li>AWT</li>
<li>DBMS</li>
</ol>

</body>
</html>

5.Write an HTML Code to illustrate the usage of Unordered List.


<html>
<body>
<h2>An unordered HTML list</h2>

<ul>
<li>C Programming</li>
<li>AWT</li>
<li>DBMS</li>
</ul>

</body>
</html>

6.Write an HTML Code to illustrate the usage of Definition List.


<html>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>These three elements are used to create a description
list:</p>
<dl>
<dt>AWT</dt>
<dd>Advaced Web Technology</dd>
<dt>DBMS</dt>
<dd>Database Management System</dd>
</dl>
</body>
</html>

7.Design a Web Page of class TIME TABLE using HTML table tag.
<html>
<head>
<title>Time Table</title>
</head>
<body>
<table border="1" cellspacing="0">

<th colspan="6">Time Table</th>


<tr>
<th rowspan="6">Hours</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>Programming Concepts</td>
<td>DBMS</td>
<td>Discrete Maths</td>
<td>Digital Electronics</td>
<td>Advanced Web Technology</td>
</tr>
<tr>
<td>Advanced Web Technology</td>
<td>Digital Electronics</td>
<td>Discrete Maths</td>
<td>DBMS</td>
<td>Programming Concepts</td>
</tr>
<tr>
<th colspan="5">Lunch</th>
</tr>
<tr>
<td>Discrete Maths</td>
<td>DBMS</td>
<td>Programming Concepts</td>
<th colspan="2" rowspan="2">Project</th>
</tr>
<tr>
<td>Advanced Web Technology</td>
<td>Digital Electronics</td>
<td>Discrete Maths</td>
</tr>
</table>
</body>
</html>

8.Write an HTML Code to create a registration for with the following fields
like Name, Password, Email.ID, Mobile no, Gender, DOB, Language known
and Address.

<html>
<head>
<title>Form Example</title>
</head>
<body>

<h2>Registration Form</h2>

<form action="form" 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 for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><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><br>
<label>Interests:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
<input type="checkbox" id="reading" name="interests"
value="reading">
<label for="reading">Reading</label>
<br><br>

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

</form>

</body>
</html>

9.Write an HTML Code to embed audio and video in a webpage using


<audio> and <video> tag.

<html>
<head>
<title>Audio and Video Example</title>
</head>
<body>

<h2>Embedding Audio and Video in HTML</h2>

<h3>Audio Example</h3>
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<p>This is an example of an embedded audio file.</p>

<hr>

<h3>Video Example</h3>
<video width="640" height="360" controls>
<source src="video-file.mp4" type="video/mp4">
<source src="video-file.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p>This is an example of an embedded video file.</p>

</body>
</html>

10.Write an HTML Code to display scrolling text from different directions


<!DOCTYPE html>
<html>
<head>
<title>Scrolling Text Example</title>
</head>
<body>
<h2>Scrolling Text from Different Directions</h2>

<h3>Left to Right</h3>
<marquee direction="right">This text scrolls from left to right!</marquee>

<br><br>

<h3>Right to Left</h3>
<marquee>This text scrolls from right to left!</marquee>

<br><br>

<h3>Top to Bottom</h3>
<marquee direction="down" height="100">This text scrolls from top to
bottom!</marquee>

<br><br>

<h3>Bottom to Top</h3>
<marquee direction="up" height="100">This text scrolls from bottom to
top!</marquee>

</body>
</html>
11.Write an HTML Code to demonstrate the use of frameset tag.

<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="25%,75%">

<frame src="navigation.html" name="navigation">

<frameset rows="50%,50%">
<frame src="header.html" name="header">
<frame src="content.html" name="content">
</frameset>

</frameset>

<noframes>
<body>
Your browser does not support frames. Please update your browser or use a
modern browser to view this content.
</body>
</noframes>

</html>
12.Design a Webpage using FONT PROPERTY of Cascading Stylesheet(CSS)
<!DOCTYPE html>
<html>
<head>
<title>Webpage with Font Properties</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}

h1 {
font-family: 'Georgia', serif;
font-size: 36px;
font-weight: bold;
text-align: center;
color: #4CAF50;
}

h2 {
font-family: 'Courier New', monospace;
font-size: 28px;
font-style: italic;
color: #333;
}

p{
font-family: 'Verdana', sans-serif;
font-size: 16px;
color: #555;
}

.highlight {
font-weight: bold;
color: #ff6600;
}

.centered {
text-align: center;
}
</style>
</head>
<body>

<h1>Welcome to My Webpage</h1>

<h2>Using CSS Font Properties</h2>

<p>This is a simple webpage demonstrating the use of various <span


class="highlight">font properties</span> in CSS.</p>

<p>We are using different <strong>font families</strong>, sizes, weights, and


styles to format the text.</p>
<p class="centered">This text is centered using the <strong>text-align</strong>
property.</p>

</body>
</html>

13.Use CSS to apply a background color to a section and add different types of
borders (solid, dashed, dotted) to various elements?
<!DOCTYPE html>
<html>
<head>
<title>Background Color and Borders</title>
<style>
/* Applying background color to the section */
section {
background-color: #f0f8ff;
padding: 20px;
}

/* Solid border for div */


.solid-border {
border: 2px solid #4CAF50;
padding: 15px;
margin-bottom: 15px;
}

/* Dashed border for div */


.dashed-border {
border: 2px dashed #ff6600;
padding: 15px;
margin-bottom: 15px;
}

/* Dotted border for div */


.dotted-border {
border: 2px dotted #0000ff;
padding: 15px;
margin-bottom: 15px;
}
</style>
</head>
<body>

<!-- Section with background color -->


<section>
<h2>Background Color and Borders Example</h2>

<!-- Div with solid border -->


<div class="solid-border">
This is a solid border.
</div>

<!-- Div with dashed border -->


<div class="dashed-border">
This is a dashed border.
</div>
<div class="dotted-border">
This is a dotted border.
</div>
</section>

</body>
</html>

14.Create hover effects on buttons and links, and create smooth transitions for
changing background color when a user hovers over them
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effects and Transitions</title>
<style>
/* Basic button style */
.btn {
background-color: #4CAF50; /* Initial background color */
color: white;
padding: 12px 24px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease; /* Smooth transition */
}

/* Hover effect on button */


.btn:hover {
background-color: #45a049; /* New background color on hover */
}

/* Basic link style */


.link {
color: #0000ff;
text-decoration: none;
font-size: 18px;
transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition
*/
}

/* Hover effect on link */


.link:hover {
color: #ff6600; /* Change link color on hover */
background-color: #f0f0f0; /* Change background color on hover */
}
</style>
</head>
<body>
<h2>Hover Effects and Smooth Transitions</h2>

<!-- Button with hover effect -->


<button class="btn">Hover Over Me</button>

<br><br>

<!-- Link with hover effect -->


<a href="#" class="link">Hover Over This Link</a>

</body>
</html>

15.Create a webpage for your organization having a home page and contact us
page(form with username, email and submit button).Also use suitable CSS.
(Optional).

<!DOCTYPE html>
<html>
<head>
<title>Simple Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
}

nav {
background-color: #333;
overflow: hidden;
}

nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

nav a:hover {
background-color: #575757;
}
section {
padding: 20px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<!-- Header section -->


<header>
<h1>Welcome to My Webpage</h1>
</header>

<!-- Navigation bar -->


<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>

<!-- Main content section -->


<section>
<h2>About This Webpage</h2>
<p>This is a simple webpage created using HTML and CSS. It includes a
header, a navigation bar, a content section, and a footer.</p>

<h2>Services We Offer</h2>
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>SEO Optimization</li>
</ul>
</section>

<!-- Footer section -->


<footer>
<p>&copy; 2024 My Simple Webpage</p>
</footer>

</body>
</html>

You might also like