HTML Full Course - Beginner Friendly
Lesson 1: Basic HTML Structure
HTML (HyperText Markup Language) is the standard language for creating webpages.
It uses tags (like <html>, <head>, <body>) to structure the content.
Key points:
- <!DOCTYPE html>: Declares the document as HTML5.
- <html>: Root of the HTML document.
- <head>: Contains metadata, title, and links to scripts or styles.
- <body>: Contains everything visible on the webpage.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Lesson 2: Headings, Paragraphs, and Text Formatting
HTML provides tags to structure text content and add basic formatting.
Key points:
- <h1> to <h6>: Used for headings, where <h1> is the largest.
- <p>: Represents a paragraph.
- <b>, <strong>: Bold text (strong is more semantic).
- <i>, <em>: Italic text (em is more semantic).
- <u>: Underlines text.
HTML Full Course - Beginner Friendly
- <br>: Breaks a line.
- <hr>: Creates a horizontal line.
- <!-- comment -->: Adds a comment in code.
<h1>This is Heading 1</h1>
<p>This is a paragraph.</p>
<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
<p>Line break here<br>Next line</p>
<hr>
<!-- This is a comment -->
Lesson 3: Links and Images
HTML allows adding links and images to your webpages.
Key points:
- <a href="URL">: Adds a hyperlink to another page or site.
- <img src="file" alt="text">: Embeds an image.
- src: Source of the image.
- alt: Text shown if image fails to load.
- width/height: Size of the image.
<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="Sample Image" width="200">
Lesson 4: Lists in HTML
Lists organize information in bullet or number format.
Key points:
- <ul>: Unordered list (bullets).
- <ol>: Ordered list (numbers).
HTML Full Course - Beginner Friendly
- <li>: List item (used in both).
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
Lesson 5: Tables in HTML
Tables display data in rows and columns.
Key points:
- <table>: Defines a table.
- <tr>: Table row.
- <th>: Table heading (bold and centered).
- <td>: Table data (regular cell).
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>Alice</td><td>25</td>
</tr>
</table>
Lesson 6: Forms in HTML
Forms are used to collect input from users.
HTML Full Course - Beginner Friendly
Key points:
- <form>: Creates the form.
- action: Where to send the data.
- method: GET or POST.
- <input>: Field for input (text, password, etc.).
- <textarea>: Multi-line text input.
- <button>: Submits the form.
<form action="/submit" method="post">
<label>Name:</label>
<input type="text" name="name" required><br>
<label>Message:</label>
<textarea name="message"></textarea><br>
<button type="submit">Send</button>
</form>
Lesson 7: Semantic HTML
Semantic tags describe the meaning of the content.
Key points:
- <header>: Intro or navigation area.
- <nav>: Navigation links.
- <main>: Main content.
- <footer>: Bottom of the page, usually for copyright info.
- Helps search engines and accessibility tools understand the page better.
<header>Header Content</header>
<nav>Navigation Links</nav>
<main>Main Content Area</main>
<footer>Footer Information</footer>
HTML Full Course - Beginner Friendly
Lesson 8: Media Elements
HTML supports embedding of audio and video.
Key points:
- <audio>: Embeds sound.
- <video>: Embeds video.
- <source>: Points to the media file.
- controls: Adds play/pause buttons.
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
<video controls width="300">
<source src="movie.mp4" type="video/mp4">
</video>
