وارد کردن تصاویر در صفحات HTML

آیا شما می خواهید یک عکس را به صفحه خود اضافه کنید؟ برای این کار باید از تگ زیر استفاده کنید:

<img src="image.gif">

در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.
مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gif و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید:

<img src="http://www.example.com/images/image.gif">

اگر فایل html و عکس هر دو در یک پوشه باشند می توانید برای راحتی در تایپ کردن از این تگ استفاده کنید:

<img src="image.gif">

پسوند فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.

برای نمونه من می خواهم یک عکس را با نام learn_html.gif را که در پوشه همین صفحه قرار دارد را به این صفحه اضافه کنم. در اینجا از این تگ استفاده کرده ام:

 <img src="learn_html.gif">

با نوشتن این تگ، این تصور را در صفحه نهایی می بینیم:

Learn HTML with NeoPersia.org

به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ <CENTER> در اطراف تگ تصویر استفاده کنید. مانند زیر:

<center>
<img src="learn_html.gif">
</center>

تصویر به دست آمده به صورت زیر است:

Learn HTML with NeoPersia.org

روشهای دیگری هم برای نمایش عکس در وسط صفحه وجود دارد که با توجه به کم کاربرد شدن تگ <center> در نسخه چهارم HTML از آنها استفاده می شود. مثلاً می توان از تگ <div> با شناسه "align="center استفاده کرد.

به خاطر داشته باشید که آدرس محل عکس و نام آن به حروف کوچک و بزرگ حساس هستند. پس ممکن است اگر به جای image.jpg از IMAGE.JPG استفاده کنید ممکن است مرورگر شما عکسی را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید.

 

در مورد اضافه کردن عکسها به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک عکس را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم.


نظرات بازدید کنندگان
نویسنده : mohammad reza
خدمت جناب آقاي ياسرزينلي عزيزم عرض سلام و تشكر دارم از پاسخ شما به سوالاتم كمال تشكر رو دارم
                                 كوچيك شما محمدرضا
 
نویسنده : یاسر زینلی
@mohammad reza
بله تا اینجا درسته. وقتی که تصاویر توی زیر پوشه images باشه برای همه فایلهایی که در پوشه اصلی قرار دارند آدرس دهی به این صورت انجام میشه: (برای اونهایی که در زیر پوشه های دیگه هستند فرق میکنه!)

images/image_name.jpg
 
نویسنده : mohammad reza
آقا ياسر طبق فرمايش شما يه پوشه پروژه ايجاد كردم كه داخل اون  ، پوشه عكس به نام image و فايل html قرار دادم اسم عكسم هم image.jpg گذاشتم تا اينجا درسته ؟ ببخشيد حوصلتو سر ميبرم
 
نویسنده : mohammad reza
مرسي آقا ياسر امتحان ميكنم روش شمارو . من رشتم حسابداريه اما علاقه مند به كامپيوترم
ازكمكت ممنونم
 
نویسنده : یاسر زینلی
@mohammad reza
برای اینکه در آدرس دهی مشکل نداشته باشید اینجوری عملی کنید:
وقتی که یک پروژه رو شروع میکنید یک پوشه اصلی برای پروژه در نظر بگیرید و در اون پوشه همه فایلهای مورد نیاز رو قرار بدید. یک پوشه هم با نام images در همین پوشه پروژه ایجاد کنید و هر جا که نیاز به آدرس دهی تصاویر وجود داشته باشه (و فایل html هم در پوشه اصلی باشه) اینجوری آدرس دهی کنید:

images/image.png

مثلاً تگ تصویر رو میتونید این مدلی بنویسید:
<"img src="images/image_name.jpg" alt="my picture alternative text>

 
نویسنده : mohammad reza
هنگامه خانوم من كاري كه شما گفتيد انجام دادم ولي مشكلم حل نشد
 
نویسنده : mohammad reza
من تمام روشهارو امتحان كردم اما كماكان عسكام به صورت ضربدر مياد
 
نویسنده : mohammad
salam, injoori ke shoma goftin hatman bayad ax too  internet bashe, alan maslan man ye ax dakhele harde pcim daram ino chejoori bezaram ? uplodesh konam to ye jayi ? na asan khodetoon yekam bishtar tozih bedin bebinim chejooir mishe az dakhele pci ye axo gharar dad
 
