HTML Course

Beginner Level

What is HTML?

HTML stands for HyperText Markup Language. It is the backbone of every website. HTML tells the browser what to display: text, images, buttons, forms, videos, etc.

Without HTML, no webpage can exist.

Basic HTML Structure

Every HTML page starts with:

<!DOCTYPE html>

<html> → root tag

<head> → title, meta, CSS

<body> → visible content

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  Hello World
</body>
</html>

Common Tags

<h1> to <h6> → headings

<p> → paragraph

<a> → link

<img> → image

<div> → container

<span> → inline text

<h1>Heading</h1>
<p>Paragraph</p>
<a href="https://google.com">Link</a>
<img src="pic.jpg">
<div>Box</div>

Text Formatting

<b> bold

<i> italic

<u> underline

<br> line break

<hr> horizontal line

<b>Bold</b>
<i>Italic</i>
<u>Underline</u>
Line<br>Break
<hr>

Links

Anchor tag creates links:

<a href="page.html">Click</a>

<a href="about.html">Go to About</a>

Images

<img src="image.jpg" width="200">

Always use width/height for performance.

<img src="photo.jpg" width="200" height="150" alt="My photo">

Intermediate Level

Lists

Ordered list: <ol>

Unordered list: <ul>

Items: <li>

<ul>
 <li>>Apple</li>
 <li>>Banana</li>
</ul>

Tables

<table>

<tr> row

<td> cell

<th> heading

<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Aman</td><td>20</td></tr>
</table>

Forms

<form>

<input>

<textarea>

<button>

Forms collect user data.

<form>
<input placeholder="Name">
<button>Submit</button>
</form>

Input Types

text, password, email, number, date, checkbox, radio

<input type="text">
<input type="email">
<input type="password">
<input type="checkbox">
<input type="radio">

Semantic HTML

<header>

<footer>

<section>

<article>

<nav>

Helps SEO and accessibility.

<header>Top</header>
<section>Content</section>
<footer>Bottom</footer>

Meta Tags

Viewport for mobile

Description for search engines

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

Accessibility

Use alt on images.

Use labels on inputs.

Readable text sizes.

<img src="photo.jpg" alt="Profile photo">
<label>Name</label>
<input>

Mini Project Idea

Create a personal portfolio with:

Name

Photo

About section

Contact form

<h1>My Portfolio</h1>
<img src="me.jpg">
<p>About me</p>
<form>
<input placeholder="Email">
</form>

Advanced Level

Audio & Video

<audio> tag for sound files.

<video> tag for videos.

Controls attribute adds play/pause buttons.

<video controls>
<source src="movie.mp4">
</video>

Iframe

<iframe> is used to embed another webpage.

Example: YouTube videos or maps.

<iframe src="https://example.com" width="300" height="200"></iframe>

Canvas & SVG

<canvas> is used for drawing graphics with JavaScript.

SVG is used for vector graphics.

<canvas width="200" height="100"></canvas>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red"/>
</svg>

HTML Attributes

id → unique element

class → group elements

style → inline CSS

title → tooltip text

<div id="box" class="card" title="Hello">Text</div>

Head Section Explained

The <head> contains page info, title, icons and meta.

<head>
<title>My Site</title>
<link rel="icon" href="logo.png">
<meta name="description" content="HTML course">
</head>

HTML Comments

Comments are ignored by browser and used for notes.

<!-- This is comment -->

Block vs Inline Elements

Block elements take full width. Inline stay in same line.

<div>Block</div>
<span>Inline</span>

Linking Multiple Pages

Connect HTML files together.

<a href="python.html">Python Page</a>

Download Attribute

Force file download.

<a href="file.pdf" download>Download PDF</a>