About This Course
Welcome to the HTML Course at Ahmad LMS. In this course, you will learn the fundamentals of HTML and how to create the basic structure of a modern web page.
This course is designed for beginners. You do not need previous HTML experience. Follow each lesson, practice the examples, and complete all seven lessons.
Lesson 1: What is HTML?
HTML stands for HyperText Markup Language. HTML is the standard markup language used to create and structure content on web pages.
HTML tells the browser what different parts of a web page are. For example, we can use HTML to create headings, paragraphs, links, images, lists, tables and forms.
A Simple HTML Example
<h1>Hello World</h1>
<p>Welcome to my website.</p>What Does This Code Do?
The <h1> element creates a main heading. The <p> element creates a paragraph.
Important Point
HTML provides the structure of a website. CSS is normally used for design and JavaScript is used to add interaction and functionality.
Next Lesson →Lesson 2: HTML Document Structure
Every normal HTML document follows a basic structure. Understanding this structure is one of the most important first steps in HTML.
Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first web page.</p>
</body>
</html>Main Parts
- DOCTYPE: Tells the browser that the document uses HTML5.
- html: The main root element of the document.
- head: Contains information about the web page.
- body: Contains the visible content of the page.
The Head Section
The head section can contain the page title, metadata, CSS links and other information that helps the browser understand the page.
The Body Section
The body contains the content users can see, such as headings, paragraphs, images, buttons, links and forms.
Next Lesson →Lesson 3: Headings and Paragraphs
Headings and paragraphs are some of the most common HTML elements. They help us organize information and make a web page easier to read.
HTML Headings
HTML provides six heading levels, from h1 to h6.
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Sub Heading</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>Heading Examples
Heading 1
Heading 2
Heading 3
Heading 4
Paragraphs
Paragraphs are created using the <p> element.
<p>
HTML is used to create the structure
of web pages.
</p>Use headings to organize your page and paragraphs to present normal blocks of written information.
Next Lesson →Lesson 4: Links and Images
Links allow users to move from one page to another. Images allow us to display visual content on a web page.
HTML Links
Links are created using the <a> element.
<a href="https://www.google.com">
Visit Google
</a>The href attribute specifies where the link should go.
Opening a Link in a New Tab
<a
href="https://www.google.com"
target="_blank"
rel="noopener noreferrer"
>
Visit Google
</a>The target="_blank" attribute tells the browser to open the link in a new browsing context.
HTML Images
Images are added using the <img> element.
<img
src="images/photo.jpg"
alt="My Photo"
>The src attribute specifies the image location. The alt attribute provides alternative text describing the image.
Image Example
Next Lesson →
Lesson 5: HTML Lists
Lists are useful when we need to display multiple related items in an organized way.
Unordered List
An unordered list normally displays items with bullet points.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Example
- HTML
- CSS
- JavaScript
- Web Development
Ordered List
An ordered list displays items in a numbered sequence.
<ol>
<li>Learn HTML</li>
<li>Practice HTML</li>
<li>Build a Project</li>
</ol>Example
- Learn HTML
- Practice HTML
- Build a Project
- Complete the Course
Lesson 6: HTML Tables
HTML tables are useful for presenting structured information in rows and columns.
Basic Table Structure
<table>
<tr>
<th>Name</th>
<th>Course</th>
</tr>
<tr>
<td>Ahmad</td>
<td>HTML</td>
</tr>
</table>Course Schedule Example
| Lesson | Topic | Status |
|---|---|---|
| Lesson 1 | What is HTML? | Available |
| Lesson 2 | HTML Structure | Available |
| Lesson 3 | Headings and Paragraphs | Available |
| Lesson 4 | Links and Images | Available |
| Lesson 5 | HTML Lists | Available |
| Lesson 6 | HTML Tables | Current |
| Lesson 7 | HTML Forms | Next |
Important Table Elements
- <table> creates the table.
- <tr> creates a table row.
- <th> creates a table heading cell.
- <td> creates a normal table cell.
Lesson 7: HTML Forms
HTML forms are used to collect information from users. Forms are commonly used for registration, login, contact and other interactive features.
Basic Form Structure
<form>
<label>Name</label>
<input type="text">
<button type="submit">
Submit
</button>
</form>Student Registration Example
Common Form Elements
- input collects different types of information.
- label describes a form field.
- textarea allows users to enter longer text.
- button can be used to submit a form.
Congratulations! You have reached the final lesson of the HTML course.
What You Will Learn
After completing this course, you should have a basic understanding of HTML and be able to create the structure of a simple web page.
- Understand the purpose of HTML.
- Understand the basic HTML document structure.
- Create headings and paragraphs.
- Add links and images.
- Create ordered and unordered lists.
- Create basic HTML tables.
- Create basic HTML forms.
- Build a simple structured web page.