Day 1: Introduction to HTML5 & Environment Setup (VS Code, Extensions)

Day 1: Introduction to HTML5 & Environment Setup (VS Code, Extensions)

Introduction

Agar aap Web Development, Blogging, ya Cyber Security field me jana chahte ho, to sabse pehla step hota hai HTML seekhna. HTML kisi bhi website ki foundation hoti hai.

Aaj ke is Day 1 tutorial me hum seekhenge:

  • HTML5 kya hai
  • HTML ka use kaha hota hai
  • VS Code kya hai
  • VS Code install kaise kare
  • Important Extensions
  • First HTML Program

HTML5 Kya Hai?

HTML ka full form hota hai:

𝐻𝑇𝑀𝐿=𝐻𝑦𝑝𝑒𝑟𝑇𝑒𝑥𝑡 𝑀𝑎𝑟𝑘𝑢𝑝 𝐿𝑎𝑛𝑔𝑢𝑎𝑔𝑒

Ye ek Markup Language hai jiska use website banane ke liye kiya jata hai.

HTML5 HTML ka latest version hai jisme kai naye features add kiye gaye hain.

HTML5 Ke Features

1. Semantic Tags

Semantic tags website ko proper structure dete hain.

Example:

<header>
<nav>
<section>
<footer>

2. Audio & Video Support

HTML5 me direct audio aur video add kar sakte hain.

<video controls>
<source src="video.mp4">
</video>

3. Mobile Friendly

HTML5 responsive websites banane me help karta hai.

HTML Kyu Seekhna Chahiye?

HTML seekhne ke fayde:

  • Website banana seekh sakte ho
  • Blogging kar sakte ho
  • Web Developer ban sakte ho
  • Cyber Security me website structure samajhne me help milti hai
  • Freelancing kar sakte ho

VS Code Kya Hai?

VS Code ka full form hai:

𝑉𝑆 𝐶𝑜𝑑𝑒=𝑉𝑖𝑠𝑢𝑎𝑙 𝑆𝑡𝑢𝑑𝑖𝑜 𝐶𝑜𝑑𝑒

Ye ek powerful aur popular Code Editor hai jise developers coding ke liye use karte hain.

VS Code Ke Features

  • Fast Speed
  • Lightweight
  • Free to Use
  • Extensions Support
  • Beginner Friendly

VS Code Download Kaise Kare?

Official Website:

Visual Studio Code Official Website

VS Code Install Steps

Step 1

Website open karo.

Step 2

Windows version download karo.

Step 3

Setup install karo.

Step 4

Next → Next → Finish karo.

Important VS Code Extensions

1. Live Server

Ye extension website ko browser me automatically run karta hai.

Search karo:

Live Server

2. HTML CSS Support

HTML aur CSS coding easy banata hai.

3. Auto Rename Tag

Ek tag change karne par dusra tag automatically change ho jata hai.

4. Prettier

Code ko clean aur beautiful format me convert karta hai.

First HTML File Kaise Banaye?

Step 1

Desktop par ek folder banao:

HTML Course

Step 2

VS Code open karo.

Step 3

Folder ko VS Code me open karo.

Step 4

Ek new file banao:

index.html

First HTML Program

<!DOCTYPE html>
<html>
<head>
    <title>My First Website</title>
</head>
<body>

    <h1>Hello World</h1>
    <p>Welcome to HTML5 Course</p>

</body>
</html>

Code Explanation

<!DOCTYPE html>

Browser ko batata hai ki ye HTML5 document hai.

<html>

HTML page ki starting.

<head>

Website ki important information store karta hai.

<title>

Browser tab ka naam show karta hai.

<body>

Jo content website me dikhai deta hai wo body ke andar hota hai.

Website Run Kaise Kare?

Method 1: Browser Se

HTML file par double click karo.

Method 2: Live Server Se

  1. Right Click karo
  2. Open with Live Server select karo

Beginner Tips

  • Roz practice karo
  • Khud code likho
  • Errors se daro mat
  • Small projects banao

Mini Practice Task

Ye tasks khud try karo:

  1. Apna naam likho
  2. Ek heading banao
  3. Ek paragraph add karo
  4. Background color change karo

Homework

Ek simple webpage banao jisme:

  • Aapka naam
  • Aapka photo
  • Aapka introduction

ho.

Conclusion

Aaj aapne HTML5 aur VS Code setup karna seekha. Ye Web Development ka first step hai. Next tutorial me hum HTML Structure aur Basic Tags detail me seekhenge.