آموزش طراحی وب با زبان ساده بخش اول xhtml

[sr.majid]

امروز میخوام تگ img رو آموزش بدم ولی قبلش راجع به سه فرمت متداول عکس ها یه توضیحی میدم در آینده شاید بدردتون بخوره و اطلاعات عمومیتون بالا تر بره
به جدول پائین دقت کنید


transparancy : به عکسی گفته میشود که بک گراند ندارد و رنگ بک گراند آبجکت زیری خودش رو میگیره
animation : به عکس های متحرک گفته میشه (معمولاً در مواقعی استفاده میشه که بخواهیم جائی جلوه توجه بکنه)
interlacing : در بسیاری از سایت ها عکس حرف اول رو میزنه مثل سایت های گالری که باید در موقع استفاده از عکس این کار رو هوشمندانه استفاده بکنیم روال به این شکل هست که یک عکس کوچک قرار داده شده که حجمش هم از نظر رزولیشن هم از نظر کیلوبایتی کمتر هست و با کلیک بر روی اون عکس بزرگتر از نظر رزولیشن و کیلوبایتی رو میبینیم ، اگر دقت کنید در زمان لود شدن یک عکس اون عکس به یکباره نشون داده نمیشه بلکه به صورت تدریجی و مرحله به مرحله از بالا به سمت پائین نشان داده میشه به این قابلیت اینترلیسینگ گفته میشه
comperssion : یکی از عوامل بسیار مهم در طراحی وب این هست که از عکس هائی استفاده کنیم که حجم کمی داشته باشن تا صفحه راحت تر لود بشه کامپریشن در طراحی وب به دو دسته تقسیم میشود

1. lossy : در این نوع فشرده سازی اگر سایز عکس از نظر کیلوبایتی کاهش پیدا کنه عکس هم به تدریج کیفیت خودش رو از دست میده (یعنی عناصر تشکیل دهنده عکس یا همان پیکسل کاملاً مشخص میشه)
2. lossless : در این نوع فشرده سازی وقتی سایز عکس از نظر کیلوبایتی کاهش پیدا میکند کیفیت عکس از بین نمیرود

نکته : قابلیت ترنسپرنسی در ورژن ie6 ساپورت نمیشود
نکته : فرمت gif دو نوع ورژن دارد 87a که انیمیشن رو ساپورت نمیکنه و 89a که انیمیشن رو ساپورت میکنه
نکته : عکس هائی که تحت وب هستن رزولیشنشون باید رو 72 پیکسل باشه چون بیشتر از اون به هیچ دردی نمیخوره


web addressing : آدرس دهی در صحات وب به دو دسته تقسیم میشن relative و absolute
ریلیتیو : این نوع آدرس دهی یکی از متداول ترین آدرس دهی هست زمانی استفاده میشه که بخواهیم آبجکتی رو از داخل یک وب سایت (rootfolder) به داخل صفحه ائی وارد کنیم که آن صفحه هم داخل همون وب سایت هست ، به عبارتی اگر بخواهیم در یک وب سایت به صفحه دیگری برویم که آن صفحه هم در همان وب سایت قرار دارد از آدرس دهی relative استفاده میکنیم

ابسولوت : این آدرس دهی نسبت به قبلی کمتر مورد استفاده قرار میگیره زمانی که بخواهیم آبجکتی رو از خارج از یک وب سایت (rootfolder) وارد یکی از صفحات سایتمان نمائیم از این آدرس دهی استفاده میکنیم ، به عبارت دیگه اگر بخواهیم از یکی از صفحات وب سایتمان به یک وب سایت دیگر برویم از این آدرس دهی استفاده میکنیم این آدرس دهی با پروتوکول

http://

آغاز میشه


تگ img از خانواده empty هست پس بنابراین به این صورت نوشته میشه

<img />

اتریبیوت تگ img هست : src
ولیو آن آدرس عکسی هست که میخواهیم قرار بدیم

نکته : همیشه در rootfolder یک پوشه بسازید به اسم images و همه عکس هارو در اون ذخیره کنید
نکته : برگشتن به یک ریشه عقب تر از

