صفحه اصلی وب سايت واقعآ محشر تماس با ما

طراحي حرفه اي وب سايت : طراحي وب سايت خود را به گروه فناوري اطلاعات ايران بسپاريد

طراحي وب سايت طراحي حرفه اي وب سايت بهينه سازي وب سايت

وارد کردن تصاویر در صفحات 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 استفاده کنید ممکن است مرورگر شما عکسی را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید.

 

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


نظرات بازدید کنندگان
Sun, 07 Jun 2009 09:55:32 +0430 نویسنده : mohammad reza
خدمت جناب آقاي ياسرزينلي عزيزم عرض سلام و تشكر دارم از پاسخ شما به سوالاتم كمال تشكر رو دارم
                                 كوچيك شما محمدرضا
 
Sat, 06 Jun 2009 15:58:07 +0430 نویسنده : یاسر زینلی
@mohammad reza
بله تا اینجا درسته. وقتی که تصاویر توی زیر پوشه images باشه برای همه فایلهایی که در پوشه اصلی قرار دارند آدرس دهی به این صورت انجام میشه: (برای اونهایی که در زیر پوشه های دیگه هستند فرق میکنه!)

images/image_name.jpg
 
Sat, 06 Jun 2009 10:27:09 +0430 نویسنده : mohammad reza
آقا ياسر طبق فرمايش شما يه پوشه پروژه ايجاد كردم كه داخل اون  ، پوشه عكس به نام image و فايل html قرار دادم اسم عكسم هم image.jpg گذاشتم تا اينجا درسته ؟ ببخشيد حوصلتو سر ميبرم
 
Sat, 06 Jun 2009 10:05:36 +0430 نویسنده : mohammad reza
مرسي آقا ياسر امتحان ميكنم روش شمارو . من رشتم حسابداريه اما علاقه مند به كامپيوترم
ازكمكت ممنونم
 
Wed, 03 Jun 2009 13:58:19 +0430 نویسنده : یاسر زینلی
@mohammad reza
برای اینکه در آدرس دهی مشکل نداشته باشید اینجوری عملی کنید:
وقتی که یک پروژه رو شروع میکنید یک پوشه اصلی برای پروژه در نظر بگیرید و در اون پوشه همه فایلهای مورد نیاز رو قرار بدید. یک پوشه هم با نام images در همین پوشه پروژه ایجاد کنید و هر جا که نیاز به آدرس دهی تصاویر وجود داشته باشه (و فایل html هم در پوشه اصلی باشه) اینجوری آدرس دهی کنید:

images/image.png

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

 
Wed, 03 Jun 2009 09:35:27 +0430 نویسنده : mohammad reza
هنگامه خانوم من كاري كه شما گفتيد انجام دادم ولي مشكلم حل نشد
 
Wed, 03 Jun 2009 09:31:56 +0430 نویسنده : mohammad reza
من تمام روشهارو امتحان كردم اما كماكان عسكام به صورت ضربدر مياد
 
Mon, 18 May 2009 16:09:54 +0430 نویسنده : 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
 
Sat, 16 May 2009 23:43:08 +0430 نویسنده : یاسر
@PhPNuker
این روش بستن تگها مربوط به XML و همینطور استاندارد های XHTML هست و در HTML غیر استاندارد هست و اعتبار سورس رو از بین میبره!
 
Thu, 14 May 2009 16:41:06 +0430 نویسنده : PhPNuker
دوستان توجه داشته باشید که کد تصویر رو به صورت    </     ببندید.
 
Sat, 25 Apr 2009 14:11:56 +0430 نویسنده : هنگامه
سلام
دوستای خوبم
مرسی از طراحی همچین صفحه ای
یه چیزی بگم:در مورد بعضی از عکسا که به صورت ضربدر میاد،شما باید هم عکسا هم .html تونو یه جا داشته باشین.مثلا توی درایو D فولدر HTML داریم.اونجا هم (HTML.), هم عکساتونو داشته باشین
مشکل من اینجوری حل شد.
 
