🌐 IT Unit 2: Complete HTML Guide
Based on Pearson Edexcel Scheme of Work (Topic 7 & 11) + Exam Summary
1. Document Structure & Meta Data
Every HTML page must follow a specific structure. This is covered in Scheme of Work 7.1.1 - 7.1.3.
<!DOCTYPE html> <-- Tells browser this is HTML5 -->
<html lang="en"> <-- Declares language -->
<head>
<meta charset="UTF-8"> <-- Character set for special symbols -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <-- For responsive design -->
<meta name="description" content="Page description for SEO">
<meta http-equiv="refresh" content="30"> <-- Refreshes page every 30 secs -->
<title>Page Title</title> <-- Shows in browser tab -->
</head>
<body>
<h1>Visible Content</h1>
</body>
</html>
💡 Exam Tip: Always include
<!DOCTYPE html> as the very first line. Always declare lang="en" in the html tag for accessibility.
2. Syntax & Global Attributes
Understanding how to write clean code and use attributes correctly (SoW 7.1.4 & 7.1.5).
Rules for Clean Syntax:
- Use lowercase for all element names (e.g.,
<body>not<BODY>). - Use double quotes for attribute values (e.g.,
href="link.html"). - Indent nested elements for readability.
- Self-closing tags (like
<img>) do not require a forward slash in HTML5, but it is acceptable.
Global Attributes
These attributes can be used on almost any HTML element:
id: Unique identifier for one element (used for CSS/JS).class: Identifier for multiple elements (used for CSS).style: Used for inline CSS (not recommended for large projects).hidden: Hides the element from view (Boolean attribute).tabindex: Controls the order of tab navigation (0 = default, -1 = no tab stop).data-*: Stores custom data (e.g.,data-user-id="123").
3. Text Formatting & Semantic HTML
Semantic HTML describes the meaning of the content, not just how it looks. This is crucial for SEO and Accessibility (SoW Topic 11).
Headings & Paragraphs
<h1>to<h6>: Headings. Only one<h1>per page.<p>: Paragraphs.<hr>: Thematic break (horizontal rule).<br>: Line break (self-closing).
Emphasis & Importance (Exam Focus!)
⚠️ Know the difference:
<em>vs<i>: Both look italic.<em>adds emphasis (semantic),<i>is just stylistic.<strong>vs<b>: Both look bold.<strong>adds importance (semantic),<b>is just stylistic.
Other Text Semantics
<blockquote>: Long quotation from another source.<q>: Short inline quotation.<cite>: Title of a work (e.g., book name).<abbr>: Abbreviation (usetitleattribute for full text).<dfn>: Defines a term.<address>: Contact information for the author/owner.<mark>: Highlights text (like a highlighter pen).<code>: Displays computer code.
Semantic Layout Tags
Use these instead of generic <div> tags where possible:
<header>: Introductory content or nav links.<footer>: Footer information (copyright, contacts).<nav>: Navigation links.<main>: The dominant content of the body (only one per page).<article>: Self-contained content (e.g., blog post).<section>: Thematic grouping of content.<aside>: Content indirectly related to the main content (sidebar).<figure>&<figcaption>: Media content with a caption.<div>&<span>: Non-semantic containers (use for layout only).
4. Lists
SoW 7.2.4 covers three types of lists.
<!-- Unordered List (Bullets) -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- Ordered List (Numbers) -->
<ol type="A" start="3"> <-- Starts at C -->
<li>Item A</li>
</ol>
<!-- Definition List (Terms & Descriptions) -->
<dl>
<dt>HTML</dt> <-- Data Term -->
<dd>HyperText Markup Language</dd> <-- Data Definition -->
</dl>
💡 Nesting: You can put a list inside another list item (
<li>).5. Links (Anchor Tags)
SoW 7.2.5. The <a> tag uses the href attribute.
- External:
<a href="https://google.com">Google</a> - Internal:
<a href="contact.html">Contact</a> - Email:
<a href="mailto:test@example.com">Email</a> - New Tab: Add
target="_blank". - Anchor Link: Link to a specific part of a page using ID.
- Step 1:
<h2 id="section1">Top</h2> - Step 2:
<a href="#section1">Jump to Top</a>
- Step 1:
6. Tables
SoW 7.3.2. Used for data, not layout.
<table>
<thead> <-- Table Header Group -->
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody> <-- Table Body Group -->
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</tbody>
<tfoot> <-- Table Footer Group -->
<tr>
<td colspan="2">End of List</td>
</tr>
</tfoot>
</table>
Key Attributes:
colspan="2": Cell spans 2 columns.rowspan="2": Cell spans 2 rows.
7. Images, Audio, Video & Iframes
Images (SoW 7.3.1)
<img src="photo.jpg" alt="Description" width="300">
⚠️ Accessibility: The
alt attribute is mandatory for accessibility. If the image is decorative, use alt="".Audio & Video (SoW 7.3.5)
Use the <source> element to provide multiple formats for compatibility.
<video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Iframes (SoW 7.3.6)
Embeds another website (e.g., YouTube, Maps).
<iframe src="https://www.youtube.com/embed/ID" width="560" height="315"></iframe>
8. Forms (HTML Structure)
SoW 7.3.3. While validation is JavaScript, the structure is HTML.
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter name">
<br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<br>
<label>Comments:</label>
<textarea rows="4" cols="50"></textarea>
<br>
<label>Country:</label>
<select>
<option value="uk">UK</option>
<option value="us">USA</option>
</select>
<br>
<input type="submit" value="Send">
</form>
💡 Grouping: Use
<fieldset> to group related form elements and <legend> for the group title.9. Block vs Inline Elements
SoW 7.2.1 & 7.2.2. Understanding content models.
- Block-level: Starts on a new line, takes full width (e.g.,
<div>,<p>,<h1>,<table>). - Inline: Stays on the same line, takes only necessary width (e.g.,
<span>,<a>,<img>,<strong>).
📝 Past Paper Style Questions
Q1. Which tag is used to define a short inline quotation?
<q> (Use <blockquote> for long quotations).Q2. What is the difference between <strong> and <b>?
Both make text bold, but
<strong> indicates importance (semantic), while <b> is purely stylistic.Q3. Identify the error:
<img src="pic.jpg">Missing the
alt attribute. All images must have alt text for accessibility (WCAG).Q4. Which attribute allows a table cell to span across two columns?
colspan="2"Q5. What is the purpose of the <meta name="viewport"> tag?
It controls the layout on mobile browsers (responsive design), ensuring the page scales correctly.
Q6. Which element is used to group related form elements together?
<fieldset> (with <legend> for the caption).Q7. Spot the Error:
<ol type="A" start="3"> <li>Item</li> </ol>. What letter does the list start with?It starts with C (A=1, B=2, C=3).
Based on Pearson Edexcel International Advanced Level Information Technology Unit 2 Scheme of Work (Topic 7 & 11).
🎓 Expert ICT, Coding, School Classes, Digital Marketing & University Project Guidance
Struggling with your university final year project? Want to master coding, upscale your business with expert digital marketing, or learn absolute computer basics from scratch? We offer high-quality individual and group online classes conducted in English, Sinhala, or Tamil mediums. Get guaranteed academic success and professional growth with tailored guidance.
🎓 University Final Year Project Guidance & AI
Get specialized, end-to-end mentoring and technical support to pass your degree or master's program with flying colors:
- 🏫 Targeted Institutes: Expert guidance tailored for BIT UCSC, UoM, SLIIT, NIBM, and other leading universities.
- 🔬 Postgraduate Support: Comprehensive assistance for MSc Software Final Year Projects.
- 🤖 AI & Smart Applications: Step-by-step implementation of AI, Machine Learning (ML), and automation modules.
- ✅ Guaranteed Success: Help with documentation, system architecture, coding, and viva preparation.
🏫 School ICT & Corporate Beginner Classes
- 💻 Non-IT Staff Computer Basics: Absolute beginner-friendly online classes covering essential computer skills, office tools, and internet operations.
- 🎒 Primary & Secondary (Grades 1-10): Interactive online ICT classes tailored to build strong foundations from early ages.
- 📝 Exam Prep: Dedicated training packages for GCE O/L, GCE A/L ICT, and GIT exams.
- 🌍 Global Syllabuses: Complete curriculum coverage for Local, Edexcel, and Cambridge in English & Tamil Mediums.
📢 Software Development & Digital Marketing Services
- ⚙️ Software & Web Development: Professional custom software application and website development built using PHP & MySQL.
- 🎯 Social Media Management: Content creation, publishing, and channel management for Facebook, Instagram, TikTok, and YouTube.
- 📈 Ad Boosting: Highly targeted paid advertising campaigns to drive leads, traffic, and sales to your business.
📞 Connect With Us Instantly
Book your slot for online classes or get a premium tech service quote today!
💬 WhatsApp: +94 729622034
📧 Email: ITClassSL@gmail.com
🌐 Explore Our Resources & Communities
Stay updated with our latest tutorials, project ideas, and student guides across all our official platforms:
- 📺 YouTube Tutorials: Subscribe to our Channel
- 💼 Professional Network: Connect on LinkedIn
- ✍️ Tech Blog: Visit our WordPress Site
- ❓ Project Q&A: Follow our Quora Guide Profile
- 📰 Monthly Updates: Read Our Newsletter
- 🌐 Official Portfolios: Wix Site | Google Business | Strikingly Portfolio
- 🗣️ Student Forum: Join our ElaKiri Discussion Thread
No comments:
Post a Comment