Login Or Sign up

HTML (2024-2025)

HTML stands for HyperText Markup Language. It’s the standard language used to create websites. In simple words:

Description

🧩 What Does HTML Do?

  1. Organizes content into headings, paragraphs, lists, etc.
  2. Displays images and videos
  3. Creates links to other pages
  4. Builds forms for user input (like login or contact forms)
  5. Works with CSS for design and JavaScript for interactivity

Why Learn HTML?

  1. It’s the foundation of all websites
  2. Every web developer starts with HTML
  3. Easy to learn and powerful when combined with CSS and JavaScript


Course content

HTML (Hyper Text Markup Language) is the standard language used to create and design webpages.

It structures content using elements (tags), which browsers interpret to display text, images, links, and more.
  1. Tags define HTML elements, e.g., <p>, <h1>, <img>.
  2. Attributes provide additional information about elements, e.g., <img src="image.jpg" alt="Sample">.

Browser and Editors

  1. Browsers (Chrome, Firefox, Safari) display HTML content.
  2. Editors like VS Code, Sublime Text, or Notepad++ are used to write HTML code.

Key HTML Elements

Important elements:

  1. Headings: <h1> to <h6>
  2. Paragraph: <p>
  3. Links: <a>
  4. Images: <img>
  5. Lists: <ul>, <ol>, <li>
  6. Divisions: <div>
  7. Forms: <form>

Using CSS in HTML

CSS (Cascading Style Sheets) styles HTML content.

Ways to use CSS:

  1. Inline: <p style="color:red;">Text</p>
  2. Internal: <style> p { color: red; } </style>
  3. External: <link rel="stylesheet" href="style.css">
  1. Use the <a> tag:
  2. href: destination URL
  3. target="_blank": opens link in new tab

<a href="https://example.com">Visit Example</a>

Understanding <div>, Classes, and IDs

  1. <div>: container element for grouping content
  2. class: used for styling multiple elements
  3. id: unique identifier for one element

Use the <img> tag:

src: image path

alt: alternative text (important for accessibility)

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

Favicons in HTML

Favicons are small icons shown in browser tabs.

Add in <head>

Favicons in HTML

Favicons are small icons shown in browser tabs.

Add in <head>

HTML Comments and List Elements

  1. Comments: Not shown in the browser

Lists:

  1. Ordered list: <ol>
  2. Unordered list: <ul>
  3. List items: <li>

Tables in HTML

Used to display data in rows and columns:

<table>

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

<tr><td>Alice</td><td>25</td></tr>

</table>

Padding and Margin

  1. Padding: space inside an element
  2. Margin: space outside an element
  3. Example (CSS)

HTML Colors

Colors can be defined by:

  1. Name: red, blue
  2. HEX: #FF0000
  3. RGB: rgb(255, 0, 0)
  4. HSL: hsl(0, 100%, 50%)

Semantic Elements in HTML

Semantic elements clearly describe their meaning:

  1. <header>, <footer>, <article>, <section>, <nav>
  2. They help with SEO and accessibility.

HTML Forms – Structure

Forms collect user input

Input Fields in HTML Forms

Common input fields:

  1. Text: <input type="text">
  2. Password: <input type="password">
  3. Email: <input type="email">
  4. Submit: <input type="submit">


Types of Inputs in HTML

More input types:

  1. text
  2. number
  3. range
  4. color
  5. date
  6. checkbox
  7. radio
  8. file

Multimedia in HTML

Add sound/video


Embedding YouTube Videos

Use an <iframe>

Final HTML Project

A project combines everything learned:

Example:

  1. Header, navigation
  2. Image gallery
  3. Form (contact)
  4. Embedded YouTube video
  5. Semantic layout with CSS styling

Download PDF

course-img

Preview this course

We are on

Team

Courses

Our Location

© 2025 Tawana. All Rights Reserved. by Tawana Technology