Introduction to HTML

What is HTML?

HTML, or HyperText Markup Language, is the standard language used to create web pages.
It consists of a series of elements that define the structure and content of a webpage.
Let's explore some fundamental HTML concepts and code examples for beginners.

HTML Document Structure Tags

Every HTML document is structured using various tags. Here are some essential ones:

<html>: The root element that wraps the entire HTML document.
<head>: Contains meta-information about the webpage.
<title>: Sets the title of the webpage (shown in the browser tab).
<body>: Contains the visible content of the webpage.

15.	<!DOCTYPE html>
26.	<html>
37.	<head>
48.	    <title>My First Web Page</title>
59.	</head>
610.	<body>
711.	    <h1>Welcome to My Web Page</h1>
812.	    <p>This is some content.</p>
913.	</body>
1014.	</html>
11

HTML Comments

You can add comments to your HTML code using  to provide notes for yourself or other developers.

1<!-- This is a comment. -->

Text Formatting

HTML provides tags to format text. Here are a few examples:

Bold text: <strong>

1<p>This is <strong>bold</strong> text.</p>

Italic text:<em>

1<p>This is <em>italic</em> text.</p>

Inserting Special Characters

To display special characters, use HTML entities.
For example, © represents the copyright symbol (©).

1<p>&copy; 2023 Your Company</p>

Anchor Tag

Anchors are used to create links.
You specify the link's destination using the href attribute.

1<a href="https://www.example.com">Visit Example.com</a>

Adding Images and Sound

To add images, use the <img> tag with the src attribute.
For sound, use the <audio> tag with the src attribute.

1<img src="image.jpg" alt="Description of the image">
2<audio controls>
3    <source src="audio.mp3" type="audio/mpeg">
4</audio>element
5

Lists: Types of Lists

HTML supports different types of lists:

Unordered List (<ul>) - A bulleted list:

1<ul>
2<li>Item 1</li>
3<li>Item 2</li>
4</ul>
5

Ordered List (

1<ol>
2<li>First item</li>
3<li>Second item</li>
4</ol>
5

Definition List (<dl>) - A list of terms and their definitions:

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition 2</dd>
6</dl>
7

Tables

Tables are used to display tabular data.
They consist of rows (<tr>), headers (<th>), and data cells (<td>).

1<table>
2    <tr>
3        <th>Name</th>
4        <th>Age</th>
5    </tr>
6    <tr>
7        <td>John</td>
8        <td>25</td>
9    </tr>
10    <tr>
11        <td>Jane</td>
12        <td>30</td>
13    </tr>
14</table>
15

Frames and Floating Frames

Frames are no longer commonly used in modern web design due to their limitations. Instead, use CSS for layout.
Floating frames are similar and have also become outdated.

Developing Forms

HTML forms allow users to input data. Key form elements include <form>, <input>, and <button>.
For instance, a simple contact form:

1<form action="/submit" method="post">
2    <label for="name">Name:</label>
3    <input type="text" id="name" name="name" required><br>
4
5    <label for="email">Email:</label>
6    <input type="email" id="email" name="email" required><br>
7
8    <button type="submit">Submit</button>
9</form>
10

Image Maps

An image map allows different regions of an image to be clickable and linked to different destinations.
Here's a basic example:

1<img src="worldmap.jpg" alt="World Map" usemap="#worldmap">
2
3<map name="worldmap">
4    <area shape="rect" coords="0,0,50,50" href="north.html">
5    <area shape="rect" coords="50,0,100,50" href="south.html">
6</map>
7

In this example, we have an image of a world map with clickable regions that link to different pages. The shape and coords attributes define the clickable area.

Conclusion

Remember that HTML is the foundation of web development. As you become more experienced, you can enhance your web pages with CSS and JavaScript for design and interactivity.

Table of contents