Tag ဆုိတာက အမွတ္အသားျပဳ သေကၤတစာသားမ်ားပင္ ျဖစ္ပါတယ္။ သူတုိ႔ကုိ
ကြင္းခတ္ၿပီးသုံးတဲ့အခါ အစုံလုိက္ အသုံးျပဳရပါတယ္။ ေရွ႕က Tag (ဥပမာ -
<b>)သည္ အဖြင့္ျဖစ္ၿပီး၊ ေနာက္က slash (/) ပါေသာ Tag (ဥပမာ - </b>) သည္
အပိတ္ျဖစ္ပါတယ္။ သူတုိ႔ႏွစ္အလယ္က Plain text စာသားျဖစ္ပါတယ္။
ဥပမာ - ေအာက္ေဖာ္ျပပါ စာသားထဲက "my friend" ဆုိတဲ့ စကားလုံးကုိ စာလုံးအထူ
(bold) ျဖင့္ေပၚေစခ်င္တယ္ဆုိပါစုိ႔။ ဒါဆုိရင္ Tag ကုိ ေအာက္ပါအတုိင္း
ထည့္ေပးရပါတယ္။
(b=bold)
The answer <b>my friend</b> is blowing in the wind
လက္ေတြ႔စမ္းသပ္ခ်င္ရင္ေတာ့ အထက္က စာသားေတြကို Notpad program
မွာထည့္ၿပီး၊ index.html အမည္ႏွင့္သိမ္းလုိက္ပါ။ ၿပီးရင္ ခုန Save ထားတဲ့
ဖုိင္ေလးေပၚ Right Click ႏွိပ္ၿပီး Open with ကေန Internet Explorer
နဲ႔ ဖြင့္လုိက္ပါ။ "my friend" ဆုိတဲ့ စာသားေလး ထူ (Bold) သြားတာကုိ
ေတြ႔ျမင္ရပါမယ္။ (my friend) ဒီလုိေလးေပါ့။
ဒါဆုိ Browser program သည္ <b> ဆုိတဲ့ tag ကုိေတြ႔တာႏွင့္ သူ႔ေနာက္က
စာလုံးေတြကုိ စာလုံးအထူျဖင့္ ေဖာ္ျပရန္ ညႊန္ၾကားထားတယ္ဆုိတာ သိပါတယ္။
ဤတြင္မွ <b>ႏွင့္ </b> ၾကားထဲမွာရွိေသာ စာသားမ်ားကုိ စာလုံးအထူျဖင့္
ေဖာ္ျပပါလိမ့္မယ္။ ဒါ့အျပင္ Tag ေတြကုိ တစ္ခုႏွင့္တစ္ခု
ေရာေႏွာလိမ္ယွက္ၿပီးေတာ့လည္း အသုံးျပဳႏုိင္ပါတယ္။
<i> The answer <b> my friend </b> </i> is blowing in the wind
အဓိပၸါယ္က The answer my friend ဆုိတဲ့ စကားလုံး ေလးလုံးတုိ႔အား
စာလုံးအေစာင္းျဖင့္ ေဖာ္ျပရန္ <i> tag ျဖင့္ ညႊန္ၾကားပါတယ္။ ဒါ့အျပင္ my
friend ဆုိတဲ့ စာလုံးတစ္လုံးတည္းကုိ စာလုံးအထူျဖင့္ ေဖာ္ျပရန္ ထပ္ဆင့္
ညႊန္ၾကားပါတယ္။ သည့္အတြက္ Browser program မွာ ဖြင့္ၾကည့္ရင္
ေအာက္ပါအတုိင္း ျမင္ေတြ႔ရပါမယ္။
The answer my friend is blowing in the wind
စာလုံးမ်ားအား ေအာက္မွ မ်ဥ္းသားရန္အတြက္ ေအာက္ပါ Tag ကုိ အသုံးျပဳပါတယ္။
Underline <u> </u>
ဥပမာ - I am <u> very happy</u> today. (very happy) ဒီလုိေလးေပါ့။
စာလုံးမ်ားအား အလယ္မွ ကန္႔လန္႔ျဖတ္ မ်ဥ္းဆြဲရန္အတြက္ ေအာက္ပါ Tag ကုိ
အသုံးျပဳပါတယ္။
Strike through <s> </s>
ဥပမာ - Do you <s>remember me? </s> (remember) ဒီလုိေလးေပါ့။
အျခားစာလုံးတုိ႔ႏွင့္ ယွဥ္လွ်င္ လုိင္းေအာက္က်လုိေသာ စာလုံးတုိ႔အတြက္
ေအာက္ပါ Tag ကုိ အသုံးျပဳပါတယ္။
Subscript <sub> </sub>
ဥပမာ - Have <sub> a good </sub> day! (Have a good day!)
အျခားစာလုံးတုိ႔ႏွင့္ ယွဥ္လွ်င္ လုိင္းအေပၚေရာက္လုိေသာ စာလုံးတုိ႔အတြက္
ေအာက္ပါ Tag ကုိ အသုံးျပဳပါတယ္။
Super script <sup> </sup>
ဥပမာ - May you be <sup> happy! </sup> (May you be happy!)
စာလုံးေတြကုိ Page ၏အလယ္မွာ ျပလုိတဲ့အခါ ေအာက္ပါ Tag ကုိ အသုံးျပဳပါတယ္။
Center <center> </center>
ဥပမာ - <center>Are you coming or not? </center>
Are you coming or not?
စာပုိဒ္ခြဲလုိတဲ့အခါ ေအာက္ပါ Tag ကုိ အသုံးျပဳပါတယ္။
Paragraph <p> </p>
ဥပမာ - <p> Happy birthday to you! </p> I believe that you are very
happy today. </p>
Happy birthday to you!
I believe that you are very happy today.
PageMaker တို႔၊ Word တုိ႔ထဲမွာ စာစီတဲ့အခါ တစ္လိုင္းမျပည့္ခင္
ေအာက္တစ္လုိင္း ဆင္းဖုိ႔ရန္အတြက္ျဖစ္ေစ၊ စာေၾကာင္းေတြၾကားမွာ
ျခားသြားေအာင္အတြက္ျဖစ္ေစ Enter ကုိ ႏွိပ္ၿပီး ေအာက္တစ္လုိင္းဆင္းျခင္း၊
လုိင္းျခားျခင္းေတြကုိ လုပ္ေဆာင္ရပါတယ္။ အခု ဒီ HTML မွာေတာ့
ေအာက္တစ္လုိင္းဆင္းဖုိ႔ရန္အတြက္ <br> </br> ကုိအသုံးျပဳပါတယ္။ Enter
တစ္ခ်က္ေခါက္ရင္ <br> tag တစ္ခု၊ Enter ႏွစ္ခ်က္ေခါက္တာဆုိရင္ <br> tag
ႏွစ္ခု တြဲထည့္ေပးရပါတယ္။ ေအာက္မွာ ေလ့လာၾကည့္ပါ -----
Line break <br> </br>
ဥပမာ - Happy <br> birthday</br> to you!
Happy
Birthday
To you!
<br>I am a student.</br> <br> My name is Thallar.</br>
I am a student.
My name is Thalla.
Heading <h?> </h?> ( ? သည္ 1 မွ 6 အတြင္း ကိန္းဂဏန္းမ်ားျဖစ္ပါတယ္) ကုိ
ဆက္လက္ေလ့လာၾကည့္ရေအာင္ပါ။
HTML တြင္ <h1> မွ <h6> အထိ header style ေျခာက္မ်ိဳး အဆင့္ဆင့္ရွိပါတယ္။
<h1> သည္ <h2> ထက္ႀကီးသလုိ ပုိမုိလည္းထင္ရွားပါတယ္။
<h1> This is Heading 1</h>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
ပုံမ်ားထည့္သြင္းျခင္း
Webpage ထဲမွာ ပုံေတြထည့္လုိ႔ရပါတယ္။ ဒါေပမယ့္ ထည့္သြင္းတဲ့ပုံေတြကုိ
HTML code တုိ႔ၾကားမွာ ျမင္ရမည္ မဟုတ္ပါ။ HTML code တုိ႔ထဲမွာ ပုံရွိရာ
လမ္းေၾကာင္းႏွင့္ ပုံအမည္ကုိ ညႊန္ျပေပးရန္ ျဖစ္ပါတယ္။ ပုံရွိရာ
လမ္းေၾကာင္းကုိ ညႊန္ျပႏုိင္ရန္ကေတာ့ Image Upload site
(http://s1085.photobucket.com/ http://www.4shared.com/ ) ေတြမွာ Sign
up လုပ္ၿပီး မိမိထည့္လုိတဲ့ ပုံေတြကုိ ႀကိဳတင္ Upload လုပ္ထားရပါတယ္။
ယင္းဆုိက္မွ ထုတ္လုပ္ေပးလုိက္ေသာ Image code ကုိ ယူေဆာင္
ထည့္သြင္းေပးရမွာ ျဖစ္ပါတယ္။
ဥပမာ - <img src= http://i27.tinypic.com/anyc0p.gif />
<html>
<head>
<title> My Home Page</title>
</head>
<img src= http://i27.tinypic.com/anyc0p.gif />
<body>
<h1<This is body</h1>
<p>
<Font face= "arial "color= "red" size=5>
You are welcome! <br>
Hyperlinks မ်ားထည့္သြင္းျခင္း
ပုံမွန္ default အားျဖင့္ browser program ထဲမွာ Hyperlink တုိ႔ကို
လုိင္းသားထားေသာ အျပာေရာင္ စာသားမ်ားအျဖစ္ ျမင္ရမွာ ျဖစ္ပါတယ္။ သူ႔အေပၚ
Cursor တင္လုိက္ရင္ ျမွားပုံကေန လက္ပုံ ေျပာင္းသြားပါလိမ့္မယ္။ Click
ႏွိပ္လုိက္ရင္ Link လုပ္ထားေသာ Page ကို ျမင္ရပါလိမ့္မယ္။
ဥပမာ - <a href=http://www.google.com>Click Here</a>
သေဘာက Click Here သည္ Hyperlink ျဖစ္ၿပီး သူ႔အေပၚမွာ Click ႏွိပ္လုိက္ရင္
www.google.com အား ေတြ႔ရပါမယ္။ အဲ့ဒီ Link ကုိ သီးျခား browser window
တစ္ခုျဖင့္ ပြင့္ေစခ်င္ရင္ tag တြင္ target ကုိ ထည့္ေပးႏုိင္ပါတယ္။
<a href="http://www.google.com" target="-blank">Click Here</a>
List Item <Li>
HTML တြင္ List လုပ္ပုံ ႏွစ္မ်ိဳးရွိပါတယ္။ Order List <ol> ႏွင့္
Unorder List <ul> တုိ႔ ျဖစ္ပါတယ္။ နံပါတ္စဥ္ေပၚလုိလွ်င္ <OL>
ကုိသုံးရၿပီး bullet တုိ႔ ေပၚလုိလွ်င္ <UL> ကုိ သုံးရပါတယ္။
<ol>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>What you get the idea.</li>
</ol>
1. First item.
2. Second item.
3. Third item.
4. What you get the idea.
<ul>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>What you get the idea.</li>
</ul>
*First item.
*Second item.
*Third item.
*What you get the idea.
Division <DIV>
DIV သည္ formatting အတြက္ အသုံးမ်ားေသာ tag တစ္ခု ျဖစ္ပါတယ္။
အလုပ္လုပ္ပုံမွာ body tag ႏွင့္ ဆင္တူပါတယ္။ ထူးျခားခ်က္က webpage body
ကုိ division မ်ား စိတ္ပုိင္းၿပီး တစ္ပုိင္းခ်ငး္စီအတြက္ font color,
size, align ႏွင့္ background color အစရွိသည္တုိ႔ကုိ သီးျခားစီျဖစ္ေအာင္
သတ္မွတ္ေပးႏုိင္ျခင္း ျဖစ္ပါတယ္။ id, width, height, title, style
အစရွိေသာ attribute မ်ားျဖင့္ တြဲဖက္ အသုံးျပဳရပါတယ္။
<div id="menu"align="right">
<a href="">Home</a>
<a href="">Contact</a>
<a href="">About</a>
<a href="">Links</a>
</div>
<div id="content"align="left">
<h5>Content Articles</h5>
<p>This paragraph would be your content paragraph with all of your
readable material.</p>
</div>
ယခုေဖာ္ျပခဲ့တာေတြက အသုံးမ်ားေသာ အေျခခံ HTML tag မ်ား ျဖစ္ပါတယ္။
ဒါေတြကုိ နားလည္ထားမွသာ webpage တုိ႔၏ အေျခခံသေဘာတရားကုိ
သေဘာေပါက္ႏုိင္ၾကမွာ ျဖစ္ပါတယ္။
အျပည့္အစုံေလ့လာခ်င္တယ္ဆုိရင္ေတာ့ ဦးမ်ိဳးသူရ ေရးတဲ့ (Building Free
Websites) စာအုပ္ကုိသာ ဝယ္ယူဖတ္ရႈၾကပါေတာ့လုိ႔ အႀကံျပဳစကား ေျပာလုိပါတယ္။
No comments:
Post a Comment