မဂၤလာပါ ဒီေန႔ေတာ့ lesson 5 မွာမၿပီးခဲ့တဲ့ link ခ်ိတ္နည္းအေၾကာင္း နဲ႔ Image အေၾကာင္းတင္သြားမွာပါ။
HTML bookmarks ေတြကို Web Page တစ္ခုရဲ႕သက္မွတ္ထားတဲ့ေနရာတစ္ခုစီကိုသြားဖို႔သံုးပါတယ္။
ဥပမာ ကြၽန္ေတာ္တို႔ရဲ႕. Web page သင္ခန္းစာေတြတင္ေပးတယ္။ Chapter 1 to 10 ထိကို page တစ္ခုထဲမွာပဲထားထားတယ္။ အဲ့လိုမ်ိဳးဆိုရင္ bookmark ကိုသံုးပီး chapter 1 ကေန chapter 10
ထိေက်ာ္ဖတ္တာမ်ိဳးလုပ္လို႔ရပါတယ္။
Bookmark တစ္ခုလုပ္ဖို႔အတြက္ ပထမဆံုး ''name'' ေပးရပါမယ္။ပီးရင္ ''link''
တစ္ခုလုပ္ရပါမယ္။အဲ့ ''link'' ကိုႏိုပ္လိုက္ရင္ ''name'' ေပးထားတဲ့ေနရာကိုေရာက္သြားပါမယ္ အဲ့လိုမ်ိဳးပါ။
သံုးရမဲ့ tag ေတြကေတာ့
<a name="any_name"> </a> နဲ႔
<a href="#any_name">Any_Word</a>
ပဲျဖစ္ပါတယ္။ဒီေနရာမွာ any_name ဆိုတဲ့ေနရာပါ ႀကိဳက္တဲ့နာမည္ထည့္လို႔ရပါတယ္။အေပၚနဲ႔ေအာက္နဲ႔ေတာ့တူတူထည့္မွရမွာပါ။Any_Word ဆိုတဲ့ေနရာမွာေရးလိုက္မဲ့စာလံုးက Web Page မွာေဖာ္ျပမွာျဖစ္ပါတယ္။အဲ့စာလံုးကိုႏိုပ္လိုက္ရင္ Bookmark လုပ္ထားတဲ့ေနရာကိုေရာက္သြားမွာပါ။
ဒီေနရာမွာ သတိထားရမွာက bookmark လုပ္တုန္းက ''any_name'' လို႔ပဲ ေရးထားပီး href နဲ႔ျပန္ေခၚေတာ့
"any_name'' ရဲ႕ ေ႐ွ႔မွာ ''#'' ႐ွိတာကိုသတိထားရမွာပါ။
နမူနာ code ေလးေတြလိုက္ run ၾကည့္ရင္နားလည္သြားမွာပါ။
အရင္ဆံုး ပံုထဲက code ေတြကို notepad မွာေရးလိုက္ပါ။ Write Anything ဆိုတဲ့ေနရာမွာ စာေတြအမ်ားႀကီးေရးလိုက္ပါ။(ႀကိဳက္တာေရး ေ႐ွာက္ေရး မ်ားဖို႔အေရးႀကီးတယ္ 😁
စာမ်ားပီး page ႐ွည္ေနမွာ Internal Link ကမ်က္လံုးထဲျမင္မွာ 😁 )
-Line 6 မွာ top ဆိုပီး Bookmark တစ္ခုလုပ္ခဲ့ပါတယ္။အဲ့ဒါကို Line 19 နဲ႔ 34 မွာျပန္ေခၚပီး Link ခ်ိတ္ထားတာပါ။Line 19 နဲ႔ 34 မွာ႐ွိတဲ့ Top ဆိုတဲ့စာကိုႏိုပ္ရင္အေပၚျပန္ေရာက္သြားမွာပါ။ဒါကစမ္းၾကည့္မွသိမွာပါ။
-Line 17 မွာ ch5 ဆိုပီး bookmark လုပ္ထားပါတယ္။ အဲ့တာကို Line 7 မွာေခၚထားပါတယ္။ကြၽန္ေတာ္တို႔က chapter 1 ကမဖတ္ခ်င္ပူး chapter 5 ကဖတ္ခ်င္တယ္ဆိုရင္ ႏိုပ္လိုက္ရံုပါပဲ။
ေနာက္တစ္ခုလဲတူတူပါပဲ။
Code output ကေတာ့မိမိဘာသာစမ္းၾကည့္ၾကပါ။မ်ားမ်ားစမ္းမွျမနိျမနိတတ္မွာပါ။
ကြၽန္ေတာ္ lesson 5 မွာတုန္းက တင္တာ External Link ပါ။အဲ့ေတာ့ External နဲ႔ Link နဲ႔ Internal Link နဲ႔ေပါင္းပီး မိမိဘာသာ code ေတြစမ္းေရးၾကည့္လို႔ အၾကံျပဳခ်င္ပါတယ္။
HTML မွာ ပံုေတြထည့္ဖို႔ tag ကေတာ့
<img src="image_name_and_extension">
ပါ။ဒီေနရာမွာ ကြၽန္ေတာ္တို႔ ေရးလိုက္တဲ့ HTML file နဲ႔ image နဲ႔ folder တစ္ခုတည္းေအာက္မွာတူတူ႐ွိရမွာပါ။page 2 ခုကို link ခ်ိတ္သလိုပါပဲ။ folder မတူရင္ web page မွာ ပံုတက္မွာမဟုတ္ပါပူး။
<html>
<head>
<title>Image</title>
<body>
<img src="troll.png">
</body>
</html>
ေပၚက code ေလးကိုလိုက္ေရးလိုက္ပါ။
troll.png ေနရာမွာ အစ္ကိုတို႔ pc မွာ ႐ွိတဲ့ ႀကိဳက္တဲ့ပံုတစ္ပံုထည့္လိုက္ပါ။
ပီးရင္ folder တစ္ခုတည္းေအာက္မွာထားလိုက္ပါ။
Webpage ထဲဝင္ၾကည့္ရင္ပံုေလးေပၚေနတာေတြ႔ရမွာပါ။
ဒီေနရာမွာ ပံုရဲ႕ extension မမွန္ရင္ ေပၚမွာမဟုတ္ပါပူး။ပံုရဲ႕ extension ကိုမသိရင္
-ပံုကို right click ႏိုပ္လိုက္ပါ
-ပီးရင္ Properties
အဲ့မွာ ပံုရဲ႕ extension ကို ေတြ႔ရမွာပါ။
Image မွာ width, height နဲ႔ alt ဆိုပိီး
Attribute ေတြ႐ွိပါတယ္။
Width နဲ႔ height က အရြယ္အစားကို ထိန္းညႇိေပးတာပါ။
alt က ေတာ့ပံုေပၚမွာ cursor တင္ထားရင္ မိမိေရးထားတဲ့စာေပၚေစမွာျဖစ္ပါတယ္။
ေရးနညး္ကေတာ့
<img src="troll.png" width=100px height=100px alt="troll_face">
ပါ။ဒါဆို ကြၽန္ေတာ္တို႔ရဲ႕ ပံုေလးက size 100px ပတ္လည္ပံုေလးျဖစ္သြားပီး
ပံုေပၚမွာ cursor တင္ထားရင္ troll_face ဆိုတဲ့စာသားေလးေပၚလာမွာပါ။code ကိုစမ္းၾကည့္ၾကပါ။
Image ကို a tag ၾကားမွာထည့္လို႔ရပါတယ္။ဆိုလိုခ်င္တာက link ကို ပံုနဲ႔ထည့္လို႔ရပါတယ္။႐ိုး႐ိုး Go To Home Page တို႔လိုမ်ိဳး Link မဟုတ္ဘဲနဲ႔ ပံုကိုႏိုပ္လိုက္ရင္ သက္မွတ္ထားတဲ့ page ေရာက္သြားတာမ်ိဳးပါ။
<html>
<head>
<title>Image</title>
<body>
<a href="https:www.google.com">
<img src="pic.png">
</a>
</body>
</html>
အေပၚက code ကိုၾကည့္လိုက္ရင္
ပံုကို a tag ၾကားထဲမွာထည့္ထားတဲ့ အတြက္ပံုကိုႏိုပ္လိုက္ရင္ Google.com ကိုေခၚသြားမွာပါ။
Image align attribute မွာ
top, bottom, middle, left နဲ႔ right ဆိုပီး႐ွိပါတယ္။
သူကပံုေဘးမွာေရးထားတဲ့စာေတြကို align က သက္မွတ္ထားတဲ့ေနရာမွာေပၚစတာပါ။bottom align က default ပါ။
နမူနာcode ကို run ၾကည့္လိုက္ပါ။
image ေနရာမွေတာ့ မိမိ စက္ထဲမွာ႐ွိတဲ့ပံုနာမည္ပဲထည့္ပါ။
Output ကိုေတြ႔ရင္နားလည္မယ္လို႔ထင္ပါတယ္။
ဒီေန႔ေတာ့ဒီေလာက္ပါပဲ။ pdf ေတာင္းထားတဲ့ အစ္ကိုေတြကိုလဲ ကြၽန္ေတာ္ HTML ပီးလို႔ CSS မတက္ခင္တင္ေပးပါမယ္။Table နဲ႔ Frame အေၾကာင္းတင္ပီးရင္ HTML ကပီးပါပီ 😁။ဖတ္႐ႈေပးတဲ့အတြက္ေက်းဇူးတင္ပါတယ္။
Written by 
MSC - 187
