Home » » Introduction to HTML and CSS for Beginners

Introduction to HTML and CSS for Beginners

No comments


Start your web development journey with this beginner-friendly guide to HTML and CSS. Learn how to create and style web pages from scratch.


HTML and CSS are the foundational technologies for building web pages. HTML (HyperText Markup Language) provides the structure of the page, while CSS (Cascading Style Sheets) controls the presentation and layout. This guide will introduce you to the basics of HTML and CSS, helping you create and style your first web page.

Step 1: Understanding HTML

  1. What is HTML?

    • HTML is the standard markup language for creating web pages.
    • It consists of a series of elements represented by tags, such as <html>, <head>, <body>, <h1>, <p>, and <a>.

  2. Basic HTML Structure

    • A basic HTML document includes a <!DOCTYPE html> declaration, and <html>, <head>, and <body> tags:

    • html

      <!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a paragraph of text.</p>
    <a href="https://www.example.com">Visit Example</a>
</body>
</html>

  3. Common HTML Elements:

    • Headings: <h1> to <h6>
    • Paragraphs: <p>
    • Links: <a href="URL">Link Text</a>
    • Images: <img src="image.jpg" alt="Description">
    • Lists: <ul>, <ol>, <li>

Step 2: Understanding CSS

  1. What is CSS?:
    • CSS is used to style and layout web pages.
    • It allows you to control the color, font, spacing, and positioning of elements.

  2. Adding CSS to Your HTML:
    • Inline CSS: Using the style attribute within HTML tags:

    • html

      <p style="color: blue;">This is a blue paragraph.</p>

    • Internal CSS: Using the <style> tag within the <head> section:

    • html

      <head>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: blue;
        }
    </style>
</head>

    • External CSS: Linking to an external CSS file using the <link> tag:

    • html

      <head>
    <link rel="stylesheet" href="styles.css">
</head>

  3. CSS Syntax:
    • CSS rules consist of selectors and declarations:

    • css

      selector {
    property: value;
}

    • Example:

    • css

      p {
    color: green;
    font-size: 16px;
}


Step 3: Creating Your First Web Page

  1. Set Up Your Workspace:

  2. Create an HTML File:
    • Create a new file named index.html and add the following code:

    • html

      <!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
    <style>
        body {
            background-color: lightyellow;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is my first web page created using HTML and CSS.</p>
    <a href="https://www.example.com">Visit Example</a>
    <img src="image.jpg" alt="Sample Image">
</body>
</html>

  3. View Your Web Page
    • Open index.html  in a web browser to see your first web page in action.

    HTML and CSS are essential for web development. By learning the basics and practicing creating and styling web pages, you can build a solid foundation for more advanced web development skills.

Share:

0 Comments:

Post a Comment

New Post

Recent Posts

    Support Me

    ~ Klik Disini