Scribd
Upload
28 views17 pages

Ghattu Internal

Internal pdf of ghattu

Uploaded by

g.bhagyalakshmi1978
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
28 views17 pages

Ghattu Internal

Internal pdf of ghattu

Uploaded by

g.bhagyalakshmi1978
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/ 17

Q1)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic HTML Tags</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: lightblue;
padding: 20px;
text-align: center;
}
footer {
background-color: lightgray;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
article {
margin: 20px;
}
</style>
</head>
<body>

<!-- Header section -->


<header>
<h1>Welcome to My Basic HTML Page</h1>
<p>This page demonstrates basic HTML tags</p>
</header>

<!-- Navigation section -->


<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<!-- Main content area -->


<article>
<section id="home">
<h2>Home</h2>
<p>This is a <strong>home</strong> section with some <em>emphasized</em> text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>

<section id="about">
<h2>About</h2>
<p>Here is an <a href="https://example.com">external link</a> to another page.</p>
<p>The image below is an example of an image tag:</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image" />
</section>

<section id="contact">
<h2>Contact</h2>
<p>To contact us, please fill in the form below:</p>
<form action="#" 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>
<textarea name="message" id="message" rows="4" cols="50" placeholder="Enter your
message"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</section>
</article>

<!-- Footer section -->


<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
</footer>
</body>
</html>
Q2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Lists</title>
<style>
body { font-family: Arial, sans-ser}
section {margin: 20px;}
ol, ul, dl {margin-left: 20px;}
</style>
</head>
<body>
<h1>HTML Lists Examples</h1>
<!-- Unordered List -->
<section>
<h2>Unordered List</h2>
<p>An unordered list uses bullet points for each item:</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
</ul>
</section>
<!-- Ordered List 
<section>
<h2>Ordered List</h2>
<p>An ordered list uses numbers to order the items:</p>
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
<li>Fourth step</li>
</ol>
</section>

<!-- Definition List -->


<section>
<h2>Definition List</h2>
<p>A definition list is used to define terms:</p>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>A programming language used for web development</dd>
</dl>
</section>

</body>
</html>
Q3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Tag</title>
</head>
<body>

<h1>HTML Image Tag Examples</h1>

<!-- Basic Image -->


<img src="https://via.placeholder.com/300" alt="Placeholder" width="300" height="200"
title="Placeholder Image">

<!-- Responsive Image -->


<img src="https://via.placeholder.com/600x400" alt="Responsive" width="100%" height="auto">

<!-- Lazy Loaded Image -->


<img src="https://via.placeholder.com/500x300" alt="Lazy Loaded" width="500" height="300"
loading="lazy">
<!-- Image Map Example -->
<img src="https://via.placeholder.com/500x300" alt="Image Map" usemap="#map" width="500"
height="300">
<map name="map">
<area shape="rect" coords="34,44,270,350" alt="Rectangle" href="https://example.com/rectangle">
<area shape="circle" coords="200,200,40" alt="Circle" href="https://example.com/circle">
</map>

</body>
</html>

Q4)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linking Example</title>
</head>
<body>

<h1>Linking Example</h1>
<p>Visit <a href="https://www.example.com" target="_blank">Example Website</a>.</p>
<p><a href="#section1">Go to Section 1</a></p>

<section id="section1">
<h2>Section 1</h2>
<p>This is an internal link example.</p>
<p><a href="#top">Back to top</a></p>
</section>

<p id="top"></p>

</body>
</html>

Q5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio and Video Tags</title>
</head>
<body>

<h1>HTML Audio and Video Tags Example</h1>


<!-- Audio Tag Example -->
<section>
<h2>Audio Example</h2>
<p>Click the play button to listen to the audio:</p>
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
type="audio/mp3">
Your browser does not support the audio element.
</audio>
</section>

<!-- Video Tag Example -->


<section>
<h2>Video Example</h2>
<p>Click the play button to watch the video:</p>
<video width="600" controls>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</section>

</body>
</html>
Q6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Member Info</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e0e0e0;
}
</style>
</head>
<body>
<h1>Member Info</h1>
<table>
<caption>Contact Details</caption>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>John Doe</td><td>1990-05-14</td><td>[email protected]</td><td>123-
456-7890</td></tr>
<tr><td>2</td><td>Jane Smith</td><td>1985-08-
22</td><td>[email protected]</td><td>987-654-3210</td></tr>
<tr><td>3</td><td>Emily Johnson</td><td>1992-03-
30</td><td>[email protected]</td><td>555-123-4567</td></tr>
<tr><td>4</td><td>Michael Brown</td><td>1988-11-
10</td><td>[email protected]</td><td>777-888-9999</td></tr>
<tr><td>5</td><td>Linda White</td><td>1995-06-
19</td><td>[email protected]</td><td>333-444-5555</td></tr>
</tbody>
</table>
</body>
</html>

Q7)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rowspan & Colspan</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: auto;
text-align: center;
}
th, td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Category</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Name</th><th>Age</th><th>Location</th>
</tr>
<tr>
<td rowspan="2">Team A</td>
<td>John</td><td>28</td><td>NY</td>
</tr>
<tr>
<td>Jane</td><td>34</td><td>Chicago</td>
</tr>
<tr>
<td rowspan="2">Team B</td>
<td>Emily</td><td>22</td><td>LA</td>
</tr>
<tr>
<td>Michael</td><td>30</td><td>Houston</td>
</tr>
</table>
</body>
</html>

Q8)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<form>
<h2>Application Form</h2>
<label>Name: <input type="text" name="name"></label><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports<br><br>
<label>Country:</label>
<select name="country">
<option value="us">USA</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select><br><br>
<label>Comments:</label><br>
<textarea name="comments" rows="4" cols="30"></textarea><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>

Q9)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Demo</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; }
iframe { margin-top: 20px; }
</style>
</head>
<body>
<h1>HTML Elements</h1>
<p>Welcome to the <strong>HTML demo page</strong>. Visit <a href="https://example.com"
target="_blank">Example</a>.</p>
<img src="https://via.placeholder.com/150" alt="Image">

<h2>Table</h2>
<table>
<tr><th>#</th><th>Name</th><th>Age</th></tr>
<tr><td>1</td><td>John</td><td>30</td></tr>
<tr><td>2</td><td>Jane</td><td>25</td></tr>
</table>

<h2>Form</h2>
<form>
<label>Name: <input type="text" name="name"></label><br>
<label>Gender: <input type="radio" name="gender"> Male <input type="radio" name="gender">
Female</label><br>
<label>Hobbies: <input type="checkbox"> Reading <input type="checkbox"> Sports</label><br>
<label>Country: <select><option>USA</option><option>India</option></select></label><br>
<label>Comments:<br><textarea></textarea></label><br>
<button type="submit">Submit</button>
</form>

<h2>Frame</h2>
<iframe src="https://wikipedia.org" width="100%" height="200"></iframe>
</body>
</html>
Q10)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Types</title>
<link rel="stylesheet" href="styles.css"> <!-- External CSS -->
<style> /* Internal CSS */
h1 { color: blue; }
p { font-size: 14px; }
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Demo</h1> <!-- Inline CSS -->
<p>This demonstrates inline, internal, and external CSS.</p>
</body>
</html>

You might also like