Introduction
HTML (HyperText Markup Language) is the standard language used to create and design documents on the World Wide Web. It structures the content on web pages by using a series of elements and tags, which define the different parts of the document, such as headings, paragraphs, links, images, and more.
Key Concepts
- HyperText: Refers to the way in which web pages (HTML documents) are linked together. Hyperlinks are the primary means of navigation on the web.
- Markup Language: A system for annotating a document in a way that is syntactically distinguishable from the text. HTML uses tags to mark up the content.
Basic Structure of an HTML Document
An HTML document is structured with a series of nested elements. Here is a simple example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph of text.</p>
</body>
</html>Explanation of the Code
<!DOCTYPE html>: This declaration defines the document type and version of HTML. It helps browsers to render the content correctly.<html>: The root element that contains all other HTML elements.<head>: Contains meta-information about the HTML document, such as its title and links to stylesheets.<title>: Sets the title of the web page, which is displayed in the browser's title bar or tab.<body>: Contains the content of the HTML document, such as text, images, links, etc.<h1>: A heading element. In this case, it is the highest level heading.<p>: A paragraph element that contains a block of text.
Practical Example
Let's create a simple HTML page to understand how HTML works in practice.
Step-by-Step Guide
- Open a Text Editor: You can use any text editor like Notepad, Sublime Text, or Visual Studio Code.
- Create a New File: Save the file with a
.htmlextension, for example,index.html. - Write the HTML Code: Copy and paste the following code into your file:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page. I am learning HTML!</p>
</body>
</html>- Save the File: Save your changes.
- Open the File in a Browser: Double-click the file or open it in a web browser to see your first HTML page in action.
Exercise
Task
Create an HTML document that includes the following elements:
- A title of your choice.
- A main heading (
<h1>) with the text "Hello, World!". - A paragraph (
<p>) with a brief introduction about yourself.
Solution
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>My name is [Your Name]. I am learning HTML to build amazing websites!</p>
</body>
</html>Common Mistakes
- Forgetting the
<!DOCTYPE html>declaration: This can cause the browser to render the page in "quirks mode," leading to unexpected behavior. - Mismatched Tags: Ensure that every opening tag has a corresponding closing tag (e.g.,
<p>should be closed with</p>). - Incorrect Nesting: HTML elements should be properly nested. For example,
<p><strong>Text</strong></p>is correct, but<p><strong>Text</p></strong>is not.
Conclusion
In this lesson, you learned what HTML is and how it is used to structure web pages. You also created your first HTML document and learned about the basic structure of an HTML document. In the next lesson, we will set up your environment to start creating more complex HTML pages.
HTML Course
Module 1: Introduction to HTML
- What is HTML?
- Setting Up Your Environment
- Basic HTML Structure
- HTML Tags and Elements
- Creating Your First HTML Page
Module 2: HTML Text Formatting
- Headings and Paragraphs
- Text Formatting Tags
- Lists: Ordered and Unordered
- Blockquotes and Preformatted Text
Module 3: HTML Links and Media
Module 4: HTML Tables
Module 5: HTML Forms
- Creating a Basic Form
- Form Elements: Input, Textarea, and Select
- Form Attributes and Validation
- Submitting Forms