نویسنده : یاسر
@PhPNuker
این روش بستن تگها مربوط به XML و همینطور استاندارد های XHTML هست و در HTML غیر استاندارد هست و اعتبار سورس رو از بین میبره!
 
نویسنده : PhPNuker
دوستان توجه داشته باشید که کد تصویر رو به صورت    </     ببندید.
 
نویسنده : هنگامه
سلام
دوستای خوبم
مرسی از طراحی همچین صفحه ای
یه چیزی بگم:در مورد بعضی از عکسا که به صورت ضربدر میاد،شما باید هم عکسا هم .html تونو یه جا داشته باشین.مثلا توی درایو D فولدر HTML داریم.اونجا هم (HTML.), هم عکساتونو داشته باشین
مشکل من اینجوری حل شد.
 
نویسنده : mahdana
سلام من هر عکسی را از کامپیوترم می خوام در سایتم قرار بدم همهش علامدر ضربدر نشان میده با تشکر از زحمات شما
 
نویسنده : سهند
ممكن است به من كمك كنيد هر كاري ميكنم نميتوانم از كامپيوتر خودم عكسي رادر سايتي كه دارم درست ميكنم قرار بدم.عكس و فايل htmlهم در يك جا ودر يك پوشه هستند .آيا مشگل از اسمي است كه عكس راباآن save كرده ام؟
متــــــــــــــشكرم
 
نویسنده : mehrdad
با سلام
فقط خواستم بخاطر سایت عالیتون از شما تشکر کنم
 
نویسنده : محمد
باسلام
هر عکسی را که وارد میکنم به صورت ضربدر نشان ميده
منظورتون از اينكه فايل و عكس تو يك پوشه باشه چيه و چطوري آدرس فايل مشخص مي شه؟ لطفا اگه ممكنه جوابمو بديد.
 
نویسنده : فرنوش
با سلام هر عکسی را که وارد میکنم به صورت ضربدر و باز نشده نشان می دهد دلیل چیست؟
 
نویسنده : مهران
من می خواهم تصاویری را که به ایمیلم attach می کنم را در خود صفحه ایمیل هم قرارد دهم.اما نمی دونم چه طوری باید این کار رو بکنم. ممنون میشم اگه راهنمایی کنید
 
نویسنده : Amir
salam

safheye site shoma emrooz kamelan beham rikht !!!! chera?
masalan background abi va kolan formate safe

lotfan age in email bedaste shoma resid behem khabar bedin

ba tashakor
 
نویسنده : سمیرا
با عرض سلام.
لطف کنید این سوال را هم جواب بدهید.
ما می خواهیم تمام تصاویر داخل یم پوشه را بخوانیم تکتک و آنها را ÷شت سر هم نمایش دهیم.
امکان دارد که دوباره داخل این پوشه تصویر جدیدی هم اضافه بشود.
حالا شما بگید من چطوری موتونم این تصاویر را بخوان و بعد نمایش دهم.
با تشکر از زحماتتان
 
نویسنده : صديقه
دستتون درد نكنه واقعا مطالب خوب و جالبي بود بازم ممنون موفق باشيد باي
 
نویسنده : farshad
azizan manzor ine ke on axi ke mikhaid bezarid bayad male ye sait bashe maslan google maslan mirid to google ye ax entekhab mikonid adresesh mishe in http://www.image.google.com/d84jf.jpg  albate begam man sahebe in sait nistam didam inja hichki javab nemide goftam bezar man bedam
 
نویسنده : ali
agha man matlabo dobare khondam moshkele aksa hal shod :P
motshakeramm shadid
 
نویسنده : علی
منم مشکل بالایی ها رو دارم
 
نویسنده : Masaud Azimi
It doesnt work  
  
 
نویسنده : کیارش
راستش من نفهمیدم منظور شما از پوشه ای که عکس و صفحه ما در آن قرار دارد کدوم پوشست......HHHHHHHHMMMMMMMMM
 
نویسنده :
چه جوری می شه یک فایل فلش و وارد کد html کرد
 
نویسنده : fatemeh
سلام مطالب اين صفحه اصلا عملي نيست هركاري مي كنم نمي تونم تو صفحه عكس بيارم . منظورتون از اينكه فايل و عكس تو يك پوشه باشه چيه و چطوري آدرس فايل مشخص مي شه؟ لطفا اگه ممكنه جوابمو بديد.