Scribd Logo
Upload

Welcome to Scribd!

  • Ans 2

    Uploaded by

    Aisha Saeed
    4 views2 pages

    Original Title

    ans 2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    4 views2 pages

    Ans 2

    Uploaded by

    Aisha Saeed

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 2

    Powered by AI

    Copilot

    Certainly! Let’s dive into the development of static and dynamic websites using HTML and JavaScript, with
    practical examples:

    Static Website Development (Using HTML, CSS, and JavaScript)


    1. What is a Static Website?

    A static website has fixed content that doesn’t change dynamically.


    It’s suitable for simple sites like portfolios, blogs, or informational pages.

    2. Technologies Involved:

    HTML (Hypertext Markup Language):


    Defines the structure of your web page.
    Example:
    <!DOCTYPE html>
    <html>
    <head>
    <title>My Static Website</title>
    </head>
    <body>
    <h1>Welcome to My Website</h1>
    <p>This is a static page.</p>
    </body>
    </html>

    CSS (Cascading Style Sheets):


    Adds styling (colors, fonts, layout).
    Example (inline style):
    <p style="color: blue;">This text is blue.</p>

    JavaScript:
    Enhances interactivity (e.g., image sliders, form validation).
    Example (showing an alert):
    <script>
    alert("Welcome to my website!");
    </script>

    3. Hosting:

    Host your static files on a web server or platforms like GitHub Pages.
    Example: Upload your HTML, CSS, and JS files to GitHub and enable GitHub Pages.

    Dynamic Website Development (Using JavaScript)


    1. What is a Dynamic Website?

    A dynamic website’s content changes based on user interactions or data.


    It requires server-side scripting (e.g., PHP, Python, Node.js) and a database.

    2. Technologies Involved:

    HTML/CSS (Similar to Static Websites):


    Still used for structure and styling.
    JavaScript:
    Key for dynamic behavior.
    Server-Side Scripting:
    Handles data processing and communication with databases.

    3. Example: Creating a Dynamic To-Do List

    Front-End (Client-Side):
    HTML/CSS for layout.
    JavaScript for interactivity.
    Example (HTML):
    <ul id="todo-list"></ul>
    <input type="text" id="task-input" placeholder="Add a task">
    <button onclick="addTask()">Add Task</button>

    Example (JavaScript):
    function addTask() {
    const taskInput = document.getElementById("task-input");
    const taskList = document.getElementById("todo-list");
    const newTask = document.createElement("li");
    newTask.innerText = taskInput.value;
    taskList.appendChild(newTask);
    taskInput.value = "";
    }

    Back-End (Server-Side):
    Set up a server (e.g., Node.js with Express).
    Connect to a database (e.g., MongoDB).
    Example (Node.js):
    const express = require("express");
    const app = express();

    app.get("/tasks", (req, res) => {


    // Fetch tasks from the database
    const tasks = ["Task 1", "Task 2", "Task 3"];
    res.json(tasks);
    });

    app.listen(3000, () => {
    console.log("Server running on port 3000");
    });

    Remember, these examples provide a glimpse into the world of web development. Keep practicing and
    exploring to build more complex and exciting websites! 🚀

    You might also like