Web Technologies and Content Management Systems

Introduction

The contemporary media organisation is also a web organisation. Newsrooms, broadcasters, magazines, advertising agencies, public-relations departments and independent creators use websites to publish information, distribute multimedia, build audiences, collect data and generate revenue. A media website is therefore more than a digital brochure: it is a publishing system involving networks, servers, software, design, editorial workflow, accessibility, security and audience measurement.

This chapter explains the foundations needed to create and maintain basic media websites. It moves from internet architecture and domain names to HTML, CSS, responsive design, accessibility, search-engine optimisation (SEO) and content-management systems (CMSs). The emphasis is practical, but the discussion also considers governance, professional responsibility and the limitations of web technologies.

Learning Objectives

By the end of this chapter, students should be able to:

1. Explain the relationship between the internet, the World Wide Web, browsers, servers and protocols.
2. Describe domain names, DNS, hosting and common web-delivery models.
3. Identify the structural role of HTML and the presentation role of CSS.
4. Apply basic principles of responsive and accessible web design.
5. Explain how search engines discover, interpret and rank content.
6. Describe the architecture and workflow of a CMS.
7. Plan, publish and maintain a basic media website responsibly.
8. Evaluate practical, ethical and managerial issues in web publishing.

1. The Internet and the World Wide Web

The internet is a global network of interconnected networks. It links devices through communication technologies and shared protocols. The World Wide Web is one service operating on the internet. It consists primarily of interlinked resources accessed through web browsers using protocols such as HTTP and HTTPS.

Other internet services include email, file transfer, streaming, online gaming and voice communication. Confusing the internet with the web is similar to confusing a transport infrastructure with one particular transport service: the internet provides the network environment, while the web provides a system for accessing linked information and applications.

A typical web interaction contains several stages:

1. A user enters a URL or selects a link.
2. The browser identifies the domain and requests its network address through the Domain Name System (DNS).
3. The browser establishes a connection with the web server, commonly using HTTPS.
4. The server returns resources such as HTML, CSS, JavaScript, images and video references.
5. The browser interprets these resources and renders a page.
6. Additional requests may retrieve fonts, advertisements, analytics, APIs or media files.

HTTP is a request–response protocol. A browser sends a request, and a server returns a response containing a status code and, usually, content. A response code in the 200 range generally indicates success; 300-level codes indicate redirection; 400-level codes indicate a client-side problem such as a missing page; and 500-level codes indicate a server-side problem.

HTTPS is HTTP protected by Transport Layer Security (TLS). TLS helps provide confidentiality, integrity and server authentication during transmission. It does not, by itself, guarantee that the publisher is trustworthy or that the website contains accurate information. Security therefore requires both technical protection and responsible organisational practice.

2. Web Architecture

A basic website uses a client–server architecture. The client is usually a browser on a laptop or mobile device. The server is a computer or cloud service that stores or generates resources. The client requests information, and the server responds.

Many professional sites use a layered architecture:

• Presentation layer: the interface delivered to the browser, including HTML, CSS and JavaScript.
• Application layer: software that processes requests, authenticates users, applies business rules and generates responses.
• Data layer: databases and file storage containing articles, users, metadata, images and configuration.
• Delivery layer: DNS, caching, content-delivery networks and network security services that help move content efficiently to users.

Figure: A simplified layered architecture for a media website.

In small projects, all layers may be supplied by one hosting provider. In larger organisations, they may be distributed across specialised services. Separating layers improves scalability and maintenance but also increases configuration complexity and the number of possible failure points.

3. Domains, URLs, DNS and Hosting

A domain name is a human-readable identifier, such as example.org. A domain is organised hierarchically. In news.example.org, org is the top-level domain, example is the registered domain, and news is a subdomain. Registration gives an organisation control over a name for a specified period; it does not automatically provide web hosting.

A URL identifies a resource and may include a scheme, host, path, query and fragment. For example, in https://example.org/features/story?edition=weekly#author, https is the scheme, example.org the host, /features/story the path, edition=weekly a query parameter and author a fragment identifier.

The Domain Name System (DNS) translates domain names into network addresses. Common DNS records include:

DNS information is cached for a period specified by its time to live (TTL). Consequently, a change may not appear everywhere immediately.

Web hosting is the provision of server resources for storing and delivering a website. Shared hosting is inexpensive but places multiple sites on one server. Virtual private servers offer more control. Dedicated servers provide exclusive hardware. Cloud platforms distribute resources across managed infrastructure. A content-delivery network (CDN) stores or caches resources at geographically distributed locations, reducing latency for many users.

