File path ek tareeka hai jisse hum web page par files (jaise images, CSS files, ya dusre HTML pages) ki location batate hain. File paths do tarah ke hote hain:
Yeh web server par kisi file ka pura (full) URL hota hai. Jab aap kisi dusri website se koi file link karte hain, tab iska istemal hota hai.
<!-- Isme puri website ka address hota hai -->
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools Logo">
Yeh us file ki location batata hai jo aapki current directory (folder) se relative ho. Iska istemal apni hi website ki files ko link karne ke liye hota hai.
<!-- Agar file usi folder mein hai -->
<img src="my_image.jpg" alt="My Image">
<!-- Agar file "images" naam ke sub-folder mein hai -->
<img src="images/my_image.jpg" alt="My Image">
<!-- Agar file ek level upar wale folder mein hai -->
<a href="../index.html">Home Page</a>
Boilerplate ek basic ya standard code ka structure hota hai jo har HTML page ke liye zaroori hota hai. Yeh ek tarah ka template hai jise aap har naye page ke liye use kar sakte hain.
Har HTML document in tags se shuru hona chahiye:
<!DOCTYPE html>: Yeh browser ko batata hai ki yeh ek HTML5 document hai.<html lang="en">: Yeh root element hai jo page ki language define karta hai.<head>: Isme page se judi meta-data aur links hote hain jo user ko nahi dikhte. Jaise title, character set, CSS links, etc.<meta charset="UTF-8">: Yeh character encoding set karta hai.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Yeh page ko mobile devices par sahi se render karne ke liye zaroori hai.<title>: Yeh page ka title browser tab par dikhata hai.<body>: Isme woh sabhi content hota hai jo page par dikhta hai (text, images, links, etc.).Har naye HTML page ko is basic structure se shuru karna chahiye:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
class, id aur divYeh teenon HTML ke bahut hi zaroori hisse hain jo web page ko style aur structure karne mein madad karte hain.
<div> Tag<div> ek block-level element hai jo content ko ek container mein group karne ke liye use hota hai. Iska koi khaas visual effect nahi hota, lekin CSS se isko style kiya ja sakta hai. Yeh website ka layout banane ke liye bahut zaroori hai.
<div>
<h3>Website Header</h3>
<p>Yeh website ka header content hai.</p>
</div>
<div>
<h3>Main Content</h3>
<p>Yeh page ka mukhya content hai.</p>
</div>
class Attributeclass ek attribute hai jo ek ya ek se zyada HTML elements ko ek hi naam deta hai. Aap is naam ka istemal karke ek hi baar mein kai elements ko CSS se style kar sakte hain. Ek hi page mein kai elements par ek hi class ho sakti hai.
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
<p class="highlight">Yeh text highlight hoga.</p>
<h3 class="highlight">Yeh heading bhi highlight hoga.</h3>
id Attributeid bhi ek attribute hai, lekin yeh ek HTML element ko ek unique naam deta hai. Yeh naam ek page par sirf ek hi element ke liye use kiya ja sakta hai. Iska istemal khaas taur par CSS se ek hi element ko style karne ya JavaScript se usko access karne ke liye hota hai.
<style>
#main-heading {
color: blue;
font-size: 30px;
}
</style>
<h1 id="main-heading">Yeh Blue Color Ki Heading Hai</h1>
<p>Yeh normal text hai.</p>
class aur id mein kya antar hai?class: Ek hi naam kai elements ko de sakte hain.id: Ek hi naam sirf ek element ko de sakte hain (unique hota hai).