html-tutorial

Level -01

HTML stands for HyperText Markup Language.

It is the standard language used to create and structure web pages. HTML tells the browser what content to display, such as headings, paragraphs, images, links, tables, forms, and more.

How HTML Works

  • you write HTML code.
  • Save it as index.html.
  • Open it in a browser (Chrome, Firefox, Edge).
  • The browser renders the page visually.

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>

<h1>Welcome to Training World</h1>

<p>This is my first HTML page.</p>

<a href=”https://trainingworld.store”>Visit Training World</a>

</body>
</html>

Level -02

Next Level -02 We are going to learn basic HTML tags and its usage.

TagPurpose
<h1> to <h6>Headings
<p>Paragraph
<a>Link
<img>Image
<table>Table
<form>Form
<input>Text box
<button>Button
<div>Container
<ul> / <li>Lists

These tags are pre-defined. each of them uses it for different purposes.

Level -03

HTML Tags Explained with Examples

1. <h1> to <h6> — Headings

Headings are used for titles and subtitles on a webpage.

 
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
<h4>Sub Section</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

2. <p> — Paragraph

Used to display text content.

 
<p>Welcome to Tutorial Training World.</p>

3. <a> — Hyperlink

Creates a clickable link.

 
<a href="https://trainingworld.store">
Visit Training World
</a>
 
Give feedback

Attributes

<img> — Image

Displays images.

 
<img src="logo.png" alt="Logo">
 
Give feedback

Attributes

AttributePurpose
srcImage path
altAlternative text
widthImage width
heightImage height
AttributePurpose
hrefDestination URL
target=”_blank”Opens in new tab

5. <table> — Table

Displays data in rows and columns.

 
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
</tr>

<tr>
<td>Frank</td>
<td>HTML</td>
</tr>
</table>
 
Give feedback

Output

NameCourse
FrankHTML

Table Tags

TagPurpose
<table>Table
<tr>Row
<th>Header Cell
<td>Data Cell
Level -04

6. <form> — Form

Collects user information.

 
<form>

Name:
<input type="text">

<input type="submit">

</form>
 
Give feedback

Usage

  • Contact forms
  • Login forms
  • Registration forms

7. <input> — Input Field

Allows users to enter data.

Text Box

 
<input type="text">
 

8. <button> — Button

Creates a clickable button.

9. <div> — Container

Groups HTML elements together.

 
<div>

<h2>About Us</h2>

<p>
Tutorial Training World is an online learning platform.
</p>

</div>
 
Give feedback

Usage

  • Page sections
  • Layout design
  • Styling with CSS
<button>Click Me</button>