လူႀကီးမင္း

Monday, 23 June 2014

HTML ပုံမ်ား - Tag နဲ႔ Src Attribute

HTML ပုံမ်ား - <img> Tag နဲ႔ Src Attribute

HTML မွာ ပုံေတြကုိ <img> tag နဲ႔ သတ္မွတ္ၾကပါတယ္။
<img> tag သီးသန္႔ဆုိရင္ ဗလာ ၾကီးျဖစ္ျပီး Attribute ေတြ သက္သက္ပဲပါမွာပါ။ Tag အပိတ္လည္းမရွိပါဘူး။
စာမ်က္ႏွာေပၚမွာ ပုံေပၚဖုိ႔အတြက္ src attribute ကိုသုံးဖုိ႔လုိပါတယ္။ Src ဆုိတာက "source" ရဲ့အတုိေကာက္စာလုံးျဖစ္ျပီး src attribute ရဲ့တန္ဖုိးက သင္ေပၚခ်င္တဲ့ ပုံရဲ့ URL လည္းျဖစ္ပါတယ္။
ပုံအတြက္ Syntax

<img src="url" alt="some_text"/>

URL ကပုံဘယ္မွာရွိလဲ ျပပါတယ္။ "trip.jpg" လုိနာမည္ရွိတဲ့ ပုံတစ္ပုံမွာ www.aungsanmks.com ရဲ့ images folder (Directory) ထဲမွာရွိတယ္ဆုိရင္ URL က http://i.minus.com/ibidJBu0i95gl8.PNG
Browser (ဘေရာက္ဆာ) က Image Tag ျပတဲ့ပုံကုိ ေခၚသုံးပါတယ္။ တကယ္လုိ႔ စာပုိဒ္ႏွစ္ခုၾကား
ပုံထားခဲ့ရင္ Browser (ဘေရာက္ဆာ) က ပထမစာပုိဒ္ကို အေရွ႕က ေပၚေစပါမယ္။ သူ႔ေအာက္မွာမွ သင္ညႊန္းထားတဲ့ပုံ သူျပီးမွ ေနာက္ဆုံးစာပုိဒ္ကုိ ေပၚေစမွာပါ။

HTML ပုံမ်ား - Alt Attribute

လုိအပ္တဲ့ alt attribute ဟာ ပုံအတြက္ အျခားနည္းလမ္းနဲ႔ေပၚမယ့္စာျဖစ္ပါတယ္။ ပုံေပၚဖုိ႔ အဆင္မေျပတဲ့ အခါမ်ိဳးမွာျဖစ္ပါတယ္။
Alt attribute ရဲ့တန္ဖုိးကေတာ့ ဝဘ္ဆုိဒ္ ေရးသူ ထည့္တဲ့အတိုင္းပါပဲ...။

<img src="trip.jpg" alt="Blogger Aung Aung" />

alt attribute က အင္တာနက္လုိင္း ေႏွးလုိ႔ ပုံေတြမေပၚႏိုင္ေသးရင္ပဲျဖစ္ျဖစ္၊ Src Attribute မွာ အမွားတစ္ခုခုရွိလုိ႔ပဲျဖစ္ျဖစ္ ၾကည့္ရႈ႔သူဟာ Screen Reader ကုိအသုံးျပဳျပီးၾကည့္လုိ႔ပဲျဖစ္ျဖစ္ ပုံေတြကို Browser (ဘေရာက္ဆာ) က ခ်က္ခ်င္းေဖၚျပဖုိ႔မတတ္ႏုိင္တဲ့ အခ်ိန္မွာလည္း alt ေပးထားတဲ့ (သတ္မွတ္ထားတဲ့) စာကုိ အရင္ေပၚေနေစမွာျဖစ္ပါတယ္။

HTML ပုံမ်ား - ပုံအျမင့္နဲ႔ အလ်ားကုိ သတ္မွတ္ျခင္း

အျမင့္နဲ႔ အလ်ား attribute ေတြမွာ ပုံ၏ အျမင့္နဲ႔ အလ်ားအတြက္ျဖစ္ပါတယ္။
Attribute တန္ဖုိးေတြကိုေတာ့ အျမဲ Pixel နဲ႔ သတ္မွတ္ပါတယ္။

<img src="trip.jpg" alt="Blogger Aung Aung" width="334" height="227" />

မွတ္ခ်က္ — ပုံအတြက္ အျမင့္နဲ႔ အလ်ား Attribute ေတြကို ေသခ်ာ စီစဥ္သင့္ပါတယ္။ သတ္မွတ္ထားတဲ့တန္ဖုိး အတိုင္း ပုံရဲ့ အရြယ္အစားကုိ စာမ်က္ႏွာ loading ျဖစ္ေနစဥ္မွာ ေနရာခ်မွာျဖစ္ပါတယ္။ဒါေပမယ့္ ဒီ attribute ေတြမပါခဲ့ဘူးဆုိရင္ browser (ဘေရာက္ဆာ) က ပုံအရြယ္အစားကုိ သိမွာ မဟုတ္ ပါဘူး။ ပုံေပၚလာဖုိ႔ဆြဲတင္ေနခ်ိန္မွာ စာမ်က္ႏွာအေနအထားကေျပာင္းတဲ့ effect ျဖစ္လာေစပါလိမ့္မယ္။

