آموزش HTML شماره 3 - ایجاد لینک و جدول

از این که بین بخش های مختلف آموزش وقفه ی زیادی به وجود اومده عذرخواهی می کنم. (مشغله زیاده )

خوب بریم سروقت آموزش. اگه آموزش های قبلی رو مطالعه کرده باشید الان باید بتونید این آموزش رو به راحتی متوجه بشید. پس اگه آموزش های 1 و 2 رو هنوز مطالعه نکردید ، اول اون ها رو بخونید بعد این آموزش رو دنبال کنید.

توی این آموزش قراره که ساخت لینک رو یاد بگیرید. یه کار دیگه هم که قراره بکنید اینه که یه جدول درست کنید. در کل این آموزش یک سری از کاربردی ترین تگ های html رو به شما آموزش میده!

خوب! اول از بقیه ، تگ لینک ( <a> ):

فکر نمی کنم لازم باشه توضیح بدم که لینک چی هست!؟ اما باز هم شاید بعضی ها ندونن: لینک همون چیزیه که شما در بخش های مختلف صفحات وب وقتی روی اون کلیک می کنید به جای دیگه منتقل میشید. (به فارسی میشه پیوند) حالا این پیوند می تونه بین دو صفحه باشه ، بین بخش های مختلف یک صفحه باشه یا بین بخش های مختلف از چند صفحه باشه.

میریم سراغ کار با تگ لینک:

<<<code>>>

<a href="http://freethemes.rozblog.com/"title="freethemes">

   freethemes

</a>

<<</code>>>

اول به کد بالا نگاه کنید و سعی کنید متوجه بشید چی کار می کنه. (می تونید برای مشاهده ی خروجی اون از لینک زیر استفاده کنید)

باز کردن ابزار نمایش آنلاین خروجی کد ها

اگه خروجی کد رو نگاه کنید ، متوجه میشید که وقتی روی لینک ایجاد شده کلیک می کنید به آدرسی انتقال پیدا می کنید که در مقابل href مقداردهی شده است. پس موجودیت href آدرس قسمتی را نشان می دهد که لینک باید کاربر را به آنجا منتقل کند.

بعد از موجودیت href موجودیت title وجود دارد. کار این موجودیت ایجاد tooltip (توضیحی که به صورت پنهان است و وقتی موس روی لینک قرار می گیرد نمایش داده می شود.) شاید به ظاهر این موجودیت فایده ی چندانی نداشته باشد ، اما یکی از مواردی که باعث بالا رفتن سئوی سایت یا وبلاگ می شود همین title است. بالا بودن درصد سئو می تواند باعث افزایش رتبه ی سایت در بین موتور های جستجوگر بشود. پس همیشه سعی کنید از این موجودیت استفاده کنید.

همون طور که حتما در خروجی کد هم دیدید ، متن لینک freethemes است. حتما هم متوجه شده اید که هر چیزی که بین <a> و </a> قرار بگیرد به عنوان متن لینک نمایش داده می شود.

نکته: حتما نباید از تمام موجودیت های یک تگ استفاده شود. ترتیب موجودیت ها هم اهمیتی ندارد و شما به هر ترتیبی که دوست دارید می توانید از آن ها استفاده کنید.

تگ های table , tbody , td , tr , th (مربوط به ساخت جدول):

تگ هایی که گفته شد همه مربوط به ساخت جدول ها هستند. اما استفاده از همه ی آن ها الزامی نیست. برای مثال اگر از تگ tbody در جدول استفاده نکنید هیچ مشکلی پیش نمی آید.

برای تعریف یک جدول باید از تگ table استفاده بشه. به این صورت که:

<<<code>>>

<table border="1" width="500" height="200">

</table>

<<</code>>>

در کد های بالا شما می بینید که ما چگونه از تگ table استفاده کرده ایم. استفاده از هیچ کدوم از موجودیت ها الزامی نیست.

موجودیت border برای جدول ما یک خط حاشیه مشخص می کند. اگر برابر با صفر باشد هیچ خط حاشیه ای نخواهیم داشت. (در اصل ضخامت خط حاشیه را معلوم می کند.)

موجودیت width هم مشخص کننده ی طول جدول است.

موجودیت height هم مشخص کننده ی عرض جدول است.

اگر کد بالا را اجرا کنید هیچ چیزی مشاهده نمی کنید. چون ما در اینجا فقط ویژگی های جدول رو مشخص کردیم و هنوز هیچ خونه و ردیفی برای جدول معلوم نکردیم.

