HTML & CSS Cheat Sheet
📌📌 Photoshop Basics for ICT Exams
1. Opening Files
• File → Open → select the image(s).
• Sometimes they give multiple files (like logo + background).
2. Layers (most important concept)
• Think of layers as transparent sheets stacked on top of each other.
• Always check the Layers Panel.
• You can hide/show, move up/down, and rename layers.
3. Selection Tools
Used to pick which part of an image you want to edit.
• Marquee Tool → rectangular/elliptical selections.
• Lasso Tool → freehand selection.
• Magic Wand / Quick Selection Tool → selects by color/contrast.
👉👉 In exams: they might say “remove the background of the logo”. Use Magic Wand + Delete.
4. Crop Tool
• Used to cut out unwanted parts of an image.
• Crop Tool → drag box → Enter.
👉👉 Exam tip: “Crop image to only show the person’s face”.
5. Resize & Scale
• Image → Image Size (changes whole image size).
• Edit → Free Transform (Ctrl+T) to resize a layer/object.
👉👉 Exam tip: “Resize the logo so it fits in the top corner.”
6. Move Tool
• Used to drag layers around.
👉👉 Exam: “Place the logo at the bottom right corner.”
7. Eraser Tool
• Erases pixels on a layer.
👉👉 Exam: “Remove unwanted text from image.”
8. Clone Stamp / Healing Brush
• Clone Stamp → copies pixels from one area to another (good for removing blemishes).
• Healing Brush → blends surrounding area.
👉👉 Exam: “Remove the date stamp from the corner of a photo.”
9. Text Tool
• T tool to add/edit text.
• You can change font, size, color, alignment in the top bar.
👉👉 Exam: “Insert the text ‘Visit Turkey’ in 24pt Arial Bold, white font.”
10. Filters / Adjustments
• Brightness/Contrast → fix lighting.
• Hue/Saturation → change colors.
• Blur/Sharpen → adjust clarity.
👉👉 Exam: “Make the sky appear brighter blue.”
11. Saving
• Always save in .PSD (keeps layers).
• Export in .JPG or .PNG (final version).
👉👉 Exam: they’ll say something like “Save your final image as JPG named
[Link]”.
📍📍 Typical Exam Tasks
1. Crop an image to focus on the subject.
2. Remove background from a logo.
3. Place a logo onto a poster and resize it.
4. Add text with exact formatting.
5. Adjust brightness/saturation to enhance image.
6. Save final version in required format.
Video tag:
<table border="1">
<tr>
<td>
<video src="video.mp4" controls width="100%"></video>
</td>
</tr>
</table>
Explanation:
• width="100%" → makes the video stretch to the full width of the cell it’s inside.
• controls → adds play/pause buttons (usually required).
• You put this code inside the <td> tag where you want the video.
If the question says CSS only, then you’d instead do this:
<video src="video.mp4" controls style="width:100%;"></video>
Both work the same way.
Think of Dreamweaver like this:
• Step 1: Insert the object (text, image, video, whatever).
• Step 2: Select it (highlight the text, or click the image/video).
• Step 3: Look in the Properties panel → there’s a Link field. That’s where you either:
o Type [Link] → for email.
o Browse and pick a file (like another HTML page or an image/video in your
folder) → for local links.
o Paste a full URL (like [Link] → for website links.
Dreamweaver auto-writes the <a href="...">...</a> code for you.
So yeah, anytime you want to hyperlink something, don’t type the code, just use that Link box.
HTML
Got it — that’s straight from the IGCSE ICT 0417 syllabus for Web Authoring (HTML +
CSS). I’ll go line by line and explain what each part means with examples, notes, and exam
tips.
1. Layers of a Webpage
• Content layer (HTML) → The structure & information (text, images, tables, links).
• Presentation layer (CSS) → How it looks (fonts, colors, layout).
• Behaviour layer (JavaScript) → How it behaves (interactivity, animations, validations).
👉👉 In your exam you mostly deal with HTML (content) + CSS (presentation).
2. Head Section of Webpage
This part contains info about the webpage (not visible in body).
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title> <!-- Page title (shows on browser tab) -->
<!-- External CSS (presentation layer) -->
<link rel="stylesheet" href="[Link]">
<!-- Meta tags -->
<meta charset="UTF-8"> <!-- character set, important for language -->
<meta name="description" content="My first webpage">
<meta name="keywords" content="IGCSE, HTML, CSS, exam">
<meta name="author" content="Ali">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Default target -->
<base target="_blank"> <!-- makes links open in new tab/window -->
</head>
✅ Exam Tip: Always link CSS using relative file path → e.g. href="[Link]" if in same
folder, or href="css/[Link]" if in a subfolder.
3. Body Section of Webpage
This is the visible content.
a) Tables
<table border="1" width="80%">
<tr>
<th>Name</th> <!-- table header -->
<th>Age</th>
</tr>
<tr>
<td rowspan="2">Ali</td> <!-- spans 2 rows -->
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
</table>
• rowspan → merge cells vertically.
• colspan → merge cells horizontally.
• Widths/heights can be set in px or %.
b) Objects in a Page
• Text → <p>Hello World</p>
• Image:
<img src="[Link]" alt="My Photo" width="200" height="150">
• Audio:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
• Video:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
✅ controls → shows play/pause buttons
✅ autoplay → plays automatically
✅ Always use alt text for images (accessibility + exam mark).
c) Div & Classes
<div class="highlight">
<p>This is inside a div with a class</p>
</div>
• <div> groups elements together.
• Classes allow CSS styling of specific groups.
d) Text Styles
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller heading</h3>
<p>Normal paragraph text</p>
<ul>
<li>List item</li>
</ul>
e) Bookmarks & Hyperlinks
1. Bookmark → mark a spot in the same page.
<h2 id="top">Top of Page</h2>
2. Hyperlinks:
<!-- To bookmark -->
<a href="#top">Go to Top</a>
<!-- To another local page -->
<a href="[Link]">Next Page</a>
<!-- To website -->
<a href="[Link]
<!-- To email -->
<a href="[Link] Email</a>
<!-- Open in new tab -->
<a href="[Link]" target="_blank">Open Page 2 in New Tab</a>
<!-- Open in a named window -->
<a href="[Link]" target="frame1">Open in frame1</a>
4. Lists (Ordered & Unordered)
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>
✅ You can apply CSS styles to lists (e.g., change bullet style).
Summary (What Exam Wants You to Know)
• Head section: title, CSS link, meta tags, base target.
• Body: headings, text, images, tables, audio/video, lists, divs, hyperlinks, bookmarks.
• Attributes: width, height, alt, colspan, rowspan, autoplay, controls, target.
• Navigation: internal (bookmarks), external (URLs), local (other .html files), email links.
• Relative paths → essential for practical exam.
Nice, now you’ve got the full HTML + CSS syllabus parts here. Let’s break it down in detail
again, but I’ll keep it exam-focused so you don’t drown in info.
HTML (Content Layer) – What to Know
1. Head vs Body
• Head → invisible info about the page (title, meta, CSS link).
• Body → visible content (text, images, links, tables).
2. Tables
• Used to organise content into rows/columns.
• <table>, <tr>, <th>, <td> → structure.
• Attributes: rowspan, colspan, width in % or px.
👉👉 In exams, don’t confuse tables with CSS layout (Cambridge still tests tables for structure).
3. Metatags (inside <head>)
Purpose = info for browsers + search engines.
Examples:
<meta charset="UTF-8">
<meta name="keywords" content="ICT, IGCSE, HTML">
<meta name="author" content="Ali">
<meta name="description" content="Revision website">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
• charset → encoding (UTF-8 supports most languages).
• keywords → SEO for search engines.
• author → who made the page.
• description → short summary for search engines.
• viewport → makes site mobile-friendly.
4. Hyperlinks
Function = move user from one place to another.
Types:
<!-- External website -->
<a href="[Link] Cambridge</a>
<!-- Local page -->
<a href="[Link]">Page 2</a>
<!-- Email -->
<a href="[Link] me</a>
5. Bookmarks
• Concept = jump to a section on the same page.
• Create with id:
<h2 id="top">Top of Page</h2>
<a href="#top">Go to Top</a>
6. Anchor
• Anchor = <a> tag (creates hyperlink/bookmark).
• Works with href.
• Example: <a href="#section1">Jump to Section 1</a>
7. Relative vs Absolute Paths
• Relative path = based on folder location.
o images/[Link]
• Absolute path = full location on computer/URL.
o C:/Users/Ali/Desktop/[Link] OR [Link]
👉👉 Exam Rule: Never use absolute local paths (C:/…). Examiners won’t be able to open it.
Always use relative.
CSS (Presentation Layer) – What to Know
1. Where Styles Go
• External stylesheet → saved as .css, linked in <head>.
• Internal stylesheet → inside <style> in <head>.
• Inline style → directly in the tag (<p style="color:red;">).
👉👉 In exam, mostly external. Inline just to show you know.
2. Background Properties
body {
background-color: lightblue;
background-image: url("[Link]");
}
3. Font Properties
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: black;
text-align: center;
font-weight: bold; /* bold */
font-style: italic; /* italic */
}
4. Tables with CSS
table {
border-collapse: collapse; /* makes borders clean */
border: 2px solid black;
}
th {
background-color: lightgray;
text-align: center;
padding: 10px;
}
td {
border: 1px solid black;
padding: 5px;
}
• Spacing = cellspacing (CSS = border-spacing).
• Padding = space inside cells.
5. Classes
• Class = reusable style, applied with class="name".
.highlight {
background-color: yellow;
font-weight: bold;
}
<p class="highlight">This text is highlighted.</p>
6. Tag Selectors
h1 { color: red; }
h2 { font-size: 20px; }
p { line-height: 1.5; }
li { list-style-type: square; }
7. Comments in CSS
/* This is a comment in CSS */
8. Characteristics of CSS
• Cascade = hierarchy:
o Inline > Internal > External (inline overrides everything).
• Attached stylesheet vs inline:
o Attached = linked .css file (best practice).
o Inline = inside HTML (for single-use).
• Style vs Class:
o Style = tag selector (applies to all <p>).
o Class = specific style for chosen elements only.
• Relative path for CSS:
• <link rel="stylesheet" href="[Link]">
Never C:/Users/Desktop/[Link] → won’t work in exam.
Exam Survival Tips
1. Always:
o Save HTML as .html
o Save stylesheet as .css
o Link CSS with relative path.
2. Use alt text for all images.
3. Don’t forget <title> in head.
4. Tables: know rowspan and colspan.
5. Know difference between inline, internal, external CSS.
6. Classes vs tags = common exam Q.
1. <!DOCTYPE html>
• This tells the browser what kind of document it is.
• Here it means: “Yo, this is an HTML5 webpage.”
• Without it, the browser might mess up how it displays your page.
2. <html> ... </html>
• This is the container for your whole web page.
• Everything inside is the page’s code.
3. <head> ... </head>
• This section contains information about the web page itself, not the stuff the user sees
directly on the page.
• It’s like the settings area of your page.
Inside the <head> you have:
a) <title>My Webpage</title>
• The page title.
• This doesn’t appear inside the page itself, but shows up:
o On the browser tab
o In search engine results
b) <link rel="stylesheet" href="[Link]">
• This is how you connect CSS to your HTML.
• [Link] is a separate file where you keep design stuff (colors, fonts, backgrounds).
• So HTML handles the content, CSS handles the presentation.
c) <meta charset="UTF-8">
• Defines the character set used.
• UTF-8 = supports basically all languages (English, Arabic, Chinese, emojis, etc.).
• Without this, weird symbols may show up instead of letters.
d) <meta name="description" content="My first webpage">
• This is the description of your page.
• Search engines like Google use it when showing results.
• Example: under your page link, Google might show “My first webpage”.
e) <meta name="keywords" content="IGCSE, HTML, CSS, exam">
• A list of keywords about your page.
• Used (in the past) for search engines, but now not so important.
• Example: If someone searches IGCSE HTML exam, this helps Google know your page is
relevant.
f) <meta name="author" content="Ali">
• Tells who wrote the webpage.
• Just info, doesn’t really change how the page looks.
g) <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Super important for mobile devices.
• Makes sure your page fits properly on phone screens.
• Without it, your page might look tiny or zoomed out on mobiles.
h) <base target="_blank">
• This sets the default behavior for all links on your page.
• _blank means: when someone clicks a link, it opens in a new tab.
• Saves you from writing target="_blank" in every single link.
⚡ In short:
The <head> = behind-the-scenes info and settings.
The <body> = the actual stuff people see on the screen (headings, text, images, links).
1. <table border="1" width="80%">
• <table> → starts the table.
• border="1" → makes the table lines visible (if set to 0 or removed, no border shows).
• width="80%" → makes the table take up 80% of the page width (so it doesn’t stretch all
the way).
2. <tr>
• Table Row = a horizontal line of cells.
• Every row of your table starts with <tr> and ends with </tr>.
3. <th>Name</th> and <th>Age</th>
• <th> = Table Header cell.
• It’s like a title for a column.
• Text inside <th> is bold + centered by default.
• So here you’re saying: The first column is “Name” and the second column is “Age.”
4. Next row:
<tr>
<td rowspan="2">Ali</td>
<td>16</td>
</tr>
• <td> = Table Data cell (normal cell, unlike <th>).
• rowspan="2" → this cell will stretch across 2 rows vertically.
o So “Ali” will appear in the first column, but cover both the “16” and “17” rows.
• The next <td>16</td> is Ali’s first age.
5. Another row:
<tr>
<td>17</td>
</tr>
• This is the second row that “Ali” is spanning over.
• Since “Ali” already takes up the first column (because of rowspan), this <td> only fills
the second column.
• So here it shows “17.”
🖼🖼� Visual Representation:
Name Age
Ali 16
Ali 17
(But in your code, “Ali” is actually merged into one tall cell covering both 16 & 17 rows.)
⚡ Why this matters for exams:
• <th> = header (bold, centered).
• <td> = data cell (normal text).
• rowspan = join cells vertically.
• colspan = join cells horizontally.
• You can also style size, color, padding with CSS later.
1. Images
<img src="[Link]" alt="My Photo" width="200" height="150">
• <img> = insert an image.
• src="[Link]" → tells browser where to find the picture.
• alt="My Photo" → alternative text (shows if image can’t load, and helps visually
impaired users).
• width / height → size of the image (in pixels).
📌📌 Exam tip: They often test you on alt text because it’s about accessibility.
2. Audio
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
• <audio> = inserts audio player.
• controls = gives play/pause buttons.
• <source> = defines the actual file (song.mp3).
• type="audio/mpeg" → tells the browser the file format (MP3).
📌📌 Without controls, users can’t play it manually.
3. Video
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
• <video> = inserts a video.
• controls = play, pause, volume buttons.
• autoplay = starts playing automatically.
• width / height = size of video on page.
• type="video/mp4" = tells browser the format.
4. Div & Classes
<div class="highlight">
<p>This is inside a div with a class</p>
</div>
• <div> = a container (like a box) used to group content.
• class="highlight" = labels this div so CSS can style it later.
📌📌 Div doesn’t change appearance by itself, it’s just structure. But with CSS you can say:
.highlight { background-color: yellow; }
Now everything in that div turns yellow.
5. Bookmarks & Hyperlinks
Bookmark
<h2 id="top">Top of Page</h2>
• id="top" marks this spot.
• Think of it like sticking a flag in the page.
Hyperlinks
<!-- To bookmark -->
<a href="#top">Go to Top</a>
• Takes you back to the spot marked with id="top".
<!-- To another local page -->
<a href="[Link]">Next Page</a>
• Opens another page saved in the same folder.
<!-- To website -->
<a href="[Link]
• Opens a full website.
<!-- To email -->
<a href="[Link] Email</a>
• Opens email app to send mail.
<!-- Open in new tab -->
<a href="[Link]" target="_blank">Open Page 2 in New Tab</a>
• target="_blank" = new tab/window.
<!-- Open in a named window -->
<a href="[Link]" target="frame1">Open in frame1</a>
• Opens in a specific frame/window if it exists.
6. Lists
Ordered list (numbered)
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
1. First item
2. Second item
Unordered list (bullets)
<ul>
<li>Bullet point 1</li>
<li>Bullet point 2</li>
</ul>
• Bullet point 1
• Bullet point 2
✅ So now you’ve covered: images, audio, video, divs, classes, bookmarks, hyperlinks, and
lists.
That’s basically all the “objects + navigation” part of the content layer.
Meta Tags
1. Meta Tags (inside <head>)
These are bits of info about the webpage. They don’t show on the page itself (only in the head
section).
<meta charset="UTF-8">
• Sets character encoding (UTF-8 is standard for all languages/symbols).
• Without this, some symbols (€, ñ, )ىبرعmight not show correctly.
<meta name="keywords" content="ICT, IGCSE, HTML">
• Keywords for search engines.
• Helps Google know what your page is about.
<meta name="author" content="Ali">
• Tells who created the page.
<meta name="description" content="Revision website">
• Short description — search engines often show this under the page title in results.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
• Makes the site responsive (fits different devices like phones, tablets, laptops).
📌📌 Exam tip: They might ask why we use meta tags → to define info like charset, keywords,
author, description, viewport.
2. Hyperlinks
<!-- External website -->
<a href="[Link] Cambridge</a>
• Opens a full website (must use absolute URL).
<!-- Local page -->
<a href="[Link]">Page 2</a>
• Links to another file saved in your website folder.
• Uses relative path (important in exams: don’t use C:\Users\Ali\...).
<!-- Email -->
<a href="[Link] me</a>
• Opens email app, ready to send an email.
📌📌 Function of hyperlink (exam): connects one place to another (page, website, email,
bookmark).
3. Bookmarks
<h2 id="top">Top of Page</h2>
<a href="#top">Go to Top</a>
• id="top" → bookmark = marks a spot.
• href="#top" → hyperlink pointing back to that bookmark.
📌📌 Exam term: Anchor = either the bookmark (the spot you mark) or the link pointing to it.
✅ So this section covers:
• Meta tags (charset, keywords, author, description, viewport).
• Hyperlinks (external site, local file, email).
• Bookmarks (id + href).
CSS
1. Where Styles Go
CSS can be written in 3 ways:
• External stylesheet → in a separate .css file.
• <link rel="stylesheet" href="[Link]">
Best for big websites (same style for many pages).
• Internal stylesheet → inside <style> in <head>.
• <style>
• body { background-color: lightblue; }
• </style>
Good for small changes on one page.
• Inline style → written directly in the tag.
• <p style="color:red;">This is red text</p>
Bad practice, but still used for quick changes.
📌📌 In exams: know the hierarchy → Inline > Internal > External. (Inline overrides others).
2. Background Properties
body {
background-color: lightblue; /* solid color */
background-image: url("[Link]"); /* background picture */
}
• background-color = fills with a color.
• background-image = sets a picture behind everything.
3. Font Properties
p {
font-family: Arial, sans-serif; /* type of text */
font-size: 16px; /* size */
color: black; /* color */
text-align: center; /* left, right, center, justify */
font-weight: bold; /* bold text */
font-style: italic; /* italic text */
}
• Fonts = control how text looks.
• Family = type, Size = size, Color = color.
• Weight = bold, Style = italic.
• Alignment = where text sits.
4. Tables with CSS
table {
border-collapse: collapse; /* makes one clean border */
border: 2px solid black; /* whole table border */
}
th {
background-color: lightgray; /* header cells color */
text-align: center; /* text position */
padding: 10px; /* space inside cell */
}
td {
border: 1px solid black; /* each cell border */
padding: 5px; /* space inside cell */
}
• CSS can style tables (color, borders, spacing).
• border-collapse: collapse; removes double borders.
• padding = space inside cell (between text and border).
5. Classes
.highlight {
background-color: yellow;
font-weight: bold;
}
<p class="highlight">This text is highlighted.</p>
• A class = reusable style.
• Starts with a dot (.) in CSS.
• Can be applied to any tag with class="...".
6. Tag Selectors
h1 { color: red; } /* all h1 headings red */
h2 { font-size: 20px; } /* all h2 headings size 20 */
p { line-height: 1.5; } /* more space between lines */
li { list-style-type: square;} /* list bullet style */
• Styles applied directly to a tag.
• Affects every tag of that type on the page.
✅ So basically:
• Where styles go (external, internal, inline).
• Background (color, image).
• Fonts (family, size, color, bold, italic, alignment).
• Tables (border, spacing, padding).
• Classes (custom, reusable).
• Tag selectors (apply to all of a tag type).
🔹🔹 What is a path?
A path = tells the computer where a file is stored so it can be used in your webpage.
Example: when you add an image, CSS file, or link, you must tell the browser where to find it.
🔹🔹 Absolute Path
• Shows the full location of a file, starting from your computer drive or full website
address.
• Example (local computer):
• <img src="C:/Users/Ali/Desktop/web/[Link]">
• Example (website):
• <img src="[Link]
❌ Why not use this in exams? Because if you move your website folder to another computer,
the link breaks.
🔹🔹 Relative Path
• Shows the location of a file relative (nearby) to your webpage.
• Only looks inside the same folder (or subfolders).
• Example (if [Link] is in same folder as your HTML):
• <img src="[Link]">
• Example (if in a subfolder called "images"):
• <img src="images/[Link]">
• Example (if file is one folder back):
• <img src="../[Link]">
✅ Relative paths must be used in IGCSE because your examiner opens your whole website
folder on their computer — and only relative links work properly.
🔹🔹 Where do you use them?
• Linking CSS files in <head>:
• <link rel="stylesheet" href="[Link]">
• Linking images, videos, audio:
• <img src="images/[Link]">
• Linking other HTML pages:
• <a href="[Link]">Next Page</a>
👉👉 Think of it like this:
• Absolute path = giving someone your full home address.
• Relative path = saying “it’s in the next room”.