4. Web Technology

4.1 Web Fundamentals

Welcome to the world of web technology! This module will introduce you to the fundamental concepts of how the web works and the technologies that power it.

Learning Objectives

  • Understand how the World Wide Web works
  • Learn about client-server architecture
  • Explore the core web technologies: HTML, CSS, and JavaScript

4.1.1 How the Web Works

The Web in a Nutshell

The World Wide Web is a system of interlinked hypertext documents accessed via the Internet. It was invented by Sir Tim Berners-Lee in 1989 while working at CERN.

Client-Server Model

The web operates on a client-server model:

  • Client: Your web browser (Chrome, Firefox, Safari, etc.)
  • Server: A powerful computer that hosts website files
  • HTTP/HTTPS: Protocol used for communication between client and server
  • DNS: Translates domain names (like google.com) to IP addresses

Web Page Loading Process

  1. You enter a URL in your browser
  2. Browser looks up the IP address using DNS
  3. Browser sends an HTTP request to the server
  4. Server processes the request and sends back the response
  5. Browser renders the HTML, CSS, and JavaScript

4.1.2 Core Web Technologies

HTML (HyperText Markup Language)

The standard markup language for creating web pages. It provides the structure and content of a webpage.

<h1>Hello World!</h1>

CSS (Cascading Style Sheets)

Used for styling and layout of web pages. It controls colors, fonts, spacing, and responsive design.

h1 { color: blue; font-size: 24px; }

JavaScript

A programming language that enables interactive web pages. It can update content, control multimedia, animate images, and more.

document.getElementById('demo').innerHTML = 'Hello JavaScript!';

4.1.3 Web Standards & Best Practices

Web Standards

Web standards are formal specifications that define and describe aspects of the World Wide Web. They are developed by standards organizations like W3C and WHATWG.

  • Semantic HTML: Using HTML elements according to their purpose
  • Accessibility (a11y): Making web content accessible to people with disabilities
  • Responsive Design: Creating websites that work on all device sizes
  • Performance: Optimizing website loading speed and efficiency

Real World Example

Modern websites like Wikipedia use semantic HTML for better accessibility and SEO. Their responsive design ensures the content is easily readable on any device, from smartphones to desktop computers. The site also follows web standards to ensure compatibility across different browsers.

Knowledge Check

Test your understanding of web technology with these multiple-choice questions.

Question
Score: 0 / 0
Question 1 of 10