Theory
Portfolio ના Layout ની આફત
કલ્પો કે તમે તમારા college ના portfolio માટે 'About Me' નું પાનું code કરી રહ્યા છો. તમે તમારું નામ લખો છો, પછી એક ટૂંકો bio, અને પછી તમારે એક profile નો ફોટો નાખવો છે. પણ જ્યારે તમે browser જુઓ, બધું જ એક જ ગંદી લીટીમાં ઠાંસી ગયું છે! તમારું નામ, તમારો bio, અને તમારો ફોટો મુંબઈની ભરચક bus ની જેમ એકબીજા સાથે અથડાય છે. HTML તમારા સુઘડ ફકરા અને લીટીના breaks કેમ અવગણે છે, અને તમે એ કેવી રીતે સુધારો?
Theory
ઈંટો સામે Stickers
HTML elements ને બે પ્રકારની વસ્તુઓ જેવાં વિચારો: ઈંટો અને stickers. અમુક elements ભારે concrete ની ઈંટો જેવાં કામ કરે છે. જ્યારે તમે એક ઈંટ મૂકો, એ દીવાલની પૂરી પહોળાઈ રોકે છે, બીજું બધું ઉપર કે નીચે બેસવા મજબૂર કરતાં. બીજાં elements નાનાં stickers જેવાં કામ કરે છે. જ્યાં સુધી જગ્યા બાકી હોય ત્યાં સુધી તમે એક જ લીટી પર પડખોપડખ અનેક stickers ચોંટાડી શકો છો. કયું tag ઈંટ છે અને કયું sticker એ જાણવું તમારા layout ના માળખાને સંપૂર્ણપણે નિયંત્રિત કરે છે.
Theory
Block સામે Inline અને Container સામે Non-Container
Web ના માળખામાં, tags ને દેખાવના વર્તન અને સંરચનાત્મક ભૂમિકા પ્રમાણે વર્ગીકૃત કરાય છે:
- Block-level elements એક નવી લીટીએ શરૂ થાય છે અને ઉપલબ્ધ પૂરી પહોળાઈ રોકે છે. ઉદાહરણોમાં
<div>(સામાન્ય વિભાજન) અને<p>(ફકરો) શામેલ છે.
- Inline elements નવી લીટીએ શરૂ થતાં નથી અને માત્ર જરૂરી હોય એટલી જ પહોળાઈ રોકે છે. એક ઉદાહરણ છે
<span>.
- Non-container tags (જેમને empty કે self-closing tags પણ કહેવાય છે) content ને વીંટાળતાં નથી અને એમને બંધ થતું tag હોતું નથી. ઉદાહરણોમાં
<br>(લીટીનો break),<hr>(આડી લીટી), અને<img>(image) શામેલ છે.
At a glance
મુખ્ય HTML layout અને સંરચનાત્મક elements ની સરખામણી.
| Tag નો પ્રકાર | Tags | નવી લીટીએ શરૂ થાય? | બંધ થાય? |
|---|---|---|---|
| Block Container | div, p | હા | હા, બંધ થતા tag સાથે |
| Inline Container | span | ના | હા, બંધ થતા tag સાથે |
| Non-Container (Empty) | br, hr | br: break પાડે, hr: પૂરી પહોળાઈની લીટી | ના, self-closing |
| Non-Container (Asset) | img | ના (Inline પ્રવાહ) | ના, src attribute જોઈએ |
Practical
The Correct Portfolio Structure
<div>
<h2>My Portfolio</h2>
<hr>
<p>
Hello! I am a <span>BCA student</span> specializing in web development.
<br>
Check out my profile below:
</p>
<img src="profile.jpg" alt="My Photo">
</div>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Layout ને ઉકેલવું
ચાલો તોડીએ કે browser આ ઉદાહરણ કેવી રીતે દોરે છે:
<div>એક મુખ્ય block નો ડબ્બો બનાવે છે જે આખો વિભાગ સાથે રાખે છે.
<hr>heading ની નીચે પૂરી પહોળાઈની લીટી દોરે છે, એક block જેવા સંરચનાત્મક break તરીકે કામ કરતાં.
<p>block લખાણને જૂથબદ્ધ કરે છે અને આપોઆપ લખાણને એક તાજી લીટીએ નીચે ધકેલે છે.
<span>લીટી તોડ્યા વગર 'BCA student' શબ્દોને custom જૂથ લગાવે છે.
<br>એ જ ફકરાની અંદર 'Check out my profile' ને એક નવી લીટીએ ધકેલે છે.
<img>લખાણ પછી તરત image ને inline નાખે છે.
Quiz
એક exam નો પ્રશ્ન તમને બે portfolio ના વિભાગો વચ્ચે એક આડી લીટીનો વિભાજક નાખવાનું કહે છે. કયો code નો ટુકડો સંરચનાત્મક રીતે માન્ય અને સચોટ છે?
- Section 1 <hr></hr> Section 2
- <hr>Section 2, પછીના વિભાગને hr tag ના content તરીકે લખતાં
- Section 1 <div></div> Section 2
- Section 1 <hr> Section 2
Show the answer
Section 1 <hr> Section 2
<hr> એ એક non-container tag છે: એને બંધ થતું tag હોતું નથી અને એ લખાણ ધરાવી શકતું નથી. </hr> લખવું એ university ની પરીક્ષાઓમાં એક ગંભીર syntax error છે. એને content રાખતા ખૂલતા tag તરીકે ગણવું એટલું જ ખોટું છે, અને એક ખાલી div એ સામાન્ય ડબ્બો છે, આડી લીટીનો વિભાજક નહીં. વિભાગો વચ્ચે મુકાયેલું ખાલી <hr> એ એકમાત્ર સંરચનાત્મક રીતે માન્ય સ્વરૂપ છે.
Think first
Inline અને Block ના વર્તનની આગાહી
Output ની મનમાં આગાહી કરો: જો તમે સળંગ બે <div> blocks લખો, અને પછી સળંગ બે <span> blocks, તો screen પર કેટલી લીટીઓ બનશે? Tap કરતાં પહેલાં વિચારો.
Show the answer
ત્રણ લીટીઓ બનશે. પહેલો <div> લીટી 1 લે છે. બીજો <div> એક block element છે, તેથી એ પોતાને લીટી 2 પર ધકેલે છે. પહેલો <span> લીટી 3 પર બેસે છે. કારણ કે <span> એક inline element છે, બીજો <span> પણ એની બરાબર બાજુમાં લીટી 3 પર જ બેસે છે. કુલ: 3 લીટીઓ.
Watch out
Paragraph અને Break ના દુરુપયોગનો ફાંદો
University ના students માં એક ખૂબ સામાન્ય ભૂલ છે ઊભી જગ્યા બનાવવા <br><br><br> tags ની વિશાળ સાંકળ વાપરવી, કે એક <p> tag ની અંદર એક <div> મૂકવો. HTML5 ના નિયમોમાં, એક ફકરો <p> માત્ર phrasing content (inline elements) ધરાવી શકે છે. એક <p> ની અંદર <div> જેવું block element મૂકવાથી browser આપોઆપ તમારો ફકરો વહેલો બંધ કરી દે છે, તૂટેલા layouts અને અમાન્ય HTML બનાવતાં. જગ્યા માટે, પછીથી CSS ના margins પર આધાર રાખો, <br> ના લખાણના hacks પર નહીં!
Formula
Exam ના જવાબની રીત: Block સામે Inline ઓળખવા
જ્યારે તમારી semester ની પરીક્ષામાં Block અને Inline tags નો ભેદ પૂછાય, મહત્તમ marks માટે આ 3 મુદ્દા લખો:
- 1. લીટીનું વર્તન: Block elements હંમેશા એક નવી લીટીએ શરૂ થાય છે: Inline elements હાલના પ્રવાહની અંદર રહે છે.
- 2. પરિમાણો: Block elements પોતાના ડબ્બાની 100% પહોળાઈ સુધી ફેલાય છે: Inline elements content ની આસપાસ ચુસ્ત વીંટળાય છે.
- 3. Content ની મર્યાદા: Block elements બીજાં block કે inline elements ધરાવી શકે છે: Inline elements માત્ર બીજાં inline elements કે લખાણ ધરાવી શકે છે.
Summary
Key takeaways
- div અને p જેવાં block elements હંમેશા એક તાજી લીટીએ શરૂ થાય છે અને ઉપલબ્ધ પૂરી પહોળાઈમાં ફેલાય છે.
- span જેવાં inline elements હયાત લીટીઓની અંદર રહે છે અને માત્ર પોતાના લખાણના content ની બિલકુલ પહોળાઈ લે છે.
- br અને hr જેવાં non-container tags ને બંધ થતાં tags હોતાં નથી અને એ બાળકો કે વીંટાળતું લખાણ ધરાવી શકતાં નથી.
- img tag એ એક અનન્ય non-container tag છે જે બહારની દૃશ્ય સામગ્રી એક inline પ્રવાહમાં load કરે છે.
- એક ફકરાના tag p ની અંદર div જેવું block-level tag ક્યારેય ન મૂકો કારણ કે એ HTML ચકાસણીના નિયમો તોડે છે.
- Block tags ને layout ની ઈંટો અને inline tags ને લખાણનાં stickers જેવાં વિચારો.