HTML and CSS Grade 9 Booklet

IEB Summary: HTML and CSS Coding and Robotics

Disclaimer

Document belongs to Curro Holdings.
It is not to be used or distributed outside Curro Holdings.

Introduction to HTML

Overview: Welcome to the adventure of HTML (HyperText Markup Language), the foundational building block of web pages.

What is HTML?

Definition: A markup language designed for creating and designing webpages, akin to the skeleton of a webpage, providing structure and meaning.
Function: HTML instructs web browsers on how to present content, ranging from simple texts to intricate images.

Why Learn HTML?

Benefits:
- Create custom web pages.
- Structure content for enhanced visibility and accessibility.
- Ensure well-organized websites.

How Does HTML Work?

Operation: When accessing a webpage, the browser retrieves HTML code, translating it into a visual format.
Example: Viewing the HTML source code via "View Page Source" in the browser shows how the browser interprets HTML for display.

Tools You’ll Use

Text Editor: While word processors like MS Word add formatting codes, text editors focus on plain text.
- Recommended Editors: Notepad++, Visual Studio Code, Atom, Sublime Text.
Fun Fact: HTML originated in 1991 and remains the backbone of the web.

Interactive Activity: Text Editors Comparison

Instructions:
1. Review descriptions of various text editors.
2. Match editors to descriptions by dragging names into boxes.
3. Check results to ensure correct matches.

Code to Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Editors Comparison</title>
    <style>
    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f0f8ff;
    }
    .container {
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin-bottom: 20px;
    }
    .box {
        width: 45%;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        min-height: 300px;
        position: relative;
    }
    .box h3 {
        margin-top: 0;
    }
    .description {
        cursor: pointer;
        padding: 10px;
        border: 1px solid #ddd;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #fafafa;
    }
    .description.dragging {
        opacity: 0.5;
    }
    .dropzone {
        border: 2px dashed #ddd;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #666;
        margin-bottom: 10px;
        border-radius: 5px;
    }
    .text-editor {
        cursor: pointer;
        padding: 10px;
        border: 1px solid #ddd;
        margin-bottom: 10px;
    }
    #check-button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        background-color: #28a745;
        color: white;
        font-size: 16px;
        cursor: pointer;
        margin-top: 20px;
    }
    #check-button:hover {
        background-color: #218838;
    }
    #result {
        margin-top: 10px;
        font-size: 16px;
    }
    </style>
</head>
<body>
    <h1>Match the Text Editors to Their Descriptions</h1>
    <div class="container">
        <div class="box" id="descriptions">
            <h3>Descriptions</h3>
            <div class="description" id="desc1">
                <p>A powerful, open-source text editor with a strong community. It supports many programming languages and has a wide range of extensions.</p>
                <div class="dropzone" id="drop1">Drop editor here</div>
            </div>
            <div class="description" id="desc2">
                <p>A lightweight and fast text editor that is part of the standard Windows installation. It lacks advanced features but is simple to use for basic HTML coding.</p>
                <div class="dropzone" id="drop2">Drop editor here</div>
            </div>
            <div class="description" id="desc3">
                <p>A versatile text editor known for its speed and ease of use. It provides a distraction-free writing experience and includes a lot of customization options.</p>
                <div class="dropzone" id="drop3">Drop editor here</div>
            </div>
            <div class="description" id="desc4">
                <p>An advanced text editor with a focus on code development. It includes features like debugging, code navigation, and Git integration.</p>
                <div class="dropzone" id="drop4">Drop editor here</div>
            </div>
        </div>
        <div class="box" id="editors">
            <h3>Text Editors</h3>
            <div class="text-editor" id="editor1" draggable="true">Notepad++</div>
            <div class="text-editor" id="editor2" draggable="true">Visual Studio Code</div>
            <div class="text-editor" id="editor3" draggable="true">Atom</div>
            <div class="text-editor" id="editor4" draggable="true">Sublime Text</div>
        </div>
    </div>
    <button id="check-button">Check Answers</button>
    <div id="result"></div>
    <script>
        const descriptions = document.querySelectorAll('#descriptions .description');
        const textEditors = document.querySelectorAll('#editors .text-editor');
        const dropzones = document.querySelectorAll('#descriptions .dropzone');
        textEditors.forEach(editor => {
            editor.addEventListener('dragstart', () => {
                editor.classList.add('dragging');
            });
            editor.addEventListener('dragend', () => {
                editor.classList.remove('dragging');
            });
        });
        dropzones.forEach(dropzone => {
            dropzone.addEventListener('dragover', (e) => {
                e.preventDefault();
            });
            dropzone.addEventListener('drop', (e) => {
                e.preventDefault();
                const draggedEditor = document.querySelector('.dragging');
                if (draggedEditor) {
                    dropzone.textContent = draggedEditor.textContent;
                    draggedEditor.remove();
                }
            });
        });
        document.getElementById('check-button').addEventListener('click', () => {
            let correct = 0;
            const correctAnswers = {
                'drop1': 'Notepad++',
                'drop2': 'Notepad',
                'drop3': 'Atom',
                'drop4': 'Sublime Text'
            };
            dropzones.forEach(dropzone => {
                if (dropzone.textContent.trim() === correctAnswers[dropzone.id]) {
                    correct++;
                }
            });
            const total = dropzones.length;
            const resultText = `You got ${correct} out of ${total} correct!`;
            document.getElementById('result').textContent = resultText;
        });
    </script>
