🌐 Web Programming Languages

(HTML5, CSS3, JavaScript, PHP / JSP / ASP.NET)

---

📌 1. Definition

Web programming languages are languages used to create and manage websites and web applications. They are broadly divided into:

• Client-side languages → run in the browser
• Server-side languages → run on the web server

---

📊 2. Basic Architecture (Diagram Description)

👉 Diagram idea for exam: Draw a flow like this:

User (Browser)
     ↓ Request (HTTP)
Web Server (PHP/JSP/ASP.NET)
     ↓ Response (HTML, CSS, JS)
Browser displays webpage

✔ Shows interaction between client and server

---

🧱 3. HTML5 (HyperText Markup Language)

📌 Definition

HTML5 is the standard markup language used to structure web pages.

⭐ Key Concepts

1. Basic Structure

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

2. Important Tags

• <h1> to <h6> → headings
• <p> → paragraph
• <a> → hyperlink
• <img> → image
• <form> → user input

3. New Features in HTML5

• Semantic tags: <header>, <footer>, <article>
• Multimedia: <audio>, <video>
• Canvas: graphics drawing
• Local storage

✅ Example

<video controls>
  <source src="movie.mp4">
</video>

---

🎨 4. CSS3 (Cascading Style Sheets)

📌 Definition

CSS3 is used to style and design web pages.

⭐ Key Concepts

1. Syntax

selector {
  property: value;
}

2. Types of CSS

• Inline
• Internal
• External

3. Important Properties

• color, background
• margin, padding
• border
• display

4. New Features in CSS3

• Flexbox
• Grid layout
• Animations
• Media queries (Responsive design)

✅ Example

body {
  background-color: lightblue;
}

📱 Media Query Example

@media (max-width: 600px) {
  body {
    background-color: yellow;
  }
}

---

⚙️ 5. JavaScript

📌 Definition

JavaScript is a client-side scripting language used to make web pages interactive.

⭐ Key Concepts

1. Variables

let x = 10;

2. Functions

function greet() {
  alert("Hello!");
}

3. Events

• onclick
• onload
• onchange

4. DOM (Document Object Model)

Used to manipulate HTML elements.

document.getElementById("demo").innerHTML = "Hi";

5. Features

• Dynamic content
• Form validation
• Animation

✅ Example

if (x > 5) {
  console.log("Greater");
}

---

🖥️ 6. Server-Side Languages

---

🐘 6.1 PHP (Hypertext Preprocessor)

📌 Definition

PHP is a server-side scripting language used to create dynamic web pages.

⭐ Features

• Embedded in HTML
• Works with databases (MySQL)
• Open-source

✅ Example

<?php
echo "Hello World";
?>

---

☕ 6.2 JSP (Java Server Pages)

📌 Definition

JSP is used to create dynamic content using Java.

⭐ Features

• Platform-independent
• Uses Java libraries

✅ Example

<%
out.println("Hello World");
%>

---

🧩 6.3 ASP.NET

📌 Definition

ASP.NET is a framework by Microsoft for building web applications.

⭐ Features

• Uses C# / VB.NET
• High performance
• Secure

✅ Example

Response.Write("Hello World");

---

🔄 7. Comparison (Important for Exams)

Feature	HTML5	CSS3	JavaScript	PHP	JSP	ASP.NET
Type	Markup	Style	Script	Server	Server	Server
Runs on	Browser	Browser	Browser	Server	Server	Server
Purpose	Structure	Design	Interactivity	Backend	Backend	Backend

---

⚠️ 8. Important Rules / Points

✔ HTML defines structure ✔ CSS defines presentation ✔ JavaScript defines behavior ✔ Server-side languages handle logic + database

---

🧠 9. Quick Revision Flow

HTML → Structure
CSS → Style
JavaScript → Interaction
PHP/JSP/ASP.NET → Server Processing

---

❓ 10. Likely Exam Questions

Short Questions

1. Define HTML5 and list its new features.
2. What is CSS3? Explain types of CSS.
3. What is JavaScript? Give examples of events.
4. Differentiate between client-side and server-side languages.
5. What is PHP? Write a simple PHP script.

Long Questions

6. Explain the architecture of web applications with diagram.
7. Compare HTML, CSS, JavaScript, and PHP.
8. Explain DOM in JavaScript with examples.
9. Discuss features of HTML5 and CSS3.
10. Compare PHP, JSP, and ASP.NET.

---

📝 11. Summary / Conclusion

Web programming involves multiple languages working together:

• HTML5 → builds the structure
• CSS3 → enhances appearance
• JavaScript → adds interactivity
• PHP/JSP/ASP.NET → handle backend processing

👉 Together, they form a complete web development system, enabling creation of modern, dynamic, and responsive websites.

---