HTML Course Outline
1. Introduction to HTML
- What is HTML?
HTML (Hypertext Markup Language) is the standard language used to create and design web
pages.
It structures the web content using elements, tags, and attributes.
- HTML Document Structure
Basic Structure of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Explanation of key tags: <html>, <head>, <body>, <title>
2. HTML Tags and Elements
- Basic Tags
<h1> to <h6> (Headings)
<p> (Paragraph)
<a> (Anchor - links)
<img> (Images)
<ul>, <ol>, <li> (Lists)
<div>, <span> (Divisions and inline containers)
- Attributes
src, href, alt, id, class
Example:
<img src="image.jpg" alt="Description of image">
3. HTML Formatting
- Text Formatting Tags
<strong>, <em>, <b>, <i>
- Block vs. Inline Elements
Block-level elements: <div>, <h1>, <p>
Inline elements: <a>, <span>
4. HTML Links and Navigation
- Creating Links
Anchor tag: <a href="URL">Link Text</a>
- Anchor links (same page navigation)
Example:
<a href="#section1">Go to Section 1</a>
- Opening links in a new tab
Example:
<a href="https://www.example.com" target="_blank">Visit Example</a>
5. HTML Images
- Embedding Images
Example:
<img src="image.jpg" alt="Description of Image" width="300" height="200">
- Image Formats: JPG, PNG, GIF
Choosing the right format based on the image type.
6. HTML Tables
- Table Structure
Basic structure with <table>, <tr>, <td>, <th> tags:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
7. HTML Forms
- Form Elements
<form>, <input>, <textarea>, <select>, <button>
- Form Handling (GET and POST methods)
Example of a form:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
8. HTML Audio and Video
- Embedding Audio
Example:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
- Embedding Video
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
9. HTML Semantics
- Semantic Tags
<header>, <footer>, <article>, <section>, <nav>, <aside>
- Why use semantic tags?
Improves SEO and accessibility.
10. HTML5 New Elements
- New HTML5 Tags
<main>, <figure>, <figcaption>, <mark>, <progress>, <output>
- Form Enhancements in HTML5
New input types: email, tel, number, date, etc.
11. HTML Best Practices
- Code Formatting
Indentation, proper tag closures, and comments:
<!-- This is a comment -->
- Accessibility
Using alt attributes for images, proper heading hierarchy.
12. Introduction to HTML and CSS Integration
- Linking External Stylesheets
Example:
<link rel="stylesheet" href="styles.css">
13. Final Project
- Build a Simple Webpage
Create a personal webpage with a header, navigation, content section, and footer using the
HTML knowledge learned.
