لینک های متن HTML
در این جلسه به آموزش لینک های متن در زبان کد نویسی HTML خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
یکی از مهم‌ترین اجزاء صفحات وب لینک‌ها (links) هستند. با استفاده از لینک‌ها میتوانید پیوندی به صفحات دیگر ایجاد کنید. به طوری که وقتی کاربر روی آن کلیک کرد به یک صفحه وب دیگری منتقل شود. تگ a وظیفه ایجاد لینک در HTML را دارد.
یک صفحه ی وب می تواند لینک های متنوعی داشته باشد که شما را مستقیما به صفحات دیگر یا حتی بخش هایی خاص از یک صفحه ی ارائه شده می برد. این لینک ها هایپرلینک نامیده می شوند. هایپرلینک ها به بازدید کنندگان اجازه می دهند تا با کلیک کردن روی لغات، اصطلاحات و تصاویر بین صفحات وب مسیریابی کنند. شما می توانید هایپر لینک ها را روی صفحه ی وب با استفاده از متن یا تصاویر موجود ایجاد کنید.
لینک کردن داکیومنت ها
یک لینک با استفاده از برچسب <a> در HTML تعیین می شود. این برچسب tag anchor نامیده می شود و هر چیزی بین برچسب آغازین <a> و پایانی <a/> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب <a> را می بینید.
<a href="Document URL" ... attributes-list>Link Text</a>
مثال
اجازه دهید مثال زیر را امتحان کنیم که https://learnparsi.com/ را در صفحه ی شما لینک می کند.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href="https://learnparsi.com" target="_self"> tahlildadeh </a> </body> </html>
این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی learnparsi کلیک کنید تا به صفحه ی اصلی learnparsi برسید.
Click following link
ویژگی target
ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید
۱. blank_
داکیومنت لینک شده را در یک پنجره یا تب جدید باز می کند.
۲. self_
داکیومنت لینک شده را در همان چارچوب باز می کند.
۳. parent_
داکیومنت لینک شده را در چارچوب اصلی باز می کند.
۴. top_
داکیومنت لینک شده در کل بدنه ی پنجره باز می شود.
۵. targetframe
داکیومنت لینک شده را در یک targetframe نام گذاری شده باز می کند.
مثال
برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href="http://www.tahlildadeh.com/"> </head> <body> <p>Click any of the following links</p> <a href="https://learnparsi.com" target="_blank">Opens in New</a> | <a href="https://learnparsi.com" target="_self">Opens in Self</a> | <a href="https://learnparsi.com" target="_parent">Opens in Parent</a> | <a href="https://learnparsi.com" target="_top">Opens in Body</a></body> </html>
استفاده از مسیر پایه
وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب <base> در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خالص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.
مثال
مثال زیر از برچسب <base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href="http://www.tahlildadeh.com/"> </head> <body> <p>Click following link</p> <a href="/html/index.htm" target="_blank">HTML inner link</a> </body> </html>
لینک های متن HTML
لینک شدن به بخشی از صفحه
می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد. نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a> نام گذاری کنید.
<h1>HTML Text Links <a name="top"></a></h1>
مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.
<a href="#top">Go to the Top</a>
و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Top the to Go کلیک کنید تا به نقطه ی بالای آموزش Link Text HTML برسید.
تنظیم رنگ های لینک
شما می توانید رنگ لینک های خود، لینک های فعال و لینکهای مشاهده شده را با استفاده ازویژگی های link و alink و vlink از برچسب <body> تنظیم کنید.
مثال
مثال زیر را در htm.test ذخیره کنید و سپس می توانید آن را در هر مرورگری باز کنید تا ببینید که چگونه ویژگی های alink, link و vlink کار می کنند.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href="https://learnparsi.com/"> </head> <body alink="#54A250" link="#040404" vlink="#F40633"> <p>Click following link</p> سایت سورس سرا - آموزش برنامه نویسی و سورس کدهاي آماده com.SourceSara.www ۶۶ آدرس آموزشگاه : تهران - خيابان شريعتی - باال تر از خيابان ملک - جنب بانک صادرات - پالک - ۱۶۵ واحد۷ ۸۸۱۴۶۳۲۳ - ۸۸۴۴۶۷۸۰ - ۸۸۱۴۶۳۳۰ <a href="/html/index.htm" target="_blank">HTML tahlildadeh</a> </body> </html>
دانلود کردن لینک ها
شما می توانید لینک متنی ایجاد کنید تا فایل های قابل دانلود PDF ،ZIP و DOC خود را بسازید. این کار بسیار ساده می باشد، فقط کافیست یک URL کامل از فایل قابل دانلود ارائه بدهید.
<!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <a href="https://learnparsi.com/04GL07.pdf"Download PDF File</a> </body> </html>
نکته : این یک پیوند تست است , برای آزمایش این مورد رو در سیستم خودتان با یک فایل واقعی میتوانید تست کنید.
ممنون که در این جلسه هم با ما همراه بودید در این جلسه به یادگیری آموزش لینک های متن HTML پرداخته شد.
پایان این جلسه
در جلسه ی آینده نیز به نکات کلیدی و پرکاربردی خواهیم پرداخت پس حتما با ما همراه باشید و جلسات آینده را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.
دیدگاه ها