Fri, 27 Mar 2009 16:14:23 +0430 نویسنده : mahdana
سلام من هر عکسی را از کامپیوترم می خوام در سایتم قرار بدم همهش علامدر ضربدر نشان میده با تشکر از زحمات شما
 
Wed, 25 Mar 2009 21:26:47 +0430 نویسنده : سهند
ممكن است به من كمك كنيد هر كاري ميكنم نميتوانم از كامپيوتر خودم عكسي رادر سايتي كه دارم درست ميكنم قرار بدم.عكس و فايل htmlهم در يك جا ودر يك پوشه هستند .آيا مشگل از اسمي است كه عكس راباآن save كرده ام؟
متــــــــــــــشكرم
 
Sun, 22 Mar 2009 09:51:49 +0430 نویسنده : mehrdad
با سلام
فقط خواستم بخاطر سایت عالیتون از شما تشکر کنم
 
Thu, 26 Feb 2009 22:03:04 +0330 نویسنده : محمد
باسلام
هر عکسی را که وارد میکنم به صورت ضربدر نشان ميده
منظورتون از اينكه فايل و عكس تو يك پوشه باشه چيه و چطوري آدرس فايل مشخص مي شه؟ لطفا اگه ممكنه جوابمو بديد.
 
Wed, 25 Feb 2009 09:47:21 +0330 نویسنده : فرنوش
با سلام هر عکسی را که وارد میکنم به صورت ضربدر و باز نشده نشان می دهد دلیل چیست؟
 
Sat, 21 Feb 2009 11:19:37 +0330 نویسنده : مهران
من می خواهم تصاویری را که به ایمیلم attach می کنم را در خود صفحه ایمیل هم قرارد دهم.اما نمی دونم چه طوری باید این کار رو بکنم. ممنون میشم اگه راهنمایی کنید
 
Sun, 08 Feb 2009 04:20:05 +0330 نویسنده : 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
 
Mon, 26 Jan 2009 11:23:09 +0330 نویسنده : سمیرا
با عرض سلام.
لطف کنید این سوال را هم جواب بدهید.
ما می خواهیم تمام تصاویر داخل یم پوشه را بخوانیم تکتک و آنها را ÷شت سر هم نمایش دهیم.
امکان دارد که دوباره داخل این پوشه تصویر جدیدی هم اضافه بشود.
حالا شما بگید من چطوری موتونم این تصاویر را بخوان و بعد نمایش دهم.
با تشکر از زحماتتان
 
Fri, 10 Oct 2008 14:04:24 +0330 نویسنده : صديقه
دستتون درد نكنه واقعا مطالب خوب و جالبي بود بازم ممنون موفق باشيد باي
 
Fri, 11 Jul 2008 16:40:17 +0430 نویسنده : 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
 
Sun, 04 May 2008 20:23:28 +0430 نویسنده : ali
agha man matlabo dobare khondam moshkele aksa hal shod :P
motshakeramm shadid
 
Sun, 04 May 2008 19:56:23 +0430 نویسنده : علی
منم مشکل بالایی ها رو دارم
 
Sat, 29 Mar 2008 08:26:09 +0330 نویسنده : Masaud Azimi
It doesnt work  
  
 
ساعت: 02:43 - تاریخ: 11 بهمن 1386 نویسنده : کیارش
راستش من نفهمیدم منظور شما از پوشه ای که عکس و صفحه ما در آن قرار دارد کدوم پوشست......HHHHHHHHMMMMMMMMM
 
ساعت: 16:06 - تاریخ: 27 دی 1386 نویسنده :
چه جوری می شه یک فایل فلش و وارد کد html کرد
 
ساعت: 13:20 - تاریخ: 20 دی 1386 نویسنده : fatemeh
سلام مطالب اين صفحه اصلا عملي نيست هركاري مي كنم نمي تونم تو صفحه عكس بيارم . منظورتون از اينكه فايل و عكس تو يك پوشه باشه چيه و چطوري آدرس فايل مشخص مي شه؟ لطفا اگه ممكنه جوابمو بديد.