HTML in 1 Day: Chapter 1
By Shahin Mannan on
June 1, 2024
- Frontend Development
Chapter 1: Getting Started with HTML
Why HTML Matters
HTML is the foundation of web development. It structures content on the web, making it crucial for anyone looking to become a software developer. Mastering HTML will give you the essential tools to build and understand webpages.
Mastery in a Day
This chapter introduces HTML basics and guides you through creating your first HTML document. By the end, you'll understand core concepts and be able to build simple webpages.
What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses elements represented by tags to structure content.
Setting Up Your Environment
- Text Editor: Download and install Visual Studio Code.
- Web Browser: Use Google Chrome or any modern browser.
- Local Server (Optional): Install the Live Server extension in Visual Studio Code for auto-reloading your changes.
Your First HTML Document
- Open Visual Studio Code.
- Create a New File: Save it as
index.html. - Type the Following Code:
<!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>Hello, World!</h1>
<p>This is my first HTML document.</p>
</body>
</html>
- Save and Open in Browser: Open the file in your browser to see the result.
Understanding the Structure
<!DOCTYPE html>: Declares the document as HTML5.<html lang="en">: Defines the HTML document with language set to English.<head>: Contains meta-information like character set and viewport settings.<meta charset="UTF-8">: Sets character encoding to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive.<title>: Sets the document's title.
<body>: Contains the visible content.<h1>: Main heading.<p>: Paragraph.
Practical Exercise
- Modify the
<h1>Tag: Change the text to your name. - Add a Second Paragraph: Write a short description of yourself.
- Add a Link: Insert a link to your favorite website.
Example
<h1>Your Name</h1>
<p>This is my first HTML document.</p>
<p>Visit my favorite website: <a href="https://www.example.com" target="_blank">Example</a></p>
Save and refresh your browser to see the changes.
Key Takeaways
- HTML is the building block of the web.
- Setting up your environment correctly is essential.
- Understanding the basic HTML structure is crucial.
- Practice by creating and modifying simple HTML documents.
Next Steps
In the next chapter, we'll explore the HTML document structure in more detail, covering additional elements and attributes to build more complex webpages. Keep practicing and experimenting to solidify your understanding.
Please Sign In to post a comment.