Skip to content

HTML, CSS and JavaScript

1.3.4 Web technologies · Paper 1 · 6 flashcards · 5 questions

The web is built on three core technologies that work together: HTML for structure, CSS for presentation, and JavaScript for interactivity.

HTML (Hypertext Markup Language)

Definition
HTML (Hypertext Markup Language) is the standard language for creating web pages. It defines the structure and content of a page using tags.
Key Point
HTML Document Structure:
• <!DOCTYPE html> - Declares document type
• <html> - Root element, contains entire page
• <head> - Contains metadata (title, stylesheets, scripts)
• <body> - Contains visible content

Common HTML Tags

Key Point
<h1> to <h6>
• Purpose: Headings (h1 largest)
• Example: <h1>Main Title</h1>

<p>
• Purpose: Paragraph
• Example: <p>Some text</p>

<a>
• Purpose: Hyperlink
• Example: <a href="url">Link text</a>

<img>
• Purpose: Image
• Example: <img src="photo.jpg" alt="description">

<ul>, <ol>
• Purpose: Lists (unordered/ordered)
• Example: <ul><li>Item</li></ul>

<div>
• Purpose: Division/container
• Example: <div class="section">...</div>

<span>
• Purpose: Inline container
• Example: <span>text</span>

<table>
• Purpose: Table
• Example: <table><tr><td>Cell</td></tr></table>

<form>
• Purpose: Form for user input
• Example: <form action="/submit">...</form>

<input>
• Purpose: Form input field
• Example: <input type="text" name="username">
Worked Example
Worked Example: Complete HTML Page
html 
<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>

    <h2>My Favourite Things</h2>
    <ul>
        <li>Programming</li>
        <li>Music</li>
        <li>Gaming</li>
    </ul>

    <a href="https://example.com">Visit Example</a>
    <img src="photo.jpg" alt="A photo" width="300">
</body>
</html>

CSS (Cascading Style Sheets)

Definition
CSS (Cascading Style Sheets) controls the visual appearance of HTML elements - colours, fonts, layout, spacing, and more.
Worked Example
Three Ways to Add CSS

1) Inline CSS
html 
<p style="color: red; font-size: 16px;">Red text</p>
2) Internal CSS
html 
<head>
  <style>
    p { color: red; }
  </style>
</head>
3) External CSS (best practice)
html 
<head>
  <link rel="stylesheet" href="styles.css">
</head>

CSS Selectors and Properties

Worked Example
CSS Syntax and Selector Examples
css 
selector {
  property: value;
  property: value;
}

/* Select all paragraphs */
p {
  color: blue;
  font-size: 14px;
}

/* Select by class (.) */
.highlight {
  background-color: yellow;
}

/* Select by ID (#) */
#header {
  font-weight: bold;
}

/* Select by element and class */
p.intro {
  font-style: italic;
}
Key Point
color
• Purpose: Text colour
• Example Values: red, #FF0000, rgb(255,0,0)

background-color
• Purpose: Background colour
• Example Values: blue, #0000FF

font-size
• Purpose: Text size
• Example Values: 16px, 1.2em, 120%

font-family
• Purpose: Font type
• Example Values: Arial, serif, sans-serif

margin
• Purpose: Space outside element
• Example Values: 10px, 5%

padding
• Purpose: Space inside element
• Example Values: 10px, 5%

border
• Purpose: Element border
• Example Values: 1px solid black

width, height
• Purpose: Dimensions
• Example Values: 200px, 50%

JavaScript

Definition
JavaScript is a programming language that adds interactivity to web pages. It runs in the browser and can respond to user actions in real-time.
Key Point
What JavaScript Can Do:
• Respond to user events (clicks, key presses, form submissions)
• Modify HTML content dynamically
• Validate form input before submission
• Create animations and visual effects
• Communicate with servers (AJAX)
• Store data locally in the browser
Worked Example
JavaScript Examples
javascript 
// Change text content
document.getElementById("demo").innerHTML = "Hello World!";

// Respond to button click
document.getElementById("btn").onclick = function() {
  alert("Button clicked!");
};

// Validate form input
function validateForm() {
  var email = document.getElementById("email").value;
  if (email == "") {
    alert("Email is required");
    return false;
  }
  return true;
}

// Change CSS style
document.getElementById("box").style.backgroundColor = "red";

Adding JavaScript to a Web Page

JavaScript is written between <script> tags inside the HTML, or kept in a separate file that the page loads with <script src="code.js"></script>. The browser interprets it on the user's own computer: it is not compiled first, so the same script runs on any device that has a browser. It will not run if the user has disabled JavaScript.

Worked Example
Worked Example: A Script That Checks a Form
html 
<html>
<body>
    <form>
        <input type="text" id="firstName" name="firstName">
        <input type="submit" value="Send" onclick="return checkName()">
    </form>
    <p id="message"></p>

    <script>
        function checkName() {
            var name = document.getElementById("firstName").value;
            if (name == "") {
                document.getElementById("message").innerHTML = "Enter your name";
                return false;
            }
            alert("Thank you, " + name);
            return true;
        }
    </script>
</body>
</html>
What happens:
• Clicking the button calls the function checkName
• document.getElementById("firstName").value reads what was typed into the text box
• If the box is empty, innerHTML writes an error message into the paragraph that has the id message, and returning false stops the form being sent
• Otherwise alert shows a pop-up box and the form is sent
• document.write("text") is another way to produce output: it writes straight into the page