HTML - Exam Revision Guide
1. Introduction to HTML
HTML (HyperText Markup Language) → Standard language for creating web pages.
HTML structures a webpage with elements like headings, paragraphs, tables, and forms.
Not a programming language → Cannot create dynamic content alone.
Works with CSS (for styling) and JavaScript (for interactivity).
2. Advantages & Disadvantages of HTML
Advantages
• Easy to learn & use.
• Lightweight & fast to load.
• Supported by all browsers.
• Platform-independent (works on all devices).
• Integrates with JavaScript & CSS.
Disadvantages
• Cannot handle dynamic content alone.
• Large code needed for basic webpages.
• Limited security features.
3. Basic HTML Structure
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html> → Declares document type.
<html> → Root of the webpage.
<head> → Contains metadata, styles, scripts.
<title> → Defines page title (shown in browser tab).
<body> → Contains webpage content.
4. Important HTML Tags & Their Uses
Tag Purpose
<h1> to <h6> Headings (h1 = largest, h6 = smallest).
<p> Paragraphs.
<br> Line break (no closing tag).
<hr> Horizontal line (thematic break).
<b> Bold text.
<i> Italic text.
<u> Underlined text.
<sub> Subscript (H₂O).
<sup> Superscript (x²).
<font> Defines font size, face, and color (deprecated).
5. Lists in HTML
Ordered List (<ol>) → Numbered list
Unordered List (<ul>) → Bulleted list
Definition List (<dl>) → Term & Definition list
Example:
html
CopyEdit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
6. Links in HTML (<a> Tag)
Hyperlinks allow navigation to another page.
html
CopyEdit
<a href="https://www.google.com">Visit Google</a>
Internal Links (Same Page)
html
CopyEdit
<a href="#section1">Jump to Section 1</a>
<h2 id="section1">Section 1</h2>
7. Images in HTML (<img> Tag)
Adding an Image
html
CopyEdit
<img src="image.jpg" alt="Sample Image" width="300" height="200">
Attributes
• src → Image path
• alt → Alternative text (for screen readers)
• width & height → Image dimensions
8. Tables in HTML
Used to display structured data.
html
CopyEdit
<table border="1">
<tr>
<th>Name</th> <th>Age</th>
</tr>
<tr>
<td>John</td> <td>25</td>
</tr>
</table>
Attributes:
• border → Table border.
• rowspan → Merge rows.
• colspan → Merge columns.
9. Forms in HTML
Used to collect user input.
html
CopyEdit
<form action="submit.php" method="post">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Submit">
</form>
Common Input Types:
• text → Text input field.
• password → Password field.
• radio → Select one option.
• checkbox → Select multiple options.
• submit → Submit form.
10. HTML Formatting Tags
Text Formatting:
• <b> → Bold
• <i> → Italic
• <u> → Underline
• <mark> → Highlight text
Font Tag (Deprecated, use CSS instead)
html
CopyEdit
<font size="4" color="red">Red Text</font>
Marquee (Scrolling Text, Not Recommended)
html
CopyEdit
<marquee>Scrolling Text</marquee>
11. HTML Frames & Iframes
Frames → Used to divide browser window (Deprecated).
Iframe (<iframe>) → Embeds another webpage.
html
CopyEdit
<iframe src="https://www.wikipedia.org" width="400" height="300"></iframe>
12. HTML Multimedia
Embedding Video & Audio
html
CopyEdit
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
13. HTML Comments
Comments help in code readability.
html
CopyEdit
<!-- This is a comment -->
14. CSS Integration in HTML
Inline CSS
html
CopyEdit
<p style="color:blue;">This is blue text.</p>
Internal CSS
html
CopyEdit
<style>
p { color: red; }
</style>
External CSS
html
CopyEdit
<link rel="stylesheet" href="style.css">
15. HTML 5 New Elements
Semantic Tags for better structure:
• <header> → Header section.
• <nav> → Navigation links.
• <section> → Section of content.
• <article> → Self-contained content.
• <footer> → Footer section.
