INSTACK 360

1. HTML Introduction - Basic to Pro

HTML kya hai? Web development ki shuruaat se lekar client-server architecture tak sab kuch deeply samajhiye.

Beginner 5 min read

1. What is HTML? (Basic to Pro)

Basic: HTML ka full form HyperText Markup Language hai. Jab aap koi ghar banate hain, toh sabse pehle eent (bricks) aur cement se ek dhancha (skeleton) banta hai. Web development mein HTML wahi eent aur dhancha hai. Bina HTML ke koi website exist nahi kar sakti.

Pro: HTML ek programming language nahi hai (isme variables ya loops nahi hote), balki ek 'Markup' language hai. Iska kaam browser ko yeh batana hai ki content ko display kaise karna hai. Browser HTML code ko parse karta hai aur DOM (Document Object Model) tree banata hai jiske basis par screen render hoti hai.

2. History of HTML & Versions

Basic: HTML ko 1991 mein Tim Berners-Lee ne banaya tha. Shuru mein yeh sirf simple text aur links share karne ke liye tha.

Pro: Chaliye versions ko detail mein dekhte hain:

  • HTML 1.0 (1993): Pehla standard release, bahut kam tags the.
  • HTML 2.0 (1995): Forms aur tables introduce hue.
  • HTML 3.2 (1997): CSS ka thoda support aur W3C ne isko handle karna shuru kiya.
  • HTML 4.01 (1999): CSS ko puri tarah alag kar diya gaya styling ke liye.
  • XHTML (2000): HTML ko XML ke strict rules ke sath likhna zaruri tha.
  • HTML5 (2014): Game changer! Flash player ki zarurat khatam, native video, Canvas aur semantic tags aaye. Aaj yahi industry standard hai.

3. HTML5 Features (Advance Capabilities)

HTML5 ne web ko desktop software jaisa powerful banaya:

  • Semantic Tags: <header>, <footer> jaise tags jisse Google (SEO) aasani se webpage samajh sake.
  • Multimedia: Bina third-party plugin ke <video> aur <audio> chalana.
  • Graphics: <canvas> tag jisse browser games aur charts banaye jate hain.
  • Offline & Storage: Local Storage jisse heavy data browser mein save hota hai.

4. Structure of a Web Page & DOM

Pro: Jab browser apka HTML padhta hai, toh wo ek memory tree banata hai:

Document
  ├── <html>
      ├── <head> (Hidden settings)
      └── <body> (Visible UI)
          ├── <h1>
          └── <p>

JavaScript isi DOM tree ko manipulate karke page ko dynamic banati hai (Jaise React virtual DOM use karta hai).

5. Client vs Server Architecture

Basic: Client aapka phone (browser) hai, aur Server wo bada computer hai jahan website rakhi hai.

Pro: Isko Request-Response Cycle kehte hain:

  1. Browser DNS server se IP address nikalta hai aur Server par HTTP Request bhejta hai.
  2. Server files dhoondta hai (HTML/CSS) aur HTTP Response (Status 200 OK) wapas bhejta hai.
  3. Browser files receive karke Critical Rendering Path run karta hai aur screen par paint kar deta hai.

Next Lesson 2. HTML Document Structure in Detail