Scribd
Upload
6 views

HTML Course for Beginners

This document is an introductory HTML course for beginners, covering the basics of HTML, its structure, and essential tags. It explains key concepts such as markup language, web pages, headings, paragraphs, links, images, lists, tables, forms, and semantic tags. Additionally, it includes a practice project for creating a personal bio page to reinforce the learned concepts.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

HTML Course for Beginners

This document is an introductory HTML course for beginners, covering the basics of HTML, its structure, and essential tags. It explains key concepts such as markup language, web pages, headings, paragraphs, links, images, lists, tables, forms, and semantic tags. Additionally, it includes a practice project for creating a personal bio page to reinforce the learned concepts.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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 &lt; 10 and 5 &gt; 1</p>
<p>Use &amp; for an ampersand.</p>
<p>Quotes: &quot;Hello&quot;</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>&copy; 2025 Vusi</p>
</footer>
</body>
</html>

You might also like