HTML Complete Beginner Notes

🔰 LESSON 1: HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example

  <!DOCTYPE html>
  <html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

  </body>
  </html>

Example Explained

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

Start tag Element content End tag

<h1>    My First Heading    </h1>
<p>    My first paragraph.    </p>
<br>    none    none

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document:

View in Browser

HTML Page Structure

  <html>
  +-------------------------------------------+
  | <head>                                   |
  |   +-------------------------------------+ |
  |   | <title>Page title</title>           | |
  |   +-------------------------------------+ |
  | </head>                                  |
  |                                           |
  | <body>                                   |
  |   +-------------------------------------+ |
  |   | <h1>This is a heading</h1>          | |
  |   | <p>This is a paragraph.</p>       | |
  |   | <p>This is another paragraph.</p> | |
  |   +-------------------------------------+ |
  | </body>                                  |
  +-------------------------------------------+
  </html>

Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History

Since the early days of the World Wide Web, there have been many versions of HTML:

1989 — Tim Berners-Lee invented www
  1991 — Tim Berners-Lee invented HTML
  1993 — Dave Raggett drafted HTML+
  1995 — HTML Working Group defined HTML 2.0
  1997 — W3C Recommendation: HTML 3.2
  1999 — W3C Recommendation: HTML 4.01
  2000 — W3C Recommendation: XHTML 1.0
  2008 — WHATWG HTML5 First Public Draft
  2012 — WHATWG HTML5 Living Standard
  2014 — W3C Recommendation: HTML5
  2016 — W3C Candidate Recommendation: HTML 5.1
  2017 — W3C Recommendation: HTML5.1 2nd Edition
  2017 — W3C Recommendation: HTML5.2

🔰 LESSON 2: HTML Structure

Every HTML page follows a basic structure. This structure tells the browser how to organize and display the webpage.

Basic HTML Document Structure

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>

  <body>
    <h1>Welcome to Code4Academy</h1>
    <p>This is my first webpage.</p>
  </body>

</html>

Explanation of Each Part

<!DOCTYPE html>
Tells the browser that this document is written in HTML5.
<html>
The root element. Everything on the page must be inside this tag.
<head>
Contains information about the webpage (title, meta tags, links to CSS). It does NOT show directly on the page.
<title>
The name of the webpage that appears on the browser tab.
<body>
Contains everything that appears on the webpage (text, images, buttons, etc).

Visual Breakdown

Think of HTML structure like a human body:

<html> = The whole body
<head> = The brain (information)
<body> = The visible part (face, hands, legs)

Important Rules

Every HTML page must start with <!DOCTYPE html>.
All content must be inside the <html> tag.
The <head> comes before the <body>.
Most tags must have opening and closing tags.

💡 Without proper structure, the browser may not display your webpage correctly.

Class Exercise

Create a simple HTML page with a title and one paragraph.
Change the title text and see what happens in the browser tab.
Add another heading inside the body.

🔰 LESSON 3: HTML Headings

Headings are used to create titles and subtitles on a webpage. They help organize content and make it easier to read.

Heading Tags in HTML

HTML provides six levels of headings:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

How They Work

<h1> – Largest heading (Main title of the page)
<h2> – Subheading
<h3> – Smaller subheading
<h4> – Smaller heading
<h5> – Very small heading
<h6> – Smallest heading

Example Webpage Structure

    <h1>Code4Academy</h1>
    <h2>Our Courses</h2>
    <h3>HTML Course</h3>
    <h3>CSS Course</h3>
    <h2>Contact Us</h2>

Important Rules

Use only one <h1> per page (main topic).
Follow correct order (h1 → h2 → h3).
Do not skip heading levels unnecessarily.

Why Headings Are Important

They improve readability.
They help search engines understand your page.
They improve accessibility for screen readers.

💡 Headings are not just for making text big. They give structure and meaning to your webpage.

Class Exercise

Create a webpage with one <h1> and two <h2>.
Add two <h3> under one of the <h2>.
Observe the size difference between the headings.

🔰 LESSON 4: HTML Paragraphs

Paragraphs are used to write blocks of text on a webpage. In HTML, paragraphs are created using the <p> tag.

Basic Syntax

<p>This is a paragraph.</p>

Anything written inside the <p> and </p> tags will appear as a paragraph.

Example

<p>Welcome to Code4Academy.</p>
<p>We teach HTML, CSS, and JavaScript.</p>

Each paragraph automatically starts on a new line.

Line Breaks

If you want to move to a new line inside a paragraph, use the <br> tag.

<p>
Hello Students<br>
Welcome to HTML class.
</p>

The <br> tag does not need a closing tag.

Horizontal Line

The <hr> tag creates a horizontal line.

<p>HTML is fun.</p>
<hr>
<p>Let us continue learning.</p>

Important Notes

Browsers ignore extra spaces in paragraphs.
Pressing Enter many times in HTML will not create space.
Always use <p> for proper text structure.

Example Showing Space Ignored

<p>
This      text      has      many      spaces,
but the browser will show it normally.
</p>

💡 HTML does not recognize extra spacing. Use proper tags like <br> or CSS for spacing.

Class Exercise

Create three paragraphs about yourself.
Use a <br> tag inside one paragraph.
Add a horizontal line between two paragraphs.

🔰 LESSON 5: HTML Text Formatting

Text formatting tags are used to change the appearance and meaning of text. They allow you to make text bold, italic, underlined, highlighted, and more.

1. Bold Text

Used to make text bold.

<b>Bold Text</b>
<strong>Important Text</strong>

Difference:

<b> → Makes text bold (visual only).
<strong> → Bold + indicates important meaning.

Example

<p>This is <strong>very important</strong> text.</p>

2. Italic Text

Makes text slanted (italic style).

<i>Italic Text</i>
<em>Emphasized Text</em>

Difference:

<i> → Italic for styling.
<em> → Emphasized text with meaning.

3. Underlined Text

<u>Underlined Text</u>

The <u> tag underlines text but should be used carefully.

4. Small Text

<small>Small Text</small>

Used for copyright notices, footnotes, or secondary information.

5. Highlight Text

<mark>Highlighted Text</mark>

The <mark> tag highlights text with a yellow background.

6. Superscript and Subscript

Superscript

E = mc<sup>2</sup>

Used for mathematical powers and exponents.

Subscript

H<sub>2</sub>O

Used for chemical formulas and lower positioning.

7. Deleted and Inserted Text

<del>Old Price</del>
<ins>New Price</ins>

<del> → Shows deleted text (usually crossed out).
<ins> → Shows inserted text (usually underlined).

Example Combined

<p>
This product was <del>$50</del> now only <ins>$30</ins>!
</p>

💡 Use semantic tags like <strong> and <em> instead of only visual tags. They improve accessibility and SEO.

Class Exercise

Create a paragraph with bold and italic text.
Write a chemical formula using <sub>.
Write a math equation using <sup>.
Create a price example using <del> and <ins>.

🔰 LESSON 6: HTML Links (Anchor Tags)

Links are used to connect one webpage to another. In HTML, links are created using the <a> tag.

Basic Link Syntax

<a href="https://example.com">Click Here</a>

The href attribute specifies the destination URL.

Example

<a href="https://www.google.com">Visit Google</a>

When clicked, the browser opens the linked website.

Opening Links in a New Tab

Use the target="_blank" attribute to open a link in a new tab.

<a href="https://www.youtube.com" target="_blank">
  Open YouTube
</a>

Linking to Another Page in Your Website

<a href="about.html">About Us</a>

This links to another HTML file inside your project folder.

Email Links

<a href="mailto:example@email.com">Send Email</a>

Clicking it opens the user’s email app automatically.

Telephone Links

<a href="tel:+2348012345678">Call Us</a>

On mobile devices, this allows users to directly call the number.

Internal Page Links (Anchor Links)

You can link to a section inside the same page using an ID.

Example:

<a href="#contact">Go to Contact Section</a>

<h2 id="contact">Contact Us</h2>

The link jumps directly to the section with the matching ID.

Link Styling (Default Behavior)

Blue = Unvisited link
Purple = Visited link
Underlined = Default browser style

Important Attributes for Links

href → Destination address
target → Controls how the link opens
title → Shows tooltip on hover
download → Forces file download

Download Example

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

This downloads the file instead of opening it.

💡 Always make sure your links point to valid pages. Broken links affect user experience and SEO.

Class Exercise

Create a link to Google that opens in a new tab.
Create an email link.
Create a link that jumps to a section on the same page.
Create a download link for a file.

🔰 LESSON 7: HTML Images

Images are used to make webpages more attractive and engaging. In HTML, images are added using the <img> tag.

Basic Image Syntax

<img src="image.jpg" alt="Description of image">

The <img> tag is an empty tag. It does not have a closing tag.

Important Image Attributes

src → Specifies the image file location
alt → Alternative text if the image fails to load
width → Sets image width
height → Sets image height

Example

<img 
  src="student.jpg" 
  alt="Student learning coding" 
  width="300"
>

Why Alt Text Is Important

Helps visually impaired users (screen readers)
Shows text if image fails to load
Improves SEO ranking

Image From Online Source

<img 
  src="https://example.com/image.jpg" 
  alt="Online image"
  width="400"
>

This loads an image directly from the internet.

Image Inside a Folder

project-folder/
│── index.html
│── images/
│     └── logo.png

HTML Code:

<img src="images/logo.png" alt="Logo">

This is called a relative file path.

Image as a Link

<a href="https://google.com">
  <img src="logo.png" alt="Google Logo" width="150">
</a>

Clicking the image will open the link.

Image Styling (Basic)

<img 
  src="photo.jpg" 
  alt="Photo"
  style="border-radius:10px;"
>

Common Image Formats

JPG / JPEG → Good for photos
PNG → Supports transparency
GIF → Supports animation
WEBP → Modern optimized format

💡 Always add alt text to images. Avoid using very large image files to improve page loading speed.

Class Exercise

Add an image to your webpage using a local file.
Add an online image.
Make an image clickable.
Add width and height to control image size.

🔰 LESSON 8: HTML Lists

Lists are used to group related items together. HTML provides different types of lists for organizing content.

Types of Lists in HTML

Unordered List (<ul>) – Bullet points
Ordered List (<ol>) – Numbered list
Definition List (<dl>) – Terms and descriptions

