Myanmar Coder Guide

Course Outline from w3school.com

Wednesday, December 16, 2020

HTMl Quotation

ဒီအခန်းမှာ‌တော့ ကျွန်တော်တို့ <blockquote>, <q>, <abbr>, <address>, <cite> နှင့် <bdo> စတဲ့ HTML Element များကို လေ့လာသွားပါမယ်။


Example

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Try it Yourself !

HTML <blockquote> for Quotation

အခြားမှ အချက်အလက်များကို ကိုးကားလိုတဲ့အခါမှာ <blockquote> Element ကို အသုံးပြုကြပါတယ်။

ဒီလိုမှ မဟုတ် ကျွန်တော်တို့ ထင်ထင်ရှားဖေါ်ပြလိုတဲ့ စကားစုများအတွက်ကိုလည်း <blockquote> ကို အသုံးပြုလို့ရပါတယ်။

Example Code

  1. <p>Here is a quote from WWF's website:</p>
  2. <blockquote cite="http://www.worldwildlife.org/who/index.html">
  3.       For 50 years, WWF has been protecting the future of nature.
  4.       The world's leading conservation organization,
  5.       WWF works in 100 countries and is supported by
  6.       1.2 million members in the United States andy 
  7.       close to 5 million globally.
  8. </bloqute>
Try it Yourself !

<blockquote> မှာ cite ဆိုတဲ့ Attribute တစ်ခုသုံးလို့ရပါတယ်။

cite ကတော့ ကိုကားထားတဲ့ ရင်းမြစ်ကို ညွှန်းတားဖြစ်ပါတယ်။

အသုံးမပြုရင်လည်း ရပါတယ်။


HTML <q> for Short Quotation

Short Quotation များအတွက်တော့ <q< element ကိုအသုံးပြုကြပါတယ်။

