HTML Course for Beginners
INTRODUCTION TO HTML
What is HTML?
HTML stands for HyperText Markup Language.
It is the standard language used to create web pages.
HTML uses "tags" (e.g., <p>, <h1>, etc.) to tell the browser how to display content.
What is a Markup Language?
A markup language tells a browser how to structure and display content.
Unlike programming languages (which involve logic and computation), HTML only structures
content.
What is a Web Page?
A web page is a file written in HTML that is displayed by a web browser like Chrome or Firefox.
When you open an .html file, the browser reads the tags and shows the content accordingly.
🔹 2. BASIC HTML PAGE STRUCTURE
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Explanation of Each Line:
Line Meaning
<!DOCTYPE html> Declares this document as an HTML5 document
<html> Root tag that wraps the whole page
<head> Contains metadata (info about the page like title, CSS, etc.)
<title> Title shown in the browser tab
<body> Contains everything visible on the web page
<h1>, <p> Actual content tags: Heading 1 and Paragraph
HTML HEADINGS
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>
Headings go from <h1> (biggest) to <h6> (smallest)
Used to organize content into titles and subtitles
HTML PARAGRAPHS AND TEXT
<p>This is a paragraph of text.</p>
You can also include:
<b>Bold</b> <i>Italic</i> <u>Underline</u> <strong>Important</strong> <em>Emphasis</em>
LINE BREAKS AND HORIZONTAL LINES
<p>This is line one.<br>This is line two.</p>
<hr>
<br>: Break line
<hr>: Horizontal line
HTML LINKS
<a href="https://www.example.com" target="_blank">Visit Example</a>
Attributes:
href: URL
target="_blank": Opens link in new tab
HTML IMAGES
<img src="image.jpg" alt="My Image" width="300">
Attributes:
src: file path or URL of the image
alt: text if image fails to load (important for accessibility)
width, height: optional dimensions
LISTS
Unordered List:
<ul>
<li>Milk</li>
<li>Eggs</li>
</ul>
Ordered List:
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
TABLES
<table border="1">
<tr>
<th>Name</th><th>Age</th>
</tr>
<tr>
<td>John</td><td>25</td>
</tr>
</table>
<table>: Begins the table
<tr>: Table row
<th>: Table heading
<td>: Table data
FORMS (Inputs)
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name">
<br>
<input type="submit" value="Submit">
</form>
Forms collect user input.
action is the backend script to handle the input.
Common input types: text, password, email, radio, checkbox, submit.
HTML ENTITIES
Characters like <, >, &, and quotes must be written using HTML entities:
<p>5 < 10 and 5 > 1</p>
<p>Use & for an ampersand.</p>
<p>Quotes: "Hello"</p>
COMMENTS
<!-- This is a comment in HTML -->
Used to explain your code. The browser ignores comments.
HTML SEMANTIC TAGS
Semantic tags describe the meaning of content:
Tag Description
<header> Intro or navigation links
<nav> Contains navigation menus
<main> Main content of the page
<section> Group of related content
<article> Independent content (e.g. blog post)
<footer> Footer content
Example:
<main>
<section>
<h2>About Me</h2>
<p>I am learning HTML.</p>
</section>
</main>
PRACTICE PROJECT
🏁 Task: Create a "Personal Bio Page"
Objective: Reinforce headings, lists, images, and forms.
<!DOCTYPE html>
<html>
<head>
<title>My Personal Bio</title>
</head>
<body>
<header>
<h1>Vusi's Web Page</h1>
</header>
<section>
<h2>About Me</h2>
<p>Hello! I'm a student learning HTML. I love web development and coding.</p>
</section>
<section>
<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Football</li>
</ul>
</section>
<section>
<h2>My Picture</h2>
<img src="me.jpg" alt="My Picture" width="200">
</section>
<section>
<h2>Contact Me</h2>
<form>
<label for="email">Email:</label>
<input type="email" id="email">
<br>
<input type="submit" value="Send Message">
</form>
</section>
<footer>
<p>© 2025 Vusi</p>
</footer>
</body>
</html>
