Pemoola Watch on YouTube

Belajar HTML & CSS untuk PEMULA - Full Lengkap

3 min read 9 months ago
Published on Nov 19, 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 and CSS, essential languages for creating websites. This guide is designed for beginners who want to learn how to build a website from scratch. By the end of this tutorial, you'll have a foundational understanding of web development concepts and practical skills to create your own web pages.

Step 1: Understanding HTML and CSS

  • What is HTML?

    • HTML (HyperText Markup Language) is the standard language for creating web pages. It structures the content on the page using elements and tags.

  • What is CSS?

    • CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the appearance of elements defined in HTML.

  • What can you do with HTML and CSS?

    • Create structured content (text, images, links).
    • Style your content (fonts, colors, spacing).
    • Build interactive and visually appealing websites.

Step 2: Setting Up Your Workspace

  • Required Applications
    • Text Editor: Use a simple one like Notepad (Windows) or TextEdit (Mac), or download a more advanced editor like Visual Studio Code or Sublime Text.
    • Web Browser: Ensure you have a modern browser (Chrome, Firefox, etc.) to view your web pages.

Step 3: Creating Your First HTML Document

  • Basic Structure of an HTML Document
    <!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is my first web page!</p>
</body>
</html>
  • Create a new file with a .html extension and paste the above code. Open this file in your web browser to see your first web page.

Step 4: Using Headings in HTML

  • How to Use Headings
    • Headings are defined using <h1> to <h6> tags.
    • <h1> is the largest, and <h6> is the smallest.
    <h1>This is a Heading</h1>
<h2>This is a Subheading</h2>

Step 5: Creating Links

  • Anchor Element
    • Use the <a> tag to create links.
    <a href="https://www.example.com">Visit Example</a>

Step 6: Adding Images

  • Inserting Images
    • Use the <img> tag to add images to your web page.
    <img src="image.jpg" alt="Description of image">

Step 7: Creating Tables

  • Table Structure
    • Use <table>, <tr>, <th>, and <td> tags to create tables.
    <table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
</table>

Step 8: Creating Forms

  • Form Elements
    • Use <form>, <input>, and other form-related tags to create interactive forms.
    <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

Step 9: Understanding CSS

  • Basic CSS Concepts

    • CSS uses selectors, properties, and values to style HTML elements.
    • CSS can be applied in three ways: inline, internal, and external.

  • Example of Internal CSS

    <style>
    body {
        background-color: lightblue;
    }
    h1 {
        color: navy;
        margin-left: 20px;
    }
</style>

Step 10: Applying CSS to Your HTML

  • Selectors and Styling
    • Use class and ID selectors to target specific elements.
    <div class="container">
    <h1 class="main-title">Welcome!</h1>
</div>

    .main-title {
    font-size: 24px;
    color: green;
}

Conclusion

You have now learned the fundamental concepts of HTML and CSS, enabling you to create basic web pages. Remember to practice by building small projects and gradually incorporating more complex elements as you progress. Keep exploring more about selectors, properties, and different layouts to enhance your web development skills. Happy coding!

Table of Contents

Recent