پيوند ها در هفت بخش ارائه ميگردد .اولين بخش همين صفحه جاريست و شش بخش ديگر كه بدنبال اين صفحه مي آيند، مطابق جدول زير ارائه ميگردد.
| عنوان بخش | لينك بخش |
|---|---|
| رنگها در پيوندLink Colors - | HTML Link Colors |
| پيوند نشانه اي ink ookmarks - | HTML Link Bookmarks |
| پيوند تصاويرHTML Link Images - | HTML Link Images |
| پيوند بانقشه تصويريHTML Link Maps - | HTML Link Maps |
| تصوير پس رمينهBackground Images - | Link Background Images |
| پيوند با عناصر تصويريLink Picture Element - | Link Picture Elements |
پيوند ها تقريبا در بيشتر صفحات وب يافت ميشوند .آنها به بكاربران اين امكان را ميدهند كه از صفحه اي به صفحه ديگر بروند، وصفحات متناسب را مشاهده كنند .پيوند يكي از مزاياي مهم صفحات ديناميكي يا پوياست.
لينكهايHTML هايپرلينك ميباشند، وباعث ميشوند كه كاربر با كليك روي آنها ازسند به سند ديگري بروند.
هنگاميكه موس روي پيوندي قرار ميگيرد، نشانه موس بيك دست كوچك تبديل ميشود.
نكته ـ يك لينك لازم نيست متني باشد، بلكه ميتواند تصويري يا هرمجموعه از عناصرHTML باشد.
درHTML با تگ<a> ميتوان يك هايپرلينك تعريف نمود .فرمت كلي آن مطابق زير است.
متن لينك ياlink text ، قسمتي كه براي خواننده قابل مشاهده است .با كلينك در محل متن پيوند خواننده به آدرس مشخص شده درhref ارجاع ميشود.
مثال ـ در مثال زير روش ايجاد لينك بهW3School.com را نشان ميدهد.
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
بصورت پيش فرض تمام مرورگرها، پيوندرا بصورت زير نشان ميدهند.
1ـ پيوند بازديد نشده با خط ابي رنگ زير متن آن.
2ـ پيوند بازديد شده با خط بنفش زير متن پيوند.
3ـ پيوند فعال داراي زير خط قرمز ميباشد.
نكته ـ البته ميتوان با امكاناتCSS موارد فوق را بنحو ديگري نشان داد.
در صورتيكه ويژگيtarget اعلام نشود، بصورت پيش فرض صفحه پيوندي، در پنجره جاري مرورگر نمايش داده ميشود .براي تغييرمحل نمايش بايد از ويژگي فوق استفاده شود.
ويژگيHTML target مشخص ميكند كه سند پيوندي كجا بايد بازشود .محل باز شدن ميتواند يكي از موارد زير باشد.
مثال ـtarget="_blank" كه سند پيوندي در تب يا پنجره جديد مرورگر باز ميشود.
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
درهر دو مثال بالادرhref دو نمونه از آدرس URL مطلق آمده ، كه آدرس كامل وب ميباشند.
اگر يك پيوندي بهمان وب سايت جاري باشد، ، آنرا پيوند محلي گويند وبايگ آدرس نسبيURL مشخص ميشود .(بدون قسمت("http://www"
مثال ـ پيوند مطلق ونسبي
<h2>Absolute URLs</h2> <p><a href="https://www.w3.org/">W3C</a></p> <p><a href="https://www.google.com/">Google</a></p> <h2>Relative URLs</h2> <p><a href="html_images.asp">HTML Images</a></p> <p><a href="/css/default.asp">CSS Tutorial</a></p>
آدرسهاي سايت ديگر نياز به دسترسي دارند، ممكن است دراجرا پيغام خطا داده شودنكته -.
براي لينك بيك تصوير بايد تگ<img> را در داخل تگ <a> قرار داد .مطابق مثال زير:
مثال ـ پيوند تصويري
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
براي پيوند ايميلي ازspan style="background-color: #FFD000">mailto: در داخل < ويژگيhref استفاده ميشود، تابرنامه براي ارسال ايميل جديد كاربر بازگردد.
مثال ـ استفاده از پيوند ايميلي
<p><a href="mailto:someone@example.com">Send email</a></p>
در اين روش پيوند از يكHTML button ودستوراتي از جاواسكريپت استفاده ميشود . ، دستورات جاوا اسكريپت اين اجازه را ميدهد كه در هنگام اتفاق رويدادي مثل كليك دكمه پيوندي چه كاري را بايد انجام دهيد.
مثال ـ پيوند دكمه اي
<button onclick="document.location='default.asp'">HTML Tutorial
نكته ـ در مورد جاوا اسكريپت مطالبي ارائه خواهد شد .درضمن ارائه مطالب مثالهائي از نكات مهم جاوااسكريپت استفاده شده كه ملاحظه ميفرمائيد.
ويژگيHTML title در تگ a اطلاعات اضافي در مورد آن عنصر معرفي مي نمايد . اين اطلاعات در نمايش صفحه ظاهر نميشود، اما بعنوان متن قابل توجه با قرار گرفتن موس در متن پيوند، لحظه اي نشان داده ميشود.
مثال ـ استفاده از ويژگي عنوان در لينك
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
مثال ـ استفاده از آدرس كاملURL براي پيوند بيك صفحه وب
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
مثال ـ پيوند به صفحه اي كه درشاخهhtml وبسايت جاريست.
<a href="/html/default.asp">HTML tutorial</a>
مثال ـ لينك به صفحه اي كه درشاخه مشابه صفحه جاريست.
<p><a href="default.asp">HTML tutorial</a></p>