HTML Fundamentals: A Beginner's Guide to Web Development, Study notes of Design

Download HTML Fundamentals: A Beginner's Guide to Web Development and more Study notes Design in PDF only on Docsity!

📘 Chapter 1 – Creating Our First Website

📝 Starting Point

Website banane ke liye hum ek file banate hain index.html.

index.html ek special filename hai → jab bhi koi website ka root address type karta hai, sabse pehle ye file open hoti hai.

📄 A Basic HTML Page

Akash's Website

This is a heading

My paragraph

📌 Understanding Tags

A tag is like a container for content or other HTML tags.

Structure:

HTML Document → Written by developer

Browser → Reads the code

Rendered Page → What user sees

💬 Comments in HTML

Comments ka use code explain karne ke liye hota hai.

Browser unhe render nahi karta.

Example:

🔡 Case Sensitivity

HTML ek case-insensitive language hai.

aur dono same kaam karte hain.

📘 Chapter 2 – Basic HTML Tags

🏗 HTML Element

Ek HTML Element me hota hai:

Opening tag

Content

Closing tag

Example:

Content here

⚙ HTML Attributes

Attributes ek tag ko extra information dete hain.

Syntax: name="value"

Single ya double quotes dono use ho sakte hain.

Example (Anchor tag):

Google

🔠 Heading Tags

HTML me headings h1 se h6 tak hote hain.

h1 = Most important, h6 = Least important.

Example:

Italic → This is italic

Underline → This is underline

↩ Line Break Tag

→ Text me line break add karta hai.

🔎 Big & Small Tags

→ Text thoda bada

→ Text thoda chhota

Example:

This is big text This is small text

➖ Horizontal Rule

→ Content ko separate karne ke liye horizontal line banata hai.

First section

Second section

₂ Subscript & Superscript ²

Subscript →

Superscript →

Example:

H2O x2

📝 Preformatted Text

HTML normally extra spaces & newlines ignore karta hai.

Agar text as-is dikhana ho to use hota hai.

Example:

This is written using pre tag → Rendered as-is

Contact Us

Opens in a new tab

💡 Anchor tags me sirf text hi nahi — images, headings, buttons sab use kar sakte ho.

🖼 Linking an Image

Image ek clickable link ban jaata hai

Height automatically adjust ho jaati hai

📦 The Tag

= Block-level container

Mostly layout banane ke liye use hota hai

Always takes full width of the page

📏 The Tag

= Inline container

Sirf jitni zarurat ho utna space leta hai

Mostly text formatting aur small inline grouping ke liye use hota hai

📘 Chapter 4 – Lists, Tables & Forms

📍 Lists in HTML

Lists are used to display content in a structured way.

🔹 Unordered List (bullet points)

Used for unordered items:

Home About

🔹 Ordered List (numbered)

Used for ordered items:

Phone PC Laptop

📍 Tables in HTML

Tables are used to display tabular data.

→ Table Row

→ Table Data

→ Table Header

👉 Example:

Student Data

Name Roll Marks

📍 Embedding Videos

The tag is used to embed videos in a webpage.

Error: Video not supported

width → Adjusts width (height auto adjusts)

autoplay → Plays automatically

loop → Repeats video

controls → Shows play/pause controls

📘 Chapter 5 – SEO (Search Engine Optimization)

SEO ka main aim hai website ko search engines (Google, Bing, etc.) par better rank karana. Is chapter me hum HTML developer ke perspective se basic SEO techniques dekhenge.

📍 Types of SEO

1. On-page SEO → Page ke andar ki optimization (HTML, content, structure).
2. Off-page SEO → Backlinks, social sharing, authority building, etc.

👉 HTML developer mostly On-page SEO par kaam karta hai.

📍 HTML SEO Techniques

1. Set a Proper Title

Best HTML Notes for Beginners

Short & to the point

Keyword included

2. Meta Description

Improves click-through rate in search results

3. SEO-Friendly URL Slug