1. Unordered List (Bullets)

Used when the order of items does NOT matter.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Output: Bullet points appear.

Changing Bullet Style

<ul style="list-style-type: square;">
  <li>Item 1</li>
</ul>

Bullet styles:

disc (default)
circle
square
none

2. Ordered List (Numbers)

Used when the order of items matters.

<ol>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

Changing Number Style

<ol type="A">
  <li>Option A</li>
</ol>

Types:

1 → Numbers (default)
A → Capital letters
a → Small letters
I → Roman numerals (capital)
i → Roman numerals (small)

3. Nested Lists (List Inside List)

You can place a list inside another list.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Nested lists are useful for subcategories.

4. Definition List

Used for terms and their descriptions.

<dl>
  <dt>HTML</dt>
  <dd>Markup language for creating webpages</dd>

  <dt>CSS</dt>
  <dd>Styles webpages</dd>
</dl>

<dt> → Term
<dd> → Description

Important Notes

Lists always use <li> for list items.
Lists improve content organization.
Lists are commonly used for menus and navigation bars.

💡 Lists are very important in web design. Most website menus are built using lists.

Class Exercise

Create an unordered list of your favorite subjects.
Create an ordered list of daily activities.
Create a nested list with categories and subcategories.
Create a definition list with three terms.

🔰 LESSON 9: HTML Tables

Tables are used to display data in rows and columns. They are commonly used for:

Displaying student results
Price lists
Reports
Structured data

Basic Table Structure

<table border="1">

  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>John</td>
    <td>15</td>
  </tr>

</table>

Explanation of Table Tags

<table> → Table container
<tr> → Table row
<th> → Table header (bold & centered by default)
<td> → Table data cell

Example Output Table

Name        Age
John        15
Mary        16

The table rows and columns organize the data clearly.

Adding Table Borders (Better Method with CSS)

Instead of using border="1", it is better to style tables with CSS.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
}
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
</table>

This gives better control over design.

Merging Table Cells

1. Colspan (Merge Columns)

<tr>
  <td colspan="2">Merged Columns</td>
</tr>

colspan merges multiple columns into one cell.

2. Rowspan (Merge Rows)

<tr>
  <td rowspan="2">Merged Rows</td>
  <td>Data 1</td>
</tr>

rowspan merges multiple rows into one cell.

Table Sections (Advanced Structure)

Professional tables use structure sections:

<table>

  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John</td>
      <td>80</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Average</td>
      <td>85</td>
    </tr>
  </tfoot>

</table>

<thead> → Table header section
<tbody> → Table body
<tfoot> → Table footer

Important Table Best Practices

Use tables for data — not page layout.
Always use <th> for headers.
Use CSS for styling instead of old border attributes.

💡 Tables should only be used to display structured data. Do NOT use tables to design website layouts.

Class Exercise

Create a table with 3 columns and 3 rows.
Add table borders using CSS.
Merge two columns using colspan.
Create a student result table with header and footer.

🔰 LESSON 10: HTML Forms

Forms are used to collect information from users. Examples:

Registration forms
Login forms
Contact forms
Survey forms

Basic Form Structure

<form action="submit.php" method="POST">

  <input type="text" name="username">
  <button type="submit">Submit</button>

</form>

Explanation of Form Attributes

<form> → Container for form elements
action → Where form data is sent
method → How data is sent (GET or POST)

Form Method Explained

1. GET Method

Data appears in the URL
Used for search forms
Not secure for sensitive data

<form method="GET">
  <input type="text" name="search">
</form>

2. POST Method

Data is hidden
More secure
Used for login & registration

<form method="POST">
  <input type="text" name="email">
</form>

Form Input Elements

Forms contain input fields where users type data.

<form>

  <label>Name:</label>
  <input type="text">

  <label>Email:</label>
  <input type="email">

  <button type="submit">Submit</button>

</form>

Common Form Elements

<input> → Text fields, email, password, etc.
<textarea> → Large text input
<select> → Dropdown menu
<button> → Submit or action button

Important Form Attributes

name → Identifies input when data is submitted
required → Makes field mandatory
placeholder → Hint text inside input
value → Default input value
disabled → Disables input

Example With Attributes

<input 
  type="text" 
  name="fullname" 
  placeholder="Enter your name" 
  required
>

Label and Input Connection

Labels improve accessibility and connect text to inputs.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

The for attribute links to the input id.

Example Simple Registration Form

<form>

  <label>Name</label>
  <input type="text" required>

  <label>Email</label>
  <input type="email" required>

  <label>Password</label>
  <input type="password" required>

  <button type="submit">Register</button>

</form>

💡 Forms are useless without a backend system (PHP, Python, Node.js, etc.) that processes the submitted data.

Class Exercise

Create a form with name, email, and password fields.
Add required validation to all fields.
Add a textarea for message input.
Add a dropdown selection field.

🔰 LESSON 11: HTML Attributes

HTML attributes provide extra information about HTML elements. They modify the behavior, appearance, or functionality of elements.

Where Are Attributes Written?

Attributes are written inside the opening tag of an element.

<tag attribute="value">Content</tag>

Common HTML Attributes

1. The id Attribute

The id attribute gives a unique identity to an element. No two elements should have the same id.

<p id="intro">Welcome</p>

Used for:

CSS styling
JavaScript targeting
Anchor links

2. The class Attribute

The class attribute groups multiple elements together. Many elements can share the same class.

<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>

3. The style Attribute

Used to apply inline CSS directly to an element.

<p style="color: red; font-size:20px;">Red Text</p>

❌ Not recommended for large projects. ✅ Better to use external CSS.

4. The title Attribute

Displays a tooltip when the user hovers over an element.

<p title="This is extra info">Hover over me</p>

5. The src Attribute

Used in images, audio, and video to specify file location.

<img src="image.jpg" alt="Example Image">

6. The href Attribute

Used in anchor tags to define the link destination.

<a href="https://google.com">Visit Google</a>

7. The alt Attribute

Provides alternative text for images if they fail to load.

<img src="photo.jpg" alt="Student Photo">

Improves accessibility
Improves SEO
Helps screen readers

Boolean Attributes

Boolean attributes do not require a value. If present, they are considered TRUE.

<input type="text" required>
<button disabled>Submit</button>
<input type="checkbox" checked>

Common Boolean Attributes

required
disabled
checked
readonly
autofocus

Data Attributes (Advanced)

Custom attributes start with data-. They are used to store extra information.

<div data-user="admin" data-id="101">User Info</div>

Used heavily with JavaScript.

Important Rules

Attributes are written inside opening tags.
Use double quotes for attribute values.
id must be unique.
class can be reused.

💡 Attributes control how elements behave and interact. Without attributes, HTML elements are limited.

Class Exercise

Create an element with id and class.
Add a tooltip using the title attribute.
Create an input field with required and placeholder.
Create a custom data attribute.

🔰 LESSON 12: HTML Comments

HTML comments are notes written inside the code. They are not visible on the webpage. The browser ignores them completely.

Basic Comment Syntax

<!-- This is a comment -->

Comments start with .

Example With Code

<h1>Welcome</h1>

<!-- This paragraph is temporarily removed -->
<!--
<p>This text will not show on the page</p>
-->

The commented section will NOT appear in the browser.

Why Use HTML Comments?

To explain your code
To remind yourself about future updates
To temporarily disable code
For team collaboration

Example: Explaining Code

<!-- Navigation Section -->
<nav>
  <a href="home.html">Home</a>
</nav>

Temporarily Disabling Code

Instead of deleting code, you can comment it out:

<!--
<img src="old-image.jpg" alt="Old Image">
-->

This allows you to restore it later if needed.

Important Rules

Comments are not visible in the browser.
Comments do not affect webpage layout.
Do not put sensitive information inside comments.

💡 Comments improve code readability and make teamwork easier. Professional developers use comments to document their work.

Class Exercise

Add a comment above your heading explaining it.
Comment out one paragraph temporarily.
Add a comment inside your HTML document explaining a section.

🔰 LESSON 13: Semantic HTML

Semantic HTML means using HTML tags that clearly describe the meaning of the content inside them.

Instead of using only <div> for everything, we use meaningful tags that describe sections of a webpage.

Why Semantic HTML Is Important

Improves SEO (Search Engine Optimization)
Improves accessibility for screen readers
Makes code easier to understand
Improves website structure
Better for team development

Common Semantic Tags

1. <header>

Used for the top section of a webpage. It usually contains a logo, title, or navigation.

<header>
  <h1>Website Title</h1>
</header>

2. <nav>

Used for navigation links (menus).

<nav>
  <a href="home.html">Home</a>
  <a href="about.html">About</a>
</nav>

3. <main>

Contains the main content of the webpage. There should only be ONE <main> per page.

<main>
  <h2>Main Content</h2>
  <p>This is the main section of the page.</p>
</main>

4. <section>

Groups related content together.

<section>
  <h2>Our Services</h2>
  <p>We offer web development training.</p>
</section>

5. <article>

Used for independent content like blog posts or news articles.

<article>
  <h2>Blog Post Title</h2>
  <p>Blog content goes here.</p>
</article>

6. <aside>

Used for side content like sidebars or advertisements.

<aside>
  <p>Related Links</p>
</aside>

7. <footer>

Used for the bottom section of a webpage. It usually contains copyright and contact information.

<footer>
  <p>© 2025 Code4Academy</p>
</footer>

Example of Full Semantic Page Structure

<header>Header Section</header>

<nav>Navigation Links</nav>

<main>
  <section>
    Content Goes Here
  </section>
</main>

<footer>Footer Content</footer>

Semantic vs Non-Semantic Example

❌ Non-Semantic

<div class="header">Header</div>
<div class="footer">Footer</div>

✅ Semantic

<header>Header</header>
<footer>Footer</footer>

💡 Always use semantic tags when possible. They improve website structure and make your code professional.

Class Exercise

Create a webpage using header, nav, main, section, and footer.
Add one article inside the main section.
Add an aside section with related links.

🔰 LESSON 14: Block vs Inline Elements

HTML elements are classified into two main display types: Block elements and Inline elements.

1. Block Elements

Block elements take up the full width available. They always start on a new line.

Examples of Block Elements:

<div>
<p>
<h1> to <h6>
<section>
<article>
<header>
<footer>

