Module 1: Introduction to HTML
- What is HTML?
- HTML (Hypertext Markup Language) is the standard markup language for creating web pages.
- Basic Structure of an HTML Document
- Basic skeleton of an HTML page.
- Example:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
- Expected Output: A web page with a heading “My First Heading” and a paragraph “My first paragraph.”
Module 2: HTML Basics
- Headings and Paragraphs
- Headings (
<h1>to<h6>) and paragraphs (<p>). - Example:html
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
- Expected Output: A heading “This is a Heading” and a paragraph “This is a paragraph.”
- Headings (
- Breaks and Horizontal Rules
- Line break (
<br>) and horizontal rule (<hr>). - Example:html
- Line break (
<p>This is a paragraph.<br>This is a new line.</p>
<hr>
- Expected Output: Two lines of text in one paragraph separated by a line break, followed by a horizontal line.
Module 3: Text Formatting
- Bold, Italics, and Underline
- Bold (
<b>), italics (<i>), underline (<u>). - Example
- Bold (
<p><b>Bold Text</b>, <i>Italic Text</i>, and <u>Underlined Text</u>.</p>
- Expected Output: A paragraph with “Bold Text” in bold, “Italic Text” in italics, and “Underlined Text” underlined.
Module 4: Lists
- Creating Lists
- Unordered (
<ul>) and ordered (<ol>) lists. - Example
- Unordered (
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
- Expected Output: An unordered list with “Item 1” and “Item 2”, and an ordered list with “First Item” and “Second Item”.
Module 5: Links and Images
- Creating Hyperlinks
- Anchor tag (
<a>). - Example:
<a href="https://www.example.com">Visit Example.com</a>
- Expected Output: A clickable link “Visit Example.com” that directs to “https://www.example.com“.
- Anchor tag (
- Adding Images
- Image tag (
<img>). - Example:
- Image tag (
<img src="image.jpg" alt="Descriptive Text">
- Expected Output: An image displayed on the page, with “Descriptive Text” if the image can’t be loaded.
Module 6: Tables
- Basic Table Structure
- Creating a simple table.
- Example:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
- Expected Output: A table with two headers “Header 1” and “Header 2”, and one row with “Data 1” and “Data 2”.
Module 7: Forms
- Creating Forms
- Form elements like input, button.
- Example:html
<form action="/submit">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>
- Expected Output: A form with a text input for “First name” and a submit button.
Module 8: HTML5 Elements
- New Semantic Elements
- Elements like
<article>,<footer>,<header>,<nav>,<section>. - Example:
- Elements like
<article>
<header>
<h1>Article Title</h1>
</header>
<p>Article content...</p>
<footer>Article footer</footer>
</article>
- Expected Output: A structured article with a title, content, and footer.