မွတ္စုမ်ား

မွတ္ခ်က္ — တကယ္လုိ႔ HTML ဖုိင္မွာ ပုံ ၁ဝ ပုံပါခဲ့ပါက အဲဒီ့စာမ်က္ႏွာအတြက္ ဖိုင္ ၁၁ ခုကုိ ဖြင့္ရတာနဲ႔တူပါတယ္။ ပုံေတြေပၚလာဖုိ႔ဆြဲတင္ရတာလည္း အခ်ိန္ေပးရပါတယ္။ ဒါေၾကာင့္ပုံေတြကုိ ထည့္သုံးမယ္ဆုိ အရြယ္အစားကအစ ဂရုစုိက္ဖုိ႔ အၾကံျပဳခ်င္ပါတယ္။
မွတ္ခ်က္ — ဝဘ္စာမ်က္ႏွာ တက္ေနတဲ့အခ်ိန္မွာ Browser (ဘေရာက္ဆာ) ကေန Web Server ကပုံေတြကုိ ယူျပီး စာမ်က္ႏွာထဲကုိ ထည့္ေပးတာျဖစ္ပါတယ္။ ဒါေၾကာင့္ ထည့္ထားတဲ့ပုံဟာ ကုိယ္ေပးထားတဲ့ လမ္းေၾကာင္းအမွန္မွာ တကယ္ရွိရဲ့လားဆုိတာကုိ ေသခ်ာအတည္ျပဳဖုိ႔လုိပါတယ္။ လြဲခဲ့ရင္ေတာ့ ပုံမေပၚပဲ အဲဒီ႔ေနရာမွာ ကြက္လပ္တစ္ခုေပၚေနမွာျဖစ္ပါတယ္။ ဒါဟာ Browser (ဘေရာက္ဆာ) ကရွာေပးဖုိ႔ မတတ္ႏုိင္ေတာ့တဲ့ အေျဖျဖစ္ပါတယ္။

HTML ပုံ Tag မ်ား

Tag	အေၾကာင္းအရာ
<img />	ပုံထည့္ရန္
<map>	image-map ထည့္ရန္
<area />	image-map တစ္ခုထဲက ႏွိပ္လုိ႔ရတဲ့ ေနရာတစ္ခုအျဖစ္ သတ္မွတ္ပါတယ္။

လူႀကီးမင္း(ေကာ့ေသာင္း)နည္းပညာမွတ္စုမ်ား

HTML ဇယားမ်ား

ျမန္မာစာ	၅၅ မွတ္
အဂၤလိပ္စာ	၇၀ မွတ္
သခ်ာၤ	၆၀ မွတ္

HTML ဇယားမ်ား

ဇယားေတြကုိ <table> tag နဲ႔သတ္မွတ္ပါတယ္။
ဇယားေတြကုိ အလ်ားလုိက္ row ေတြ (<tr> tag ) နဲ႔ အဲဒီ့ အလ်ားလုိက္ Row ေတြကုိ ေဒါင္လုိက္ျဖတ္ထားတဲ့မ်ဥ္းေတြ (<td> tag) ေတြနဲ႔ အကြက္ Cell ေတြျဖစ္ေအာင္ဖန္တီးထားၾကပါတယ္။ td က "ဇယား မွာပါတဲ့ data" ေတြအတြက္ျဖစ္ပါတယ္။ အဲဒီ့ Data Content ေတြဟာ စာသားေတြ၊ လင့္ခ္ေတြ၊ ပုံေတြ၊ List ေတြ၊ Form ေတြ နဲ႔ ဇယားေတြလဲ ပါႏုိင္ပါတယ္။

ဇယား ဥပမာမ်ား

အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္။

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML ဇယားမ်ား နဲ႔ Border Attribute

Border attribute မေရြးခ်ယ္ခဲ့ရင္ ဇယားေတြမွာ border ပါမွာ မဟုတ္ဘူး။ တစ္ခါတစ္ေလမွာ Border မပါတာ လုိအပ္ေပမယ့္ မ်ားေသာအားျဖင့္ေတာ့ border ကုိသုံးၾကပါတယ္။
ဇယားတစ္ခုမွာ Border ပါဖုိ႔အတြက္ border attribute ကုိေရြးခ်ယ္ရပါမယ္။

HTML ဇယား ေခါင္းစဥ္မ်ား

ဇယားရဲ့ ေခါင္းစဥ္ကုိ <th> tag နဲ႔သတ္မွတ္ပါတယ္။
browser (ဘေရာက္ဆာ) ေတာ္ေတာ္မ်ားမ်ားက <th> element ကုိျပရင္ bold ပုံစံနဲ႔ Center Align ထားတတ္ပါတယ္။

