Departments› Cyber Security› Module IV› Perform Website Design And Development› Ch 3: Develop functional website
Cyber Security  ·  Level 6
Perform Website Design And Development
Chapter 3: Develop functional website
📚 6 Topics
← Chapters ⬇ Download PDF
⚑ What you will be able to do

By the end of this chapter, you will be able to:

  • Ensure the website meets all functional requirements like smooth navigation, working forms, and proper media loading during testing.
  • Test and confirm that every page loads quickly, aiming for under three seconds on typical internet speeds.
  • Create a fully responsive website design that works perfectly on at least three different devices or screen sizes without any layout issues.

Mastering these skills means you can build websites that users find reliable, fast, and easy to use—key qualities for success in the web development trade!

Websites form the front line for many cyber security professionals who develop secure portals, client dashboards, and incident reporting tools. A functional website must blend effective design with robust coding to deliver user-friendly, secure, and responsive interfaces. In Kenya's growing digital economy, cyber security specialists often create websites that handle sensitive information for banks, hospitals, and government agencies, where secure coding practices are paramount. This chapter explores core HTML coding and JavaScript elements essential for developing functional, interactive websites tailored to cyber security contexts.

3.1 HTML Coding

HTML (HyperText Markup Language) is the backbone of web page structure, defining elements such as text, links, tables, and forms. For cyber security professionals, mastering HTML is crucial to build interfaces that are not only functional but also minimize vulnerabilities such as injection attacks or cross-site scripting. This section covers essential HTML tags and their use in creating secure, accessible web pages.

3.1.1 Formatting Tags

Formatting tags in HTML define the presentation of text and elements within a webpage. They allow developers to emphasize content, organize information, and improve readability, which is critical when displaying security alerts or logs clearly to users.

Bold and Italic Text

  • and tags: Both make text bold, but indicates importance semantically, which helps screen readers prioritize critical security messages.
  • and tags: These italicize text; adds emphasis semantically, useful for highlighting warnings or instructions in incident reports.

Headings and Paragraphs

  • Headings (

    to

    ) structure content hierarchically, assisting both users and search engines. For example, a cyber incident report page might use

    for the title and

    for sections like "Incident Details".

  • Paragraph tags (

    ) separate blocks of text, ensuring clarity when presenting detailed security protocols or user instructions.

Line Breaks and Horizontal Rules

  • The
    tag inserts line breaks, useful for formatting addresses or multiline log entries.
  • The
    tag creates thematic breaks, helping separate sections such as different security advisories.

Superscripts and Subscripts

  • and tags display text above or below the normal line, useful for mathematical expressions in cryptography explanations.

Monospaced Text

  • The tag displays code snippets in a monospaced font, essential for showing example scripts or commands in security documentation.

3.1.2 Hyperlinks Tag

Hyperlinks connect web pages and resources, enabling navigation and access to external information. In cyber security portals, secure hyperlinking is vital to prevent phishing or redirect attacks.

Anchor Tag Structure and Attributes

Internal and External Links

  • Internal links navigate within the same website, helpful for linking between dashboard pages.
  • External links connect to outside resources, such as government advisories from NEMA or KRA cybersecurity alerts.

Email Links

  • The mailto: protocol in href enables users to send emails directly, useful for reporting incidents to the IT security team.

Link Styling and Accessibility

  • Proper use of descriptive link text improves usability and accessibility for screen readers, ensuring all users can navigate security portals effectively.

3.1.3 Tables Tags

Tables organize data into rows and columns, essential for displaying logs, audit trails, or user permissions clearly in cyber security applications.

Table Structure Elements

  • defines the table container.
  • tags create table rows.
  • tags set header cells, which should be used to label columns like "Timestamp" or "Event Type".
  		• tags hold data cells.

    Caption and Summary

    • The
    element provides a title for the table, improving clarity.
  • The summary attribute (deprecated but sometimes used) describes table content for accessibility tools.

    • Nested Tables and Styling

    • Tables can be nested to show related data, such as grouping alerts by severity.
    • CSS is often used to style tables for readability and responsiveness, important in mobile-accessible cyber security dashboards.

    3.1.4 Frames Tags

    Frames divide the browser window into multiple sections, each displaying a separate HTML document. Though largely deprecated in modern web design, understanding frames helps in legacy system maintenance and secure integration of multiple content sources.

    Frameset and Frame Elements

    • replaces to define the layout of frames.
    • specifies individual frames with src attributes pointing to different documents.

    Security Considerations

    • Frames can introduce clickjacking risks if not handled properly.
    • Many modern browsers limit frame usage; safer alternatives include iframes with sandbox attributes.

    Iframes as an Alternative