HTML, CSS and JavaScript

HTML, CSS and JavaScript. See appendix 5d.

1.3.4 Web Technologies

Web Technologies — Note 1 of 4

Candidates need to understand the purpose of HTML, CSS and JavaScript. Candidates should have experience of writing webpages using HTML, CSS and JavaScript. Candidates need to be able to recognise the code in Appendix 5d, and be able to read, write, amend and interpret code using HTML, CSS and JavaScript.

What you need to know

Web pages are built using three technologies: HTML defines the structure and content, CSS defines the presentation, and JavaScript adds interactivity and processing in the browser. You need to be able to read, write, amend and interpret code using the elements listed in appendix 5d.

What to know

External style sheets keep styling separate from content, so the look of a whole site can be changed by editing one file.

Key terms

Exam tipCommon mistake

HTMLHyperText Markup Language: Uses tags to define the structure and content of a web page, e.g. headings, paragraphs, images and links.
HTML tags to know: <html>, <head>, <title>, <body>, <h1> to <h3>, <p>, <img> (src, alt, height, width), <a> (href), <div>, <form>, <input> (text and submit), <ol>, <ul>, <li>, <link> and <script>.
CSSCascading Style Sheets: Defines how HTML elements are displayed, e.g. colours, fonts, borders and sizes.
CSS can be applied inline with the style attribute, or in an external style sheet linked with <link>. Selectors can target elements (h1), classes (.infoBox) and identifiers (#menu).
CSS properties to know: background-color, border-color, border-style, border-width, color (named and hex colours), font-family, font-size, height, width.
JavaScript: A scripting language that runs in the browser to make pages interactive, e.g. validating form input before it is sent.
JavaScript output: change an element with document.getElementById("id").innerHTML = ..., write with document.write(...), or show an alert(...). Input is read from form elements.
Exam tip: Minor JavaScript syntax errors are not penalised, but the logic must be correct. You will not be asked to use JavaScript for OOP or file handling.

Exam technique

Mistake:Using . for an id selector or # for a class. Class = .className, id = #idName.

Code examples

HTML page with external CSS and JavaScript

text

<html>
<head>
  <title>Revision Quiz</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Quick Quiz</h1>
  <div class="infoBox">
    <p>What is 6 x 7?</p>
    <input type="text" id="answer">
    <button onclick="check()">Check</button>
    <p id="result"></p>
  </div>
  <script>
    function check() {
      var answer = document.getElementById("answer").value;
      if (answer == "42") {
        document.getElementById("result").innerHTML = "Correct!";
      } else {
        document.getElementById("result").innerHTML = "Try again";
      }
    }
  </script>
</body>
</html>

style.css

text

h1 {
  color: #A2441B;
  font-family: Arial;
}
.infoBox {
  background-color: lightgrey;
  border-style: solid;
  border-width: 2px;
}
#result {
  font-size: 20px;
}

Ready to test yourself?

Practise 1.3.4 questions

← Previous topicClient-server and peer to peer1.3.3 Networks Next note →Search engine indexing1.3.4 Web Technologies

Back to Web Technologies