با سلام و آرزوی خسته نباشید مجدد خدمت کاربران مشتاق سایت پگاسوس گراف.
امروز با جلسه دوم آموزش صفر تا صد html در خدمت شما عزیزان میباشم.
موضوعی که امروز به آن خواهیم پرداخت آشنایی کامل و اصولی با لینکها و چگونگی نمایش و کاربرد آن خواهد بود.

جهت تست کدهای مورد نظر می توانید آنهارا در نوت پد تحت عنوان index.html و فرمت utf-8 ذخیره کنید و یا می توانید با ادیتور آنلاین پگاسوس گراف با آدرس pegasusgraph.ir/online-editor استفاده کنید.

»» لینک ها در HTML – هایپرلینک ها :

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

»» آشنایی با نحو (سینتکس) لینک ها در HTML :
در HTML لینکها از طریق تگ a تعریف میشوند :
<a href="url">link text</a>

لینکی برای مشاهده ی آموزش HTML سایت لرن سورس : 
<a href="http://www.pegasusgraph.ir/pegasusgraph-html-education-3.html">آموزش html</a>

صفت href آدرس مقصد(http://www.pegasusgraph.ir/pegasusgraph-html-education-3.html) را برای یک لینک مشخص میکند.
متن لینک قسمت قابل مشاهده در مرورگر است(آموزش html).
با کلیک بر روی لینک به آدرس مقصد منتقل میشوید.

»» لینک های محلی در HTML :
در مثال بالا از یک آدرس مطلق(آدرس کامل) برای صفت href استفاده شده است.
یک لینک محلی(لینکی که آدرس مقصدش همان وب سایت است) با استفاده از یک آدرس نسبی مشخص میشود :
<a href="/pegasusgraph-html-education-3.html">آموزش html</a>

کد بالا نتیجه ی همانند نمونه مثال قبلی خواهد داشت.

»» رنگ های لینک در HTML :
به صورت پیشفرض لینک ها در تمام مرورگر ها به شکل زیر نمایش داده میشوند :
»» لینکی که هنوز ملاقات نشده با یک زیرخط و رنگ آبی نشان داده میشود.
»» لینکی که ملاقات شده با یک زیر خط و رنگ بنفش نمایش داده میشود.
»» لینک فعال(حالتی از لینک که در یک لحظه روی آن کلیک میشود) با یک زیر خط و رنگ قرمز نمایش داده میشود.
شما میتوانید رنگ های پیشفرض را با استفاده از استایل های زیر تغییر بدهید :
<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 در لینک های HTML :
خاصیت target مشخص میکند که صفحه ی مقصد برای لینک در کجا باز شود.
خاصیت target میتواند دارای مقادیر زیر باشد :
»» _blank  : صفحه ی مقصد را در یک پنجره و یا تب جدید از مرورگر باز میکند
»» _self : صفحه ی مقصد را در همان پنجره و یا تبی که لینک کلیک شده باز میکند(این مقدار پیشفرض برای لینکهاست)
»» _parent : صفحه ی مقصد را در یک فریم پدر باز میکند
»» _top : صفحه ی مقصد را در تمام بدنه ی یک پنجره در مرورگر باز میکند.    
»» Framename : صفحه ی مقصد را در یک فریم مشخص باز میکند
مثال زیر صفحه ی مقصد را در یک پنجره ی جدید در مرورگر باز میکند :
<a href="https://www.pegasusgraph.ir/" target="_blank">Visit PegasusGraph!</a>

اگر صفحه ای که لینک در آن قرار دارد در یک فریم محدود شده باشد میتوانید با استفاده از خاصیت target="_top" صفحه ی فریم را برای صفحه ی 
مقصد از بین ببرید.
<a href="http://www.pegasusgraph.ir/pegasusgraph-html-education-3.html" target="_top" >آموزش html</a>


»» تصاویر به عنوان لینک در HTML :
استفاده از تصاویر به عنوان لینک رایج است :
<a href="default.asp">
  <img src="/Uploads/Courses/HTML/smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

»» نکته :نکته : مقدار border:0 که به تصویر در مثال بالا اضافه شده است به این دلیل است که در مرورگر IE9 و نسخه های قدیمی تر یک خط دور
 برای عکس در نظر گرفته میشود(زمانی که تصویر به عنوان لینک استفاده میشود) با این کار ما از تولید این خط دور جلوگیری میکنیم.

»» ایجاد یک Bookmark در HTML  :
بوک مارک ها در HTML به خوانندگان اجازه میدهند که به قسمتی از یک صفحه منتقل شوند.
بوک مارک ها برای زمانی که صفحه ی وب خیلی طولانی است مناسب هستند.
برای ایجاد یک بوک مارک ابتدا باید یک بوک مارک ساخته و سپس لینکی به آن اضافه کنیم.
در این صورت وقتی روی لینک کلیک میشود صفحه تا رسیدن به بوک مارک پیمایش (اسکرول) میشود.
مثال 
در ابتدا با استفاده از خاصیت id یک بوک مارک ایجاد میکنیم :
<h2 id="C4">Chapter 4</h2>

سپس داخل همان صفحه لینکی برای انتقال به بوک مارک ایجاد میکنیم :
<a href="#C4">Jump to Chapter 4</a>

 و یا اگر لینک ما در همان صفحه ی بوک مارک نباشد به طریق زیر ساخت لینک را انجام میدهیم :
<a href="html_demo.html#C4">Jump to Chapter 4</a>

»» نکته :برای ساخت لینک بوک مارک در صفت href از علامت # استفاده میکنیم.

»» مسیر های خارجی   :
صفحات خارجی با استفاده از آدرس مطلق و یا آدرس نسبی به همان صفحه ی جاری میتوانند مورد ارجاع قرار گیرند.
استفاده از آدرس مطلق در نمونه مثال زیر نشان داده شده است.
<a href="http://www.pegasusgraph.ir/pegasusgraph-html-education-3.html">آموزش html</a>

در نمونه مثال زیر به صفحه ای لینک شده است که در پوشه ی html وب سایت جاری قرار دارد.
<a href="/pegasusgraph-html-education-3.html">آموزش html</a>


»» خلاصه این جلسه   :
»» از a برای ساخت یک لینک استفاده کنید
»» از خاصیت  href برای مشخص کردن آدرس مقصد در لینک استفاده کنید.
»» از خاصیت target برای مشخص کردن جایی که صفحه ی مقصد در آن باز میشود استفاده کنید.
»» از عنصر img (داخل عنصر a) برای ساخت یک تصویر به عنوان لینک استفاده کنید.
»» از خاصیت id برای ساخت یک بوک مارک در صفحه استفاده کنید.
»» از خاصیت href برای ساخت لینکی برای بوک مارک استفاده کنید.
»» پـــایـــانــــ جــــلسهـــ چـــــهــارمــ آمــــوزشـــــ HTML   :