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

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

وارد کردن تصاویر در صفحات 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
دوستان توجه داشته باشید که کد تصویر رو به صورت    </     ببندید.