تبادل لینک هوشمند
<html>
<body>
<p><a href="http:/notedesign.ir/contact">Visit our HTML tutorial</a></p>
</body>
</html>
ویژگی href مسیر مقصد را مشخص میکند (http://notedesign.ir/content)
متن بین تگ <a> قسمتی است که بازدیدکنندگان وب سایت میبینند. (Visit our HTML tutorial)
بر روی متن کلیک کنید، خواهید دید که شما را به آدرسی که مشخص شده میفرستد.
متن پیوند حتماً نباید متن باشد و ممکن است یک تصویر یا هر عنصر دیگه ای باشه.
پیوندهای محلی
در مثال بالا از یک URL مطلق استفاده کردیم (آدرس وب کامل).
یک لینک محلی (لینک به همان سایت) با یک URL نسبی است (بدونhttp://www).
<html>
<body>
<p><a href=notedesign.ir/contact">HTML Images</a> is a link.</p>
<p><a href="http://www.w3.org/">W3C</a> is a link to World Wide Web.</p>
</body>
</html>
رنگ لینکها
هنگامی که موس را بر روی یک پیوند میبرید، معمولا دو چیز اتفاق می افتد:
- نشانه گر موس شبیه یک دست کوچک میشود
- رنگ لینک تغییر میکند
به صورت پیش فرض در همه مرورگرها، یک پیوند شبیه موارد زیر به نظر میرسد :
- لینکی که هنوز دیده نشده به صورت زیرخط دار و با رنگ آبی است
- لینکی که مشاهده شده به صورت زیر خط دار و با رنگ بنفش است
- لینک فعال به صورت زیر خط دار و به رنگ قرمز است
با استایل دادن میتوانید رنگهای پیش فرض را تغییر دهید :
<html>
<head>
<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>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="content/learn/learning-topics/48" target="_blank">HTML learns</a>
</body>
</html>
ویژگی target
خصوصیت target مشخص میکنه که صفحه ای که لینک شده کجا باز شود. مثال پایین لینک را در یک زبانه جدید باز میکند:
<html>
<body>
<a href="http:/notedesign.ir" target="_blank">Visit our HTML tutorial!</a>
<p></p>
</body>
</html>
مقادیری که به خصوصیت target میتوانیم بدهیم به شرح زیر است:
- _blank : صفحه ای که لینک شده است را در یک پنجره یا تب جدید باز میکند.
- _self : صفحه ای که لینک شده است را در همان پنجره باز میکند (به صورت پیش فرض لینکها به این صورت عمل میکنند)
لینک دار کردن تصاویر
همانطور که گفتم تصاویر را هم مانند نوشته ها میتوان لینک دار کرد و اینکه لینک دار کردن تصاویر خیلی رایج هست:
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href=" content/learn/learning-topics/48">
<img src="notedesign.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
</body>
</html>
به دلیل اینکه از انداختن حاشیه در دور تصاویر در مرورگرهای IE9 و قدیمی تر جلوگیری کنیم border:0 را قرار دادیم.
ایجاد بوکمارک
بوکمارکها برای پریدن از قسمتی به قسمت دیگر در یک صفحه وب مورد استفاده قرار میگیرند.
بوکمارکها برای صفحات طولانی کاربرد زیادی دارند.
برای درست کردن یک بوکمارک، ابتدا باید یک جایی از صفحه را علامت بزنید سپس به آنجا لینک بدهید. هنگامی که لینک کلیک شود، صفحه به قسمتی که علامت زده اید اسکرول میشود. بوکمارکها در وب سایتهای تک صفحه ای بسیار کار آمد هستند.
ابتدا با استفاده از ویژگی id یک بوکمارک ایجاد میکنیم:
<h2 id="tips">Useful Tips Section</h2>
سپس به بوکمارکی که ایجاد کرده ایم در همان صفحه یک پیوند میدهیم:
<a href="#tips">Visit the Useful Tips Section</a>
یا میتوانیم از صفحات دیگر هم به بوکمارک لینک بدهیم، به این صورت:
<a href="html_tips.htm#tips">Visit the Useful Tips Section</a>
حالا این مثالی را که در زیر نوشتم را خودتان امتحان کنید:
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains how to create website</p>
<h2>Chapter 2</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 3</h2>
<p> This chapter explains how to create website </p>
<h2 id="C4">Chapter 4</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 5</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 6</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 7</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 8</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 9</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 10</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 11</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 12</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 13</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 14</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 15</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 16</h2>
<p> This chapter explains how to create website </p>
<h2>Chapter 17</h2>
<p> This chapter explains how to create website </p>
</body>
</html>
نظرات شما عزیزان:
موضوعات مرتبط: آموزش طراحی وبسایت ، ،
برچسب‌ها: