Lesson 1: Introduction to HTML
In this lesson, we'll cover the basics of HTML and how to structure a web page.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my blog!</p>
</body>
</html>Explanation:
<!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.
<html>: The root element of an HTML page.
<head>: Contains meta-information about the HTML document.
<title>: Defines the title of the web page, which appears in the browser's title bar.
<body>: Contains the visible content of the web page.
<h1>: Represents the main heading of a page.
<p>: Represents a paragraph of text.
Lesson 2: Working with Text and Links
In this lesson, we'll learn how to add text, headings, and links to a web page.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Blog</h1>
<p>This is a paragraph of text.</p>
<h2>Heading 2</h2>
<p>Another paragraph of text.</p>
<a href="https://www.example.com">Visit Example Website</a>
</body>
</html>
Explanation:
<h2>: Represents a secondary heading on a page.
<a href="https://www.example.com">: Creates a hyperlink with the specified URL.
Visit Example Website: The text displayed for the hyperlink.
Lesson 3: Adding Images and Lists
In this lesson, we'll learn how to add images and create lists on a web page.<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Blog</h1>
<img src="image.jpg" alt="Image Description">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
</body>
</html>
Explanation:
<img src="image.jpg" alt="Image Description">: Inserts an image with the specified source (image.jpg) and alternative text (Image Description).<ul>: Creates an unordered (bulleted) list.<li>: Represents a list item.<ol>: Creates an ordered (numbered) list.Lesson 4: Creating Tables
In this lesson, we'll learn how to create tables to display data on a web page.
<!DOCTYPE html><html><head> <title>My First Web Page</title></head><body> <h1>Welcome to My Blog</h1> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>John Doe</td> <td>25</td> </tr> <tr> <td>Jane Smith</td> <td>30</td> </tr> </table></body></html>
Explanation:
<table>: Creates a table.<tr>: Represents a table row.<th>: Defines a table header cell.<td>: Defines a table data cell.Lesson 5: Building Forms
In this lesson, we'll learn how to create forms to collect user input.
<!DOCTYPE html><html><head> <title>My First Web Page</title></head><body> <h1>Welcome to My Blog</h1> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <input type="submit" value="Submit"> </form></body></html>
Explanation:
<form>: Creates a form to collect user input.<label for="name">: Associates a label with a form element.<input type="text" id="name" name="name">: Creates a text input field with the specified ID (name) and name (name).<br>: Inserts a line break.<input type="submit" value="Submit">: Creates a submit button for the form.