By the end of this chapter, you will be able to:
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.
HTML (HyperText Markup Language) is the backbone of web page structure, defining elements such as text, links, tables, forms and lists. Every page a browser shows is built from HTML elements, each written as an opening tag, its content and a closing tag. For cyber security professionals, mastering HTML is crucial to build interfaces that are functional and that also reduce vulnerabilities such as injection attacks and cross-site scripting. This topic covers the essential HTML tags and their use in creating secure, accessible web pages; JavaScript, which adds behaviour to these pages, is covered under 3.3. Example: the web team of a water and sanitation company in Nakuru builds its customer complaint page from headings, a table of recent outages and a form, all written in plain HTML.
Formatting tags in HTML define how text and elements are presented within a web page. They allow developers to emphasise content, organise information and improve readability, which is critical when displaying security alerts or logs clearly to users.
<b> and <strong>: Both make text bold, but <strong> marks the text as important, which helps screen readers give weight to critical security messages.<i> and <em>: Both italicise text; <em> adds stressed emphasis, useful for highlighting warnings or instructions in incident reports.<u> and <mark>: <u> underlines text and <mark> highlights it, for example the key line of a password policy.<h1> to <h6>: These structure content hierarchically for users and search engines. A cyber incident report page might use <h1> for the title and <h2> for sections such as "Incident Details".<p>: These separate blocks of text, giving clarity when presenting detailed security procedures or user instructions.<br>: Inserts a line break, useful for formatting addresses or multi-line log entries.<hr>: Creates a thematic break that separates sections, such as different security advisories on one page.<sup> and <sub>: Display text above or below the normal line, useful for expressions such as 2⁸ in cryptography explanations.<code> and <pre>: <code> shows a code fragment in a monospaced font, while <pre> keeps the spacing and line breaks of a block, essential for example scripts or commands in security documentation.Hyperlinks connect web pages and resources, enabling navigation and access to further information. In security portals, careful hyperlinking is vital to prevent phishing and malicious redirects.
<a>: The anchor tag creates a hyperlink. Its href attribute gives the address the link opens.Tables organise data into rows and columns, essential for displaying logs, audit trails or user permissions clearly in security applications.
<table>: Defines the table container.<tr>: Creates a table row.<th>: Sets a header cell, used to label columns such as "Timestamp" or "Event Type".<td>: Holds a data cell.<thead>, <tbody> and <tfoot>: Group the header rows, body rows and footer rows of a large table.<caption>: Gives the table a title, improving clarity.Frames divide the browser window into several sections, each displaying a separate HTML document. They are obsolete in HTML5, but understanding them helps in maintaining legacy systems and in safely embedding content from other sources.
<frameset>: Replaces <body> and sets the layout of the frames, for example cols="25%,75%".<frame>: Defines each frame, with a src attribute pointing to the document it shows.<noframes>: Gives content for browsers that do not support frames.<iframe>: Embeds another page within a section of the current page, for example an external security advisory. The sandbox attribute limits what the embedded page can do, isolating it from the main page.Forms collect user input, crucial for login screens, incident reporting and feedback tools. Secure form design protects against injection and data leakage.
<form>: Encloses the form controls; action gives the server address that receives the data and method gives the submission type, GET or POST.<input>: Takes a type such as text, password, email, checkbox, radio, number, date or file.<label>: Ties a caption to its control, improving accessibility.<select> with <option>: Creates a drop-down list of predefined choices, such as incident categories.<textarea>: Provides multi-line input, ideal for detailed incident descriptions.<button>: Submits the form or runs a script.Lists organise content logically, improving navigation and clarity in security documentation and in menus.
<ol>: Produces a numbered list, suitable for step-by-step incident response procedures; the type and start attributes change the numbering style and first number.<ul>: Produces a bulleted list, effective for listing security features or risk factors; each entry is an <li> element.<dl>, <dt> and <dd>: Pair terms and their descriptions, useful for glossaries of cyber security terms.<ul> or <ol> inside an <li> builds multi-level structures, such as a navigation menu or a security policy with sub-clauses.Explain the difference between the and tags, and why is preferred in security-related messages. (5 marks)
Describe how the tag’s attributes can be used to enhance security when linking to external websites. (6 marks)
Outline the key components of an HTML table and how they contribute to presenting security logs effectively. (6 marks)
Discuss the security risks associated with using frames and how modern alternatives mitigate these risks. (7 marks)
Enumerate at least six types of form inputs and explain their relevance in secure cyber security web forms. (6 marks)
Differentiate between ordered, unordered, and description lists with examples relevant to cyber security documentation. (6 marks)
Explain the event propagation mechanism in JavaScript and its implications for secure event handling. (7 marks)
List and explain five common JavaScript string methods useful for input validation in cyber security applications. (7 marks)
Describe how JavaScript handles numbers and why special care is necessary in cryptographic computations. (5 marks)
Explain how JavaScript arrays can be used to manage cyber security incident data and the importance of validating array contents. (6 marks)
Create a free account to open more of this chapter.
Free: practical guides, quick cards, workplace scenarios and more.
Create a free accountThis chapter focused on developing a functional website by first exploring key HTML coding elements such as formatting, hyperlinks, tables, frames, forms, and lists, which form the structural foundation of web pages. It then examined scripting languages, highlighting their functions and different types that enhance website interactivity and dynamics. The discussion on JavaScript covered essential features including events, string manipulation, numerical operations, and array handling, which are critical for client-side programming. Attention was given to PHP, emphasizing its importance in server-side scripting, along with its syntax, variables, data types, operators, control structures, functions, arrays, and form processing capabilities. The chapter also addressed the creation of databases, which are vital for storing and managing website data efficiently. Finally, it covered database linkage, explaining how websites connect to databases to retrieve and manipulate information, thereby enabling dynamic content delivery and user interaction.
<form> tag in HTML? (2 marks) At the start of this chapter we promised you would be able to:
Tick each one you can genuinely do.
So, are you there yet?
You're competent when you can confidently do 50% or more of what this chapter promised.
Sign in to record how you're doing.