Welcome to Website Development
Welcome to one of the most exciting topics in AS 2: Fundamentals of Digital Technology! Every time you scroll through social media, watch a video online, or purchase something on the web, you are interacting with complex web technologies behind the scenes.
In this chapter, we will break down how the web actually works, how web pages are structured using HTML, styled with CSS, made responsive for different devices, and brought to life using Client-Side and Server-Side scripting. Don't worry if you haven't written code before—we will take this step-by-step with clear examples and memory tricks!
1. Architecture and Protocols of the Web
To understand web development, we first need to see the big picture: how does a web page travel from where it is stored to your screen?
The Client-Server Architecture
The World Wide Web operates on a Client-Server model:
• The Client: This is your web browser (like Chrome, Safari, or Edge) running on your device (laptop, phone, or tablet). The client requests web resources.
• The Server: This is a high-powered computer connected to the internet that stores web files (HTML, CSS, media) and waits for requests.
• The Process: You type an address into your browser \(\rightarrow\) your browser sends an HTTP/HTTPS request across the network \(\rightarrow\) the server receives and processes the request \(\rightarrow\) the server returns the requested HTML files, stylesheets, and images to your browser to be displayed.
Analogy: Think of a restaurant! You are the client looking at a menu. The waiter takes your order (the HTTP request) to the kitchen (the server). The kitchen prepares your meal and the waiter brings it back to your table (the response).
Web Protocols: HTTP vs HTTPS
Protocols are sets of standard rules that computers use to communicate:
• HTTP (HyperText Transfer Protocol): Operates at the application layer and transmits web traffic as plain text without encryption. It uses standard Port 80. Because it is unencrypted, data sent over HTTP could theoretically be intercepted.
• HTTPS (HyperText Transfer Protocol Secure): Uses SSL/TLS encryption to protect data during transmission. It uses Port 443. HTTPS ensures two critical things: data confidentiality (eavesdroppers cannot read your sensitive information like passwords) and data integrity (data cannot be altered in transit).
Anatomy of a URL (Uniform Resource Locator)
A URL is the complete web address used to find a specific resource on the internet. Let's look at its core components:
Example URL: https://www.example.com/pages/index.html
1. Protocol: https:// — Specifies the communication rules being used.
2. Domain / Host Name: www.example.com — Identifies the specific web server hosting the website.
3. Path / Directory: /pages/ — The folder or directory path on the server where the file is stored.
4. File Resource: index.html — The exact document being requested.
Quick Review Box:
• HTTP: Port 80, unencrypted.
• HTTPS: Port 443, encrypted with SSL/TLS.
• URL parts: Protocol \(\rightarrow\) Domain \(\rightarrow\) Path \(\rightarrow\) Resource.
2. HTML (HyperText Markup Language)
HTML is the foundational language of the web. Its standards are maintained by the W3C (World Wide Web Consortium).
Core Role: HTML defines the structure and content of a web page using markup tags. It tells the browser what elements are on the page (like headings, text, images, and tables), but not how they should look visually.
Standard Document Structure
Every standard HTML5 web page follows a strict nested skeleton:
• <!DOCTYPE html>: Declares the document type and tells the browser to render the page using the modern HTML5 standard.
• <html>: The root element that wraps all the code on the entire page.
• <head>: Contains background technical information (metadata) about the document, such as the character set, links to external stylesheets (CSS), and script definitions. Content inside the <head> is not visible on the main web page.
• <title>: Placed inside the head; defines the title shown on the browser's tab and used by search engine bookmarks.
• <body>: Contains all the visible content that users see and interact with (text, images, forms, videos).
Essential HTML Tags and Semantic Markup
CCEA examiners want you to know how to use standard semantic tags:
• Semantic Layout Tags: Help search engines and screen readers understand page layout structure: <header>, <nav> (navigation links), <main>, <section>, <article>, and <footer>.
• Headings: <h1> down to <h6>, where <h1> represents the most important top-level heading.
• Text Elements: <p> for standard text paragraphs, <strong> for strong importance (renders bold), <em> for emphasis (renders italic), <br> for a line break, and <hr> for a thematic horizontal divider rule.
• Lists:
- Ordered List: <ol> (numbered: 1, 2, 3)
- Unordered List: <ul> (bullet points)
- List Items: <li> (used inside both <ol> and <ul>)
• Hyperlinks: <a href="URL">Anchor Text</a> (the href attribute specifies the destination web address).
• Images: <img src="path/image.jpg" alt="Description of image"> (the src attribute points to the file location; the alt attribute provides alternate descriptive text for accessibility).
• Tables: Structured using <table>, with <tr> (table row), <th> (table header cell), and <td> (table standard data cell).
• Forms: Interactive user inputs using <form>, <input> (e.g., text boxes, checkboxes), and <button>.
Key Takeaway: HTML gives a website its skeleton and meaning. Never describe HTML as making a website "look pretty"—that is the job of CSS!
3. CSS (Cascading Style Sheets)
If HTML is the skeleton of a web page, CSS is the clothing, paint, and styling. CSS separates the presentation and visual layout from the structural HTML content.
Three Ways to Implement CSS
You can add CSS to a website in three different ways. Examiners frequently ask you to compare these:
1. Inline CSS:
• Written directly inside an HTML tag using the style attribute.
• Example: <p style="color: blue; font-size: 14px;">Hello</p>
• Evaluation: Useful for a quick one-off change, but terrible for maintainability because styling must be repeated manually on every single tag.
2. Internal (Embedded) CSS:
• Placed within <style> tags directly inside the <head> section of an individual HTML document.
• Evaluation: Styles all matching elements on that specific single page. However, it cannot style other pages across the wider website.
3. External CSS:
• Written in a completely separate file with a .css extension (e.g., styles.css) and linked inside the <head> of HTML documents using: <link rel="stylesheet" href="styles.css">.
• Evaluation: The industry gold standard! Allows a web developer to maintain a consistent theme across an entire multi-page website. Changing a single line in the external .css file instantly updates every linked page on the site.
Core CSS Syntax and Selectors
A CSS rule consists of a Selector and a Declaration Block:
selector { property: value; }
• Element Selector: Targets HTML tags directly (e.g., p { color: red; } styles all paragraphs).
• Class Selector: Targets elements sharing a class name, prefixed with a dot (e.g., .highlight { background-color: yellow; }). Can be reused across multiple elements.
• ID Selector: Targets a single unique element on the page, prefixed with a hash/pound sign (e.g., #header-banner { height: 100px; }).
Common CSS Properties
• Typography: font-family (font type), font-size (text scale), color (text colour).
• The Box Model: margin (space outside an element's border), padding (space inside the border around content), border (edge outline), width, and height.
• Backgrounds: background-color, background-image.
• Alignment and Layout: text-align, float, display: flex, and display: grid.
Quick Review Box:
• HTML: Structure & Content.
• CSS: Presentation & Visual Layout.
• Best Method: External CSS (best for multi-page consistency and easy maintenance).
4. Responsive Web Design and Accessibility
Responsive Web Design (RWD)
People view websites on everything from tiny smartphone screens to massive 4K desktop monitors. Responsive Web Design ensures that web pages automatically adjust, scale, and reorganize their layout to look great on any screen size or device.
Key Techniques for RWD:
1. The Viewport Meta Tag: Placed in the HTML <head>: <meta name="viewport" content="width=device-width, initial-scale=1.0">. This instructs mobile browsers to render the page at the true width of the device screen rather than zooming out.
2. CSS Media Queries: CSS rules that apply styles only when certain screen condition thresholds are met.
Example: @media only screen and (max-width: 600px) { ... } (applies mobile-specific styles when screen width is \(600\text{px}\) or less).
3. Relative Sizing Units: Using scalable relative units (such as percentages %, em, rem, vw, vh) instead of fixed, inflexible absolute units like pixels (px).
Web Accessibility Standards (W3C / WCAG)
Web accessibility ensures that websites can be used by everyone, including people with visual, auditory, motor, or cognitive disabilities. Key practices include:
• Alternative Text (alt attribute): Adding meaningful descriptions to images (e.g., alt="Company Logo") so screen readers can read them aloud to visually impaired users.
• Semantic HTML Structure: Using tags like <header>, <nav>, and <main> enables assistive devices and screen readers to logically navigate content.
• High Colour Contrast: Ensuring sufficient contrast between background and text colours so content is readable for users with visual impairments or colour blindness.
• Scalable Typography: Allowing text to resize cleanly without breaking page layouts.
5. Client-Side vs Server-Side Scripting
Static HTML and CSS create fixed pages. Scripting adds interactivity, database integration, and intelligent processing.
Comparison: Client-Side vs Server-Side
Examiners love asking students to compare these two scripting environments:
Client-Side Scripting (e.g., JavaScript):
• Where it executes: Directly inside the user's web browser on their local machine.
• Primary Tasks: Validating user input in forms before submission (e.g., checking if an email contains an '@' symbol), creating interactive UI animations, drop-down menus, and modifying page content dynamically without reloading.
• Key Advantages:
1. Fast user feedback: Responds instantly without waiting for network communication.
2. Reduces server load: Offloads processing work from the web server to the client's device.
3. Saves bandwidth: Prevents unnecessary network roundtrips for basic errors.
Server-Side Scripting (e.g., PHP, Python, ASP.NET):
• Where it executes: Remotely on the web server before the final HTML is sent to the client.
• Primary Tasks: Querying and updating backend databases, handling user authentication (logins/passwords), processing financial transactions securely, and generating dynamic customized HTML pages.
• Key Advantages:
1. Security: Protects business logic and source code because the user cannot view server-side script code.
2. Device Independence: Runs on the server regardless of what browser, hardware, or extensions the user has.
Crucial Exam Distinction: Form Validation
Why do websites use both client-side and server-side validation on forms?
• Client-Side Validation: Provides instant feedback to the user if they miss a required field, improving user experience and reducing server traffic. However, client-side validation can be bypassed or disabled in the browser!
• Server-Side Validation: Strictly essential for security and data integrity. It ensures that malicious or corrupt data cannot enter and damage the backend database, even if someone bypasses client-side checks.
6. Common Exam Pitfalls & Tips to Score High
CCEA examiner reports highlight regular mistakes you should avoid:
• Mistake 1: Confusing HTML and CSS roles. Remember: HTML = Structure & Content; CSS = Presentation & Visual Layout; JavaScript = Client-side Behaviour & Interactivity.
• Mistake 2: Using informal language. Never write "it makes it look pretty" or "it makes it fast." Instead, use technical terms: "separates presentation from content," "reduces web server processing load," or "eliminates unnecessary network roundtrips."
• Mistake 3: Thinking Client-Side Validation is secure. Always state that client-side validation improves user experience, but server-side validation is mandatory for database security.
• Mistake 4: Missing the benefits of External CSS. Remember to mention sitewide consistency and the ability to update an entire website's appearance by editing a single file.
Summary Checklist
Before sitting your AS 2 exam, make sure you can confidently:
• Explain the Client-Server model and distinguish between HTTP (port 80) and HTTPS (port 443 with SSL/TLS).
• Break down the four parts of a URL (Protocol, Domain, Path, Resource).
• Write standard HTML document structure tags (<!DOCTYPE html>, <html>, <head>, <body>) and semantic elements.
• Compare Inline, Internal, and External CSS and explain why External CSS is preferred.
• Describe how Viewport meta tags, Media queries, and relative units enable Responsive Web Design.
• List accessibility features like alt text and high colour contrast.
• Contrast Client-Side (JavaScript) and Server-Side (PHP, Python, ASP.NET) scripting in terms of execution location, typical uses, and security.