Theory
લખાણની વિરાટ દીવાલ
કલ્પો કે તમે Notepad માં તમારી portfolio ની site માટે એક સુંદર સ્વાગતની નોંધ ટાઈપ કરો છો. તમે સાફ લીટીના breaks ઉમેરો છો, તમારો bio ત્રણ ફકરામાં વહેંચો છો, અને save દબાવો છો. પણ જ્યારે તમે આ file તમારા browser માં ખોલો, ત્યારે ભયાનક દૃશ્ય: બધું જ ભેગું થઈને એક વિરાટ, ન વાંચી શકાય એવા ફકરામાં ચીપકી ગયું છે! Browser એ તમારા બધા Enter અને spaces સંપૂર્ણપણે અવગણ્યા. તો આપણે browser ને કેવી રીતે કહીએ કે એક heading ક્યાં પૂરું થાય છે અને એક ફકરો ક્યાં શરૂ થાય છે?
Theory
ચોંટાડવાનાં Labels
HTML tags ને એક courier ની કચેરીએ પાર્સલ પર ચોંટાડાતાં labels જેવાં વિચારો. જો તમે એક ખોખા પર 'Fragile' નું label ચોંટાડો, courier એને વધારાની કાળજીથી સંભાળે છે. જો તમે 'Urgent' નું label ચોંટાડો, એ ઝડપથી ખસે છે. ખોખું પોતે બદલાતું નથી, પણ label બદલી નાખે છે કે સંભાળનારા એની સાથે કેવો વ્યવહાર કરે. Web development માં, tags એ સંરચનાત્મક labels છે જે browser ને બિલકુલ કહે છે કે તમારા raw લખાણના content ને કેવી રીતે સમજવો અને દેખાડવો.
Theory
Tags, Elements, અને Attributes
ચાલો તમારી theory ની પરીક્ષા માટે મુખ્ય શબ્દો વ્યાખ્યાયિત કરીએ. એક tag એ ખૂણાવાળા કૌંસમાં ઘેરાયેલો એક command છે, જેમ કે <p>, જે browser ને સૂચના આપે છે. એક element એ પૂરું ઝૂમખું છે: ખૂલતું tag, content નું લખાણ, અને બંધ થતું tag, જેમ કે <p>Hello</p>. એક attribute ખૂલતા tag ની અંદર વધારાનું configuration આપે છે, જે name="value" જેવી નામ અને value ની જોડી તરીકે લખાય છે. દરેક standard HTML5 structure માં આ ઘટકો એક કડક ક્રમમાં ગોઠવાયેલા હોય છે.
Practical
The Essential HTML5 Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is my first webpage.</p>
</body>
</html>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
એક Attribute નું શરીરરચનાશાસ્ત્ર
ચાલો HTML code ની એક વ્યાવસાયિક લીટી છૂટી પાડીને જોઈએ કે attributes elements ને કેવી રીતે બદલે છે. <html lang="en"> જુઓ.
પહેલું, <html> એ ખૂલતું tag છે. એની અંદર, આપણે એક space અને પછી lang ઉમેરીએ છીએ. આ attribute નું નામ છે, જેનો અર્થ language થાય છે. પછી બરાબરનો ચિહ્ન અને સીધા બેવડા અવતરણચિહ્નોની અંદર attribute ની value "en" આવે છે. આ browser ને સ્પષ્ટપણે કહે છે કે આખો document અંગ્રેજીમાં લખાયેલો છે. બંધ થતું tag </html> બિલકુલ છેડે બેસે છે.
Quiz
એક laboratory ની પરીક્ષામાં, એક student `<p class=main>Welcome to my portfolio</p>` લખે છે. એક કડક university નો મૂલ્યાંકનકાર આ ચોક્કસ લીટીને કેમ નબળી પ્રથા તરીકે નિશાન કરી શકે?
- Paragraph tag હંમેશા મોટા અક્ષરોમાં લખવું જ પડે જેમ કે `<P>`.
- Attribute ની value 'main' ને માન્ય HTML ધોરણો સાફ રીતે પાળવા આદર્શ રીતે બેવડા અવતરણચિહ્નોમાં વીંટાળવી જોઈએ.
- Attributes માત્ર બંધ થતાં tags ની અંદર જ મુકાય, ક્યારેય ખૂલતાં tags ની અંદર નહીં.
- 'class' શબ્દ એક programming નો command છે અને સંરચનાત્મક HTML ની અંદર વાપરી શકાતો નથી.
Show the answer
Attribute ની value 'main' ને માન્ય HTML ધોરણો સાફ રીતે પાળવા આદર્શ રીતે બેવડા અવતરણચિહ્નોમાં વીંટાળવી જોઈએ.
જ્યારે web browsers ખૂબ ઉદાર છે, ત્યારે university ના મૂલ્યાંકનનાં ધોરણો માંગે છે કે attribute ની values બેવડા અવતરણચિહ્નોમાં વીંટાળાય, જેમ કે class="main". HTML5 tags નાના-મોટા અક્ષરો પ્રત્યે સંવેદનશીલ નથી, તેથી નાના અક્ષરો standard છે, અને attributes હંમેશા ફક્ત ખૂલતા tag ની અંદર જ રહેવાં જોઈએ.
Watch out
એકબીજા પર ચઢી જતાં Tags નો ફાંદો
વર્ણનાત્મક પરીક્ષાઓમાં marks ખાઈ જતી એક ખૂબ સામાન્ય ભૂલ છે tags નું ખોટું nesting. જો તમારે એક વાક્યાંશ bold અને italic બંને જોઈએ, તમે <b><i>My Portfolio</b></i> લખી બેસો. આ ખોટું છે! Tags એ ખૂલ્યાં હોય એના બિલકુલ ઊલટા ક્રમમાં બંધ થવાં જ જોઈએ. સાચું સ્વરૂપ છે <b><i>My Portfolio</i></b>. એને બીજગણિતના કૌંસ જેવું વિચારો: તમે અંદરનો કૌંસ બંધ કર્યા પહેલાં બહારનો કૌંસ બંધ કરી શકતા નથી.
Formula
Exam Template: પાંચ આવશ્યક Elements
જ્યારે 5 marks ના પ્રશ્ન માટે એક HTML5 document નું પાયાનું માળખું લખવાનું કહેવાય, હંમેશા આ 5 આવશ્યક વસ્તુઓ બિલકુલ આ ક્રમમાં સામેલ કરો:
<!DOCTYPE html>(Document નો પ્રકાર HTML5 જાહેર કરે છે)<html>(મૂળ ડબ્બાનું element)<head>(Webpage નું metadata અને title ધરાવે છે)<title>(Browser ના tab પર દેખાતું લખાણ ગોઠવે છે)<body>(દેખાતું બધું content નું લખાણ અને elements રાખે છે)
Think first
મુખ્ય ભેદનો પડકાર
Tap કરતાં પહેલાં, આંખો બંધ કરો અને મનમાં એક સાથી student ને એક 'HTML Tag' અને એક 'HTML Element' વચ્ચેનો બિલકુલ ભેદ સમજાવો. શું તમે એને સાફ રીતે કહી શકો?
Show the answer
એક HTML tag એ ખાલી અલગ code નો કૌંસ પોતે છે, જેમ કે <p> કે </p>. એક HTML element એ આખું પૂરું પેકેજ છે: એમાં ખૂલતું tag, અંદરના content નું લખાણ, અને બંધ થતું tag બધું સાથે એક જ સંરચનાત્મક એકમ તરીકે જોડાયેલું હોય છે.
Summary
Key takeaways
- HTML tags સંરચનાત્મક labels તરીકે કામ કરે છે જે browser ને raw લખાણ કેવી રીતે દોરવું એની સૂચના આપે છે.
- એક element ખૂલતા tag થી બંધ થતા tag સુધીનો પૂરો block દર્શાવે છે.
- Attributes ગૌણ configurations આપે છે અને નામ-value ની જોડી તરીકે ખૂલતા tag ની અંદર રહે છે.
- એક standard HTML5 document એક metadata ના head વિભાગ અને એક દેખાતા body વિભાગમાં વહેંચાયેલો છે.
- Layout ના bugs અટકાવવા અને exam ના marks જાળવવા હંમેશા tags ને ઊલટા ક્રમમાં સાફ રીતે nest કરો.
- Memory Hook: Tags એ વીંટાળનારા છે, attributes એ વર્ણનો છે, અને elements એ આખી candy bars છે.