../

استفاده میکنیم و اگر خواستیم به دو ریشه عقب تر برویم باید از

../../

استفاده کنیم
مثال:

<img src="http://www.webhostingtalk.ir/images/pasha.jpg" />

اتریبیوت دیگر تگ img هست : border
ولیو اون یک عدد هست این اتریبوت دور عکس حاشیه ایجاد میکنه اگر روی 0 باشه بدون حاشیه خواهد بود و هر چه عدد بزرگتر باشه حاشیه ضخیم تر خواهد بود


اتریبیوت دیگر تگ img هست : hspace
ولیو آن یک عدد هست ، برای فاصله قرار دادن افقی بین آبجکت ها استفاده میشه هم از راست هم از چپ بصورت مساوی


اتریبیوت دیگر تگ img هست : vspace
ولیو آن یک عدد هست ، برای فاصله قرار دادن عمودی بین آبجکت ها استفاده میشه هم از بالا هم از پائین بصورت مساوی


نکته : به عنوان طراح این نکته رو مورد نظر قرار بدین که هیچوقت نبایت از دو اتریبیوت وی اسپیس و اچ اسپیس استفاده کنید به دو دلیل یکی اینکه ممکن هست عکس به صورت متناسب تغییر پیدا نکنه و دیگری اینکه با استفاده از این دو اتریبیوت سایز عکس شما از نظر کیلو بایتی تغییری نمیکنه و زمان لود شدن اون عکس به همان اندازه زمان لود شدن عکس با رزولیشن خودش هست

اتریبیوت دیگر تگ img هست : align
ولیو آن top , bottom , middle , left , right هست وظیفه این اتریبیوت کنار هم قرار دادن یک عکس و یک متن هست


نکته : چنانچه در داخل تگ img از اتریبیوت align استفاده شده باشه و متن کنار تگ img به واسطه jusstify شدن در داخل تگ p باشه به صورت استثنائی تگ p خاصیت بلاک لول بودن خودش رو از دست میده (فقط از لحاظ اینتر زدن)
نکته : برای کنار هم قرار دادن یک متن و یک عکس باید حتماً متن مورد نظرمون سمت راست تگ img قرار داشته باشه

اتریبیوت دیگر تگ img هست : alt
این اتریبویت خیلی مهم هست و حدالمقدور ازش استفاده کنید ، این اتریبیوت سه کار انجام میده ولیو اون هم بسته به این هست که بخواهید چه نوشته ائی داشته باشه مثلاً عکسی طر صفحه وبتو طراحی کردید که لینک شده به صفجه home به این شکل نوشته میشه

<img src="http://www.webhostingtalk.ir/images/pasha.jpg" alt="pasha" title="pasha" />

1.tooltip
2.replace text when
3.search engine optimization (seo)
اولی زمانی که موس رو روی یک عکس قرار بدیم نوشته ائی به ما نشون میده
دومی زمانی که یک عکس به هر دلیلی لود نشه بجای اینکه ضربدر به ما نشون بده متن داخل اتریبیوت آلت رو به ما نشون میده این گزینه زمانی خودش رو خیلی خوب نشون میده که یک سایت لینک هاش از عکس درست شده باشن
سومی هم که کاملاً مشخص هست در موتور های جستجو خیلی به کمکتون میاد (در مقطع خودش کاملتر راجع به سئو توضیح داده میشه)
نکته: تولتیپ در فایر فاکس عمل نمیکنه قابلیت تولتیپ در ورژنهای جدید ie ساپورت نمیشه
نکته: اتریبیوتی که تولتیپ رو در فایرفاکس ساپورت میکنه title هست



این هم برای اطلاعات عمومی خودتون میگم ، برای غیر فعال کردن عکس در مرورگر ie و firefox
alt>internet option>advance>mulrrimedia>show picture
alt>option>content>load image automatically

اتریبیوت دیگر تگ img هست : ismap و usemap
این اتریبیوت رو زمانی بهتون آموزش میدم که لینکهارو آموزش داده باشم اگر الان آموزش بدم سردرگم میشید فقط اگر من یادم رفت شما یادم بندازید