အေပၚက HTML code ေတြဟာ browser (ဘေရာက္ဆာ) မွာအခုလုိေပၚပါလိမ့္မယ္။

ေခါင္းစဥ္ ၁	ေခါင္းစဥ္ ၂
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML ဇယား Tag မ်ား

Tag	အေၾကာင္းအရာ
<table>	ဇယားအတြက္ ျဖစ္ပါတယ္။
<th>	ဇယား ေခါင္းစဥ္ ျဖစ္ပါတယ္။
<tr>	ဇယား row အတြက္ ျဖစ္ပါတယ္။
<td>	ဇယား cell အျဖစ္ သတ္မွတ္ပါတယ္။
<caption>	ဇယား ရဲ့ ေခါင္းစဥ္ caption ကုိ သတ္မွတ္ပါတယ္။
<colgroup>	ဇယားရဲ့ Column ေတြကို format ျပဳလုပ္ျခင္း အတြက္အုပ္စုထားဖုိ႔ သုံးပါတယ္။
<col />	ဇယားမွာပါတဲ့ Column ေတြအတြက္ attribute တန္ဖုိးအတြက္သုံးပါတယ္။
<ad>	ဇယားမွာပါတဲ့ Group ရဲ့ Content ေတြအတြက္ ေခါင္းစဥ္ အျဖစ္သုံးပါတယ္။
<tbody>	ဇယားမွာပါတဲ့ Group ရဲ့ Body Content ျဖစ္ပါတယ္။
<tfoot>	ဇယားမွာပါတဲ့ Group ရဲ့ Footer Content ျဖစ္ပါတယ္။

လူႀကီးမင္း(ေကာ့ေသာင္း)နည္းပညာမွတ္စုမ်ား

HTML စာပုိဒ္မ်ား

စာပုိဒ္ေတြကုိ <p> tag ေတြနဲ႔ ေရးသားၾကပါတယ္။

ဥပမာ

<p>ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
<p>ဒါကအျခားစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>

မွတ္ခ်က္ — Browser (ဘေရာက္ဆာ) ေတြက empty sentence line တစ္ခုကုိ စာပုိဒ္တစ္ခုမတုိင္ခင္နဲ႔ စာပုိဒ္ဆုံးသြားတဲ့ ေနရာမွာ အလုိေလ်ာက္ထည့္ေပးပါတယ္။

End Tag ကုိမေမ့ပါနဲ႔

Browser (ဘေရာက္ဆာ) ေတြ အမ်ားစုက end tag ေမ့ခဲ့ရင္ေတာင္ အမွားမျပပဲ ပုံမွန္အလုပ္လုပ္ေပးပါတယ္။

ဥပမာ

<p>ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။
<p>ဒါကအျခားစာပုိဒ္တစ္ခုျဖစ္ပါတယ္။

အေပၚက ဥပမာကုိ browser (ဘေရာက္ဆာ) အမ်ားစုက ျပႆနာမရွိပဲ ပုံမွန္ျပသေပးပါတယ္။ ဒါေပမယ့္ ဒီလုိမ်ိဳးမလုပ္သင့္ပါဘူး။ End Tag ေမ့တာက မလုိအပ္တဲ့ အမွားေတြကုိ ဖိတ္ေခၚသလုိျဖစ္ေစပါတယ္။ မွတ္ခ်က္ — ေနာက္ပုိင္းေပၚေပါက္လာမယ့္ HTML ေတြက end tag မပါတာကို လက္ခံမွာ မဟုတ္ ပါဘူး။

HTML စာေၾကာင္း Break မ်ား

<br /> tag ကုိ စာပုိဒ္အသစ္မစပဲ စာေၾကာင္းေနာက္တစ္ေၾကာင္းဆင္းခ်င္ရင္ သုံးပါ။

ဥပမာ

<p>ဒါဟာ<br />Line Break<br />ပါတဲ့ စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>

<br />ဟာ empty HTML element ျဖစ္ျပီး end tag မပါပါဘူး။

<br> လား <br /> လား

XHTML နဲ႔ XML မွာ end tag (closing tag) မပါတဲ့ Element ေတြကုိလက္မခံပါ။
<br>Tag ဟာ browser (ဘေရာက္ဆာ) အားလုံးမွာ အဆင္ေျပေနေပမယ့္ <br /> ေရးျခင္းကသာ XHTML နဲ႔ XML အပလီေကးရွင္းေတြ အတြက္အဆင္ေျပေစမွာျဖစ္ပါတယ္။

HTML ရလာဒ္ - သိမွတ္စရာမ်ား

