Print this chapterPrint this chapter

Introduction to Web Development and CMS

3. The Four Core Web Technologies

The Four Core Web Technologies

•     HTML — structures web content.

•     CSS — styles and formats the content.

•     JavaScript — adds interactivity and dynamic behaviour.

•     PHP — handles server-side logic and database interaction.

1.4 HTML (HyperText Markup Language)

Definition: HTML is the standard markup language used to create and organise the content of web pages. It defines the structure of web documents using elements and tags.

•     Defines page structure using tags such as <html>, <head>, <body>, <div>, etc.

•     Supports semantic elements like <article>, <nav>, <footer>, and <section> for improved accessibility and SEO.

•     Enables embedding of multimedia content via <img>, <video>, <audio>, and others.

•     Supports forms using tags like <form>, <input>, <textarea>, and <button>.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Sample Page</title>

</head>

<body>

  <h1>Welcome to Web Development</h1>

  <p>This is a sample paragraph.</p>

  <a href="https://example.com">Visit Example</a>

</body>

</html>

 

Role: HTML is the skeleton of every web page — it provides the framework on which CSS and JavaScript operate.

1.5 CSS (Cascading Style Sheets)

Definition: CSS controls the appearance and layout of web content structured with HTML. It separates content from presentation, allowing consistent styling across multiple pages.

•     Style rules apply to elements via selectors (element, class, ID, etc.).

•     Supports colour, spacing, alignment, fonts, and animations.

•     Enables responsive design through media queries.

•     Can be applied inline, internally (<style>), or externally via .css files.

body {

  background-color: #ffffff;

  font-family: 'Arial', sans-serif;

  margin: 0;

  padding: 0;

}

 

h1 {

  color: #2c3e50;

  text-align: center;

}

 

Applying CSS: <head><link rel="stylesheet" href="style.css"></head>. Role: CSS makes a site visually appealing and consistent, and plays a critical part in user experience (UX) and interface design.

1.6 JavaScript

Definition: JavaScript is a powerful, high-level scripting language used primarily for client-side interactivity and behaviour in websites.

•     Manipulates HTML content through the DOM (Document Object Model).

•     Supports event-driven programming (e.g., click, input).

•     Performs form validation, animations, and API interactions.

•     Works with HTML/CSS to create single-page applications (SPAs).

<button onclick="showMessage()">Click Me</button>

<script>

  function showMessage() {

    alert("You clicked the button!");

  }

</script>

 

Advanced features: asynchronous programming with Promises and async/await; fetching external data via AJAX, the Fetch API, or libraries like Axios; and frameworks such as React, Angular, and Vue.js that extend JavaScript's capabilities. Role: JavaScript brings a static page to life through interaction, validation, and asynchronous data loading.

1.7 PHP (Hypertext Preprocessor)

Definition: PHP is an open-source, server-side scripting language used to build dynamic and interactive web applications.

•     Runs on the server and embeds easily within HTML.

•     Interacts with databases (commonly MySQL).

•     Manages forms, sessions, authentication, and file uploads.

•     Powers popular CMS platforms such as WordPress, Drupal, and Joomla.

<?php

$name = "John";

echo "Welcome, " . $name;

?>

 

<p><?php echo "Today's date is " . date("Y-m-d"); ?></p>

 

Role: PHP processes logic and generates HTML content dynamically — it is central to back-end, CMS-driven development.

1.8 Comparison, Interoperability and a Practical Scenario

Technology

Type

Execution

Primary Role

HTML

Markup Language

Browser (client-side)

Page structure

CSS

Styling Language

Browser (client-side)

Design and layout

JavaScript

Scripting Language

Browser (client-side)

Interactivity and logic

PHP

Server-side Script

Web Server

Backend logic and database interaction

 

Use case a blog website: HTML structures the content (posts, headings, links); CSS beautifies the site with colours, spacing and responsiveness; JavaScript validates comment forms and loads new posts without a page reload; and PHP stores and retrieves blog content from a database and manages logins/sessions. Mastering how these four technologies integrate is the foundation for everything that follows in this course, including CMS platforms.