لپ تاپ خود را به مودم وای فای تبدیل کنید.
December 18, 2015
5.1 مگابیت در ثانیه ، میانگین سرعت دسترسی به اینترنت در جهان
December 19, 2015
با مدیاسافت در جلسه ی هشتم از سری آموزش های HTML همراه باشید.
لینک ها در HTML
لینک ها تقریبا در تمامی صفحات وب پیدا می شوند .لینک ها در HTML یک Hyperlink یا ابرلینک هستند.
با کلیک برروی ابرلینک هایی که در متن یا تصویر هستند ، شما به صفحات دیگر می روید.
در HTML لینک ها را با تگ <a> تعریف می کنند.
قالب لینک در HTML به صورت زیر است.
<a href=”url“>link text</a>
در قسمت url لینک نوشته می شود.
مثال
<!DOCTYPE html>
<html>
<body>
<p><a href=”http://www.MediaSoft.ir”>Visit Mediasoft</a></p>
</body>
</html>
خروجی
همانطور که در مثال بالا می بینید صفت href آدرس مقصد را مشخص می کند و Visit Mediasoft قسمتی است که در مرورگر به صورت لینک نمایش پیدا می کند که با کلیک برروی آن به جایی که href اشاره می کند ارجاع داده می شوید.
با کلیک بر روی Visit Mediasoft به صفحه ی www.Mediasoft.ir مراجعه می کنید.
نکته: یک لینک لزوما یک متن نیست بلکه می تواند یک عکس یا سایر عناصر HTML باشد.
لینک های محلی یا Local Link
در مثال بالا URL یا آدرس صفحه ی وبی که استفاده شد یک آدرس کامل بود .
یک لینک محلی (لینک به وبسایت خودمان) به صورت زیر تعریف می شود. به مثال توجه کنید.
برای درک این مثال عملیات زیر را انجام دهید.
1 – یک فایل HTML دیگر در کنار فایل قبلی ایجاد کنید. (اگر اصلا فایلی ندارید 2 فایل با نام های a و b ایجاد کنید.)
2- در فایل a کد زیر را بنویسید و دخیره کنید.
<!DOCTYPE html>
<html>
<body>
<p><a href=”b.htm”>Click </a>To Visit Second Page(b.htm)</p>
</body>
</html>
3- در فایل b کد زیر را بنویسید و ذخیره کنید.
<!DOCTYPE html>
<html>
<body>
<p>This is Second Page</p>
</body>
</html>
4- فایل a را که با پسوند htm ذخیره کرده اید بازکنید.
5- در مرورگر مشاهده می کنید که کلمه ی Click به صورت لینک درآمده است. رو آن کلیک کنید.
6- مشاهده می کنید که به صفحه ی b ارجاع داده می شود. چرا که عبارت This is Second Page را در تگ <p> در فایل b نوشته بودیم.
تصویر به عنوان لینک
همانطور که گفته شد از تصویر نیز می توان به عنوان یک لینک استفاده کرد. به مثال زیر توجه کنید.
<!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href=”Mediasoft.ir”>
<img src=”Mediasoft.jpg” alt=”Mediasoft”>
</a>
</body>
</html>
خروجی
همانطور که مشاهده می کنید تگ <img> در داخل تگ <a> قرار گرفته که این امر باعث شده است تصور به صورت لینک در بیاید.
ایجاد یک نشانه یا Bookmark
نشانه ها یا Bookmark ها نوعی لینک هستند که به خوانندگان اجازه می دهد تا با یک کلیک به جای خاصی از همان صفحه بروند(اصطلاحا پرش کنند).
Bookmark معمولا وقتی صفحه ی وبسایت ما طولانی باشد استفاده می شود.
به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<body>
<p><a href=”#C8″>Jump to Chapter 8</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ….</p>
<h2>Chapter 2</h2>
<p>This chapter explains ….</p>
<h2>Chapter 3</h2>
<p>This chapter explains ….</p>
<h2>Chapter 4</h2>
<p>This chapter explains ….</p>
<h2>Chapter 5</h2>
<p>This chapter explains ….</p>
<h2>Chapter 6</h2>
<p>This chapter explains ….</p>
<h2>Chapter 7</h2>
<p>This chapter explains ….</p>
<h2 id=”C8″>Chapter 8</h2>
<p>This chapter explains ….</p>
<h2>Chapter 9</h2>
<p>This chapter explains ….</p>
<h2>Chapter 10</h2>
<p>This chapter explains ….</p>
<h2>Chapter 11</h2>
<p>This chapter explains ….</p>
<h2>Chapter 12</h2>
<p>This chapter explains ….</p>
<h2>Chapter 13</h2>
<p>This chapter explains ….</p>
<h2>Chapter 14</h2>
<p>This chapter explains ….</p>
<h2>Chapter 15</h2>
<p>This chapter explains ….</p>
<h2>Chapter 16</h2>
<p>This chapter explains ….</p>
<h2>Chapter 17</h2>
<p>This chapter explains ….</p>
</body>
</html>
خروجی
همانطور که در قسمت کد مشاهده می کنید در قسمت chapter 8 به تگ <h2> یک صفت id با مقدار C8 اضافه شده است. همچنین در ابتدای کد و در قسمتی که لینک تعریف شده است در تگ <a> مقدار صفت href برابر با #C8 شده است. چون id تگ <h2> و مقدار href تگ <a> ، C8 است، زمانی که کاربر برروی لینک کلیک می کند، صفحه به قسمتی که id آن C8 است scroll می کند. علامت # نیز برای تعریف لینک های Bookmark استفاده می شود.
صفت target یا هدف در تگ <a>
در صفت target مهم ترین مقداری که می تواند بگیرد “_blank” می باشد.
به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<body>
<a href=”http://www.Mediasoft.ir” target=”_blank”>Visit Mediasoft</a>
</body>
</html>
خروجی
با کلیک برروی Visit Mediasoft ، کد target=”_blank” باعث می شود که سایت مدیاسافت برروی یک سربرگ دیگر باز شود .
پایان جلسه ی هشتم
