Myanmar Kyat Converter
HTML ဆုိတာကေတာ့ Hyper Text
Markup Language ရဲ့ အတုိေကာက္ျဖစ္ပါတယ္။ ၀က္ဘ္ဆုိက္ဒ္ ေရးခ်င္သူမ်ားအတြက္
မျဖစ္မေန တတ္ထားရမယ့္ အေျခခံ ဘာသာရပ္တစ္ခုပါ။ Hyper Text ဆုိတာကေတာ့
ဆုိက္ဒ္တစ္ခုကေန တစ္ခုကို၊ စာမ်က္ႏွာတစ္ခုကေန တစ္ခုကို ခ်ိတ္ဆက္ႏုိင္ေသာ
တစ္နည္းအားျဖင့္ လင့္ခ္ ( link ) လုပ္ႏုိင္ေသာ စာသား (text) ပဲ ျဖစ္ပါတယ္..
အရုိးရွင္းဆံုး ေျပာရရင္ ကၽြန္ေတာ္တုိ႔ Google မွာ ျဖစ္ျဖစ္၊ Yahoo မွာ
ျဖစ္ျဖစ္ တစ္ခုခုကို Search လုပ္တဲ့အခါ က်လာတဲ့ result ေတြထဲက
ကၽြန္ေတာ္တုိ႔ ကလစ္ေခါက္တဲ့ စာသားေတြ ျဖစ္ပါတယ္။ Markup Language ကေတာ့
ပံုေတြ၊ စာေတြကို ထည့္ထားတဲ့ (embedded လုပ္ထားတဲ့) language ျဖစ္ပါတယ္။
ဒါေႀကာင့္
• Hyper Text +Markup Language == HTML ျဖစ္ပါတယ္။
ပထမဆံုး HTML ကို ေလ့လာမယ္ဆုိရင္ opening tag ( < > ), နဲ႔ closing tag ( </ > ) တို႔ကို သိရပါမယ္.. Tag တုိင္းမွာ opening tag နဲ႔ closing tag ရွိပါတယ္။ Tag ေတြ ႀကားမွာ contact ေတြ ထည့္ရပါမယ္။ HTML ကို ေရးျပီး ဖုိင္ေတြကို Save လုပ္ရာမွာ စာလံုးေတြကုိ အဂၤလိပ္လိုနဲ႔ စာလံုးအေသးေတြ (small letters) ေတြပဲ ေပးသင့္ပါတယ္။ ဘာလို႔လဲ ဆိုေတာ့ Unix (or) Linux server ေတြက စာလံုး အေသးနဲ႔ အႀကီးကို ခြဲျခားထားလို႔ပါ။
HTML Basic Document
<html>
<head>
<title>
My First HTML Page</title>
</head>
<body>
This is my first HTML Page.
</body>
</html>
ျပီးရင္ notepad ထဲကို အေပၚက စာေတြကို ကူးထည့္ပါ.. HTML Basic Document ဆုိတာေတာ့ မပါဘူးေနာ္.. <html> ဆုိတဲ့ tag ကေန စကူးရမွာပါ။ ၄င္းကို Notepad ေခၚျပီးကူးထည့္ကာ test.html ဆုိျပီး save လုပ္ပါ။ တစ္ခု သတိထားရမွာက test ျပီးရင္ .html ကို ထည့္ဖုိ႔ပါ။ မထည့္ရင္ ေပၚမွာ မဟုတ္သလို HTML page တစ္ခု ျဖစ္မွာလဲ မဟုတ္ပါဘူး။ ျပီးရင္ ျပန္ဖြင့္ႀကည့္ပါ။ notepad ကို ေခၚခ်င္ရင္ window key+R (or) start button ကို ကလစ္ျပီး run ကို ကလစ္ေခါက္ (or) start button ကိုကလစ္ျပီး accessories ထဲက notepad ကို သြားရင္ ရပါျပီ။ ျပီးရင္ browser ဖြင့္ကာ run ႀကည့္ႏုိင္ပါျပီ။ browser ဖြင့္ျပီးရင္ “This is my first HTML Page.” ဆုိတာ ေပၚမေပၚႀကည့္ပါ.. မေပၚရင္ notepad မွာ အမွားျပန္စစ္ပါ.။ ျပီးရင္ browser မွာ F5 ကိုႏွိပ္ျပီး refresh လုပ္ႀကည့္ပါ.။ ေအာက္ပါအတုိင္းေပၚလာရင္ သင့္ရဲ့ ပထမဆံံုး html page ကို ေအာင္ျမင္စြာ ဖန္တီးႏုိင္ခဲ့ျပီလို႔ ေတြးႏုိင္ပါျပီ။ :D
ဒီလိုေပၚမွာပါ..
http://winhein.files.wordpress.com/2009/07/html.jpg?w=420&h=262
• Hyper Text +Markup Language == HTML ျဖစ္ပါတယ္။
ပထမဆံုး HTML ကို ေလ့လာမယ္ဆုိရင္ opening tag ( < > ), နဲ႔ closing tag ( </ > ) တို႔ကို သိရပါမယ္.. Tag တုိင္းမွာ opening tag နဲ႔ closing tag ရွိပါတယ္။ Tag ေတြ ႀကားမွာ contact ေတြ ထည့္ရပါမယ္။ HTML ကို ေရးျပီး ဖုိင္ေတြကို Save လုပ္ရာမွာ စာလံုးေတြကုိ အဂၤလိပ္လိုနဲ႔ စာလံုးအေသးေတြ (small letters) ေတြပဲ ေပးသင့္ပါတယ္။ ဘာလို႔လဲ ဆိုေတာ့ Unix (or) Linux server ေတြက စာလံုး အေသးနဲ႔ အႀကီးကို ခြဲျခားထားလို႔ပါ။
HTML Basic Document
<html>
<head>
<title>
My First HTML Page</title>
</head>
<body>
This is my first HTML Page.
</body>
</html>
ျပီးရင္ notepad ထဲကို အေပၚက စာေတြကို ကူးထည့္ပါ.. HTML Basic Document ဆုိတာေတာ့ မပါဘူးေနာ္.. <html> ဆုိတဲ့ tag ကေန စကူးရမွာပါ။ ၄င္းကို Notepad ေခၚျပီးကူးထည့္ကာ test.html ဆုိျပီး save လုပ္ပါ။ တစ္ခု သတိထားရမွာက test ျပီးရင္ .html ကို ထည့္ဖုိ႔ပါ။ မထည့္ရင္ ေပၚမွာ မဟုတ္သလို HTML page တစ္ခု ျဖစ္မွာလဲ မဟုတ္ပါဘူး။ ျပီးရင္ ျပန္ဖြင့္ႀကည့္ပါ။ notepad ကို ေခၚခ်င္ရင္ window key+R (or) start button ကို ကလစ္ျပီး run ကို ကလစ္ေခါက္ (or) start button ကိုကလစ္ျပီး accessories ထဲက notepad ကို သြားရင္ ရပါျပီ။ ျပီးရင္ browser ဖြင့္ကာ run ႀကည့္ႏုိင္ပါျပီ။ browser ဖြင့္ျပီးရင္ “This is my first HTML Page.” ဆုိတာ ေပၚမေပၚႀကည့္ပါ.. မေပၚရင္ notepad မွာ အမွားျပန္စစ္ပါ.။ ျပီးရင္ browser မွာ F5 ကိုႏွိပ္ျပီး refresh လုပ္ႀကည့္ပါ.။ ေအာက္ပါအတုိင္းေပၚလာရင္ သင့္ရဲ့ ပထမဆံံုး html page ကို ေအာင္ျမင္စြာ ဖန္တီးႏုိင္ခဲ့ျပီလို႔ ေတြးႏုိင္ပါျပီ။ :D
ဒီလိုေပၚမွာပါ..
http://winhein.files.wordpress.com/2009/07/html.jpg?w=420&h=262
Thurasoe
01-03-2010, 01:46 PM
အင္း ၾကည့္ရတာ အုပ္ခ်ဳပ္ေရးမွဴးနွစ္ေယာက္ လုျပီး ေရးမယ္ထင္တယ္ေနာ္။
Kyi Shaung
01-04-2010, 04:43 AM
အင္း ၾကည့္ရတာ အုပ္ခ်ဳပ္ေရးမွဴးနွစ္ေယာက္ လုျပီး ေရးမယ္ထင္တယ္ေနာ္။
:) မေရးပါ... ကိုိကုိ၀င္းေရးမွာပါ
:) မေရးပါ... ကိုိကုိ၀င္းေရးမွာပါ
zuzuaung
01-05-2010, 05:12 AM
HTML နဲ ့ပတ္သတ္တဲ ့ Examples မ်ားကုိ ခ်ေရးေပးသြားပါ ့မယ္ခင္ဗ်ား။
ပထမဆုံးအေနနဲ ့ ေခါင္းစဥ္ၾကီးေအာက္မွာ စာပုိဒ္ကေလးအျဖစ္ဒီလုိ သုံးပါတယ္ခင္ဗ်ား။ ။
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
အကယ္လုိ ့ကြ်န္ေတာ္ တုိ ့ဟာ ေခါင္းစဥ္ေတြ အမ်ားၾကီးကုိ သုံးရေတာ ့မယ္ဆုိရင္ေတာ
လြယ္ပါတယ္.. <h1> <h2> <h3> စ သျဖင့္ေဖၚျပသြားယုံပါပဲခင္ဗ်။ ။
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
လင့္ခ်ိတ္တဲ ့ အခါမွာေတာ ့ လြယ္ပါတယ္ခင္ဗ်
<a href="http://www.w3schools.com">This is a link</a>
ဒီဟာေလးကုိ ၾကည္ ့ပါ။
ေရွ ့က <a href = ဆုိတဲ ့ဟာက ကုိယ္ ထားခ်င္တဲ ့လင့္ကုိ ထားပါတယ္ခင္ဗ်။
ဥပမာ။ ။
<a href="http://www.myidgroup.org">MYID</a>
အဲဒါဆုိရင္ သူက Pages မွာ MYID ဆုိပီး ေပၚပါလိမ္ ့မယ္။
အဲဒီကုိ နိပ္ရင္ ရင္ MYID ထဲ သုိ ့တန္းေရာက္သြားမွာျဖစ္ပါတယ္။
HTML Formatting အပုိင္းကေတာ ့ ဒီမွာ ပါခင္ဗ်။
<html>
<body>
<p><b>This text is bold</b></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
<b> </b> ကေတာ ့ ကြ်န္ေတာ္ အေနနဲ ့ စာလုံးကုိေတြကုိ Bold လုပ္တဲ ့အခါမွာ သုံးပါတယ္။
<big> </big> က ေတာ ့ စာလုံးအၾကီး ေတြ မွာ သုံးက်ပါတယ္။
<i> </i> က ေတာ ့ Italic ဖစ္ပါတယ္။
<sub> ကေတာ ့ subscript ျဖစ္ပါတယ္ခင္ဗ်ား။ ။
HTML images
<html>
<body>
<h2>that girl</h2>
<img border="0" src="/images/pulpit.jpg" width="304" height="228" />
</body>
</html>
ေခါင္းစဥ္ေအာက္မွာ ပုံထည္ ့တာပါ
ကုိယ္ ့ထည္ ့မယ္ images ဖုိင္ကုိ index ဖုိင္ရွိတဲ ့ဖုိဒါ ဒါမွ မဟုတ္ရင္ newfolder နဲ ့ထည္ ့လုိ ့ရပါတယ္။
အဲဒါဆုိ ရင္ ကြ်န္ေတာ္တုိ ့က src=”/images/that girl.jpg” ဆုိျပီး ေၾကျငာရပါမယ္။
Images ဆုိတဲ ့ေနရာမွာေတာ ့ သင္ၾကဳိက္တဲ ့ဟာေပါ ့ေနာ္။ ။
ဒီေန ့ေတာ ့..ဒီေလာက္ပဲေနာ္ အဟီး
:):):)
Order List & Unorder List
Unorder List
Unorder list ဆိုတာက အ၀ိုင္းေတြ ေလးေထာင့္ေတြ စတာကိုေၿပာတာပါ။
<ul>
<li> Number 1</li>
<li> Number 2</li>
<li> Number 3</li>
</ul>
Order List
Order List ဆိုတာက နံပါတ္ေတြအစဥ္လိုက္ၿပခ်င္တဲ့အခါသံုးတာပါ။
<ol>
<li> Number 1</li>
<li> Number 2</li>
<li> Number 3</li>
</ol>
ဒီေန႕ ေတာ့ဒီေလာက္ပါပဲ။
ေနာက္တစ္ေခါက္ ထပ္၀င္ေျပာဦးမယ္.. :43: ဒီတစ္ခါေတာ့ HTML မွာ သံုးတဲ့ tab ေတြကို ပိုမိုေကာင္းမြန္လာေစဖို႔ အားျဖည့္ေပးတဲ့ Attribute ေတြ အေႀကာင္း ေျပာျပမယ္။
Attribute ေတြကို HTML tags ေတြရဲ့ သက္ဆုိင္ရာ Selector ေတြရဲ့ ေနာက္မွာ space တစ္ခ်က္ျခားျပီးေတာ့ [Properties = "Value"] ပံုစံနဲ႔ ေရးပါတယ္။
ဥပမာ - <h1 align="left">
အနီေရာင္နဲ႔ ေရးထားတဲ့ h1 ဆုိတာက selector ပါ။ ေနာက္က space တစ္ခ်က္ျခားျပီး ေရးထားတဲ့ အစိမ္းေရာင္ align="left" ဆုိတာကေတာ့ properties= "value" ပါ.။ value မွာ အစနဲ႔ အဆံုးကို " " double quote ႀကားထဲ ထည့္ေရးထားတာ ေတြ႔မွာပါ။ မပါလည္း ရေတာ့ ရပါတယ္။ ဒါေပမယ့္ standard အေနနဲ႔ကေတာ့ " " ကို ထည့္ႀကပါတယ္။ မထည့္ရင္ ဘာျဖစ္သလည္းဆုိေတာ့ တစ္ခါတစ္ရံ အဲရာတက္တတ္ပါတယ္။ ဒါေႀကာင့္ ထည့္ေပးေစခ်င္ပါတယ္။
Attribute ေတြကိုေတာ့
http://www.w3schools.com/tags/ref_standardattributes.asp
မွာ သြားႀကည့္ႏုိင္ပါတယ္ခင္ဗ်ာ.. Next Reference ကို တစ္ခ်က္ခ်င္းစီ ႏွိပ္သြားျပီး ေလ့လာႏုိင္ေႀကာင္းပါ.။ :):52::52:
Special Characters @ HTML
ကၽြန္ေတာ္တုိ႔ HTML Page ေတြ ေရးေနရင္းနဲ႔ သူမ်ား website ေတြမွာ ေတြ႔သလို ကိုယ္ေရးတဲ့ ဆုိက္ဒ္ကို copy right ျဖစ္ေႀကာင္း ေရးခ်င္တဲ့အခါမွာ copy right sign ထည့္ခ်င္တာဆုိရင္ © ဆုိတဲ့ special character ကို သံုးရပါတယ္။ html pages ေတြမွာ စာလံုးတစ္လံုးနဲ႔ တစ္လံုးႀကား space တစ္ေနရာစာ ျခားခ်င္ရင္ ကိုသံုးရပါတယ္။ ထုိနည္းတူ smaller than (<), greater than (>) ကို သံုးတဲ့အခါမွာလည္း Html tag (< >) ေတြနဲ႔ ေရာေႏွာေနတဲ့အတြက္ > ကို > အတြက္ < ကို < အတြက္ သံုးပါတယ္ခင္ဗ်ာ.။
HTML ရဲ႕ အေၿခခံသိထားသင့္တဲ့ Tag ေလးေတြေလ့လာလို႕ ရမယ့္ေနရာေလးတစ္ခုပါ
http://www.mountaindragon.com/html/text.htm
Learning Basic HTML (ျမန္မာလုိ) (flash application) ေလးပါ။
Size က 29.1 MB ပါ။
http://ifile.it/vgxw46e
PS:က်ေနာ္ လုပ္ထားတာမဟုတ္ပါ:blar:
image အေၾကာင္းေလးဆက္ေျပာမယ္ေနာ္ ... ပံုနာမည္ေတြကို html tag ထဲထည္တဲ့အခါ typing ရိုက္တာထက္ ကိုယ္ထည့္ခ်င္တဲ့ပံုေပၚမွာ Right click ႏွိပ္ျပီး Properties ထဲကေန ပုံ Name ကို copy ကူးျပီး ့html tag ထဲမွာ paste လုပ္တာကပိုေသခ်ာပါတယ္ ။ ပံု Extension ျဖစ္တဲ့ .jpg , .gif စတာေတြေတာ့မေမ့ဖို႕လိုတယ္ေနာ္ ..
Coding ေလးေရးၾကည့္မယ္ေနာ္
<html>
<head></head>
<body>
<img src="images/flower.jpg" width="100" height="100" align="left" border="0" alt="description" title="description">
</body>
</html>
ဆိုတာကို Notepad နဲ႕ကူးျပီး .htm (or) .html extension နဲ႕သိမ္းျပီး run ၾကည့္လိုက္ပါ ။
ကာလာေလးနဲ႕ေရးထားတဲ့ ပုံနာမည္ေနရာမွာေတာ့ကိုယ္ေပၚေစခ်င္တဲ့ပံုရဲ႕ name ကိုေသခ်ာထည့္ေပးရမွာျဖစ္ပါတယ္။
width နဲ႕ height ကေတာကိုယ္လိုခ်င္သလိုေျပာင္းေရးလို႕ရပါတယ္။
alt="description" ဆိုတာကပံုေပၚမွာ Cursor တင္လိုက္တာနဲ႕ စာသားေလးေပၚလာေအာင္ေရးထားတာပါ။ "description" ေနရာမွာပံုနဲ႕ပတ္သတ္တဲ့စာသားေလးထည့္ေရးႏိုင္ပါတယ္။
သူကေတာ့ IE Browser မွာပဲေပၚမွာပါ။
title ဆိုတာကလဲ alt နဲ႕ဆင္ပါတယ္။တစ္ခါတစ္ေလကြန္နက္ရွင္မေကာင္းလို႕ တင္ထားတဲ့ပံုကေပၚမလာေသးဘူး ။အဲ့အခ်ိန္မွာ တင္ထားတဲ့ပံုကဘာပံုမွန္းသိေအာင္စာသားေလးနဲ႕အရင္ေဖာ္ျပေပးတာပါ။
ပံုေတြကိုအလယ္မွာေပၚခ်င္တယ္ဆိုရင္ေတာ့ <center></center> tag နဲ႕ေရးရပါတယ္ ။
eg .. <center><img src="images/flower.jpg"></center>
ဆိုျပီးေရးရပါတယ္။
ဒီတစ္ခါေတာ့ Link အေၾကာင္းေလးေျပာပါမယ္။
website ေတြမွာ Link ကေတာ့မပါမျဖစ္ဘူးေလ :) မ်ားေသာအားျဖင့္ Link ေတြကိုၾကည့္ရင္ပထမဆံုးဘာမွမႏွိပ္ရေသးရင္အျပာေရာင္ေလးျဖစ္ေနျပးီ။ Link ကိုသြားလည္ျပီးလို႕ျပန္လာရင္ေတာ့ အနီေရာင္ေလးျဖစ္ေနတာကိုေတြ႕ရမွာပါ။ Link ေတြခ်တ္ဆက္သံုးခ်င္တယ္ဆိုရင္ေတာ့
<a href="home.htm">Home</a>
home.htm ေနရာမွာကိုယ္ေပးခ်င္တဲ့ Addres Link ကိုထည့္ေပးရမွာပါ။ Google ကိုသြားခ်င္တယ္ဆိုရင္ေတာ့ "http://www.google.com"ဆိုျပီးထည့္ေပးရမွာပါ။ External Link နဲ႕ခ်ိတ္တာျဖစ္တာအတြက္ Address ကိုအျပည့္အစံုေရးေပးရပါတယ္။ကိုယ့္ site ထဲက page အခ်င္းခ်င္းခ်ိတ္ဆက္တဲ့အခါမွာေတာ့ အေပၚက Code မွာေရးခဲ့တဲ့အတိုင္း page name နဲ႕ခ်ိတ္ေပးလုိက္ရင္ရပါျပီ ...
ပထမဆုံးအေနနဲ ့ ေခါင္းစဥ္ၾကီးေအာက္မွာ စာပုိဒ္ကေလးအျဖစ္ဒီလုိ သုံးပါတယ္ခင္ဗ်ား။ ။
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
အကယ္လုိ ့ကြ်န္ေတာ္ တုိ ့ဟာ ေခါင္းစဥ္ေတြ အမ်ားၾကီးကုိ သုံးရေတာ ့မယ္ဆုိရင္ေတာ
လြယ္ပါတယ္.. <h1> <h2> <h3> စ သျဖင့္ေဖၚျပသြားယုံပါပဲခင္ဗ်။ ။
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
လင့္ခ်ိတ္တဲ ့ အခါမွာေတာ ့ လြယ္ပါတယ္ခင္ဗ်
<a href="http://www.w3schools.com">This is a link</a>
ဒီဟာေလးကုိ ၾကည္ ့ပါ။
ေရွ ့က <a href = ဆုိတဲ ့ဟာက ကုိယ္ ထားခ်င္တဲ ့လင့္ကုိ ထားပါတယ္ခင္ဗ်။
ဥပမာ။ ။
<a href="http://www.myidgroup.org">MYID</a>
အဲဒါဆုိရင္ သူက Pages မွာ MYID ဆုိပီး ေပၚပါလိမ္ ့မယ္။
အဲဒီကုိ နိပ္ရင္ ရင္ MYID ထဲ သုိ ့တန္းေရာက္သြားမွာျဖစ္ပါတယ္။
HTML Formatting အပုိင္းကေတာ ့ ဒီမွာ ပါခင္ဗ်။
<html>
<body>
<p><b>This text is bold</b></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
<b> </b> ကေတာ ့ ကြ်န္ေတာ္ အေနနဲ ့ စာလုံးကုိေတြကုိ Bold လုပ္တဲ ့အခါမွာ သုံးပါတယ္။
<big> </big> က ေတာ ့ စာလုံးအၾကီး ေတြ မွာ သုံးက်ပါတယ္။
<i> </i> က ေတာ ့ Italic ဖစ္ပါတယ္။
<sub> ကေတာ ့ subscript ျဖစ္ပါတယ္ခင္ဗ်ား။ ။
HTML images
<html>
<body>
<h2>that girl</h2>
<img border="0" src="/images/pulpit.jpg" width="304" height="228" />
</body>
</html>
ေခါင္းစဥ္ေအာက္မွာ ပုံထည္ ့တာပါ
ကုိယ္ ့ထည္ ့မယ္ images ဖုိင္ကုိ index ဖုိင္ရွိတဲ ့ဖုိဒါ ဒါမွ မဟုတ္ရင္ newfolder နဲ ့ထည္ ့လုိ ့ရပါတယ္။
အဲဒါဆုိ ရင္ ကြ်န္ေတာ္တုိ ့က src=”/images/that girl.jpg” ဆုိျပီး ေၾကျငာရပါမယ္။
Images ဆုိတဲ ့ေနရာမွာေတာ ့ သင္ၾကဳိက္တဲ ့ဟာေပါ ့ေနာ္။ ။
ဒီေန ့ေတာ ့..ဒီေလာက္ပဲေနာ္ အဟီး
:):):)
Order List & Unorder List
Unorder List
Unorder list ဆိုတာက အ၀ိုင္းေတြ ေလးေထာင့္ေတြ စတာကိုေၿပာတာပါ။
<ul>
<li> Number 1</li>
<li> Number 2</li>
<li> Number 3</li>
</ul>
Order List
Order List ဆိုတာက နံပါတ္ေတြအစဥ္လိုက္ၿပခ်င္တဲ့အခါသံုးတာပါ။
<ol>
<li> Number 1</li>
<li> Number 2</li>
<li> Number 3</li>
</ol>
ဒီေန႕ ေတာ့ဒီေလာက္ပါပဲ။
ေနာက္တစ္ေခါက္ ထပ္၀င္ေျပာဦးမယ္.. :43: ဒီတစ္ခါေတာ့ HTML မွာ သံုးတဲ့ tab ေတြကို ပိုမိုေကာင္းမြန္လာေစဖို႔ အားျဖည့္ေပးတဲ့ Attribute ေတြ အေႀကာင္း ေျပာျပမယ္။
Attribute ေတြကို HTML tags ေတြရဲ့ သက္ဆုိင္ရာ Selector ေတြရဲ့ ေနာက္မွာ space တစ္ခ်က္ျခားျပီးေတာ့ [Properties = "Value"] ပံုစံနဲ႔ ေရးပါတယ္။
ဥပမာ - <h1 align="left">
အနီေရာင္နဲ႔ ေရးထားတဲ့ h1 ဆုိတာက selector ပါ။ ေနာက္က space တစ္ခ်က္ျခားျပီး ေရးထားတဲ့ အစိမ္းေရာင္ align="left" ဆုိတာကေတာ့ properties= "value" ပါ.။ value မွာ အစနဲ႔ အဆံုးကို " " double quote ႀကားထဲ ထည့္ေရးထားတာ ေတြ႔မွာပါ။ မပါလည္း ရေတာ့ ရပါတယ္။ ဒါေပမယ့္ standard အေနနဲ႔ကေတာ့ " " ကို ထည့္ႀကပါတယ္။ မထည့္ရင္ ဘာျဖစ္သလည္းဆုိေတာ့ တစ္ခါတစ္ရံ အဲရာတက္တတ္ပါတယ္။ ဒါေႀကာင့္ ထည့္ေပးေစခ်င္ပါတယ္။
Attribute ေတြကိုေတာ့
http://www.w3schools.com/tags/ref_standardattributes.asp
မွာ သြားႀကည့္ႏုိင္ပါတယ္ခင္ဗ်ာ.. Next Reference ကို တစ္ခ်က္ခ်င္းစီ ႏွိပ္သြားျပီး ေလ့လာႏုိင္ေႀကာင္းပါ.။ :):52::52:
Special Characters @ HTML
ကၽြန္ေတာ္တုိ႔ HTML Page ေတြ ေရးေနရင္းနဲ႔ သူမ်ား website ေတြမွာ ေတြ႔သလို ကိုယ္ေရးတဲ့ ဆုိက္ဒ္ကို copy right ျဖစ္ေႀကာင္း ေရးခ်င္တဲ့အခါမွာ copy right sign ထည့္ခ်င္တာဆုိရင္ © ဆုိတဲ့ special character ကို သံုးရပါတယ္။ html pages ေတြမွာ စာလံုးတစ္လံုးနဲ႔ တစ္လံုးႀကား space တစ္ေနရာစာ ျခားခ်င္ရင္ ကိုသံုးရပါတယ္။ ထုိနည္းတူ smaller than (<), greater than (>) ကို သံုးတဲ့အခါမွာလည္း Html tag (< >) ေတြနဲ႔ ေရာေႏွာေနတဲ့အတြက္ > ကို > အတြက္ < ကို < အတြက္ သံုးပါတယ္ခင္ဗ်ာ.။
HTML ရဲ႕ အေၿခခံသိထားသင့္တဲ့ Tag ေလးေတြေလ့လာလို႕ ရမယ့္ေနရာေလးတစ္ခုပါ
http://www.mountaindragon.com/html/text.htm
Learning Basic HTML (ျမန္မာလုိ) (flash application) ေလးပါ။
Size က 29.1 MB ပါ။
http://ifile.it/vgxw46e
PS:က်ေနာ္ လုပ္ထားတာမဟုတ္ပါ:blar:
image အေၾကာင္းေလးဆက္ေျပာမယ္ေနာ္ ... ပံုနာမည္ေတြကို html tag ထဲထည္တဲ့အခါ typing ရိုက္တာထက္ ကိုယ္ထည့္ခ်င္တဲ့ပံုေပၚမွာ Right click ႏွိပ္ျပီး Properties ထဲကေန ပုံ Name ကို copy ကူးျပီး ့html tag ထဲမွာ paste လုပ္တာကပိုေသခ်ာပါတယ္ ။ ပံု Extension ျဖစ္တဲ့ .jpg , .gif စတာေတြေတာ့မေမ့ဖို႕လိုတယ္ေနာ္ ..
Coding ေလးေရးၾကည့္မယ္ေနာ္
<html>
<head></head>
<body>
<img src="images/flower.jpg" width="100" height="100" align="left" border="0" alt="description" title="description">
</body>
</html>
ဆိုတာကို Notepad နဲ႕ကူးျပီး .htm (or) .html extension နဲ႕သိမ္းျပီး run ၾကည့္လိုက္ပါ ။
ကာလာေလးနဲ႕ေရးထားတဲ့ ပုံနာမည္ေနရာမွာေတာ့ကိုယ္ေပၚေစခ်င္တဲ့ပံုရဲ႕ name ကိုေသခ်ာထည့္ေပးရမွာျဖစ္ပါတယ္။
width နဲ႕ height ကေတာကိုယ္လိုခ်င္သလိုေျပာင္းေရးလို႕ရပါတယ္။
alt="description" ဆိုတာကပံုေပၚမွာ Cursor တင္လိုက္တာနဲ႕ စာသားေလးေပၚလာေအာင္ေရးထားတာပါ။ "description" ေနရာမွာပံုနဲ႕ပတ္သတ္တဲ့စာသားေလးထည့္ေရးႏိုင္ပါတယ္။
သူကေတာ့ IE Browser မွာပဲေပၚမွာပါ။
title ဆိုတာကလဲ alt နဲ႕ဆင္ပါတယ္။တစ္ခါတစ္ေလကြန္နက္ရွင္မေကာင္းလို႕ တင္ထားတဲ့ပံုကေပၚမလာေသးဘူး ။အဲ့အခ်ိန္မွာ တင္ထားတဲ့ပံုကဘာပံုမွန္းသိေအာင္စာသားေလးနဲ႕အရင္ေဖာ္ျပေပးတာပါ။
ပံုေတြကိုအလယ္မွာေပၚခ်င္တယ္ဆိုရင္ေတာ့ <center></center> tag နဲ႕ေရးရပါတယ္ ။
eg .. <center><img src="images/flower.jpg"></center>
ဆိုျပီးေရးရပါတယ္။
ဒီတစ္ခါေတာ့ Link အေၾကာင္းေလးေျပာပါမယ္။
website ေတြမွာ Link ကေတာ့မပါမျဖစ္ဘူးေလ :) မ်ားေသာအားျဖင့္ Link ေတြကိုၾကည့္ရင္ပထမဆံုးဘာမွမႏွိပ္ရေသးရင္အျပာေရာင္ေလးျဖစ္ေနျပးီ။ Link ကိုသြားလည္ျပီးလို႕ျပန္လာရင္ေတာ့ အနီေရာင္ေလးျဖစ္ေနတာကိုေတြ႕ရမွာပါ။ Link ေတြခ်တ္ဆက္သံုးခ်င္တယ္ဆိုရင္ေတာ့
<a href="home.htm">Home</a>
home.htm ေနရာမွာကိုယ္ေပးခ်င္တဲ့ Addres Link ကိုထည့္ေပးရမွာပါ။ Google ကိုသြားခ်င္တယ္ဆိုရင္ေတာ့ "http://www.google.com"ဆိုျပီးထည့္ေပးရမွာပါ။ External Link နဲ႕ခ်ိတ္တာျဖစ္တာအတြက္ Address ကိုအျပည့္အစံုေရးေပးရပါတယ္။ကိုယ့္ site ထဲက page အခ်င္းခ်င္းခ်ိတ္ဆက္တဲ့အခါမွာေတာ့ အေပၚက Code မွာေရးခဲ့တဲ့အတိုင္း page name နဲ႕ခ်ိတ္ေပးလုိက္ရင္ရပါျပီ ...
0 comments:
Post a Comment