Objectives Practical Learning Goals
- Create structured web pages using HTML5 tags.
- Implement multimedia (audio/video) and graphics (SVG).
- Build complex tables and interactive forms.
- Apply styling through internal and external CSS.
Part 1 Document Structure & Basic Tags
Task 1: The HTML5 Skeleton
Create a page demonstrating the root, head, and body structure.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World!</h1>
<p>I am learning web development.</p>
</body>
</html>
Task 2: Headings & Paragraph Alignment
- Display all default heading styles (H1-H6).
- Demonstrate left, center, and right aligned paragraph texts.
- Use
<br> for line breaks and <hr> for horizontal rules.
Task 3: Formatting & Links
Showcase <b>, <i>, <strong>, <sub>, <sup> and create a link to an external website.
Part 2 Images, Multimedia & Tables
Task 4: Working with Images
- Embed an image using a local path with specific height/width.
- Embed an image using an **Absolute URL**.
Task 5: Complex Tables
Create a table that uses rowspan and colspan to span multiple rows and columns.
Task 6: HTML5 Multimedia
- Implement
<audio> and <video> players with controls.
- Draw a circle using the
<svg> graphics element.
- Embed another web page using
<iframe>.
Part 3 Forms & CSS Integration
Task 7: Interactive Forms
Create a login page with labels and input fields for username and password.
Task 8: Cascading Style Sheets
- Apply **Internal CSS** within the head section.
- Link an **External CSS** file to style the page elements.
- Demonstrate **CSS Priority** by applying conflicting rules.
- Implement the **Box Model** (margin, border, padding).