HTML Basics - HTML Tutorials

Introduction to HTML

Tutorial 1 of 5

1. Introduction

This tutorial aims to provide a basic understanding of HTML (HyperText Markup Language), its syntax, and its role in web development.

By the end of this tutorial, you should be able to:

Understand the basic structure of an HTML document
Use various HTML tags to create content on a webpage
Create forms and tables using HTML

Prerequisites: No prerequisites are required. This is a beginner-friendly tutorial.

2. Step-by-Step Guide

HTML is the standard markup language for creating web pages. It allows us to structure our web page content using tags.

A basic HTML page structure looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>
</html>

<!DOCTYPE html>: This is a declaration that informs the browser this document is written in HTML5.
<html>: This is the root element of the page.
<head>: Contains metadata about the page, such as the title.
<title>: The title of the web page, shown on the browser's title bar or tab.
<body>: This includes the main content of the web page.

HTML Tags

HTML tags are used to create HTML elements. Each tag has an opening (<tag>) and a closing (</tag>). For example, <h1> is a heading tag, and </h1> is its closing tag.

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

3. Code Examples

Let's create a basic HTML page with some content.

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</body>
</html>

When you open this in a browser, you'll see the title "My First Web Page" in the browser tab, and on the page, you'll see a headline saying "Welcome to My Web Page", followed by two paragraphs.

4. Summary

In this tutorial, we covered:

The basic structure of an HTML document
How to use various HTML tags to create content on a webpage

Next, you should learn about more complex HTML elements like lists, images, links, and tables. You can find more information and tutorials on Mozilla Developer Network (MDN)

5. Practice Exercises

Create a web page with a title of "About Me", a main heading saying "My Interests", and a paragraph describing your hobbies.
Add another heading called "My Skills" and list at least three skills you have.
Create a web page with a form that asks for the user's name and email.

You can use online HTML editors like JSFiddle or CodePen to practice. Happy coding!