Myanmar Coder Guide

Course Outline from w3school.com

Saturday, November 28, 2020

HTML Elements

HTML Elements

HTML elements ကိုရေးတဲ့ခါကျရင် အဖွင့် tag နဲ့စ ပြီးးရင်အကြောင်းအရာ(Content)ရေး ပြီးရင်အပိတ် tag အဆုံးသတ်ပေးရပါတယ်။

<tagname> Content... </tagname>

HTML Element တိုင်း အဖွင့် tag နဲ့စပြီး အပိတ် tag အဆုံးသတ်ပေးရတယ်။

<h1> My First Heading </h1>

<p> My first paragraph </p>

အဖွင့် tag Content အပိတ် tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

Note - တချို့ Element တွေက Content ထည့်လို့မရပါ။ ပြီးရင် သူတို့မှာ အပိတ် tag မရှိပါ။ သူတို့တွေကို empty elements လို့ခေါ်ပါတယ်။ ဥပမာ - <br>

Nested Element

HTML Element အတွင်း တခြား Element ထည့်လို့ရပါတယ်။

HTML documents တစ်ခုလုံးက nested HTML element များဖြင့်ဖွဲ့စည်းထားတယ်။

အောက်ပါဥပမာ တွေ elements ၄ ခုပါဝင်ပါတယ်။ (<html> <body> <h1> <p>)

Example

<!DOCTYPE html>
  <html>
   <body>
    <h1>My First Element</h1>
    <p>My First Paragraph<p>
   </body>
  </html>
Try it yourself

အထက်ပါ Example ကိုရှင်းပြထားပါတယ်

Document တစ်ခုလုံးကို <html> ဖြင့်ဖွဲ့စည်းထားပါတယ်။
<html> ပထမ Top level element ဖြစ်သောကြောင့် root element လို့ခေါ်ပါတယ်။

<html> နဲ့စပြီး </html> အဆုံးသတ်ပေးရပါတယ်။

ပြီးရင် <html> element ထဲ <body> element ရှိပါတယ်။

   <body>
    <h1>My First Element</h1>
    <p>My First Paragraph<p>;
   </body>

<body> element ကို document's body ဆိုပြီးသတ်မှတ်နှိင်ပါတယ်။

<body> နဲ့စပြီး </body> အဆုံးသတ်ပေးရပါတယ်။

<body> element အတွင်းမှာ <h1> နဲ့ <p> element ၂ခုရှိပါတယ်။

<h1>My First Element</h1>
<p>My First Paragraph</p>

<h1> element ကို heading လို့ခေါ်ပါတယ်။

<h1> နဲ့စပြီး </h1> အဆုံးသတ်ပေးရပါတယ်။

<h1>My First Element</h1>

<p> element ကို paragraph လို့ခေါ်ပါတယ်။

<p> နဲ့စပြီး </p> အဆုံးသတ်ပေးရပါတယ်။

<p>My first paragraph</p>

ဘယ်တော့မှ end tag ကို မချန်ထားခဲ့ပါနဲ့

တချို့ element တွေက eng tag ချန်ထားခဲ့ရင်တောင် broswers မှာအမှန်ပြပါတယ်

Example

  <html>
   <body>
    <h1>My First Element
    <p>My First Paragraph
   </body>
  </html>
Try it yourself
Note - end tag မပါဘဲရေးလို့ရပေမယ့် တခါတလေကျရင် မဖြစ်သင့် error ဖြစ်လို့ပါ။
အမြဲတမ်း end tag ထည့်ရေးပေးသင့်တဲ့ element တိုင်း end tag ထည့်ရေးပေးပါ။

Empty HTML Elements

HTML element ထဲ content ရေးပေးစရာမလိုတဲ့ element ကို mpty HTML Element ခေါ်ပါတယ်။

   <br> က empty elemets ဖြစ်ပါတယ်၊

   <br> က စာကြောင်းနောက်တစ်ကြောင်း ကျော် တဲ့ခါကျရင်သုံးပါတယ်။

Example

    <p> This is a <br> Paragraph with a line break;     </p>
Try it yourself

HTML is Not Case Sensitive

HTML tags တွေက ကြိုက်သလိုရေးလို့ရပါတယ် lowercase နဲ့ရေးနှိင်သလို uppercase နဲ့ရေးနှိင်ပါတယ်။
ဥပမာ    <P > က    <p> နဲ့တူတူပါဘဲ။၊
ကျနော်တို့ ကတော့ lowercase နဲ့ရေးပါလို့ recommend ပေးပါတယ်။

ကျနော်က အမြဲတမ်း lowercase သုံးပါတယ်။


HTML Tag Reference

Element tags သူတို့ ကိုယ်ပိုင် Description နဲ့ attributes ပါဝင်ကြတယ်။

Tag Description
<html> root element လို့သတ်မှတ်ပါသည်။
<body> Document's body လို့သတ်မှတ်ပါသည်။
<h1> to <h6> Headings လို့သတ်မှတ်ပါသည်။

No comments:

Post a Comment