بقیه ی تگ هایی که مربوط به جدول بودن باید حتما در بین تگ table نوشته بشن. یعنی در بین <table> و </table> در غیر این صورت خروجی اشتباه می دهند.

تگ tbody ، همانطور که در بالا گفته شد باید در بین تگ table قرار بگیرد. این تگ مشخص کننده ی یک سری ویژگی ها است که بر روی تمام خانه های جدول پیاده می شود. (در اصل ما می توانید با استفاده از این تگ مقدار های پیشفرضی را برای خانه های جدول تعیین کنیم که در صورت عدم وجود این مقدار ها در تگ آن خانه از جدول ، این مقدار ها برای آن خانه استفاده شوند) مثال:

<<<code>>>

<table>

   <tbody bgcolor="red" align="center" valign="middle">

   </tbody>

</table>

<<</code>>>

 همانطور که می بینید برای این تگ ، ما سه موجودیت تعریف کرده ایم. موجودیت bgcolor مشخص کننده ی رنگ پس زمینه ی تمام خانه های جدول است. شما می توانید به جای این موجودیت با استفاده از موجودیت دیگری به نام background برای پس زمینه ، تصویر معلوم کنید. (با وارد کردن آدرس تصویر مورد نظر برای مقدار آن)

موجودیت بعدی align است. این موجودیت معلوم می کند که در خانه های جدول متن ، عکس یا هرچیز دیگری که وجود دارد از سمت چپ ، راست یا وسط نوشه شوند. ما در مثال بالا مقدار center را معلوم کرده ایم که باعث می شود هر چیزی در خانه های جدول در وسط نوشته شود. این موجودیت مقادیر left(چپ) ، right(راست) و center(وسط) را میگیرد.

موجودیت valign هم کاری مثل align را انجام میدهد. اما با این تفاوت که به جای معلوم کردن چپ ، راست و وسط ؛ بالا ، پایین و وسط را معلوم می کند. ما در بالا middle به معنای وسط را وارد کرده ایم. شما می توانید از top(بالا) و bottom(پایین) نیز استفاده کنید.

در این مرحله از مثال هم هیچ چیزی در خروجی صفحه نمایش داده نخواهد شد. اما از این به بعد خروجی ما نشان داده می شود.

تگ td , th: این تگ ها نمایش دهنده ی خانه های جدول هستند. با این تفاوت که th متن درون خود را درشت (strong) نمایش میدهد اما تگ td به صورت معمولی نمایش میدهد. ( th برای معلوم کردن سرتیتر ها است و استفاده از آن الزامی نیست. td هم الزامی نیست ، اما حتما برای این که جدول شما نمایش داده شود باید از یکی از آن ها استفاده کنید.)

به مثال زیر توجه کنید و حتما خروجی آن را مشاهده کنید:

<<<code>>>

<table>

   <tbody>

      <tr>

         <td>

            this is a td tag

         </td>

      </tr>

   </tbody>

</table>
<<</code>>>

از این که همه ی کد ها را پشت سر هم می نویسم عذرخواهی می کنم.

اگر خروجی این کد رو ببینید متوجه میشید که هیچ شباهتی به جدول نداره. دلیلش اینه که تگ table هیچ موجودیتی نداره. شما برای این که خونه های جدولتون مشخص باشن باید از bgcolor , background یا border استفاده کنید تا خونه های جدول مشخص بشن. اما بدون استفاده از اون ها هم جدول ایجاد میشه. کاربرد این نوع جدول ها در منظم کردن صفحات وب بسیار زیاد است. مثلا در ایجاد فرم های عضویت و تماس با ما برای منظم کردن فرم از جدول پنهان (بدون پس زمینه و خط حاشیه) استفاده میشه.

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

برای استفاده از تگ th هم دقیقا باید مثل td عمل کنید. تگ th تنها در نمایش ، با td متفاوت است و از نظر کدنویسی هیچ فرقی نمی کند.

برای استفاده از موجودیت ها در td,th باید مثل موجودیت های tbody عمل کنید. این دو تگ دقیقا همان موجودیت هایی را می گیرند که tbody میگیرد. مثال:

<<<code>>>

<td bgcolor="red" align="right" valign="middle">

   a text in middle and right of a red block of the table

</td>
<<</code>>>

 کد بالا که حتما باید در یک جدول و در تگ tr استفاده شود تا کار کند ، یک خانه از جدول را ایجاد می کند که پس زمینه ی آن قرمز است و متن درون آن در سمت راست و در وسط نوشته شده است.

خروجی ساز - مشاهده ی نتیجه ی کد ها