Theory
आपके Webpage का अदृश्य दिमाग़
आपने अभी-अभी अपने personal portfolio के homepage को <body> tag के अंदर एक bold welcome message से अनुकूलित किया। यह साफ़ दिखता है, पर जब आप browser tab की ओर देखते हैं, यह बस एक न पढ़ने-लायक़ local file path दिखाता है। और भी बुरा, आपका classmate पूछता है कि आपने जो external CSS file घंटों style करने में बिताई उसे कैसे link करें। आपकी website का दिखता हिस्सा इससे इतना अलग क्यों महसूस होता है कि यह अपनी settings, titles, या behaviors कैसे configure करता है?
Theory
Backstage Crew बनाम Stage Actors
एक theatre play के बारे में सोचिए। stage पर actors आपके <body> tag के अंदर elements जैसे हैं: सब उन्हें साफ़ देख सकते हैं। पर एक बढ़िया play को छाया में काम करती एक backstage crew चाहिए। यह crew stage lights set up करती है, scripts manage करती है, और notes पास करती है। <head> tag आपके webpage की backstage crew है। इसमें अहम निर्देश और configurations हैं जो visitors सीधे page पर नहीं देखते, पर उनके बिना, show विफल होता है।
Theory
Head Tags को परिभाषित करना
university exams में, head element को metadata के लिए एक container के रूप में परिभाषित किया जाता है, जिसका मतलब है data के बारे में data, जो सख़्ती से <html> और <body> tags के बीच रखा जाता है। जबकि body देखने-योग्य content रखता है, head browser engine के लिए निर्देश रखता है। मुख्य head tags जो आपको अपने syllabus के लिए याद करने चाहिए <title>, <style>, <script>, और <link> हैं। ये tags आपके webpage की identity, internal design styling, client side scripts, और external connections सँभालते हैं।
Practical
Head Section की Anatomy
<!DOCTYPE html>
<html>
<head>
<title>My Professional Portfolio</title>
<link rel="stylesheet" href="style.css">
<style>
body { background-color: #f0f0f0; }
</style>
<script>
console.log("Webpage loaded successfully!");
</script>
</head>
<body>
<h1>Welcome to My Site</h1>
</body>
</html>This example runs in Gri-Learn on the web, where you can edit it and see the output.
At a glance
मुख्य head tags और web design में उनकी भूमिकाएँ।
| Tag | Purpose | Example Usage |
|---|---|---|
| <title> | browser tab और bookmark name पर text set करता है। | <title>Home</title> |
| <link> | CSS stylesheets जैसे external assets जोड़ता है। | <link rel="stylesheet" href="style.css"> |
| <style> | internal CSS rules सीधे HTML file के अंदर रखता है। | <style>h1 { color: blue; }</style> |
| <script> | executable client side JavaScript behavior embed या link करता है। | <script>alert('Welcome');</script> |
Quiz
एक practical lab session के दौरान, आप layout.css नामक एक external CSS file अपने webpage से जोड़ना चाहते हैं। standard web engineering design के अनुसार यह line कहाँ रखी जानी चाहिए?
- `<body>` tag के अंदर ताकि styles सीधे text पर लागू हों।
- `<head>` tag के अंदर `<link>` element इस्तेमाल करके।
- बिल्कुल page के शीर्ष पर `<!DOCTYPE>` declaration से पहले।
- एक custom paragraph attribute wrapper के अंदर।
Show the answer
`<head>` tag के अंदर `<link>` element इस्तेमाल करके।
stylesheets जैसे external assets को <head> block के अंदर एक <link> tag इस्तेमाल करके declare करना चाहिए। उन्हें body में रखना unstyled content की एक flash पैदा कर सकता है, और doctype declaration से पहले कुछ भी रखना HTML5 validation standard compliance तोड़ता है।
Theory
कदम-दर-कदम: एक Head Section Configure करना
आइए अपनी portfolio के लिए एक साफ़ head section कदम-दर-कदम set up करें:
1. अपने opening <html> tag के ठीक नीचे <head> container खोलिए।
2. browser tab text को 'My Portfolio' में बदलने के लिए एक <title> tag डालिए।
3. अपनी stylesheet जोड़ने के लिए rel="stylesheet" और href="style.css" के साथ एक <link> tag जोड़िए।
4. body खोलने से पहले container को एक साफ़ </head> tag से बंद कीजिए।
Think first
Style बनाम Link का फ़ैसला
tap करने से पहले, मन में विश्लेषण कीजिए कि आप अपने college project में <link> tag के बजाय एक <style> tag कब चुनेंगे। मुख्य architectural वजह क्या है?
Show the answer
internal CSS के लिए <style> tag इस्तेमाल कीजिए जब आपके पास केवल कुछ styles हों जो अनन्य रूप से उस अकेले webpage के लिए हों। एक external .css file जोड़ने के लिए <link> tag इस्तेमाल कीजिए जब आप बिल्कुल एक जैसी styles कई pages भर साझा करना चाहते हैं, जैसे आपका home page, project grid page, और contact form page।
Watch out
Visible Head की ग़लतफ़हमी
लिखित theory exams में एक बार-बार होने वाली ग़लती <h1> या <p> जैसे text tags को <head> section के अंदर रखना है। याद रखिए, <head> container के अंदर जो कुछ भी लिखा है वह webpage के canvas पर पूरी तरह अदृश्य है। अगर आप वहाँ display elements रखते हैं, browser उन्हें दिखा सकता है, पर आपकी page structure टूटती है, practical evaluators से तुरंत कटौती की ओर ले जाते हुए।
Formula
Exam Recipe: Big Four का विश्लेषण
जब एक exam question आपसे 'HTML Head section के components समझाइए' कहे, इस structure का पालन कीजिए:
- Definition: बताइए कि इसमें metadata है और यह html और body tags के बीच बैठता है।
- The Big Four:
<title>,<link>,<style>, और<script>के लिए छोटी व्याख्याएँ लिखिए। - Clean Code: head section को सही तरह खुलते, tags nest करते, और बंद होते दिखाता एक संक्षिप्त example दीजिए।
Summary
Key takeaways
<head>tag webpage metadata और properties के लिए एक छिपे container के रूप में काम करता है।<title>tag तय करता है कि browser tab या search indexing पर कौन सा text दिखता है।<link>tag global CSS stylesheets जैसी external files से connections स्थापित करता है।<style>और<script>tags internal styling definitions और client behaviors embed करते हैं।- text blocks जैसे visible layout components को कभी head section के अंदर nest नहीं करना चाहिए।
- Memory Hook: head वह दिमाग़ है जो सोचता है, जबकि body वह चेहरा है जो दिखाता है।