ေရးသားသူ : Christ Leo Wednesday, June 15, 2016


HTML Element

ေရွ႕ဆံုးအခန္းမွာေတာ့ 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

ထုတ္ဖို႔သံုးႏိုင္ပါတယ္၊

အျခားPostမ်ားၾကည့္လိုပါကအေပၚက Menu မွာၾကည့္လို႔ရပါတယ္ေနာ္

****အဆင္မေျပမႈ႔တစ္စံုတစ္ရာရွိပါက****
 
Facebook Account ျဖစ္တဲ႔

ေအာက္ပါပံုေလးကိုႏွိပ္ျပီးေ၀ဖန္အၾကံေပးႏိုင္ပါတယ္
https://www.facebook.com/yaungpyan.tec


****ကၽြန္ေတာ္႔ရဲ႕ ေရာင္ျပန္ေလး(နည္းပညာ)Page ကို Like ႏွိပ္ထားပါဦး****

https://www.facebook.com/yaungpyanlaytechnology/

@@@@စာေပ၀ါသနာပါရင္ကၽြန္ေတာ့္ရဲ ေရာင္ျပန္ေလး-စာအုပ္စင္ Page ကို Like ႏွိပ္ထားပါဦး@@@@

https://www.facebook.com/yaungpyanebook/
$$$$အားေပးမႈ႔ကိုအထူးပင္ေက်းဇူးတင္ရွိပါသည္$$$$

ကိုယ္စိတ္ႏွစ္ျဖာက်န္းမာ၊ ခ်မ္းသာၾကပါေစ

Leave a Reply

အဆင္မေျပတာမ်ား ၊ လိုခ်င္တာမ်ားရွိရင္မွာခဲ႔ပါ။

ကၽြန္ေတာ္႔ရဲ႔ေရးေဖာ္ေရးဖက္မ်ား

Yaung Pyan Lay (ေရာင္ျပန္ေလး နည္းပညာ)
ဂ်ဴးကေလး(ေရာင္ျပန္ေလး စာေပ)
Mr Yaung Pyan (Golden Myanmar)
ကိုျမတ္ ( MICT Garden)
ေငြဇင္မိုး (ေငြဇင္မိုး မံုရြာ)
Aung Ko Latt (Aung Ko Latt စြယ္စံု)
Maung Pauk (ေမာင္ေပါက္နည္းပညာ)
CKKH(နည္းပညာ)

Subscribe to Posts | Subscribe to Comments

@Copy Right 2016 / Designe By ေရာင္ျပန္ေလး(နည္းပညာ) / Power By Yaung Pyan Lay

- Copyright © ​ေရာင္​ျပန္​​ေလး - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -