Table of contents
HTML, which stands for HyperText Markup Language, is the backbone of the web. It’s the standard language used to create and design web pages. If you’re new to web development, HTML is the perfect place to start your journey.
This tutorial will walk you through the basics of HTML step by step, helping you build your first simple web page.
What is HTML?
HTML is a markup language that structures web content using tags. These tags tell the browser how to display text, images, and other elements on a webpage.
For example:
<p> defines a paragraph.
<h1> to <h6> define headings.
<img> adds images.
Setting Up Your First HTML Page
Step 1: Create a File
1. Open a text editor (e.g., Notepad, VS Code, or Sublime Text).
2. Save the file with a .html extension, e.g., index.html.
Step 2: Basic Structure of an HTML Document
Every HTML document follows this basic structure:
html
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<p>This is my first HTML document.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html>: The root of the HTML document.
<head>: Contains meta-information, such as the title of the page.
<body>: Contains the visible content of the web page.
Adding Text to Your Page
Use the following tags to format text:
Headings: Define headings with <h1> to <h6>.
html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
Paragraphs: Add paragraphs with <p>.
html
<p>This is a paragraph of text.</p>
Bold and Italic:
html
<b>Bold Text</b>
<i>Italic Text</i>
4. Adding Links
Create hyperlinks using the <a> tag:
html
<a href=”https://www.google.com">Visit Google</a>
href`: Specifies the URL of the link.
5. Inserting Images
Add images to your webpage with the <img> tag:
html
<img src=”image.jpg” alt=”Description of Image” width=”300">
src: Path to the image file.
alt: Text displayed if the image doesn’t load.
width: Adjusts the image size.
6. Creating Lists
Unordered List:
html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List:
html
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
```
7. Adding a Table
Create a table using the <table> tag:
html
<table border=”1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
</tr>
</table>
<tr>: Table row.
<th>: Header cell.
<td>: Data cell.
8. Styling Your Page
You can style your HTML using inline CSS within the style attribute:
html
<p style=”color: blue; font-size: 20px;”>This is styled text.</p>
For more complex designs, you’ll use a separate CSS file, but that’s a topic for another tutorial.
9. Your First HTML Project
Put it all together to create a simple web page:
html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>Hello! This is my first web page created with HTML.</p>
<a href=”https://www.example.com">Click here to learn more</a>
<img src=”image.jpg” alt=”Sample Image” width=”300">
<h2>My Favorite Things:</h2>
<ul>
<li>Coding</li>
<li>Music</li>
<li>Traveling</li>
</ul>
<h2>My Friends</h2>
<table border=”1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
</tr>
</table>
</body>
</html>