HTML မွာေရးထားတဲ့ Code ေတြသင္လုိခ်င္တဲ့အတုိင္း အတိအက်ေပၚဖုိ႔မလြယ္ပါဘူး။ screen အၾကီး၊ အေသးေတြက ကြဲျပားတဲ့ ရလာဒ္ေတြျဖစ္ေစႏုိင္ပါတယ္။
HTML code ေတြအၾကား Space ေတြျခားျပီး Browser (ဘေရာက္ဆာ) View မွာ Space ေတြျခားေနခ်င္လုိ႔မရပါဘူး။
Browser (ဘေရာက္ဆာ) ေတြက Browser (ဘေရာက္ဆာ) View အတြက္အပုိ space ေတြ၊ Code ေတြၾကားမွာေက်ာ္သြားခဲ့တဲ့ Line ေတြအားလုံးကုိ ဖယ္ရွားလုိက္မွာျဖစ္ပါတယ္။ Line အားလုံးကုိ ၁ လုိင္းတည္း ျဖစ္သြားေစမွာျဖစ္ျပီး Space ေတြအားလုံးကုိ Space ၁ ခုတည္း လုပ္လုိက္မွာျဖစ္ပါတယ္။
(ဒီဥပမာက တစ္ခ်ိဳ႕တဲ့ HTML Code ေတြေရးရာမွာျဖစ္တတ္တဲ့ ျပႆနာအခ်ိဳ႕ကို ရွင္းထားပါတယ္)။

ယခုစာမ်က္ႏွာမွ ဥပမာမ်ား

HTML စာပုိဒ္မ်ား
HTML စာပုိဒ္ေတြ Browser (ဘေရာက္ဆာ) View မွာဘယ္လုိေပၚတယ္ဆုိတာ ရွင္းျပထားပါတယ္။ Line break မ်ား (ေအာက္သုိ႔တစ္ေၾကာင္းဆင္းျခင္း)
HTML document ေတြမွာ သုံးတဲ့ Line Break အေၾကာင္းျဖစ္ပါတယ္။ စာေၾကာင္းျပႆနာမ်ား(Poem ျပႆနာ)
HTML Code ေတြအသုံးျပဳဖန္တီးရာမွာျဖစ္တတ္တဲ့ အမွားေတြျဖစ္ပါတယ္။

HTML Tag အညႊန္း

ယခု ဝဘ္ဆုိဒ္ မွာပါတဲ့ tag အညႊန္း ေတြမွာ HTML element ေတြ နဲ႔ ၎တုိ႔ရဲ့ Attribute ေတြ နဲ႔ပတ္သက္ျပီး အေသးစိပ္ရွင္းလင္းထားပါတယ္။

Tag	အေၾကာင္းအရာ
<p>	စာပုိဒ္အတြက္ျဖစ္ပါတယ္။
<br />	ေအာက္တစ္ေၾကာင္းဆင္းရန္ single line break အတြက္ျဖစ္ပါတယ္။

လူႀကီးမင္း(ေကာ့ေသာင္း)နည္းပညာမွတ္စုမ်ား

HTML စာသားမ်ား ေရးသားျခင္း

HTML Formatting

ဒါက စာသားအထူပုံစံ bold ျဖစ္ပါတယ္။
ဒါက စာလုံးအၾကီးပုံစံ big ျဖစ္ပါတယ္။
ဒီစာသားက အေစာင္းပုံစံ italic ျဖစ္ပါတယ္။ This is Computer Output Text.
ဒါက _subscript ပုံစံ နဲ႔ ^superscript ပုံစံ ျဖစ္ပါတယ္။

HTML Tag မ်ား (Formatting Tags)

HTML <b> နဲ႔ <i> Tag ေတြကုိ စာသားအထူ bold နဲ႔ စာသားအေစာင္း italic ပုံစံလုိခ်င္ရင္ သုံးပါတယ္။
ဒီ HTML tag ေတြကို formatting tag ေတြလုိ႔ေခၚပါတယ္။ မွတ္ခ်က္ — တစ္ခါတစ္ေလမွာ <strong> ကုိ <b> အစားနဲ႔ <em> ကုိ <i>အစားသုံးတတ္ပါတယ္။ ဒီလုိ မကြဲမျပားပဲ သုံးေနၾကေပမယ့္ ဒီ tag ေတြၾကားမွာ ျခားနားခ်က္ေတြလည္း ရွိေနပါတယ္။
<strong> ဒါမွမဟုတ္ <em> ကုိက်ေတာ့ ဝဘ္ဆုိဒ္ေရးသားသူက ဖတ္သူကုိ ဒီေနရာက အေရးၾကီးပါတယ္ဆုိတာျပခ်င္လုိ႔ သုံးတာျဖစ္ပါတယ္။

ဒီေန႔ Browser (ဘေရာက္ဆာ) ေတာ္ေတာ္မ်ားမ်ားက <strong>ကုိ <b> နဲ႔အတူတူ၊ <em >ကုိ <i> နဲ႔အတူတူ လုိပဲျမင္ေနၾကပါေသးတယ္။ ဒါေပမယ့္ တစ္ေန႔မွာ Browser ေတြက stong လုပ္ထားတဲ့ Tag ေတြကုိပဲ သီးသန္႔ Highlight ေပးခဲ့ရင္ေတာ့ strong လုပ္မထားရင္ hightlight ရေတာ့မွာမဟုတ္ပါဘူး။

