Web Authoring Fundamentals
From the Digital technology Track test 1 curriculum
Web Authoring Fundamentals
TL;DR
Web authoring is all about creating content for the internet using standard languages like HTML, CSS, and JavaScript. You'll learn how these languages work together to build everything you see and interact with online. Mastering these basics lets you design and develop your own web pages.
1. The Mental Model
Think of a website as a house: HTML builds the structure (walls, rooms), CSS decorates it (paint, furniture), and JavaScript adds interactivity (lights turning on, doors opening). You're the architect, interior designer, and smart home programmer all in one.
2. The Core Material
When you author a web page, you're primarily working with three core technologies:
2.1 HTML (HyperText Markup Language)
Photo by Pixabay on Pexels
HTML provides the structure and content of a web page. It uses "tags" to define different parts, like headings, paragraphs, images, and links. Browsers read these tags to know what to display.
Here's a basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Page!</h1>
<p>This is a paragraph of text.</p>
<a href="https://www.example.com">Visit Example.com</a>
<img src="image.jpg" alt="A descriptive image">
</body>
</html>
<!DOCTYPE html>: Declares the document type. Always at the top.<html>: The root element that wraps all content.<head>: Contains metadata about the page (not visible on the page itself, but important for browsers and search engines).<title>: Sets the title that appears in the browser tab.<link rel="stylesheet" href="style.css">: Links to an external CSS file.<body>: Contains all the visible content of the web page.<h1>,<p>,<a>,<img>: Examples of common HTML elements for headings, paragraphs, links, and images.
2.2 CSS (Cascading Style Sheets)
Photo by Bibek ghosh on Pexels
CSS controls the presentation and styling of your HTML content. It describes how HTML elements should be displayed – their colors, fonts, spacing, layout, etc. "Cascading" means styles can be inherited and overridden.
You can apply CSS in three ways:
1. Inline: Directly in an HTML tag (generally discouraged for larger projects).
2. Internal: Inside a <style> tag in the HTML <head>.
3. External: In a separate .css file, linked via <link> (most common and best practice).
Example style.css for the HTML above:
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
line-height: 1.6;
}
a {
color: #007bff;
text-decoration: none; /* Removes underline */
}
a:hover {
text-decoration: underline; /* Adds underline on hover */
}
2.3 JavaScript (JS)
Photo by RealToughCandy.com on Pexels
JavaScript adds interactivity and dynamic behavior to your web pages. It's a programming language that can change HTML content, update CSS styles, respond to user actions (like clicks), fetch data, and much more.
You can embed JavaScript directly in an HTML file using <script> tags or link to an external .js file.
<!-- Inside the <body>, usually before the closing </body> tag -->
<button onclick="showAlert()">Click Me!</button>
<p id="message">Original message.</p>
<script>
function showAlert() {
alert("Hello from JavaScript!");
document.getElementById("message").innerText = "Message changed!";
}
</script>
Here's how these pieces fit together:
graph TD
A["User's Browser"] --> B["HTTP Request"]
B --> C["Web Server"]
C --> D["HTML File"]
D --> E["Link to CSS?"]
D --> F["Link to JS?"]
E --> G["CSS File"]
F --> H["JS File"]
C --> I["Send HTML, CSS, JS"]
I --> J["Browser Renders & Interprets"]
J --> K["Structured Content (from HTML)"]
J --> L["Styled Appearance (from CSS)"]
J --> M["Interactive Behavior (from JS)"]
K & L & M --> N["Rendered Web Page"]
3. Worked Example
Let's combine these concepts to create a simple "To-Do List" page.
First, create an index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Simple To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task...">
<button id="addTaskBtn">Add Task</button>
<ul id="taskList">
<!-- Tasks will be added here by JavaScript -->
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
Next, create a style.css file in the same directory:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e0f2f7;
display: flex;
justify-content: center;
align-items: flex-start; /* Align to the top, not center vertically */
min-height: 100vh;
margin: 0;
padding-top: 50px; /* Add some padding from the top */
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
text-align: center;
}
h1 {
color: #2c3e50;
margin-bottom: 25px;
}
#taskInput {
width: calc(100% - 100px); /* Adjust width considering button */
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 10px;
font-size: 16px;
}
#addTaskBtn {
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s ease;
}
#addTaskBtn:hover {
background-color: #218838;
}
#taskList {
list-style: none;
padding: 0;
margin-top: 20px;
}
#taskList li {
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 10px 15px;
margin-bottom: 8px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 17px;
color: #333;
}
#taskList li.completed {
text-decoration: line-through;
color: #999;
background-color: #e9ecef;
}
#taskList li button {
background-color: #dc3545;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
}
#taskList li button:hover {
background-color: #c82333;
}
Finally, create a script.js file in the same directory:
```javascript
document.addEventListener('DOMContentLoaded', () => {
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');
addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addTask();
}
});
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') {
alert("Please enter a task!");
return;
}
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>
Frequently asked about Web Authoring Fundamentals
Study this next
Get the full Digital technology Track test 1 curriculum
Clone the complete plan to your dashboard for unlimited AI-generated notes, practice quizzes, and a personalised revision schedule.
Create Free Account