HTML ကျူတိုရီရယ်

HTML ပင်မစာမျက်နှာ HTML နိဒါန်း HTML တည်းဖြတ်သူများ HTML အခြေခံ HTML အစိတ်အပိုင်းများ HTML အရည်အချင်းများ HTML ခေါင်းစီးများ HTML စာပိုဒ်များ HTML ပုံစံများ HTML Formatting HTML ကိုးကားချက်များ HTML မှတ်ချက်များ HTML အရောင်များ HTML CSS HTML လင့်ခ်များ HTML ပုံများ HTML Favicon HTML ဇယားများ HTML စာရင်းများ HTML Block & Inline HTML အတန်းများ HTML ID HTML Iframes HTML JavaScript HTML ဖိုင်လမ်းကြောင်းများ HTML Head HTML အပြင်အဆင် HTML တုံ့ပြန်မှု HTML ကွန်ပျူတာကုဒ် HTML ဝေါဟာရများ HTML ပုံစံလမ်းညွှန် HTML အကြောင်းအရာများ HTML သင်္ကေတများ HTML အီမိုဂျီများ HTML Charset HTML URL ကုဒ် HTML နှင့် XHTML

HTML ပုံစံများ

HTML ပုံစံများ HTML Form Attribute များ HTML ဖောင်ဒြပ်စင်များ HTML ထည့်သွင်းမှု အမျိုးအစားများ HTML ထည့်သွင်းခြင်း အရည်အချင်းများ HTML Input Form Attributes

HTML ဂရပ်ဖစ်

HTML Canvas HTML SVG

HTML မီဒီယာ

HTML မီဒီယာ HTML ဗီဒီယို HTML အသံ HTML ပလပ်အင်များ HTML YouTube

HTML API များ

HTML Geolocation HTML ဆွဲ/ချပါ။ HTML ဝဘ်သိုလှောင်မှု HTML ဝဘ်အလုပ်သမားများ HTML SSE

HTML နမူနာများ

HTML နမူနာများ HTML Quiz HTML လေ့ကျင့်ခန်းများ HTML လက်မှတ် HTML အနှစ်ချုပ် HTML အသုံးပြုနိုင်မှု

HTML ကိုးကားချက်များ

HTML Tag စာရင်း HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML Browser ပံ့ပိုးမှု HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML Doctypes HTML အက္ခရာအစုံများ HTML URL ကုဒ် HTML လန်းကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ

HTML class Attribute


HTML အင်္ဂါရပ်တစ်ခုအတွက် အတန်းတစ်ခုကို သတ်မှတ်ရန် HTML classရည်ညွှန်းချက်ကို အသုံးပြုသည်။

HTML အစိတ်အပိုင်းများစွာသည် တူညီသောအတန်းကို မျှဝေနိုင်သည်။


class Attribute ကိုအသုံးပြုခြင်း။

classစတိုင်စာရွက်ရှိ အတန်းအမည်ကို ညွှန်ပြရန် attribute ကို မကြာခဏအသုံးပြုသည် သတ်မှတ်ထားသော အတန်းအမည်ဖြင့် ဒြပ်စင်များကို ဝင်ရောက် ကိုင်တွယ် စီမံရန် JavaScript မှလည်း ၎င်းကို အသုံးပြုနိုင်သည်။

အောက်ပါဥပမာတွင် ကျွန်ုပ်တို့တွင် "city" တန်ဖိုးရှိသော attribute သုံးခု <div>ရှိသည် classအစိတ်အပိုင်း သုံးခုစလုံး ကို ဦးခေါင်းအပိုင်းရှိ စတိုင်အဓိပ္ပါယ်သတ်မှတ်ချက် <div> အရ အညီအမျှ ပုံစံချထားမည်-.city

ဥပမာ

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

အောက်ဖော်ပြပါ ဥပမာတွင် ကျွန်ုပ်တို့တွင် "မှတ်စု" တန်ဖိုးရှိသော attribute နှစ်ခု <span>ရှိသည် classအစိတ်အပိုင်း နှစ်ခုစလုံး သည် ခေါင်းပိုင်းအပိုင်းရှိ စတိုင်အဓိပ္ပါယ်သတ်မှတ်ချက် <span> အရ အညီအမျှ ပုံစံချထားမည် -.note

ဥပမာ

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

အကြံပြုချက်- ရည်ညွှန်း classချက်ကို မည်သည့် HTML ဒြပ်စင်တွင်မဆို အသုံးပြုနိုင်ပါသည်။

မှတ်ချက်- အတန်းအမည်သည် စာလုံးအကြီးအသေးဖြစ်သည်။

အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS Tutorial တွင် CSS အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည်



အတန်းအတွက် Syntax

အတန်းတစ်ခုဖန်တီးရန်; ကာလတစ်ခု (.) စာလုံးကို ရေးပြီး နောက်တွင် အတန်းအမည်တစ်ခု ရေးပါ။ ထို့နောက်၊ curly braces {} အတွင်းရှိ CSS ဂုဏ်သတ္တိများကို သတ်မှတ်ပါ-