<b> နဲ႔<i> ေတြက bold နဲ႔ italic သီးသန္႔အတြက္သုံးတာျဖစ္ပါတယ္။

HTML စာသား Formatting Tag မ်ား

Tag	အေၾကာင္းအရာ
<b>	စာသားကုိ အထူ Bold လုပ္ရန္
<big>	စာသားကုိ အၾကီး Big လုပ္ရန္
<em>	စာသားကုိ အထူးျပဳတဲ့ပုံစံလုပ္ရန္
<i>	စာသားကုိ အေစာင္းလုပ္ရန္
<small>	စာသားကုိ အေသးလုပ္ရန္
<strong>	စာသားကုိ အေရးပါတဲ့ပုံစံ Strong လုပ္ရန္
<sub>	စာသားကုိ ေအာက္မွာကပ္လ်က္ပါတဲ့တန္ဖုိးကိန္းပုံစံ subscript လုပ္ရန္
<sup>	စာသားကုိ ထပ္ကိန္းပုံစံ subscript လုပ္ရန္
<ins>	စာသားကုိ ထည့္ ပုံစံ လုပ္ရန္
<del>	စာသားကုိဖ်က္ထားတဲ့ပုံစံ လုပ္ရန္

HTML "Computer Output" Tag မ်ား

Tag	အေၾကာင္းအရာ
<code>	ကြန္ျပဴတာ code ပုံစံေတြလုပ္ရန္
<kbd>	keyboard စာသားပုံစံေတြလုပ္ရန္
<samp>	နမူနာ ကြန္ျပဴတာ code ပုံစံလုပ္ရန္
<tt>	လက္ႏွိပ္စက္ စာသားပုံစံလုပ္ရန္
<var>	Variable ပုံစံလုပ္ရန္
<pre>	preformatted စာသားပုံစံလုပ္ရန္

HTML Citation မ်ား၊ Quotation မ်ားနဲ႔ Definition Tag မ်ား

Tag	အေၾကာင္းအရာ
<abbr>	အတုိေကာက္စာလုံးအျဖစ္သုံးရန္
<acronym>	စကားလုံး၏ အေရွ႕စာလုံးအျဖစ္သုံးရန္
<address>	Document ပုိင္ရွင္ ဒါမွ မဟုတ္ ေရးသားသူ ကုိဆက္သြယ္ရန္လိပ္စာ အျဖစ္သုံးရန္
<bdo>	စာသား direction အျဖစ္သုံးရန္
<blockquote>	ရွင္းလင္းခ်က္စာပုိဒ္အရွည္အျဖစ္သုံးရန္
<q>	ရွင္းလင္းခ်က္စာပုိဒ္အတုိအျဖစ္သုံးရန္
<cite>	အထူးမွတ္ခ်က္တစ္ခုအျဖစ္သုံးရန္
<dfn>	အဓိပၸယ္ရွင္းလင္းခ်က္တစ္ခုအျဖစ္သုံးရန္

လူႀကီးမင္း(ေကာ့ေသာင္း)နည္းပညာမွတ္စုမ်ား

HTML Block မ်ား

HTML <div> နဲ႔ <span>

HTML element ေတြကုိ <div> နဲ႔ <span> ေတြနဲ႔ အုပ္စုဖြဲ႔ထားႏုိင္ပါတယ္။

HTML Block Element မ်ား

HTML element အမ်ားစုကုိ block level element ေတြ ဒါမွမဟုတ္ inline element ေတြအျဖစ္သတ္မွတ္ၾကပါတယ္။
Block level element ေတြကုိမွာ ပုံမွန္အားျဖင့္ browser (ဘေရာက္ဆာ) မွာျပတဲ့အခါ Line အသစ္တစ္ခုနဲ႔ အစျပဳ (အဆုံးသတ္) ပါတယ္။
ဥပမာမ်ား <h1>, <p>, <ul>, <table>

HTML Inline Element မ်ား

Inline element ေတြကေတာ့ Line အသစ္ မဆင္းပဲ ျပသပါတယ္။
ဥပမာမ်ား <b>, <td>, <a>, <img>

HTML <div> Element