Example

<p>Paragraph One</p>
<p>Paragraph Two</p>

Each paragraph appears on a new line because <p> is a block element.

2. Inline Elements

Inline elements only take up as much width as necessary. They do NOT start on a new line.

Examples of Inline Elements:

<span>
<a>
<strong>
<em>
<img>
<button>

Example

<span>Inline 1</span>
<span>Inline 2</span>

Both spans appear on the same line because they are inline elements.

Visual Difference Example

<div style="background: lightblue;">
  Block Element
</div>

<span style="background: yellow;">
  Inline Element
</span>

The block element stretches across the page. The inline element only wraps around the text.

Key Differences

Block	Inline
Takes full width	Takes only needed width
Starts on new line	Stays on same line
Can contain inline & block elements	Usually contains text or small elements

Important Concept

You can change display behavior using CSS:

<div style="display:inline;">Now Inline</div>
<span style="display:block;">Now Block</span>

CSS can change how elements behave visually.

💡 Understanding block and inline elements helps you build proper layouts and structure professional webpages.

Class Exercise

Create two paragraphs and observe block behavior.
Create two span elements and observe inline behavior.
Change a block element to inline using CSS.

🏆 LESSON 15: Mini Project – Build a Complete Webpage

Now it’s time to apply everything you have learned so far. In this project, you will build a complete small website using:

Headings
Paragraphs
Images
Lists
Tables
Forms
Links
Semantic HTML

🎯 Project Objective

Build a simple personal portfolio webpage or school webpage using proper HTML structure and semantic tags.

📌 Project Requirements

1. Page Structure

Use <header>
Use <nav> with at least 3 links
Use <main>
Use <section>
Use <footer>

2. Content Requirements

Add your name as an <h1>
Add a short description paragraph
Add at least one image
Add a list of skills or subjects
Add a table (Example: timetable or results)
Add a simple contact form

🧾 Example Project Structure

<header>
  <h1>Your Name</h1>
</header>

<nav>
  <a href="#about">About</a>
  <a href="#skills">Skills</a>
  <a href="#contact">Contact</a>
</nav>

<main>

  <section id="about">
    <h2>About Me</h2>
    <p>Short description here...</p>
  </section>

  <section id="skills">
    <h2>My Skills</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>

  <section id="contact">
    <h2>Contact Me</h2>
    <form>
      <input type="text" placeholder="Your Name">
      <input type="email" placeholder="Your Email">
      <button>Send</button>
    </form>
  </section>

</main>

<footer>
  <p>© 2025 Your Name</p>
</footer>

⭐ Bonus Challenge (Advanced Students)

Add navigation links that scroll to sections.
Add images inside a gallery section.
Style your project using inline CSS.
Add a table with real data.

📊 Assessment Criteria

Correct HTML structure
Use of semantic tags
Proper use of forms
Clean indentation
Project completeness

💡 Projects are the best way to master HTML. If you can build this without copying, you understand HTML!

Teacher Instructions

Let students build it individually.
Review each project.
Correct mistakes and explain improvements.

🔰 LESSON 16: HTML Meta Tags

Meta tags provide information about your webpage. They are placed inside the <head> section. Meta tags are NOT visible on the webpage.

📌 Where Meta Tags Are Written

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

Meta tags always go inside the <head> section.

1. Charset Meta Tag

<meta charset="UTF-8">

This defines character encoding. UTF-8 supports special characters, symbols, and emojis.

💡 Always include this in every HTML document.

2. Viewport Meta Tag (Important for Mobile)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This makes your website responsive on mobile devices.

width=device-width → Matches screen width
initial-scale=1.0 → Default zoom level

3. Description Meta Tag

<meta name="description" content="Learn HTML at Code4Academy">

Search engines use this description in search results.

It improves SEO and visibility.

4. Keywords Meta Tag

<meta name="keywords" content="HTML, CSS, Web Development">

This defines keywords related to your webpage.

⚡ Modern search engines do not depend heavily on keywords meta, but it can still be added.

5. Author Meta Tag

<meta name="author" content="Code4Academy">

Defines the author of the webpage.

6. Robots Meta Tag

<meta name="robots" content="index, follow">

Controls how search engines index your page.

index → Allow page to appear in search results
noindex → Do not show in search results
follow → Follow links on the page

7. Open Graph Meta Tags (Social Media)

Used when sharing your website on Facebook, WhatsApp, or LinkedIn.

<meta property="og:title" content="Code4Academy">
<meta property="og:description" content="Best coding academy">
<meta property="og:image" content="logo.png">

These control how your page appears when shared.

Example Complete Head Section

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="HTML Course">
  <meta name="author" content="Code4Academy">

  <title>My Website</title>

</head>

✅ Important Rules

Meta tags go inside the <head>.
They do not appear on the webpage.
They improve SEO and mobile responsiveness.

💡 Meta tags are powerful for search engine optimization and professional website development.

📊 Class Exercise

Create a head section with charset and viewport.
Add description and author meta tags.
Add one Open Graph meta tag.
Check your page source in the browser to see the meta tags.

🔰 LESSON 17: SEO Basics for HTML

SEO means Search Engine Optimization. It is the process of improving your website so it ranks higher on search engines like Google.

📌 What Is SEO?

Making your website searchable
Improving website visibility
Ranking higher on Google
Attracting more visitors

Good HTML structure improves SEO automatically.

✅ Important SEO Practices in HTML

1. Use Proper Headings

Use one <h1> per page and follow heading hierarchy.

<h1>Main Title</h1>
<h2>Sub Title</h2>
<h3>Section Title</h3>

Search engines use headings to understand page content.

2. Add Meta Description

<meta name="description" content="Learn HTML at Code4Academy">

This appears in search results under your website title.

3. Use Semantic HTML

Use tags like:

<header>
<nav>
<main>
<section>
<article>
<footer>

Semantic tags help search engines understand your page structure.

4. Optimize Images

<img src="photo.jpg" alt="Student learning HTML">

Always add alt text
Use compressed image files
Use descriptive filenames

5. Use Proper Title Tag

<title>Best HTML Course | Code4Academy</title>

The title tag is VERY important for SEO.

6. Internal & External Links

Linking to other pages improves SEO.

<a href="about.html">About Us</a>
<a href="https://google.com">External Link</a>

🚀 Advanced SEO Tips

Fast loading website
Mobile responsive design
Clean code structure
Good content quality
Proper keyword usage

❌ SEO Mistakes to Avoid

Too many H1 tags
Missing meta description
Missing alt text for images
Duplicate content

💡 SEO is not magic — it is about good structure, good content, and proper HTML usage.

📊 Class Exercise

Add a proper title and meta description to your project.
Add alt text to all images.
Check your page using "View Page Source" and analyze your SEO setup.

🔰 LESSON 18: HTML Accessibility

Accessibility means building websites that everyone can use, including people with disabilities.

A website should work for users who:

Use screen readers
Cannot use a mouse
Have visual impairments
Use keyboard navigation

✅ Why Accessibility Is Important

Improves user experience
Required by law in some countries
Improves SEO
Makes websites professional

1. Use Proper Semantic HTML

Always use meaningful tags like:

<header>
<nav>
<main>
<section>
<article>
<footer>

Avoid using only <div> for everything.

2. Add Alt Text to Images

<img src="student.jpg" alt="Student learning HTML">

Screen readers read the alt text to visually impaired users.

3. Use Labels for Form Inputs

Labels improve accessibility for forms.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

The for attribute connects the label to the input.

4. Use ARIA Attributes (Advanced)

ARIA stands for Accessible Rich Internet Applications. It helps improve accessibility for complex elements.

Example

<button aria-label="Close Menu">X</button>

aria-label gives extra information to screen readers.

5. Keyboard Navigation

Users should navigate using the Tab key
Buttons and links should be focusable
Avoid removing outline without replacement

6. Use Proper Color Contrast

Text must be readable against background colors. Avoid low contrast colors like light gray on white.

Accessibility Best Practices

Add alt text to images
Use proper heading structure
Use semantic tags
Label all form fields
Test website using keyboard only

💡 Accessibility is not optional — it is part of professional web development. Build websites that everyone can use.

📊 Class Exercise

Add alt text to all images in your project.
Add labels to all form inputs.
Add aria-label to one button.
Test navigating your page using only the keyboard.

🔰 LESSON 19: Advanced HTML Forms

In this lesson, we upgrade basic forms to professional-level forms. You will learn advanced input types, validation, grouping, and better structure.

1. Advanced Input Types

HTML provides many modern input types:

<input type="date">
<input type="time">
<input type="color">
<input type="file">
<input type="range">
<input type="url">
<input type="search">

date → Select a date
time → Select time
color → Color picker
file → Upload files
range → Slider control
url → Website link input
search → Search field

2. Form Validation Attributes

HTML supports built-in validation:

<input type="text" required minlength="3" maxlength="20">
<input type="number" min="1" max="100">
<input type="email" required>

Important Validation Attributes

required → Field must be filled
minlength / maxlength → Limit text length
min / max → Limit numbers
pattern → Custom validation using regex

3. Example Form With Validation

<form>

  <label>Username</label>
  <input type="text" required minlength="4">

  <label>Email</label>
  <input type="email" required>

  <label>Age</label>
  <input type="number" min="10" max="60">

  <button type="submit">Submit</button>

</form>

4. Fieldset and Legend

Used to group related form elements.

<form>

  <fieldset>
    <legend>Personal Information</legend>

    <input type="text" placeholder="Name">
    <input type="email" placeholder="Email">

  </fieldset>

</form>

<fieldset> → Groups form fields
<legend> → Title for the group

5. Select Dropdown (Advanced)

<select name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Dropdowns are used when users choose from predefined options.

6. Radio Buttons

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

Radio buttons allow only ONE selection per group. The name must be the same.

7. Checkboxes

<input type="checkbox" name="skills" value="html"> HTML
<input type="checkbox" name="skills" value="css"> CSS

Checkboxes allow multiple selections.

8. Textarea

<textarea rows="5" cols="30" placeholder="Write your message"></textarea>

Used for long text messages or comments.

9. Submit & Reset Buttons

<button type="submit">Submit</button>
<button type="reset">Reset</button>

submit → Sends form data
reset → Clears form fields

Best Practices for Professional Forms

