Scribd
Upload
13 views2 pages

Ans 2

The document discusses the development of static and dynamic websites using HTML, CSS, and JavaScript. Static websites have fixed content that doesn't change dynamically, while dynamic websites have content that changes based on user interactions or data. Technologies for static websites include HTML, CSS, and JavaScript. Technologies for dynamic websites include HTML, CSS, JavaScript, and server-side scripting with a database.

Uploaded by

Aisha Saeed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views2 pages

Ans 2

The document discusses the development of static and dynamic websites using HTML, CSS, and JavaScript. Static websites have fixed content that doesn't change dynamically, while dynamic websites have content that changes based on user interactions or data. Technologies for static websites include HTML, CSS, and JavaScript. Technologies for dynamic websites include HTML, CSS, JavaScript, and server-side scripting with a database.

Uploaded by

Aisha Saeed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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