ေရွ႕ဆံုးအခန္းမွာေတာ့ Tags ေတြနဲ႔ Element ေတြကြာျခားပံုကို ထပ္ျပီးရွင္းျပမယ္၊ ေအာက္က စာေၾကာင္းကိုၾကည့္ပါ၊
<p>what the hack is going on with my life</p>
အထက္က စာေၾကာင္းကို ၾကည့္ျပီ Element က ဘယ္အစိတ္အပိုင္းလဲ လို႔ ေမးရင္၊ စာေၾကာင္းတစ္ေၾကာင္းလံုး က Element ပါ၊ <p> အစကေန </p>
အဆံုးအထိပါ၊ စာသားေတြျဖစ္တဲ့ what the hack is going on with my life ဆိုတဲ့စာသားလဲပါတယ္၊ အဲ့ဒီ့ စာေၾကာင္းတစ္ေၾကာင္းလံုး ကိုမွ Element
တစ္ခုလို႔ေခၚတယ္၊ အေၾကာင္းအရာျဖစ္တဲ့ content ပါမယ္၊ အဲ့ဒီ့ Content ကို ၀ိုင္းထားတဲ့ အဖြင့္ အပိတ္ Tags ေတြပါမယ္၊ ဒါကိုမွ Element
တစ္ခုလို႔ေခၚတယ္၊
<p> နဲ႔ </p> တို႔က html tags ပါ၊ သူတို႔က Element အဆင့္မျဖစ္ေသးပါဘူး၊ သူတို႔နဲ႔ အတူ အေၾကာင္းအရာ content ပါလာမွ HTML Element
တစ္ခုျဖစ္လာမယ္၊
HTML Nesting
HTML မွာ Nested Element ဆိုတာရွိပါတယ္၊ Nested Element ဆိုတာ အသိုက္ဖြဲ႔ထားတဲ့ ပံုစံရွိတဲ့ Element ေပါ့၊ သူက အမ်ားၾကီးကို တစ္ခုနဲ႔ တစ္ခု
၀ိုင္းထားတယ္၊ Content ကေတာ့ ခုထဲပါမယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊
<body>
<p><b><i>I am not such a greate guy.</i></b></p>
</body>
အထက္က ဥပမာမွာ content ျဖစ္တဲ့ အၾကာင္းအရာ I am not such a great guy ဆိုတဲ့စာသားကို HTML Tags ေလးခုနဲ႔၀ိုင္းထားပါတယ္၊ <body>
ရယ္၊ <p> ဆိုတဲ့ Paragraph tags ရယ္ <b> ဆိုတဲ့ bold tags ရယ္၊ <i> ဆိုတဲ့ italic tag ရယ္တို႔ပါ၀င္ပါတယ္၊ ဒီလို အေၾကာင္းအရာတစ္ခုကို
HTML Tags ေတြအမ်ားၾကီးနဲ႔ ၀ိုင္းထားမယ္ ဆိုရင္ Nested Elment လို႔ေခၚတယ္၊ Nested Element လို႔ေခၚရင္ html tags ေတြေရာ
content ျဖစ္တဲ့စာသားေတြေကာအားလံုးပါတယ္၊ ဒီေတာ့ content တစ္ခုကို HTML tags တစ္ခုထပ္ပိုတဲ့ tags ေတြနဲ႔ ၀င္းရံျပီး မွတ္သားထားရင္
Markup လုပ္ထားရင္ အဲ့ဒီ့ အစုအေ၀း တစ္ခုလံုးကို HTML Nested Element လို႔ေခၚတယ္ဆိုတာမွတ္သားပါ၊
Element ေတြကို အသံုးျပဳထားတဲ့ HTML tags ေတြေပၚမူတည္ျပီး နာမည္ေခၚၾကတယ္၊ ဥပမာ paragraph tag နဲ႔ ၀န္းရံထားတဲ့ content တစ္ခုပါတဲ့
element ကို <p> element လို႔ေခၚမယ္၊ ေအာက္မွာၾကည့္ပါ၊
<p>ငုပ္လွ်ပ္သာကိုစီ ဆုတ္ကာေလြးေတာ့သည္ ျပီလွ်င္ေရမရွာ ေခြးသာေကၽြးေတာ့သည္ </p>
အထက္ကHTML Element ကို၊ <p> element လို႔ေခၚတယ္၊
<b>အခ်ိန္ညေန ေဆာင္းအတြင္း အေပါင္းအသင္းနဲ႔ ေရခက္လာ</b>
အထက္က HTML Element ကိုေတာ့ <b> element လို႔ေခၚပါတယ္၊
<i>မုေလးရံု ေတာအစ ေဒါနလမ္းေျမညီ ေလွ်ာက်စမ္းေရၾကည္တဲ့ ေရႊႏွင္းစီကန္ေခ်ာင္း
လြမ္းမတတ္စက၀ါ အငူက နံ႔သာျဖဴေလးေမာင့္ စံေက်ာင္း</i>
အထက္က HTML Element ကိုေတာ့ <i> element လို႔ေခၚပါတယ္၊
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
အထက္က ဥပမာ တစ္ခုလံုးကေတာ့ Html element ျဖစ္ပါတယ္၊
အထက္က ဥပမာ ေတြကိုၾကည့္ျပီး Nested Element ဆိုတာ HTML tags တစ္ခုထပ္ပိုတဲ့ tags ေတြနဲ႔ ၀န္းရံထားတဲ့ content ပါတဲ့
အစုတစ္ခုကိုေခၚတယ္ဆိုတာမွတ္ပါ၊ HTML Element တစ္ခုကိုနာမည္တပ္ေခၚမယ္ဆိုရင္ အရင္ထည့္ထားတဲ့ HTML tag ရဲ့
နာမည္ကိုအထူးျပဳျပီးေခၚရပါတယ္၊
HTML Empty Element
HTML မွာ empty tag ေတြလဲရွိတယ္၊ သူတို႔မွာ content ေတြမပါဘူး၊ <br/> နဲ႔ <hr/> တို႔က empty element ပါ၊ သူတို႔ေတြမွာ start tag အဖြင့္ ရယ္
close tag အပိတ္ရယ္ ဆိုျပီးပါတယ္၊ သူတို႔ေတြမွာ content မပါဘူး၊ self closing လို႔ေခၚတဲ့ ကို႔ဘာသာကိုယ္ျပန္ပိတ္ထားတယ္၊ အဲ့ဒီ့လို tags ေတြကိုေတာ့
HTML Empty Element လို႔ေခၚပါတယ္၊
HTML Tags ေတြက Case Sensitive အမ်ိဳးအစားေတြမဟုတ္ပါဘူး၊ သူတို႔ကို စာလံုးအၾကီးနဲ႔ ေရးလို႔ရသလို အေသးနဲ႔လဲေရးလို႔ရတယ္၊ ဒါေပမယ့္ 72coder
ကေတာ့ အေသးနဲ႔ ေရးဖို႔အၾကံျပဳပါတယ္၊
HTML Block Element
HTML မွာစာေၾကာင္းေတြကိုပိတ္ပစ္တဲ့ Elements ေတြရွိတယ္၊ သူတို႔ကိုေတာ့ Block Element လို႔ေခၚတယ္၊ သင္ <h1>what is that </1>
လို႔ေရးလိုက္ရင္ အဲ့ဒီ့ What is that က စာလံုး အၾကီးျဖစ္သြားရံုတင္မကဘူး၊ စာေၾကာင္းတစ္ေၾကာင္းလံုးကိုပါယူသြားတယ္၊ သူေဘးမွာ
ဘယ္သူ႔ကိုမွ ေနရာမယူခိုင္းေတာ့ဘူး၊ သူေနာက္က လိုက္ေရးတဲ့စာေတြလဲ တကယ္၀က္ဆိုက္မွာထြက္လာေတာ့ သူ႔ေနာက္က
မလာပဲ ေနာက္တစ္ေၾကာင္းမွာ ေပၚလာတယ္၊ ဒါကို block လုပ္ျပစ္တယ္လို႔ေခၚတယ္၊ အဲ့ဒီ့လို သက္ဆိုင္းရာစာေၾကာင္းကို block လုပ္ျပစ္တဲ့ HTML
elements ေတြကို HTML Block Element လို႔ေခၚပါတယ္၊ ဥပမာ <h1> <hr> <p> <ul> <table> တို႔ပါ၊ ေနာက္လဲရွိပါေသးတယ္၊
HTML Inline Element
HTML Inline Element ကေတာ့ Block Element နဲ႔ ေျပာင္းျပန္ပါ၊ သူတို႔ေနာက္မွာ အျခားစာေၾကာင္းေတြလိုက္လို႔ရတယ္၊ လိုက္ခြင့္ရွိတယ္၊ သူတို႔က
စာေၾကာင္းတစ္ေၾကာင္းလံုးကို Block elements ေတြလိုေမာင္ပိုင္ မစီးလိုက္ပါဘူး၊ ဥပမာ <b> <i> <code> တို႔လုိမ်ိဳး Elements ေတြပါ၊ သူတို႔က
tags ေတြျဖစ္ေပမယ့္ အခုက content ေတြပါတဲ့ အေနနဲ႔ ရွင္းျပေနလို႔ Elements ေတြလို႔သံုးလိုက္တာေနာ္၊
The HTML <div> Element
The HTML <div> element is a block level element that
can be used as a container for grouping other HTML elements.
HTML ရဲ့ <div> Element ဆိုတာက HTML Element
အုပ္စုတစ္ခုအေနနဲ႔ သံုးလိုတဲ့ HTML Tags
မ်ားနဲ႔ Elements မ်ားကို ၀ိုင္းျပီး အုပ္စုတစ္ခုအေနနဲ႔
သံုးလို႔ရေအာင္
ဖန္တီးေပးပါတယ္၊ <div> element
တစ္ခုကို <div> အဖြင့္ နဲ႔ </div> အပိတ္တို႔ကိုအသံုးျပဳျပီးေရးရပါတယ္၊
<div> Element ကို CSS
ဖိုင္ေတြအတြက္ အဓိက သံုးပါတယ္၊ သက္ဆိုင္ရာ
အမ်ိဳးအစားတူညီတဲ့ အလုပ္မ်ိဳး အလွဆင္မူမ်ိဳး style ထုတ္မူမ်ိဳးကို လုပ္ဖို႔အတြက္
<div> ကိုသံုးျပီး
အလုပ္လုပ္လိုတဲ့အစိတ္အပိုင္းကိုသတ္မွတ္ပါတယ္၊ <div>
မွာ အထူးအဓိပၸါယ္ေတာ့မရွိဘူး၊ ဒါေပမယ့္ <div> သံုးထားတဲ့ အုပ္စုက block
level
element ျဖစ္တဲ့အတြက္ ေရွ႕နဲ႔ ေနာက္မွာ အျခား Element နဲ႔ Tag တို႔မလာႏိုင္ေအာင္စာေၾကာင္းကိုျဖတ္ထားပါတယ္၊
ဒါ့ေၾကာင့္ <div> ပါတဲ့စာေၾကာင္းကို
Browser ကေတြ႔ရင္ သူ႔ရဲ့ ေရွ႕ နဲ႔ ေနာက္မွာ
စာေၾကာင္းျခားပစ္မွာျဖစ္ပါတယ္၊ CSS မွာေတာ့ <div> ကိုအသံုးျပဳျပီး HTML မွာ
Table ေတြနဲ႔
တည္ေဆာက္တဲ့ ၀က္ဆိုက္ Layout (ေနရာခ်ထားပံု) ကိုဖန္တီးပါတယ္၊
The HTML <span> Element
<span> element ကို ေတာ့ inline element အျဖစ္ HTML Document မွာ စာသားေတြသိုေလွာင္ တဲ့
ေနရာအျဖစ္သံုးပါတယ္၊ <span> element မွာ
တျခားထူးျခားတဲ့
အဓီပၸါယ္ေတာ့မရွိပါဘူး၊ CSS မွာေတာ့ <span> ကိုအသံုးျပဳျပီး
စာသားအစိတ္အပိုင္းတစ္ခုကို Attributes ေတြ သတ္မွတ္ျပီး Style
ထုတ္ဖို႔သံုးႏိုင္ပါတယ္၊
No comments:
Post a Comment