Always use labels
Use proper input types
Add validation
Group related fields
Test form submission

💡 Advanced forms are the foundation of login systems, registration systems, and e-commerce websites.

📊 Class Exercise

Create a registration form with validation.
Add radio buttons and checkboxes.
Add a dropdown and textarea.
Group fields using fieldset and legend.

🔰 LESSON 20: HTML Audio & Video

HTML allows you to embed audio and video directly into a webpage without using external plugins.

🎵 1. Audio in HTML

The <audio> tag is used to add sound files.

Basic Audio Example

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Important Attributes

controls → Displays play/pause controls
autoplay → Plays automatically
loop → Repeats audio
muted → Starts muted

Example With Multiple Formats

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support audio.
</audio>

Providing multiple formats improves browser compatibility.

🎬 2. Video in HTML

The <video> tag is used to embed videos.

Basic Video Example

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video.
</video>

Important Video Attributes

controls → Shows video controls
autoplay → Plays automatically
loop → Replays automatically
muted → Starts muted
width / height → Controls video size

3. Video With Multiple Sources

<video controls width="500">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support video.
</video>

This improves compatibility across different browsers.

4. Embedding YouTube Videos

You can embed YouTube videos using an <iframe>.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen>
</iframe>

Replace VIDEO_ID with the actual YouTube video ID.

5. Best Practices for Media

Compress audio and video files for faster loading
Use multiple file formats
Always include fallback text
Avoid large video files on slow networks

💡 Media files increase website size. Always optimize them for performance and user experience.

📊 Class Exercise

Add an audio file with controls.
Add a video with controls and fixed width.
Embed a YouTube video using iframe.
Add loop and muted attributes to test behavior.

🔰 LESSON 21: HTML Iframes

An <iframe> (Inline Frame) is used to embed another webpage or external content inside your webpage.

📌 Basic Iframe Syntax

<iframe src="page.html" width="600" height="400">
</iframe>

The src attribute specifies the webpage to embed.

1. Embedding Another Local Page

<iframe src="about.html" width="500" height="300"></iframe>

This loads another HTML file inside the current page.

2. Embedding a Website

<iframe 
  src="https://example.com" 
  width="800" 
  height="500">
</iframe>

⚠ Some websites block iframe embedding for security reasons.

3. Embedding Google Maps

Google Maps provides an embed link that you can paste inside an iframe.

<iframe 
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="400"
  allowfullscreen
  loading="lazy">
</iframe>

Important Attributes

allowfullscreen → Allows fullscreen mode
loading="lazy" → Improves performance
frameborder → Controls border (deprecated in modern HTML)

4. Embedding YouTube Videos

<iframe 
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video"
  allowfullscreen>
</iframe>

Replace VIDEO_ID with the video ID from YouTube.

5. Security Best Practices

Only embed trusted websites
Be careful with external content
Use HTTPS sources
Add sandbox attribute when necessary

Example With Sandbox

<iframe 
  src="page.html"
  sandbox="allow-scripts allow-same-origin">
</iframe>

Sandbox improves security by restricting iframe actions.

💡 Iframes are powerful but should be used carefully. They increase page loading time if used excessively.

📊 Class Exercise

Embed another HTML page using iframe.
Embed a YouTube video.
Embed Google Maps into your webpage.
Add lazy loading to your iframe.

🔰 LESSON 22: HTML Entities

HTML entities are special codes used to display reserved characters, symbols, and special characters in HTML.

Some characters cannot be written directly because the browser may interpret them as HTML tags.

📌 Why Do We Need Entities?

To display reserved characters like < and >
To show special symbols
To display characters that conflict with HTML syntax

1. Common Reserved Character Entities

< → &lt;
> → &gt;
& → &amp;
" → &quot;
' → &apos;

Example

<p>Use &lt;h1&gt; to create headings</p>

The browser displays <h1> instead of interpreting it as a tag.

2. Common Symbol Entities

©  → &copy;
®   → &reg;
™ → &trade;
♥ → &hearts;
←  → &larr;
→  → &rarr;
↑  → &uarr;
↓  → &darr;

Example

<p>&copy; 2025 Code4Academy</p>

3. Special Space Entity

HTML collapses multiple spaces into one. To add extra space, use:

&nbsp;

Example

Hello&nbsp;&nbsp;&nbsp;World

This creates extra spacing between words.

4. Mathematical Symbols

+   → &plus;
−  → &minus;
×  → &times;
÷ → &divide;
= → &equals;
²   → &sup2;
³   → &sup3;

Example

<p>10 &divide; 2 = 5</p>

5. Currency Symbols

$
€
£
¥

Used to display currency symbols safely.

Best Practices

Use entities when writing reserved characters
Use   carefully — avoid overusing it
Use entities for special symbols

💡 Entities ensure your special characters display correctly without breaking your HTML structure.

📊 Class Exercise

Display <, >, and & using entities.
Add a copyright symbol to your footer.
Display a mathematical equation using entities.
Add extra spacing using  .

🔰 LESSON 23: Favicons

A favicon is a small icon that appears in the browser tab next to the website title.

It helps users quickly recognize your website.

📌 What Is a Favicon?

Small website icon (usually 16x16 or 32x32)
Displayed in browser tabs
Displayed in bookmarks
Displayed in browser history

✅ How to Add a Favicon

Favicons are added inside the <head> section.

Example

<head>

  <title>My Website</title>

  <link rel="icon" type="image/png" href="favicon.png">

</head>

📁 Recommended Favicon Formats

.ico (Most common & supported everywhere)
.png (Modern websites)
.svg (Supported in modern browsers)

🌍 Advanced Favicon Setup (Professional Method)

Professional websites add multiple icon sizes for different devices.

<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon-16.png">

This improves compatibility across devices and platforms.

📱 Favicon for Mobile & Apps

Apple devices use apple-touch-icon
Android devices use PNG icons
Progressive Web Apps use multiple icon sizes

🔧 How to Create a Favicon

Design your icon (logo or symbol)
Resize it to 16x16 or 32x32
Save as .ico or .png
Place it inside your project folder
Link it inside the <head>

💡 A favicon improves branding and makes your website look professional. Always add one to real projects.

📊 Class Exercise

Create or download a logo image.
Convert it into a favicon file.
Add it inside your <head> section.
Refresh the browser and check the tab icon.

🔰 LESSON 24: Responsive Design Basics

Responsive design means building websites that automatically adjust to different screen sizes like:

Mobile phones
Tablets
Laptops
Large desktop screens

📌 Why Responsive Design Is Important

Most users browse on mobile devices
Improves user experience
Improves SEO ranking
Required for professional websites

1. Viewport Meta Tag (Very Important)

Always include this inside the <head> section:

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

This makes your website scale properly on mobile devices.

2. Using Flexible Widths

Avoid fixed widths like width: 1000px; for layouts. Instead use percentages or flexible units.

<div style="width: 80%;">
  Responsive Box
</div>

Percentage widths adjust based on screen size.

3. Responsive Images

Make images scale automatically:

<img src="image.jpg"
     alt="Example"
     style="max-width:100%; height:auto;">

This prevents images from overflowing on small screens.

4. Media Queries (CSS Responsive Tool)

Media queries allow you to apply styles based on screen size.

<style>

  body {
    background: lightblue;
  }

  @media (max-width: 768px) {
    body {
      background: lightgreen;
    }
  }

</style>

The background changes when the screen width is smaller than 768px.

5. Responsive Layout Example

<div style="display:flex; flex-wrap:wrap;">

  <div style="flex:1; min-width:200px;">
    Column 1
  </div>

  <div style="flex:1; min-width:200px;">
    Column 2
  </div>

</div>

Flexbox helps create responsive layouts easily.

✅ Best Practices for Responsive Design

Always add the viewport meta tag
Use flexible units (% , rem , vh , vw)
Use media queries
Test on mobile and desktop
Optimize images

💡 Responsive design is mandatory for modern websites. If your site is not mobile-friendly, users will leave.

📊 Class Exercise

Add a viewport meta tag to your project.
Create a two-column layout using flexbox.
Add a media query to change layout on mobile.
Make at least one image responsive.

🔰 LESSON 25: HTML5 New Elements

HTML5 introduced new semantic and structural elements to improve website structure, SEO, and accessibility.

📌 Why HTML5 New Elements?

Better page structure
Improved SEO
Improved accessibility
Cleaner code

1. New Structural Elements

<header>

Used for page or section headers.

<nav>

Used for navigation menus and links.

<main>

Contains the main content of the page.

<section>

Groups related content together.

<article>

Represents independent content like blog posts.

<aside>

Used for side content like ads or sidebars.

<footer>

Represents the footer section of a page or section.

📌 Example Using New Elements

<header>
  <h1>My Website</h1>
</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<main>

  <section>
    <article>
      <h2>Blog Post Title</h2>
      <p>Blog content here...</p>
    </article>
  </section>

  <aside>
    Side content here
  </aside>

</main>

<footer>
  <p>Copyright 2025</p>
</footer>

2. Multimedia Elements

<audio> → Play sound files
<video> → Display video files
<source> → Provide multiple media formats
<track> → Add subtitles to video

Example With Subtitles

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

3. New Form Elements

date
time
email
url
range
search
color

<input type="date">
<input type="color">
<input type="range" min="0" max="100">

4. New HTML5 Input Attributes

placeholder
required
autofocus
autocomplete
multiple
pattern

<input type="email" placeholder="Enter email" required>

✅ Best Practices

Use semantic elements instead of many divs
Structure content properly
Use article for blog content
Use section for grouped content

💡 HTML5 new elements make your website modern, clean, and search-engine friendly.

📊 Class Exercise

Create a page using header, nav, main, section, and footer.
Add a video with a subtitle track.
Add at least 3 new input types.
Refactor your project to use semantic elements.

🔰 LESSON 26: HTML Data Attributes

Data attributes allow you to store extra information inside HTML elements using custom attributes.

They are used mainly with JavaScript to store and access data dynamically.

📌 What Are Data Attributes?

Data attributes start with data- followed by a name.

Example

<div data-id="101" data-user="John">
  User Profile
</div>

The element now stores custom information inside it.

1. Accessing Data Attributes with JavaScript

JavaScript can read data attributes using:

element.dataset.attributeName

Example

