آموزش html - قسمت پنجم - عکس
در این مبحث ما به چگونگی اضافه کردن تصاویر به صفحه وب می پردازیم.
یکی از مشکلات اصلی استفاده از تصاویر در صفحات وب ، مدت زمان طولانی تر بار گذاری تصاویر در صفحات نسبت به متون است . بنابراین هر چه حجم این تصاویر کمتر باشد ، مدت زمان بارگذاری صفحه کمتر می شود.
قبل از آغاز نمودن بحث باید به این نکته توجه کرد که gif: graphics interchange format و jpg: joint photographic group دو نوع فرمت رایج تصاویر در صفحات وب هستند.
استفاده از کدام یک بهتر است؟؟
برای Banner , button , divider و clipart ها بهتر است که از فرمت GIF استفاده کنیم.
از آنجایی که تصاویر با فرمت JPG را می توان فشرده کرد , هر چند که کیفیت آن کاهش پیدا می کند, ولی حجم آن نیز کم می شود, پس برای عکس ها بهتر است از فرمت JPG استفاده کنیم.
قرار دادن تصاویر در صفحه وب:
برای قرار دادن تصاویر در صفحه از دستور <img> استفاده می کنیم و برای مشخص کردن آدرس این تصویر از صفت src این دستور بهره می گیریم. بنابراین شکل کلی این دستور به صورت زیر است:
<img src="url">
اگر مکان عکس در همان Folder ی باشد که فایل html شما در آن قرار دارد , کافی است به جای URL ، نام عکس همراه با فرمت آن را ذکر کنید.
مثال 1:
ابتدا پوشه test را در درایو C خود بسازید و یک تصویر با نام img1 و با فرمت jpg در آن قرار دهید سپس ویراستار Notepad یا Notepad++ خود را باز کنید و در قست بدنه فایل html خود کد زیر را تایپ کنید و سپس این فایل را با نام دلخواه و با پسوند htm در درایو C خود و در پوشه test ذخیره کنید.
<img src="img1.jpg">
اکنون با باز کردن فایل html خود , تصویر img1 را مشاهده خواهید کرد.
اما اگر تصویر مورد نظر در یک سایت دیگر باشد باید آدرس کامل مکان عکس را به جای URL قرار دهید.
مثال 2:
<img src="http://www.siteURL.com/??/?.gif">
در صورتیکه فایل مورد نظر در پوشه ای بیرون از پوشه جاری بود چطور عمل کنیم؟
برای اینکه از پوشه خارج شویم یا یک مرحله به عقب برگردیم کافی است در ابتدای آدرس /.. را قرار دهیم. به کمک این روش به هر تعداد که بخواهیم می توانیم به عقب برگردیم. برای روشن شدن موضوع فرض کنید فایل html در پوشه files قرار گرفته یعنی آدرس آن به شکل myWebsite/files/page1.html است و عکس مورد نظر در پوشه images با مسیر myWebsite/images/image1.jpg قرار دارد. برای آدرس دهی این عکس و قرار دادن آن در فایل page1.html باید ابتدا یک پوشه به عقب بر گردیم و سپس وارد پوشه images شویم و نام فایل مورد نظر را وارد کنیم. یعنی آدرس عکس را باید به صورت images/image1.jpg/.. وارد نماییم. به شکل توجه کنید:
height , width :
با استفاده از صفت های width و height از دستور <img> می توان اندازه تصاویر را تغییر داد. مقداری که برای این صفت تعریف می شود , می تواند بر حسب پیکسل یا درصد باشد. معمولا برای کاهش سایز تصاویر بهتر است از برنامه گرافیکی استفاده کرد تا از این صفت , زیرا استفاده از این صفت برای کاهش سایز مدت زمان بار گذاری صفحه وبتان را افزایش می دهد. در عین حال برای بزرگ تر کردن تصاویر از حالت عادی , استفاده از این صفت توصیه می شود.
مثال 3:
<img src="img1.jpg" width="60" height="60">
مثال 4:
<img src="img1.jpg" width="50%" height="60%">
در مثال 4 ارتفاع وعرض تصویر به ترتیب 60% و%50 از اندازه صفحه مرور گر شما را تشکیل می دهد.
یعنی با استفاده از درصد (%) به هر اندازه که صفحه مرورگرتان را تغییر سایز دهید , تصویر در آن صفحه نیز به همان نسبت کوچک یا بزرگ خواهد شد.در حالی که با استفاده از مقدار پیکسلی اندازه تصویر همواره ثابت خواهد ماند.
border :
با استفاده از این صفت می توان برای تصویر مورد نظر حاشیه یا کادری با ضخامت دلخواه ایجاد کرد. به طور پیش فرض و بدون استفاده از این صفت ، هیچ کادری دور تصویر وجود ندارد.
مثال 5:
کادر با ضخامت 4 دور تصویر
<img src="img1.jpg " border="4">
alt :
صفت alt که مخفف alternative است. سه کاربرد اصلی این صفت عبارتند از:
1. هرگاه تصویر مورد نظر به هر دلیل نمایش داده نشود این متن به جای آن تصویر قرار می گیرد.
2. با قرار گرفتن موس روی تصویر توضیحی از آن نمایش داده میشود.
3. برای افراد معلول امکان خواندن توضیح تصویر توسط نرم افزارهای مخصوص محیا میشود.
مثال 6:
<"img src=" img1.jpg" alt="matn jaygozin>
صفت های hspace و vspace :
با استفاده از صفت hspace می توان فضایی را در سمت راست و چپ تصویر در نظر گرفت.
با استفاده از صفت vspace می توان فضایی را در بالا و پایین تصویر در نظر گرفت.
مثال 7:
<img src="img1.jpg" Hspace="30" Vspace="10>
این صفت معمولا هنگامی که یک متن را می خواهیم با تصویر بیاوریم بسیار مفید خواهد بود. زیرا متن در اطراف این فضا قرار خواهد گرفت و عکس محفوظ می ماند و در صورت لزوم این متن شکسته خواهد شد.
align :
با استفاده از این صفت می توانیم چگونگی قرار گرفتن تصویر را در متن مشخص کنیم. مثلا مطلوب ما این است که تصویر در بالای متن قرار گیرد یا در پایین متن.
با استفاده از مقادیر top(بالا) , bottom (یایین) و middle (میانه یا وسط) می توان متن را در بالا , پایین یا وسط تصویر قرار داد.
مثال 8:
<img src ="img1.jpg" align="top">
علاوه بر مقادیر top , bottom وmiddle ، مقادیر دیگری نیز برای این صفت موجود است که به شرح هر یک می پردازیم.
Texttop : با این مقدار بالای تصویر با بالای بزرگترین کاراکتر تنظیم می شود.
Absmiddle : با این مقدار وسط تصویر با وسط متن تنظیم می شود.Baseline : با این مقدار پایین تصویر با پایین کشیده ترین کاراکتر رو به پایین تنظیم می شود.
left و right :با این دو مقدار می توان تصویر را به سمت چپ یا راست متن انتقال داد.
مثال 9:
<img src ="img1.jpg" align="left>
ادامه » آموزش html - قسمت ششم - جدول
بازگشت « آموزش html - قسمت چهارم - لیست