ဥပမာ

"မြို့" အမည်ရှိ အတန်းတစ်ခုကို ဖန်တီးပါ-

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

အတန်းမျိုးစုံ

HTML ဒြပ်စင်များသည် class တစ်ခုထက်ပို၍ သက်ဆိုင်ပါသည်။

အတန်းများစွာကို သတ်မှတ်ရန်၊ အတန်းအမည်များကို နေရာလွတ်တစ်ခုဖြင့် ပိုင်းခြားပါ၊ ဥပမာ <div class="city main">။ သတ်မှတ်ထားသော အတန်းအားလုံးအတိုင်း အစိတ်အပိုင်းကို ပုံစံချပါမည်။

အောက်ပါဥပမာတွင်၊ ပထမ <h2>ဒြပ်စင်သည် class နှစ်ခုလုံးနှင့် class မှသက်ဆိုင်ပြီး cityclass mainနှစ်ခုစလုံးမှ CSS styles ကိုရလိမ့်မည်- 

ဥပမာ

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

မတူညီသောဒြပ်စင်များသည် တူညီသောအတန်းကိုမျှဝေနိုင်သည်။

မတူညီသော HTML အစိတ်အပိုင်းများသည် တူညီသောအတန်းအမည်ကို ညွှန်ပြနိုင်သည်။

အောက်ပါဥပမာတွင်၊ နှစ်ခုလုံး သည် "မြို့" အတန်းကိုညွှန်ပြပြီး တူညီသောပုံစံကို မျှဝေပါမည် <h2>-<p>

ဥပမာ

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

JavaScript တွင် class Attribute ကိုအသုံးပြုခြင်း။

သတ်မှတ်ထားသော ဒြပ်စင်များအတွက် အချို့သောလုပ်ဆောင်စရာများကို လုပ်ဆောင်ရန် အတန်းအမည်ကိုလည်း JavaScript မှလည်း အသုံးပြုနိုင်သည်။

JavaScript သည် getElementsByClassName()နည်းလမ်းဖြင့် သီးခြားအတန်းအမည်တစ်ခုဖြင့် အစိတ်အပိုင်းများကို ဝင်ရောက်ကြည့်ရှုနိုင်သည်-

ဥပမာ

အတန်းအမည် "city" ဖြင့် အစိတ်အပိုင်းအားလုံးကို ဝှက်ထားရန် ခလုတ်ကို နှိပ်ပါ။

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

အပေါ်က ဥပမာမှာပါတဲ့ ကုဒ်ကို နားမလည်ရင် စိတ်မပူပါနဲ့။

ကျွန်ုပ်တို့၏ HTML JavaScript အခန်းတွင် JavaScript အကြောင်း ပိုမိုလေ့လာနိုင်လိမ့်မည် သို့မဟုတ် ကျွန်ုပ်တို့၏ JavaScript ကျူတိုရီရယ် ကို လေ့လာနိုင်ပါသည် ။


အခန်းအကျဉ်းချုပ်

  • HTML classရည်ညွှန်းချက်သည် ဒြပ်စင်တစ်ခုအတွက် တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော အတန်းအမည်များကို သတ်မှတ်သည်။
  • သီးခြားဒြပ်စင်များကို ရွေးချယ်၍ ဝင်ရောက်အသုံးပြုရန် အတန်းများကို CSS နှင့် JavaScript တို့က အသုံးပြုပါသည်။
  • classရည်ညွှန်းချက်ကို မည်သည့် HTML ဒြပ်စင်တွင်မဆို အသုံးပြုနိုင်ပါသည်
  • အတန်းအမည်သည် စာလုံးအကြီးအသေးဖြစ်သည်။
  • မတူညီသော HTML အစိတ်အပိုင်းများသည် တူညီသောအတန်းအမည်ကို ညွှန်ပြနိုင်သည်။
  • JavaScript သည် getElementsByClassName() method ဖြင့် သီးခြား class အမည်တစ်ခုဖြင့် အစိတ်အပိုင်းများကို ဝင်ရောက်နိုင်သည်။

HTML လေ့ကျင့်ခန်းများ

လေ့ကျင့်ခန်းများဖြင့် သင့်ကိုယ်သင် စမ်းသပ်ပါ။

လေ့ကျင့်ခန်း

"special" ဟု အမည်ပေးထားသော အတန်းရွေးချယ်မှုတစ်ခုကို ဖန်တီးပါ။

"အထူး" အတန်းအတွင်း တန်ဖိုး "အပြာ" ဖြင့် အရောင်ပိုင်ဆိုင်မှုကို ထည့်ပါ။

<!DOCTYPE html>
<html>
<head>
<style>

  ;

</style>
</head>
<body>

<p class="special">ကျွန်ုပ်၏ စာပိုဒ်</p>

</body>
</html>