Theory
તમારા Webpage નું અદૃશ્ય મગજ
તમે હમણાં જ તમારા personal portfolio ના homepage ને <body> tag ની અંદર એક bold સ્વાગત સંદેશા સાથે ગોઠવ્યું. એ સાફ દેખાય છે, પણ જ્યારે તમે browser ના tab તરફ ઉપર જુઓ, ત્યાં ખાલી એક ન વાંચી શકાય એવો local file નો રસ્તો દેખાય છે. એથી પણ ખરાબ, તમારો સહપાઠી પૂછે છે કે તમે કલાકો સુધી style કરેલી એ બહારની CSS file કેવી રીતે જોડવી. તમારી website નો દેખાતો ભાગ એની settings, titles, કે વર્તન કેવી રીતે ગોઠવે છે એનાથી આટલો છૂટો કેમ લાગે છે?
Theory
પડદા પાછળનો Crew સામે મંચના કલાકારો
એક નાટકને વિચારો. મંચ પરના કલાકારો તમારા <body> tag ની અંદરનાં elements જેવા છે: બધા એમને સ્પષ્ટ જોઈ શકે છે. પણ એક ઉત્તમ નાટકને પડછાયામાં કામ કરતા પડદા પાછળના crew ની જરૂર હોય છે. આ crew મંચની લાઈટો ગોઠવે છે, scripts સંભાળે છે, અને ચિઠ્ઠીઓ પહોંચાડે છે. <head> tag એ તમારા webpage નો પડદા પાછળનો crew છે. એમાં મહત્ત્વની સૂચનાઓ અને configurations હોય છે જે મુલાકાતીઓ પાના પર સીધાં જોતાં નથી, પણ એમના વગર, ખેલ નિષ્ફળ જાય છે.
Theory
Head Tags ની વ્યાખ્યા
University ની પરીક્ષાઓમાં, head element ને metadata ના ડબ્બા તરીકે વ્યાખ્યાયિત કરાય છે, જેનો અર્થ છે data વિશેનો data, જે સખ્તાઈથી <html> અને <body> tags ની વચ્ચે મુકાય છે. જ્યારે body જોઈ શકાય એવું content રાખે છે, ત્યારે head browser ના engine માટે સૂચનાઓ રાખે છે. તમારા અભ્યાસક્રમ માટે તમારે યાદ રાખવાં પડે એવાં મુખ્ય head tags છે <title>, <style>, <script>, અને <link>. આ tags તમારા webpage ની ઓળખ, આંતરિક ડિઝાઇનનું styling, client side ની scripts, અને બહારનાં જોડાણો સંભાળે છે.
Practical
Anatomy of the Head Section
<!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 | હેતુ | ઉપયોગનું ઉદાહરણ |
|---|---|---|
| <title> | Browser ના tab પરનું લખાણ અને bookmark નું નામ ગોઠવે છે. | <title>Home</title> |
| <link> | CSS stylesheets જેવી બહારની સામગ્રી જોડે છે. | <link rel="stylesheet" href="style.css"> |
| <style> | HTML file ની અંદર સીધા આંતરિક CSS ના નિયમો રાખે છે. | <style>h1 { color: blue; }</style> |
| <script> | ચલાવવા યોગ્ય client side JavaScript નું વર્તન જડે કે જોડે છે. | <script>alert('Welcome');</script> |
Quiz
એક વ્યવહારુ lab ના સત્ર દરમિયાન, તમારે layout.css નામની એક બહારની CSS file તમારા webpage સાથે જોડવી છે. Standard web engineering ની ડિઝાઇન પ્રમાણે આ લીટી ક્યાં મુકાવી જોઈએ?
- `<body>` tag ની અંદર જેથી styles સીધી લખાણ પર લાગુ થાય.
- `<head>` tag ની અંદર `<link>` element વાપરીને.
- પાનાની બિલકુલ ટોચે `<!DOCTYPE>` ની જાહેરાત પહેલાં.
- એક custom ફકરાના attribute ના વીંટાળનારની અંદર.
Show the answer
`<head>` tag ની અંદર `<link>` element વાપરીને.
Stylesheets જેવી બહારની સામગ્રી <head> block ની અંદર એક <link> tag વાપરીને જાહેર કરવી જ પડે. એમને body માં મૂકવાથી content નો style વગરનો ઝબકારો થઈ શકે છે, અને doctype ની જાહેરાત પહેલાં કંઈ પણ મૂકવાથી HTML5 ના ચકાસણીના ધોરણનું પાલન તૂટે છે.
Theory
પગલું દર પગલું: એક Head Section ગોઠવવો
ચાલો તમારા portfolio માટે પગલું દર પગલું એક સાફ head section ગોઠવીએ:
1. તમારા ખૂલતા <html> tag ની બરાબર નીચે <head> નો ડબ્બો ખોલો.
2. Browser ના tab નું લખાણ 'My Portfolio' કરવા એક <title> tag નાખો.
3. તમારી stylesheet જોડવા rel="stylesheet" અને href="style.css" સાથે એક <link> tag ઉમેરો.
4. Body ખોલતાં પહેલાં એક સ્પષ્ટ </head> tag થી ડબ્બો બંધ કરો.
Think first
Style સામે Link નો નિર્ણય
Tap કરતાં પહેલાં, મનમાં તપાસો કે તમારા college ના project માં તમે ક્યારે <link> tag ને બદલે <style> tag પસંદ કરશો. મુખ્ય માળખાકીય કારણ શું છે?
Show the answer
જ્યારે તમારી પાસે માત્ર એ એક જ webpage માટે જ બનેલી થોડી styles હોય ત્યારે આંતરિક CSS માટે <style> tag વાપરો. જ્યારે તમારે બિલકુલ એ જ styles અનેક પાનાં પર વહેંચવી હોય, જેમ કે તમારું home નું પાનું, project ના grid નું પાનું, અને contact form નું પાનું, ત્યારે એક બહારની .css file જોડવા <link> tag વાપરો.
Watch out
દેખાતા Head ની ગેરસમજ
લેખિત theory ની પરીક્ષાઓમાં એક વારંવારની ભૂલ છે <head> વિભાગની અંદર <h1> કે <p> જેવાં લખાણનાં tags મૂકવાં. યાદ રાખો, <head> ના ડબ્બાની અંદર લખાયેલું કંઈ પણ webpage ના પડદા પર સંપૂર્ણપણે અદૃશ્ય હોય છે. જો તમે ત્યાં દેખાવનાં elements મૂકો, browser કદાચ એ દેખાડે, પણ તમારા પાનાનું માળખું તૂટે છે, જે વ્યવહારુ મૂલ્યાંકનકારો પાસેથી તરત કપાત તરફ દોરે છે.
Formula
Exam ની રીત: મોટા ચારનું વિભાજન
જ્યારે એક exam નો પ્રશ્ન તમને 'HTML Head વિભાગના ઘટકો સમજાવો' કહે, આ માળખું પાળો:
- વ્યાખ્યા: જણાવો કે એ metadata ધરાવે છે અને html અને body tags વચ્ચે બેસે છે.
- મોટા ચાર:
<title>,<link>,<style>, અને<script>માટે ટૂંકી સમજૂતીઓ લખો. - સાફ Code: head વિભાગ ખૂલતો, tags nest થતાં, અને બરાબર બંધ થતો દેખાડતું એક ટૂંકું ઉદાહરણ આપો.
Summary
Key takeaways
<head>tag webpage ના metadata અને ગુણધર્મો માટે એક છુપાયેલા ડબ્બા તરીકે કામ કરે છે.<title>tag નક્કી કરે છે કે browser ના tab પર કે search ના indexing માં કયું લખાણ દેખાય.<link>tag વૈશ્વિક CSS stylesheets જેવી બહારની files સાથે જોડાણો સ્થાપે છે.<style>અને<script>tags આંતરિક styling ની વ્યાખ્યાઓ અને client નાં વર્તન જડે છે.- લખાણના blocks જેવા દેખાતા layout ના ઘટકો ક્યારેય head વિભાગની અંદર ન મુકાવા જોઈએ.
- Memory Hook: Head એ મગજ છે જે વિચારે છે, જ્યારે body એ ચહેરો છે જે દેખાય છે.