</body>
</html>

Note

No need to study the above code for the upcoming exam.

Summary of HTML Tags

Essential HTML Tags:

<!DOCTYPE html>
- Purpose: Declares document type and HTML version; should be the first line.
<html> / </html>
- Purpose: Root element containing all other HTML elements.
<head> / </head>
- Purpose: Contains meta-information about the document.
<title> / </title>
- Purpose: Sets the web page title in the browser’s title bar.
<body> / </body>
- Purpose: Contains all visible content like text and images.
<h1> / </h1>
- Purpose: Defines the highest-level heading.
<p> / </p>
- Purpose: Defines a paragraph of text.

Example HTML Code Using These Tags

<!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 on my first web page.</p>
</body>
</html>

`<thead>` Element in HTML

Definition: The <thead> element is used to group the header content in a table.
Purpose: It is typically used in combination with the <tbody> and <tfoot> elements to provide a clear organization of the table structure, especially for complex tables.
Structure: The <thead> contains one or more <tr> elements (table rows), and each <tr> can contain <th> elements (table headers) that define the column titles.

Basic Example:

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
    </tbody>
</table>

Accessibility: Using <thead> helps improve accessibility as screen readers can better interpret table structures.

`<caption>` Element in HTML

Definition: The <caption> element is used to provide a title or summary for a table.
Purpose: It describes the contents of the table, offering context and aiding in understanding when the table is presented.
Placement: The <caption> should be placed immediately after the opening <table> tag and before any other table sections like <thead>, <tbody>, or <tfoot>.
Structure: The content within the <caption> is typically a brief string that explains what data the table includes.

Basic Example:

<table>
    <caption>Monthly Sales Data</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$5000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$6000</td>
        </tr>
    </tbody>
</table>

Accessibility: The <caption> enhances accessibility by providing users with an immediate understanding of what the table represents, which can be particularly beneficial for those using screen readers.

IEB Summary: HTML and CSS Coding and Robotics

DisclaimerDocument belongs to Curro Holdings. It is not to be used or distributed outside Curro Holdings.

Overview: This document provides a comprehensive introduction to HTML (HyperText Markup Language), detailing its role in web development as the foundational structure for web pages. It contains essential information about HTML's structure, benefits, and functionality, as well as an introduction to CSS (Cascading Style Sheets) for styling web pages, although CSS specifics are not extensively covered here.

Contents:

Introduction to HTML: Definitions, functionality, and reasons for learning HTML, including creating custom web pages and enhancing content structure for visibility and accessibility.
How HTML Works: Explanation of how browsers interpret HTML code to present visual content.
Tools You'll Use: A list of recommended text editors suitable for coding in HTML, such as Notepad++, Visual Studio Code, Atom, and Sublime Text, highlighting their features.
Interactive Activities: Engaging exercises to compare different text editors through a matching activity, promoting hands-on learning.
Summary of HTML Tags: Overview of essential HTML tags, their purposes, and examples of proper usage to lay out the structure of a web page.
Accessibility Considerations: Importance of using HTML tags effectively to enhance accessibility for users, especially those utilizing screen readers.

Purpose: The document is designed for educational purposes, aimed at students of Curro Holdings to facilitate their learning in HTML and web development, providing a solid foundational knowledge.

IEB Summary: HTML CodingDisclaimerDocument belongs to Curro Holdings. It is not to be used or distributed outside Curro Holdings.

Overview: This document is an introduction to HTML (HyperText Markup Language), outlining its role as the foundational structure for web pages.