In this lesson, we will guide you through the process of creating your very first HTML page. By the end of this lesson, you will have a basic HTML page that you can view in your web browser. Let's get started!
Step-by-Step Guide
- Setting Up Your Environment
Before we begin, ensure you have the following:
- A text editor (e.g., Visual Studio Code, Sublime Text, Notepad++)
- A web browser (e.g., Google Chrome, Mozilla Firefox)
- Basic HTML Structure
Every HTML document has a basic structure that includes the following elements:
<!DOCTYPE html>: Declares the document type and version of HTML.<html>: The root element of an HTML page.<head>: Contains meta-information about the document.<title>: Sets the title of the document.<body>: Contains the content of the document.
- Creating the HTML File
- Open your text editor.
- Create a new file and save it as
index.html.
- Writing the HTML Code
Copy and paste the following code into your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First HTML Page</h1>
<p>This is a paragraph of text on my first HTML page.</p>
</body>
</html>
- Explanation of the Code
<!DOCTYPE html>: This declaration defines the document to be HTML5.<html lang="en">: The<html>tag is the root element of the HTML page, and thelangattribute specifies the language of the document.<head>: Contains meta-information about the HTML document.<meta charset="UTF-8">: Sets the character encoding for the document to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive and sets the viewport to match the device's width.<title>My First HTML Page</title>: Sets the title of the HTML document, which appears in the browser's title bar or tab.
<body>: Contains the content of the HTML document.<h1>Welcome to My First HTML Page</h1>: A heading element that displays a large, bold title.<p>This is a paragraph of text on my first HTML page.</p>: A paragraph element that contains some text.
- Viewing Your HTML Page
- Save the
index.htmlfile. - Open your web browser.
- Drag and drop the
index.htmlfile into the browser window, or use the browser's "Open File" option to navigate to and open the file.
You should see a page with a heading and a paragraph of text.
Practical Exercise
Task
Create an HTML page with the following content:
- A title of your choice.
- A heading that says "Hello, World!".
- A paragraph that describes your favorite hobby.
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Hobby</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>My favorite hobby is reading books. I enjoy exploring different genres and learning new things through literature.</p>
</body>
</html>Common Mistakes and Tips
- Missing DOCTYPE: Always include
<!DOCTYPE html>at the beginning of your HTML document to ensure it is interpreted correctly by browsers. - Incorrect nesting: Ensure that HTML tags are properly nested. For example,
<p><strong>Text</strong></p>is correct, but<p><strong>Text</p></strong>is not. - Forgetting to save: Remember to save your HTML file after making changes before viewing it in the browser.
Conclusion
Congratulations! You have created your first HTML page. You now understand the basic structure of an HTML document and how to create and view an HTML file in a web browser. In the next lesson, we will dive deeper into HTML tags and elements to expand your knowledge and skills.
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