Creating a web page using HTML is the first step to building a website. Below is a detailed guide with code examples that explain the structure and elements of a basic HTML web page.
🧱 What is HTML?
HTML (HyperText Markup Language) is the standard language used to create the structure of web pages. It uses "tags" to define elements like headings, paragraphs, images, links, and more.
✅ Basic Structure of an HTML Web Page
Here is the simplest HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page. I'm learning how to create websites!</p>
</body>
</html>
🔍 Explanation of Each Part
| Tag | Purpose |
| ----------------- | ------------------------------------------------ |
| `<!DOCTYPE html>` | Declares the document as HTML5
| `<html>` | Root of the HTML page
| `<head>` | Contains meta information (not visible to users)
| `<title>` | Sets the title of the page (seen in browser tab)
| `<body>` | Contains the visible content of the web page
| `<h1>` | A large heading
| `<p>` | A paragraph of text
📚 More HTML Elements
Here’s an extended example that uses headings, paragraphs, links, images, lists, and tables:
<!DOCTYPE html>
<html>
<head>
<title>My Personal Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>Hello! My name is Riddhit. I'm learning HTML to build awesome websites.</p>
<!-- Link -->
<p>Visit my blog: <a href="https://skytech6000.blogspot.com" target="_blank">SkyTech6000</a></p>
<!-- Image -->
<img src="https://via.placeholder.com/300" alt="Sample Image" width="300">
<!-- Unordered List -->
<h2>My Hobbies:</h2>
<ul>
<li>Coding</li>
<li>Drawing</li>
<li>Gaming</li>
</ul>
<!-- Ordered List -->
<h2>Goals for 2025:</h2>
<ol>
<li>Learn web development</li>
<li>Create my own app</li>
<li>Launch my own website</li>
</ol>
<!-- Table -->
<h2>My Weekly Schedule</h2>
<table border="1">
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Study & Code</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Drawing & Games</td>
</tr>
</table>
</body>
</html>
🖌️ Adding Some Style (CSS)
You can style your page using CSS. Here's how:
<head>
<title>Styled Web Page</title>
<style>
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
color: #333;
padding: 20px;
}
h1 {
color: #2e8b57;
}
img {
border-radius: 10px;
}
table {
width: 50%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #ddd;
}
</style>
</head>
💾 How to Save and View
-
Open Notepad (Windows) or TextEdit (Mac) or any code editor like VS Code.
-
Paste the HTML code.
-
Save it as index.html.
-
Double-click the file or open it in a browser like Chrome or Firefox.
✅ Summary
You now know:
-
The basic structure of an HTML page
-
Common elements: headings, paragraphs, links, images, lists, and tables
-
How to add simple styling with CSS.
Comments
Post a Comment