HTML အသုံးပြုနိုင်မှု
HTML အသုံးပြုနိုင်မှု
သုံးစွဲနိုင်မှုကို စိတ်ထဲရှိရှိ HTML ကုဒ်ကို အမြဲရေးပါ။
အသုံးပြုသူကို သင့်ဆိုက်နှင့် သွားလာရန်နှင့် အပြန်အလှန်တုံ့ပြန်ရန် နည်းလမ်းကောင်းတစ်ခု ပေးပါ။ သင်၏ HTML ကုဒ်ကို တတ်နိုင်သမျှ semantic ပြုလုပ်ပါ ။
Semantic HTML
Semantic HTML ဆိုသည်မှာ ၎င်းတို့၏ မှန်ကန်သော ရည်ရွယ်ချက်အတွက် ဖြစ်နိုင်သမျှ မှန်ကန်သော HTML အစိတ်အပိုင်းများကို အသုံးပြုခြင်းကို ဆိုလိုသည်။ Semantic ဒြပ်စင်များသည် အဓိပ္ပါယ်ရှိသော ဒြပ်စင်များဖြစ်သည်။ ခလုတ်တစ်ခုလိုအပ်ပါက၊ <button>ဒြပ်စင် (ဒြပ်စင်တစ်ခုမဟုတ်
<div>) ကိုသုံးပါ။
ဝေါဟာရ
<button>Report an Error</button>
ဝေါဟာရမဟုတ်သော
<div>Report an Error</div>
Semantic HTML သည် စာမျက်နှာတစ်ခု၏ အကြောင်းအရာများကို အသံကျယ်ကျယ်ဖြင့် ဖတ်ပြသည့် စခရင်ဖတ်သူများအား စကားစပ်ပေးသည်။
ခလုတ်ဥပမာနှင့်အတူ
- ခလုတ်များသည် ပုံမှန်အားဖြင့် ပိုမိုသင့်လျော်သောပုံစံရှိသည်။
- စခရင်ဖတ်စက်က ၎င်းကို ခလုတ်တစ်ခုအဖြစ် သတ်မှတ်သည်။
- အာရုံစူးစိုက်နိုင်သော
- နှိပ်နိုင်သည်။
ကီးဘုတ်သီးသန့် လမ်းကြောင်းပြမှုကို အားကိုးနေသူများအတွက်လည်း ခလုတ်တစ်ခုအား အသုံးပြုနိုင်သည်။ ၎င်းကို မောက်စ်နှင့် သော့နှစ်ခုလုံးဖြင့် နှိပ်နိုင်ပြီး ၎င်းကို (ကီးဘုတ်ပေါ်ရှိ တက်ဘ်ခလုတ်ကို အသုံးပြု၍) ကြားတွင် တက်ဘ်ထိုးနိုင်သည်။
အဓိပ္ပါယ် မရှိသော ဒြပ်စင်များ ဥပမာများ- <div>နှင့် <span>- ၎င်း၏ အကြောင်းအရာအကြောင်း ဘာမှ မပြောပါ။
semantic ဒြပ်စင် များ ဥပမာများ - <form>, <table>, နှင့် <article>- ၎င်း၏ အကြောင်းအရာကို ရှင်းလင်းစွာ သတ်မှတ်သည်။
ခေါင်းစဉ်တွေက အရေးကြီးတယ်။
ခေါင်းစဉ် များကို တဂ်များ အထိ သတ်မှတ် <h1>ပေးသည် -<h6>
ဥပမာ
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
ရှာဖွေရေးအင်ဂျင်များသည် သင့်ဝဘ်စာမျက်နှာများ၏ တည်ဆောက်ပုံနှင့် အကြောင်းအရာကို အညွှန်းဖော်ပြရန် ခေါင်းစဉ်များကို အသုံးပြုသည်။
အသုံးပြုသူများသည် သင့်စာမျက်နှာများကို ၎င်း၏ခေါင်းစဉ်များဖြင့် လျှို့ဝှက်ထားသည်။ စာရွက်စာတမ်းဖွဲ့စည်းပုံနှင့် မတူညီသောကဏ္ဍများကြားရှိ ဆက်နွယ်မှုများကို ပြသရန် ခေါင်းစီးများကို အသုံးပြုရန် အရေးကြီးသည်။
စခရင်စာဖတ်သူများသည်လည်း လမ်းကြောင်းပြကိရိယာအဖြစ် ခေါင်းစီးများကို အသုံးပြုသည်။ ကွဲပြားသော ခေါင်းစီးအမျိုးအစားများသည် စာမျက်နှာ၏ ကောက်ကြောင်းကို သတ်မှတ်သည်။
<h1>ခေါင်းစီးများကို ပင်မခေါင်းစီးများ၊ နောက်တွင် <h2>ခေါင်းစီးများ၊ ထို့နောက် အရေးနည်း
သော စသည်တို့အတွက် အသုံးပြုသင့် <h3>သည်။
မှတ်ချက်- ခေါင်းစဉ်များအတွက် HTML ခေါင်းစီးများကိုသာ အသုံးပြုပါ။ စာသားကို BIG သို့မဟုတ် ရဲရင့် စေရန် ခေါင်းစီးများကို မသုံးပါနှင့် ။
အစားထိုးစာသား
altအကြောင်းတစ်ခုခုကြောင့် အသုံးပြုသူက ၎င်းကို မကြည့်နိုင်လျှင် (ချိတ်ဆက်မှုနှေးကွေးခြင်း၊ ရည်ညွှန်းချက်တွင် အမှားအယွင်းတစ်ခုကြောင့် သို့မဟုတ် အသုံးပြုသူသည် စခရင်ဖတ်စနစ်ကို အသုံးပြုပါက) ရည်ညွှန်းချက်သည် ပုံတစ်ပုံအတွက် အလှည့်ကျစာသားကို ပေးဆောင်
src
ပါသည်။
ရည်ညွှန်းချက် ၏တန်ဖိုးသည် altပုံအား ဖော်ပြသင့်သည်-
ဥပမာ
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
ဘရောက်ဆာတစ်ခုသည် ပုံတစ်ပုံကို ရှာမတွေ့ပါက၊ ၎င်းသည် alt
attribute ၏တန်ဖိုးကို ပြသလိမ့်မည်-
ဥပမာ
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
ဘာသာစကားကိုကြေငြာပါ။
ဝဘ်စာမျက်နှာ၏ဘာသာစကားကိုကြေငြာရန် သင် lang
က tag အတွင်းရှိ attribute ကို အမြဲထည့်သွင်းသင့်သည် ။ <html>၎င်းသည် ရှာဖွေရေးအင်ဂျင်များနှင့် ဘရောက်ဆာများကို ကူညီရန် ရည်ရွယ်သည်။
အောက်ပါဥပမာသည် အင်္ဂလိပ်ဘာသာစကားကို ဘာသာစကားအဖြစ် သတ်မှတ်သည်-
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
ရှင်းလင်းသောဘာသာစကားကိုသုံးပါ။
နားလည်ရလွယ်ကူသော ရှင်းလင်းပြတ်သားသော ဘာသာစကားကို အမြဲသုံးပါ။ စခရင်ဖတ်သူမှ ရှင်းရှင်းလင်းလင်း မဖတ်နိုင်သော စာလုံးများကို ရှောင်ရှားရန်လည်း ကြိုးစားပါ။ ဥပမာ:
- စာကြောင်းများကို တတ်နိုင်သမျှ တိုအောင်ထားပါ။
- ဒက်ရှ်များကို ရှောင်ပါ။ 1-3 ကိုရေးမည့်အစား 1 မှ 3 ကိုရေးပါ။
- အတိုကောက်များကို ရှောင်ပါ။ Feb ကိုရေးမယ့်အစား Feb ကိုရေးပါ။
- ဘန်းစကားတွေကို ရှောင်ပါ။
ကောင်းသောလင့်ခ်စာသားဖန်တီးပါ။
လင့်ခ်စာသားသည် ထိုလင့်ခ်ကိုနှိပ်ခြင်းဖြင့် စာဖတ်သူရရှိမည့် အချက်အလက်ကို ရှင်းရှင်းလင်းလင်း ရှင်းပြသင့်သည်။
အကောင်းနှင့်အဆိုး လင့်ခ်များ ဥပမာ-
ကောင်းတယ်။
မကောင်းဘူး။
မှတ်ချက်- ဤစာမျက်နှာသည် ဝဘ်အသုံးပြုနိုင်မှုဆိုင်ရာ မိတ်ဆက်တစ်ခုဖြစ်သည်။ အသေးစိတ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ Accessibility Tutorial သို့ ဝင်ရောက် ကြည့် ရှုပါ။