Welcome to Website Development (AS 2: Fundamentals of Digital Technology)
Welcome to one of the most practical and exciting areas of Digital Technology! Every time you check social media, stream a video, or shop online, you are interacting with web technologies. In this chapter, we will open the bonnet of the World Wide Web to explore how websites are structured, styled, delivered, and secured.
Don't worry if you haven't written lines of code before. We will break everything down step-by-step using clear explanations, relatable real-world analogies, and memory tips to help you ace your CCEA AS examinations!
What you will learn in this chapter:
• The core building blocks: HTML and CSS
• How websites process data: Client-Side vs. Server-Side Scripting
• Core web protocols and the role of W3C
• Design principles, user interfaces, and web accessibility
• Search Engine Optimisation (SEO) techniques
• Vital web security threats and countermeasures
1. The Core Building Blocks: HTML & CSS
Every website you visit relies on a fundamental partnership between two languages: HTML and CSS.
HyperText Markup Language (HTML)
HTML is the standard markup language used to create the structure and content of a web page. It uses tags (such as headings, paragraphs, links, and images) to tell the browser what elements exist on the page.
The Analogy: Think of HTML as the unpainted brickwork and timber frame of a house. It gives the building its rooms, doors, and foundations, but it doesn't look pretty yet!
Cascading Style Sheets (CSS)
CSS is a style sheet language used to describe the presentation and visual layout of a document written in HTML. CSS controls colours, fonts, spacing, margins, layouts, and responsive adjustments for different screen sizes.
The Analogy: If HTML is the bare house frame, CSS is the interior design and paint. It decides the wallpaper colour, carpet texture, and where the decorative lights hang.
Why Separate Content (HTML) from Presentation (CSS)?
In modern web development, keeping HTML and CSS separate is an industry golden rule. Here is why:
• Site-wide consistency: Changing one CSS file automatically updates the design of hundreds of linked HTML pages.
• Faster loading times: Browsers cache the external CSS file after downloading it once, reducing bandwidth usage.
• Easier maintenance: Developers can update the look and feel of a site without risking broken HTML content.
• Different styles for different devices: You can apply different CSS sheets for mobile phones, desktop screens, or printed documents without changing the underlying HTML.
Methods of Applying CSS
1. External CSS: Stored in a separate file (e.g., styles.css) and linked within the HTML head. This is the best practice method.
2. Internal / Embedded CSS: Placed inside style tags directly in the HTML document's head section. Useful for single-page unique designs.
3. Inline CSS: Placed directly inside an individual HTML tag using the style attribute. Avoid this where possible, as it clutters the code and defeats the purpose of separation.
Quick Review: HTML vs CSS
HTML: Defines the meaning and structure (Text, Images, Buttons).
CSS: Defines the appearance and layout (Colours, Fonts, Positioning).
Key Takeaway: Always aim for External CSS to maximise maintainability and speed.
2. Client-Side vs. Server-Side Scripting
Static websites only show fixed content. Dynamic websites, however, react to user actions, fetch live data, and customise experiences. This interactivity is powered by scripts.
A script is a set of programming instructions. In web development, scripts run in two distinct locations: on the client (the user's device) or on the web server.
The Restaurant Analogy:
• Client-Side: The customer at the table reading the menu, ticking boxes on an order sheet, or folding their napkin. It happens immediately right in front of them.
• Server-Side: The kitchen staff receiving the ticket, checking the pantry database, cooking the meal, and sending back the finished dish.
Client-Side Scripting
How it works: The web server sends the raw code (HTML, CSS, and script files like JavaScript) directly to the user's browser. The user's device does the processing work locally.
Typical Uses:
• Validating user input in forms (e.g., checking if an email contains an '@' symbol before submitting)
• Interactive elements (e.g., image sliders, pop-up modal dialogs, drop-down menus)
• Instant visual feedback (e.g., interactive calculators, games, countdown timers)
Advantages:
• Fast response: Code executes instantly without waiting for network communication with the server.
• Reduces server workload: Offloads processing tasks to thousands of individual user devices.
Disadvantages:
• Security risks: The user can view, edit, or disable client-side scripts in their browser.
• Browser dependency: Different browsers or older hardware may interpret or execute code inconsistently.
Server-Side Scripting
How it works: Code is executed entirely on the web server (using languages like PHP, Python, or Node.js). The server processes the request, interacts with databases, creates an HTML page dynamically, and sends only the finished HTML output back to the client.
Typical Uses:
• User authentication and login systems
• Database transactions (e.g., querying stock levels or processing an e-commerce payment)
• Rendering personalised profile pages (e.g., fetching a user's purchase history)
Advantages:
• High security: The source code and database credentials remain hidden on the server.
• Platform independent: The client only receives standard HTML, so browser compatibility issues are minimised.
• Access to resources: Can directly interact with server-based databases and internal storage.
Disadvantages:
• Server overhead: Heavy traffic can overwhelm server processors and memory.
• Latency: Every request requires a round-trip network transmission across the internet.
Common Mistake to Avoid in Exams
Never rely purely on client-side validation for security! A malicious user can bypass browser validation and send harmful data straight to your server. Always validate data on both the client side (for user convenience) and the server side (for security).
Key Takeaway: Use Client-Side for speed, interactivity, and preliminary form checking; use Server-Side for security, database management, and private business logic.
---3. Web Standards, Protocols, and Domain Resolution
For the internet to work globally, every computer, browser, and server must follow agreed-upon rules known as protocols and standards.
The World Wide Web Consortium (W3C)
The W3C is the main international standards organisation for the World Wide Web. Founded by Tim Berners-Lee, the W3C develops open specifications (like HTML5 and CSS3) so that web pages render consistently across all web browsers and platforms.
Key Web Protocols
• HTTP (HyperText Transfer Protocol): The foundation protocol used by web browsers to request and receive web pages from a server. Data is transmitted in plain text.
• HTTPS (HTTP Secure): An encrypted version of HTTP using SSL/TLS (Secure Sockets Layer / Transport Layer Security). It protects sensitive information, such as passwords and credit card numbers, from interception.
• FTP (File Transfer Protocol): A protocol specifically used for transferring files between a client and a remote server (e.g., uploading your website files to a hosting server).
• TCP/IP (Transmission Control Protocol / Internet Protocol): The fundamental communication suite that governs how data is split into packets, addressed, routed across networks, and reassembled accurately.
How a Domain Name is Resolved (DNS Process)
Humans prefer memorable domain names like www.ccea.org.uk, but computers communicate using numerical IP addresses like \(192.0.2.1\). The Domain Name System (DNS) functions as the internet's phonebook.
Step-by-step DNS Lookup:
Step 1: The user types a URL (e.g., www.example.com) into their web browser.
Step 2: The browser asks a DNS Resolver (usually provided by your Internet Service Provider) for the matching IP address.
Step 3: If not already stored in local cache, the resolver queries a sequence of DNS servers (Root, Top-Level Domain like .com, and Authoritative Name Server).
Step 4: The authoritative DNS server returns the numerical IP address to the resolver.
Step 5: The browser uses that IP address to connect directly to the web hosting server via HTTP/HTTPS to download the webpage.
Key Takeaway: W3C sets the coding standards; HTTPS ensures encryption; DNS translates human-friendly domain names into computer-friendly IP addresses.
---4. Website Design Principles: UI, UX, and Accessibility
A great website is not just technically functional—it must be intuitive, easy to navigate, and usable by everyone, regardless of ability or device.
UI (User Interface) vs. UX (User Experience)
• UI (User Interface): The visual and interactive elements a person touches, clicks, or views. This includes buttons, typography, colour schemes, layout grids, and animations.
• UX (User Experience): The overall feeling and ease of use a user encounters while navigating the site. A good UX ensures tasks (like buying a product) are quick, logical, and frustration-free.
Design & Planning Tools
• Wireframes: Simple, black-and-white structural diagrams that show the arrangement of page elements before visual styling begins.
• Storyboards / Site Maps: Visual representations of page hierarchies and user journeys showing how pages link together.
Responsive Web Design (RWD)
Websites are viewed on diverse screen sizes, from smartwatches and smartphones to massive 4K desktop monitors. Responsive Web Design ensures that page layouts automatically resize, hide, shrink, or expand to suit any screen size. This is achieved using fluid grid layouts, flexible images, and CSS Media Queries.
Web Accessibility (WCAG Guidelines)
Web accessibility means making websites usable for people with disabilities (visual, auditory, motor, or cognitive impairments). The W3C publishes the Web Content Accessibility Guidelines (WCAG).
Key Accessibility Features:
• Alternative Text (Alt Tags): Adding descriptive text to images so screen readers can read the description aloud to visually impaired users.
• High Colour Contrast: Ensuring strong contrast between text and background colours for users with colour blindness or low vision.
• Keyboard Navigability: Allowing full navigation of links, menus, and forms using only the 'Tab' and 'Enter' keys for users who cannot use a mouse.
• Clear Typography & Structure: Using clear headings (H1, H2, H3) and resizable fonts without breaking page layout.
• Subtitles and Transcripts: Providing text captions for audio and video media to support hearing-impaired users.
Memory Trick (POUR): The 4 foundational principles of WCAG are:
• Perceivable (Users can see or hear the content)
• Operable (Users can navigate and use controls)
• Understandable (Information and interface are clear)
• Robust (Works reliably across different devices and assistive tools)
Key Takeaway: Good design balances attractive UI, effortless UX, responsive layouts, and strict adherence to accessibility standards.
---5. Search Engine Optimisation (SEO)
There are billions of web pages online. Search Engine Optimisation (SEO) is the process of improving a website to increase its visibility and ranking on organic (non-paid) search engine results pages (e.g., Google or Bing).
How Search Engines Work
1. Crawling: Search engine automated bots (spiders) discover and scan web pages by following hyperlinks.
2. Indexing: The search engine analyses the content, images, and keywords, storing the organised data in a giant database (the index).
3. Ranking: When a user types a query, an algorithm evaluates hundreds of factors to return the most relevant and authoritative results.
Key SEO Strategies
1. On-Page SEO:
• Relevant Keywords: Placing search terms naturally in titles, body text, and headings.
• Meta Tags: Writing accurate meta title and meta description tags that appear directly in search engine results.
• Descriptive URLs: Using clean web addresses (e.g., site.com/digital-technology-revision instead of site.com/?p=9823).
• Heading Tags: Organising content using structured heading tags (\(H1 \rightarrow H2 \rightarrow H3\)).
• Image Alt Text: Helping search engine bots understand the content of images.
2. Off-Page SEO:
• Backlinks: Links pointing to your website from external, reputable websites. Search engines treat high-quality backlinks as votes of confidence and authority.
3. Technical SEO:
• Page Load Speed: Fast-loading sites are ranked higher and reduce user bounce rates.
• Mobile Friendliness: Search engines prioritise sites designed responsively for mobile devices.
• XML Sitemap: Providing a roadmap file of all pages to help search bots crawl efficiently.
• HTTPS Security: Search engines reward websites that have secure SSL/TLS certificates installed.
Key Takeaway: Effective SEO combines rich content, strong technical performance, mobile readiness, and reputable backlinks to drive organic traffic.
---6. Web Security Essentials
Because web applications are globally accessible, they are frequent targets for cyberattacks. Web developers must build security into their code from day one.
1. SQL Injection (SQLi)
What it is: An attack where a hacker enters malicious database commands into an input field (such as a login box or search bar). If the server does not validate the input, the database may execute the malicious code, revealing confidential data or deleting records.
Example Vulnerability: Entering ' OR '1'='1 into a password box to trick the database into granting access without a valid password.
Prevention: Use parameterised queries (prepared statements) and strict input validation to ensure user input is treated strictly as literal data, never executable code.
2. Cross-Site Scripting (XSS)
What it is: An attack where malicious client-side scripts (usually JavaScript) are injected into trusted web pages viewed by other users. When other users load the page, the rogue script runs in their browsers, potentially stealing session cookies, login tokens, or sensitive personal data.
Prevention: Sanitise and encode all user-submitted output before displaying it back on the page, preventing browsers from interpreting plain text as executable scripts.
Core Defensive Measures for Web Developers
• Input Validation & Whitelisting: Checking that input matches expected formats, lengths, and character sets (e.g., verifying a telephone number contains only digits) before processing.
• SSL/TLS Encryption (HTTPS): Encrypts data in transit between the client and the web server, preventing eavesdropping and man-in-the-middle attacks.
• Strong Password Hashing: Storing passwords using secure cryptographic hashing algorithms with salts (never store passwords in plain text!).
• Authentication and Access Control: Implementing Multi-Factor Authentication (MFA) and restricting administrative privileges to authorised personnel only.
Quick Review: Web Threats & Fixes
• SQL Injection: Attacking the back-end database \(\rightarrow\) Fix: Prepared Statements / Parameterisation
• Cross-Site Scripting (XSS): Attacking other users via front-end scripts \(\rightarrow\) Fix: Output Encoding / Input Sanitisation
• Packet Sniffing / Data Interception: Eavesdropping on communications \(\rightarrow\) Fix: HTTPS (SSL/TLS Encryption)
Key Takeaway: Security must be implemented across all layers—never trust client input, always encrypt data in transit, and sanitise every piece of data interacting with databases or browsers.