Scribd
Upload
13 views

Priya Internship

Uploaded by

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

Priya Internship

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample HTML Page</title>
<style>
/* CSS styles can be added here */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Sample Page</h1>
<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>
</header>

<section id="home">
<h2>Home Section</h2>
<p>This is the home section of the webpage.</p>
<img src="https://via.placeholder.com/150" alt="Placeholder Image">
</section>

<section id="about">
<h2>About Section</h2>
<p>This section provides information about the webpage.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>

<section id="contact">
<h2>Contact Section</h2>
<p>Contact us using the form below:</p>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
required></textarea>
<br>
<button type="submit">Send</button>
</form>
</section>

<footer>
<p>&copy; 2024 Sample Page. All rights reserved.</p>
</footer>
</body>
</html>

This HTML document includes:

 Document structure (<!DOCTYPE html>, <html>, <head>, <body>)


 Meta tags (<meta>)
 Title (<title>)
 External stylesheet (<style>)
 Sections (<header>, <nav>, <section>, <footer>)
 Headings (<h1>, <h2>)
 Paragraphs (<p>)
 Lists (<ul>, <li>)
 Links (<a>)
 Images (<img>)
 Form (<form>, <input>, <textarea>, <label>, <button>)
 Comments (not explicitly shown in the code but can be added with <!-- comment -->)

This example covers many common HTML tags used to create a basic webpage with sections,
navigation, content, and a form for user interaction.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image and Table Example</title>
<style>
/* CSS styles for the table */
table {
width: 50%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Image and Table Example</h1>

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

<h2>Sample Table:</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>

<h2>Sample Text with Font Tag:</h2>


<font color="blue">This text is blue.</font><br>
<font color="red">This text is red.</font><br>
<font color="green">This text is green.</font>
</body>
</html>

Explanation of the HTML:

1. Image Tag (<img>):


o <img> tag is used to display an image.
o src attribute specifies the URL of the image.
o alt attribute provides alternative text for the image, useful for accessibility.
o width and height attributes set the dimensions of the image.
2. Table Tag (<table>):
o <table> tag creates a table.
o <tr> tag defines a row within the table.
o <th> tag defines a header cell within a row.
o tag defines a standard cell within a row.
<td>
oCSS is used to style the table (border-collapse, padding, text-align, etc.).
3. Font Tag (<font>):
o <font> tag is used to specify the font and color of text.
o color attribute specifies the color of the text.

In this example:

 An image placeholder (https://via.placeholder.com/300) is displayed using the


<img> tag.
 A simple table with headers (<th>) and data cells (`<td

You might also like