Insert images
نحوه درج تصویر در سند HTML.
Insert images from different locations
نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.
(شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.)
تگ <img> و خصوصیت Src
در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.
تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.
برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود.
فرم نوشتاری تگ img
URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.
مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.
خصوصیت ALT
خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.
ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.
اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.
تنظیم طول و عرض یک عکس
خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.
مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.
نکته: این کار خوبی است که خصوصیت عرض و طول یک عکس را مشخص کنید. اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.
نکات اساسی و مفید
نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.
نکته: هنگامی که یک صفحه وب بارگذاری می شود، این مرورگر است که در آن لحظه، تصویر را از سرور دریافت می کند و آن را در صفحه درج می کند. بنابراین، مطمئن شوید که تصاویر به طور دقیق در همان نقطه نسبت به صفحه وب قرار گرفته باشند، در غیر این صورت کاربر عکس را نمی بیند و به جای آن یک آیکن با علامت ضربدر می بیند که نشان دهنده آن است که عکسی برای نمایش پیدا نشده است.
Aligning images
نحوه تراز کردن تصویر در یک متن.
Let the image float
چگونه اجازه دهیم یک تصویر در سمت چپ یا راست یک پارگراف قرار گیرد.
Make a hyperlink of an image
چگونه از یک تصویر به عنوان لینک استفاده کنیم.
Create an image map
چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.
تگ های تصویر
| Tag | Description |
|---|---|
| <img /> | تعریف یک تصویر |
| <map> | تعریف یک image map |
| <area /> | تعریف ناحیه ای به صورت لینک در یک image-map |
برای بدست آوردن مختصات یک تصویر بصورت زیر عمل کنید:
1- در ویندوز، روی فایل تصویر راست کلیک کنید و Properties بگیرید و در پنجره باز شده به تب Details برید.
2- در ویندوز، موس رو روی فایل تصویر نگهدارید تا کادر جزئیات تصویر ظاهر بشه ...
3- فایل تصویر را در فتوشاپ باز کنید و از طریق منوی Image - > Image Size اندازه تصویر رو بدست بیارید.
و ...
1- برای پروژه تان یک نام در نظر بگیرید و یک فولدر با همان نام در یکی از درایوهای کامپیوترتون ایجاد کنید. (مثلا beyamooz)
2- در root اصلی فولدر پروژه، یک فولدر با نام images ایجاد کنید و تصویر مورد نظر را داخل آن قرار دهید. (مثلا myimage.jpg)
3- در root اصلی فولدر پروژه یک فایل با عنوان index.htm ایجاد کنید و محتوای زیر را در آن قرار دهید:
[dir=#555]<html>
<body>
<img src="/images/myimage.jpg" alt="beyamooz" />
</body>
</html>[/dir]
اگه بخوایم چند تا تصویر در یک خط قرار بدهیم که به هم نچسبد باید چی کنیم؟
beyamooz.com/css/87-advance/298-%D8%B3%D8%A7%D8%AE%D8%AA-%DA%AF%D8%A7%D9%84%D8%B1%DB%8C-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%AF%D8%B1-css
برای ناحیه بندی نرم افزار مخصوص داریم؟
واقعا خسته نباشید.
در مورد این کد های یه توصیح بفرمائید
area shape="rect" coords="0,0,82,126"
تفاوت بین HTML 4.01 و HTML5
خصوصیت های: align ،border ،hspace ،longdesc و vspace در HTML5 پشتیبانی نمی شود.
با اینکه align در html5 حذف شده چه طور هنوز اجرا میشن؟ آیا کلیه دستورات حذف شده html4 به همین صورت قابل اجرا هستند؟
در HTML5 تگهای جدیدی اضافه شده که تا حدودی به صفحات وب ساختار و معنی خاصی میبخشه. البته تفاوت تنها در این تگها نیست.
در مورد خصوصیتها معمولا بعضی از آنها با آمدن ورژن جدید، منسوخ میشن و استفادهکردن از آنها دیگه نباید صورت بگیره، ولی چون باید در نسخههای قبلی درست اجرا بشن، اون موارد رو اجرا میکنن.
مثلا تگ align در table و ... که همگی باید توسط css و استایل به این تگها اعمال بشه و به کاربردن خصوصیت دیگه رایج نیست.
1-بخواییم فقط اطلاعاتی در موردشون داشته باشیم یا اینکه
2-سایتی رو که با نسخه قبلی html نوشته شده باشه رو تغییر بدیم.
آیا دلایل بیشتری هم برای یادگیری موارد منسوخ شده وجود داره یا نه؟ چون میخوام سریعتر برم جلو و نمیخوام وقتم صرف جزئیات کمتر ضروری صرف بشه سوال میکنم.
البته بعضی مواقع یادگیری نسخهی قدیمی یک زبان نیاز میشه و نمیشه گفت همیشه بینیاز خواهیم بود.
ولی اصولا هر نسخهی جدید با خودش امکاناتی میاره که بعضی از موارد نسخهی قبل رو عملا بیکاربرد میکنه.
مثلا چند سال پیش خوب یادم هست که چینش سایت توسط تگ table انجام میشد و خبری از استایل و css به این گستردگی نبود. سورس هر سایتی رو که باز میکردی دیزاین و اسکلت توسط تگ table چیده میشد، ولی الآن اصلا اینطور نیست.
برای مشاده تصویر در صفحه وب بایستی ادرس تصویر را به درستی وارد نمایید. در صورتی که سند html و تصویر مورد نظر در یک مکان قرار داشته باشند تنها نام تصویر در جلوی خاصیت src کافی است. ولی در صورتی که تصویر و فایل در یک مکان نیستند ادرس تصویر باید به طور کامل ذکر شود.
برای اینکه با این مثال بخوبی آشنا شوید، ابتدا باید عنصر map و area که لینک آن در انتهای مطلب بالا آمده است را مطالعه فرمایید. اگر باز متوجه نشدید، بفرمایید تا توضیحات بیشتری ارائه شود.
ابتدا باید عکس مورد نظر را با پسوند ico. ایجاد کنید و بعد اون رو در قسمت head لینک کنید .بعنوان مثال می توانید از سایت http://www.favicon.cc/ استفاده کنید. و سپس به صورت زیر عمل کنید:
[dir=#555]<link rel="shortcut icon" href="/http://matrice.ir/templates/protostar/favicon.ico" />[/dir]
ی سؤال داشتم من یک عکس در وب سایتم گذاشتم با توجه به معلوماتی که از وبسایت شما کسب کردم در قسمت تگ ها و کد نویسی هاش هیچ نقصی وجود نداشت اما نمیدونم چرا عکسی که گذاشتم تو وب سایتم لود نمیشه (وب سایتم رو هاست نیست)
در اینکه این سایت در نوع خودش اول است و مطمئنا در آینده ای نزدیک بدون هیچ رغیبی،رتبه اول را به خود اختصاص میدهد. نیاز به زمان است. از شما کاربر محترم ، خواهش دارم که اگر میخواهید تشکر و .. از این کار بسیار ارزشمند نمایید، در پایان و به همراه سوالات انجام دهید.این که یک نظر ثبت نمایید و تنها به عنوان یک تشکر،از ارزش فنی بخش نظرات کاسته میشود
برای اون دسته از کسانی که اشاره میکنند که مثلا ، آقا این مطالب که دز w3 و .. هست و از این طور صحبت ها،باید بگویم که اتفاقا مهم همین ایده و طرحه است. یعنی طراحی یک سایت و وب را در هر حوزه ای،هر کسی میتواند انجام دهد.مهم و ارزشمند همان ایده است خیلی ها آمدن و آموزش برنامه نویسی را با گذاشتن کلاس های آموزشی و دیگری با ارائه سی دی های آموزشی و در حوزه خدمات رایگان هم ،سعی بر گام به گام و .. . اما یک نفر به فکرش رسید که با ترجمه بهترین منابع آموزشی دنیا .. و این ایده و طرح قابل ستایش است
چرا که بیشتر کاربران در ترجمه ضعف دارند. حساسیت را کنار بگذارید
میشه خواهش کنم که برای مثال بالا در قسمت "نحوه تراز کردن تصویر در یک متن." یعنی همان "Aligning images" یک مثال برای تمام حالات در مثال ، یک مثال دیگر قرار دهید که با سی اس اس باشد و یا به گونه ای که در اچ تی ام ال 5 منسوخ نشده باشد
لطفا به صورت توضیح پاسخ ندهید و مانند همان مثال ، یک مثال کامل قرار دهید
قبلا برای وسط کردن عکس و ... در نظرات اشاره کرده اید، اما میشود خواهش کنم که برای تمام حالات در همان مثال ذکر شده، یک مثال به همان شکل در سایت قرار دهید و یا اگر وجود دارد، لینک آن را قرار دهید
با تشکر از سایت بسیار بسیار خوبتان
شما می توانید به جای خصوصیت align از دستور سی اس اس vertical-align استفاده کنید.
برای آموزش بیشتر می توانید به لینک زیر مراجعه نمایید:
www.beyamooz.com/cssref/227-css-properties/880-vertical-align
ممنون از پاسخگویی سریع شما و سایت بروزتان
مدیریت محترم:
از پاسخ شما ، استفاده لازم را نمودم
فقط میشه بگویید که چگونه یک تصویر را در سمت راست و یا چپ پاراگراف قرار دهیم
ببینید برای پاراگراف در سی اس اس و نه برای زمینه . چون برای پس زمینه مطالعه نمودم و این دو یک تفاوت هایی با هم دارند.
این پاسخ قبلی شما هم بسیار کاربردی بود اما برای تراز کردن در یک خط و ...
حال درست مانند مثال بالا که یک عکس را در سمت راست و چپ پاراگراف قرار میدهید، یعنی یک پاراگراف 6 خطی فرضا داریم و حالا یک عکس با ارتفاعی در حدود همان 6 خط را بخوایم در چپ پاراگراف قرار دهیم
به طور که خود پاراگراف و متن تشخیص میدهد که به مکان عکس رسیده است و باید به خط بعد پاراگراف برود
نه مانند روش پس زمینه که این تشخیص را ندارد و متن با اضافه کردن نوشته هر خط، بر روی عکس قرار میگیرد و باید این تنظیمان را جدا انجام داد
بسیار بسیار از سایت خوبتان تشکر میکنم
codepen.io/sbaloot/pen/qdXmoW
به طور خلاصه روند کار به صورت زیر است:
1. ابتدا یک div که در بر دارنده ی تمامی عناصر است ایجاد می کنیم.
2. عکس مورد نظر را با استفاده از تگ img وارد می کنیم.
3.عکس مورد نظر را در یک div که آی دی آن برابر با image است قرار می دهیم.
4.در درون div دربردارنده، یک پاراگراف با آی دی text ایجاد می کنیم.
بعد از این، با استفاده از css مراحل زیر را انجام می دهیم:
1.عرض container را به طور دلخواه برابر با 500 پیکسل قرار می دهیم.
2.عکس را با استفاده از float به سمت راست شناور می کنیم.
3.متن مورد نظر را با استفاده از دستور text-align به سمت راست منتقل می کنیم.
برای وسط قراردادن یک متن، اشاره کردید که از تگ center استفاده نکنیم و از استایل دهی css استفاده شود
حال برای وسط قرار داده عنصری مانند عکس باید چه کرد؟ باز هم از استفاده نماییم
لطفا با مثال توضیح دهید
ضمن اینکه اگر میشود در این باره کمی جامع توضیح دهید. یعنی برای وسط قرار دادن هر عنصری ، مثلا یک کد جاوااسکریپت و ....
تشکر میکنم از سایت بسیار خوبتان
درمورد مختصات عکس ها بیشتر توضیح بدین من هیچی نفهمیدم اون اعدادو از کجا باید پیدا کنم
ممنون
اگه دوتا تصویر داشتیم و خواستیم یکی از اونا مپ باشه چطور تعیین کنیم کدام تصویر مپ باشه؟
با تشکر
همان طور که می دانید از ویژگی usemap در تگ img استفاده می شود تا به مرورگر بفهمانیم که از کدام map استفاده کند، بنابراین برای یکی از دو تصویری که دارید، ویزگی usemap را تنظیم نمایید.
در مثال beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_image_align درون align چه چیزی بنویسیم تا شکلک بیاد وسط صفحه؟
تشکر
برای قرار دادن تصاویر در وسط صفحه نمی توان از ویژگی align استفاده کرد...!
همان طور که می دانید تگ img یک عنصر inline است، یعنی به اندازه محتوایی که دارد طول یک سطر را اشغال می کند ...! بنابراین اگر خصوصیت CSS زیر را روی آن اعمال کنیم، وسط چین نخواهد شد ...![dir=#555]text-align:center;[/dir] اما راه حل این است که تگ img را درون یک عنصر از نوع block مانند p یا div قرار داده و سپس خصوصیت ذکر شده در بالا را روی p یا div تنظیم نماییم.
من متوجه نشدم در مثال آخر(Create an image map) مختصات سیاره های کوچک رو چطور محاسبه کردین!!!
ممنون میشم راهنمایی کنید.
<area shape="rect" coords="0,0,82,126" alt="Sun" href="/sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="/mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="/venus.htm">
</map>[/dir]
توجه بفرمایید که مختصات سه سیاره را بوسیله ی تگ area مشخص می کنیم. یکی را به صورت مستطیل "rect" و مابقی را به صورت دایره یا "circle" مشخص کرده ایم
برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.
نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.
ویژگی coords در تگ area استفاده می شود و مختصات یک ناحیه را در image-map مشخص می کند.
و اما جواب شما دوست عزیز
همان طور که می دانید خصوصیت coords باید همراه خصوصیت shape استفاده شود. حالا با توجه به مقادیری که برای shape تنظیم می کنیم، می توان coords را تنظیم کرد:
rect: اگر shape را مستطیل در نظر بگیریم، coords باید با چهار عدد تنظیم شود. دو عدد اول مختصات نقطه اول را مشخص می کند که بترتیب فاصله از چپ و بالا است و دو عدد دوم مختصات نقطه دوم را مشخص می کند. به این ترتیب با داشتن مختصات دو نقطه، ناحیه ی مستطیل شکل ایجاد می شود.
circle: اگر shape را دایره در نظر بگیریم، coords باید با سه عدد تنظیم شود. دو عدد اول مختصات مرکز دایره را مشخص می کند که بترتیب فاصله از چپ و بالاست و عدد سوم شعاع دایره را مشخص می کند.
poly: اگر shape را یک چند ضعلی در نظر بگیریم، به این ترتیب در خصوصیت coords باید مختصات تمام گوشه ها را ذکر کنیم. اگر مختصات نقطه اول و آخر یکی نباشد، مرورگر بطور پیش فرض نقطه اول و آخر را تطابق می دهد.
توجه: مختصات گوشه بالا و سمت راست 0,0 است.
برای کسب اطلاعات بیشتر در مورد تگ تگ area به لینک زیر مرجعه کنید:
www.beyamooz.com/tags/312-html-tag/1929
برای اشکال دوار ابتدا مختصات مرکز دایره را مشخص می کنیم که در این مثال برای یکی از سیارات 90,58 و برای دیگری 124,58 مشخص شده اند و سپس شعاع دایره را مشخص می کنیم که به ترتیب برای اولین دایره 3 و برای بعدی 8 پیکسل می باشد.
همون اموزشها رو بیرون با هزینه هنگفت و صد البته ناقص تدریس میکنند
من لوگوی خودم رو تو وبم قرار دادم اما با چه تگی اونو از سمت راست به سمت چپ بیارم؟؟؟؟؟؟
ممنون میشم کمک کنید.
حالت 1: اگر لوگو داخل div است و div مذکور تمام طول سطر را اشغال کرده است، بنابراین خصوصیت زیر را روی div تنظیم کنید:[dir=#555]text-align:right;[/dir] یا خصوصیت زیر را روی لوگو تنظیم کنید:[dir=#555]margin-right:0[/dir]
2- اگر کد HTML صفحه پیچیده است، خیلی راحت خصوصیت زیر را روی لوگو تنظیم کنید:[dir=#555]position: absolute;
top: 0;
right: 0;[/dir]
میخواستم بدونم چطور باید تصاویر اسلاید وبلاگمو عوض کنم؟؟
با تشکر از زحماتتون و مطالب سایت بسیار خوبتون که تازه باهاش آشنا شدم...
باید کدهای اسلایدر رو دید و اینکه وبلاگ شما این چنین قابلیتو رو داره یا نه.
سوالتون کلی هست.
[dir=#555]alt="Pulpit rock"[/dir]
برای بررسی لینک تصویر را اشتباه درج کنید و صفحه را ملاحظه فرمایید.
اگه منظورم رو فهمیدید راهنمایی کنید
ممنون@
مثلاً در مدیریت جوملا، باید به منوی "مدیریت ماژول ها" برید و پس از پیدا کردن ماژول مورد نظرتون، نسبت به Positionهای قالب نصب شده، مکان ماژول رو تغییر بدید.
حالا میخواستم ببینم این کار حرومه یا نه؟
این سوال رو باید توی انجمن دینی میفرستادم اما هیچ کدام انها نمیدونند ریپ چیه!اگه شما تایید نمیکنیدممنون میشم جوابش رو به وبم بفرستید!
ممنون
1- در مرورگر فایرفاکس، سایت رو باز کنید.
2- روی منوی سایتتون راست کلیک کرده و گزینه Inspect Element را انتخاب نمایید.
3- در پایین صفحه مرورگر، پنل Inspect Element باز می شود که شامل دو قسمت است، سمت چپ، کدهای HTML صفحه را می بینید و سمت راست، کدهای CSS عنصر انتخاب شده را خواهید دید. بنابراین روی عناصر در سمت چپ حرکت کنید تا به div حاوی منو برسید.
4- حالا که div مذکور در حالت انتخاب است، سمت چپ پنل Inspect Element خصوصیت float:right را اضافه نمایید.
5- زمانی که نتیجه رضایت بخش بود، خصوصیت یا خصوصیت های اضافه شده را به فایل css قالبتون اضافه نمایید.
چطوری این تگ ها رو جاشون رو عوض کنم؟
با CSS نمی توانید موارد ذکر شده را جابه جا کنید و باید در کد دست ببرید. در این صورت زمان آپدیت به مشکل برخواهید خورد ...! (یعنی اگر هم موفق بشید جابه جا کنید، زمان آپدیت CMS همه چیز به روز اول بر میگرده)
فهمیدم!
بنده برای قرار دادن یک تصویر در کنار صفحه سمت چپ باید چه کدی را وارد کنم و
لطفا راهنمایی نمایید که مختصات قسمت های مختلف را چگونه وارد کنم وکدهای مربوطه به این موضوع چه کد هایی میباشند.
خیلی ممنون
با تشکر از زحمات شما
سوالتون کمی گنگ هست. برای قراردادن تصویر میتونید از تگ img یا از خصوصیت background-image از طریق css استفاده کنید. موقعیت تصویر رو هم میتونید از طریق css تعیین کنید.
کد زیر در CSS باعث ایجاد تصویر در گوشه سمت چپ پایین مرورگر خواهد شد.
[dir=#555].divImg{
left:0;
bottom:0;
position:fixed;
background-image: url("image.jpg");
background-repeat: no-repeat;
height:200px;
width:200px;
}[/dir]
بنابراین فرض کنید یک تگ img در صفحه داریم که می خواهیم برای قابل کلیک کردن قسمت هایی از آن، آنرا ناحیه بندی کنیم، خوب برای ناحیه بندی عکس، نیاز به یک عنصر دگیر بنام map داریم، مسلماً خواهید پرسید که حالا چطوری این دوتا تگ را به هم وصل کنیم ...؟ جواب این سوال، در حقیقیت در سوالی است که شما پرسیده اید ...!
برای توضیحات بیشتر لطفاً به لینک زیر مراجعه نمایید:
beyamooz.com/tags/312-html-tag/2256-%D8%AA%DA%AF-map
برای ایجاد لینک با استفاده از تگ a چندتا چیز رو باید رعایت کنید:
1- تنظیم خصوصیت href با آدرس مورد نظرتان، اگر ویژگی href را نداشته باشد آن تنها یک نگهدارنده مکان برای یک لینک است و تنها بصورت یک متن معمولی نمایش داده می شود.
2- تگ a باید تگ پایان داشته باشد.
میخوام از کاربر بخواهم که عکس خود را در صفحه لود کند. و آن عکس در صفحه دیده شود.
ممنون میشم اگر راهنماییم بفرمایید
1- آموزش PHP:
beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-php
2- آموزش ASP.NET:
beyamooz.com/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net
www.beyamooz.com/css/87-advance/298
شما در قسمت "خصوصیت Alt" گفتید: نیز اگر موس را روی آن عکس ببریم این نوشته نمایش داده می شود!
این قاعده برای خصوصیت Alt نیست، بلکه برای خصوصیت title هست.
لطف تصحیح بفرمایید.
با تشکر
1- فولدری با نام style: در این فولدر، فایل های CSS خارجی سایت قرار دارد.
2- فولدری با نام images: همان طور که از اسم آن پیداست، شامل عکس های سایت است.
3- فولدری با نام js: شامل فایل های جاوااسکریبت است
4- فولدری با نام core: شامل فایل های برنامه نویسی شده همراه با فایل های HTML
حالا فایل core/test.html را تصور کنید که داخل آن قصد داریم یک عکس استفاده کنیم، برای آدرس دهی عکس توسط خصوصیت src، به نکات زیر توجه فرمایید:
1- فایل test.html داخل فولدر core است بنابراین برای رسیدن به فولدر images باید با استفاده از دو نقطه (..) یک گام به عقب برگردیم.
2- عکس های سایت داخل فولدر images، است بنابراین برای دسترسی به عکس ها، باید وارد فولدر images شویم.
نهایتاً خصوصیت src تگ img را بصورت زیر مقداری دهی می کنیم:
src=../images/bg.gif
برای ترازبندی یک عنصر، قبل از هر چیز باید مفهوم عناصر block و inline را کاملاً متوجه شده باشید.
1- عناصر block عناصری هستند که تمام طول یک سطر را به خود اختصاص می دهند، مثل div و ul و p، حالا تصور کنید بخواهیم، محتوای هر کدام از این عناصر را وسط چین کنیم، خوب براحتی با استفاده از خصوصیت text-align و مقدار center محتوی، وسط چین خواهد شد.
2- عناصر inline: عناصری هستند که طول یک سطر را تنها به اندازه ی محتوایی که دارند، اشغال می کنند، مثل عنصر img و a و span، حالا تصویر کنید با روش قبل (text-align=center) بخواهیم عکس را وسط چین کنیم، خوب بنظرتان، عکس وسط چین می شود، خیر نمی شود ...! شاید دلیل وسط چین نشدن عکس را درک نکرده باشید، اجازه دهید تا بیشتر توضیح بدهم! مثال را با دقت بیشتری نگاه کنید:
گفته ایم که محتوای تگ img وسط چین شود، خوب حالا شما بگید، زمانی که تگ img به اندازه ی محتوایش، طول یک سطر را اشغال می کند، بنابراین text-align=center بی معنی است.
پس برای وسط چین کردن عکس چی کار کنیم ...؟ چند روش برای این کار وجود دارد:
1- عکس را داخل یک عنصر block مثل div قرار بدید و سپس text-align=center را روی div اعمال کنید.
2- عنصر img را block کنیم، بنحوی که تمام طول سطر را اشغال کند. با استفاده از خصوصیت display در css می توان عناصر را inline یا block کرد، نهایتاً خصوصیت CSS زیر را برای وسط چین کردن عکس تنظیم نمایید:
display:block; margin:0 auto
از استاتید محترم، اگر روش های دگیری به نظرشان می رسد، همینجا ذکر نمایید.