<div id="box" data-product="Laptop" data-price="500">
  Product Info
</div>

<script>
  const box = document.getElementById("box");

  console.log(box.dataset.product);
  console.log(box.dataset.price);
</script>

Output:

Laptop
500

2. Real-World Example

Data attributes are useful for:

Storing product IDs
Storing user IDs
Storing dynamic values
Connecting HTML with JavaScript

Example With Button

<button data-user-id="45" onclick="showUser(this)">
  View User
</button>

<script>
  function showUser(button) {
    alert("User ID: " + button.dataset.userId);
  }
</script>

When clicked, the button shows the stored user ID.

3. Rules for Data Attributes

Must start with data-
Can store strings or numbers
Accessible via dataset
Case converts from kebab-case to camelCase

Example Conversion

data-user-name

Becomes:

element.dataset.userName

4. Advantages of Data Attributes

Keeps custom data inside HTML
No need for hidden inputs
Cleaner JavaScript integration
Improves dynamic interaction

💡 Data attributes are powerful for interactive websites, dashboards, and dynamic web applications.

📊 Class Exercise

Create a div with at least two data attributes.
Read the data values using JavaScript and log them.
Create a button that displays its stored data value.
Change the data value dynamically using JavaScript.

🔰 LESSON 27: HTML Global Attributes

Global attributes are attributes that can be used on almost any HTML element.

They provide extra control over elements such as styling, identification, accessibility, and behavior.

📌 What Are Global Attributes?

Global attributes can be added to:

div
p
h1 – h6
button
section
form elements
and most HTML elements

1. id Attribute

The id attribute gives a unique identifier to an element.

<div id="header">
  Website Header
</div>

IDs must be unique on a page.

2. class Attribute

The class attribute groups elements for styling or JavaScript.

<div class="card">Card 1</div>
<div class="card">Card 2</div>

Multiple elements can share the same class.

3. style Attribute

Used to apply inline CSS directly to an element.

<p style="color:red; font-weight:bold;">
  Styled Text
</p>

⚠ Avoid overusing inline styles in large projects.

4. title Attribute

The title attribute shows extra information when the user hovers.

<button title="Click to submit">
  Submit
</button>

It improves user experience.

5. hidden Attribute

Hides an element from the page.

<p hidden>This text is hidden</p>

The element will not be visible in the browser.

6. contenteditable Attribute

Makes an element editable by the user.

<p contenteditable="true">
  You can edit this text
</p>

Useful for demos and interactive content.

7. draggable Attribute

Allows elements to be dragged.

<div draggable="true">
  Drag Me
</div>

Used in drag-and-drop interfaces.

8. tabindex Attribute

Controls keyboard navigation order.

<button tabindex="1">Button 1</button>
<button tabindex="2">Button 2</button>

Helps improve accessibility and keyboard control.

📌 Other Important Global Attributes

data-* (custom data attributes)
lang (language specification)
dir (text direction)
spellcheck
accesskey

✅ Best Practices

Use id for unique elements
Use class for styling groups
Avoid overusing inline styles
Use tabindex carefully

💡 Global attributes give you control over behavior, styling, accessibility, and interaction across your website.

📊 Class Exercise

Add id and class to elements in your project.
Use title and hidden attributes.
Make one paragraph editable.
Add tabindex to buttons and test keyboard navigation.

🔰 LESSON 28: Embedded Content in HTML

Embedded content means inserting external resources directly into your webpage.

Examples include maps, external websites, videos, documents, and interactive content.

📌 What Is Embedded Content?

Content loaded from external sources
Displayed inside your webpage
Usually embedded using <iframe>, <object>, or <embed>

1. Embedding Websites (Iframe)

<iframe 
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy">
</iframe>

Used to embed external websites or internal pages.

2. Embedding Google Maps

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="400"
  allowfullscreen
  loading="lazy">
</iframe>

Maps are commonly embedded for business locations.

3. Embedding YouTube Videos

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube Video"
  allowfullscreen>
</iframe>

Replace VIDEO_ID with the actual video ID.

4. Embedding PDFs

You can embed PDF documents directly:

<iframe
  src="document.pdf"
  width="800"
  height="600">
</iframe>

Users can view documents without downloading them.

5. Using <object> Tag

<object data="file.pdf" width="600" height="400">
  PDF Not Supported
</object>

Alternative method for embedding files.

6. Using <embed> Tag

<embed src="file.pdf" width="600" height="400">

Used for embedding external resources.

📌 Security Best Practices

Only embed trusted sources
Use HTTPS links
Add sandbox to restrict iframe behavior

<iframe
  src="page.html"
  sandbox="allow-scripts allow-same-origin">
</iframe>

✅ Best Practices

Use lazy loading for performance
Avoid embedding too many external resources
Test on mobile devices

💡 Embedded content makes your website interactive, but it must be used carefully to avoid slowing down your site.

📊 Class Exercise

Embed a YouTube video.
Embed a Google Map.
Embed a PDF file.
Add sandbox to an iframe and test restrictions.

🔰 LESSON 29: HTML Best Practices

Best practices are professional guidelines that help you write clean, efficient, and maintainable HTML code.

📌 Why Best Practices Matter

Makes code readable
Improves team collaboration
Improves website performance
Makes debugging easier
Professional development standard

1. Always Use Proper Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>

</body>
</html>

Always include DOCTYPE, language attribute, meta tags, and title.

2. Use Semantic HTML Instead of Div Everywhere

Use <header> instead of div for header
Use <nav> for navigation
Use <section> for grouped content
Use <footer> for page footer

Semantic HTML improves SEO and accessibility.

3. Use Clean Indentation

<section>
  <h2>Title</h2>
  <p>Paragraph</p>
</section>

Proper spacing and indentation make code easier to read.

4. Use Meaningful Class and ID Names

<div class="product-card">
<div id="login-form">

Avoid meaningless names like:

<div class="box1"> ❌

Use descriptive names instead.

5. Always Add Alt Text to Images

<img src="image.jpg" alt="Student studying HTML">

Improves accessibility and SEO.

6. Avoid Inline Styling

Bad Practice:

<p style="color:red">Text</p>

Good Practice:

<p class="error-text">Text</p>

7. Keep Files Organized

Separate HTML, CSS, and JavaScript
Use folders for images, styles, scripts
Use meaningful file names

8. Test Your Website

Test on mobile
Test on different browsers
Check for broken links
Validate your HTML

9. Validate Your HTML

Use the official HTML validator:

https://validator.w3.org

It checks for errors in your code.

💡 Following best practices separates beginners from professional developers. Clean code = Professional developer.

📊 Class Exercise

Refactor your project using semantic elements.
Remove inline styles and replace them with classes.
Validate your HTML using the official validator.
Improve your project structure for cleanliness.

🏆 LESSON 30: Final Project – Build Your Portfolio Website

🎉 Congratulations! You have completed the full HTML course.

Now it’s time to build a professional portfolio website using everything you learned.

🎯 Project Objective

Build a complete personal portfolio website that includes:

Semantic structure
Navigation menu
About section
Skills section
Projects section
Contact form
Images & media
Tables or structured data
SEO meta tags
Favicon

📌 Required Sections

1. Header + Navigation

<header>
  <h1>Your Name</h1>

  <nav>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

2. About Section

<section id="about">
  <h2>About Me</h2>
  <p>Short professional description about you.</p>
</section>

3. Skills Section

<section id="skills">
  <h2>Skills</h2>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

</section>

4. Projects Section

<section id="projects">

  <h2>My Projects</h2>

  <article>
    <h3>Project 1</h3>
    <p>Description of project.</p>
    <img src="project.jpg" alt="Project Screenshot">
    <a href="#">View Project</a>
  </article>

</section>

5. Contact Form

<section id="contact">

  <h2>Contact Me</h2>

  <form>
    <input type="text" placeholder="Your Name" required>
    <input type="email" placeholder="Your Email" required>
    <textarea placeholder="Your Message"></textarea>
    <button type="submit">Send</button>
  </form>

</section>

🚀 Advanced Features (Bonus Points)

Add a downloadable CV (PDF)
Add social media links
Add a video introduction
Add smooth scroll navigation
Add animations with CSS

🏅 Project Evaluation Criteria

Proper HTML structure
Use of semantic tags
Responsive design
Clean code formatting
Complete required sections

💡 This portfolio project proves that you understand real-world HTML development. You can now build professional websites!

🎓 Final Task

Build your portfolio from scratch.
Upload it to GitHub Pages or hosting server.
Share it as your certificate project.

🎉 CONGRATULATIONS — YOU HAVE COMPLETED HTML MASTER COURSE!

🚀 LESSON 31: Advanced SEO Techniques

Advanced SEO focuses on optimizing your website for better search engine ranking, visibility, performance, and indexing.

📌 What Is Advanced SEO?

Technical optimization
Structured data
Performance optimization
Content optimization
Search engine indexing control

1. Advanced Meta Tags for SEO

<meta name="description" content="Professional HTML Course">
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">

These help search engines understand and rank your website properly.

2. Open Graph & Social SEO

Open Graph tags improve how your website appears when shared on social media platforms.

<meta property="og:title" content="My Portfolio">
<meta property="og:description" content="Developer Portfolio Website">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://example.com">

These improve click-through rates on social media.

3. Structured Data (Schema Markup)

Structured data helps search engines understand your content better.

Example (JSON-LD Schema)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Your Name",
  "url": "https://example.com",
  "jobTitle": "Web Developer"
}
</script>

Used for rich search results and better visibility.

4. Technical SEO Improvements

Use HTTPS
Improve page loading speed
Optimize images
Minify CSS & JavaScript
Use clean URL structure

5. Sitemap & Robots File

XML Sitemap

A sitemap helps search engines crawl your website.

https://example.com/sitemap.xml

robots.txt

User-agent: *
Allow: /

Controls how search engine bots access your site.

6. Internal Linking Strategy

Link pages together
Use descriptive anchor text
Avoid broken links

<a href="services.html">Our Services</a>

7. Image SEO Optimization

Use descriptive filenames
Add alt text
Compress images
Use modern formats like WebP

<img src="html-course.webp" alt="HTML Course Training">

8. Core Web Vitals (Performance SEO)

Largest Contentful Paint (LCP)
First Input Delay (FID)
Cumulative Layout Shift (CLS)