ပုံမှန်အားဖြင့်တော့ Browser တွေက <q> element တွေတွေ့တဲ့အခါ အစနဲ့အဆုံးမှာ Quote (") လေးတွေ ထည့်ပေးလေ့ရှိပါတယ်။

ကိုယ်စိတ်တိုင်းကျ Styling ကိုလည်း ပြင်ဆင်ထားနိုင်ပါတယ်။

Example Code

  1. <p> WWF's goal is to: <q> Build a future where people live in harmony with nature. </q> </p>
Try it Yourself !

HTML <abbr> for Abbreviarions

HTML, CSS, Mr., Dr., ASPA, ATM စသည်ကဲ့သိုသော "အတိုကောက်" စကားလုံးများကို သတ်မှတ်ဖို့အတွက် <abbr> Tag ကိုအသုံးပြုပါတယ်။

ဒီလို "အတိုကောက်" စကားလံုးများကို <abbr> နဲ့အသုံးပြုခြင်းကြောင့် အချက်အလက်ပြည့်စုံခြင်း၊ ဘာသာပြန်စနစ်များနှင့် Search-engines များအတွက် များစွာအကျိုးရှိပါတယ်။

Tip: အကယ်လို့ "အတိုကောက်" စာလုံးအပေါ်မှာ မောက်စ့် တင်လိုက်တာနဲ့ Description တစ်ခု (သို့) အရှည်ကောက်စာလုံးကို ဖေါ်ပြလိုတဲ့ အခါမှာတော့ title Attribute ကိုအသုံးပြုနိုင်ပါတယ်။

Example Code

  1. <p> The <abbr title="World Health Organization" > WHO </abbr> was founded in 1948.</p>
Try it Yourself!

HTMl <address> for Content Information

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

email address တွေ၊ ဝဘ်ဆိုက် URL တွေ၊ ဖုန်းနံပတ်တွေ၊ Social Media Link တွေ၊ ပြင်ပလိပ်စာတွေ စတဲ့ ဆက်သွယ်ရမယ့် လိပ်စာအချက်အလက်အားလုံး အတွက် အသုံးပြုနိုင်ပါတယ်။

ပုံမှန်အားဖြင့် <address> ထဲက စာသားတွေကို 'စာလုံးစောင်း' နှင့် ပြသပေးပြီး <address>ရဲ့ အရှေ့နဲ့ အနောက်မှာ Line Break ခြားပေးပါတယ်။ စာကြောင်းတစ်ကြောင်းအနေနဲ့ ရေးပေးတာပေါ့‌ဗျာ။

လိပ်စာများအတွက် <address> Tag ကိုအသုံးပြုခြင်းဟာ Search-engines နှင့် SEO ကို များစွာအထောက်ကူ ပြုပါတယ်။

Example Code

  1. <address>
  2.       Written by John Doe.<br>
  3.       Visit us at:<br>
  4.       Example.com<br>
  5.       Box 564, Disneyland<br>
  6.       USA<br>
  7. </address>
Try it Yourself!

HTML <cite> for Work Title

ထူးခြားတဲ့ အလုပ်တစ်ခုရဲ့ ခေါင်းစီးတွေကို ဖေါ်ပြချင် တဲ့အခါမှာ <cite> ကိုသုံးပါတယ်။ (ဥပမာ - စာအုပ်ရဲ့ အမည်၊ ပန်းချီကားအမည်၊ ကဗျာအမည်၊ စသည်ဖြင့် ..)

Note: လူအမည်တွေကိုတော့ <cite> နဲ့မရေးရပါဘူး။

<cite> အတွင်းက စာသားတွေကို 'စာလုံးစောင်း' နဲ့ပြသပေးပါတယ်။

Example Code

  1. <p><cite>The Scream</cite> by Edvard Munch. Paint in 1893.</p>
Try it Yourself!

ဒီနေရာမှာ ကျွန်‌တော်တို့ လေ့လာနေရတဲ့ Code တွေဟာ အများအားဖြင့် 'စာလုံးစောင်း' နဲ့ ဖေါ်ပြကြတာကို သတိထားမိလိမ့်မယ် ထင်ပါတယ်။

မိတ်ဆွေတို့က ယူဆလိမ့်မယ် စာလုံးစောင်းနဲ့ ပြဖို့များဗျာ <i> tag ကိုသုံးလိုက်ရင် ပြီးတာဘဲပေ့ါ။ မတူပါဘူး။ ဒီကုဒ်တွေရဲ့ အကျိုးသက်ရောက်မှုက Styling ဘယ်လိုပြတယ်ဆိုတာမှာဘဲ သက်ရောက်တာမဟုတ်ပါဘူး။ Search-engines တွေ SEO တွေအတွက် အများကြီးသက်ရောက်မှုရှိပါတယ်။

HTML Tag တွေကို သူ့နေရာနဲ့သူ မှန်မှန်ကန်ကန် အသုံးပြုတတ်အောင် လေ့လာသင်ယူသင့်ပါတယ်။


HTML <bdo> for Bi-Directional Override

BDO ဆိုတာကတော့ Bi-Directional Override ဖြစ်ပါတယ်။

စာသာတွေရဲ့ လားရားကို ပြောင်းလဲရေးသားလိုတဲ့အခါမှာ သုံးပါတယ်။ စာအစီစဉ်တွေနောက်ပြန် ပြန်ရေးတာမျိုးပေါ့ဗျာ။

အသုံးနည်းတဲ့ Tag တစ်ခုပါ။

Tip: စာသားရဲ့ လားရာကို သတ်မှတ်ဖို့အတွက် dir Attribute ကိုအသုံးပြုပါတယ်။ rtlဆိုတာကတော့ right to left ဖြစ်ပါတယ်။

Example Code

  1. <bdo dir="rtl">This text will be written from right to left</bdo>
Try it Yourself!

HTML Quotation and Citation Element

Tag Description
<abbr> အတိုကောက်စကားလုံးများအတွက်
<address> ဆက်သွယ်ရမည့် လိပ်စာ၊ အချက်အလက်များအတွက်
<bdo> စာကြောင်း လားရာကိုသတ်မှတ်ဖို့အတွက်
<blockquote> အခြားရင်းမြစ် တစ်ခုကို ကိုးကားဖို့အတွက်
<cite> လုပ်ငန်းခေါင်းစီး ဖေါ်ပြဖို့အတွက်
<q> တစ်ကြောင်းထဲသုံးရသော ကိုးကားမှု အတိုများအတွက်

No comments:

Post a Comment