Kelas Terbuka Watch on YouTube

Belajar Web Dasar [HTML] - Episode 01 - Apa itu HTML

3 min read 1 hour ago
Published on Oct 31, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will explore the basics of HTML, the foundational language used for creating web pages. This guide is designed for beginners, helping you to understand what HTML is, how it works, and its importance in web development. By the end, you'll have a solid groundwork to build upon as you continue your journey in web development.

Step 1: Understanding HTML

HTML stands for HyperText Markup Language. It is used to structure content on the web. Here are some key points to understand about HTML:

  • Markup Language: HTML uses tags to define elements on a web page, such as headings, paragraphs, links, and images.
  • Basic Structure: Every HTML document has a basic structure that includes:
    • <!DOCTYPE html> declaration
    • <html> element
    • <head> section (includes metadata and title)
    • <body> section (contains the content of the page)

Step 2: Setting Up Your First HTML Document

To create your first HTML page, follow these steps:

  1. Open a Text Editor: Use any text editor like Notepad, VSCode, or Sublime Text.
  2. Create a New File: Save the file with a .html extension, for example, index.html.
  3. Add Basic HTML Structure: Input the following code into your file:
<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first HTML page.</p>
</body>
</html>
  1. Save the File: Ensure you save your changes.

Step 3: Viewing Your HTML Page

To see your HTML document in action:

  1. Open Your Web Browser: Use any browser like Chrome, Firefox, or Edge.
  2. Locate Your HTML File: Find the file you just created.
  3. Open the File: Double-click the HTML file, and it will open in your browser. You should see "Hello, World!" displayed as a heading and the welcome message as a paragraph.

Step 4: Experimenting with HTML Tags

Now that you've created a basic HTML page, try adding more elements:

  • Headings: Use <h1> to <h6> for different heading sizes.
  • Paragraphs: Add more paragraphs using the <p> tag.
  • Links: Create a hyperlink using the <a> tag:
<a href="https://www.example.com">Visit Example</a>
  • Images: Add images using the <img> tag:
<img src="image.jpg" alt="Description of image">

Practical Tips

  • Indentation: Keep your HTML code well-indented to improve readability.
  • Comments: Use <!-- Comment here --> to add comments in your code that won't be displayed in the browser.
  • Validation: Use online tools like the W3C HTML Validator to check your code for errors.

Conclusion

You have now learned the basics of HTML, including its structure and how to create a simple web page. Experiment with different HTML tags and elements to become more comfortable with the language. As you progress, consider exploring CSS and JavaScript to enhance your web development skills further. Happy coding!

Table of Contents

Recent