Introduction to HTML Basics

Learn the fundamentals of HTML, the building block of all websites. This course covers essential HTML tags, page structure, links, images, lists, forms, and more. Perfect for beginners who want to start creating their own web pages from scratch.

Level: Beginner

Price: Free

Includes: Exercises & Quiz

Certificate: Yes (on completion)

Module 1: HTML Basics

Learn the full HTML structure, essential tags, and how to build your first web page.

HTML Page Structure

<!DOCTYPE html> — Declares HTML5 document type.
<html> — Root element of the page.
<head> — Contains meta-info, title, CSS/JS links.
<body> — Visible content of the page.

Essential HTML Tags

Headings: <h1> to <h6>
Paragraphs: <p>
Links: <a href="#">Link</a>
Images: <img src="..." alt="...">
Lists: <ul>, <ol>, <li>
Tables: <table>, <tr>, <td>, <th>
Forms: <form>, <input>, <textarea>, <button>
Semantic tags: <header>, <footer>, <section>, <article>
Multimedia: <video>, <audio>
Others: <br>, <hr>, <div>, <span>, <strong>, <em>

Exercise: Create Your First HTML Page

Module 2: CSS Basics

Learn how to style your HTML page using CSS: colors, fonts, layout, and basic effects.

CSS Syntax

CSS uses selectors and properties to style HTML elements:

selector {
    property: value;
}

Selector: The HTML element you want to style, e.g., body, h1, p.
Property: The attribute you want to change, e.g., color, background-color.
Value: The new value for the property, e.g., #0ea5e9, 16px.

Common CSS Properties

Text: color, font-family, font-size, font-weight, text-align
Box Model: width, height, margin, padding, border
Backgrounds: background-color, background-image
Layout: display, flex, grid, position
Effects: border-radius, box-shadow, opacity

CSS Selectors

Element selector: p { color: red; }
Class selector: .box { background: yellow; }
ID selector: #header { font-size: 24px; }
Universal selector: * { margin:0; padding:0; }
Grouping selector: h1, h2, h3 { color: blue; }

Exercise: Style Your First HTML Page

Module 3: Mini Project – HTML & CSS

Combine everything you learned in HTML and CSS to create a small interactive and styled webpage.

Project Requirements:

Use headings, paragraphs, and lists from HTML.
Add links and at least one image.
Style the page with colors, fonts, borders, and spacing using CSS.
Include a footer with copyright info.

Exercise: Build Your Mini Project Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mini Project Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
            text-align: center;
            margin: 20px;
        }
        h1 { color: #0ea5e9; }
        h2 { color: #0284c7; }
        p { color: #555; font-size: 16px; }
        ul { list-style-type: square; }
        a { color: #0ea5e9; text-decoration: none; }
        a:hover { text-decoration: underline; }
        img { border: 2px solid #0ea5e9; border-radius: 8px; margin-top:10px; }
        button {
            padding: 10px 20px;
            margin-top: 15px;
            cursor: pointer;
            background-color: #0ea5e9;
            color: white;
            border: none;
            border-radius: 5px;
        }
        footer { margin-top: 30px; font-size: 14px; color: #555; }
    </style>
</head>
<body>
    <h1>Welcome to My Mini Project</h1>
    <p>This is a webpage combining HTML structure and CSS styling.</p>

<h2>My Favorite Websites</h2>
    <ul>
    <li><a href="https://cresenton.netlify.app" target="_blank">CRESCENTON</a></li>
    <li><a href="https://crescademy.netlify.app" target="_blank">CrescaDemy</a></li>
    <li><a href="https://youtube.com/@crescenton?si=TgaAN_JVdLsVIH8m" target="_blank">YouTube Channel</a></li>
    <li><a href="https://www.linkedin.com/company/crescenton/" target="_blank">LinkedIn</a></li>
    <li><a href="https://instagram.com/crescenton.web" target="_blank">Instagram</a></li>
</ul>

<h2>Image Example</h2>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRJ2qnBzTFRD8GHP067LirTYdZmvD1MdVm1CtwwGJ9Wwg&s" alt="Placeholder Image">

<h2>Interactive Button</h2>
    <button onclick="showAlert()">Click Me!</button>

Introduction to HTML Basics

Module 1: HTML Basics

HTML Page Structure

Essential HTML Tags

Exercise: Create Your First HTML Page

Module 2: CSS Basics

CSS Syntax

Common CSS Properties

CSS Selectors

Exercise: Style Your First HTML Page

Module 3: Mini Project – HTML & CSS

Project Requirements:

Exercise: Build Your Mini Project Page

7. Quick Quiz: Test Your HTML Knowledge

Enter Your Name

1. What does HTML stand for?

2. Which tag is used for headings?

3. Which attribute is used to add a link?

4. How do you insert an image in HTML?

5. Which HTML tag is used to create a paragraph?

6. Which of these is a semantic HTML tag?

7. What does <a> tag do?

8. Which tag is used for an unordered list?

9. Which tag is used to create a table row?

10. Which attribute provides alternative text for images?

11. What is the root element of an HTML page?

12. How do you add a line break in HTML?