HTML <div> element မွာ အုပ္စုဖြဲ႔ျခင္းအတြက္ ဒါမွမဟုတ္ HTML Element အတြက္ Container ပါတဲ့ block level element ျဖစ္ပါတယ္။
<div> element မွာထူးေထြတဲ့ အဓိပၸယ္မရွိပါ။ block level element တစ္ခုျဖစ္ျပီး browser (ဘေရာက္ဆာ) မွာေပၚတဲ့အခါ ၎မတုိင္ခင္ခဲ့ ျပီးေနာက္မွာ line break တစ္ခုထားေပးမွာျဖစ္ပါတယ္။
CSS နဲ႔တြဲသုံးတဲ့အခါ <div> element ကုိ Content အမ်ားအျပားပါဝင္တဲ့ large Block ေတြကုိ style attribute ေတြ setting ခ်ဖုိ႔အတြက္သုံးႏိုင္ပါတယ္။
အျခားအသုံးမ်ားတဲ့ <div> element ပုံစံမွာ document အတြက္ layout ခ်ဖုိ႔ျဖစ္ပါတယ္။ ၎ကနည္းလမ္းအေဟာင္းျဖစ္တဲ့ ဇယားေတြနဲ႔ Layout ခ်ျခင္းကုိ အစားထုိးလုိက္ပါတယ္။ ဇယားေတြအသုံးျပဳျခင္းမွာ <table> element ရဲ့ နည္းလမ္းအမွန္ မဟုတ္ ပါဘူး။ <table> element ရဲ့ ရည္ရြယ္ခ်က္က tabular data ေတြအတြက္ျဖစ္ပါတယ္။

HTML <span> Element

HTML မွာ <span> element မွာ inline element ျဖစ္ျပီး စာသား အတြက္ Container အျဖစ္အသုံးျပဳႏုိင္ပါတယ္။
<span> element မွာထူးေထြတဲ့ အဓိပၸယ္မရွိ။
CSS နဲ႔တြဲသုံးတဲ့အခါ <span> element ကုိ style attribute ေတြကုိ စာသားရ့ဲ အစိပ္အပုိင္းအျဖစ္ Setup လုပ္ဖို႔ သုံးႏုိင္ပါတယ္။

လူႀကီးမင္း(ေကာ့ေသာင္း)နည္းပညာမွတ္စုမ်ား

HTML Grouping Tag မ်ား

Tag	အေၾကာင္းအရာ
<div>	Div ျဖစ္ပါတယ္။
<span>	Span ျဖစ္ပါတယ္။

HTML Style မ်ား - CSS

HTML element ေတြကုိ စတုိင္အမ်ိဳးမ်ိဳးလုပ္ဖုိ႔ CSS (Cascading Style Sheet မ်ား) ကုိသုံးပါတယ္။

စာလုံးပုံစံနဲ႔ အေရာင္ေတြကုိ ၾကည့္ပါ။

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

HTML မွာ CSS သုံးျပီး Style မ်ားျပဳလုပ္ျခင္း

HTML Element ေတြကုိ ပုိျပီး အဆင္ေျပေျပနဲ႔ Style လုပ္ႏိုင္ဖုိ႔အတြက္ CSS ကုိ HTML 4 နဲ႔အတူ စတင္မိတ္ဆက္ခဲ့ပါတယ္။
ေအာက္မွာျပထားတဲ့ နည္းလမ္းေတြအရ CSS ကုိ HTML Document ထဲကုိ ထည့္ႏိုင္ပါတယ္။

Inline - HTML element ေတြထဲမွာပဲ styleattribute ကုိအသုံးျပဳျခင္း။
Internal - <head> section ထဲမွာ <style>element ကုိသုံးျပီးေရးျခင္း။
External - ျပင္ပ CSSဖိုင္ တစ္ခုေရးျပီးခ်ိတ္ဆက္ျခင္း။

ျပင္ပဖုိင္တစ္ခုစီသီးျခားေရးျပီး HTML ထဲကုိ ထည့္သုံးဖုိ႔ အၾကံျပဳခ်င္ပါတယ္။
ဒီ HTML သင္ခန္းစာ မွာေတာ့ style attribute ကုိသုံးျပီး CSS ကုိမိတ္ဆက္ေပးလုိက္ပါတယ္။ ဥပမာေတြက ရုိးရွင္းပါတယ္။ Code ေတြကလည္း ကုိယ္တုိင္ေလ့က်င့္ဖုိ႔လြယ္ပါတယ္။

Inline Style မ်ား

Inline style ကုိ ဝဘ္စာမ်က္ႏွာ တစ္ခုရဲ့ လုိခ်င္တဲ့ အပုိင္းတစ္ခုတည္းအတြက္ပဲသီးျခား style လုပ္ခ်င္ရင္သုံးသင့္ပါတယ္။
Inline style ကုိသုံးဖုိ႔အတြက္ ကုိ Style လုပ္ခ်င္တဲ့ Tag မွာ style attribute ကိုသုံးရမွာျဖစ္ပါတယ္။
Style attribute မွာ CSS တန္ဖုိးတစ္ခုခုပါဝင္ႏုိင္ပါတယ္။ ေအာက္က ဥပမာမွာ စာသားအေရာင္န႔ဲ စာပုိဒ္ရဲ့ ဘယ္ဖက္ Margin ကုိေျပာင္းဖုိ႔အတြက္ CSS ကိုဘယ္လုိသုံးထားတယ္ဆုိတာ ၾကည့္ႏုိင္ပါတယ္။

<p style=“color:blue;margin-left:20px;">ဒါကစာပုိဒ္တစ္ခုျဖစ္ပါတယ္</p>

