HTML Tutorial

HTML Elements

Key Concepts

HTML (HyperText Markup Language) is the foundation for creating web pages. It consists of a series of elements, each with a specific purpose:

  • Text elements: Display text on the page (<p>, <h1>, <h2>, etc.)
  • Images: Embed images into the page (<img>)
  • Links: Create clickable links to other web pages or resources (<a>)
  • Lists: Organize content into ordered or unordered lists (<ol>, <ul>)
  • Tables: Display data in a tabular format (<table>)

Practical Steps

To create an HTML document, use a text editor (e.g., Notepad, Sublime Text) and follow these steps:

  1. Start with an HTML boilerplate:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
</body>
</html>
  1. Add HTML elements within the <body> tags:
<h1>My Web Page</h1>
<p>This is the main content of my page.</p>
<img src="image.jpg" alt="Image of a cat">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>

  1. Save the file with the extension .html.

  2. Open the file in a web browser to view the resulting web page.

Simple HTML Example

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>

<h1>My First Web Page</h1>

<p>This is my first web page. I'm using HTML to create this page.</p>

<img src="cat.jpg" alt="A picture of a cat">

<ul>
<li>This is a list</li>
<li>Of items</li>
</ul>

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>

</body>
</html>

This example demonstrates various HTML elements in action:

  • A headline <h1> for the page title
  • A paragraph <p> for the main content
  • An image <img> with an alternative text ("A picture of a cat")
  • An unordered list <ul>
  • A table <table> with two columns ("Name" and "Age") and one row