Ruangguru Engineering Academy Watch on YouTube

HTML Part 1

3 min read 8 months ago
Published on Sep 02, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial provides a structured introduction to HTML, focusing on the fundamental concepts and essential elements needed to create a simple web page. Understanding HTML is crucial for anyone looking to build websites or delve deeper into web development.

Step 1: Understanding HTML Structure

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It uses a system of tags to define the structure and content of a webpage.

  • Basic Components

    • Tags: HTML uses opening and closing tags. For example, <p> for paragraph and </p> to close it.
    • Elements: An HTML element consists of a start tag, content, and an end tag.

Practical Tip

Always ensure that every opening tag has a corresponding closing tag to maintain proper structure.

Step 2: Creating a Basic HTML Document

To create an HTML document, follow these steps:

  1. Open a Text Editor: Use any text editor like Notepad, VS Code, or Sublime Text.
  2. Start with the Document Declaration:
    <!DOCTYPE html>
  3. Add the HTML Tag:
    <html>
  4. Add the Head Section:
    <head>
    <title>Your Page Title</title>
</head>
  5. Add the Body Section:
    <body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a paragraph of text on my web page.</p>
</body>
  6. Close the HTML Tag:
    </html>

Example Code

Here’s how your complete HTML document should look:

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <h1>Welcome to My First Web Page</h1>
    <p>This is a paragraph of text on my web page.</p>
</body>
</html>

Step 3: Adding More HTML Elements

Once you have the basic structure, you can add more elements:

  • Headings: Use <h1> to <h6> tags for headings of different sizes.
  • Links: Use the <a> tag to create hyperlinks.
    <a href="https://www.example.com">Visit Example</a>
  • Images: Use the <img> tag to insert images.
    <img src="image.jpg" alt="Description of image">

Common Pitfalls

  • Ensure URLs in <a> and <img> tags are correct to avoid broken links or missing images.
  • Remember to provide alt text for images to improve accessibility.

Step 4: Saving and Viewing Your HTML Document

To view your HTML document:

  1. Save the File: Use a .html extension, for example, index.html.
  2. Open in a Browser: Double-click the file or right-click and choose “Open with” followed by your preferred web browser.

Practical Tip

Refresh the browser to see changes every time you make edits to your HTML file.

Conclusion

In this tutorial, you learned the basics of HTML, including its structure, how to create a simple web page, and add essential elements. As you progress, consider exploring CSS and JavaScript to enhance your web pages further. Start practicing by creating your own web pages and experiment with different HTML elements to solidify your understanding.

Table of Contents

Recent