:max_bytes(150000):strip_icc()/GettyImages-1086740226-5c2d625a4cedfd00016ed36c.jpg "Create a webpage / website involving: Lists, Images and backgrounds, Hyperlinks and Tables")
Create a webpage / website involving:
- Lists
- Images and backgrounds
- Hyperlinks
- Tables
Introduction:
In this experiment, we aim to create a basic webpage using HTML (Hypertext Markup Language). HTML is the standard markup language for creating web pages and web applications. It provides a structure for content on the World Wide Web, allowing us to incorporate text, images, links, and other elements seamlessly.
Procedure:
Step 1: Setting Up the Document:
Begin by creating a new HTML document. Open a text editor and save the file with a .html extension. We'll start with the basic structure of an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Webpage Experiment</title>
</head>
<body></body>
</html>
Step 2: Adding Content with Lists
<h3>List of Items</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
List of Items
- Item 1
- Item 2
- Item 3
Results
Step 3: Inserting Images and Backgrounds
<h2>Images and Backgrounds</h2>
<img src="https://miro.medium.com/v2/resize:fit:1358/0*mr8-yBiazRAn6IxE" alt="Description of the image">
<div style="background-image: url(background.jpg); background-size: cover; height: 300px;">
<!-- Content within the background -->
</div>
Results
Images and Backgrounds
Step 4: Creating Hyperlinks
<h3>Useful Links</h3>
<a href="https://www.instagram.com/raufijaz978">Example Website</a>
Results
Useful Links
Example WebsiteStep 5: Organizing Data with Tables
<h4>Table Example</h4>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
Results
Table Example
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Step 6: Closing the HTML Document
</body>
</html>