ITEC3111›Web programming languages (HTML5, CSS3, JavaScript, PHP/JSP/ASP.Net)

Web EngineeringTopic 1 of 24

Web programming languages (HTML5, CSS3, JavaScript, PHP/JSP/ASP.Net)

4 minread

688words

Beginnerlevel

🌐 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

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

Long Questions

Explain the architecture of web applications with diagram.
Compare HTML, CSS, JavaScript, and PHP.
Explain DOM in JavaScript with examples.
Discuss features of HTML5 and CSS3.
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.

Next topic 2

HTML5

Past Papers

Open this section to load past papers

Click on Show Past Papers to see past papers.

ITEC3111›Web programming languages (HTML5, CSS3, JavaScript, PHP/JSP/ASP.Net)

Web EngineeringTopic 1 of 24

Web programming languages (HTML5, CSS3, JavaScript, PHP/JSP/ASP.Net)

4 minread

688words

Beginnerlevel

🌐 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

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

Long Questions

Explain the architecture of web applications with diagram.
Compare HTML, CSS, JavaScript, and PHP.
Explain DOM in JavaScript with examples.
Discuss features of HTML5 and CSS3.
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.

Next topic 2

HTML5

Past Papers

Open this section to load past papers

Click on Show Past Papers to see past papers.