HTML Images
Website တစ်ခုကို ဆွဲဆောင်မှုရှိစေဖို့ ပုံတွေဟာလည်း မရှိမဖြစ်လိုအပ်ပါတယ်။ ဒါကြောင့် site တစ်ခုရေးတော့မယ်ဆိုရင် ပုံတွေကို လင့်တစ်ခုကနေ ဖြစ်ဖြစ် ကိုယ့်ရဲ့ကွန်ပျူတာကနေ ဖြစ်ဖြစ် ကိုယ့်ရဲ့ site ပေါ်မှာ ထည့်တတ်ဖို့ လိုလာပါပြီ။ ဒါကြောင့် ဒီတစ်ခေါက် ကျွန်တော်တို့ html images တွေအကြောင်းကို လေ့လာကြပါစို့။
<html> <body> <p> An image: <img src="1.jpg" width="200" height="200" /> </p> <p> A moving image: <img src="2.gif" width="150" height="200" /> </p> </body> </html>
အခုဒီကုဒ်မှာ လှုပ်ရှားနေတဲ့ပုံ တစ်ပုံရယ် ပုံသေတစ်ပုံရယ် ပါ ပါတယ်။ လှုပ်တဲ့ပုံပဲ ဖြစ်ဖြစ် မလုပ်တဲ့ပုံပဲ ဖြစ်ဖြစ် ရေးနည်းကတော့ အတူတူပါပဲ။ တစ်ခုသတိထားရမှာက ပုံရဲ့ Extension ပါပဲ၊ ပုံက .jpg extension ဆို ရေးတဲ့အခါမှာလည်း name.jpg ဖြစ်ရပါမယ်၊ ပုံက .gif extension ဆို ရေးတဲ့အခါမှာလည်း name.gif ဖြစ်ဖို့လိုပါတယ်။ name ဆိုတာကတော့ ပုံနာမည်ကိုပြောတာပါ။ ပုံရဲ့ width နဲ့ height ကတော့ ထည့်သင့်တဲ့အကြောင်းကို ပြောပြီး ဖြစ်ပါလိမ့်မယ်။ အခုပြသွားတဲ့ tutorial ကတော့ ကိုယ့်ရဲ့စက်ထဲကနေ ထည့်တာပဲဖြစ်ပါတယ်။ ဒီတော့ လင့်ခ်တစ်ခု(အွန်လိုင်း)ကနေ တစ်ပုံလောက် ထည့်ကြရအောင်ဗျာ။
<html> <body> <p> An image from World Wide Web </p> <img src="http://www.showbizsandbox.com/wp-content/uploads/2009/12/avatar-navi.jpg" alt=“Avatar” width="200" height="200" /> </body> </html>
<img> tag ဟာ empty tag ဖြစ်ပါတယ်၊ ဆိုလိုတာကတော့ သူ့မှာ အပိတ် tag မရှိဘူးလို့ ပြောတာဖြစ်ပါတယ်၊ ဒါကြောင့် သူ့ကို အဖွင့် tag မှာကတည်းက /> လေးထည့်ရေးပေးရပါတယ်။ src ဆိုတာကတော့ source ရဲ့ အတိုကောက်ပေါ့ ပုံရှိတဲ့ source ကို ရှာပေးတဲ့ ကုဒ်ဖြစ်ပါတယ်။ နောက်ပြီးတော့ alt ဆိုတာလေး ပါလာပါပြီ၊ alt ဆိုတာ alternate text (or) alternative description ပဲဖြစ်ပါတယ်။ သူကဘာအသုံးဝင်သလဲဆိုတော့ browser က ပုံတွေကို loading မလုပ်နိုင်တဲ့အခါမျိုးမှာ ပုံပေါ်မယ့် လေးထောင့်ကွက်ထဲမှာ alternative text မှာထည့်ထားတဲ့ စာကပေါ်နေမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် alt ထည့်ပေးခြင်းဟာ အလေ့အထကောင်းတစ်ခုလို့ ဆိုလို့ရပါတယ်၊ text-only browser သမားတွေအတွက် အဆင်ပြေတာပေါ့ဗျာ။
မှတ်ချက်။ ။ ဆိုဒ်တစ်ခုမှာ ပုံငါးပုံပါတယ်ဆိုပါစို့၊ အဲဒီဆိုဒ်ကို ပြနိုင်ဖို့အတွက် ဖိုင်ခြောက်ဖိုင်လိုပါတယ်(html တစ်ဖိုင်ရယ် ပုံငါးဖိုင်ရယ်)၊ ပုံတွေက loading လုပ်တဲ့အခါ ကြာပါတယ်၊ ဒါကြောင့် ပုံတွေကို စနစ်တစ်ကျ ဂရုတစ်စိုက် သုံးစေချင်ပါတယ်၊(height တွေ width တွေ လျှော့သင့်ရင်လျှော့ပေါ့ဗျာ)
ဒါဆိုရင် ပုံအကြောင်း အခြေခံ knowledge ပြီးပါပြီ၊ tutorials လေးတွေ လုပ်ကြည့်တာပေါ့။
နောက်ခံပုံ
နောက်ခံပုံထည့်မယ်ဆိုရင်တော့ .gif နဲ့ .jpg ဖိုင်တွေကို အသုံးပြုလို့ရပါတယ်။ တစ်ကယ်လို့ ပုံအရွယ်က သေးနေမယ်ဆိုရင်တော့ သူ့ဘာသာ ထပ်ထပ်ပြီး နောက်ခံကိုပြည့်အောင် ဆက်ပေးပါလိမ့်မယ်။
<html> <body background="background.jpg"> <p>HTML, Edited by Lukaar.</p> </body> </html>
ဒီကုဒ်မှာတော့ ပုံတစ်ပုံကို သိမ်းပြီး background လို့ ကျွန်တော်ပေးလိုက်ပါတယ်၊ ပုံအမျိုးအစားက jpeg ဆိုတော့ကာ background.jpg ဖြစ်သွားတာပေါ့။ ကျွန်တော်တို့က body background (တစ်ခုလုံးနောက်ခံ) လုပ်မှာဖြစ်တဲ့အတွက် body code ဘေးမှာ ထပ်ရေးပေးလိုက်ရတာပါ။
စာသားထဲက ပုံတွေရဲ့ alignment
<html> <body> <p>An image <img src="2.gif" align="bottom" width="100" height="100" /> in the text.</p> <p>An image <img src="2.gif" align="middle" width="100" height="100" /> in the text.</p> <p>An image <img src="2.gif" align="top" width="100" height="100" /> in the text.</p> <p><b>Note:</b> The bottom alignment is the default!</p> <p>An image <img src="2.gif" width="100" height="100" /> in the text.</p> <p><img src="2.gif" width="100" height="100" /> An image before the text.</p> <p>An image after the text. <img src="2.gif" width="100" height="100" /></p> </body> </html>
ဒီကုဒ်တွေမှာတော့ ပုံကို စာသားတွေကြားထဲ၊ အရှေ့နဲ့ အနောက်မှာ ထည့်ထားပေးပါတယ်။ အဲဒီလိုထည့်ထားရင်ကပဲ ပုံတွေကို alignment လုပ်ပါတယ်၊ ဘယ်လို alignment လုပ်လဲဆိုတော့ ပုံအောက်ခြေနဲ့ စာကို တစ်တန်းထဲထားမှာလား၊ ဒါမှမဟုတ် ပုံရဲ့အလယ်နဲ့ စာ တစ်တန်းထဲလား၊ ပုံအပေါ်ပိုင်းနဲ့ တစ်တန်းတည်းထားမလားဆိုတာတွေပါ။ လေ့လာကြည့်ပါဦး။ bottom alignment ကတော့ default ပါ။
ဘယ်ပုံ ညာပုံ
<html> <body> <p> <img src="2.gif" align="left" width="100" height="100" /> စာရဲ့ဘယ်ဘက်မှာ ပုံကိုပေါ်စေတာဖြစ်လို့ align မှာ left လို့ရေးပါတယ်။ </p> <br/><br/><br/> <p> <img src="2.gif" align="right" width="100" height="100" /> စာရဲ့ညာဘက်မှာ ပုံကိုပေါ်စေတာဖြစ်လို့ align မှာ right လို့ရေးပါတယ်။ </p> </body> </html>
Code ထဲမှာ မြန်မာလိုရေးပြီး ရှင်းပြထားပါတယ်။ မြန်မာလိုအကြောင်းကို ရှေ့ပိုင်းမှာ ပြောပြီးပါပြီ။
အရွယ်အစား ချိန်ညိ ှခြင်း
အရွယ်အစားတွေ ကြီးချင် သေးချင်တယ်ဆိုရင်တော့ height တွေ width တွေ သုံးပြီးတော့ ညိ ှလို့ရပါတယ်။
<html> <body> <p> <img src="2.gif" width="20" height="20" /> </p> <p> <img src="2.gif" width="45" height="45" /> </p> <p> <img src="2.gif" width="70" height="70" /> </p> <p> <img src="2.gif" width="100" height="100" /> </p> </body> </html>
Coming: HTML Tables
Facebook comments:
