HTML Paragraphs

HTML မှာစာပိုဒ်တစ်ပိုဒ်ကိုရေးရင် မျဥ်းအသစ်ပေါ်မှာ အမြဲတမ်းစတင်လေ့ရှိတယ်။ဘာလို့လဲဆိုတော့ P Element က Block Level Element ထဲက တစ်ခုဖြစ်လို့ပါ။

HTML Paragraphs

HTML မှာ စာပိုဒ်တွေကိုရေးမယ််ဆိုရင် <p> ဆိုတဲ့ Element ကိုအသုံးပြုရပါတယ်။

စာပိုဒ်တစ်ပိုဒ်ဟာ မျဥ်းအသစ်ပေါ်မှာပဲ အမြဲစတင်လေ့ရှိတယ်။နောက်ပြီး စာပိုဒ်တွေကိုဖော်ပြတဲ့နေရာမှာ Browsers တွေက စာပိုဒ်ရဲ့အစနဲ့အဆုံးမှာ အဖြူရောင်နေရာလွတ်(Margin)တွေကို အလိုအလျောက် ထည့်သွင်းပေးလေ့ရှိတယ်။

Example

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

Try it Yourself !

---

HTML Display

HTML က Browsers တွေမှာ ဘယ်လိုဖော်ပြမယ်ဆိုတာကို ကျွန်တော်တို့က သေချာမသိနိုင်ဖူး။ ဥပမာ-

အရွယ်အစားကြီးတဲ့ Screen နဲ့ သေးငယ်တဲ့ Screen မှာ HTML Document တွေကိုဖော်ပြပုံခြင်းမတူပါဘူး။

ကျွန်တော်တို့ဟာ မျဥ်းအပိုတွေ နေရာလွတ်တွေကို ကျွန်တော်တို့ရဲ့ Code တွေထဲမှာထည့်ပြီး ရေးလိုက်ရင် Browser ကနေပြီးတော့ အဲ့နေရာလွတ်တွေ
မျဥ်းအပိုတွေကို အလိုအလျောက် ဖျက်ပစ်လိုက်ပါတယ်။

Example

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p> This paragraph
contains    a lot of spaces
in the source    code,
but the    browser
ignores it.</p>

Try it Yourself !

---

HTML Horizontal Rules

<hr> ဆိုတဲ့ Tag ကို အလျားလိုက်မျဥ်း ဆွဲတဲ့အခါ ဒါမှမဟုတ် HTML Page တွေမှာ အကြောင်းအရာ တစ်ခုနဲ့တစ်ခု ခွဲခြားပြီးပြတဲ့အခါမှာ အသုံးပြုတယ်။

Example

<h1>This is heading 1</h1>

<p>This is a paragraph.</p>

<hr>

<h2>This is heading 2</h2>

<p>This is another paragraph.</p>

<hr>

Try it Yourself !

<hr> Tag ဟာ Empty Tag တစ်ခုဖြစ်ပါတယ်။ ပြောချင်တာက သူ့မှာ တခြား Tag တွေလိုမျိုး အပိတ် Tag မရှိပါဘူး။

---

HTML Line Breaks

<br> Tag ကို မျဥ်းအသစ်ကိုဆင်းလိုတဲ့ အခါမှာ အသုံးပြုပါတယ်။
ဥပမာ-စာပိုဒ်တစ်ပိုဒ်ကို ရေးနေရင်းနဲ့ အောက်ကို မျဥ်းအသစ်ဆင်းချင်တယ်ဆိုရင် <br> ကိုအသုံးပြုလို့ရပါတယ်။

Example

<p>This is <br> a pargaraph <br> with line breaks.<p>

Try it Yourself !

<br> Tag ဟာ Empty Tag တစ်ခုဖြစ်ပါတယ်။ ပြောချင်တာက သူ့မှာ တခြား Tag တွေလိုမျိုး အပိတ် Tag မရှိပါဘူး။

---

The Poem Problem

ကျွန်တော်တို့ဟာ Website တွေရေးရင်း ကဗျာတွေရေးဖို့ပါလာတယ်ဆိုပါစို့။ ကဗျာတွေကို တစ်ကြောင်းချင်းစီ ပြစေချင်လို့ ကိုယ်က Enter ခေါက်ပီးနောက်တစ်ကြောင်းဆင်းထားတယ်။ ဒါပေမယ့် Browser က auto ဖျက်ပစ်တယ်။ အဲ့တာဆိုရင် ဘယ်လိုလုပ်မလဲ။အောက်မှာ ဆက်ရှင်းပြထားပါတယ်။

Example

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</p>

Try it Yourself !

---

Solution - The HTML <pre> Element

<pre> ကို ကျွန်တော်တို့ ထည့်လိုက်တဲ့ Spaces တွေ Line Break တွေကို Browser က ဖျက်မပစ်ဘဲ အရှိအတိုင်းအလုပ်လုပ် စေချင်ရင် အသုံးပြုပါတယ်။
အောက်က ဥပမာလေးနဲ့ဆိုရင် နားလည်သွားပါလိမ့်မယ်။

Example

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

Try it Yourself !