Fast websites rank higher on Google.

✅ Advanced SEO Best Practices

Write quality content
Target specific keywords
Optimize page titles
Use heading hierarchy properly
Monitor analytics and performance

💡 Advanced SEO combines technical optimization, content strategy, and performance improvement.

📊 Class Exercise

Add Open Graph tags to your project.
Create a JSON-LD schema block.
Add a robots.txt example.
Optimize your portfolio for better SEO ranking.

⚡ LESSON 32: Website Performance Optimization

Performance optimization means improving your website speed, responsiveness, and overall loading efficiency.

Faster websites improve:

User experience
SEO ranking
Conversion rate
Search engine performance

📌 Why Website Speed Matters

Users leave slow websites
Google ranks fast websites higher
Better mobile experience

1. Optimize Images

Compress images
Use WebP format
Use proper image dimensions
Add responsive image styling

<img src="image.webp"
     alt="Optimized Image"
     style="max-width:100%; height:auto;">

2. Use Lazy Loading

Lazy loading delays loading images and iframes until needed.

<img src="image.jpg"
     loading="lazy"
     alt="Lazy Image">

<iframe src="video.html" loading="lazy"></iframe>

3. Minify CSS & JavaScript

Remove unnecessary spaces and comments to reduce file size.

style.css → style.min.css
script.js → script.min.js

Smaller files load faster.

4. Reduce HTTP Requests

Combine CSS files
Combine JavaScript files
Use fewer external resources

Each file request slows down page loading.

5. Use Browser Caching

Caching stores website files in the browser so they don't need to reload every time.

This is usually configured on the server.

6. Use Content Delivery Network (CDN)

A CDN delivers website content from servers closest to the user’s location.

Faster loading
Better global performance
Reduced server load

7. Defer JavaScript Loading

Use defer to prevent blocking page rendering.

<script src="script.js" defer></script>

This improves page load speed.

8. Reduce Large DOM Size

Avoid unnecessary nested elements
Keep HTML structure clean
Remove unused elements

9. Use Efficient Code Structure

Avoid inline CSS
Avoid heavy animations
Optimize external libraries

✅ Performance Testing Tools

Google PageSpeed Insights
Lighthouse (Chrome DevTools)
GTmetrix
WebPageTest

Use these tools to analyze and improve speed.

💡 Performance optimization is a key skill for professional web developers. Fast websites rank higher and convert better.

📊 Class Exercise

Add lazy loading to your images.
Add defer to your JavaScript files.
Optimize at least 3 images in your project.
Test your website using Lighthouse.

📊 LESSON 33: Schema Markup (Structured Data)

Schema markup is structured data added to your website to help search engines understand your content better.

It improves search visibility and enables rich results like star ratings, product info, and business details.

📌 What Is Schema Markup?

Uses structured data in JSON-LD format
Helps search engines understand page content
Improves search appearance
Supports rich snippets

1. Basic Schema Example (Person)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Your Name",
  "jobTitle": "Web Developer",
  "url": "https://example.com",
  "sameAs": [
    "https://twitter.com/yourprofile",
    "https://linkedin.com/in/yourprofile"
  ]
}
</script>

This helps search engines understand personal branding.

2. Organization Schema Example

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Code4Academy",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png"
}
</script>

Used for business websites and companies.

3. Local Business Schema

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Code4Academy",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Main Street",
    "addressLocality": "City",
    "addressCountry": "Country"
  },
  "telephone": "+123456789"
}
</script>

Great for physical businesses and local companies.

4. Product Schema Example

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "HTML Course",
  "description": "Complete HTML training course",
  "brand": {
    "@type": "Brand",
    "name": "Code4Academy"
  }
}
</script>

Used for e-commerce websites and online products.

📌 Where to Place Schema Markup?

Inside the <head> section
Or inside the <body> section
Placed using a <script> tag with type="application/ld+json"

✅ Benefits of Schema Markup

Rich search results
Better click-through rate
Improved SEO visibility
Better search engine understanding

🔍 Testing Your Schema

Use Google Structured Data Testing Tool:

https://validator.schema.org

Test your structured data for errors.

💡 Schema markup gives search engines detailed information about your website and improves professional SEO ranking.

📊 Class Exercise

Add a Person schema to your portfolio.
Add an Organization schema to your project.
Test your schema using the official validator.
Experiment with Product or LocalBusiness schema.

📢 LESSON 34: Open Graph Meta Tags

Open Graph (OG) tags control how your website appears when shared on social media platforms like:

Facebook
WhatsApp
LinkedIn
Twitter (X)

📌 Why Open Graph Is Important

Improves social media appearance
Increases click-through rate
Controls title, image, and description preview
Makes sharing professional

1. Basic Open Graph Example

Open Graph tags are placed inside the <head> section.

<meta property="og:title" content="My Portfolio Website">
<meta property="og:description" content="Professional developer portfolio">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

2. Important Open Graph Tags Explained

og:title → Title shown on social media
og:description → Short preview description
og:image → Image displayed in preview
og:url → Page URL
og:type → Type of content (website, article, product)

3. Twitter (X) Card Tags

Twitter uses special meta tags for preview cards.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Portfolio">
<meta name="twitter:description" content="Developer Portfolio Website">
<meta name="twitter:image" content="https://example.com/image.jpg">

4. Example Combined in Head Section

<head>

  <title>My Website</title>

  <meta property="og:title" content="My Website">
  <meta property="og:description" content="Best Web Development Course">
  <meta property="og:image" content="image.jpg">
  <meta property="og:url" content="https://example.com">

</head>

📌 Best Practices for Open Graph

Use high-quality images (1200x630 recommended)
Use clear and short titles
Use strong descriptions
Test using Facebook Sharing Debugger

🔍 Testing Your Open Graph Tags

Use this tool to test:

https://developers.facebook.com/tools/debug/

Paste your URL and check preview results.

💡 Open Graph tags improve how your website looks when shared. They are essential for marketing and branding.

📊 Class Exercise

Add Open Graph tags to your portfolio project.
Add a large preview image (1200x630).
Test sharing your website link on WhatsApp.
Verify using the Facebook Debug Tool.

🚀 LESSON 35: Progressive Enhancement

Progressive enhancement is a web development strategy that starts with a basic working website and gradually adds advanced features for modern browsers.

The website should work for everyone — even if JavaScript or advanced features are disabled.

📌 What Is Progressive Enhancement?

Start with basic HTML
Add CSS for better styling
Add JavaScript for advanced features
Ensure core functionality always works

1. Basic Example (HTML First)

Build a functional form using only HTML:

<form>
  <input type="text" required placeholder="Your Name">
  <button type="submit">Submit</button>
</form>

This form works even if JavaScript is disabled.

2. Enhance With CSS

Add styling to improve appearance:

<style>
form {
  padding: 20px;
  background: #f4f4f4;
  border-radius: 8px;
}

button {
  background: blue;
  color: white;
  padding: 10px;
}
</style>

CSS improves design without breaking functionality.

3. Enhance With JavaScript

Add interactivity after ensuring the basic version works:

<script>
document.querySelector("form")
.addEventListener("submit", function(e) {
  e.preventDefault();
  alert("Form submitted!");
});
</script>

JavaScript adds extra features but is not required for core functionality.

📌 Why Progressive Enhancement Matters

Website works on old browsers
Works with JavaScript disabled
Improves accessibility
Better performance
Safer development approach

📌 Progressive Enhancement vs Graceful Degradation

Progressive Enhancement

Start simple → Add features gradually

Graceful Degradation

Build advanced → Try to make it work on older systems

✅ Modern development prefers Progressive Enhancement.

✅ Best Practices

Ensure core content is available in pure HTML
Add styling after structure
Add JavaScript last
Test without JavaScript enabled

💡 Always build websites that function without relying on advanced technologies.

📊 Class Exercise

Create a working form using only HTML.
Add CSS styling to improve appearance.
Add JavaScript to show a success message.
Test the form with JavaScript disabled.

♿ LESSON 36: Accessibility Deep Dive

Accessibility means building websites that everyone can use — including people with disabilities.

A professional website must support:

Screen readers
Keyboard navigation
Visual impairment users
Hearing impairment users
Motor disability users

📌 Why Accessibility Is Important

Improves user experience
Required by law in many countries
Improves SEO
Increases website usability

1. Proper Semantic HTML

Use semantic tags instead of generic divs.

<header>
  <nav>
    <a href="#home">Home</a>
  </nav>
</header>

Screen readers understand semantic structure better.

2. Use Alt Text for Images

<img src="profile.jpg"
     alt="Student learning web development">

Alt text describes images for visually impaired users.

3. Use Proper Labeling for Forms

<label for="email">Email Address</label>
<input type="email" id="email" required>

Labels connect form inputs to descriptions.

4. ARIA Attributes

ARIA (Accessible Rich Internet Applications) improves accessibility for dynamic content.

Example:

<button aria-label="Close Menu">X</button>

Common ARIA attributes:

aria-label
aria-hidden
aria-live
aria-expanded

5. Keyboard Navigation

Use tabindex carefully
Ensure buttons are focusable
Test with Tab and Shift + Tab

<button tabindex="0">Click Me</button>

6. Color Contrast

Use strong contrast between text and background
Avoid light text on light background
Test using contrast tools

Good contrast improves readability for everyone.

7. Accessible Forms

<form>
  <label for="name">Name</label>
  <input type="text" id="name" required>

  <button type="submit">Submit</button>
</form>

Use labels
Use required validation
Show clear error messages

8. Accessible Tables

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
</table>

Use scope to improve table accessibility.

📌 Accessibility Testing Tools

Lighthouse (Chrome DevTools)
WAVE Accessibility Tool
AXE Accessibility Checker
Screen reader testing (NVDA / VoiceOver)

✅ Professional Accessibility Checklist

All images have alt text
Forms have labels
Keyboard navigation works
Proper heading structure (h1 → h2 → h3)
Good color contrast

💡 Accessibility is not optional — it is a professional requirement for modern web development.

📊 Class Exercise

Add proper alt text to all images in your project.
Fix form labels and improve validation.
Add aria-label to important buttons.
Test your website using Lighthouse accessibility audit.

♿ LESSON 37: Advanced ARIA & Accessibility Techniques

