HTML Master Tutorial - By Hanan Malik

Want as PDF? Full Downloadable PDF

Table of Contents

Chapter 1: Getting Started 01
Chapter 2: What is HTML? 3
Chapter 3: HTML tags 4
Chapter 4: HTML Structure 5
Chapter 5: Videos in HTML 6
Chapter 6: Page layout 7
Chapter 7: Tables and Forms 8

Chapter 1: Getting Started

In this chapter, we will learn about the basic structure of HTML...

<!DOCTYPE html>
<html>...</html>
From <!DOCTYPE html> to </html>

Installing A Code Editor

You can install any code editor you like, here i like to install sublime text 4, because it is like a feather and have too many features.

you can install Sublime text from here Sublime Text Download

Chapter: 2- What is HTML

HTML (Hypertext Markup Language) is the standard language used to create webpages. It tells the web browser what content to show (text, images, buttons, videos, etc.) and how the content is structured. HTML is like the skeleton of a Website. Without it the website can't be stand. If our HTML is not written then for what we write CSS and JavaScript.

Chapter: 3- HTML Tags

Think of HTML tags as the DNA of a webpage. They are the hidden instructions that tell a web browser how to display content—whether something should be a bold heading, a clickable link, or a simple paragraph.

Some HTML Tags = Heading Tag - <h1> to <h6>. in headings <h1> is biggest and <h6> is smallest of all headings.

Other Tags

<p> </p> paraghraph tag is used to write a para. <br tag is used to give a line break

The Horizontal Ruler Tag

The horizontal ruler tag, <hr> is an HTML element used to insert a therametic break or horizontal line on a web page. It serves to visually seperate content or sections, providing a clear distinction. And <hr> also <br> is a empty tag. Now what is a Empty Tag?

Empty Tags

They are elements or tags that did'nt have a closing tag or that cannot have any child nodes.

Some Common Empty Tags ⇓
<br> tag gives a line break 'It is empty but not that!'
If we write this
The Output =
<img>Tag

The <img> Tag is a also a Empty tag, used to embedd any image.

Example
Output
<input> Tag

Creates an input field for forms

Then Output
<meta> Tag

Contains or Provides metadata about document

<link>

Helps to link externel document. Like stylesheets etc.

Bold Italic underline tags are used to Highlight a text

HTML TAGS

We read Empty Tags, Now we have to learn HTML tags that have a closing tags(Normal Tags)

Big and Small Tag: Using <big> and <small> tag we can make text bit larger and bit smaller
Subscript & Superscript Using <sub> we can write subscript and using <sup> we can write superscript

It look like this

Pre tag: We learnt that HTML ignores whitespaces and new lines what if we have to write with those spaces

We use Pre Tag Pre tag is used to write text as it is in code

like this

Chapter: 4- HTML Structure

Structure for every HTML Document

For writing any HTML document we mostly use HTML5 Boilerplate

Creating a Webpage

output

Rules for writing a HTML document

Do you know there are some rules for writing a HTML document. Don't know?! I will tell you

For writing a HTML document there are some rules:
Tag Structure: HTML follows a tag based structure with opening and cloasing tags.
Nesting Rules:Tags Must be properly nested, with each opening tag paired with a corresponding closing tag.
Document Structure:An HTML document should have a proper structure, including a DOCTYPE declaration, <html>, <head> and <body> elements.
Attribute usage: Attributes within tags should follow a key-value structure, providing additional information and settings.
Whitspace ignored: Extra whitespace is generally ignored in HTML, but consistancy in indentation enhances readability.

Chapter: 5- Videos In HTML

We can embed videos in HTML website that make websites beautiful

For emebedding a video we can use video tag

There are some Atrributes for Video Tag

Lists....Unordered, ordered

In HTML there are lists that help to write items in sequence.

Types of lists:
  1. Ordered lists
  2. Unordered Lists
What are Ordered list?

In HTML ordered Lists are lists that are in a ordered Way and have sequense wize numbers in starting. Ordered list is written in <ol> Tag

In browser it will be shown as:

This is ordered List in HTML

What are Unordered Lists

Unordered lists are lists that dont have any order of writing. Unordered list is written in <ul> Tag

It will be shown as:

Chapter 6: Page layout

Link Attribute

Div Tag

Div tag takes the full width. Mostly used for containing other elements.

The div Tag. As you see the div tag is taking full width of the page

Span Tag

Span tag is opposite of div tag because it takes only its size width

See it is taking only itself width

chapter 6: Tables & Forms

The >table> tag is used to create table in HTML

To be Continued.......Wait for next Chapters till 15 march