HTML

Overview

HTML (Hypertext Markup Language) is the foundational language used to create and structure web pages. HTML allows developers to add elements like text, images, links, and forms to web pages and structure them in a way that browsers can interpret and display for users. A good understanding of HTML is essential for building websites and is complemented by other technologies like CSS for styling and JavaScript for interactivity.

Purpose of HTML

Structure: HTML provides the structure for web content, allowing developers to organise information hierarchically.
Display: Browsers interpret HTML tags to display web content, creating a user-friendly interface from the raw code.
Accessibility: HTML tags support features that make web content accessible to all users, including screen readers for visually impaired users.

HTML Elements and Tags

HTML consists of tags that define different elements on a webpage.
Tags are written within angle brackets, like <tagname>, and most tags have an opening <tagname> and a closing </tagname>.

Common tags (based on Appendix 5d) include:

<html>: Root tag for an HTML document.
<head>: Contains meta-information about the document (like the title or links to CSS files).
<title>: Sets the title of the webpage, displayed in the browser tab.
<body>: Contains all the visible content of a webpage, such as text, images, and links.
<h1>, <h2>, <h3>: Define headings, with <h1> as the largest and <h3> as a smaller subheading.
<img>: Displays an image; commonly includes attributes like src (image source URL), alt (alternative text), height, and width.
<a>: Creates hyperlinks; uses the href attribute to define the link destination.
<div>: Creates a division or section of the page, often used for layout purposes.
<form>: Defines an HTML form for user input.
<input>: Specifies an input field within a form, such as text boxes or submit buttons.
<p>: Defines a paragraph of text.
<ul> and <ol>: Define unordered (bulleted) and ordered (numbered) lists, with <li> as list items.
<script>: Embeds JavaScript code within HTML.

Basic HTML Document Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a paragraph of text on my webpage.</p>
    <img src="image.jpg" alt="Sample image" width="500" height="300">
    <a href="<https://example.com>">Visit Example</a>
  </body>
</html>

Explanation:

The <!DOCTYPE html> declaration defines the document as HTML5.
The <html> element wraps the entire HTML document.
The <head> section contains metadata and links, such as the <title> and <link> tags.
The <body> section includes all visible content, such as headings, text, images, and links.

Writing and Interpreting HTML Code

HTML code is straightforward, with tags that organise and describe elements. Familiarity with common tags and attributes enables you to read, write, and modify HTML documents effectively.

infoNote

For example:

<h1>About Us</h1>
<p>Welcome to our website! We are committed to providing quality service.</p>
<a href="contact.html">Contact Us</a>

This code defines a heading with <h1>, a paragraph with <p>, and a hyperlink to the "Contact Us" page with <a href="contact.html">.

Benefits and Drawbacks of HTML

Benefits:

Universal Compatibility: HTML is supported by all modern browsers.
Easy to Learn: The syntax is straightforward, making it accessible for beginners.
Flexible Structure: HTML can be combined with CSS for styling and JavaScript for interactivity.

Drawbacks:

Limited Styling: HTML alone cannot style content; it requires CSS.
No Interactivity: HTML is static and doesn't handle dynamic content without JavaScript or server-side languages.

Example of Using HTML and JavaScript

Client-Side Validation with JavaScript:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Submit" onclick="validateForm()">
</form>
<script>
  function validateForm() {
    let username = document.getElementById("username").value;
    if (username === "") {
      alert("Username cannot be empty");
      return false;
    }
    return true;
  }
</script>

Explanation: The JavaScript function validateForm checks if the username field is empty before submitting the form, helping ensure required fields are filled in.

Note Summary

infoNote

Common Mistakes

Forgetting Closing Tags: HTML tags generally have opening and closing tags; forgetting a closing tag can break the structure.
Misusing Attributes: Ensure attributes like src, href, and alt are used correctly within their tags to avoid broken images, links, or accessibility issues.
Incorrect Nesting: Certain tags should be nested properly (e.g., <li> tags must be inside <ul> or <ol> lists).

infoNote

Key Takeaways

HTML Purpose: HTML structures content for display in a web browser, forming the foundation of all web pages.
Common Tags: Familiar tags include <html>, <head>, <body>, <h1> to <h3>, <p>, <img>, <a>, <div>, <form>, and <input>.
Working with HTML: Writing, reading, and amending HTML is essential for creating webpages.

HTML Simplified Revision Notes for A-Level OCR Computer Science

HTML

Overview

Purpose of HTML

HTML Elements and Tags

Common tags (based on Appendix 5d) include:

Basic HTML Document Structure

Explanation:

Writing and Interpreting HTML Code

Benefits and Drawbacks of HTML

Benefits:

Drawbacks:

Example of Using HTML and JavaScript

Client-Side Validation with JavaScript:

Note Summary

Common Mistakes

Key Takeaways

500K+ Students Use These Powerful Tools to Master HTML For their A-Level Exams.

Other Revision Notes related to HTML you should explore