HTMLသင္ခန္းစာ1to3
BASIC HTML
htmlကိုအေျခခံစေရးမယ္ဆိုရင္ေတာ့ပထမဆံုး<html> <head> </head> <body> </body> </html> htmlနဲ႔ေရးတာျဖစ္တဲ့အတြက္<html> နဲ႕စပါတယ္ htmlမွာ အဖြင့္tagကို<html> နဲ႕ေရးျပီးအပိတ္ကို</html> မ်ဥ္းေစာင္းခံျပီးေရးပါတယ္။ကိုယ္ေရးလို တဲ့အေၾကာင္းအရာကို အဖြင့္tagနဲ႔အပိတ္tag ၾကားမွာေရးရပါတယ္။ html tagေတကေတာ့ ၁.<html> </html> ၂.<head> </head> ၃.<title> <title> ၄.<body> </body> ၅.<h1>to ...<h6> ၆.<p> ၇.<pre> ၈.<div> ၉.<img> ၁၀.<a> အစရွိတာေတြပဲျဖစ္ပါတယ္ ေနာက္ထပ္မ်ားစြာ က်န္ပါေသးတယ္ က်န္တဲ့ဟာကိုေတာ့ေနာက္ သင္ခန္းစာမွာဆက္ၾကည့္ရေအာင္ OK?
သင္ခန္းစာ(၂)
ပထမဆံုးcodeတစ္ခုစေရးၾကည့္ရေအာင္<html> <head> <title> ဒါကေခါင္းစဥ္ပါ browserရဲ႕address bar မွာေပၚမယ့္ေခါင္းစဥ္ပါ</title> </head> <body> <h1 align="center"> ငေၾကာင္စာမ်က္ႏွာ</h1> <p> က်မႏွင္းဆီပါေမာင္:-P ေသခ်ာမကိုင္ရင္ဆူး တတ္ပါတယ္ေမာင္ ခိခိ</p> </body> </html> အေပၚကကုဒ္ကိုcopyကူးျပီး
အဲ့ဒီcodeကိုရွင္းပါမယ္<head> ဆိုတာကဒီစာမ်က္နွာရဲ႕ေခါင္းပိုင္းပါ<title> ကbrowserရဲ႕search barမွာေပၚလာ မယ့္နာမည္ပါ<body> ကဒီစာမ်က္နွာရဲ႕ကိုယ္ ပိုင္းပါ<h1> ကေတာ့ ေခါင္းစဥ္တပ္ရာမွာသံုးတာ ပါ h1ကေနh6ထိရွိပါတယ္ h1ကေခါင္းစဥ္အရြယ္ အစားအၾကီးဆံုးျဖစ္ျပီး h6ကေတာ့အငယ္ဆံုးျဖစ္ ပါတယ္<p> ကေတာ့စာပိုဒ္ခြဲေတြေပါ့ဗ်ာ paragraphရဲ႕အတိုေကာက္ အဲ့ဒီထဲကalignဆို တာက altributeလို႔ေခၚပါတယ္ သတ္မွတ္ခ်က္ ေပါ့ေနာ္ သူ႔ေနာက္ကcenterဆိုတာကvalueပါ alignဆိုတာေနရာသတ္မွတ္ခ်က္ျဖစ္ျပီး သူ႔ရဲ႕ တန္ဖိုူးကိုcenterထားလိုက္ေတာ့ စာေတက စာမ်က္နွာရဲ႕အလည္တည့္တည့္မွာေပၚတာေပါ့ leftဆိုဘယ္ rightဆိုညာေပါ့ ကဲအေပၚကcodeကိုစမ္းၾကည့္ပါ h1ကေနh6ထိ ေျပာင္းၾကည့္ left, right, centerေျပာင္းၾကည့္ပါ ေနာက္သင္ခန္းစာေတြကိုေနာက္စာမ်က္နွာမွာဆက္ဖတ္ျကရေအာင္ bye bye...:-)
သင္ ခန္းစာ(၃)
ကဲဒီတစ္ခါေျပာျပမွာကေတာ့ Altribute ေတြအေၾကာင္းပါခမ်ာ Altributeဆိုတာ ကေတာ့က်ေနာ္တို႔ေရးလိုက္တဲ႔စာသား ေတြကိုပိုမိုျပီးလွပေအာင္ဖန္းတီးေပးတဲ႔ အမိန္႔ေတြပဲျဖစ္ပါတယ္ ကဲ စလိုက္ရေအာင္ ၁.align alignဆိုတာကေတာ့စာသားကိုဘယ္ညာ အလယ္မွာေနရာခ်ေပးတဲ႔အရာပါ ၂.style styleဆိုတာကေတာ့စာသားဒီဇိုင္းေတြ လုပ္တာပါcssလိုပါပဲ ၃.font-size စာသားအရြယ္အစားပါ သူ႕valueကို pixels(px)နဲ႔တြက္ခ်က္ပါတယ္ ၄.font-color စာသားအေရာင္ပါ သူ႔valueကေတာ့နွစ္ မ်ိဳးသတ္မွတ္ပါတယ္ greenဆိုျပီး colorအေရာင္နာမည္ကိုတိုက္ရိုက္ေခၚသံုးနိုင္သလို codeနဲ႔လည္းေခၚလို႔ရပါ တယ္ codeနဲ႔ေခၚမယ္ဆိုရင္ေတာ့ အေရွ႕မွာ#ခံရပါမယ္ ဥပမာ font-color="#129921"ေပါ့ အဲ႔ဒါနည္းနည္းရွင္းမယ္ ေရွ႕ႏွစ္လံုးက အနီေရာင္ပါ အလယ္ကအစိမ္းပါ ေနာက္ နွစ္လံုးကအျပာပါ အေပၚကcodeဆို အစိမ္းေရာင္ပိုသန္းပါလိမ့္မယ္ အဲ့နည္း နဲ႔ၾကိဳက္တဲ႔အေရာင္ကိုစပ္လို႔ရပါတယ္ ၅.background-color ေနာက္ခံအေရာင္ပါ ကဲလက္ေတြ႕လုပ္လိုက္ၾကရေအာင္<html> <head> <title> google</title> </head> <body style="background-color:violet;"> <h1 align="left"> ငိုးမတား</h1> <h2 align="center"> မတာမ</h2> <h3 align="right"> ခ်ဥ္ေပါင္ရိုးမ</h3> <p style="font-color:yellow;font-size:20px;"> အဲ့ဒီေတာ့သူကဘာျပန္ေျပာလဲ သြား ေမးၾကည့္ေလ</p> <p style="font-color:#129901;font-size:10px;"> အဲ့ဒီေတာ့ငါကကျပရမွာလား</p> </body> </html> ကဲအေပၚကcodeကိုcopyကူးျပီးေအာက္ မွာစမ္းၾကည့္ပါဦးဗ်ာ
HTMLသင္ခန္းစာ1to3
BASIC HTML
htmlကိုအေျခခံစေရးမယ္ဆိုရင္ေတာ့ပထမဆံုး<html> <head> </head> <body> </body> </html> htmlနဲ႔ေရးတာျဖစ္တဲ့အတြက္<html> နဲ႕စပါတယ္ htmlမွာ အဖြင့္tagကို<html> နဲ႕ေရးျပီးအပိတ္ကို</html> မ်ဥ္းေစာင္းခံျပီးေရးပါတယ္။ကိုယ္ေရးလို တဲ့အေၾကာင္းအရာကို အဖြင့္tagနဲ႔အပိတ္tag ၾကားမွာေရးရပါတယ္။ html tagေတကေတာ့ ၁.<html> </html> ၂.<head> </head> ၃.<title> <title> ၄.<body> </body> ၅.<h1>to ...<h6> ၆.<p> ၇.<pre> ၈.<div> ၉.<img> ၁၀.<a> အစရွိတာေတြပဲျဖစ္ပါတယ္ ေနာက္ထပ္မ်ားစြာ က်န္ပါေသးတယ္ က်န္တဲ့ဟာကိုေတာ့ေနာက္ သင္ခန္းစာမွာဆက္ၾကည့္ရေအာင္ OK?သင္ခန္းစာ(၂)
ပထမဆံုးcodeတစ္ခုစေရးၾကည့္ရေအာင္<html> <head> <title> ဒါကေခါင္းစဥ္ပါ browserရဲ႕address bar မွာေပၚမယ့္ေခါင္းစဥ္ပါ</title> </head> <body> <h1 align="center"> ငေၾကာင္စာမ်က္ႏွာ</h1> <p> က်မႏွင္းဆီပါေမာင္:-P ေသခ်ာမကိုင္ရင္ဆူး တတ္ပါတယ္ေမာင္ ခိခိ</p> </body> </html> အေပၚကကုဒ္ကိုcopyကူးျပီးအဲ့ဒီcodeကိုရွင္းပါမယ္<head> ဆိုတာကဒီစာမ်က္နွာရဲ႕ေခါင္းပိုင္းပါ<title> ကbrowserရဲ႕search barမွာေပၚလာ မယ့္နာမည္ပါ<body> ကဒီစာမ်က္နွာရဲ႕ကိုယ္ ပိုင္းပါ<h1> ကေတာ့ ေခါင္းစဥ္တပ္ရာမွာသံုးတာ ပါ h1ကေနh6ထိရွိပါတယ္ h1ကေခါင္းစဥ္အရြယ္ အစားအၾကီးဆံုးျဖစ္ျပီး h6ကေတာ့အငယ္ဆံုးျဖစ္ ပါတယ္<p> ကေတာ့စာပိုဒ္ခြဲေတြေပါ့ဗ်ာ paragraphရဲ႕အတိုေကာက္ အဲ့ဒီထဲကalignဆို တာက altributeလို႔ေခၚပါတယ္ သတ္မွတ္ခ်က္ ေပါ့ေနာ္ သူ႔ေနာက္ကcenterဆိုတာကvalueပါ alignဆိုတာေနရာသတ္မွတ္ခ်က္ျဖစ္ျပီး သူ႔ရဲ႕ တန္ဖိုူးကိုcenterထားလိုက္ေတာ့ စာေတက စာမ်က္နွာရဲ႕အလည္တည့္တည့္မွာေပၚတာေပါ့ leftဆိုဘယ္ rightဆိုညာေပါ့ ကဲအေပၚကcodeကိုစမ္းၾကည့္ပါ h1ကေနh6ထိ ေျပာင္းၾကည့္ left, right, centerေျပာင္းၾကည့္ပါ ေနာက္သင္ခန္းစာေတြကိုေနာက္စာမ်က္နွာမွာဆက္ဖတ္ျကရေအာင္ bye bye...:-)သင္ ခန္းစာ(၃)
ကဲဒီတစ္ခါေျပာျပမွာကေတာ့ Altribute ေတြအေၾကာင္းပါခမ်ာ Altributeဆိုတာ ကေတာ့က်ေနာ္တို႔ေရးလိုက္တဲ႔စာသား ေတြကိုပိုမိုျပီးလွပေအာင္ဖန္းတီးေပးတဲ႔ အမိန္႔ေတြပဲျဖစ္ပါတယ္ ကဲ စလိုက္ရေအာင္ ၁.align alignဆိုတာကေတာ့စာသားကိုဘယ္ညာ အလယ္မွာေနရာခ်ေပးတဲ႔အရာပါ ၂.style styleဆိုတာကေတာ့စာသားဒီဇိုင္းေတြ လုပ္တာပါcssလိုပါပဲ ၃.font-size စာသားအရြယ္အစားပါ သူ႕valueကို pixels(px)နဲ႔တြက္ခ်က္ပါတယ္ ၄.font-color စာသားအေရာင္ပါ သူ႔valueကေတာ့နွစ္ မ်ိဳးသတ္မွတ္ပါတယ္ greenဆိုျပီး colorအေရာင္နာမည္ကိုတိုက္ရိုက္ေခၚသံုးနိုင္သလို codeနဲ႔လည္းေခၚလို႔ရပါ တယ္ codeနဲ႔ေခၚမယ္ဆိုရင္ေတာ့ အေရွ႕မွာ#ခံရပါမယ္ ဥပမာ font-color="#129921"ေပါ့ အဲ႔ဒါနည္းနည္းရွင္းမယ္ ေရွ႕ႏွစ္လံုးက အနီေရာင္ပါ အလယ္ကအစိမ္းပါ ေနာက္ နွစ္လံုးကအျပာပါ အေပၚကcodeဆို အစိမ္းေရာင္ပိုသန္းပါလိမ့္မယ္ အဲ့နည္း နဲ႔ၾကိဳက္တဲ႔အေရာင္ကိုစပ္လို႔ရပါတယ္ ၅.background-color ေနာက္ခံအေရာင္ပါ ကဲလက္ေတြ႕လုပ္လိုက္ၾကရေအာင္<html> <head> <title> google</title> </head> <body style="background-color:violet;"> <h1 align="left"> ငိုးမတား</h1> <h2 align="center"> မတာမ</h2> <h3 align="right"> ခ်ဥ္ေပါင္ရိုးမ</h3> <p style="font-color:yellow;font-size:20px;"> အဲ့ဒီေတာ့သူကဘာျပန္ေျပာလဲ သြား ေမးၾကည့္ေလ</p> <p style="font-color:#129901;font-size:10px;"> အဲ့ဒီေတာ့ငါကကျပရမွာလား</p> </body> </html>
No comments:
Post a Comment