Build a Web Technologies Study Guide
Build a multi-page HTML site covering networking and web fundamentals.
Introduction
30 Second Summary
You have a Web Technologies viva in four days. You need a single, comprehensive reference that covers everything from network topologies to HTML forms.
In this project, you will build a multi-page HTML website that serves as your complete study guide for the exam. Each page covers one major topic with clear explanations and working code examples you can review offline.
What You'll Build
A navigable HTML reference site covering networking fundamentals, internet protocols, and every HTML element type on your viva syllabus.
By the end of this project, you'll have:
- A complete multi-page HTML website covering networks, topologies, IP addressing, DNS, internet history, TCP/IP, HTTP/HTTPS, and the World Wide Web.
- Working HTML demonstrations of every element type including tables, forms, lists, multimedia, and semantic sectioning elements.
- A navigable offline reference you can open in any browser to review during your final days before the May 16th exam.
- Secret Mission: Add a dark/light theme toggle and sticky sidebar navigation using CSS and JavaScript.
Are there any prerequisites?
You should already have basic experience creating HTML files. This project assumes you have IntelliJ IDEA installed and know how to open HTML files in a browser.
Before We Start
Before We Start...
Set Up the Project
Your Web Technologies viva is on May 16th. You need a study resource that covers every topic on the syllabus in a format you can review offline.
In this step, you will create the project structure in IntelliJ IDEA. You will build the index page that links to all topic sections, and add a stylesheet that makes everything readable for studying.
In this step, get ready to:
- Create a new project folder in IntelliJ IDEA.
- Build an index page with navigation links to all seven topic pages.
- Add a CSS stylesheet with base styles for readability.
Create the project in IntelliJ IDEA
You need a dedicated folder to hold all eight HTML files and the stylesheet. IntelliJ IDEA lets you create a new project that gives you this folder structure immediately.
- Open IntelliJ IDEA.
- Click File in the top menu bar.
- Click New, then Project.
- In the Name field, enter web-tech-viva-guide.
- Select Empty Project as the project type (no frameworks needed).
- Click Create.
IntelliJ opens your new empty project. You should see web-tech-viva-guide in the Project sidebar on the left.
Don't see the Project sidebar?
Press Alt+1 (Windows) or Cmd+1 (macOS) to toggle the Project tool window. If IntelliJ opened a welcome screen instead, close it and use File > Open to navigate to the folder you just created.
Help me find the Project sidebar in IntelliJ IDEA.
Create the index page with navigation
The index page is the homepage of your study guide. It links to all seven topic pages so you can jump to any section during revision.
- Right-click the web-tech-viva-guide folder in the Project sidebar.
- Select New, then HTML File.
- Name the file index and press Enter.
- Replace any default content with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Technologies Viva Study Guide covering networking, internet protocols, and HTML">
<meta name="author" content="Student">
<title>Web Technologies Viva Study Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Web Technologies Viva Study Guide</h1>
<p>Complete reference for networking, internet protocols, and HTML</p>
</header>
<nav>
<h2>Topics</h2>
<ul>
<li><a href="networking.html">Networking Fundamentals</a></li>
<li><a href="addressing.html">Internet Addressing and DNS</a></li>
<li><a href="protocols.html">Internet History and Protocols</a></li>
<li><a href="html-foundations.html">HTML Foundations</a></li>
<li><a href="content-elements.html">HTML Content Elements</a></li>
<li><a href="data-media.html">HTML Data and Media</a></li>
<li><a href="forms.html">HTML Forms</a></li>
</ul>
</nav>
<main>
<section>
<h2>About This Guide</h2>
<p>This study guide covers all topics for the Web Technologies viva examination. Each page provides thorough explanations with working HTML examples.</p>
<h3>Topics Covered</h3>
<ul>
<li><strong>Networking:</strong> Networks, Nodes, Topologies, Network Types</li>
<li><strong>Addressing:</strong> IP Addresses, URI, URL, URN, DNS</li>
<li><strong>Protocols:</strong> Internet History, TCP/IP, HTTP/HTTPS, WWW</li>
<li><strong>HTML:</strong> Elements, Head, Meta, Link, Semantic Elements, Tables, Lists, Forms, Multimedia</li>
</ul>
</section>
</main>
<footer>
<p>Web Technologies Viva Study Guide - Created for exam preparation</p>
</footer>
</body>
</html>What does this code do?
The <head> section sets up metadata including character encoding, viewport for responsive behaviour, a description for SEO, and a link to your stylesheet.
The <nav> element contains an unordered list of links to the seven topic pages you will create in later steps. Each href points to a file that does not exist yet, which is fine.
The <main> section gives a summary of what the guide covers, grouped by topic area.
- Save index.html by pressing Ctrl+S (Windows) or Cmd+S (macOS).
- Open index.html in Google Chrome by right-clicking the file in IntelliJ and selecting Open In > Browser > Chrome.
- You should see the heading "Web Technologies Viva Study Guide" and a list of seven topic links. The links will show a "file not found" error if clicked, which is expected.
Seeing a blank page?
Check that your file is saved. Look for a dot or circle on the index.html tab in IntelliJ, which indicates unsaved changes.
Make sure the <!DOCTYPE html> declaration is the very first line with no blank lines above it.
Help me debug why my index.html shows a blank page in Chrome.
✔️ Awesome, I've got everything!
Great. Make sure you have saved index.html before moving on.
ⓧ I'd like to double check the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web Technologies Viva Study Guide covering networking, internet protocols, and HTML">
<meta name="author" content="Student">
<title>Web Technologies Viva Study Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Web Technologies Viva Study Guide</h1>
<p>Complete reference for networking, internet protocols, and HTML</p>
</header>
<nav>
<h2>Topics</h2>
<ul>
<li><a href="networking.html">Networking Fundamentals</a></li>
<li><a href="addressing.html">Internet Addressing and DNS</a></li>
<li><a href="protocols.html">Internet History and Protocols</a></li>
<li><a href="html-foundations.html">HTML Foundations</a></li>
<li><a href="content-elements.html">HTML Content Elements</a></li>
<li><a href="data-media.html">HTML Data and Media</a></li>
<li><a href="forms.html">HTML Forms</a></li>
</ul>
</nav>
<main>
<section>
<h2>About This Guide</h2>
<p>This study guide covers all topics for the Web Technologies viva examination. Each page provides thorough explanations with working HTML examples.</p>
<h3>Topics Covered</h3>
<ul>
<li><strong>Networking:</strong> Networks, Nodes, Topologies, Network Types</li>
<li><strong>Addressing:</strong> IP Addresses, URI, URL, URN, DNS</li>
<li><strong>Protocols:</strong> Internet History, TCP/IP, HTTP/HTTPS, WWW</li>
<li><strong>HTML:</strong> Elements, Head, Meta, Link, Semantic Elements, Tables, Lists, Forms, Multimedia</li>
</ul>
</section>
</main>
<footer>
<p>Web Technologies Viva Study Guide - Created for exam preparation</p>
</footer>
</body>
</html>Add the stylesheet for readability
A study guide needs to be easy to read. The stylesheet adds generous line spacing, a constrained page width, styled code blocks, and a clean table layout that you will use throughout the guide.
- Right-click the web-tech-viva-guide folder in the Project sidebar.
- Select New, then Stylesheet.
- Name the file styles and press Enter.
- Paste the following CSS into the file:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Georgia, 'Times New Roman', serif;
line-height: 1.8;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #fafafa;
}
header {
border-bottom: 2px solid #333;
padding-bottom: 15px;
margin-bottom: 30px;
}
h1 {
font-size: 2rem;
margin-bottom: 5px;
}
h2 {
font-size: 1.5rem;
margin-top: 30px;
margin-bottom: 15px;
color: #1a1a2e;
}
h3 {
font-size: 1.2rem;
margin-top: 20px;
margin-bottom: 10px;
color: #2d2d44;
}
h4 {
font-size: 1.05rem;
margin-top: 15px;
margin-bottom: 8px;
}
p {
margin-bottom: 12px;
}
ul, ol {
margin-bottom: 12px;
padding-left: 25px;
}
li {
margin-bottom: 6px;
}
nav ul {
list-style: none;
padding-left: 0;
}
nav ul li {
margin-bottom: 8px;
}
nav a {
color: #1a73e8;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
a {
color: #1a73e8;
}
code {
background-color: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
pre {
background-color: #1a1a2e;
color: #e0e0e0;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin-bottom: 15px;
font-family: 'Courier New', monospace;
font-size: 0.85em;
line-height: 1.5;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #1a1a2e;
color: white;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
blockquote {
border-left: 4px solid #1a73e8;
padding: 10px 20px;
margin: 15px 0;
background-color: #f0f7ff;
font-style: italic;
}
section {
margin-bottom: 40px;
}
footer {
border-top: 1px solid #ccc;
padding-top: 15px;
margin-top: 40px;
color: #666;
font-size: 0.9em;
}
.example-box {
border: 2px dashed #1a73e8;
padding: 15px;
margin: 15px 0;
background-color: #fff;
border-radius: 5px;
}
.note {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 10px 15px;
margin: 15px 0;
}What does this stylesheet do?
The universal selector reset (* { margin: 0; padding: 0; }) removes default browser spacing so you start with a clean slate.
The body rule sets a serif font and generous 1.8 line-height for comfortable reading. The max-width: 900px keeps lines from stretching too wide on large monitors.
The pre rule styles code examples with a dark background and monospace font. The table rules add borders and alternating row colours for comparison tables you will add later.
The .example-box and .note classes provide reusable highlight boxes for working examples and important notes throughout the guide.
- Save styles.css.
- Switch to Chrome and refresh the page.
- You should see the page with a serif font, a dark separator line below the heading, and blue navigation links without bullet points.
Page still looks unstyled?
Make sure styles.css is in the same folder as index.html. The <link> tag in your HTML references href="styles.css", so both files must be at the same level.
Also check that the filename is exactly styles.css (not style.css or Styles.css). File names are case-sensitive.
Help me figure out why my CSS is not loading.
✔️ Awesome, I've got everything!
Great. Double check you have saved both files before moving on.
ⓧ I'd like to double check the full code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Georgia, 'Times New Roman', serif;
line-height: 1.8;
color: #333;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #fafafa;
}
header {
border-bottom: 2px solid #333;
padding-bottom: 15px;
margin-bottom: 30px;
}
h1 {
font-size: 2rem;
margin-bottom: 5px;
}
h2 {
font-size: 1.5rem;
margin-top: 30px;
margin-bottom: 15px;
color: #1a1a2e;
}
h3 {
font-size: 1.2rem;
margin-top: 20px;
margin-bottom: 10px;
color: #2d2d44;
}
h4 {
font-size: 1.05rem;
margin-top: 15px;
margin-bottom: 8px;
}
p {
margin-bottom: 12px;
}
ul, ol {
margin-bottom: 12px;
padding-left: 25px;
}
li {
margin-bottom: 6px;
}
nav ul {
list-style: none;
padding-left: 0;
}
nav ul li {
margin-bottom: 8px;
}
nav a {
color: #1a73e8;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
a {
color: #1a73e8;
}
code {
background-color: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
font-size: 0.9em;
}
pre {
background-color: #1a1a2e;
color: #e0e0e0;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin-bottom: 15px;
font-family: 'Courier New', monospace;
font-size: 0.85em;
line-height: 1.5;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #1a1a2e;
color: white;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
blockquote {
border-left: 4px solid #1a73e8;
padding: 10px 20px;
margin: 15px 0;
background-color: #f0f7ff;
font-style: italic;
}
section {
margin-bottom: 40px;
}
footer {
border-top: 1px solid #ccc;
padding-top: 15px;
margin-top: 40px;
color: #666;
font-size: 0.9em;
}
.example-box {
border: 2px dashed #1a73e8;
padding: 15px;
margin: 15px 0;
background-color: #fff;
border-radius: 5px;
}
.note {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 10px 15px;
margin: 15px 0;
}Your project structure is ready. You have a styled index page that will serve as your home base throughout the guide. Next up, you will build the first topic page covering networking fundamentals.
Build the Networking Fundamentals Page
Your index page is ready and linking to all your topic pages. The first topic on your viva syllabus is networking fundamentals, covering what networks are, how devices connect, and how different network layouts work.
In this step, you will create networking.html with comprehensive coverage of networks, nodes, network types, and all six network topologies. This page gives you a complete reference for answering any networking question in your viva.
In this step, get ready to:
- Create the networking page with definitions of networks, nodes, and network types (PAN, LAN, MAN, WAN).
- Add the network topology section covering all six topologies with advantages, disadvantages, and use cases.
- Add a comparison summary table for quick topology reference.
Create the networking page with network basics and types
The first sections of your networking page cover foundational definitions. You need to be able to explain what a network is, what a node is, and the four main network types (PAN, LAN, MAN, WAN) with their ranges and examples.
- In IntelliJ IDEA, right-click your web-tech-viva-guide project folder in the Project panel.
- Select New, then HTML File.
- Name the file networking and press Enter.
- Replace all the content in the new file with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Networking Fundamentals - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Networking Fundamentals</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="what-is-network">
<h2>What is a Network?</h2>
<p>A network is a collection of two or more computers and devices that are connected together to share resources and communicate with each other. Networks allow devices to exchange data, share files, printers, and internet connections.</p>
<h3>Purpose of Networks</h3>
<ul>
<li><strong>Resource Sharing:</strong> Share hardware (printers, scanners) and software across devices</li>
<li><strong>Data Communication:</strong> Send and receive data between connected devices</li>
<li><strong>Centralized Management:</strong> Manage data and resources from a central location</li>
<li><strong>Cost Efficiency:</strong> Reduce costs by sharing resources instead of duplicating them</li>
</ul>
</section>
<section id="what-is-node">
<h2>What is a Node?</h2>
<p>A node is any device that is connected to a network and can send, receive, or forward data. Nodes are the endpoints or connection points within a network.</p>
<h3>Examples of Nodes</h3>
<ul>
<li>Computers (desktops, laptops)</li>
<li>Servers</li>
<li>Printers</li>
<li>Routers and Switches</li>
<li>Smartphones and Tablets</li>
<li>IoT devices (smart home devices)</li>
</ul>
</section>
<section id="network-types">
<h2>Network Types</h2>
<h3>PAN (Personal Area Network)</h3>
<p>A network for personal devices within a very short range, typically within 10 meters.</p>
<ul>
<li><strong>Range:</strong> Up to 10 meters</li>
<li><strong>Example:</strong> Bluetooth connection between phone and headphones, USB connection between computer and printer</li>
<li><strong>Use Case:</strong> Personal device connectivity</li>
</ul>
<h3>LAN (Local Area Network)</h3>
<p>A network that covers a small geographic area such as a home, office, or building.</p>
<ul>
<li><strong>Range:</strong> Up to a few kilometers (typically within a building or campus)</li>
<li><strong>Example:</strong> Office network, school computer lab, home Wi-Fi network</li>
<li><strong>Technologies:</strong> Ethernet, Wi-Fi</li>
<li><strong>Speed:</strong> High speed (100 Mbps to 10 Gbps)</li>
</ul>
<h3>MAN (Metropolitan Area Network)</h3>
<p>A network that covers a city or large campus. Larger than a LAN but smaller than a WAN.</p>
<ul>
<li><strong>Range:</strong> Up to 50 kilometers (a city or metropolitan area)</li>
<li><strong>Example:</strong> Cable TV network across a city, university campus network connecting multiple buildings</li>
<li><strong>Use Case:</strong> Connecting multiple LANs within a city</li>
</ul>
<h3>WAN (Wide Area Network)</h3>
<p>A network that covers a large geographic area, often a country or the entire world.</p>
<ul>
<li><strong>Range:</strong> Unlimited (can span countries and continents)</li>
<li><strong>Example:</strong> The Internet is the largest WAN</li>
<li><strong>Technologies:</strong> Fiber optics, satellites, leased telephone lines</li>
<li><strong>Speed:</strong> Generally lower than LAN due to distance</li>
</ul>
</section>What does this code do?
This creates the first half of your networking page with three main sections.
- The <head> links to the same styles.css file so this page shares styling with your index.
- The "What is a Network" section defines networks and lists four key purposes you should be able to explain in your viva.
- The "What is a Node" section defines nodes with concrete examples of devices that qualify.
- The "Network Types" section covers PAN, LAN, MAN, and WAN with ranges, examples, and technologies for each.
- Save networking.html by pressing Cmd+S (macOS) or Ctrl+S (Windows).
You will not see this in the browser yet because the file is incomplete. The next chunk adds the topology section.
Add the network topology section
Network topology is a major viva topic. You need to explain how devices are physically or logically arranged in a network. There are six topologies to cover, each with distinct trade-offs.
- In networking.html, place your cursor directly after the closing </section> tag of the Network Types section (the one after the WAN content).
- Paste the following code below it:
<section id="network-topology">
<h2>Network Topology</h2>
<p>Network topology refers to the arrangement or layout of devices (nodes) and connections (links) in a network. It describes how devices are connected and how data flows between them. There are two types:</p>
<ul>
<li><strong>Physical Topology:</strong> The actual physical layout of cables and devices</li>
<li><strong>Logical Topology:</strong> How data flows within the network regardless of physical layout</li>
</ul>
<h3>1. Bus Topology</h3>
<p>All devices are connected to a single central cable called the bus or backbone. Data travels in both directions along the cable.</p>
<h4>How it Works</h4>
<p>A single cable runs through the network. Each device connects to this cable via a tap or drop line. Data sent by any device travels along the bus in both directions until it reaches the intended recipient. Terminators at both ends of the cable prevent signal reflection.</p>
<h4>Advantages</h4>
<ul>
<li>Simple and easy to install</li>
<li>Low cost (uses less cable)</li>
<li>Good for small or temporary networks</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If the main cable fails, the entire network goes down</li>
<li>Difficult to troubleshoot</li>
<li>Performance degrades as more devices are added (collisions)</li>
<li>Limited cable length and number of devices</li>
</ul>
<h4>Use Case</h4>
<p>Small networks, temporary setups, legacy systems.</p>
<h3>2. Star Topology</h3>
<p>All devices are connected to a central hub or switch. All data passes through the central device.</p>
<h4>How it Works</h4>
<p>Each device has a dedicated point-to-point connection to the central hub/switch. When a device wants to communicate, it sends data to the hub, which then forwards it to the destination device. The hub acts as a traffic controller.</p>
<h4>Advantages</h4>
<ul>
<li>If one device fails, the rest of the network is unaffected</li>
<li>Easy to add or remove devices</li>
<li>Easy to troubleshoot (isolate faults)</li>
<li>High performance with intelligent switches</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If the central hub fails, the entire network goes down</li>
<li>Requires more cable than bus topology</li>
<li>Cost of the central device (hub/switch)</li>
</ul>
<h4>Use Case</h4>
<p>Home networks, offices, schools. The most commonly used topology today.</p>
<h3>3. Ring Topology</h3>
<p>Each device is connected to exactly two other devices, forming a closed loop or ring. Data travels in one direction (or both in dual ring).</p>
<h4>How it Works</h4>
<p>Data travels around the ring in one direction, passing through each node until it reaches its destination. Each node acts as a repeater, boosting the signal before passing it along. Token-passing is often used to control access.</p>
<h4>Advantages</h4>
<ul>
<li>No data collisions (orderly data transmission)</li>
<li>Equal access for all devices</li>
<li>Performs better than bus under heavy load</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If one device or connection fails, the entire ring is disrupted</li>
<li>Difficult to add or remove devices (must break the ring)</li>
<li>Slower than star (data must pass through multiple nodes)</li>
</ul>
<h4>Use Case</h4>
<p>Some LANs, fiber optic networks (FDDI), older IBM Token Ring networks.</p>
<h3>4. Mesh Topology</h3>
<p>Every device is connected to every other device in the network. Provides multiple paths for data to travel.</p>
<h4>How it Works</h4>
<p>In a full mesh, each device has a dedicated point-to-point link to every other device. In a partial mesh, only some devices are fully connected. Data can take multiple paths to reach its destination, providing redundancy.</p>
<p>Formula: For N devices, links needed = N(N-1)/2</p>
<h4>Advantages</h4>
<ul>
<li>Highly reliable (if one link fails, data takes an alternative path)</li>
<li>No traffic problems (dedicated links)</li>
<li>Secure (dedicated connections)</li>
<li>Easy fault detection</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>Very expensive (lots of cables and ports)</li>
<li>Complex installation and maintenance</li>
<li>Impractical for large networks</li>
</ul>
<h4>Use Case</h4>
<p>Critical systems (military, data centers), internet backbone, where high reliability is essential.</p>
<h3>5. Tree Topology</h3>
<p>A hierarchical topology that combines characteristics of star and bus. Multiple star networks are connected to a bus backbone.</p>
<h4>How it Works</h4>
<p>A root node connects to one or more intermediate nodes (hubs/switches), which in turn connect to end devices in a star pattern. The structure resembles a tree with branches. Data flows up and down through the hierarchy.</p>
<h4>Advantages</h4>
<ul>
<li>Scalable (easy to add new branches)</li>
<li>Fault isolation (problems in one branch do not affect others)</li>
<li>Good for large networks with hierarchical structure</li>
<li>Centralized management</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If the root node or backbone fails, large sections go down</li>
<li>Complex cabling</li>
<li>Dependent on the backbone cable</li>
</ul>
<h4>Use Case</h4>
<p>Large corporate networks, university campuses, organizations with departments.</p>
<h3>6. Hybrid Topology</h3>
<p>A combination of two or more different topologies working together to form a single network.</p>
<h4>How it Works</h4>
<p>Different parts of the network use different topologies based on their specific needs. For example, a company might use star topology within each department and mesh topology to connect department switches together.</p>
<h4>Advantages</h4>
<ul>
<li>Flexible (choose the best topology for each section)</li>
<li>Scalable</li>
<li>Fault tolerant (failure in one segment does not affect others)</li>
<li>Can be optimized for performance and cost</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>Complex to design and manage</li>
<li>Expensive</li>
<li>Difficult to troubleshoot</li>
</ul>
<h4>Use Case</h4>
<p>Large enterprises, the Internet itself, organizations with diverse networking needs.</p>
</section>What does this section cover?
This section introduces topology as a concept (physical vs logical layout), then covers each of the six major topologies you need for your viva.
- Bus: single backbone cable, cheap but fragile.
- Star: central hub/switch, most common today.
- Ring: closed loop with token-passing, orderly but one failure breaks the chain.
- Mesh: every device connected to every other, highly reliable but expensive. Formula for links: N(N-1)/2.
- Tree: hierarchical star-bus hybrid, good for large organisations.
- Hybrid: mix of topologies based on needs, used by large enterprises and the Internet itself.
- Save networking.html.
You still need the comparison table and closing tags before the file will render correctly. The next chunk completes the page.
Add the topology comparison summary and close the page
A comparison table gives you a quick-reference view of all six topologies side by side. This is useful for last-minute review before your viva.
- In networking.html, place your cursor after the closing </section> tag of the Network Topology section you just pasted.
- Paste the following code to add the comparison table, close the main element, and finish the page:
<section id="topology-comparison">
<h2>Topology Comparison Summary</h2>
<table>
<thead>
<tr>
<th>Topology</th>
<th>Reliability</th>
<th>Cost</th>
<th>Best For</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bus</td>
<td>Low</td>
<td>Low</td>
<td>Small/temporary networks</td>
</tr>
<tr>
<td>Star</td>
<td>Medium</td>
<td>Medium</td>
<td>Offices, homes, schools</td>
</tr>
<tr>
<td>Ring</td>
<td>Low-Medium</td>
<td>Medium</td>
<td>Token-based LANs</td>
</tr>
<tr>
<td>Mesh</td>
<td>High</td>
<td>High</td>
<td>Critical systems, backbones</td>
</tr>
<tr>
<td>Tree</td>
<td>Medium</td>
<td>Medium</td>
<td>Large hierarchical networks</td>
</tr>
<tr>
<td>Hybrid</td>
<td>High</td>
<td>High</td>
<td>Enterprise, diverse needs</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p><a href="index.html">Back to Index</a> | <a href="addressing.html">Next: Internet Addressing</a></p>
</footer>
</body>
</html>What does this code do?
The comparison table uses <thead> and <tbody> to separate headers from data rows. Your styles.css already styles tables with dark header backgrounds and alternating row colours.
The footer provides navigation links back to the index and forward to the next topic page (Internet Addressing). This pattern will repeat on every topic page.
- Save networking.html.
- Right-click the file in IntelliJ and select Open In, then Browser, then Chrome.
- You should see a styled page with a header reading "Networking Fundamentals", followed by clearly formatted sections for Networks, Nodes, Network Types, all six topologies, and a comparison table with dark headers and alternating row colours.
Page looks unstyled or has broken layout?
- Make sure networking.html and styles.css are in the same folder. The <link rel="stylesheet" href="styles.css"> line relies on them being siblings.
- Check for unclosed tags. If a </section> or </ul> is missing, the browser may misinterpret the rest of the document.
- Verify the file ends with </body></html>. If the closing tags are missing, you may have pasted the final chunk in the wrong location.
Help me fix my networking.html page layout
✔️ Awesome, I've got everything!
Great. Double check you have saved your file before moving on.
ⓧ I'd like to double check the full code
Here is the complete networking.html file for comparison:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Networking Fundamentals - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Networking Fundamentals</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="what-is-network">
<h2>What is a Network?</h2>
<p>A network is a collection of two or more computers and devices that are connected together to share resources and communicate with each other. Networks allow devices to exchange data, share files, printers, and internet connections.</p>
<h3>Purpose of Networks</h3>
<ul>
<li><strong>Resource Sharing:</strong> Share hardware (printers, scanners) and software across devices</li>
<li><strong>Data Communication:</strong> Send and receive data between connected devices</li>
<li><strong>Centralized Management:</strong> Manage data and resources from a central location</li>
<li><strong>Cost Efficiency:</strong> Reduce costs by sharing resources instead of duplicating them</li>
</ul>
</section>
<section id="what-is-node">
<h2>What is a Node?</h2>
<p>A node is any device that is connected to a network and can send, receive, or forward data. Nodes are the endpoints or connection points within a network.</p>
<h3>Examples of Nodes</h3>
<ul>
<li>Computers (desktops, laptops)</li>
<li>Servers</li>
<li>Printers</li>
<li>Routers and Switches</li>
<li>Smartphones and Tablets</li>
<li>IoT devices (smart home devices)</li>
</ul>
</section>
<section id="network-types">
<h2>Network Types</h2>
<h3>PAN (Personal Area Network)</h3>
<p>A network for personal devices within a very short range, typically within 10 meters.</p>
<ul>
<li><strong>Range:</strong> Up to 10 meters</li>
<li><strong>Example:</strong> Bluetooth connection between phone and headphones, USB connection between computer and printer</li>
<li><strong>Use Case:</strong> Personal device connectivity</li>
</ul>
<h3>LAN (Local Area Network)</h3>
<p>A network that covers a small geographic area such as a home, office, or building.</p>
<ul>
<li><strong>Range:</strong> Up to a few kilometers (typically within a building or campus)</li>
<li><strong>Example:</strong> Office network, school computer lab, home Wi-Fi network</li>
<li><strong>Technologies:</strong> Ethernet, Wi-Fi</li>
<li><strong>Speed:</strong> High speed (100 Mbps to 10 Gbps)</li>
</ul>
<h3>MAN (Metropolitan Area Network)</h3>
<p>A network that covers a city or large campus. Larger than a LAN but smaller than a WAN.</p>
<ul>
<li><strong>Range:</strong> Up to 50 kilometers (a city or metropolitan area)</li>
<li><strong>Example:</strong> Cable TV network across a city, university campus network connecting multiple buildings</li>
<li><strong>Use Case:</strong> Connecting multiple LANs within a city</li>
</ul>
<h3>WAN (Wide Area Network)</h3>
<p>A network that covers a large geographic area, often a country or the entire world.</p>
<ul>
<li><strong>Range:</strong> Unlimited (can span countries and continents)</li>
<li><strong>Example:</strong> The Internet is the largest WAN</li>
<li><strong>Technologies:</strong> Fiber optics, satellites, leased telephone lines</li>
<li><strong>Speed:</strong> Generally lower than LAN due to distance</li>
</ul>
</section>
<section id="network-topology">
<h2>Network Topology</h2>
<p>Network topology refers to the arrangement or layout of devices (nodes) and connections (links) in a network. It describes how devices are connected and how data flows between them. There are two types:</p>
<ul>
<li><strong>Physical Topology:</strong> The actual physical layout of cables and devices</li>
<li><strong>Logical Topology:</strong> How data flows within the network regardless of physical layout</li>
</ul>
<h3>1. Bus Topology</h3>
<p>All devices are connected to a single central cable called the bus or backbone. Data travels in both directions along the cable.</p>
<h4>How it Works</h4>
<p>A single cable runs through the network. Each device connects to this cable via a tap or drop line. Data sent by any device travels along the bus in both directions until it reaches the intended recipient. Terminators at both ends of the cable prevent signal reflection.</p>
<h4>Advantages</h4>
<ul>
<li>Simple and easy to install</li>
<li>Low cost (uses less cable)</li>
<li>Good for small or temporary networks</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If the main cable fails, the entire network goes down</li>
<li>Difficult to troubleshoot</li>
<li>Performance degrades as more devices are added (collisions)</li>
<li>Limited cable length and number of devices</li>
</ul>
<h4>Use Case</h4>
<p>Small networks, temporary setups, legacy systems.</p>
<h3>2. Star Topology</h3>
<p>All devices are connected to a central hub or switch. All data passes through the central device.</p>
<h4>How it Works</h4>
<p>Each device has a dedicated point-to-point connection to the central hub/switch. When a device wants to communicate, it sends data to the hub, which then forwards it to the destination device. The hub acts as a traffic controller.</p>
<h4>Advantages</h4>
<ul>
<li>If one device fails, the rest of the network is unaffected</li>
<li>Easy to add or remove devices</li>
<li>Easy to troubleshoot (isolate faults)</li>
<li>High performance with intelligent switches</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If the central hub fails, the entire network goes down</li>
<li>Requires more cable than bus topology</li>
<li>Cost of the central device (hub/switch)</li>
</ul>
<h4>Use Case</h4>
<p>Home networks, offices, schools. The most commonly used topology today.</p>
<h3>3. Ring Topology</h3>
<p>Each device is connected to exactly two other devices, forming a closed loop or ring. Data travels in one direction (or both in dual ring).</p>
<h4>How it Works</h4>
<p>Data travels around the ring in one direction, passing through each node until it reaches its destination. Each node acts as a repeater, boosting the signal before passing it along. Token-passing is often used to control access.</p>
<h4>Advantages</h4>
<ul>
<li>No data collisions (orderly data transmission)</li>
<li>Equal access for all devices</li>
<li>Performs better than bus under heavy load</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If one device or connection fails, the entire ring is disrupted</li>
<li>Difficult to add or remove devices (must break the ring)</li>
<li>Slower than star (data must pass through multiple nodes)</li>
</ul>
<h4>Use Case</h4>
<p>Some LANs, fiber optic networks (FDDI), older IBM Token Ring networks.</p>
<h3>4. Mesh Topology</h3>
<p>Every device is connected to every other device in the network. Provides multiple paths for data to travel.</p>
<h4>How it Works</h4>
<p>In a full mesh, each device has a dedicated point-to-point link to every other device. In a partial mesh, only some devices are fully connected. Data can take multiple paths to reach its destination, providing redundancy.</p>
<p>Formula: For N devices, links needed = N(N-1)/2</p>
<h4>Advantages</h4>
<ul>
<li>Highly reliable (if one link fails, data takes an alternative path)</li>
<li>No traffic problems (dedicated links)</li>
<li>Secure (dedicated connections)</li>
<li>Easy fault detection</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>Very expensive (lots of cables and ports)</li>
<li>Complex installation and maintenance</li>
<li>Impractical for large networks</li>
</ul>
<h4>Use Case</h4>
<p>Critical systems (military, data centers), internet backbone, where high reliability is essential.</p>
<h3>5. Tree Topology</h3>
<p>A hierarchical topology that combines characteristics of star and bus. Multiple star networks are connected to a bus backbone.</p>
<h4>How it Works</h4>
<p>A root node connects to one or more intermediate nodes (hubs/switches), which in turn connect to end devices in a star pattern. The structure resembles a tree with branches. Data flows up and down through the hierarchy.</p>
<h4>Advantages</h4>
<ul>
<li>Scalable (easy to add new branches)</li>
<li>Fault isolation (problems in one branch do not affect others)</li>
<li>Good for large networks with hierarchical structure</li>
<li>Centralized management</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>If the root node or backbone fails, large sections go down</li>
<li>Complex cabling</li>
<li>Dependent on the backbone cable</li>
</ul>
<h4>Use Case</h4>
<p>Large corporate networks, university campuses, organizations with departments.</p>
<h3>6. Hybrid Topology</h3>
<p>A combination of two or more different topologies working together to form a single network.</p>
<h4>How it Works</h4>
<p>Different parts of the network use different topologies based on their specific needs. For example, a company might use star topology within each department and mesh topology to connect department switches together.</p>
<h4>Advantages</h4>
<ul>
<li>Flexible (choose the best topology for each section)</li>
<li>Scalable</li>
<li>Fault tolerant (failure in one segment does not affect others)</li>
<li>Can be optimized for performance and cost</li>
</ul>
<h4>Disadvantages</h4>
<ul>
<li>Complex to design and manage</li>
<li>Expensive</li>
<li>Difficult to troubleshoot</li>
</ul>
<h4>Use Case</h4>
<p>Large enterprises, the Internet itself, organizations with diverse networking needs.</p>
</section>
<section id="topology-comparison">
<h2>Topology Comparison Summary</h2>
<table>
<thead>
<tr>
<th>Topology</th>
<th>Reliability</th>
<th>Cost</th>
<th>Best For</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bus</td>
<td>Low</td>
<td>Low</td>
<td>Small/temporary networks</td>
</tr>
<tr>
<td>Star</td>
<td>Medium</td>
<td>Medium</td>
<td>Offices, homes, schools</td>
</tr>
<tr>
<td>Ring</td>
<td>Low-Medium</td>
<td>Medium</td>
<td>Token-based LANs</td>
</tr>
<tr>
<td>Mesh</td>
<td>High</td>
<td>High</td>
<td>Critical systems, backbones</td>
</tr>
<tr>
<td>Tree</td>
<td>Medium</td>
<td>Medium</td>
<td>Large hierarchical networks</td>
</tr>
<tr>
<td>Hybrid</td>
<td>High</td>
<td>High</td>
<td>Enterprise, diverse needs</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer>
<p><a href="index.html">Back to Index</a> | <a href="addressing.html">Next: Internet Addressing</a></p>
</footer>
</body>
</html>Your first topic page is complete. Next up, you will build the Internet Addressing and DNS page covering IP addresses, URIs, URLs, and how domain names get resolved.
Build the Internet Addressing and DNS Page
Your networking page covered how devices connect to each other. The next question is: how do devices actually find each other on the internet?
In this step, you will build the Internet Addressing and DNS page. This page covers IP addresses, the URI/URL/URN naming system, URL structure, and how DNS translates domain names into IP addresses.
In this step, get ready to:
- Create the IP addresses section covering IPv4, IPv6, public vs private, and static vs dynamic.
- Add the URI, URL, and URN definitions with the URL format breakdown.
- Add the DNS section with resolution steps and record types.
Create addressing.html with IP address and URI/URL/URN content
Every device on the internet needs a unique address so that data can be routed to the right destination. This section covers the different addressing schemes and naming conventions that make internet communication possible.
- In IntelliJ IDEA, right-click on your web-tech-viva-guide project folder.
- Select New, then HTML File.
- Name the file addressing and press Enter.
- Replace any generated content with the following code to set up the page structure and IP Address section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet Addressing and DNS - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Internet Addressing and DNS</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="ip-address">
<h2>IP Address</h2>
<p>An IP (Internet Protocol) address is a unique numerical label assigned to each device connected to a network that uses the Internet Protocol for communication. It serves two purposes: identifying the host/device and providing the location of the device in the network.</p>
<h3>IPv4 (Internet Protocol Version 4)</h3>
<ul>
<li><strong>Format:</strong> Four numbers separated by dots (dotted decimal notation)</li>
<li><strong>Range:</strong> Each number is 0 to 255</li>
<li><strong>Size:</strong> 32-bit address</li>
<li><strong>Example:</strong> 192.168.1.1</li>
<li><strong>Total addresses:</strong> Approximately 4.3 billion</li>
</ul>
<h3>IPv6 (Internet Protocol Version 6)</h3>
<ul>
<li><strong>Format:</strong> Eight groups of four hexadecimal digits separated by colons</li>
<li><strong>Size:</strong> 128-bit address</li>
<li><strong>Example:</strong> 2001:0db8:85a3:0000:0000:8a2e:0370:7334</li>
<li><strong>Total addresses:</strong> Approximately 340 undecillion (virtually unlimited)</li>
<li><strong>Why needed:</strong> IPv4 addresses have been exhausted due to the growth of internet-connected devices</li>
</ul>
<h3>Public vs Private IP Addresses</h3>
<ul>
<li><strong>Public IP:</strong> Unique across the entire internet, assigned by ISP, used to communicate on the internet</li>
<li><strong>Private IP:</strong> Used within a local network, not routable on the internet (e.g., 192.168.x.x, 10.x.x.x, 172.16.x.x to 172.31.x.x)</li>
</ul>
<h3>Static vs Dynamic IP Addresses</h3>
<ul>
<li><strong>Static IP:</strong> Manually assigned, does not change. Used for servers and devices that need a permanent address</li>
<li><strong>Dynamic IP:</strong> Automatically assigned by DHCP (Dynamic Host Configuration Protocol), can change over time. Used for most consumer devices</li>
</ul>
</section>
</main>
</body>
</html>What does this code do?
This sets up your addressing page with the same boilerplate structure as your networking page. The header links back to your index for easy navigation.
The IP Address section covers IPv4 (the 32-bit format you see every day, like 192.168.1.1) and IPv6 (the newer 128-bit format needed because we ran out of IPv4 addresses). It also distinguishes public vs private and static vs dynamic addresses.
- Now add the URI, URL, and URN section. Find the closing </section> tag of the IP Address section (just before </main>), and paste the following code below it:
<section id="uri-url-urn">
<h2>URI, URL, and URN</h2>
<h3>URI (Uniform Resource Identifier)</h3>
<p>A URI is a string of characters that identifies a resource on the internet. It is the most general term and encompasses both URLs and URNs.</p>
<p><strong>Structure:</strong> <code>scheme:[//authority]path[?query][#fragment]</code></p>
<h3>URL (Uniform Resource Locator)</h3>
<p>A URL is a subset of URI that identifies a resource AND provides the means to locate it by describing its access mechanism (network location).</p>
<h3>URN (Uniform Resource Name)</h3>
<p>A URN is a subset of URI that identifies a resource by name in a particular namespace. It does NOT provide information about how to locate the resource.</p>
</section>What is the difference between URI, URL, and URN?
URI is the umbrella term. All URLs are URIs, and all URNs are URIs, but not all URIs are URLs or URNs.
A URL tells you WHERE a resource is (its location). A URN tells you WHAT a resource is called (its name). Together they are the two main flavours of URI.
- Save addressing.html.
- Open addressing.html in Chrome by right-clicking the file in IntelliJ and selecting Open In, then Browser, then Chrome.
- You should see the page title "Internet Addressing and DNS" with the IP Address section showing all four subsections (IPv4, IPv6, Public vs Private, Static vs Dynamic) and the URI/URL/URN definitions below.
Page looks unstyled or broken?
Make sure your styles.css file is in the same folder as addressing.html. The <link rel="stylesheet" href="styles.css"> tag uses a relative path, so both files must be at the same level.
Also check that you have no unclosed tags. Look for any red highlighting in IntelliJ that indicates a syntax error.
Help me fix my addressing.html page styling
Add the URL format breakdown
A viva question might ask you to label each part of a URL. This section gives you a clear visual reference showing what each component means.
- In addressing.html, find the closing </section> tag of the URI/URL/URN section (the one with id="uri-url-urn").
- Paste the following URL Format section below it:
<section id="url-format">
<h2>URL Format</h2>
<p>A URL is composed of several components:</p>
<pre>scheme://hostname:port/path?query#fragment
Example:
https://www.example.com:443/products/shoes?color=red&size=10#reviews</pre>
<h3>Components Explained</h3>
<ul>
<li><strong>Scheme:</strong> The protocol used to access the resource (http, https, ftp, mailto). Followed by <code>://</code></li>
<li><strong>Hostname (Authority):</strong> The domain name or IP address of the server (www.example.com)</li>
<li><strong>Port:</strong> The network port on the server (optional, defaults: HTTP=80, HTTPS=443)</li>
<li><strong>Path:</strong> The specific resource location on the server (/products/shoes). Starts with a forward slash</li>
<li><strong>Query String:</strong> Parameters passed to the server, starting with <code>?</code> and separated by <code>&</code> (color=red&size=10)</li>
<li><strong>Fragment:</strong> An anchor to a specific section within the page, starting with <code>#</code> (reviews). Not sent to the server</li>
</ul>
<div class="note">
<p><strong>Note:</strong> The scheme and hostname are NOT case-sensitive. The path and query string ARE case-sensitive.</p>
</div>
</section>What does this code do?
The <pre> block shows a formatted URL example with all its parts visible. The Components Explained list defines each piece: scheme, hostname, port, path, query string, and fragment.
The & in the HTML is the entity for the ampersand character (&). You must use this entity inside HTML content because a raw & has special meaning in HTML.
- Save addressing.html and refresh your browser.
- You should see a dark-background code block displaying the URL format, followed by a bulleted list explaining each component and a yellow note box about case sensitivity.
Seeing raw HTML entities in the browser?
If you see literal & text instead of & symbols in your rendered page, check that your <pre> block uses &amp; for ampersands. Inside a <pre> tag, HTML entities are still processed.
Help me fix HTML entities in my URL format section
Add the DNS section
DNS is one of the most important systems on the internet. It translates the domain names you type (like google.com) into the IP addresses that computers use to route traffic.
- In addressing.html, find the closing </section> tag of the URL Format section.
- Paste the following DNS section below it:
<section id="dns">
<h2>DNS (Domain Name System)</h2>
<p>DNS is a hierarchical, distributed naming system that translates human-readable domain names (like www.google.com) into IP addresses (like 142.250.80.4) that computers use to identify each other on the network.</p>
<h3>Why DNS Exists</h3>
<p>Humans find it easier to remember names (www.google.com) than numbers (142.250.80.4). DNS acts like a phone book for the internet, looking up the IP address associated with a domain name.</p>
<h3>How DNS Resolution Works (Step by Step)</h3>
<ol>
<li><strong>Browser Cache:</strong> Browser checks if it has recently looked up this domain</li>
<li><strong>Operating System Cache:</strong> OS checks its own DNS cache</li>
<li><strong>Recursive Resolver:</strong> Request goes to ISP's DNS resolver</li>
<li><strong>Root Name Server:</strong> Resolver asks one of 13 root servers, which directs to the correct TLD server</li>
<li><strong>TLD (Top-Level Domain) Server:</strong> The .com, .org, .net server directs to the authoritative server for the specific domain</li>
<li><strong>Authoritative Name Server:</strong> The server that holds the actual DNS record returns the IP address</li>
<li><strong>Response:</strong> The IP address is returned to the browser, which can now connect to the web server</li>
</ol>
<h3>Common DNS Record Types</h3>
<table>
<thead>
<tr>
<th>Record Type</th>
<th>Purpose</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>Maps domain to IPv4 address</td>
<td>example.com → 93.184.216.34</td>
</tr>
<tr>
<td>AAAA</td>
<td>Maps domain to IPv6 address</td>
<td>example.com → 2606:2800:220:1:...</td>
</tr>
<tr>
<td>CNAME</td>
<td>Alias for another domain</td>
<td>www.example.com → example.com</td>
</tr>
<tr>
<td>MX</td>
<td>Mail server for the domain</td>
<td>example.com → mail.example.com</td>
</tr>
<tr>
<td>NS</td>
<td>Name server for the domain</td>
<td>example.com → ns1.example.com</td>
</tr>
</tbody>
</table>
<h3>DNS History</h3>
<p>Before DNS was invented in 1983 by Paul Mockapetris (RFC 882/883), all hostname-to-IP mappings were maintained in a single file called HOSTS.TXT, managed by the Stanford Research Institute. As the internet grew, this approach became unmanageable, leading to the creation of the distributed DNS system we use today.</p>
</section>What does this code do?
The DNS section starts with why DNS exists (translating names to numbers), then walks through the full 7-step resolution process from browser cache all the way to the authoritative name server.
The DNS record types table covers the five most common types: A (IPv4), AAAA (IPv6), CNAME (aliases), MX (mail), and NS (name servers). The history note about Paul Mockapetris and the old HOSTS.TXT file is useful context for a viva answer about why DNS was invented.
- Now close the page with the footer and closing tags. Find the </main> tag at the bottom of your file and paste the following below it (replacing the existing </body> and </html> tags):
<footer>
<p><a href="networking.html">Previous: Networking</a> | <a href="index.html">Index</a> | <a href="protocols.html">Next: Protocols</a></p>
</footer>
</body>
</html>What does this code do?
The footer provides navigation links to the previous page (Networking), the index, and the next page (Protocols). This pattern keeps your study guide easy to navigate without going back to the index every time.
- Save addressing.html and refresh your browser.
- Scroll down to the DNS section. You should see the ordered list of resolution steps, the DNS record types table with dark header row, and the footer with navigation links.
- Click the Back to Index link in the header to confirm it navigates back to your index.html page.
- On the index page, click the Internet Addressing and DNS link to confirm it navigates to your new page.
Navigation links not working?
Check that your file is saved as addressing.html (not addressing.html.html or similar). The href values in your index must match the exact filename.
Also verify all your HTML files are in the same web-tech-viva-guide folder. Relative links only work when the files are at the same directory level.
Help me debug broken navigation links between my HTML pages
✔️ Awesome, I've got everything!
Great. Double check you have saved your file before moving on.
ⓧ I'd like to double check the full code
Here is the complete addressing.html file. Compare it with yours and fix any differences:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet Addressing and DNS - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Internet Addressing and DNS</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="ip-address">
<h2>IP Address</h2>
<p>An IP (Internet Protocol) address is a unique numerical label assigned to each device connected to a network that uses the Internet Protocol for communication. It serves two purposes: identifying the host/device and providing the location of the device in the network.</p>
<h3>IPv4 (Internet Protocol Version 4)</h3>
<ul>
<li><strong>Format:</strong> Four numbers separated by dots (dotted decimal notation)</li>
<li><strong>Range:</strong> Each number is 0 to 255</li>
<li><strong>Size:</strong> 32-bit address</li>
<li><strong>Example:</strong> 192.168.1.1</li>
<li><strong>Total addresses:</strong> Approximately 4.3 billion</li>
</ul>
<h3>IPv6 (Internet Protocol Version 6)</h3>
<ul>
<li><strong>Format:</strong> Eight groups of four hexadecimal digits separated by colons</li>
<li><strong>Size:</strong> 128-bit address</li>
<li><strong>Example:</strong> 2001:0db8:85a3:0000:0000:8a2e:0370:7334</li>
<li><strong>Total addresses:</strong> Approximately 340 undecillion (virtually unlimited)</li>
<li><strong>Why needed:</strong> IPv4 addresses have been exhausted due to the growth of internet-connected devices</li>
</ul>
<h3>Public vs Private IP Addresses</h3>
<ul>
<li><strong>Public IP:</strong> Unique across the entire internet, assigned by ISP, used to communicate on the internet</li>
<li><strong>Private IP:</strong> Used within a local network, not routable on the internet (e.g., 192.168.x.x, 10.x.x.x, 172.16.x.x to 172.31.x.x)</li>
</ul>
<h3>Static vs Dynamic IP Addresses</h3>
<ul>
<li><strong>Static IP:</strong> Manually assigned, does not change. Used for servers and devices that need a permanent address</li>
<li><strong>Dynamic IP:</strong> Automatically assigned by DHCP (Dynamic Host Configuration Protocol), can change over time. Used for most consumer devices</li>
</ul>
</section>
<section id="uri-url-urn">
<h2>URI, URL, and URN</h2>
<h3>URI (Uniform Resource Identifier)</h3>
<p>A URI is a string of characters that identifies a resource on the internet. It is the most general term and encompasses both URLs and URNs.</p>
<p><strong>Structure:</strong> <code>scheme:[//authority]path[?query][#fragment]</code></p>
<h3>URL (Uniform Resource Locator)</h3>
<p>A URL is a subset of URI that identifies a resource AND provides the means to locate it by describing its access mechanism (network location).</p>
<h3>URN (Uniform Resource Name)</h3>
<p>A URN is a subset of URI that identifies a resource by name in a particular namespace. It does NOT provide information about how to locate the resource.</p>
</section>
<section id="url-format">
<h2>URL Format</h2>
<p>A URL is composed of several components:</p>
<pre>scheme://hostname:port/path?query#fragment
Example:
https://www.example.com:443/products/shoes?color=red&size=10#reviews</pre>
<h3>Components Explained</h3>
<ul>
<li><strong>Scheme:</strong> The protocol used to access the resource (http, https, ftp, mailto). Followed by <code>://</code></li>
<li><strong>Hostname (Authority):</strong> The domain name or IP address of the server (www.example.com)</li>
<li><strong>Port:</strong> The network port on the server (optional, defaults: HTTP=80, HTTPS=443)</li>
<li><strong>Path:</strong> The specific resource location on the server (/products/shoes). Starts with a forward slash</li>
<li><strong>Query String:</strong> Parameters passed to the server, starting with <code>?</code> and separated by <code>&</code> (color=red&size=10)</li>
<li><strong>Fragment:</strong> An anchor to a specific section within the page, starting with <code>#</code> (reviews). Not sent to the server</li>
</ul>
<div class="note">
<p><strong>Note:</strong> The scheme and hostname are NOT case-sensitive. The path and query string ARE case-sensitive.</p>
</div>
</section>
<section id="dns">
<h2>DNS (Domain Name System)</h2>
<p>DNS is a hierarchical, distributed naming system that translates human-readable domain names (like www.google.com) into IP addresses (like 142.250.80.4) that computers use to identify each other on the network.</p>
<h3>Why DNS Exists</h3>
<p>Humans find it easier to remember names (www.google.com) than numbers (142.250.80.4). DNS acts like a phone book for the internet, looking up the IP address associated with a domain name.</p>
<h3>How DNS Resolution Works (Step by Step)</h3>
<ol>
<li><strong>Browser Cache:</strong> Browser checks if it has recently looked up this domain</li>
<li><strong>Operating System Cache:</strong> OS checks its own DNS cache</li>
<li><strong>Recursive Resolver:</strong> Request goes to ISP's DNS resolver</li>
<li><strong>Root Name Server:</strong> Resolver asks one of 13 root servers, which directs to the correct TLD server</li>
<li><strong>TLD (Top-Level Domain) Server:</strong> The .com, .org, .net server directs to the authoritative server for the specific domain</li>
<li><strong>Authoritative Name Server:</strong> The server that holds the actual DNS record returns the IP address</li>
<li><strong>Response:</strong> The IP address is returned to the browser, which can now connect to the web server</li>
</ol>
<h3>Common DNS Record Types</h3>
<table>
<thead>
<tr>
<th>Record Type</th>
<th>Purpose</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>Maps domain to IPv4 address</td>
<td>example.com → 93.184.216.34</td>
</tr>
<tr>
<td>AAAA</td>
<td>Maps domain to IPv6 address</td>
<td>example.com → 2606:2800:220:1:...</td>
</tr>
<tr>
<td>CNAME</td>
<td>Alias for another domain</td>
<td>www.example.com → example.com</td>
</tr>
<tr>
<td>MX</td>
<td>Mail server for the domain</td>
<td>example.com → mail.example.com</td>
</tr>
<tr>
<td>NS</td>
<td>Name server for the domain</td>
<td>example.com → ns1.example.com</td>
</tr>
</tbody>
</table>
<h3>DNS History</h3>
<p>Before DNS was invented in 1983 by Paul Mockapetris (RFC 882/883), all hostname-to-IP mappings were maintained in a single file called HOSTS.TXT, managed by the Stanford Research Institute. As the internet grew, this approach became unmanageable, leading to the creation of the distributed DNS system we use today.</p>
</section>
</main>
<footer>
<p><a href="networking.html">Previous: Networking</a> | <a href="index.html">Index</a> | <a href="protocols.html">Next: Protocols</a></p>
</footer>
</body>
</html>Your addressing page is complete. You now have a thorough reference covering IP addresses, the URI/URL/URN naming system, URL structure, and DNS resolution. Next up, you will build the Internet History and Protocols page covering ARPANET, TCP/IP, and HTTP.
Build the Internet History and Protocols Page
Your addressing page covers how devices find each other on the internet. Now it is time to explore the story behind the internet itself.
In this step, you will build the protocols page covering the history of the internet from ARPANET to the modern web, plus the TCP/IP protocol suite and HTTP. These are fundamental topics your examiner will expect you to explain clearly.
In this step, get ready to:
- Create the protocols page with the Internet definition and full history timeline.
- Add the TCP/IP section explaining both protocols and the four-layer model.
- Add the HTTP/HTTPS section with methods, status codes, and the WWW definition.
Create protocols.html with the Internet definition and history
The protocols page starts with what the Internet actually is, then walks through the complete timeline from 1957 to 1995. This historical context helps you explain to your examiner how each technology built on the last.
- In IntelliJ, right-click your web-tech-viva-guide project folder and select New, then HTML File.
- Name the file protocols and press Enter.
- Replace any default content with the following code, which sets up the page structure and covers the Internet definition and history timeline:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet History and Protocols - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Internet History and Protocols</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="what-is-internet">
<h2>What is the Internet?</h2>
<p>The Internet is a global network of interconnected computer networks that use the TCP/IP protocol suite to communicate. It is a "network of networks" that connects billions of devices worldwide, allowing them to exchange data and access shared resources.</p>
<p>The Internet is NOT the same as the World Wide Web. The Internet is the infrastructure (the physical network), while the Web is a service that runs on top of the Internet.</p>
</section>
<section id="internet-history">
<h2>History of the Internet</h2>
<h3>1957 - The Beginning</h3>
<p>The Soviet Union launches Sputnik. In response, the US Department of Defense creates ARPA (Advanced Research Projects Agency) to advance military-relevant science and technology.</p>
<h3>1960s - Foundational Ideas</h3>
<ul>
<li><strong>1962:</strong> J.C.R. Licklider at MIT proposes the "Galactic Network" concept of interconnected computers</li>
<li><strong>1964:</strong> Paul Baran proposes distributed, packet-switched networks for military communications</li>
<li><strong>1966:</strong> Lawrence Roberts begins planning ARPANET</li>
<li><strong>1968:</strong> ARPA contracts BBN Technologies to build the first routers (Interface Message Processors/IMPs)</li>
</ul>
<h3>1969 - ARPANET Begins</h3>
<p>ARPANET goes live with 4 initial nodes connecting UCLA, Stanford Research Institute, UC Santa Barbara, and University of Utah. On October 29, 1969, the first computer-to-computer message ("LO" - an attempt to type "LOGIN" that crashed) was sent from UCLA to Stanford.</p>
<h3>1970s - Growth and TCP/IP</h3>
<ul>
<li><strong>1971:</strong> ARPANET grows to 15 nodes. Email is invented by Ray Tomlinson</li>
<li><strong>1972:</strong> ARPANET demonstrated publicly in Washington D.C.</li>
<li><strong>1974:</strong> Vint Cerf and Bob Kahn publish the design for TCP (Transmission Control Program)</li>
<li><strong>1978:</strong> TCP is split into TCP and IP (two separate protocols)</li>
</ul>
<h3>1980s - Standardization</h3>
<ul>
<li><strong>1983:</strong> ARPANET switches from NCP to TCP/IP (January 1, known as "Flag Day"). DNS is invented by Paul Mockapetris</li>
<li><strong>1985:</strong> NSF creates NSFNET to connect supercomputing centers</li>
<li><strong>1989:</strong> Tim Berners-Lee at CERN proposes the World Wide Web</li>
</ul>
<h3>1990s - The Web Goes Public</h3>
<ul>
<li><strong>1990:</strong> ARPANET is decommissioned. Tim Berners-Lee creates the first web browser and web server</li>
<li><strong>1991:</strong> The World Wide Web is made available to the public</li>
<li><strong>1993:</strong> Mosaic browser is released, making the web accessible to non-technical users</li>
<li><strong>1995:</strong> NSFNET is decommissioned. The commercial internet begins. Amazon and eBay are founded</li>
</ul>
</section>What does this code do?
The first section establishes a critical distinction for your viva: the Internet is the physical infrastructure (cables, routers, protocols), while the World Wide Web is just one service that runs on top of it.
The history timeline covers every major milestone from ARPANET's 4 nodes in 1969 through to the commercial internet in 1995. Key names to remember: Vint Cerf and Bob Kahn (TCP/IP), Paul Mockapetris (DNS), and Tim Berners-Lee (WWW).
- Save protocols.html with Cmd+S (macOS) or Ctrl+S (Windows).
Don't see protocols.html in your project?
Make sure you created the file directly inside the web-tech-viva-guide folder, at the same level as index.html. If it ended up inside a subfolder, drag it to the correct location in the project panel.
Help me troubleshoot my protocols.html file not appearing in my IntelliJ project
Add the TCP/IP section
TCP and IP work together but handle different responsibilities. Your examiner may ask you to explain what each protocol does individually and how the four-layer model organizes network communication.
- In protocols.html, place your cursor after the closing </section> tag of the internet-history section.
- Add the TCP/IP section by pasting the following code below it:
<section id="tcp-ip">
<h2>TCP/IP (Transmission Control Protocol / Internet Protocol)</h2>
<p>TCP/IP is the fundamental communication protocol suite of the Internet. It defines how data should be packetized, addressed, transmitted, routed, and received.</p>
<h3>TCP (Transmission Control Protocol)</h3>
<p>TCP operates at the Transport layer. It is responsible for:</p>
<ul>
<li><strong>Breaking data into packets:</strong> Divides large data into smaller segments</li>
<li><strong>Reliable delivery:</strong> Ensures all packets arrive correctly and in order</li>
<li><strong>Error checking:</strong> Detects corrupted or lost packets and requests retransmission</li>
<li><strong>Flow control:</strong> Prevents sender from overwhelming the receiver</li>
<li><strong>Connection-oriented:</strong> Establishes a connection before data transfer (three-way handshake: SYN, SYN-ACK, ACK)</li>
</ul>
<h3>IP (Internet Protocol)</h3>
<p>IP operates at the Internet (Network) layer. It is responsible for:</p>
<ul>
<li><strong>Addressing:</strong> Assigns IP addresses to identify source and destination</li>
<li><strong>Routing:</strong> Determines the best path for packets to travel across networks</li>
<li><strong>Connectionless:</strong> Each packet is treated independently (may take different routes)</li>
<li><strong>Best effort delivery:</strong> Does not guarantee delivery (TCP handles reliability)</li>
</ul>
<h3>TCP/IP Four-Layer Model</h3>
<table>
<thead>
<tr>
<th>Layer</th>
<th>Function</th>
<th>Protocols</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>User-facing services and applications</td>
<td>HTTP, HTTPS, FTP, SMTP, DNS</td>
</tr>
<tr>
<td>Transport</td>
<td>End-to-end communication and reliability</td>
<td>TCP, UDP</td>
</tr>
<tr>
<td>Internet</td>
<td>Addressing and routing packets</td>
<td>IP, ICMP</td>
</tr>
<tr>
<td>Link (Network Access)</td>
<td>Physical transmission of data</td>
<td>Ethernet, Wi-Fi, ARP</td>
</tr>
</tbody>
</table>
</section>What does this code do?
This section separates TCP and IP into their distinct roles. TCP is connection-oriented and guarantees delivery using a three-way handshake (SYN, SYN-ACK, ACK). IP is connectionless and only handles addressing and routing.
The four-layer model table gives you a quick reference for which protocols belong to which layer. This is a common viva question.
- Save the file.
Add the HTTP, HTTPS, and WWW sections
HTTP is the application-layer protocol that makes the web work. Your examiner will likely ask about request methods, status codes, and the difference between HTTP and HTTPS.
- Place your cursor after the closing </section> tag of the tcp-ip section.
- Add the HTTP, HTTPS, WWW sections, and the closing tags for the page by pasting the following code:
<section id="http">
<h2>HTTP (HyperText Transfer Protocol)</h2>
<p>HTTP is an application-layer protocol for transmitting hypermedia documents (like HTML). It follows a client-server, request-response model and is the foundation of data communication on the World Wide Web.</p>
<h3>How HTTP Works (Request-Response Cycle)</h3>
<ol>
<li>User enters a URL in the browser (client)</li>
<li>Browser builds an HTTP Request and sends it to the server</li>
<li>Request travels through the internet to the web server</li>
<li>Server processes the request and generates an HTTP Response</li>
<li>Response travels back to the client</li>
<li>Browser reads and renders the response content</li>
</ol>
<h3>HTTP Request Structure</h3>
<pre>GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Chrome/120
Accept: text/html</pre>
<p>Components: Request Line (method + path + version), Headers, Empty line, Optional Body</p>
<h3>HTTP Response Structure</h3>
<pre>HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<html>...</html></pre>
<p>Components: Status Line (version + status code + reason), Headers, Empty line, Body</p>
<h3>HTTP Methods</h3>
<table>
<thead>
<tr>
<th>Method</th>
<th>Purpose</th>
<th>Safe</th>
<th>Idempotent</th>
</tr>
</thead>
<tbody>
<tr>
<td>GET</td>
<td>Retrieve a resource (read data)</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>POST</td>
<td>Submit data to create a resource</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>PUT</td>
<td>Replace an entire resource</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>DELETE</td>
<td>Remove a resource</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>PATCH</td>
<td>Partially update a resource</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>HEAD</td>
<td>Same as GET but returns only headers</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>OPTIONS</td>
<td>Describe communication options</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
<h3>HTTP Status Codes</h3>
<table>
<thead>
<tr>
<th>Range</th>
<th>Category</th>
<th>Key Examples</th>
</tr>
</thead>
<tbody>
<tr>
<td>1xx</td>
<td>Informational</td>
<td>100 Continue, 101 Switching Protocols</td>
</tr>
<tr>
<td>2xx</td>
<td>Success</td>
<td>200 OK, 201 Created, 204 No Content</td>
</tr>
<tr>
<td>3xx</td>
<td>Redirection</td>
<td>301 Moved Permanently, 302 Found, 304 Not Modified</td>
</tr>
<tr>
<td>4xx</td>
<td>Client Error</td>
<td>400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found</td>
</tr>
<tr>
<td>5xx</td>
<td>Server Error</td>
<td>500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable</td>
</tr>
</tbody>
</table>
</section>
<section id="https">
<h2>HTTPS (HyperText Transfer Protocol Secure)</h2>
<p>HTTPS is the secure version of HTTP. It encrypts the communication between client and server using SSL/TLS (Secure Sockets Layer / Transport Layer Security).</p>
<h3>Differences Between HTTP and HTTPS</h3>
<table>
<thead>
<tr>
<th>Feature</th>
<th>HTTP</th>
<th>HTTPS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Security</td>
<td>No encryption (plain text)</td>
<td>Encrypted with SSL/TLS</td>
</tr>
<tr>
<td>Port</td>
<td>80</td>
<td>443</td>
</tr>
<tr>
<td>URL prefix</td>
<td>http://</td>
<td>https://</td>
</tr>
<tr>
<td>Certificate</td>
<td>Not required</td>
<td>Requires SSL certificate from Certificate Authority</td>
</tr>
<tr>
<td>Speed</td>
<td>Slightly faster</td>
<td>Slightly slower (encryption overhead)</td>
</tr>
<tr>
<td>SEO</td>
<td>Not preferred</td>
<td>Preferred by search engines</td>
</tr>
</tbody>
</table>
</section>
<section id="www">
<h2>World Wide Web (WWW)</h2>
<p>The World Wide Web is an information system of interlinked hypertext documents and resources, accessed via the Internet using web browsers. It was invented by Tim Berners-Lee at CERN in 1989.</p>
<h3>Key Components of the WWW</h3>
<ul>
<li><strong>HTML:</strong> The markup language for creating web pages</li>
<li><strong>HTTP/HTTPS:</strong> The protocol for transferring web resources</li>
<li><strong>URL:</strong> The addressing system for locating resources</li>
<li><strong>Web Browser:</strong> The client software for accessing web pages</li>
<li><strong>Web Server:</strong> The server software that serves web pages</li>
</ul>
<h3>Internet vs World Wide Web</h3>
<ul>
<li><strong>Internet:</strong> The global network infrastructure (hardware, cables, routers, protocols)</li>
<li><strong>WWW:</strong> A service that runs ON TOP of the Internet (one of many services, alongside email, FTP, etc.)</li>
</ul>
</section>
</main>
<footer>
<p><a href="addressing.html">Previous: Addressing</a> | <a href="index.html">Index</a> | <a href="html-foundations.html">Next: HTML Foundations</a></p>
</footer>
</body>
</html>What does this code do?
The HTTP section covers the full request-response cycle with example structures shown in <pre> tags. The methods table includes the Safe and Idempotent columns, which tell you whether a method changes server state and whether repeating it produces the same result.
The HTTPS comparison table highlights the key differences your examiner will ask about: port 80 vs 443, encryption with SSL/TLS, and the requirement for a certificate from a Certificate Authority.
The WWW section reinforces the Internet vs Web distinction one final time, listing the five components that make the web work together.
- Save protocols.html.
- Open the file in Chrome by right-clicking the file in IntelliJ, selecting Open In, then Browser, then Chrome.
- You should see the full page with a styled history timeline, the TCP/IP four-layer model table, HTTP methods and status codes tables, and the HTTPS comparison table all rendered with your existing CSS.
Page looks unstyled or tables are broken?
Check that your <link rel="stylesheet" href="styles.css"> line is inside the <head> section. Also confirm that styles.css is in the same folder as protocols.html.
If tables appear but have no borders or dark headers, the CSS file path may be incorrect. Look at the browser console (press F12) for a 404 error on the stylesheet.
Help me fix my protocols.html page styling
✔️ Awesome, I've got everything!
Great. Double check you have saved your file before moving on.
ⓧ I'd like to double check the full code
Here is the complete protocols.html file. Make sure yours matches exactly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internet History and Protocols - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Internet History and Protocols</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="what-is-internet">
<h2>What is the Internet?</h2>
<p>The Internet is a global network of interconnected computer networks that use the TCP/IP protocol suite to communicate. It is a "network of networks" that connects billions of devices worldwide, allowing them to exchange data and access shared resources.</p>
<p>The Internet is NOT the same as the World Wide Web. The Internet is the infrastructure (the physical network), while the Web is a service that runs on top of the Internet.</p>
</section>
<section id="internet-history">
<h2>History of the Internet</h2>
<h3>1957 - The Beginning</h3>
<p>The Soviet Union launches Sputnik. In response, the US Department of Defense creates ARPA (Advanced Research Projects Agency) to advance military-relevant science and technology.</p>
<h3>1960s - Foundational Ideas</h3>
<ul>
<li><strong>1962:</strong> J.C.R. Licklider at MIT proposes the "Galactic Network" concept of interconnected computers</li>
<li><strong>1964:</strong> Paul Baran proposes distributed, packet-switched networks for military communications</li>
<li><strong>1966:</strong> Lawrence Roberts begins planning ARPANET</li>
<li><strong>1968:</strong> ARPA contracts BBN Technologies to build the first routers (Interface Message Processors/IMPs)</li>
</ul>
<h3>1969 - ARPANET Begins</h3>
<p>ARPANET goes live with 4 initial nodes connecting UCLA, Stanford Research Institute, UC Santa Barbara, and University of Utah. On October 29, 1969, the first computer-to-computer message ("LO" - an attempt to type "LOGIN" that crashed) was sent from UCLA to Stanford.</p>
<h3>1970s - Growth and TCP/IP</h3>
<ul>
<li><strong>1971:</strong> ARPANET grows to 15 nodes. Email is invented by Ray Tomlinson</li>
<li><strong>1972:</strong> ARPANET demonstrated publicly in Washington D.C.</li>
<li><strong>1974:</strong> Vint Cerf and Bob Kahn publish the design for TCP (Transmission Control Program)</li>
<li><strong>1978:</strong> TCP is split into TCP and IP (two separate protocols)</li>
</ul>
<h3>1980s - Standardization</h3>
<ul>
<li><strong>1983:</strong> ARPANET switches from NCP to TCP/IP (January 1, known as "Flag Day"). DNS is invented by Paul Mockapetris</li>
<li><strong>1985:</strong> NSF creates NSFNET to connect supercomputing centers</li>
<li><strong>1989:</strong> Tim Berners-Lee at CERN proposes the World Wide Web</li>
</ul>
<h3>1990s - The Web Goes Public</h3>
<ul>
<li><strong>1990:</strong> ARPANET is decommissioned. Tim Berners-Lee creates the first web browser and web server</li>
<li><strong>1991:</strong> The World Wide Web is made available to the public</li>
<li><strong>1993:</strong> Mosaic browser is released, making the web accessible to non-technical users</li>
<li><strong>1995:</strong> NSFNET is decommissioned. The commercial internet begins. Amazon and eBay are founded</li>
</ul>
</section>
<section id="tcp-ip">
<h2>TCP/IP (Transmission Control Protocol / Internet Protocol)</h2>
<p>TCP/IP is the fundamental communication protocol suite of the Internet. It defines how data should be packetized, addressed, transmitted, routed, and received.</p>
<h3>TCP (Transmission Control Protocol)</h3>
<p>TCP operates at the Transport layer. It is responsible for:</p>
<ul>
<li><strong>Breaking data into packets:</strong> Divides large data into smaller segments</li>
<li><strong>Reliable delivery:</strong> Ensures all packets arrive correctly and in order</li>
<li><strong>Error checking:</strong> Detects corrupted or lost packets and requests retransmission</li>
<li><strong>Flow control:</strong> Prevents sender from overwhelming the receiver</li>
<li><strong>Connection-oriented:</strong> Establishes a connection before data transfer (three-way handshake: SYN, SYN-ACK, ACK)</li>
</ul>
<h3>IP (Internet Protocol)</h3>
<p>IP operates at the Internet (Network) layer. It is responsible for:</p>
<ul>
<li><strong>Addressing:</strong> Assigns IP addresses to identify source and destination</li>
<li><strong>Routing:</strong> Determines the best path for packets to travel across networks</li>
<li><strong>Connectionless:</strong> Each packet is treated independently (may take different routes)</li>
<li><strong>Best effort delivery:</strong> Does not guarantee delivery (TCP handles reliability)</li>
</ul>
<h3>TCP/IP Four-Layer Model</h3>
<table>
<thead>
<tr>
<th>Layer</th>
<th>Function</th>
<th>Protocols</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>User-facing services and applications</td>
<td>HTTP, HTTPS, FTP, SMTP, DNS</td>
</tr>
<tr>
<td>Transport</td>
<td>End-to-end communication and reliability</td>
<td>TCP, UDP</td>
</tr>
<tr>
<td>Internet</td>
<td>Addressing and routing packets</td>
<td>IP, ICMP</td>
</tr>
<tr>
<td>Link (Network Access)</td>
<td>Physical transmission of data</td>
<td>Ethernet, Wi-Fi, ARP</td>
</tr>
</tbody>
</table>
</section>
<section id="http">
<h2>HTTP (HyperText Transfer Protocol)</h2>
<p>HTTP is an application-layer protocol for transmitting hypermedia documents (like HTML). It follows a client-server, request-response model and is the foundation of data communication on the World Wide Web.</p>
<h3>How HTTP Works (Request-Response Cycle)</h3>
<ol>
<li>User enters a URL in the browser (client)</li>
<li>Browser builds an HTTP Request and sends it to the server</li>
<li>Request travels through the internet to the web server</li>
<li>Server processes the request and generates an HTTP Response</li>
<li>Response travels back to the client</li>
<li>Browser reads and renders the response content</li>
</ol>
<h3>HTTP Request Structure</h3>
<pre>GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Chrome/120
Accept: text/html</pre>
<p>Components: Request Line (method + path + version), Headers, Empty line, Optional Body</p>
<h3>HTTP Response Structure</h3>
<pre>HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
<html>...</html></pre>
<p>Components: Status Line (version + status code + reason), Headers, Empty line, Body</p>
<h3>HTTP Methods</h3>
<table>
<thead>
<tr>
<th>Method</th>
<th>Purpose</th>
<th>Safe</th>
<th>Idempotent</th>
</tr>
</thead>
<tbody>
<tr>
<td>GET</td>
<td>Retrieve a resource (read data)</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>POST</td>
<td>Submit data to create a resource</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>PUT</td>
<td>Replace an entire resource</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>DELETE</td>
<td>Remove a resource</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>PATCH</td>
<td>Partially update a resource</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>HEAD</td>
<td>Same as GET but returns only headers</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>OPTIONS</td>
<td>Describe communication options</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
<h3>HTTP Status Codes</h3>
<table>
<thead>
<tr>
<th>Range</th>
<th>Category</th>
<th>Key Examples</th>
</tr>
</thead>
<tbody>
<tr>
<td>1xx</td>
<td>Informational</td>
<td>100 Continue, 101 Switching Protocols</td>
</tr>
<tr>
<td>2xx</td>
<td>Success</td>
<td>200 OK, 201 Created, 204 No Content</td>
</tr>
<tr>
<td>3xx</td>
<td>Redirection</td>
<td>301 Moved Permanently, 302 Found, 304 Not Modified</td>
</tr>
<tr>
<td>4xx</td>
<td>Client Error</td>
<td>400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found</td>
</tr>
<tr>
<td>5xx</td>
<td>Server Error</td>
<td>500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable</td>
</tr>
</tbody>
</table>
</section>
<section id="https">
<h2>HTTPS (HyperText Transfer Protocol Secure)</h2>
<p>HTTPS is the secure version of HTTP. It encrypts the communication between client and server using SSL/TLS (Secure Sockets Layer / Transport Layer Security).</p>
<h3>Differences Between HTTP and HTTPS</h3>
<table>
<thead>
<tr>
<th>Feature</th>
<th>HTTP</th>
<th>HTTPS</th>
</tr>
</thead>
<tbody>
<tr>
<td>Security</td>
<td>No encryption (plain text)</td>
<td>Encrypted with SSL/TLS</td>
</tr>
<tr>
<td>Port</td>
<td>80</td>
<td>443</td>
</tr>
<tr>
<td>URL prefix</td>
<td>http://</td>
<td>https://</td>
</tr>
<tr>
<td>Certificate</td>
<td>Not required</td>
<td>Requires SSL certificate from Certificate Authority</td>
</tr>
<tr>
<td>Speed</td>
<td>Slightly faster</td>
<td>Slightly slower (encryption overhead)</td>
</tr>
<tr>
<td>SEO</td>
<td>Not preferred</td>
<td>Preferred by search engines</td>
</tr>
</tbody>
</table>
</section>
<section id="www">
<h2>World Wide Web (WWW)</h2>
<p>The World Wide Web is an information system of interlinked hypertext documents and resources, accessed via the Internet using web browsers. It was invented by Tim Berners-Lee at CERN in 1989.</p>
<h3>Key Components of the WWW</h3>
<ul>
<li><strong>HTML:</strong> The markup language for creating web pages</li>
<li><strong>HTTP/HTTPS:</strong> The protocol for transferring web resources</li>
<li><strong>URL:</strong> The addressing system for locating resources</li>
<li><strong>Web Browser:</strong> The client software for accessing web pages</li>
<li><strong>Web Server:</strong> The server software that serves web pages</li>
</ul>
<h3>Internet vs World Wide Web</h3>
<ul>
<li><strong>Internet:</strong> The global network infrastructure (hardware, cables, routers, protocols)</li>
<li><strong>WWW:</strong> A service that runs ON TOP of the Internet (one of many services, alongside email, FTP, etc.)</li>
</ul>
</section>
</main>
<footer>
<p><a href="addressing.html">Previous: Addressing</a> | <a href="index.html">Index</a> | <a href="html-foundations.html">Next: HTML Foundations</a></p>
</footer>
</body>
</html>Your protocols page is complete. You now have a thorough reference covering internet history, TCP/IP, HTTP/HTTPS, and the World Wide Web. Next up, you will start documenting HTML itself, beginning with the foundational elements that make every web page work.
Build the HTML Foundations Page
Your first four pages covered the network and internet layer. Now you are moving into the language that makes the web visible: HTML itself.
This page covers what HTML is, how elements are structured, and what goes inside the <head> tag. These are foundational definitions your examiner will expect you to articulate clearly.
In this step, get ready to:
- Create the HTML foundations page with definitions and element types.
- Add the head, meta, and link tag reference sections.
- Add a complete working head example with comments.
Create the HTML foundations file with core concepts
This first section of the page defines what HTML is, breaks down element anatomy, and compares block-level vs inline and void vs container elements.
- In IntelliJ, right-click your web-tech-viva-guide project folder.
- Select New, then HTML File.
- Name the file html-foundations and press Enter.
- Replace everything in the file with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Foundations - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Foundations</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="what-is-html">
<h2>What is HTML?</h2>
<p>HTML (HyperText Markup Language) is the standard markup language used to create and structure content on web pages. It defines the meaning and structure of web content. HTML is not a programming language. It is a markup language that tells browsers how to structure the content.</p>
<ul>
<li><strong>HyperText:</strong> Text that contains links to other texts/resources</li>
<li><strong>Markup:</strong> Annotations (tags) that define the structure and meaning of content</li>
<li><strong>Language:</strong> A set of rules and syntax for writing these annotations</li>
</ul>
</section>
<section id="elements">
<h2>HTML Elements</h2>
<p>An HTML element is defined by a start tag, content, and an end tag:</p>
<pre><tagname>Content goes here</tagname>
Example:
<p>This is a paragraph.</p>
<h1>This is a heading.</h1></pre>
<h3>Parts of an Element</h3>
<ul>
<li><strong>Opening tag:</strong> The name of the element wrapped in angle brackets <code><p></code></li>
<li><strong>Content:</strong> The text or nested elements inside</li>
<li><strong>Closing tag:</strong> Same as opening but with a forward slash <code></p></code></li>
<li><strong>Attributes:</strong> Extra information in the opening tag <code><a href="url"></code></li>
</ul>
</section>
<section id="types-of-elements">
<h2>Types of Elements</h2>
<h3>Block-Level Elements vs Inline Elements</h3>
<table>
<thead>
<tr>
<th>Block-Level Elements</th>
<th>Inline Elements</th>
</tr>
</thead>
<tbody>
<tr>
<td>Start on a new line</td>
<td>Do NOT start on a new line</td>
</tr>
<tr>
<td>Take up full width available</td>
<td>Take up only as much width as needed</td>
</tr>
<tr>
<td>Examples: p, h1-h6, div, section, article, ul, ol, table, form</td>
<td>Examples: span, a, strong, em, img, input, code, br</td>
</tr>
</tbody>
</table>
<h3>Void (Self-Closing) Elements vs Container Elements</h3>
<table>
<thead>
<tr>
<th>Void Elements</th>
<th>Container Elements</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cannot have content or children</td>
<td>Can contain content and other elements</td>
</tr>
<tr>
<td>No closing tag needed</td>
<td>Require both opening and closing tags</td>
</tr>
<tr>
<td>Examples: br, hr, img, input, meta, link</td>
<td>Examples: p, div, span, a, h1, section, article</td>
</tr>
</tbody>
</table>
</section>What does this code do?
This creates the page structure and covers three foundational concepts your examiner will likely ask about:
- The what-is-html section defines HTML as a markup language (not a programming language) and breaks down what HyperText, Markup, and Language each mean.
- The elements section explains the anatomy of an HTML element: opening tag, content, closing tag, and attributes.
- The types-of-elements section uses comparison tables for block vs inline and void vs container elements. Tables make these distinctions easy to memorize.
Viva distinction to remember
A common viva question is "Is HTML a programming language?" The answer is no. HTML is a markup language that structures content. It cannot perform logic, loops, or calculations.
Add the head, meta, and link tag sections
The <head> element contains metadata that is invisible on the page but critical for browsers, search engines, and social media platforms.
- In html-foundations.html, place your cursor after the closing </section> tag of the types-of-elements section.
- Add the following three sections below it:
<section id="head-tag">
<h2>The <head> Tag</h2>
<p>The head element is a container for metadata (data about the HTML document). It is placed between the <code><html></code> tag and the <code><body></code> tag. Content inside the head is NOT displayed on the web page.</p>
<h3>What Goes Inside the Head</h3>
<ul>
<li><code><title></code> - Page title (shown in browser tab and search results)</li>
<li><code><meta></code> - Metadata about the document</li>
<li><code><link></code> - Links to external resources (stylesheets, icons)</li>
<li><code><style></code> - Internal CSS styles</li>
<li><code><script></code> - JavaScript code or links to JS files</li>
<li><code><base></code> - Base URL for relative links in the document</li>
</ul>
</section>
<section id="meta-tag">
<h2>The <meta> Tag</h2>
<p>The meta element provides metadata that cannot be expressed by other head elements (title, link, style, script). It is a void element (no closing tag). Meta tags are used by browsers, search engines, and social media platforms.</p>
<h3>Meta Tag Attributes</h3>
<ul>
<li><strong>charset:</strong> Declares character encoding. Must be UTF-8 for HTML5</li>
<li><strong>name:</strong> Specifies the type of metadata (viewport, description, author, keywords, robots)</li>
<li><strong>content:</strong> The value of the metadata</li>
<li><strong>http-equiv:</strong> Provides HTTP header equivalent directives (refresh, content-type)</li>
</ul>
<h3>Essential Meta Tags</h3>
<pre><!-- Character encoding (must be first, within first 1024 bytes) -->
<meta charset="UTF-8">
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page description for SEO (shown in search results) -->
<meta name="description" content="A brief description of the page content">
<!-- Author -->
<meta name="author" content="John Doe">
<!-- Keywords (largely ignored by search engines now) -->
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- Page redirect after 5 seconds -->
<meta http-equiv="refresh" content="5;url=https://example.com"></pre>
</section>
<section id="link-tag">
<h2>The <link> Tag</h2>
<p>The link element defines a relationship between the current document and an external resource. It is most commonly used to link stylesheets. It is a void element placed inside the head.</p>
<h3>Key Attributes</h3>
<ul>
<li><strong>rel:</strong> Relationship type (stylesheet, icon, preload, canonical)</li>
<li><strong>href:</strong> Path to the external resource</li>
<li><strong>type:</strong> MIME type of the resource (optional for CSS, as text/css is default)</li>
<li><strong>media:</strong> Media query for conditional loading</li>
<li><strong>sizes:</strong> Icon sizes (for favicons)</li>
</ul>
<h3>Common Uses</h3>
<pre><!-- Link to stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Apple touch icon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon.png">
<!-- Preload a font -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Canonical URL (for SEO, avoids duplicate content) -->
<link rel="canonical" href="https://example.com/page"></pre>
</section>What does this code do?
These three sections cover what your examiner will expect you to explain about the invisible parts of an HTML document:
- The head-tag section lists every element that can live inside <head> and what each one does.
- The meta-tag section explains the four key attributes (charset, name, content, http-equiv) and shows the essential meta tags in a code example. Note that charset must be UTF-8 and must appear within the first 1024 bytes of the document.
- The link-tag section covers the rel attribute and shows common use cases including stylesheets, favicons, and canonical URLs.
Why are keywords largely ignored?
Search engines like Google stopped using the keywords meta tag for ranking because it was heavily abused by spammers stuffing irrelevant terms. Your examiner may ask about this distinction between meta tags that still matter (viewport, description) and those that do not (keywords).
Add the complete head example and close the file
A working example ties all the head elements together into one reference block you can study from.
- After the closing </section> tag of the link-tag section, add the following code to complete the file:
<section id="complete-head-example">
<h2>Complete Head Example</h2>
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn web technologies">
<meta name="author" content="Student Name">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- Page content here -->
</body>
</html></pre>
</section>
</main>
<footer>
<p><a href="protocols.html">Previous: Protocols</a> | <a href="index.html">Index</a> | <a href="content-elements.html">Next: Content Elements</a></p>
</footer>
</body>
</html>What does this code do?
The complete-head-example section shows a realistic head with every common element in place. This is the kind of example you can reference during your viva when asked to describe a well-formed HTML document.
The footer adds navigation links connecting this page to the previous (protocols) and next (content-elements) pages in your guide.
- Save html-foundations.html.
- Open the file in Chrome by right-clicking the file in IntelliJ and selecting Open In, then Browser, then Chrome.
- You should see the "HTML Foundations" heading, a styled comparison table for block vs inline elements, and formatted code examples in the meta and link sections.
Page looks unstyled or shows raw HTML?
- Check that the <link rel="stylesheet" href="styles.css"> line is in the head. The file name must match your existing stylesheet exactly.
- Make sure html-foundations.html is in the same folder as styles.css. If it is inside a subfolder, the relative path will not resolve.
- If the <pre> blocks show literal HTML tags instead of code text, make sure all angle brackets inside <pre> use < and > entity references.
Why isn't my html-foundations page rendering correctly?
✔️ Awesome, I've got everything!
Great. Double check you have saved the file before moving on.
ⓧ I'd like to double check the full code
Here is the complete html-foundations.html file for comparison:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Foundations - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Foundations</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="what-is-html">
<h2>What is HTML?</h2>
<p>HTML (HyperText Markup Language) is the standard markup language used to create and structure content on web pages. It defines the meaning and structure of web content. HTML is not a programming language. It is a markup language that tells browsers how to structure the content.</p>
<ul>
<li><strong>HyperText:</strong> Text that contains links to other texts/resources</li>
<li><strong>Markup:</strong> Annotations (tags) that define the structure and meaning of content</li>
<li><strong>Language:</strong> A set of rules and syntax for writing these annotations</li>
</ul>
</section>
<section id="elements">
<h2>HTML Elements</h2>
<p>An HTML element is defined by a start tag, content, and an end tag:</p>
<pre><tagname>Content goes here</tagname>
Example:
<p>This is a paragraph.</p>
<h1>This is a heading.</h1></pre>
<h3>Parts of an Element</h3>
<ul>
<li><strong>Opening tag:</strong> The name of the element wrapped in angle brackets <code><p></code></li>
<li><strong>Content:</strong> The text or nested elements inside</li>
<li><strong>Closing tag:</strong> Same as opening but with a forward slash <code></p></code></li>
<li><strong>Attributes:</strong> Extra information in the opening tag <code><a href="url"></code></li>
</ul>
</section>
<section id="types-of-elements">
<h2>Types of Elements</h2>
<h3>Block-Level Elements vs Inline Elements</h3>
<table>
<thead>
<tr>
<th>Block-Level Elements</th>
<th>Inline Elements</th>
</tr>
</thead>
<tbody>
<tr>
<td>Start on a new line</td>
<td>Do NOT start on a new line</td>
</tr>
<tr>
<td>Take up full width available</td>
<td>Take up only as much width as needed</td>
</tr>
<tr>
<td>Examples: p, h1-h6, div, section, article, ul, ol, table, form</td>
<td>Examples: span, a, strong, em, img, input, code, br</td>
</tr>
</tbody>
</table>
<h3>Void (Self-Closing) Elements vs Container Elements</h3>
<table>
<thead>
<tr>
<th>Void Elements</th>
<th>Container Elements</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cannot have content or children</td>
<td>Can contain content and other elements</td>
</tr>
<tr>
<td>No closing tag needed</td>
<td>Require both opening and closing tags</td>
</tr>
<tr>
<td>Examples: br, hr, img, input, meta, link</td>
<td>Examples: p, div, span, a, h1, section, article</td>
</tr>
</tbody>
</table>
</section>
<section id="head-tag">
<h2>The <head> Tag</h2>
<p>The head element is a container for metadata (data about the HTML document). It is placed between the <code><html></code> tag and the <code><body></code> tag. Content inside the head is NOT displayed on the web page.</p>
<h3>What Goes Inside the Head</h3>
<ul>
<li><code><title></code> - Page title (shown in browser tab and search results)</li>
<li><code><meta></code> - Metadata about the document</li>
<li><code><link></code> - Links to external resources (stylesheets, icons)</li>
<li><code><style></code> - Internal CSS styles</li>
<li><code><script></code> - JavaScript code or links to JS files</li>
<li><code><base></code> - Base URL for relative links in the document</li>
</ul>
</section>
<section id="meta-tag">
<h2>The <meta> Tag</h2>
<p>The meta element provides metadata that cannot be expressed by other head elements (title, link, style, script). It is a void element (no closing tag). Meta tags are used by browsers, search engines, and social media platforms.</p>
<h3>Meta Tag Attributes</h3>
<ul>
<li><strong>charset:</strong> Declares character encoding. Must be UTF-8 for HTML5</li>
<li><strong>name:</strong> Specifies the type of metadata (viewport, description, author, keywords, robots)</li>
<li><strong>content:</strong> The value of the metadata</li>
<li><strong>http-equiv:</strong> Provides HTTP header equivalent directives (refresh, content-type)</li>
</ul>
<h3>Essential Meta Tags</h3>
<pre><!-- Character encoding (must be first, within first 1024 bytes) -->
<meta charset="UTF-8">
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page description for SEO (shown in search results) -->
<meta name="description" content="A brief description of the page content">
<!-- Author -->
<meta name="author" content="John Doe">
<!-- Keywords (largely ignored by search engines now) -->
<meta name="keywords" content="HTML, CSS, JavaScript">
<!-- Page redirect after 5 seconds -->
<meta http-equiv="refresh" content="5;url=https://example.com"></pre>
</section>
<section id="link-tag">
<h2>The <link> Tag</h2>
<p>The link element defines a relationship between the current document and an external resource. It is most commonly used to link stylesheets. It is a void element placed inside the head.</p>
<h3>Key Attributes</h3>
<ul>
<li><strong>rel:</strong> Relationship type (stylesheet, icon, preload, canonical)</li>
<li><strong>href:</strong> Path to the external resource</li>
<li><strong>type:</strong> MIME type of the resource (optional for CSS, as text/css is default)</li>
<li><strong>media:</strong> Media query for conditional loading</li>
<li><strong>sizes:</strong> Icon sizes (for favicons)</li>
</ul>
<h3>Common Uses</h3>
<pre><!-- Link to stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Apple touch icon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon.png">
<!-- Preload a font -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Canonical URL (for SEO, avoids duplicate content) -->
<link rel="canonical" href="https://example.com/page"></pre>
</section>
<section id="complete-head-example">
<h2>Complete Head Example</h2>
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn web technologies">
<meta name="author" content="Student Name">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- Page content here -->
</body>
</html></pre>
</section>
</main>
<footer>
<p><a href="protocols.html">Previous: Protocols</a> | <a href="index.html">Index</a> | <a href="content-elements.html">Next: Content Elements</a></p>
</footer>
</body>
</html>Your HTML Foundations page is complete. Next, you will build the Content Elements page covering blockquotes, hyperlinks, and semantic sectioning elements.
Build the HTML Content Elements Page
Your HTML Foundations page covered how elements are structured and what goes in the head. Now you need to document the elements that actually make up the visible content of a page.
In a viva, you will likely be asked to explain the difference between semantic and non-semantic elements, how hyperlinks work, and when to use specific sectioning elements. This page gives you clear reference material for all of those topics.
In this step, get ready to:
- Create the content elements page with blockquote and hyperlink reference sections.
- Add non-semantic and semantic element documentation with code examples.
- Add a complete semantic page structure example showing all elements working together.
Create the file with blockquote and quotation content
The blockquote and q elements are frequently tested in vivas because they demonstrate the difference between block-level and inline quotations.
- In IntelliJ, right-click your web-tech-viva-guide project folder in the Project sidebar.
- Select New, then HTML File.
- Name the file content-elements and press Enter.
- Replace any default content with the following code for the file boilerplate, header, and blockquote section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Content Elements - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Content Elements</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="blockquote">
<h2>Blockquote and Quotations</h2>
<h3>blockquote Element</h3>
<p>The <code><blockquote></code> element represents a block-level quotation from another source. It is typically rendered with indentation.</p>
<pre><blockquote cite="https://www.example.com/source">
<p>The Web does not just connect machines, it connects people.</p>
</blockquote></pre>
<p><strong>cite attribute:</strong> Contains a URL pointing to the source of the quotation.</p>
<h3>q Element (Inline Quotation)</h3>
<p>The <code><q></code> element is for short, inline quotations. Browsers typically add quotation marks around it.</p>
<pre><p>Tim Berners-Lee said <q>The Web does not just connect machines, it connects people.</q></p></pre>
</section>What does this code do?
The boilerplate links to your existing styles.css so this page gets the same styling as your other study guide pages.
The blockquote section demonstrates two key elements. The <blockquote> element is a block-level quotation with a cite attribute pointing to the original source. The <q> element is for inline quotations where the browser adds quotation marks automatically.
- Now add the hyperlinks section directly below the closing </section> tag of the blockquote section:
<section id="hyperlinks">
<h2>Hyperlinks</h2>
<p>Hyperlinks are created using the anchor element <code><a></code>. They allow users to navigate between pages, sections, or resources.</p>
<h3>Basic Syntax</h3>
<pre><a href="url">Link Text</a></pre>
<h3>Types of URLs in Links</h3>
<ul>
<li><strong>Absolute URL:</strong> Full web address including protocol. <code><a href="https://www.google.com">Google</a></code></li>
<li><strong>Relative URL:</strong> Path relative to current page. <code><a href="about.html">About</a></code></li>
<li><strong>Fragment/Anchor:</strong> Links to a section within the same page. <code><a href="#section-id">Jump to Section</a></code></li>
<li><strong>Email link:</strong> <code><a href="mailto:user@example.com">Email Us</a></code></li>
<li><strong>Phone link:</strong> <code><a href="tel:+1234567890">Call Us</a></code></li>
</ul>
<h3>The target Attribute</h3>
<ul>
<li><code>_self</code> - Opens in the same tab (default)</li>
<li><code>_blank</code> - Opens in a new tab/window</li>
<li><code>_parent</code> - Opens in the parent frame</li>
<li><code>_top</code> - Opens in the full body of the window</li>
</ul>
<h3>Linking to Page Sections (Bookmarks)</h3>
<pre><!-- Create a target with id -->
<h2 id="chapter3">Chapter 3</h2>
<!-- Link to that section -->
<a href="#chapter3">Go to Chapter 3</a>
<!-- Link to section on another page -->
<a href="page2.html#chapter3">Chapter 3 on Page 2</a></pre>
</section>What does this section cover?
This hyperlinks section documents the anchor element's href attribute with all URL types you need to know: absolute, relative, fragment, email, and phone links.
The target attribute values (_self, _blank, _parent, _top) are a common viva question. The bookmark section shows how to link within a page using fragment identifiers.
- Save content-elements.html.
- Open the file in Chrome by right-clicking the file in IntelliJ and selecting Open In, then Browser, then Chrome.
- You should see the "Blockquote and Quotations" heading and the "Hyperlinks" heading with formatted content below each.
Page looks unstyled or blank?
If the page has no styling, make sure content-elements.html is in the same folder as styles.css. The link tag references href="styles.css" without any folder path, so both files must be at the same level.
If the page is completely blank, check that you have the opening <body> tag and that the HTML is not cut off mid-tag.
Help me debug my content-elements.html page
Add the non-semantic and semantic elements sections
One of the most important distinctions in HTML is between non-semantic elements (which carry no meaning) and semantic elements (which describe their content's purpose). This section documents both so you can contrast them in your viva.
- In content-elements.html, add the non-semantic elements section directly below the closing </section> tag of the hyperlinks section:
<section id="non-semantic">
<h2>Non-Semantic Elements</h2>
<p>Non-semantic elements do not convey any meaning about their content. They are generic containers used for styling or grouping purposes.</p>
<h3>div Element (Block Container)</h3>
<ul>
<li>Generic block-level container</li>
<li>Has no semantic meaning</li>
<li>Used for grouping elements for styling with CSS</li>
<li>Used as a wrapper for JavaScript manipulation</li>
<li>Starts on a new line, takes full width</li>
</ul>
<pre><div class="card">
<h3>Product Title</h3>
<p>Product description here.</p>
</div></pre>
<h3>span Element (Inline Container)</h3>
<ul>
<li>Generic inline container</li>
<li>Has no semantic meaning</li>
<li>Used to style a portion of text</li>
<li>Does NOT start on a new line</li>
</ul>
<pre><p>The price is <span class="price">$29.99</span> today.</p></pre>
</section>What does this section cover?
The <div> is a generic block-level container. The <span> is a generic inline container. Neither carries any semantic meaning about its content.
These elements exist purely for styling and JavaScript manipulation. In a viva, you should explain that while they work, you should prefer semantic elements whenever possible because they improve accessibility and SEO.
- Now add the semantic sectioning elements section directly below the closing </section> tag of the non-semantic section:
<section id="semantic-sectioning">
<h2>Semantic Sectioning Elements</h2>
<p>Semantic elements clearly describe their meaning to both the browser and the developer. They improve accessibility, SEO, and code readability.</p>
<h3>header</h3>
<p>Represents introductory content or navigational aids. Typically contains headings, logo, search form, or author info.</p>
<pre><header>
<h1>Website Name</h1>
<nav>...</nav>
</header></pre>
<h3>nav</h3>
<p>Represents a section with navigation links. Used for major navigation blocks only, not every group of links.</p>
<pre><nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav></pre>
<h3>main</h3>
<p>Represents the primary content of the document. There should be only ONE main element per page. Must NOT be inside header, footer, nav, article, or aside.</p>
<pre><main>
<h1>Page Title</h1>
<p>Main content here...</p>
</main></pre>
<h3>article</h3>
<p>Represents independent, self-contained content that could be distributed on its own (blog post, news article, forum post, comment).</p>
<pre><article>
<h2>Blog Post Title</h2>
<p>Article content...</p>
</article></pre>
<h3>section</h3>
<p>Represents a generic standalone section of a document. Should typically have a heading. Use when no more specific semantic element fits.</p>
<pre><section>
<h2>Introduction</h2>
<p>Section content...</p>
</section></pre>
<h3>aside</h3>
<p>Represents content tangentially related to the surrounding content (sidebars, pull quotes, advertising, related links).</p>
<pre><aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
</ul>
</aside></pre>
<h3>footer</h3>
<p>Represents a footer for its nearest sectioning content. Typically contains copyright, contact info, sitemap links, or author information.</p>
<pre><footer>
<p>&copy; 2024 Company Name. All rights reserved.</p>
</footer></pre>
</section>What does this section cover?
This documents all seven semantic sectioning elements: header, nav, main, article, section, aside, and footer. Each has a definition, when to use it, and example code.
Key viva point: there must be only ONE <main> element per page, and it must not be nested inside header, footer, nav, article, or aside.
- Save content-elements.html and refresh your browser.
- You should now see four major sections on the page: Blockquote, Hyperlinks, Non-Semantic Elements, and Semantic Sectioning Elements. Each has code examples displayed in dark-themed pre blocks.
Sections not appearing?
If only some sections appear, you likely have an unclosed tag somewhere. Check that each <section> has a matching </section> and that every <pre> tag has a closing </pre>.
Help me find the unclosed tag in my content-elements.html
Add the complete semantic page structure example
A viva examiner will likely ask you to show how semantic elements work together in a real page layout. This final section provides a complete example you can reference.
- Add the complete page structure example, the closing </main> tag, the footer, and the closing HTML tags below the semantic-sectioning section:
<section id="semantic-example">
<h2>Complete Semantic Page Structure</h2>
<pre><body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<section>
<h3>Section 1</h3>
<p>Content...</p>
</section>
<section>
<h3>Section 2</h3>
<p>Content...</p>
</section>
</article>
<aside>
<h2>Sidebar</h2>
<p>Related content...</p>
</aside>
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body></pre>
</section>
</main>
<footer>
<p><a href="html-foundations.html">Previous: Foundations</a> | <a href="index.html">Index</a> | <a href="data-media.html">Next: Data and Media</a></p>
</footer>
</body>
</html>What does this example show?
This example demonstrates a full page layout using only semantic elements instead of generic divs. The header contains the site title and navigation. The main element wraps the primary content, which includes an article with sections. The aside serves as a sidebar. The footer closes the page.
In a viva, you can explain that this structure is better than using only divs because screen readers can identify each region, search engines can understand the page hierarchy, and other developers can read the code more easily.
- Save content-elements.html and refresh your browser.
- Scroll to the bottom of the page. You should see the "Complete Semantic Page Structure" heading with a full code example in a dark pre block, followed by the page footer with navigation links to the previous and next pages.
Footer navigation links not working?
The footer links point to html-foundations.html and data-media.html. The first should work since you created that file in the previous step. The second will give a 404 error until you create that file in the next step.
Help me fix my footer links in content-elements.html
✔️ Awesome, I've got everything!
Great. Double check you have saved your file before moving on.
ⓧ I'd like to double check the full code
Here is the complete content-elements.html file for comparison:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Content Elements - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Content Elements</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="blockquote">
<h2>Blockquote and Quotations</h2>
<h3>blockquote Element</h3>
<p>The <code><blockquote></code> element represents a block-level quotation from another source. It is typically rendered with indentation.</p>
<pre><blockquote cite="https://www.example.com/source">
<p>The Web does not just connect machines, it connects people.</p>
</blockquote></pre>
<p><strong>cite attribute:</strong> Contains a URL pointing to the source of the quotation.</p>
<h3>q Element (Inline Quotation)</h3>
<p>The <code><q></code> element is for short, inline quotations. Browsers typically add quotation marks around it.</p>
<pre><p>Tim Berners-Lee said <q>The Web does not just connect machines, it connects people.</q></p></pre>
</section>
<section id="hyperlinks">
<h2>Hyperlinks</h2>
<p>Hyperlinks are created using the anchor element <code><a></code>. They allow users to navigate between pages, sections, or resources.</p>
<h3>Basic Syntax</h3>
<pre><a href="url">Link Text</a></pre>
<h3>Types of URLs in Links</h3>
<ul>
<li><strong>Absolute URL:</strong> Full web address including protocol. <code><a href="https://www.google.com">Google</a></code></li>
<li><strong>Relative URL:</strong> Path relative to current page. <code><a href="about.html">About</a></code></li>
<li><strong>Fragment/Anchor:</strong> Links to a section within the same page. <code><a href="#section-id">Jump to Section</a></code></li>
<li><strong>Email link:</strong> <code><a href="mailto:user@example.com">Email Us</a></code></li>
<li><strong>Phone link:</strong> <code><a href="tel:+1234567890">Call Us</a></code></li>
</ul>
<h3>The target Attribute</h3>
<ul>
<li><code>_self</code> - Opens in the same tab (default)</li>
<li><code>_blank</code> - Opens in a new tab/window</li>
<li><code>_parent</code> - Opens in the parent frame</li>
<li><code>_top</code> - Opens in the full body of the window</li>
</ul>
<h3>Linking to Page Sections (Bookmarks)</h3>
<pre><!-- Create a target with id -->
<h2 id="chapter3">Chapter 3</h2>
<!-- Link to that section -->
<a href="#chapter3">Go to Chapter 3</a>
<!-- Link to section on another page -->
<a href="page2.html#chapter3">Chapter 3 on Page 2</a></pre>
</section>
<section id="non-semantic">
<h2>Non-Semantic Elements</h2>
<p>Non-semantic elements do not convey any meaning about their content. They are generic containers used for styling or grouping purposes.</p>
<h3>div Element (Block Container)</h3>
<ul>
<li>Generic block-level container</li>
<li>Has no semantic meaning</li>
<li>Used for grouping elements for styling with CSS</li>
<li>Used as a wrapper for JavaScript manipulation</li>
<li>Starts on a new line, takes full width</li>
</ul>
<pre><div class="card">
<h3>Product Title</h3>
<p>Product description here.</p>
</div></pre>
<h3>span Element (Inline Container)</h3>
<ul>
<li>Generic inline container</li>
<li>Has no semantic meaning</li>
<li>Used to style a portion of text</li>
<li>Does NOT start on a new line</li>
</ul>
<pre><p>The price is <span class="price">$29.99</span> today.</p></pre>
</section>
<section id="semantic-sectioning">
<h2>Semantic Sectioning Elements</h2>
<p>Semantic elements clearly describe their meaning to both the browser and the developer. They improve accessibility, SEO, and code readability.</p>
<h3>header</h3>
<p>Represents introductory content or navigational aids. Typically contains headings, logo, search form, or author info.</p>
<pre><header>
<h1>Website Name</h1>
<nav>...</nav>
</header></pre>
<h3>nav</h3>
<p>Represents a section with navigation links. Used for major navigation blocks only, not every group of links.</p>
<pre><nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav></pre>
<h3>main</h3>
<p>Represents the primary content of the document. There should be only ONE main element per page. Must NOT be inside header, footer, nav, article, or aside.</p>
<pre><main>
<h1>Page Title</h1>
<p>Main content here...</p>
</main></pre>
<h3>article</h3>
<p>Represents independent, self-contained content that could be distributed on its own (blog post, news article, forum post, comment).</p>
<pre><article>
<h2>Blog Post Title</h2>
<p>Article content...</p>
</article></pre>
<h3>section</h3>
<p>Represents a generic standalone section of a document. Should typically have a heading. Use when no more specific semantic element fits.</p>
<pre><section>
<h2>Introduction</h2>
<p>Section content...</p>
</section></pre>
<h3>aside</h3>
<p>Represents content tangentially related to the surrounding content (sidebars, pull quotes, advertising, related links).</p>
<pre><aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
</ul>
</aside></pre>
<h3>footer</h3>
<p>Represents a footer for its nearest sectioning content. Typically contains copyright, contact info, sitemap links, or author information.</p>
<pre><footer>
<p>&copy; 2024 Company Name. All rights reserved.</p>
</footer></pre>
</section>
<section id="semantic-example">
<h2>Complete Semantic Page Structure</h2>
<pre><body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<section>
<h3>Section 1</h3>
<p>Content...</p>
</section>
<section>
<h3>Section 2</h3>
<p>Content...</p>
</section>
</article>
<aside>
<h2>Sidebar</h2>
<p>Related content...</p>
</aside>
</main>
<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body></pre>
</section>
</main>
<footer>
<p><a href="html-foundations.html">Previous: Foundations</a> | <a href="index.html">Index</a> | <a href="data-media.html">Next: Data and Media</a></p>
</footer>
</body>
</html>Your content elements page is complete with quotation elements, hyperlinks, and both non-semantic and semantic element references. Next up, you will build the data and media page covering tables, lists, and multimedia elements.
Build the HTML Data and Media Page
Your study guide now covers all the conceptual and structural HTML elements. The next layer of your viva preparation is about how HTML handles structured data and rich media.
In this step, you will build a page that documents tables, all three list types, images, audio, video, and embedded content like iframes. Each section includes working code examples you can reference when explaining these elements in your viva.
In this step, get ready to:
- Create the data-media.html file with a comprehensive tables reference section.
- Add the lists section covering ordered, unordered, description, and nested lists.
- Add the multimedia and embedded content sections covering images, audio, video, iframes, and more.
Create data-media.html with the Tables section
Tables are one of the most commonly asked topics in vivas because they involve many elements working together. Your reference needs to cover the structural elements, spanning attributes, and accessibility features like the scope attribute.
- In IntelliJ IDEA, right-click on your web-tech-viva-guide project folder in the Project panel.
- Select **New**, then **HTML File**.
- Name the file data-media and press **Enter**.
- Replace any generated content with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Data and Media - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Data and Media</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="tables">
<h2>Tables</h2>
<p>HTML tables are used to display data in rows and columns. They should be used for tabular data only, NOT for page layout.</p>
<h3>Table Elements</h3>
<ul>
<li><code><table></code> - Defines the table</li>
<li><code><caption></code> - Table title/description (first child of table)</li>
<li><code><thead></code> - Groups header rows</li>
<li><code><tbody></code> - Groups body rows</li>
<li><code><tfoot></code> - Groups footer rows</li>
<li><code><tr></code> - Table row</li>
<li><code><th></code> - Header cell (bold and centered by default)</li>
<li><code><td></code> - Data cell</li>
</ul>
<h3>Spanning Attributes</h3>
<ul>
<li><code>colspan="n"</code> - Cell spans n columns</li>
<li><code>rowspan="n"</code> - Cell spans n rows</li>
</ul>
<h3>Accessibility with scope</h3>
<p>The <code>scope</code> attribute on <code><th></code> helps screen readers understand the relationship between headers and data cells.</p>
<ul>
<li><code>scope="col"</code> - Header for a column</li>
<li><code>scope="row"</code> - Header for a row</li>
</ul>
<h3>Complete Table Example</h3>
<pre><table>
<caption>Student Grades</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Subject</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Alice</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Science</td>
<td>B+</td>
</tr>
<tr>
<td>Bob</td>
<td colspan="2">Absent</td>
</tr>
</tbody>
</table></pre>
</section>What does this code do?
The boilerplate links to your existing styles.css so this page inherits the same look as your other pages.
The tables section covers all the structural elements (table, thead, tbody, tfoot, tr, th, td), the spanning attributes (colspan, rowspan), and the scope attribute for accessibility. The complete example at the end demonstrates rowspan and colspan working together in a real table.
- Save data-media.html.
- Open the file in Chrome by right-clicking the file in IntelliJ and selecting **Open In**, then **Browser**, then **Chrome**.
- You should see the page title "HTML Data and Media" and the Tables section with formatted headings, bulleted element lists, and a dark code block showing the table example.
Page looks unstyled or blank?
Make sure data-media.html is saved in the same folder as styles.css. The link tag references href="styles.css" which requires both files to be in the same directory.
If the page is completely blank, check that you have not accidentally deleted the opening <body> tag or the <!DOCTYPE html> declaration.
Help me debug why my data-media.html page is not displaying correctly in the browser.
Add the Lists section
HTML has three distinct list types, each with different use cases. Your viva examiner may ask you to explain when to use each type and what attributes control their behavior.
- In data-media.html, find the closing </section> tag at the end of the tables section.
- Add the following lists section directly below it:
<section id="lists">
<h2>Lists</h2>
<h3>Ordered List (ol)</h3>
<p>A numbered list where the order matters.</p>
<pre><ol type="1" start="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol></pre>
<p><strong>type attribute values:</strong> 1 (numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman), i (lowercase Roman)</p>
<p><strong>Other attributes:</strong> <code>start</code> (starting number), <code>reversed</code> (count down)</p>
<h3>Unordered List (ul)</h3>
<p>A bulleted list where order does not matter.</p>
<pre><ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul></pre>
<p><strong>Bullet styles (CSS):</strong> disc (default), circle, square, none</p>
<h3>Description List (dl)</h3>
<p>A list of terms and their descriptions/definitions.</p>
<pre><dl>
<dt>HTML</dt>
<dd>HyperText Markup Language for structuring web content</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets for styling web pages</dd>
<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl></pre>
<h3>Nested Lists</h3>
<pre><ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul></pre>
</section>What does this code do?
This section covers all three HTML list types. Ordered lists (ol) show numbered items where sequence matters. Unordered lists (ul) show bulleted items where order is irrelevant.
Description lists (dl) pair terms (dt) with their definitions (dd). The nested list example shows how you can place a list inside a list item to create sub-categories.
- Save data-media.html and refresh your browser.
- You should now see a "Lists" heading below the tables section, with code examples for ordered, unordered, description, and nested lists rendered in dark code blocks.
Lists section not appearing?
Make sure you pasted the code after the closing </section> of the tables section, not inside it. Both sections should be direct children of the <main> element.
Check that you do not have a stray closing </main> tag between the two sections.
Help me fix my data-media.html structure so the lists section appears correctly.
Add the Multimedia and Embedded Content sections
Multimedia is a broad topic covering images, audio, video, and embedded external content. Your examiner may ask about the specific attributes for each media type and why accessibility attributes like alt and title matter.
- Find the closing </section> tag at the end of the lists section.
- Add the following multimedia section directly below it:
<section id="multimedia">
<h2>Multimedia</h2>
<h3>Images (img)</h3>
<pre><img src="photo.jpg" alt="Description of the image" width="600" height="400"></pre>
<ul>
<li><code>src</code> - Path to the image file (required)</li>
<li><code>alt</code> - Alternative text for accessibility and when image fails to load (required)</li>
<li><code>width</code> / <code>height</code> - Dimensions in pixels</li>
</ul>
<h4>figure and figcaption</h4>
<pre><figure>
<img src="chart.png" alt="Sales growth chart for 2024">
<figcaption>Figure 1: Sales growth over the past year</figcaption>
</figure></pre>
<h3>Audio</h3>
<pre><audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio></pre>
<ul>
<li><code>controls</code> - Shows play/pause, volume, seek bar</li>
<li><code>autoplay</code> - Starts playing automatically</li>
<li><code>loop</code> - Repeats when finished</li>
<li><code>muted</code> - Starts muted</li>
</ul>
<h3>Video</h3>
<pre><video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video></pre>
<ul>
<li><code>controls</code> - Shows video player controls</li>
<li><code>poster</code> - Image shown before video plays</li>
<li><code>width</code> / <code>height</code> - Player dimensions</li>
<li><code>autoplay</code>, <code>loop</code>, <code>muted</code> - Same as audio</li>
</ul>
</section>What does this code do?
The multimedia section covers three media types. Images use the void img element with src and alt as required attributes. The figure and figcaption elements add semantic captioning to images.
Audio and video elements both use source child elements to provide multiple file formats as fallbacks. The fallback text inside the element displays if the browser does not support that media type.
- Now add the embedded content section and the page footer directly below the multimedia section's closing </section> tag:
<section id="embedded-content">
<h2>Embedded Content</h2>
<h3>iframe (Inline Frame)</h3>
<p>Embeds another HTML page within the current page. Used for maps, videos, external widgets.</p>
<pre><iframe
src="https://www.example.com"
width="600"
height="400"
title="Example website"
sandbox="allow-scripts allow-same-origin"
loading="lazy">
</iframe></pre>
<ul>
<li><code>src</code> - URL of the page to embed</li>
<li><code>title</code> - Description for accessibility</li>
<li><code>sandbox</code> - Security restrictions on the embedded content</li>
<li><code>allow</code> - Permissions for features (camera, microphone, fullscreen)</li>
<li><code>loading="lazy"</code> - Defers loading until visible</li>
</ul>
<h3>object Element</h3>
<p>Embeds external resources like PDFs, Flash, or other media.</p>
<pre><object data="document.pdf" type="application/pdf" width="600" height="400">
<p>Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a>.</p>
</object></pre>
<h3>embed Element</h3>
<p>Embeds external content at a specified point. Similar to object but with simpler syntax. It is a void element.</p>
<pre><embed src="game.swf" type="application/x-shockwave-flash" width="400" height="300"></pre>
</section>
</main>
<footer>
<p><a href="content-elements.html">Previous: Content Elements</a> | <a href="index.html">Index</a> | <a href="forms.html">Next: Forms</a></p>
</footer>
</body>
</html>What does this code do?
The embedded content section covers three ways to embed external resources. The iframe is the most common and includes security features like sandbox to restrict what embedded content can do.
The object element can include fallback content between its tags for browsers that cannot display the resource. The embed element is a void element with no fallback mechanism. The footer closes the page with navigation links to the previous and next pages.
- Save data-media.html and refresh your browser.
- You should see all four sections (Tables, Lists, Multimedia, Embedded Content) with their headings, explanation text, and dark-themed code blocks.
- Scroll to the bottom and confirm the footer shows links to "Previous: Content Elements", "Index", and "Next: Forms".
Footer not showing or code blocks look wrong?
If the footer is missing, check that you have the closing </main> tag before the <footer> element. The footer sits outside <main> but inside <body>.
If code blocks are rendering as actual HTML instead of displaying the code text, make sure the examples inside <pre> tags use HTML entities (< and >) instead of actual angle brackets.
Help me fix the structure of my data-media.html page so all sections and the footer display correctly.
✔️ Awesome, I've got everything!
Great. Double check you have saved data-media.html and that all four sections are visible in the browser.
ⓧ I'd like to double check the full code
Here is the complete data-media.html file. Compare it against yours to spot any differences.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Data and Media - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Data and Media</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="tables">
<h2>Tables</h2>
<p>HTML tables are used to display data in rows and columns. They should be used for tabular data only, NOT for page layout.</p>
<h3>Table Elements</h3>
<ul>
<li><code><table></code> - Defines the table</li>
<li><code><caption></code> - Table title/description (first child of table)</li>
<li><code><thead></code> - Groups header rows</li>
<li><code><tbody></code> - Groups body rows</li>
<li><code><tfoot></code> - Groups footer rows</li>
<li><code><tr></code> - Table row</li>
<li><code><th></code> - Header cell (bold and centered by default)</li>
<li><code><td></code> - Data cell</li>
</ul>
<h3>Spanning Attributes</h3>
<ul>
<li><code>colspan="n"</code> - Cell spans n columns</li>
<li><code>rowspan="n"</code> - Cell spans n rows</li>
</ul>
<h3>Accessibility with scope</h3>
<p>The <code>scope</code> attribute on <code><th></code> helps screen readers understand the relationship between headers and data cells.</p>
<ul>
<li><code>scope="col"</code> - Header for a column</li>
<li><code>scope="row"</code> - Header for a row</li>
</ul>
<h3>Complete Table Example</h3>
<pre><table>
<caption>Student Grades</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Subject</th>
<th scope="col">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Alice</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Science</td>
<td>B+</td>
</tr>
<tr>
<td>Bob</td>
<td colspan="2">Absent</td>
</tr>
</tbody>
</table></pre>
</section>
<section id="lists">
<h2>Lists</h2>
<h3>Ordered List (ol)</h3>
<p>A numbered list where the order matters.</p>
<pre><ol type="1" start="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol></pre>
<p><strong>type attribute values:</strong> 1 (numbers), A (uppercase letters), a (lowercase letters), I (uppercase Roman), i (lowercase Roman)</p>
<p><strong>Other attributes:</strong> <code>start</code> (starting number), <code>reversed</code> (count down)</p>
<h3>Unordered List (ul)</h3>
<p>A bulleted list where order does not matter.</p>
<pre><ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul></pre>
<p><strong>Bullet styles (CSS):</strong> disc (default), circle, square, none</p>
<h3>Description List (dl)</h3>
<p>A list of terms and their descriptions/definitions.</p>
<pre><dl>
<dt>HTML</dt>
<dd>HyperText Markup Language for structuring web content</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets for styling web pages</dd>
<dt>JavaScript</dt>
<dd>Programming language for web interactivity</dd>
</dl></pre>
<h3>Nested Lists</h3>
<pre><ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Broccoli</li>
</ul>
</li>
</ul></pre>
</section>
<section id="multimedia">
<h2>Multimedia</h2>
<h3>Images (img)</h3>
<pre><img src="photo.jpg" alt="Description of the image" width="600" height="400"></pre>
<ul>
<li><code>src</code> - Path to the image file (required)</li>
<li><code>alt</code> - Alternative text for accessibility and when image fails to load (required)</li>
<li><code>width</code> / <code>height</code> - Dimensions in pixels</li>
</ul>
<h4>figure and figcaption</h4>
<pre><figure>
<img src="chart.png" alt="Sales growth chart for 2024">
<figcaption>Figure 1: Sales growth over the past year</figcaption>
</figure></pre>
<h3>Audio</h3>
<pre><audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio></pre>
<ul>
<li><code>controls</code> - Shows play/pause, volume, seek bar</li>
<li><code>autoplay</code> - Starts playing automatically</li>
<li><code>loop</code> - Repeats when finished</li>
<li><code>muted</code> - Starts muted</li>
</ul>
<h3>Video</h3>
<pre><video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video></pre>
<ul>
<li><code>controls</code> - Shows video player controls</li>
<li><code>poster</code> - Image shown before video plays</li>
<li><code>width</code> / <code>height</code> - Player dimensions</li>
<li><code>autoplay</code>, <code>loop</code>, <code>muted</code> - Same as audio</li>
</ul>
</section>
<section id="embedded-content">
<h2>Embedded Content</h2>
<h3>iframe (Inline Frame)</h3>
<p>Embeds another HTML page within the current page. Used for maps, videos, external widgets.</p>
<pre><iframe
src="https://www.example.com"
width="600"
height="400"
title="Example website"
sandbox="allow-scripts allow-same-origin"
loading="lazy">
</iframe></pre>
<ul>
<li><code>src</code> - URL of the page to embed</li>
<li><code>title</code> - Description for accessibility</li>
<li><code>sandbox</code> - Security restrictions on the embedded content</li>
<li><code>allow</code> - Permissions for features (camera, microphone, fullscreen)</li>
<li><code>loading="lazy"</code> - Defers loading until visible</li>
</ul>
<h3>object Element</h3>
<p>Embeds external resources like PDFs, Flash, or other media.</p>
<pre><object data="document.pdf" type="application/pdf" width="600" height="400">
<p>Your browser does not support PDFs. <a href="document.pdf">Download the PDF</a>.</p>
</object></pre>
<h3>embed Element</h3>
<p>Embeds external content at a specified point. Similar to object but with simpler syntax. It is a void element.</p>
<pre><embed src="game.swf" type="application/x-shockwave-flash" width="400" height="300"></pre>
</section>
</main>
<footer>
<p><a href="content-elements.html">Previous: Content Elements</a> | <a href="index.html">Index</a> | <a href="forms.html">Next: Forms</a></p>
</footer>
</body>
</html>Your data and media reference page is complete. You now have clear documentation on tables, all three list types, multimedia elements, and embedded content. Next up, you will build the final content page covering HTML forms and validation.
Build the HTML Forms Page
Your data and media page covers tables, lists, multimedia, and embedded content. Now it is time to build the final page of your study guide.
Forms are one of the most interactive parts of HTML. They let users submit data to servers, and your viva will likely cover form elements, input types, validation, and the difference between GET and POST. This page brings all of that together with working examples.
In this step, get ready to:
- Create the forms page with the form element and GET vs POST comparison.
- Add input types, labels, and other form controls (select, textarea, fieldset, button).
- Add form validation attributes and a complete registration form example.
Create the forms page with the form element and GET vs POST
The form element is the container that wraps all form controls. Understanding how action and method attributes work is essential for your viva.
- Create a new file called forms.html in your web-tech-viva-guide project folder.
- Add the HTML boilerplate, header, and the form element section by copying this code into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Forms - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Forms</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="form-element">
<h2>The form Element</h2>
<p>The <code><form></code> element creates an interactive section for collecting user input and submitting it to a server.</p>
<pre><form action="/submit" method="POST">
<!-- Form controls go here -->
</form></pre>
<h3>Key Attributes</h3>
<ul>
<li><strong>action:</strong> The URL where form data is sent when submitted</li>
<li><strong>method:</strong> The HTTP method used to send data (GET or POST)</li>
</ul>
<h3>GET vs POST</h3>
<table>
<thead>
<tr>
<th>GET</th>
<th>POST</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data appended to URL as query string</td>
<td>Data sent in the request body</td>
</tr>
<tr>
<td>Visible in the address bar</td>
<td>Not visible in the address bar</td>
</tr>
<tr>
<td>Can be bookmarked</td>
<td>Cannot be bookmarked</td>
</tr>
<tr>
<td>Limited data size (URL length limit)</td>
<td>No data size limitation</td>
</tr>
<tr>
<td>Not secure for sensitive data</td>
<td>More secure (not in URL)</td>
</tr>
<tr>
<td>Use for: search, filters, non-sensitive queries</td>
<td>Use for: login, registration, file uploads, sensitive data</td>
</tr>
</tbody>
</table>
</section>What does this code do?
The boilerplate links to your existing styles.css so this page inherits the same styling as all your other pages.
The form-element section explains the two key attributes (action for the destination URL, method for GET or POST) and provides a comparison table you can reference during your viva. GET sends data in the URL, POST sends it in the request body.
- Save forms.html.
- Open the file in Chrome. You should see the "HTML Forms" heading, the form syntax example in a dark code block, and the GET vs POST comparison table with alternating row colors.
Page looks unstyled?
Make sure forms.html is saved in the same folder as styles.css. The <link rel="stylesheet" href="styles.css"> tag uses a relative path, so both files must be in the same directory.
Help me fix my forms.html page styling
Add input types, labels, and other form controls
HTML5 provides many specialized input types that give browsers built-in validation and appropriate interfaces (date pickers, color selectors, etc.). Labels tie these inputs to accessible descriptions.
- In forms.html, find the closing </section> tag of the form-element section.
- Add the input types, labels, and other form controls sections below it by copying this code:
<section id="input-types">
<h2>Input Types</h2>
<p>The <code><input></code> element is the most versatile form element. Its behavior changes based on the <code>type</code> attribute.</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Purpose</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>Single-line text input</td>
<td><code><input type="text" name="username"></code></td>
</tr>
<tr>
<td>password</td>
<td>Hidden text input</td>
<td><code><input type="password" name="pass"></code></td>
</tr>
<tr>
<td>email</td>
<td>Email with validation</td>
<td><code><input type="email" name="email"></code></td>
</tr>
<tr>
<td>number</td>
<td>Numeric input with spinners</td>
<td><code><input type="number" min="0" max="100"></code></td>
</tr>
<tr>
<td>tel</td>
<td>Phone number</td>
<td><code><input type="tel" name="phone"></code></td>
</tr>
<tr>
<td>url</td>
<td>URL with validation</td>
<td><code><input type="url" name="website"></code></td>
</tr>
<tr>
<td>date</td>
<td>Date picker</td>
<td><code><input type="date" name="birthday"></code></td>
</tr>
<tr>
<td>time</td>
<td>Time picker</td>
<td><code><input type="time" name="meeting"></code></td>
</tr>
<tr>
<td>color</td>
<td>Color picker</td>
<td><code><input type="color" name="favcolor"></code></td>
</tr>
<tr>
<td>range</td>
<td>Slider control</td>
<td><code><input type="range" min="0" max="100"></code></td>
</tr>
<tr>
<td>file</td>
<td>File upload</td>
<td><code><input type="file" accept=".pdf,.doc"></code></td>
</tr>
<tr>
<td>checkbox</td>
<td>Multiple selections</td>
<td><code><input type="checkbox" name="agree"></code></td>
</tr>
<tr>
<td>radio</td>
<td>Single selection from group</td>
<td><code><input type="radio" name="gender" value="male"></code></td>
</tr>
<tr>
<td>hidden</td>
<td>Hidden data sent with form</td>
<td><code><input type="hidden" name="token" value="abc"></code></td>
</tr>
<tr>
<td>submit</td>
<td>Submit button</td>
<td><code><input type="submit" value="Send"></code></td>
</tr>
<tr>
<td>reset</td>
<td>Reset form to defaults</td>
<td><code><input type="reset" value="Clear"></code></td>
</tr>
<tr>
<td>button</td>
<td>Clickable button (no default action)</td>
<td><code><input type="button" value="Click"></code></td>
</tr>
</tbody>
</table>
</section>
<section id="labels">
<h2>The label Element</h2>
<p>Labels associate text with form controls, improving accessibility and usability. Clicking the label focuses/activates the associated input.</p>
<pre><!-- Method 1: for/id pairing -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Method 2: Wrapping -->
<label>
Email:
<input type="email" name="email">
</label></pre>
<p><strong>Why labels matter:</strong> Screen readers read labels aloud. Clicking a label focuses the input. Required for accessibility compliance.</p>
</section>
<section id="other-controls">
<h2>Other Form Controls</h2>
<h3>select (Dropdown)</h3>
<pre><label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<optgroup label="Asia">
<option value="lk">Sri Lanka</option>
<option value="in">India</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="fr">France</option>
</optgroup>
</select></pre>
<h3>textarea (Multi-line Text)</h3>
<pre><label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Enter your message..."></textarea></pre>
<h3>fieldset and legend (Grouping)</h3>
<pre><fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
</fieldset></pre>
<h3>button Element</h3>
<pre><button type="submit">Submit Form</button>
<button type="reset">Reset</button>
<button type="button">Custom Action</button></pre>
<p>The button element is more flexible than input type="submit" because it can contain HTML content (icons, text formatting).</p>
</section>What does this code cover?
The input-types section gives you a complete reference table of all 17 HTML5 input types. Each row shows the type value, its purpose, and a code example you can reference in your viva.
The labels section demonstrates both methods of associating labels with inputs: the for/id pairing approach and the wrapping approach. Labels are essential for accessibility because screen readers use them to announce inputs.
The other-controls section covers select dropdowns with optgroup for grouping options, textarea for multi-line input, fieldset/legend for visual grouping, and the button element with its three type values.
- Save forms.html and refresh your browser.
- You should see the input types table with three columns (Type, Purpose, Example), the label code examples in dark code blocks, and the select/textarea/fieldset/button examples below.
Add form validation and a complete registration form example
HTML5 provides built-in validation attributes so the browser can check user input before it reaches the server. Your viva will likely ask about the difference between placeholder and label, so this section addresses that too.
- In forms.html, find the closing </section> tag of the other-controls section.
- Add the validation section, complete form example, and the page closing tags by copying this code below it:
<section id="validation">
<h2>Form Validation</h2>
<p>HTML5 provides built-in form validation attributes that check user input before submission.</p>
<h3>Validation Attributes</h3>
<ul>
<li><code>required</code> - Field must be filled before submission</li>
<li><code>min</code> / <code>max</code> - Minimum/maximum numeric value</li>
<li><code>minlength</code> / <code>maxlength</code> - Minimum/maximum character count</li>
<li><code>pattern</code> - Regular expression the value must match</li>
<li><code>step</code> - Valid number intervals (for number/range inputs)</li>
</ul>
<h3>Placeholder vs Label</h3>
<ul>
<li><strong>Placeholder:</strong> Hint text inside the input that disappears when user types. NOT a replacement for labels</li>
<li><strong>Label:</strong> Permanent visible text that identifies the input. Required for accessibility</li>
</ul>
</section>
<section id="complete-form">
<h2>Complete Form Example</h2>
<pre><form action="/register" method="POST">
<fieldset>
<legend>Registration Form</legend>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required minlength="2" maxlength="50">
<label for="useremail">Email:</label>
<input type="email" id="useremail" name="email" required placeholder="you@example.com">
<label for="userpass">Password:</label>
<input type="password" id="userpass" name="password" required minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="120">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://...">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="500"></textarea>
<label>
<input type="checkbox" name="terms" required>
I agree to the terms and conditions
</label>
<button type="submit">Register</button>
<button type="reset">Clear Form</button>
</fieldset>
</form></pre>
</section>
</main>
<footer>
<p><a href="data-media.html">Previous: Data and Media</a> | <a href="index.html">Index</a></p>
</footer>
</body>
</html>What does this code do?
The validation section lists all HTML5 validation attributes (required, min/max, minlength/maxlength, pattern) and clarifies the difference between a placeholder (temporary hint) and a label (permanent accessible text).
The complete form example ties everything together. It uses fieldset/legend for grouping, multiple input types (text, email, password, number, date, url, radio, checkbox), a textarea, and validation attributes like pattern with a regex for password strength.
- Save forms.html and refresh your browser.
- Scroll to the bottom of the page. You should see the validation attributes list, the placeholder vs label comparison, and the complete registration form code example in a dark code block.
- Click the footer link that says "Previous: Data and Media" to confirm navigation between pages works.
Footer links not working?
Check that the href values in your footer match the exact filenames of your other HTML files. The link to data-media.html must match the filename exactly, including the hyphen and lowercase letters.
Help me fix my navigation links in forms.html
✔️ Awesome, I've got everything!
Double check you have saved forms.html and that you can navigate to it from your index page.
ⓧ I'd like to double check the full code
Here is the complete forms.html file for comparison:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Forms - Web Tech Viva Guide</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>HTML Forms</h1>
<nav><a href="index.html">Back to Index</a></nav>
</header>
<main>
<section id="form-element">
<h2>The form Element</h2>
<p>The <code><form></code> element creates an interactive section for collecting user input and submitting it to a server.</p>
<pre><form action="/submit" method="POST">
<!-- Form controls go here -->
</form></pre>
<h3>Key Attributes</h3>
<ul>
<li><strong>action:</strong> The URL where form data is sent when submitted</li>
<li><strong>method:</strong> The HTTP method used to send data (GET or POST)</li>
</ul>
<h3>GET vs POST</h3>
<table>
<thead>
<tr>
<th>GET</th>
<th>POST</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data appended to URL as query string</td>
<td>Data sent in the request body</td>
</tr>
<tr>
<td>Visible in the address bar</td>
<td>Not visible in the address bar</td>
</tr>
<tr>
<td>Can be bookmarked</td>
<td>Cannot be bookmarked</td>
</tr>
<tr>
<td>Limited data size (URL length limit)</td>
<td>No data size limitation</td>
</tr>
<tr>
<td>Not secure for sensitive data</td>
<td>More secure (not in URL)</td>
</tr>
<tr>
<td>Use for: search, filters, non-sensitive queries</td>
<td>Use for: login, registration, file uploads, sensitive data</td>
</tr>
</tbody>
</table>
</section>
<section id="input-types">
<h2>Input Types</h2>
<p>The <code><input></code> element is the most versatile form element. Its behavior changes based on the <code>type</code> attribute.</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Purpose</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>Single-line text input</td>
<td><code><input type="text" name="username"></code></td>
</tr>
<tr>
<td>password</td>
<td>Hidden text input</td>
<td><code><input type="password" name="pass"></code></td>
</tr>
<tr>
<td>email</td>
<td>Email with validation</td>
<td><code><input type="email" name="email"></code></td>
</tr>
<tr>
<td>number</td>
<td>Numeric input with spinners</td>
<td><code><input type="number" min="0" max="100"></code></td>
</tr>
<tr>
<td>tel</td>
<td>Phone number</td>
<td><code><input type="tel" name="phone"></code></td>
</tr>
<tr>
<td>url</td>
<td>URL with validation</td>
<td><code><input type="url" name="website"></code></td>
</tr>
<tr>
<td>date</td>
<td>Date picker</td>
<td><code><input type="date" name="birthday"></code></td>
</tr>
<tr>
<td>time</td>
<td>Time picker</td>
<td><code><input type="time" name="meeting"></code></td>
</tr>
<tr>
<td>color</td>
<td>Color picker</td>
<td><code><input type="color" name="favcolor"></code></td>
</tr>
<tr>
<td>range</td>
<td>Slider control</td>
<td><code><input type="range" min="0" max="100"></code></td>
</tr>
<tr>
<td>file</td>
<td>File upload</td>
<td><code><input type="file" accept=".pdf,.doc"></code></td>
</tr>
<tr>
<td>checkbox</td>
<td>Multiple selections</td>
<td><code><input type="checkbox" name="agree"></code></td>
</tr>
<tr>
<td>radio</td>
<td>Single selection from group</td>
<td><code><input type="radio" name="gender" value="male"></code></td>
</tr>
<tr>
<td>hidden</td>
<td>Hidden data sent with form</td>
<td><code><input type="hidden" name="token" value="abc"></code></td>
</tr>
<tr>
<td>submit</td>
<td>Submit button</td>
<td><code><input type="submit" value="Send"></code></td>
</tr>
<tr>
<td>reset</td>
<td>Reset form to defaults</td>
<td><code><input type="reset" value="Clear"></code></td>
</tr>
<tr>
<td>button</td>
<td>Clickable button (no default action)</td>
<td><code><input type="button" value="Click"></code></td>
</tr>
</tbody>
</table>
</section>
<section id="labels">
<h2>The label Element</h2>
<p>Labels associate text with form controls, improving accessibility and usability. Clicking the label focuses/activates the associated input.</p>
<pre><!-- Method 1: for/id pairing -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Method 2: Wrapping -->
<label>
Email:
<input type="email" name="email">
</label></pre>
<p><strong>Why labels matter:</strong> Screen readers read labels aloud. Clicking a label focuses the input. Required for accessibility compliance.</p>
</section>
<section id="other-controls">
<h2>Other Form Controls</h2>
<h3>select (Dropdown)</h3>
<pre><label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<optgroup label="Asia">
<option value="lk">Sri Lanka</option>
<option value="in">India</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="fr">France</option>
</optgroup>
</select></pre>
<h3>textarea (Multi-line Text)</h3>
<pre><label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Enter your message..."></textarea></pre>
<h3>fieldset and legend (Grouping)</h3>
<pre><fieldset>
<legend>Personal Information</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname">
</fieldset></pre>
<h3>button Element</h3>
<pre><button type="submit">Submit Form</button>
<button type="reset">Reset</button>
<button type="button">Custom Action</button></pre>
<p>The button element is more flexible than input type="submit" because it can contain HTML content (icons, text formatting).</p>
</section>
<section id="validation">
<h2>Form Validation</h2>
<p>HTML5 provides built-in form validation attributes that check user input before submission.</p>
<h3>Validation Attributes</h3>
<ul>
<li><code>required</code> - Field must be filled before submission</li>
<li><code>min</code> / <code>max</code> - Minimum/maximum numeric value</li>
<li><code>minlength</code> / <code>maxlength</code> - Minimum/maximum character count</li>
<li><code>pattern</code> - Regular expression the value must match</li>
<li><code>step</code> - Valid number intervals (for number/range inputs)</li>
</ul>
<h3>Placeholder vs Label</h3>
<ul>
<li><strong>Placeholder:</strong> Hint text inside the input that disappears when user types. NOT a replacement for labels</li>
<li><strong>Label:</strong> Permanent visible text that identifies the input. Required for accessibility</li>
</ul>
</section>
<section id="complete-form">
<h2>Complete Form Example</h2>
<pre><form action="/register" method="POST">
<fieldset>
<legend>Registration Form</legend>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname" required minlength="2" maxlength="50">
<label for="useremail">Email:</label>
<input type="email" id="useremail" name="email" required placeholder="you@example.com">
<label for="userpass">Password:</label>
<input type="password" id="userpass" name="password" required minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="120">
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://...">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="500"></textarea>
<label>
<input type="checkbox" name="terms" required>
I agree to the terms and conditions
</label>
<button type="submit">Register</button>
<button type="reset">Clear Form</button>
</fieldset>
</form></pre>
</section>
</main>
<footer>
<p><a href="data-media.html">Previous: Data and Media</a> | <a href="index.html">Index</a></p>
</footer>
</body>
</html>All eight pages of your study guide are now complete and navigable. You have a thorough reference covering networking, addressing, protocols, and every major HTML element type. Next up, you can take your guide further with a Secret Mission that adds a dark/light theme toggle and sticky sidebar navigation.
Secret mission
Add a Dark/Light Theme Toggle and Sticky Sidebar Navigation
Your study guide works great, but late-night cramming sessions call for a dark mode. Add a theme toggle that remembers your preference across pages, plus a sticky sidebar that lets you jump between sections without scrolling back to the top.
Clean Up Your Resources
Clean Up Your Resources
Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely locally, so there are no ongoing costs.
Resources you used:
- Project folder web-tech-viva-guide containing all HTML and CSS files.
- HTML files: index.html, networking.html, addressing.html, protocols.html, html-foundations.html, content-elements.html, data-media.html, forms.html.
- Stylesheet: styles.css.
- IntelliJ IDEA project configuration files (if created automatically).
Keep everything running
No action needed. Choose this if you want to keep your study guide accessible for reviewing before your viva exam.
- Your files remain on your computer and take up minimal disk space.
- You can open any of the HTML files directly in your browser whenever you want to study.
- Keep IntelliJ IDEA installed if you plan to make edits or additions before the exam.
Pause - I'll come back to this later
Since this is a local project with no running processes, there is nothing to pause. Your files are static and use no memory or CPU when not open.
- Close the project in IntelliJ IDEA to free up memory.
- Close any browser tabs with the study guide open.
- Your files will still be on your Desktop whenever you want to return.
Delete - I don't want to use this again
Remove all project resources and start fresh. Only do this after your viva exam is complete.
- Close the project in IntelliJ IDEA.
- Delete the entire web-tech-viva-guide folder from your Desktop.
- On macOS, empty your Trash. On Windows, empty your Recycle Bin.
Nice Work!
Nice Work!
Congratulations. You now have a complete Web Technologies viva study guide built entirely in HTML.
You've learned how to:
- Built a multi-page HTML website covering networking fundamentals, internet addressing, and protocols with clear explanations and real examples.
- Demonstrated every HTML element type with working code examples including tables, forms, lists, multimedia, semantic sectioning elements, and metadata.
- Created a navigable offline reference site you can review in your browser during your final days of preparation before your May 16th viva.
- Secret Mission: Added a dark/light theme toggle with localStorage persistence and a sticky sidebar navigation for quick section jumping.
Ready to quiz yourself?