Block Level Elements
Block level element ဆိုသည္မွာ content မ်ားကို Browser တြင္ ေနာက္တစ္ေၾကာင္းသို. ဆင္း၍ ေဖာ္ျပေစေသာ tags မ်ားကို ေခၚပါတယ္။ Example: <h1>, <p>, <ul>, <table> ဥပမာႏွင့္ ရွင္းျပရလ်င္...က်ေနာ္ တို. HTML document မွာ <h1> This is heading </h1><p> This is paragraph </p> လို. ကပ္ေရးထားတယ္ဆိုပါစို.။
Browser မွာ ေအာက္ပါပံု အတိုင္ တစ္ေၾကာင္းစီပဲ ျပပါတယ္။
This is heading
This is paragraphဘာလို.လဲဆိုေတာ့ block elements မ်ား ရဲ့ အစ က အေရွ့ element ၏ အဆံု မွ ကပ္ျပီး browser မွာေဖာ္ျပေလ့မရွိပါဘူး။ ဒါေၾကာင့္ <p> tag အတြင္းမွာ ပါ၀င္ တဲ့ content က <h1> tag မွာေရးထားတဲ့ content ေဘးကပ္လ်က္ မေဖာ္ျပပဲ ေနာက္တစ္ေၾကာင္းမွ စျပီး ေဖာ္ျပျခင္းျဖစ္ပါတယ္။ HTML document တြင္ တစ္ေၾကာင္းတည္း ကပ္ေရးထားေသာ္လည္း browser တြင္ေဖာ္ျပေသာ အခါတြင္ ေနာက္တစ္ေၾကာင္းသို. ဆင္းျပီးမွသာ ေဖာ္ျပေပး ပါတယ္။
Inline Elements
Browser တြင္ ေအာက္သို. One line မဆင္းပဲ ကပ္လ်က္ ေဖာ္ျပေသာ tag မ်ားကို ေခၚပါတယ္။Example: <b>,<td>,<a>,<img>
The HTML <div> Element
<div> element သည္ block level element အမ်ိဳးအစားျဖစ္ပါတယ္။ special meaning မရွိပါဘူး။ ဥပမာ <p> သည္ paragraph, <h1> သည္ header စေသာ tag name ေတြမွာ meaning ေတြရွိပါတယ္။ <div> မွာေတာ့ meaning မရွိပါဘူး။<div> tag ကို HTML elements မ်ား၏ group ဖြဲထားတဲ့ container တစ္ခု အျဖစ္အသံုးျပဳ ၾကပါတယ္။ <div> start tag မွာ style attributes (CSS) ျဖင့္ တြဲသံုးျပီး Large blocks of content အျဖစ္လုပ္ေဆာင္ႏိုင္ပါတယ္။ ထိုျပင္ Layout ခ်ရာတြင္လည္း ေတာ္ေတာ္ေလး အသံုး၀င္ပါတယ္။
The HTML <span> Element
<span> မွာ inline element အမ်ဳိးအစားျဖစ္ပါတယ္။ <span> tag ကို text container အျဖစ္ အသံုးျပဳပါတယ္။ <span> element တြင္လည္း special meaning မရွိပါဘူး။ <span> tag ကသူကိုယ္တိုင္ browser မွာေျပာင္းလဲမွဳကို လုပ္မေပးႏိုင္ပါဘူး။ Style Sheet (CSS) သို.မပာုတ္ JavaScript တို.ႏွင့္ တြဲသံုးရပါတယ္။Example:
<!DOCTYPE html>
<html>
<body>
<p>My mother has <span style="color:blue; font-weight:bold;"> blue </span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold"> dark green </span> eyes.</p>
</body>
</html>
Browser မွာ ေအာက္ပါအတိုင္း ျမင္ေတြ.ရပါတယ္။
က်ေနာ္တို. ေရးသားထားတဲ့ <p> element ကိုေလ့လာၾကည့္ ရေအာင္...
<p>My mother has <span style="color:blue; font-weight:bold;"> blue </span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold"> dark green </span> eyes.</p>
အထက္ပါ <p> element ကို က်ေနာ္တို. ေအာက္ပါအတိုင္း <span> ေနရာမွာ <p> tag နဲ.ေျပာင္း ေရးမယ္ဆိုပါေတာ့...
<p>My mother has </p> <p style="color:blue; font-weight:bold;"> blue </p> <p> eyes and my father has </p> <p style="color:darkolivegreen;font-weight:bold"> dark green </p> <p> eyes.</p>
ယခုကဲ့သို. <span> ေနရာမွာ <p> tag နဲ.ပဲ ထည့္ေရးလိုက္ပါက browser မွာ ေဖာ္ျပတဲ့ အခါမွာ တစ္ေၾကာင္းစီျဖစ္သြားပါတယ္။ ဘာလို.လဲဆိုေတာ့ <p> tag က Block Level Element အမ်ိဳးအစားျဖစ္ေနလို.ပါ။
ဒါေၾကာင့္ style ကို ကြက္ျပီးေတာ့ပဲ ျပဳလုပ္ခ်င္လို. <span> tag ျဖင့္ ထည့္ေရးျခင္းျဖစ္ပါတယ္။ တနည္းအားျဖင့္ tag တစ္ခုတည္းတြင္ content မ်ားကို မတူညီေသာ style ျဖင့္ ေဖာ္ျပလိုေသာ ေၾကာင့္ CSS ေရးသားဖို. <span> tag ကို အသံုးျပဳျခင္း ျဖစ္ပါတယ္။
No comments:
Post a Comment