ARIA (Accessible Rich Internet Applications) is used to improve accessibility for dynamic and interactive content.

Advanced ARIA helps screen readers understand:

Navigation menus
Modal dialogs
Dropdowns
Dynamic content updates
Interactive UI components

📌 When Should You Use ARIA?

When creating custom UI components
When using div or span instead of semantic elements
When building JavaScript-based interfaces

❌ Do NOT use ARIA on elements that already have built-in accessibility.

1. aria-label

Adds a text label for screen readers.

<button aria-label="Close Modal">X</button>

Used for icons or buttons without visible text.

2. aria-hidden

Hides elements from screen readers.

<div aria-hidden="true">
  Decorative Image
</div>

Useful for decorative content.

3. aria-live

Announces dynamic updates to screen readers.

<div aria-live="polite">
  Your form was submitted successfully.
</div>

Used for notifications and live updates.

4. aria-expanded

Indicates whether expandable content is open or closed.

<button aria-expanded="false"
        aria-controls="menu">
  Menu
</button>

<div id="menu" hidden>
  Menu Content
</div>

JavaScript updates aria-expanded to true/false dynamically.

5. aria-controls

Links a button to the element it controls.

<button aria-controls="panel">Toggle</button>
<div id="panel">
  Content
</div>

6. aria-required

Marks form fields as required.

<input type="text" aria-required="true">

Helps assistive technologies detect required fields.

7. aria-role (Role Attribute)

Defines the role of an element.

<div role="button" tabindex="0">
  Custom Button
</div>

Use roles when building custom UI components.

📌 Advanced ARIA Best Practices

Use semantic HTML first
Use ARIA only when necessary
Do not replace native elements with ARIA
Test with screen readers

🚀 Example: Accessible Toggle Menu

<button aria-expanded="false"
        aria-controls="navMenu"
        onclick="toggleMenu(this)">
  Menu
</button>

<nav id="navMenu" hidden>
  Navigation Links
</nav>

<script>
function toggleMenu(btn){
  const menu = document.getElementById("navMenu");
  const expanded = btn.getAttribute("aria-expanded") === "true";

  btn.setAttribute("aria-expanded", !expanded);
  menu.hidden = expanded;
}
</script>

This improves accessibility for interactive components.

📌 Accessibility Testing Tools

Lighthouse Audit
WAVE Tool
AXE DevTools
NVDA Screen Reader

💡 Advanced ARIA is powerful — but misuse can reduce accessibility. Always prioritize semantic HTML first.

📊 Class Exercise

Add aria-expanded to your navigation menu.
Add aria-live to a notification section.
Create a toggle panel using aria-controls.
Test your project using a screen reader tool.

🌐 LESSON 38: HTML APIs & Web APIs

HTML APIs (Web APIs) allow your website to interact with browser features and device capabilities.

APIs make websites dynamic, interactive, and powerful.

📌 What Are Web APIs?

Built-in browser features
Used with JavaScript
Control device hardware & browser functions
Enable advanced web applications

1. Geolocation API

Gets the user's location (with permission).

navigator.geolocation.getCurrentPosition(function(position){
  console.log("Latitude:", position.coords.latitude);
  console.log("Longitude:", position.coords.longitude);
});

Used for maps, delivery apps, and location-based services.

2. LocalStorage API

Stores data in the browser permanently.

// Save data
localStorage.setItem("name", "John");

// Get data
let name = localStorage.getItem("name");

// Remove data
localStorage.removeItem("name");

Used for saving user preferences and app data.

3. SessionStorage API

Stores data temporarily for one browser session.

sessionStorage.setItem("theme", "dark");

Data disappears when the tab is closed.

4. Fetch API

Used to fetch data from a server or external API.

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

Powering modern web applications.

5. Canvas API

Used to draw graphics inside the browser.

<canvas id="myCanvas" width="300" height="200"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 80);
</script>

Used for games, charts, and animations.

6. Drag & Drop API

Enables drag-and-drop functionality.

<div draggable="true">Drag Me</div>

Combined with JavaScript event listeners.

7. Notifications API

Sends browser notifications.

Notification.requestPermission().then(permission => {
  if(permission === "granted"){
    new Notification("Hello User!");
  }
});

Used for alerts and real-time updates.

8. Web Storage API

LocalStorage
SessionStorage

Stores data directly in the browser.

9. Media Devices API

Access camera and microphone.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    console.log("Camera Access Granted");
  });

Used for video apps and recording.

📌 Why Web APIs Are Important

Create advanced web apps
Build interactive websites
Access hardware features
Store data locally

💡 Web APIs turn static HTML websites into powerful modern web applications.

📊 Class Exercise

Create a page that stores user name using LocalStorage.
Display user location using Geolocation API.
Create a small canvas drawing.
Trigger a browser notification.

💻 LESSON 39: Forms + PHP Integration

This lesson shows how HTML forms connect to a backend server using PHP for processing user data.

HTML collects data → PHP processes data → Server responds.

📌 How Forms Connect to PHP

Form sends data using POST or GET
PHP receives form data
PHP processes and returns a response

1. Basic HTML Form (Connected to PHP)

<form action="process.php" method="POST">

  <label>Name</label>
  <input type="text" name="username" required>

  <label>Email</label>
  <input type="email" name="email" required>

  <button type="submit">Submit</button>

</form>

The action attribute sends data to a PHP file.

2. PHP File (process.php)

<?php

if($_SERVER["REQUEST_METHOD"] == "POST"){

  $name = $_POST["username"];
  $email = $_POST["email"];

  echo "Welcome " . $name . "<br>";
  echo "Your email is " . $email;

}

?>

PHP receives form data using the $_POST superglobal.

3. Using GET Method

<form action="search.php" method="GET">

  <input type="text" name="query">
  <button type="submit">Search</button>

</form>

Data appears in the URL when using GET.

4. PHP GET Example

<?php

if(isset($_GET["query"])){

  $search = $_GET["query"];
  echo "You searched for: " . $search;

}

?>

5. Form Validation with PHP

Always validate user input on the server.

<?php

$name = trim($_POST["username"]);

if(empty($name)){
  echo "Name is required";
}

?>

Check empty fields
Validate email format
Sanitize input

6. Sanitizing User Input (Security)

<?php

$name = htmlspecialchars($_POST["username"]);

?>

Prevents XSS (Cross Site Scripting) attacks.

📌 Important Security Best Practices

Always validate input on server
Sanitize user data
Use prepared statements for database
Never trust frontend validation alone

🚀 Real World Example Project

Build a contact form that:

Sends form data to PHP
Stores data in database
Sends confirmation email
Shows success message

💡 Forms + PHP integration is the foundation of dynamic websites and real backend systems.

📊 Class Exercise

Create a working contact form.
Connect it to a PHP file.
Display submitted data on the page.
Validate and sanitize user input.

🌍 LESSON 40: Multi-Page Website Structure

A multi-page website contains multiple HTML pages connected together using navigation links.

This is how professional websites are structured.

📌 What Is a Multi-Page Website?

Home page (index.html)
About page
Services page
Contact page
Blog pages

Each page is a separate HTML file connected via links.

1. Recommended Folder Structure

/project-folder
│
├── index.html
├── about.html
├── services.html
├── contact.html
│
├── /css
│    └── style.css
│
├── /js
│    └── script.js
│
├── /images
│    └── logo.png

Organized structure = Professional development.

2. Navigation Between Pages

Use anchor links to connect pages:

<nav>
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="services.html">Services</a>
  <a href="contact.html">Contact</a>
</nav>

Clicking links loads different HTML files.

3. Example of index.html

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
</head>
<body>

  <h1>Welcome to Our Website</h1>

  <nav>
    <a href="about.html">About</a>
  </nav>

</body>
</html>

4. Reusable Components (Header & Footer)

In multi-page websites:

Keep header consistent across pages
Keep footer consistent across pages
Copy shared sections or use server includes / templates

<header>
  <h2>Company Name</h2>
</header>

<footer>
  © 2025 Company Name
</footer>

5. Linking CSS & JavaScript Properly

<link rel="stylesheet" href="css/style.css">

<script src="js/script.js" defer></script>

Use external files to avoid repeating code.

6. Advanced Multi-Page Architecture

Use templates (PHP / server-side rendering)
Use layout components
Use routing systems for large projects
Use frameworks for scalable apps

🚀 Real World Project Example

Build a full website with:

Homepage
About page
Services page
Blog page
Contact page with form + PHP

💡 Multi-page structure is the foundation of professional business websites and enterprise applications.

🎓 Final Assignment

Create a 5-page website.
Add navigation between all pages.
Use a shared CSS file.
Deploy it online.

🎉 CONGRATULATIONS — YOU HAVE COMPLETED THE FULL HTML MASTER COURSE!

🚀 LESSON 41: Website Deployment

Deployment means publishing your website online so users around the world can access it.

This is the final step in professional web development.

📌 What Is Deployment?

Uploading files to a server
Connecting domain name
Configuring hosting
Making website publicly accessible

1. Deployment Options

GitHub Pages – Free static hosting
Netlify – Free + Professional hosting
Vercel – Modern frontend hosting
Shared Hosting – cPanel hosting
VPS / Dedicated Server – Full control

2. Deploying to GitHub Pages

Step 1 – Upload Project to GitHub

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/repo.git
git push -u origin main

Step 2 – Enable GitHub Pages

Go to Repository Settings
Click Pages
Select "Deploy from branch"
Choose main branch
Save

Your website will be live at:

https://username.github.io/repository-name

3. Deploying to Netlify

Login to Netlify
Drag and drop your project folder
Or connect GitHub repository
Click Deploy

Netlify gives automatic deployment on code updates.

4. Deploying to Shared Hosting (cPanel)

Step 1

Login to cPanel
Open File Manager
Upload project into public_html

Step 2

Upload database if needed
Configure config.php / database connection

5. Connecting a Domain Name

Buy a domain from a registrar
Point DNS to hosting provider
Add A record / CNAME
Wait for propagation

Example:

yourdomain.com
www.yourdomain.com

6. Adding SSL Certificate

HTTPS protects website data
Most hosting providers offer free SSL
Enable SSL from hosting dashboard

Secure websites rank higher on Google.

7. Post-Deployment Checklist

Test all links
Test forms
Check images
Check responsiveness
Test on different browsers

🚀 Professional Deployment Workflow

Develop locally
Test thoroughly
Push to GitHub
Deploy to hosting
Connect domain
Enable SSL

💡 Deployment turns your project into a real live product. This is what companies expect from professional developers.

🎓 Final Assignment

Deploy your portfolio online.
Connect a custom domain (if available).
Enable HTTPS.
Share your live website link.

🎉 CONGRATULATIONS — YOU HAVE COMPLETED THE FULL COURSE!

🌍 LESSON 42: Website Hosting Deep Dive

Hosting is the service that stores your website files and makes them accessible on the internet.

Without hosting — your website cannot go live.

📌 What Is Website Hosting?

Stores HTML, CSS, JS, images, and files
Runs backend scripts (PHP, Node, Python)
Handles website requests
Serves content to users worldwide

1. Types of Hosting

🔵 Shared Hosting

Multiple websites on one server
Affordable
Limited performance

🟢 VPS Hosting

Virtual Private Server
More control
Better performance

🔴 Dedicated Server

Full server for one website
High performance
Expensive but powerful

🟡 Cloud Hosting

Scalable infrastructure
Flexible resources
Pay as you use

2. Hosting Components

Server (Computer that stores files)
Domain Name
Database (MySQL / PostgreSQL)
File Storage
SSL Certificate

3. Uploading Website to Hosting

Method 1 – FTP Upload

Use FileZilla
Connect via FTP credentials
Upload files to public_html

Host: yourdomain.com
Username: hosting username
Password: hosting password
Port: 21

Method 2 – cPanel File Manager

Login to cPanel
Open File Manager
Upload project files

Simple method for beginners.

4. Connecting Database on Hosting

Create database in cPanel
Create database user
Assign user to database
Update config.php with credentials

$servername = "localhost";
$username = "db_user";
$password = "db_password";
$dbname = "database_name";

5. Managing Hosting Security

Use strong passwords
Enable firewall protection
Disable directory listing
Keep software updated
Use HTTPS

6. Backup Strategy

Backup files regularly
Backup database
Store backups offline
Automate backups if possible

Backup protects your website from data loss.

7. Domain & Hosting Connection

Point domain DNS to hosting
Add A record
Configure nameservers
Wait for propagation (24–48 hours)

🚀 Professional Hosting Workflow

Build project locally
Test thoroughly
Upload to hosting
Connect database
Enable SSL
Test live site

💡 Hosting is the bridge between your local project and the real internet. Mastering hosting makes you a professional developer.

🎓 Final Exercise

Upload a project to hosting.
Connect a database.
Configure SSL.
Test your live website.

🌐 LESSON 43: Domain Setup & Configuration

A domain name is the address people type in their browser to access your website.

Example:

https://www.yourwebsite.com

📌 What Is a Domain?

A human-readable website address
Points to a hosting server
Mapped using DNS records
Registered through domain providers

1. Domain Structure

Example:

subdomain.domain.tld

Subdomain → blog, shop, app
Domain → yourbrand
TLD → .com, .org, .net, .ng

2. Buying a Domain

Go to domain registrar
Search for available name
Register and pay
Access domain dashboard

Popular registrars:

GoDaddy
Namecheap
Google Domains
Local domain providers

3. Connecting Domain to Hosting (DNS Setup)

Method 1 – Change Nameservers

Copy nameservers from hosting
Go to domain DNS settings
Replace default nameservers
Save changes

ns1.hostingprovider.com
ns2.hostingprovider.com

Method 2 – Point via A Record

Get server IP address
Add A record in DNS
Point @ to server IP
Point www to server IP

Type: A
Host: @
Value: 192.168.1.1

4. Subdomain Setup

Subdomains are used for:

Blog → blog.yoursite.com
Store → shop.yoursite.com
Admin → admin.yoursite.com

Created inside DNS or hosting control panel.

5. Domain Redirects

Redirect one domain to another:

http → https redirect
Non-www → www redirect
Old domain → New domain

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Used for SEO-friendly redirection.

6. Domain Security

Enable domain privacy
Lock domain transfer
Enable two-factor authentication
Protect DNS access

7. Domain Propagation

DNS changes take time
Propagation may take 5 minutes to 48 hours
Test using online DNS tools

🚀 Professional Domain Setup Workflow

Buy domain
Choose connection method
Configure DNS
Wait for propagation
Enable SSL
Test live website

💡 A professional domain setup makes your website look official, trustworthy, and production-ready.

🎓 Final Assignment

Buy or simulate a domain setup.
Connect it to your hosting.
Configure A records or nameservers.
Test access using HTTPS.

🗂 LESSON 44: Git & Version Control

Git is a version control system that tracks changes in your project files over time.

It is used by professional developers and software teams.

📌 What Is Version Control?

Tracks code changes
Allows rollback to previous versions
Supports collaboration
Manages project history

1. What Is Git?

Free & open-source version control system
Runs locally on your computer
Tracks project changes

2. What Is GitHub?

Cloud platform for hosting Git repositories
Stores code online
Supports team collaboration
Used for portfolio & deployment

3. Installing Git

Download from:

https://git-scm.com

Check installation:

git --version

4. Basic Git Commands

# Initialize Git
git init

# Check status
git status

# Add files
git add .

# Commit changes
git commit -m "Initial commit"

# View commit history
git log

5. Connecting to GitHub

# Connect repository
git remote add origin https://github.com/username/repo.git

# Push code to GitHub
git push -u origin main

This uploads your project to the cloud.

6. Branching in Git

Branches allow you to work on features separately.

# Create branch
git branch feature-login

# Switch branch
git checkout feature-login

# Or modern method
git switch feature-login

# Merge branch
git merge feature-login

7. Cloning a Repository

Download project from GitHub:

git clone https://github.com/username/repo.git

8. Git Workflow (Professional Practice)

Make changes
Add files (git add)
Commit changes
Push to GitHub
Deploy automatically

9. .gitignore File

Used to ignore files that should NOT be tracked.

# Example .gitignore
node_modules/
.env
uploads/

Protects sensitive files from being uploaded.

10. Resolving Merge Conflicts

Conflict happens when two changes overlap
Git marks conflict sections
Manually fix and commit again

🚀 Professional Development Workflow

Use Git for every project
Commit frequently
Write clear commit messages
Use branches for new features

💡 Git is mandatory for professional developers. Without Git — you cannot work effectively in teams.

🎓 Final Assignment

Initialize Git in your project.
Create a GitHub repository.
Push your portfolio to GitHub.
Create a feature branch and merge it.

🏆 LESSON 45: Final Capstone Project

🎉 Congratulations! You have completed the full professional web development course.

Now it is time to build a complete real-world project that proves your mastery of HTML, SEO, Accessibility, Performance, Deployment, Hosting & Git.

📌 Project Objective

Build a fully functional multi-page business website with backend integration and deployment.

Professional layout
Multi-page structure
SEO optimization
Schema markup
Open Graph tags
Accessible forms
PHP form processing
Git version control
Live deployment

🚀 Required Pages

Home (index.html)
About
Services
Blog
Contact (Form + PHP)

📂 Recommended Folder Structure

/capstone-project
│
├── index.html
├── about.html
├── services.html
├── blog.html
├── contact.html
├── process.php
│
├── /css
│    └── style.css
│
├── /js
│    └── script.js
│
├── /images
│
└── .gitignore

🛠 Technical Requirements

1. SEO

Add meta description
Add Open Graph tags
Add title tags
Add sitemap

2. Accessibility

Add alt text to images
Use semantic HTML
Label all form inputs
Add aria attributes where needed

3. Backend

Create working contact form
Process data with PHP
Validate user input
Display success message

4. Performance

Optimize images
Use lazy loading
Minify CSS & JS
Enable caching (if hosting supports it)

5. Version Control

Initialize Git
Commit frequently
Push to GitHub
Use feature branches

🌐 Deployment Requirement

Deploy project to hosting
Connect custom domain (optional but recommended)
Enable HTTPS
Test all pages online

🏅 Project Evaluation Criteria

Clean folder structure
Professional design
Working backend form
SEO optimized
Accessible
Fully deployed

🔥 Bonus Features (Extra Points)

Dark / Light mode toggle
Animated sections
Image gallery
Admin dashboard
Database integration

💡 This capstone project proves that you are ready for real-world web development jobs, freelance work, or startup projects.

HTML COMPLETE BEGINNER NOTES (SELF-EXPLANATORY)

🔰 LESSON 1: HTML Introduction

What is HTML?

A Simple HTML Document

Example Explained

What is an HTML Element?

Web Browsers

HTML Page Structure

HTML History

🔰 LESSON 2: HTML Structure

Basic HTML Document Structure

Explanation of Each Part

Visual Breakdown

Important Rules

Class Exercise

🔰 LESSON 3: HTML Headings

Heading Tags in HTML

How They Work

Example Webpage Structure

Important Rules

Why Headings Are Important

Class Exercise

🔰 LESSON 4: HTML Paragraphs

Basic Syntax

Example

Line Breaks

Horizontal Line

Important Notes

Example Showing Space Ignored

Class Exercise

🔰 LESSON 5: HTML Text Formatting

1. Bold Text

Difference:

Example

2. Italic Text

Difference:

3. Underlined Text

4. Small Text

5. Highlight Text

6. Superscript and Subscript

Superscript

Subscript

7. Deleted and Inserted Text

Example Combined

Class Exercise

🔰 LESSON 6: HTML Links (Anchor Tags)

Basic Link Syntax

Example

Opening Links in a New Tab

Linking to Another Page in Your Website

Email Links

Telephone Links

Internal Page Links (Anchor Links)

Example:

Link Styling (Default Behavior)

Important Attributes for Links

Download Example

Class Exercise

🔰 LESSON 7: HTML Images

Basic Image Syntax

Important Image Attributes

Example

Why Alt Text Is Important

Image From Online Source

Image Inside a Folder

Image as a Link

Image Styling (Basic)

Common Image Formats

Class Exercise

🔰 LESSON 8: HTML Lists

Types of Lists in HTML

1. Unordered List (Bullets)

Changing Bullet Style

2. Ordered List (Numbers)

Changing Number Style

3. Nested Lists (List Inside List)

4. Definition List

Important Notes

Class Exercise

🔰 LESSON 9: HTML Tables