HTML Style ဥပမာ - ေနာက္ခံအေရာင္

ေနာက္ခံအေရာင္တန္ဖုိးက Element တစ္ခုရဲ့ ေနာက္ခံအေရာင္ကုိ သတ္မွတ္ပါတယ္။

ဥပမာ

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">ဒါကေခါင္းစဥ္တစ္ခုျဖစ္ပါတယ္။</h2>
<p style="background-color:green;">ဒါက စာပုိဒ္တစ္ခုျဖစ္ပါတယ္</p>
</body>
</html>

ဒီေနာက္ခံအေရာင္တန္ဖုိးက အရင္တုန္းကသုံးခဲ့တဲ့ပုံစံ အတုိင္းျပမွာျဖစ္ပါတယ္။

HTML Style ဥပမာ - Font အမ်ိဳးအစား၊ အေရာင္နဲ႔ အရြယ္အစား

Font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစားတန္ဖုိးေတြက Element တစ္ခုမွာပါတဲ့ စာသားရဲ့ font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစား ေတြကိုသတ္မွတ္ပါတယ္။

ဥပမာ

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">ေခါင္းစဥ္တစ္ခု</h1>
<p style="font-family:arial;color:red;font-size:20px;">စာပုိဒ္တစ္ခု။</p>
</body>
</html>

ဒီ font အမ်ဳိးအစား၊ အေရာင္နဲ႔ အရြယ္အစားတန္ဖုိးက သိပ္မသုံးၾကေတာ့တဲ <font> tag အေဟာင္း (အရင္တုန္းကသုံးခဲ့တဲ့ပုံစံ) အတုိင္းျပမွာျဖစ္ပါတယ္။

HTML Style ဥပမာ- စာသား Alignment

text-align ရဲ့တန္ဖုိးဟာ Element တစ္ခုရဲ့ စာသားအတြက္ ေရျပင္ညီ alignment ကုိအထူးျပဳပါတယ္။

ဥပမာ

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">အလည္ပို႔ထားတဲ့ ေခါင္းစဥ္</h1>
<p>စာပုိဒ္တစ္ခုျဖစ္ပါတယ္။</p>
</body>
</html>

text-align တန္ဖုိးက သိပ္မသုံးၾကေတာ့တဲ့ Tag အေဟာင္း <center> tag ပုံစံ ျဖစ္ပါတယ္။

Internal Style Sheet ဆိုသည္မွာ?

Internal style sheet ကုိလုိခ်င္တဲ့ ဝဘ္စာမ်က္ႏွာ တစ္ခုတည္းကုိပဲ သီးျခား style လုပ္ခ်င္ရင္သုံးသင့္ပါတယ္။ သူ႔ကုိ <head> Section ထဲမွာ <style> Tag ကုိသုံးျပီးေရးရမွာျဖစ္ပါတယ္။

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Style Sheet ဆိုသည္မွာ ?

external style sheet မွာ ဝဘ္စာမ်က္ႏွာ အမ်ားအျပားအတြက္ တူညီတဲ့ Style လုပ္ႏုိင္ဖုိ႔သုံးရတာျဖစ္ပါတယ္။ external style sheet တစ္ခုနဲ႔ ဝဘ္ဆုိဒ္ တစ္ခုလုံးရဲ့ Style ကုိစာမ်က္ႏွာတစ္ခုတည္းကုိ ျပင္ရုံနဲ႔ ေျပာင္းႏုိင္မွာျဖစ္ပါတယ္။ ဒါေပမယ့္ ဝဘ္စာမ်က္ႏွာ တုိင္းကုိေတာ့ <link> Tag သုံးျပီး ခ်ိတ္ထားရမွာျဖစ္ပါတယ္။ <link> Tag ကုိ <head> section ထဲမွာထားရမွာျဖစ္ပါတယ္။

HTML Style Tag မ်ား

Tag	အေၾကာင္းအရာ
<style>	Document တစ္ခုအတြက္ Style လုပ္ဖုိ႔သုံးပါတယ္။
<link />	Document တစ္ခုနဲ႔ ျပင္ပ CSS ဖုိင္တစ္ခုခ်ိတ္ဖုိ႔ သုံးပါတယ္။

Deprecated Tag နဲ႔ Attribute မ်ား

HTML 4 မွာ tag အမ်ားအျပားနဲ႔ attribute ေတြမ်ားစြာကုိ Style လုပ္ဖို႔သုံးၾကပါတယ္။ အဲဒါေတြကို New HTML က လက္မခံပါ ဘူး။
ဒါေၾကာင့္ <font>, <center> နဲ႔ <strike> Element ေတြနဲ႔ အေရာင္ နဲ႔ bgcolor Attribute ေတြကုိမသုံးပါန႔ဲ။

လူႀကီးမင္း(ေကာ့ေသာင္း)နည္းပညာမွတ္စုမ်ား

HTML ေရးသားေသာ Tool မ်ား

