آموزش طراحی وب با زبان ساده بخش اول 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
این اتریبیوت رو زمانی بهتون آموزش میدم که لینکهارو آموزش داده باشم اگر الان آموزش بدم سردرگم میشید فقط اگر من یادم رفت شما یادم بندازید

[sr.majid]

خوب چند روز بود تاپیک رو آپدیت نکردم مشقاتونو بذارید رو میز خط بزنم هر کی هم تکالیفشو انجام نداده بره یه تاپیک بزنه صد بار از روی این تاپیک بنویسه

امروز راجع به رنگ ها توضیح میدم
در طراحی صفحات وب ما به سه صورت میتونیم از رنگ ها استفاده کنیم
1. نام بردن رنگ مثلاً red
2. RGB value
3. hexadecimal value

ما تعداد 16.777.256 رنگ داریم که از سه رنگ اصلی قرمز ، آبی و سبز تولید میشن

روش اول : همین ابتدا فهمیدیم که روش اول اصلاً قابل استفاده نیست چون این تعداد اسم برای رنگ موجود نیست و اگر هم بود حفظ کردنش عاقلانه نبود

روش دوم : ساختار RGB از سه بخش درست شده -,-,- هر کاما سه رنگ اصلی هست و هر خط تیره از اعداد 0 (سیاه) تا 255 (سفید) هست
مثال:
red : 255,0,0
green : 0,255,0
blue : 0,0,255
white : 255,255,255
black : 0,0,0
طریقه نوشتن RGB در html به این شکل هست

<body bgcolor="34,120,40">

که ما از این روش هم استفاده نمیکنیم

روش سوم : این روش بهترین روش هست و ساختار اون به این شکل هست -- -- --# دو تای اول قرمز ، دوتای دوم سبز و دوتای آخر آبی عدد 0 مشکی و عدد 9 سفید
مثال:
red : #ff0000
green : #00ff00
blue : #0000ff
black : #000000
white : #ffffff
طریقه نوشتن هگزادسیمال در html به این شکل هست

<body bgcolor="#54fd5a">

web-safe color چیست؟ : وب سایت طراحی شده توسط طراح تو تمام سیستم های دنیا با هر امکانات سخت افزاری و نرم افزاری دیده میشه ولی در بعضی از موارد با توجه با قابلیت سیستم کاربر رنگ ها به صورت درست تفسیر نمیشن و نزدیک ترین رنگ به آن رنگ نمایش داده میشه به این رویداد color dithering گفته میشه
رنگ های وب سیف به رنگ هائی گفته میشه که در تمام سیستم های دنیا با هر امکانات سخت افزاری و نرم افزاری به همان صورت دیده میشن و color dithering در آنها اتفاق نمی افتد تعداد این رنگ ها از بین 16.777.256 رنگ فقط 216 رنگ هست البته این مطلب نباید اینگونه تفسیر بشه که طراح خودش رو به این 216 رنگ فقط محدود کنه فکر نکنم دیگه کسی الان سیستم های خیلی قدیمی داشته باشه و اگر هم داره مشکل خودش هست

حالا چجوری رنگ های web-safe در RGB و Hexadecimal شناسائی کنیم:

RGB
0,51,102,153,204,255 اگر از این رنگ ها استفاده بشه وب سیف هست
دو مثال که راحت تر متوجه بشید:
51,102,254 وب سیف نیست
51,102,255 وب سیف هست

Hexadecimal
00,33,66,99,cc,ff اگر همه اینها باشند وب سیف هست
سه مثال که راحت تر متوجه بشید:
#0033cc وب سیف هست
#006666 وب سیف هست
#006665 وب سیف نیست

حالا با این اطلاعات تگ hr رو بهتون آشنا میکنم
تگ hr از خانواده empty هست و block-level
hr=Horizontal Rule=خط افقی
hr چهار اتریبیوت داره :

1. color که رنگ رو مشخص میکنه و ولیوش یک رنگ هست
2. size که ضخامت خط رو مشخص میکنه و ولیوش یک عدد هست
3. width که طول خط رو مشخص میکنه که میتونه بر حسب pixel یا percent باشه
pixel : زمانی که از این مقدار برای کنترل طول خط استفاده کنیم در هر شرایطی (کوچک و بزرگ کردن پنجره مرورگر) اندازه تغییر پیدا نمیکنه و اندازه ثابت میمونه
percent : زمانی که از این مقدار برای کنترل طول خط استفاده کنیم اندازه بر حسب درصد خواهد بود مثلاً اگر بر حسب 50% قرار داده بشه اندازه خط ما 50 درصد اندازه مرورگر خواهد بود یعنی اگر عرض مرورگر ما به اندازه 20 باشه عرض خط 10 خواهد بود
4.َ align که جهت قرار گرفتن خط را مشخص میکند و سه ولیو دارد : left , right , center
مثال:


تگ های sub و sup ساب برای پائین قرار دادن یک آبجکت زیر یک آبجکت استفاده میشه و ساپ برای بالا قرار دادن
من خودم این دو تگ رو به این شکل حفظ کردم نیم دایره b پائین هست آبجکت پائین قرار میگیره و نیم دایره p بالا هست آبجکت بالا قرار میگیره
مثال:


تو پست بعدی سعی میکنم مبحث اصلی در html که table ها باشه رو آموزش بدم