HTML (OCR A-Level Computer Science): Revision Notes
📚 Revision Notes
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 likesrc(image source URL),alt(alternative text),height, andwidth.<a>: Creates hyperlinks; uses thehrefattribute 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, andaltare 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.