HTML Block နှင့် Inline Elements များ
HTML ဒြပ်စင်တိုင်းတွင် ၎င်းသည် မည်သည့်ဒြပ်စင်အမျိုးအစားပေါ်မူတည်ပြီး ပုံသေပြသမှုတန်ဖိုးရှိသည်။
ဖော်ပြမှုတန်ဖိုး နှစ်ခုရှိသည်- ပိတ်ဆို့ခြင်း နှင့် အတွင်းလိုင်း။
ပိတ်ဆို့အဆင့်ဒြပ်စင်များ
ဘလောက်အဆင့်ဒြပ်စင်သည် လိုင်းအသစ်တွင် အမြဲတမ်းစတင်သည်။
ဘလောက်အဆင့်ဒြပ်စင်သည် ရနိုင်သော အကျယ်ကို အမြဲတမ်းယူသည် (၎င်းကို တတ်နိုင်သမျှ ဘယ်ညာသို့ ဆန့်ထုတ်သည်)။
ဘလောက်အဆင့်ဒြပ်စင်တစ်ခုတွင် အပေါ်နှင့်အောက်ခြေအနားသတ်တစ်ခုရှိသော်လည်း လိုင်းဒြပ်စင်တစ်ခုမပါဝင်ပါ။
ဥပမာ
<div>Hello World</div>
ဤသည်မှာ HTML ရှိ ပိတ်ဆို့အဆင့်ဒြပ်စင်များဖြစ်သည်။
Inline Elements များ
inline element တစ်ခုသည် လိုင်းအသစ်တွင် မစတင်ပါ။
အင်လိုင်းဒြပ်စင်တစ်ခုသည် လိုအပ်သလောက် အကျယ်ကိုသာ ယူသည်။
၎င်းသည် စာပိုဒ် တစ်ခုအတွင်းရှိ <span> ဒြပ်စင်တစ်ခုဖြစ်သည် ။
ဥပမာ
<span>Hello World</span>
ဤသည်မှာ HTML တွင် အတွင်းပိုင်းဒြပ်စင်များဖြစ်သည် ။
မှတ်ချက်- inline element တွင် block-level element မပါဝင်နိုင်ပါ။
<div> ဒြပ်စင်
ဒြပ်စင် ကို <div>အခြား HTML ဒြပ်စင်များအတွက် ကွန်တိန်နာအဖြစ် မကြာခဏ အသုံးပြုသည်။
ဒြပ်စင် တွင် <div>မလိုအပ်သော အရည်အချင်းများ မပါရှိသော်လည်း style၊ classနှင့် idဘုံဖြစ်သည်။
CSS နှင့် တွဲသုံးသောအခါ၊ <div>အကြောင်းအရာတုံးများကို ပုံစံသတ်မှတ်ရန် အစိတ်အပိုင်းကို အသုံးပြုနိုင်သည်။
ဥပမာ
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<span> ဒြပ်စင်
ဒြပ်စင်သည် စာသား <span>အစိတ်အပိုင်းတစ်ခု သို့မဟုတ် စာရွက်စာတမ်း၏ အစိတ်အပိုင်းတစ်ခုကို အမှတ်အသားပြုရန် အသုံးပြုသည့် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
ဒြပ်စင် တွင် <span>မလိုအပ်သော အရည်အချင်းများ မပါရှိသော်လည်း style၊ classနှင့် idဘုံဖြစ်သည်။
CSS နှင့် တွဲသုံးသောအခါ၊ <span>စာသားအစိတ်အပိုင်းများကို ပုံစံသတ်မှတ်ရန် အစိတ်အပိုင်းကို အသုံးပြုနိုင်သည်။
ဥပမာ
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>
အခန်းအကျဉ်းချုပ်
- ဖော်ပြမှုတန်ဖိုး နှစ်ခုရှိသည်- ပိတ်ဆို့ခြင်း နှင့် အတွင်းလိုင်း
- ဘလောက်အဆင့်ဒြပ်စင်သည် စာကြောင်းအသစ်တွင် အမြဲတမ်းစတင်ပြီး ရနိုင်သော အကျယ်ကို အပြည့်ယူသည်။
- inline element တစ်ခုသည် လိုင်းအသစ်တွင် မစတင်ဘဲ ၎င်းသည် လိုအပ်သလောက် width ကိုသာ ယူသည်။
- ဒြပ်စင် သည်
<div>ဘလောက်အဆင့်ဖြစ်ပြီး အခြား HTML ဒြပ်စင်များအတွက် ကွန်တိန်နာအဖြစ် မကြာခဏအသုံးပြုသည်။ - ဒြပ်စင်သည် စာသား
<span>အစိတ်အပိုင်းတစ်ခု သို့မဟုတ် စာရွက်စာတမ်း၏ အစိတ်အပိုင်းတစ်ခုကို အမှတ်အသားပြုရန် အသုံးပြုသည့် ကွန်တိန်နာတစ်ခုဖြစ်သည်။
HTML တဂ်များ
| Tag | Description |
|---|---|
| <div> | Defines a section in a document (block-level) |
| <span> | Defines a section in a document (inline) |
ရနိုင်သော HTML တဂ်များ အားလုံး၏ စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။