🌐 M2-R5: Web Design and Publishing – Practical Notes

🌐 M2-R5: Web Design and Publishing – Practical Notes

This module focuses on designing and publishing interactive web pages using HTML, CSS, and JavaScript. Below are practical tasks with example descriptions and links to sample code (to be added).

📖 Module Overview

Topic Skills Covered
HTML Basics Page layout, lists, tables, forms
CSS Styling Color, layout, fonts, responsiveness
JavaScript Essentials DOM, events, validation, interactivity
Web Publishing Hosting, navigation, linking

🧪 Practical Questions

Create a simple webpage with heading and paragraph.

<!DOCTYPE html>
<html>
<head>
    <title>Simple Webpage</title>
</head>
<body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a simple webpage created using HTML.</p>
</body>
</html>

Create a Ordered List and Unordered List.

<!DOCTYPE html>
<html>
<head>
    <title>Lists Example</title>
</head>
<body>
    <h1>My Favorite Fruits</h1>
    <h2>Unordered List</h2>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>
    <h2>Ordered List</h2>
    <ol>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>
</body>
</html>

Create a form with name, email, and submit button.

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>
<body>
    <h1>Contact Us</h1>
    <form action="#" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Create a table with 3 rows and 3 columns.

<!DOCTYPE html>
<html>
<head>
    <title>Table Example</title>
</head>
<body>
    <h1>Sample Table</h1>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
        <tr>
            <td>Row 3, Cell 1</td>
            <td>Row 3, Cell 2</td>
            <td>Row 3, Cell 3</td>
        </tr>
    </table>
</body>
</html>

Add image in webpage.

<!DOCTYPE html>
<html>
<head>
    <title>Image Example</title>
</head>
<body>
    <h1>My Favorite Image</h1>
    <img src="image.jpg" alt="Placeholder Image" width="300" height="300">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Link Example</title>
</head>
<body>
    <h1>Link Same Page Example</h1>
    <a href="https://google.com">Click Here</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Link Example</title>
</head>
<body>
    <h1>Link Same Page Example</h1>
    <a href="https://google.com" target="_blank">Click Here</a>
</body>
</html>

Create a webpage with color text.

<!DOCTYPE html>
<html>
<head>
    <title>Color Text Example</title>
</head>
<body>
    <h1 style="color: blue;">Welcome to My Colorful Webpage</h1>
    <p style="color: green;">This paragraph has green text.</p>
</body>
</html>

Create a webpage with background color.

<!DOCTYPE html>
<html>
<head>
    <title>Background Color Example</title>
</head>
<body style="background-color: lightblue; color: black;">
    <h1>Welcome to My Colorful Webpage</h1>
    <p>This paragraph has a light blue background.</p>
</body>
</html>

Create a webpage with font style.

<!DOCTYPE html>
<html>
<head>
    <title>Font Style Example</title>
</head>
<body>
    <h1 style="font-family: Arial, sans-serif;">Welcome to My Stylish Webpage</h1>
    <p style="font-style: italic;">This paragraph has italic text.</p>
</body>
</html>

Show result of addition of two numbers.

<!DOCTYPE html>
<html>
<head>
    <title>Addition Example</title>
</head>
<body>
    <h1>Addition of Two Numbers</h1>
    <input type="number" id="num1" placeholder="Enter first number">
    <input type="number" id="num2" placeholder="Enter second number">
    <button onclick="addNumbers()">Add</button>
    <p id="result"></p>

    <script>
        function addNumbers() {
            var num1 = parseFloat(document.getElementById('num1').value);
            var num2 = parseFloat(document.getElementById('num2').value);
            var sum = num1 + num2;
            document.getElementById('result').innerText = "Sum: " + sum;
        }
    </script>
</body>
</html>

Square a number using JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>Square a Number Example</title>
</head>
<body>
    <h1>Square a Number</h1>
    <input type="number" id="number" placeholder="Enter a number">
    <button onclick="squareNumber()">Square</button>
    <p id="result"></p>

    <script>
        function squareNumber() {
            var number = parseFloat(document.getElementById('number').value);
            var square = number * number;
            document.getElementById('result').innerText = "Square: " + square;
        }
    </script>
</body>
</html>

Show number from 1 to 10 using loop.

<!DOCTYPE html>
<html>
<head>
    <title>Show Numbers Example</title>
</head>
<body>
    <h1>Show Numbers from 1 to 10</h1>
    <ul id="numberList"></ul>

    <script>
        var output = "";
        for (var i = 1; i <= 10; i++) {
            output += i + " ";
        }
        document.getElementById("numberList").innerText = output;
    </script>
</body>
</html>

Show a alert message on page load.

<!DOCTYPE html>
<html>
<head>
    <title>Alert on Page Load Example</title>
</head>
<body onload="showAlert()">
    <h1>Alert on Page Load</h1>
    <script>
        function showAlert() {
            alert("Welcome to the webpage!");
        }
    </script>
</body>
</html>

Show current date and time.

<!DOCTYPE html>
<html>
<head>
    <title>Current Date and Time Example</title>
</head>
<body>
    <h1>Current Date and Time</h1>
    <p id="dateTime"></p>
    <script>
        var currentDateTime = new Date();
        document.getElementById("dateTime").innerText = "Current Date and Time: " + currentDateTime;
    </script>
</body>
</html>

Check voter eligibility using JavaScript.

<!DOCTYPE html>
<html>
<head>
    <title>Voter Eligibility Example</title>
</head>
<body>
    <h1>Check Voter Eligibility</h1>
    <input type="number" id="age" placeholder="Enter your age">
    <button onclick="checkEligibility()">Check Eligibility</button>
    <p id="result"></p>
    <script>
        function checkEligibility() {
            var age = parseInt(document.getElementById('age').value);
            if (age >= 18) {
                document.getElementById('result').innerText = "You are eligible to vote.";
            } else {
                document.getElementById('result').innerText = "You are not eligible to vote.";
            }
        }
    </script>
</body>
</html>

⏭ Next: M3-R5 – Programming with Python

Return to Home Page