Html image tag
wailynnooကျွန်တော်တို့ရဲ့ website မှာ image တွေဘယ်လိုထည့်သွင်းမလဲဆိုတာ လေ့လာကြပါမယ်။
<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>
<img src="photo.jpg" />
</body>
</html>
ဒီ example လေးကိုလေ့လာလိုက်ရင် image ဘယ်လိုထည့်လဲဆိုတာသိနိုင်ပါတယ်။ အဲဒီ image ဟာ ကျွန်တော်တို့ html file နဲ့ folder တစ်ခုထဲရဲ့အောက်မှာရှိရပါမယ်။
ကျွန်တော်တို့ image တွေကို images ဆိုတဲ့ folder တစ်ခုရဲ့အောက်မှာ စုစည်းထားပြီးခေါ်သုံးချင်တယ် ဆိုရင်တော့ ဒီလိုရေးနိုင်ပါတယ်။
<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>
<img src="images/photo.jpg" />
</body>
</html>
ကျွန်တော်တို့ရဲ့ image ကိုလိုချင်တဲ့ width နဲ့ height ကိုသတ်မှတ်ပေးနိုင်ပါတယ်။
<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>
<img src="images/photo.jpg" width="450" height="300" alt="This is my photo" />
</body>
</html>
ဒီ example မှာ alt=”This is my photo” ဆိုတဲ့ attribute ကတော့ ပုံမရှိတာတို့ နာမည်မှားတာတို့လို error တစ်ခုခုကြောင့် ပုံမတက်တဲ့အခါ ပေါ်မဲ့စာသားဖြစ်ပါတယ်။
ကျွန်တော်တို့ရဲ့ ပုံဟာ ကျွန်တော်တို့သတ်မှတ်ပေးထားတဲ့ width နဲ့ heighit အတိုင်းပေါ်ပါလိမ့်မယ်။
ကျွန်တော်တို့ပုံလေးကို ဘောင်လေးကွပ်ကြည့်ကြပါမယ်။
<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>
<img src="mandalay.jpg" border="5" />
</body>
</html>
ကျွန်တော်တို့ image ကို စာပိုဒ်တွေနဲရောနှော ဖေါ်ပြတဲ့အခါ စာပိုဒ်ရဲ့ ဘယ်နေရာမှာ image ကို နေရာချမလဲဆိုတာကို align ဆိုတဲ့ attribute ကို သုံးပြီးစီစဉ်ဆောင်ရွှက်လို့ရပါတယ်။
<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>
<img src="photo.jpg" align="left"/>
This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test.
</body>
</html>
ဒီ example လေးက align ဆိုတဲ့ attribute မှာ အခြား value တွေအနေနဲ့ right, top, bottom, middle စတာတွေရှိပါတယ်။ value နေရာမှာပြောင်းပြီးထည့်ကြည့်နိုင်ပါတယ်။
ကျွန်တော်တို့ image နဲ့ စာပိုဒ်တွေရဲ့ကြားမှာရှိတဲ့ space ကို အပြောင်းအလဲပြုလုပ်နိုင်ပါတယ်။
<html>
<head>
<title>Image</title>
</head>
<body>
<h3>Our Image</h3>
<img src="photo.jpg" align="left" hspace="25" vspace="25"/>
This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test. This is image alignment test.
</body>
</html>
ဒီ example လေးမှာ hspace attribute က image ရဲ့ ဒေါင်လိုက်အနေအထားအတိုင်း image ရဲ့ ဘယ်ဘက်မှာရောညာဘက်မှာပါ space ခြားပေးပါတယ်။ vspace ကတော့ ပေါ်နဲ့ အောက်ပေါ့ နားလည်မယ်ထင်ပါတယ်။
နောက်ပြီး အခြား site မှာရှိနေတဲ့ image တွေကိုလည်း ကျွန်တော်တို့ site ကိုခေါ်ထည့်လို့ရပါတယ်။ scr=”http://www.example.com/photo.jpg” ဆိုပြီး source မှာ url ထည့်ပေးလိုက်ရုံပါဘဲ။ image ရဲ့ url ကိုတော့ အဲဒီ image ပေါ်မှာ Right Click ထောက်ပြီး Copy Image Location ဆိုယူပြီး Paste လုပ်လိုက်ရုံပါဘဲ။
One comment
နိုင်နိုင်
June 16, 2011 at 7:00 am
အဲလိုမျိုး အသေးစိတ် ရှင်းပြပေးတဲ့ အတွက် ကျေးဇူးအများကြီးတင်ပါတယ် အခြေခံလေ့လာသူများအတွက် ပုံလေးတွေထဲ့ပြီးရှင်းပြရင် ပိုကောင်းမယ်ထင်ပါတယ်။ဆက်ပြီး ရေးလိုက်ပါဦးဗျာ။