Hosting decisions should consider traffic, storage, database requirements, technical expertise, backup arrangements, security, service-level commitments, data location and cost. The cheapest plan is not necessarily the most appropriate plan for a media organisation whose reputation depends on availability.

4. HTML: Structure and Meaning

HyperText Markup Language (HTML) describes the structure and meaning of web content. HTML is not primarily a design language. It identifies headings, paragraphs, lists, links, images, tables, forms, articles and other elements.

A minimal document has a document type declaration, an html element, a head containing metadata and a body containing visible content. Semantic elements communicate meaning to browsers, search engines and assistive technologies. Examples include header, nav, main, article, section, aside and footer.

A simple media article might be structured as follows:

<article>
  <header>
    <p>Culture</p>
    <h1>Community radio and the future of local storytelling</h1>
    <p>By Amina Rao · 12 March 2025</p>
  </header>
  <figure>
    <img src="studio.jpg" alt="Presenter speaking into a microphone in a radio studio">
    <figcaption>A local programme records an interview.</figcaption>
  </figure>
  <p>Community broadcasters connect audiences with voices often absent from national media.</p>
  <h2>Participation and trust</h2>
  <p>Regular local reporting can strengthen relationships between producers and audiences.</p>
</article>

The alt attribute provides a textual alternative for an image. A meaningful heading hierarchy supports navigation. Links should describe their destination; “Read the investigation” is more useful than “Click here”. HTML validation and careful nesting reduce rendering and accessibility problems.

5. CSS and Visual Presentation

Cascading Style Sheets (CSS) control presentation, including colour, typography, spacing, layout and responsive behaviour. The cascade determines which rules apply when several rules target the same element. In general, author rules, selector specificity, source order and declarations marked !important influence the result.