Note pad သုိ႔မဟုတ္ Text Editor ကုိသုံးျပီး ေရးသားျခင္း

HTML ကုိ professional HTML editor ေတြသုံးျပီး ဖန္တီးႏုိင္ပါတယ္။

Adobe Dreamweaver
မုိက္ခရုိေဆာ့ဖ္ Expression Web
CoffeeCup HTML Editor

Windows ကြန္ျပဴတာေတြမွာပါတဲ့ Word, Excel ေတြသုံးျပီးလည္း ေရးလုိ႔ရပါတယ္။

ဒါေပမယ့္ HTML အေျခခံကုိကုိေလ့လာဖုိ႔အတြက္ PC မွာပါတဲ့ Note Pad ဒါမွမဟုတ္ Mac မွာပါတဲ့ Text Editor ကုိသုံးျပီးေလ့လာ ေရးသားၾကဖုိ႔တုိက္တြန္းခ်င္ပါတယ္။ ရုိးစင္းတဲ့ editor — Note Pad ကုိသုံးျပီးေလ့လာျခင္းက နည္းလမ္းေကာင္းတစ္ခုလုိ႔ယုံၾကည္ပါတယ္။

ကုိယ္တုိင္ ဝဘ္စာမ်က္ႏွာ တစ္ခုကုိ Note Pad အသုံးျပဳျပီး စတင္ဖန္တီးဖို႔အတြက္ ေအာက္ကအခ်က္ (၄) ခ်က္ကုိ အခုပဲစတင္လုိက္ပါ။

အဆင့္ ၁ — Note pad နဲ႔စမယ္။

Note pad ကုိဖြင့္ဖုိ႔အတြက္ —
Start Menu ကိုႏွိပ္ပါ။
    All Programme ကိုႏွိပ္ပါ။
        Accessorie ကုိသြားပါ။
           Note Pad ဆုိတာကုိေတြ႔ပါလိမ့္မယ္။ ႏွိပ္ျပီး ဖြင့္လုိက္ပါ။

search box ကေနလည္း notepad ဆိုျပီးေခၚနိဳင္ပါတယ္

အဆင့္ ၂ — Note pad အသုံးျပဳျပီး HTML ေရးသားျခင္း

ေအာက္က HTML code ေတြကုိ Note pad ထဲမွာရုိက္ထည့္ပါ။ မွန္ေအာင္ၾကိဳးစားျပီးရုိက္ပါ။ မွားခါမွ ေခၽြးျပန္ေအာင္ အမွားရွာရတာထက္စာရင္ တစ္ခါတည္း ေသခ်ာရုိက္တာက ပုိေကာင္းပါတယ္။

ဒီလိုမ်ိဳးရုိက္ရမွာျဖစ္ပါတယ္။

အဆင့္ ၃ — သင္ေရးထားတဲ့ HTML ကုိသိမ္းပါ။

Note pad ရဲ့ ဖိုင္ menu က Save as...ကုိေရြးပါ။
HTML ဖိုင္ တစ္ခုကုိ သိမ္းတဲ့ေနရာမွာ .htm ဒါမွ မဟုတ္ .html ဖိုင္ extension ေတြသုံးျပီး သိမ္းႏုိင္ပါတယ္။ အဲဒီ့ႏွစ္္ခုက ဘာမွမကြာပါဘူး။ သင့္အၾကိဳက္အေပၚမွာပဲမႈတည္ပါတယ္။

သင္မွတ္မိလြယ္တဲ့ နာမည္တစ္ခုေပးပါ။ ဖိုင္ Name ေနာက္မွာေတာ့ .html ဒါမွ မဟုတ္ .hml ပါရပါမယ္။

အဆင့္ ၄ — သုံးေနက် Browser (ဘေရာက္ဆာ) မွာ ဖြင့္ၾကည့္ပါ။

သင္သုံးေနက် Web browser (ဘေရာက္ဆာ) တစ္ခုကုိဖြင့္လုိက္ပါ။ ျပီးရင္ သူ႔မွာပါတဲ့ ဖိုင္ Menu ကတဆင့္ Open menu ကုိဖြင့္ျပီး သင္ေရးထားတဲ့ HTML ဖိုင္ ကုိ Double Click ႏွိပ္ျပီးဖြင့္ပါ။
ေအာက္မွာျပထားတဲ့အတုိင္းေပၚပါလိမ့္မယ္။

ဒီစမ္းသပ္ေလ့က်င့္မႈက HTML မွာ ေလ့က်င့္သင့္တဲ့ သင္ခန္းစာေပါင္းမ်ားစြာရဲ့ အစျဖစ္ပါတယ္။ အေပၚမွာ ရွင္းျပထားတဲ့အတုိင္း လုိက္လုပ္ရင္ အဆင္ေျပမယ္ထင္ပါတယ္။

http://www.soemoeaung.com

လူႀကီးမင္း(ေကာ့ေသာင္း)နည္းပညာမွတ္စုမ်ား