پیوندهای HTML
در این درس:
پیوندها تقریباً در همه صفحات وب یافت می شوند. پیوندها اجازه می دهد کاربران از صفحه ای به صفحه دیگر بروید.
پیوندهای Links - HTML
پیوندهای HTML پیوندهای پیوسته هستند.
می توانید روی پیوند کلیک کنید و به سند دیگری بروید.
وقتی ماوس را روی یک پیوند حرکت می دهید ، پیکان ماوس به یک دست کوچک تبدیل می شود.
توجه: لازم نیست پیوند متنی باشد. این می تواند یک تصویر باشد یا هر المان HTML دیگر.
پیوندهای HTML - نحو
پیوندها با استفاده از برچسب <a> (کلمه
anchor - لنگر)
تعریف می شوند
:
<a href="url">متن پیوند</a>
ویژگی href مقصد پیوند را نشان می دهد (https://www.farsiw3.ir/html).
متن پیوند قسمت قابل مشاهده است (دروس برای مبتدیان بصورت آنلاین).
با کلیک بر روی متن پیوند ، خواننده به آدرس URL مشخص شده ارسال می شود.
توجه: بدون اسلش جلو (اسلش) در انتهای آدرسهای زیر پوشه ، دو درخواست از سرور ایجاد میکند بسیاری از سرورها به طور خودکار اسلشی به انتهای آدرس اضافه می کنند و سپس درخواست جدید. را ایجاد می کنند
لینک برای آدرس ایمیل
شما می توانید با ساخت لینکه به ایمیل به فردی ایمیل بفرستید
استفاده از mailto: در داخل ویژگی href برای ایجاد پیوندی که برنامه ایمیل
کاربر را باز می کند (برای ارسال
ایمیل جدید به آنها)
URL های مطلق در مقابل URL های نسبی
پیوند های مطلق یا absolute Url به سایت های خارجی برمی گردد
پیوند های نسبی یا همان relative Url به داخل خود سایت شما پیوند می خورند
پیوندهای محلی
مثال فوق از یک URL مطلق (آدرس وب کامل) استفاده می کند.
یک پیوند محلی (پیوند به همان وب سایت) با یک URL نسبی مشخص شده است (بدون https: // www ....).
رنگ پیوند HTML
به طور پیش فرض ، پیوند به این شکل خواهد بود (در همه مرورگرها):
- پیوند بازدید نشده - زیر خط دار و آبی رنگ
- پیوند بازدید شده - زیرخط دار و بنفش رنگ
- پیوند فعال- زیرخط دار و قرمز
با استفاده از CSS می توانید رنگ های پیش فرض را تغییر دهید:
مثال
<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>
خودتان آزمایش کنید »
پیوندها اغلب به صورت دکمه با استفاده از CSS مدل می شوند:
این یک پیوند استمثال
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
خودتان آزمایش کنید »
برای کسب اطلاعات بیشتر در مورد CSS ، به سایت ما مراجعه کنید دروس CSS.
پیوندهای HTML - ویژگی هدف (target)
ویژگی target نشان می دهد که کجا سند پیوند داده شده را باز می کند.
ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:
_blank- سند مرتبط شده را در یک پنجره یا برگه جدید باز می کند_self- سند پیوند داده شده را در همان پنجره / برگه ای که در آن قرار دارد باز می کند وقتی روی آن کلیک شد (پیش فرض)_parent- سند پیوند داده شده را در قاب اصلی باز می کند_top- سند پیوند داده شده را در بدنه کامل پنجره باز می کند- فریم نام - سند پیوند داده شده را در قاب نامگذاری شده باز می کند
این مثال سند مرتبط شده را در یک پنجره / برگه مرورگر جدید باز می کند:
مثال
<a href="https://www.farsiw3.ir/"
target="_blank">از فارسی دبلیو 3 دیدن کنید!</a>
خودتان آزمایش کنید »
توضیح : اگر صفحه وب شما در یک قاب مسدود شده است ، می توانید
target="_top" استفاده کنید,برای خارج شدن از قاب:
پیوندهای HTML - تصویر به عنوان پیوند
تصاویر اغلب به عنوان پیوند استفاده می شوند:
مثال
<a href="default.html">
<img src="smiley.gif" alt="آموزشهای
HTML
برای مبتدی ها" style="width:42px;height:42px;border:0;">
</a>
خودتان
آزمایش کنید »
توجه داشته باشید: border:0;به IE9 (و موارد دیگر) اضافه
شده است
نسخه های اولیه) حاشیه ای در اطراف تصویر نمایش نمی دهند (زمانی که تصویر پیوند است).
عنوان Title - نکته ای برای پیوندها
ویژگی titleاطلاعات اضافی در مورد یک پیوند تعریف می کند.
اطلاعات
هنگامی که ماوس بر روی یک المان حرکت می کند اغلب به عنوان یک راهنما نمایش داده می شود.
مثال
<a href="https://www.farsiw3.ir/html/" title="به آموزشهای HTML بروید
مبتدیان">آموزش HTML برای مبتدیان</a>
خودتان
آزمایش کنید »
پیوندهای HTML - ایجاد نشانک
نشانک های HTML برای اجازه دادن به خوانندگان جهت جستجوی قسمتهای خاص یک صفحه وب استفاده می شوند.
اگر صفحه وب شما طولانی باشد ، نشانک ها می توانند مفید باشند.
برای ایجاد نشانک ، ابتدا باید یک نشانک ایجاد کنید و سپس پیوندی به آن اضافه کنید.
وقتی روی پیوند کلیک می کنید ، صفحه با نشانک به سمت مکان پیمایش می شود.
مثال
ابتدا یک نشانک با ویژگی ایجاد کنید id:
<h2 id="C4">فصل 4</h2>
سپس پیوندی را به نشانک اضافه کنید ("به فصل 4 بروید") در همان صفحه:
<a href="#C4">به فصل 4 بروید</a>
یا پیوندی به نشانک اضافه کنید ("به فصل 4 بروید") از صفحه دیگری:
مسیرهای خارجی
صفحات خارجی را می توان با یک URL کامل یا یک مسیر نسبت به صفحه وب فعلی ارجاع داد.
این مثال از یک URL کامل برای پیوند به یک صفحه وب استفاده می کند:
این مثال به یک صفحه واقع در پوشه html در وب سایت فعلی پیوند دارد:
این مثال به صفحه ای پیوند دارد که در همان پوشه صفحه فعلی قرار دارد:
می توانید اطلاعات بیشتری در مورد مسیرهای پرونده در فصل بخوانیدمسیرهای پرونده HTML.
خلاصه بخش
- از المان
<a>برای تعریف پیوند استفاده کنید - از المان
hrefبرای تعیین آدرس پیوند استفاده کنید - از المان
targetبرای تعیین محل باز کردن پیوند داده شده سند استفاده کنید - از المان
<img>(داخل <a>) برای استفاده تصاویر به عنوان مرجع استفاده کنید - از المان
id(id="مقدار")برای تعریف بوک نشانک در یک صفحه استفاده کنید - از المان
href(href="#مقدار") برای پیوندهای نشانک استفاده کنید
تمرینات HTML
برچسب پیوند HTML
| Тег | توضیحات |
|---|---|
| <a> | لینک پیوند را تعریف می کند |
برای مشاهده لیست کامل همه برچسب های HTML موجود ، به ما مراجعه کنیدمرجع برچسب HTML.
سایت توسط چارچوب farsiw3.ir طراحی شده است.
