Metana | Tech Bootcamps Watch on YouTube

Module 02 Lecture: Intro to HTML and CSS

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

Table of Contents

Introduction

This tutorial provides a step-by-step guide to understanding the basics of HTML and CSS as introduced in the Module 02 lecture. Whether you're a beginner looking to create your first webpage or someone wanting to brush up on your coding skills, this guide will help you grasp essential concepts and practical applications of HTML and CSS.

Step 1: Understanding HTML Structure

HTML (HyperText Markup Language) is the backbone of web development. It defines the structure of web pages using elements and tags.

  • Basic Elements: Learn the following fundamental HTML elements:

    • <html>: The root element of an HTML page.
    • <head>: Contains meta-information about the document.
    • <title>: Sets the title of the webpage, shown in the browser tab.
    • <body>: Contains the content of the webpage, including text, images, and links.

  • Creating a Simple HTML Document:

    1. Open a text editor (e.g., Notepad, VS Code).
    2. Start with the basic structure:
    <!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is my first webpage using HTML.</p>
</body>
</html>

Step 2: Introducing CSS

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

  • Basic CSS Syntax:

    • Selectors: Identify which HTML element to style (e.g., h1, p).
    • Properties: Define what aspect to style (e.g., color, font-size).
    • Values: Set the specific style (e.g., red, 16px).

  • Adding CSS to HTML:

    • Inline CSS: Add styles directly within HTML tags.
    <h1 style="color: blue;">This is a Blue Heading</h1>
    • Internal CSS: Use a <style> tag within the <head>.
    <style>
    body { background-color: lightgray; }
    h1 { color: green; }
</style>
    • External CSS: Link a separate CSS file.
    <link rel="stylesheet" type="text/css" href="styles.css">

Step 3: Common HTML Elements and Their Uses

Familiarize yourself with various HTML elements that are essential for building web pages.

  • Text Elements:

    • <h1> to <h6>: Headings with decreasing importance.
    • <p>: Paragraph text.
    • <a href="URL">: Hyperlinks.

  • Image and Media:

    • <img src="image.jpg" alt="Description">: Embeds images.
    • <video src="video.mp4" controls>: Embeds videos.

  • Lists:

    • <ul>: Unordered list (bullets).
    • <ol>: Ordered list (numbers).
    • <li>: List items.

Step 4: Common CSS Properties

Learn key CSS properties for styling elements effectively.

  • Text Styling:

    • color: Changes text color.
    • font-size: Adjusts text size.
    • font-family: Sets the font type.

  • Box Model:

    • margin: Space outside an element.
    • padding: Space inside an element.
    • border: Outline around an element.

  • Layout:

    • display: Defines how elements are displayed (block, inline).
    • position: Controls the positioning of elements (static, relative, absolute).

Conclusion

In this tutorial, you learned the foundational concepts of HTML and CSS, including how to structure an HTML document, style it with CSS, and utilize various HTML elements effectively. As you progress, consider experimenting with more complex layouts and styles. Next steps could include exploring interactive elements with JavaScript or diving deeper into responsive design techniques. Happy coding!

Table of Contents

Recent