The CSS box model describes an element as content surrounded by padding, border and margin. The box-sizing: border-box convention makes declared width include content, padding and border, which often makes layout calculations easier.

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #202124;
  background: #ffffff;
}
.site-header, main, .site-footer {
  max-width: 72rem;
  margin-inline: auto;
  padding: 1rem;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

CSS Grid is useful for two-dimensional layouts; Flexbox is useful for distributing items along one dimension. Styles should be separated from content where possible so that a CMS can reuse templates and editorial staff can update text without editing design rules.

6. Responsive Design

Responsive design adapts layout and content presentation to different screen sizes, input methods and conditions. It is not simply a matter of shrinking a desktop page. A responsive media site should consider narrow screens, touch interaction, variable bandwidth, orientation, readable text and accessible zoom.

Important practices include:

• Use a viewport declaration so mobile browsers represent the layout appropriately.
• Prefer fluid widths and flexible images over fixed page dimensions.
• Use media queries when a layout needs to change at a particular range.
• Design for small screens first, then enhance for larger displays where appropriate.
• Avoid requiring horizontal scrolling for ordinary text.
• Test real devices as well as browser resizing tools.
• Compress and appropriately size images; do not send a large desktop image to every phone.

Responsive design should also respond to user preferences. The prefers-reduced-motion media query can reduce unnecessary animation. Contrast, focus visibility and readable line length matter at every viewport size.

7. Accessibility and Inclusive Publishing

Web accessibility means that people with different abilities can perceive, operate, understand and interact with websites. Accessibility benefits users with visual, auditory, motor, cognitive and temporary impairments, as well as users in noisy environments, with slow connections or using small screens.

The Web Content Accessibility Guidelines (WCAG) are commonly organised around four principles: content should be perceivable, operable, understandable and robust. Practical measures include:

• Use semantic HTML before adding custom widgets.
• Provide informative alternative text for meaningful images and empty alternative text for decorative images.
• Caption videos and provide transcripts where appropriate.
• Ensure keyboard navigation and visible focus indicators.
• Use headings in a logical order.
• Do not communicate information by colour alone.
• Provide adequate contrast and resizable text.
• Label form controls and describe errors clearly.
• Avoid autoplaying audio and rapidly flashing content.
• Test with keyboard navigation, screen readers and automated tools, while recognising that automated tests cannot identify every problem.

Accessibility is both a design responsibility and an editorial responsibility. A perfectly coded template cannot make an uncaptioned interview fully accessible. Media managers should assign accessibility checks in the publishing workflow and include them in commissioning and procurement requirements.

8. Search-Engine Optimisation

Search-engine optimisation is the process of improving a site so that search engines can discover, interpret and present its content appropriately. SEO is not a guarantee of ranking. Search engines use changing systems that assess relevance, usefulness, quality, technical accessibility and many other signals.

A sound SEO process includes:

1. Crawlability: ensure that important pages can be reached through links and are not unintentionally blocked.
2. Indexability: use appropriate metadata, canonical signals and status codes; prevent duplicate or private material from being indexed when necessary.
3. Content quality: publish original, accurate, useful material that satisfies an identifiable audience need.
4. Information architecture: use descriptive URLs, logical categories and meaningful internal links.
5. Presentation: write accurate page titles and descriptions, use headings, and provide appropriate image alternatives.
6. Performance and experience: support fast loading, mobile usability, security and stable interaction.
7. Structured data: where relevant, describe content such as articles, events or organisations in machine-readable form without making misleading claims.

Keyword repetition, hidden text, deceptive redirects, copied content and artificial link schemes are poor practices. They can damage audience trust and lead to search penalties. SEO must not override editorial accuracy. A sensational headline designed only for clicks may increase short-term traffic while weakening credibility and retention.

9. Content-Management Systems

A content-management system (CMS) is software that enables authorised users to create, organise, store, edit, publish and sometimes distribute digital content without manually constructing every page. Common CMS capabilities include:

• user accounts and role-based permissions;
• a visual or structured editor;
• media libraries;
• taxonomies such as categories and tags;
• drafts, review and scheduled publication;
• templates and themes;
• revision history;
• search and metadata fields;
• extensions or plugins;
• APIs for mobile applications and other channels.

A CMS commonly separates content from presentation. An article is stored as structured data, while a template determines how it appears on a web page. This permits one story to appear on a website, mobile application, newsletter or social distribution system, although each channel may require adaptation.

CMS models include:

CMS convenience does not remove the need for governance. Administrators must manage updates, backups, permissions, plugin quality, spam, malware, privacy and continuity when staff leave.

A professional editorial workflow may contain the states: idea, assignment, draft, fact-check, legal or editorial review, copy-edit, scheduled, published, updated and archived. Roles should follow the principle of least privilege: users receive only the access needed for their work. A contributor may create drafts, an editor may approve publication, and an administrator may manage configuration without routinely writing editorial content.

10. Publishing a Basic Media Website

A practical project can be organised into the following stages.

Requirements and audience

Define the audience, editorial purpose, content types, publication frequency, languages, devices and success measures. A community-news site may need article pages, author profiles, an events calendar and a contact form; a portfolio site may prioritise visual work and case studies.

Information architecture

Plan the site map and navigation before selecting colours. Categories should reflect how users search for content, not merely how an organisation is structured internally. Avoid excessive nesting. Create a consistent URL strategy and decide how old or corrected content will be handled.

Content model

Identify fields for each content type. An article might include title, standfirst, body, author, publication date, update date, category, tags, hero image, caption, alternative text, related links and correction note. Structured fields improve consistency and make later reuse easier.

Design and implementation

Select an accessible theme or build a lightweight template. Establish typography, spacing, colour, navigation, cards, article pages, forms and error pages. Test semantic HTML, CSS responsiveness, image loading and keyboard operation before launch.

Testing and launch

Test links, forms, search, redirects, metadata, analytics, backups, permissions, performance, accessibility and security. Test on current browsers and representative mobile devices. Confirm that staging content, test accounts and private documents are not publicly exposed. Configure HTTPS, monitoring and a clear process for incident response.

Maintenance

Publication is not the end of the project. Maintain software and dependencies, review user accounts, check broken links, update contact information, renew domains, verify backups and remove obsolete extensions. Editorial maintenance includes corrections, date updates, broken embeds, image rights and archival decisions.

11. Illustrative Case: The Riverside Student Media Site

Background

Riverside University’s student media group publishes local reporting, podcasts and photo essays. Its old site was built as a collection of static pages by one volunteer. Editors found it difficult to schedule stories, contributors reused passwords, and images were often uploaded without captions or alternative text.

Problem

The group needed a manageable publishing system that supported multiple roles, mobile reading, multimedia and a transparent corrections process. It had a limited budget and no full-time developer.

Analysis

The team mapped its content types and audiences. It identified students, local residents and university staff as primary audiences. The audit found slow image delivery, unclear navigation, inaccessible colour combinations, duplicate story URLs and no reliable backup test.

Approach and solution

The group selected a hosted CMS with role-based accounts and a responsive, accessibility-oriented theme. It created article, podcast and photo-essay content models. Contributors could submit drafts; section editors could revise and schedule them; one administrator managed settings. Two-factor authentication was enabled for privileged accounts.

The team adopted a publishing checklist: headline and standfirst reviewed, author identified, sources checked, image rights recorded, alternative text written, captions supplied, links tested, category selected, SEO title checked and correction procedure confirmed. Large images were resized before upload. A weekly backup was configured, and restoration was tested quarterly rather than merely assumed to work.

Outcome

The site became easier to update, and publication no longer depended on one volunteer. Editors could schedule content and preserve revisions. Mobile usability improved, and the checklist reduced missing captions and metadata. The project did not eliminate all risks: the group still needed to monitor plugin changes, train new contributors and review its data-collection practices.

Learning points

The case demonstrates that a CMS is an organisational system as much as a technical product. Successful implementation depends on content modelling, permissions, editorial standards, accessibility, maintenance and staff capability. A technically sophisticated platform cannot compensate for weak governance.

12. Ethical, Legal and Governance Issues

Media websites operate within legal and ethical environments. Copyright applies to text, photographs, video, music and software according to applicable law. A publisher should obtain permission or use a valid licence, preserve licence records and respect attribution requirements. “Found online” is not equivalent to “free to use”.

Privacy requires careful consideration of contact forms, newsletters, analytics, cookies, account data and embedded third-party services. Organisations should collect only necessary data, explain purposes, protect it, establish retention periods and respect applicable data-protection law. Consent mechanisms should not be designed to coerce users into unnecessary tracking.

Editorial integrity includes correcting errors, distinguishing advertising from editorial material, disclosing sponsorship, protecting sources where appropriate and avoiding discriminatory representation. Accessibility and equitable access are also ethical concerns, not optional enhancements.

Security governance includes strong authentication, least-privilege access, software updates, backups, logging and an incident-response plan. AI-assisted writing, image generation or transcription may improve productivity, but outputs can contain factual errors, fabricated citations, bias or unclear ownership. Human review, disclosure where relevant and protection of confidential material remain essential.

13. Contemporary Developments and Limitations

Web publishing increasingly involves APIs, structured content, cloud platforms, automated translation, recommendation systems, progressive web applications and machine-assisted production. These tools can support personalisation and efficient distribution, but they also create dependencies on vendors, algorithms and data infrastructures.

Performance and sustainability have become important. Unnecessary scripts, autoplay video, oversized images and excessive advertising consume bandwidth and energy while harming usability. Efficient media formats, lazy loading where appropriate, caching and restrained page design can improve both performance and environmental impact.

No universal CMS or design system is best for every organisation. Hosted platforms simplify operations but may limit customisation and create vendor dependence. Self-hosted systems offer control but require expertise. Headless architectures support multiple channels but introduce API, preview and governance complexity. Decisions should be based on organisational capability, editorial needs, risk and total cost of ownership rather than trend alone.

Best-Practice Checklist

Before launch, confirm that the site:

• has a clear audience and content purpose;
• uses a controlled domain and HTTPS;
• has tested DNS, redirects and error pages;
• uses semantic HTML and meaningful headings;
• works with keyboard navigation and mobile layouts;
• provides captions, transcripts and alternative text where required;
• has descriptive titles, URLs and metadata;
• compresses and appropriately sizes media;
• has role-based accounts, updates and backups;
• records rights, corrections and privacy practices;
• has monitoring, ownership and a maintenance schedule.

Chapter Summary

The internet provides the network infrastructure on which the World Wide Web operates. Web publishing depends on clients, servers, protocols, DNS, hosting, databases, storage and delivery services. Domains identify online locations, while hosting supplies the resources needed to deliver them.

HTML provides semantic structure, CSS controls presentation, and responsive design adapts interfaces to different devices and conditions. Accessibility requires meaningful content, keyboard operation, captions, alternatives, appropriate contrast and inclusive testing. SEO supports discovery through crawlable architecture, useful content, accurate metadata, sound links and technical quality; it should never replace editorial integrity.

A CMS combines content storage, templates, permissions and workflow. Effective CMS-based publishing requires information architecture, content modelling, role management, testing, security, backups and continuing maintenance. Media managers must also address copyright, privacy, accessibility, transparency, sustainability and the risks of automated or AI-assisted production. A successful website is therefore a socio-technical publishing system, not merely a collection of attractive pages.

Key Terms

Internet: Global network of interconnected networks.

World Wide Web: Interlinked information and applications accessed through web technologies.

HTTP: Request–response protocol used to transfer web resources.

HTTPS: HTTP protected by Transport Layer Security.

URL: Address identifying a web resource.

Domain name: Human-readable name associated with internet services.

DNS: System that translates domain names into network information.

Web hosting: Provision of server resources for storing and delivering a website.

CDN: Distributed service that caches and delivers resources nearer to users.

HTML: Markup language used to structure web content.

CSS: Style language used to control presentation and layout.

Responsive design: Design approach that adapts presentation to devices and conditions.

Accessibility: Design of content and services usable by people with diverse abilities.

SEO: Practices that improve discoverability and interpretation by search engines.

CMS: Software for creating, managing and publishing digital content.

Headless CMS: CMS that delivers content through APIs independently of presentation.

Semantic HTML: HTML elements whose names communicate content meaning.

Metadata: Descriptive information about a page or content item.

Role-based access control: Assigning permissions according to organisational roles.

Content model: Defined fields and relationships representing a type of content.

Review Questions

Short Answer Questions

1. Distinguish the internet from the World Wide Web.
2. What function does DNS perform?
3. Explain the different roles of HTML and CSS.
4. Identify three practices that improve web accessibility.
5. What is the main difference between a traditional CMS and a headless CMS?

Long Answer Questions

1. Explain the stages through which a browser retrieves and displays a web page.
2. Discuss the principal factors an organisation should consider when selecting web hosting.
3. Explain how responsive design and accessibility influence the design of a media website.
4. Describe a CMS-based editorial workflow from assignment to archiving.
5. Evaluate the relationship between SEO, content quality and editorial credibility.

Analytical / Application Questions

1. A student magazine has a slow website, inconsistent headings, missing image descriptions and shared administrator passwords. Analyse the risks and propose a prioritised improvement plan.
2. Compare hosted, self-hosted and headless CMS options for a small regional newsroom with limited technical staff but ambitions to publish on a website, mobile application and newsletter.
3. Design a content model and publishing checklist for a multimedia investigation that includes text, photographs, video, corrections and source-protection concerns.

Multiple Choice Questions with Answers

Question 1

Which statement best distinguishes the internet from the World Wide Web?

A. The internet is a global network, while the Web is a service operating on it.

B. The Web is the physical infrastructure, while the internet is a browser application.

C. The internet is used only for email, while the Web is used only for video.

D. They are technically identical terms with no meaningful distinction.

Correct Answer: A. The internet is a global network, while the Web is a service operating on it.

Question 2

What is the primary function of DNS?

A. To compress images before publication

B. To translate domain names into network addressing information

C. To create page layouts with CSS

D. To authenticate every item of editorial content

Correct Answer: B. To translate domain names into network addressing information

Question 3

Which HTML element is most appropriate for the main title of an article?

A. <footer>

B. <aside>

C. <h1>

D. <figcaption>

Correct Answer: C. <h1>

Question 4

Which practice most directly improves keyboard accessibility?

A. Removing visible focus indicators

B. Using very small text to fit more content

C. Ensuring interactive controls can be reached and operated by keyboard

D. Communicating all status information through colour alone

Correct Answer: C. Ensuring interactive controls can be reached and operated by keyboard

Question 5

What is the principal purpose of a content-management system?

A. To replace all editorial decision-making with automation

B. To manage the creation, organisation, editing and publication of digital content

C. To provide only domain registration services

D. To convert every website into a social-media account

Correct Answer: B. To manage the creation, organisation, editing and publication of digital content

Question 6

Which DNS record commonly identifies a mail server?

A. MX

B. AAAA

C. CNAME

D. NS

Correct Answer: A. MX

Question 7

Why should a media site use descriptive internal links rather than repeated “click here” links?

A. They improve meaning and navigation for users and assistive technologies.

B. They guarantee the page will rank first in every search engine.

C. They eliminate the need for HTML headings.

D. They prevent all server errors.

Correct Answer: A. They improve meaning and navigation for users and assistive technologies.

Question 8

A headless CMS is best described as a system that:

A. Stores no content and therefore requires no database

B. Separates content management from presentation and commonly delivers content through APIs

C. Can be edited only by anonymous visitors

D. Works only when a site has no mobile users

Correct Answer: B. Separates content management from presentation and commonly delivers content through APIs

Question 9

Which is an example of a responsible SEO practice?

A. Hiding repeated keywords in the page background

B. Creating accurate titles, useful content and logical internal links

C. Copying competitors’ articles without attribution

D. Using deceptive redirects to unrelated pages

Correct Answer: B. Creating accurate titles, useful content and logical internal links

Question 10

Which governance measure best follows the principle of least privilege?

A. Giving every contributor administrator access

B. Using one shared password for the whole newsroom

C. Giving each user only the permissions required for their role

D. Disabling revision history to simplify publishing

Correct Answer: C. Giving each user only the permissions required for their role