Introduction
HTML, or HyperText Markup Language, is the foundation of the web. It is a markup language that is used to describe the structure and content of web pages. HTML is used to create everything from simple text pages to complex interactive websites.
This tutorial will teach you the basics of HTML so that you can create your own web pages. We will cover the following topics:
- The different elements of HTML
- How to structure a web page
- How to add content to a web page
- How to style a web page
- How to add interactivity to a web page
The Basics of HTML
HTML is a very simple language to learn. It is made up of a few basic elements that are used to describe the structure and content of a web page.
The most basic HTML element is the <html> element. This element marks the beginning and end of the HTML document.
HTML
<html>
...
</html>
The <body> element is used to contain the content of the web page. Everything inside the <body> element will be displayed on the web page.
HTML
<html>
<body>
...
</body>
</html>The <head> element is used to contain the metadata of the web page. This includes information such as the title of the page, the author of the page, and the keywords that describe the page.
HTML
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
...
</body>
</html>Structuring a Web Page
The <div> element is a very versatile element that can be used to structure a web page. The <div> element can be used to create containers for content, to define sections of a page, and to group related elements together.
To create a <div> element, simply use the following syntax:
HTML
<div>
...
</div>You can then add content to the <div> element by placing it between the opening and closing tags.
For example, the following code creates a <div> element that contains some text:
HTML
<div>
This is a <b>div</b> element.
</div>Adding Content to a Web Page
You can add a variety of content to a web page using HTML. Some of the most common types of content include:
- Text
- Images
- Videos
- Links
- Tables
- Forms
To add text to a web page, simply use the <p> element. The <p> element marks the beginning and end of a paragraph of text.
HTML
<p>This is some text.</p>To add an image to a web page, simply use the <img> element. The <img> element takes two attributes: the src attribute, which specifies the URL of the image, and the alt attribute, which provides a text alternative for the image in case it is not displayed.
HTML
<img src="image.jpg" alt="This is an image.">To add a video to a web page, you can use the <video> element. The <video> element takes a number of attributes, including the src attribute, which specifies the URL of the video, the controls attribute, which specifies whether or not the video should have playback controls, and the width and height attributes, which specify the dimensions of the video.
HTML
<video src="video.mp4" controls width="500" height="300">
This is a video.
</video>To add a link to a web page, you can use the <a> element. The <a> element takes two attributes: the href attribute, which specifies the URL of the link, and the target attribute, which specifies where the link should open.
HTML
To add a table to a web page, you can use the <table> element. The <table> element takes a number of attributes, including the border attribute, which specifies the thickness of the table border, and the width and `height