HTML Course - Lesson 1: Introduction to HTML

September 01, 2024

HTML Course - Lesson 1: Introduction to HTML

Welcome to the HTML Course! In this first lesson, we’ll cover the basics of HTML (HyperText Markup Language) and create a simple HTML document.

What is HTML?

HTML is the standard language used to create and design web pages. It provides the structure for web content and allows you to format text, images, links, and other elements on a web page.

Basic Structure of an HTML Document

An HTML document is composed of various elements enclosed in tags. Here’s a basic structure of an HTML document:


<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

Explanation of the Structure:

<!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in this case). It helps browsers to render the page correctly.
<html>: The root element of an HTML page. It contains all other elements.
<head>: Contains meta-information about the HTML document, such as the title and links to stylesheets.
<title>: Sets the title of the web page, which appears in the browser's title bar or tab.
<body>: Contains the content of the web page that is visible to users. This includes text, images, and other elements.
<h1>: Defines a top-level heading. HTML supports six levels of headings (<h1> to <h6>), with <h1> being the largest and most important.
<p>: Defines a paragraph of text.

Creating Your First HTML Page

Open a Text Editor: Use any text editor like Notepad (Windows), TextEdit (Mac), or VS Code.
Write the HTML Code: Copy and paste the code above into your text editor.
Save the File: Save the file with a .html extension (e.g., index.html).
Open the File in a Browser: Double-click the saved HTML file or right-click and choose "Open with" and select your preferred web browser (Chrome, Firefox, Safari, etc.).

Exercise

Create a New HTML Document: Follow the steps above to create a new HTML file.
Add Your Own Content: Modify the <h1> and <p> tags with your own text.
Experiment with More Tags: Add more elements like <h2>, <h3>, <ul>, <li>, and <a> to explore basic HTML tags. For example:


<h2>This is a Subheading</h2>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<a href="https://www.example.com">Visit Example.com</a>

Summary

In this lesson, you’ve learned about the basic structure of an HTML document and how to create a simple web page. HTML is the foundation of web development, and understanding its basic structure is crucial for creating web content.

In the next lesson, we’ll dive deeper into HTML elements and attributes, exploring how to format text, create lists, and add links and images.

HTML Course - Lesson 1: Introduction to HTML