09162352304
[email protected]

آموزش HTML مقدماتی؛ جدول و لینک در HTML

درس 8/9 | زمان مطالعه: 20 حداقل
آموزش HTML مقدماتی؛ جدول و لینک در HTML

آموزش استفاده از لینک، یکی از مباحث مهم در دروس آموزش HTML است. همان‌طور که می‌دانید استفاده از لینک در لا به لای محتوا از اهمیت فوق‌العاده بالایی در طراحی سایت برخوردار است. این لینک‌ها می‌توانند مخاطب را به محتوا یا بخش‌های دیگر سایت خودتان یا منابع دیگر هدایت کنند. لینک‌ها نه تنها برای افزایش اعتبار محتوا و صفحه وب، بلکه به منظور اهداف سئو و بهتر دیده شدن در میان رقبا هم به کار می‌روند.

لینک در HTML 

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

هایپرلینک ها

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

نگارش لینک در HTML

نحوه نگارش یا سینتکس (Syntax) لینک‌ها در HTML به این صورت است که لینک‌ها با تگ تعریف می‌شوند:

link textVisit our HTML tutorial

خصوصیت href آدرس مقصد یک لینک (https://setinco.com/classes?sort=newest) را مشخص می‌کند. link text (از بخش آموزش HTML‌درستین دیدن کنید) بخش قابل مشاهده یک لینک است. با کلیک کردن روی این قسمت به آدرس مشخص شده هدایت خواهید شد. فراموش نکنید که در انتهای لینک خود حتما علامت اسلش (/) را قرار دهید در غیر این صورت ممکن است دو درخواست به سرور داده شود. بسیاری از سرورها به صورت خودکار این علامت را به آدرس اضافه کرده و سپس یک درخواست تازه ایجاد می‌کنند.

نتیجه قابل لمس بخش بالا به این صورت خواهد بود:

 

از بخش آموزش HTML درستین دیدن کنید

لینک Local

در مثال بالا از یک URL کامل استفاده شده است. یک لینک local (لینک به همان وب‌سایت) با یک URL نسبتا مشابه و بدون http://www. مشخص می‌شود:

<a href="html_images.asp">HTML Images</a>

رنگ لینک در HTML

به صورت پیش‌فرض لینک ها در تمام مرورگرها به یکی از شکل‌های زیر ظاهر می‌شوند:

- لینکی که مشاهده نشده است به صورت زیرخط‌دار و آبی نمایش داده می‌شود

- لینکی که مشاهده شده است به صورت زیرخط‌دار و بنفش نمایش می‌شود

- لینک فعال به شکل زیرخط‌دار و قرمز نمایش می‌شود

می‌توانید به سلیقه خودتان و با استفاده از style، رنگ‌های پیش‌فرض را تغییر دهید:

<style>
a:link {
    color: green; 
    background-color: transparent; 
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style>

خصوصیت Target

خصوصیت target مشخص می‌کند که سند لینک شده در کجا باز شود. این خصوصیت می‌تواند دارای یکی از مقادیر زیر باشد:

  • blank_ : که سند لینک شده را در یک پنجره یا سربرگ جدید باز می‌کند
  • self_ : که سند لینک شده را در همان پنجره یا سربرگی که کلیک انجام شده باز می‌کند (روش پیش‌فرض)
  • parent_ : که سند لینک شده را در فریم والد (parent frame) باز می‌کند
  • top_ : که سند لینک شده را به صورت کامل در همان پنجره نشان می‌دهد
  • Framename: که سند لینک شده را در یک فریم نام‌گذاری شده نشان می‌دهد

مثال زیر سند لینک شده را در یک پنجره یا سربرگ جدید از مرورگر باز خواهد کرد:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

این نکته را به یاد داشته باشید که اگر صفحه وب شما در یک فریم قفل شده باشد می‌توانید از target=”_top” برای خارج شدن از آن فریم استفاده کنید:

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

تصویر به عنوان لینک

 در سندهای HTML معمولا مرسوم است که از تصویر هم به عنوان لینک استفاده می‌کنند:

<a href="default.asp">  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"></a>

توجه داشته باشید که border:0; به این منظور استفاده می‌شود که از نمایش کادر پیرامون عکس‌ها توسط اینترنت اکسپلورر ۹ و نسخه‌های پیشین جلوگیری شود.

ایجاد یک بوک مارک

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

 

ابتدا با استفاده از خاصیت id یک بوک مارک ایجاد کنید:

<h2 id="C4">Chapter 4</h2>

 

سپس به آن بوک مارک لینکی از درون همان صفحه بدهید (Jump to chapter 4):

<a href="#C4">Jump to Chapter 4</a>

 

یا می‌توانید لینکی از یک صفحه دیگر را برای بوک مارک خود تعریف کنید:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

 

مسیرهای خارجی

صفحات خارجی (External page) یا صفحات فرعی وب سایت را می‌توان با یک URL کامل یا با مسیری مشابه با صفحه جاری وب سایت (صفحه اصلی) مشخص کرد. مثال زیر از یک URL کامل برای لینک دادن به یک صفحه استفاده می‌کند:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

 

این مثال به صفحه‌ای لینک می‌شود که در پوشه html موجود در صفحه جاری وب سایت قرار دارد:

<a href="/html/default.asp">HTML tutorial</a>

 

این مثال به صفحه‌ای لینک می‌شود که در همان پوشه‌ی صفحه جاری قرار گرفته است:

<a href="default.asp">HTML tutorial</a>

جدول در HTML

 جدول در HTML با استفاده از تگ <table> تعریف می‌شود. هر یک از ردیف‌های جدول با تگ <tr>، تیتر جدول با تگ <th> و سلول‌های جدول با تگ <td> تعریف می‌شوند. به صورت پیش‌فرض، تیتر جداول به صورت پررنگ و در مرکز قرار دارند.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

دقت کنید که عناصر <td> دربردارنده‌ي داده‌های جدول هستند. آن‌ها می‌توانند حاوی هر نوع عنصر HTML شامل متن، تصویر، فهرست یا حتی جداول دیگر باشند.

افزودن کادر به جدول در HTML

اگر برای جدول خود کادر تعریف نکنید، مرورگر آن را بدون کادر نمایش خواهد داد. کادر جدول با استفاده از خصوصیت border در CSS تعریف می‌شود:

table, th, td {    border: 1px solid black;}

 

فراموش نکنید که کادر را هم برای جدول و هم برای خانه‌های جدول تعریف کنید.

کادرهای مشترک

 

اگر می‌خواهید تمام کادرهای جدولتان در یک یک کادر ادغام شود باید از ویژگی border-collapse در CSS استفاده کنید:

table, th, td {    border: 1px solid black;    border-collapse: collapse;}

 

افزودن فاصله به سلول ها

با استفاده از قابلیت cell padding می‌توانید بین محتوا و کادر سلول‌های جدول یک فاصله مشخص کنید. اگر این padding را مشخص نکنید سلول‌های جدول و محتوای آن‌ها بدون فاصله نمایش داده خواهند شد. برای ایجاد فاصله از ویژگی padding در CSS استفاده کنید:

 

th, td {    padding: 15px;}

چپ چین کردن تیتر در HTML

تیتر جدول‌ها به صورت پیش‌فرض به صورت پررنگ و در وسط قرار دارند. برای چپ‌چین کردن تیترها از ویژگی text-align استفاده کنید:

 

th {    text-align: left;}

ایجاد فاصله بین کادرها (Border Spacing)

با استفاده از ویژگی border-spacing در CSS به ایجاد فاصله بین سلول‌های یک جدول می‌پردازید:

 

table {    border-spacing: 5px;}

 

به یاد داشته باشید که اگر جدول شما دارای collapsed border باشد این ویژگی هیچ تاثیری در آن نخواهد داشت.

گسترش سلول در بیش از یک ستون

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ستون گسترش یابد از ویژگی colspan استفاده کنید:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

گسترش سلول در بیش از یک ردیف

اگر می‌خواهید یکی از سلول‌های جدولتان در بیش از یک ردیف گسترش یابد از ویژگی rowspan استفاده کنید:

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

اضافه کردن کپشن (Caption) به جدول

برای اضافه کردن کپشن به جدول خود از تگ <caption> استفاده کنید:

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

توجه کنید که تگ <caption> باید بلافاصله پس از تگ <table> وارد شود.

تعریف استایل خاص برای یک جدول

برای تعریف یک استایل خاص برای یک جدول خاص، ویژگی id را به جدول اضافه کنید:

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

حالا می‌توانید یک استایل خاص را برای این جدول تعریف کنید:

table#t01 {    width: 100%;     background-color: #f1f1c1;}

 

حالا استایل‌های بیشتری اضافه کنید:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

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