دوره آموزشی HTML | جلسه نهم


به این مطلب امتیاز دهید

با سلام خدمت همه دوستان و همراهان عزیز نیوزسک، خدمت هستیم با جلسه نهم از دوره آموزشی HTML.

مباحث Image Mapping:

فرض کنید ما یک تصویر داریم که میخواهیم زمانی که کاربر روی هر قسمت از عکس کلیک کرد، به آدرس خاصی هدایت شود.
در این مثال ما عکسی داریم که در آن یک مربع ای وجود دارد وقتی کاربر روی آن مستطیل از عکس کلیک کرد به آدرس دلخواه ما هدایت شود.

تگ <map></map>:

این تگ Block Level میباشد که برای استفاده از Image Maping از این تگ استفاده میکنیم.

 

تگ <area></area>:

این تگ Text Level میباشد که سپس به ازای هر فضایی که میخواهیم در عکسمان یک هدایت آدرس انجام شود از این تگ استفاده میکنیم، درون این تگ باید شکل آن فضایی که میخواهیم در آن هدایت آدرس انجام شود را داخل صفت shape بگذاریم، سپس آدرسی که میخواهیم با کلیک کاربر ، کاربر به آن هدایت شود را در صفت href میگذاریم و در نهایت مختصات شکل را در صفت coords میاوریم.
دقت کنید که برای رسم مستطیل ما دو نقطه نیاز داریم که این دو نقطه باید نسبت به عکس داده شود .
سپس باید بین تگ <map></map> و تگ <img /> ارتباط ایجاد کنیم پس بنابر این اول به <map></map> یک صفت name میدهیم و در تگ <img /> با استفاده از صفت usemap مقدار آن را برابر با صفت name در تگ <map></map> میگذاریم با این تفاوت که در اینجا اول آن # میگذاریم.

متود های طراحی صفحه وب سایت:

  1. متود طراحی فریم (Fram) ( این روش منسوخ شده است )
  2. متود طراحی جدول (Table) ( تا حدودی این روش هم منسوخ شده است )
  3. متود طراحی فول CSS (Full CSS)

طراحی جدول :

برای ایجاد یک جدول در HTML از تگ <table></table> استفاده میکنیم که این تگ Block Level میباشد سپس برای ایجاد هر سطر از جدول از تگ <tr></tr> استفاده میکنیم و به ازای ساخت هر ستون از تگ <td></td> استفاده میکنیم، در جدول حتما باید هر سه تگ وجود داشته باشد، همچنین تگ های مربوط به ستون و سطر هر دو Text Level میباشد.
نکته: به صورت پیش فرض تگ <table></table> در خروجی نمایشی ندارد در واقع ابعاد آن نمایش داده نمیشود، البته قبلا گفته شد که برای بزرگتر کردن ابعاد در تصاویر از صفت border استفاده میکنیم، در این جا هم به همین گونه است برای بزرگتر کردن ابعاد جدول از همین صفت استفاده میشود و چون تگ <table></table> به صورت پیش فرض در خروجی نمایش داده نمیشود پس صفت border آن مقدارش برابر 0 است، و نکته دیگر اینکه تگ <td></td> حتما باید داخل تگ <tr></tr> قرار گیرد.

ایجاد جدول در HTML

ایجاد جدول در HTML

در حالت کلی طول و عرض هر <td></td> در جدول متناسب با محتوا مقدار دهی میشود ولی اگر بخواهیم آن را کنترل کنیم از صفت  width در تگ <table></table> استفاده میکنیم.

بزرگ نمایی جدول در HTML

بزرگنمایی جدول در HTML

دقت کنید که اگر مقدار محتوا در هر <td></td> مساوی باشد مقدار عرض و و طول <td></td> ها نیز مساوی است ولی اگر محتوا یک <td></td> بیشتر شود به همان اندازه از <td></td> دیگر کم میکند و به <td></td> خود اضافه میکند.

همچنین خود تگ <td></td> صفت width و height را دارد با این تفاوت که مشکل بالا را نداریم کافی است برای تست از width استفاده کنیم.

برای کنترل کردن چیدمان محتوا درون یک تگ <td></td> از صفت align استفاده میکنیم که مقدار های آن برابر با center و left و right است ، اما دقت کنید برای استفاده از این مورد باید حتما طول و عرض تگ <td></td> را دستی وارد کنید.

کنترل چیدمان محتوا در جدول HTML

چیدمان محتوا در جدول در HTML

اگر height یک تگ <td></td> را مقدار دهی کنیم ، تمام تگ های <td></td> درون تگ <tr></tr> نیز همان مقدار را میگیرند.

صفت heigh در تگ td

صفت heigh در تگ td

تا کنون align مربوط به حالت افقی را بررسی کردیم ولی حالا میخوایم align را برای حالت عمودی کنترل کنیم کافی است از صفت valign استفاده کنیم مقدار های آن top, bottom است، این صفت برای بسیاری از تگ هایی که تا الان یاد گرفته ایم قابل استفاده است.

تگ valign در جدول HTML

تگ valign در جدول HTML

پایان جلسه نهم از دوره آموزشی HTML.

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.