مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
لینک های متنی یا Text Link در HTML چیست - بررسی کامل با مثال
یک صفحه وب میتواند linkهای مختلفی داشته باشد که شما را مستقیما به صفحات دیگر و حتی قسمتهای خاصی از یک صفحه می برد. این لینک ها به عنوان hyperlink ها شناخته می شوند.
hyperlink ها به بازدیدکنندگان اجازه می دهند تا با کلیک کردن بر روی کلمات، عبارات و تصاویر، بین وب سایت ها حرکت کنند. بنابراین شما می توانید با استفاده از متن یا تصاویر موجود در یک صفحه وب، hyperlink هایی ایجاد کنید.
لینک کردن اسناد (Linking Documents)
در Html یک لینک با استفاده از تگ a>> تعریف می شود. این برچسب "anchor tag" نامیده می شود و هر چیزی بین تگ باز <a> و تگ بسته </a> قرار بگیرد، بخشی از لینک به حساب می آید و کاربر می تواند برای دسترسی به صفحه ی مرتبط روی آن بخش یا قسمت کلیک کند. در زیر نحوه ی استفاده ی ساده از تگ <a> بیان شده است.
<a href = "Document URL" ... attributes-list>Link Text</a>
مثال :
بیایید مثال زیر را دنبال کنیم که در آن آدرس https://clicksite.org را به صفحه شما پیوند میدهد -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://clicksite.org" target = "_self">کلیک سایت : بزرگترین مرجع فیلم های آموزش فارسی</a>
</body>
</html>
کد فوق، نتیجه زیر را تولید می کند، که در آن شما می توانید بر روی لینک ایجاد شده برای رسیدن به صفحه اصلی "کلیک سایت" (در این مثال) کلیک کنید.
Click following link
کلیک سایت : بزرگترین مرجع فیلم های آموزش فارسی
ویژگی target (target Attribute)
همانطور که مشاهده نمودید، ما در مثال قبلی از ویژگی target استفاده کردیم. این ویژگی مشخص می کند، که سند (document) یا صفحه ی لینک شده، در چه موقعیتی (location) باز شود . در زیر گزینه های ممکن (options) نمایش داده شده است –
|
ردیف |
Option |
توضیحات |
|
1 |
_blank |
سند (document) لینک شده را در یک پنجره یا برگه جدید باز می کند. |
|
2 |
_self |
سند (document) لینک شده را در همان قاب (frame) باز می کند. |
|
3 |
_parent |
سند (document) لینک شده را در کادر اصلی (parent frame) باز می کند. |
|
4 |
_top |
سند (document) لینک شده را در کل بدنه ی پنجره (full body of the window) باز می کند. |
|
5 |
targetframe |
سند (document) لینک شده را در یک targetframe نامگذاری شده ، باز می کند. |
مثال :
برای درک بیشتر تفاوت های اساسی بین optionsهای ویژگی target مثال زیر را ، مشاهده نمایید.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>روی هر یک از لینک های زیر کلیک کنید</p>
<a href = “https://clicksite.org” target = “_blank”>Opens in New</a> |
<a href = “https://clicksite.org” target = “_self”>Opens in Self</a> |
<a href = “https://clicksite.org” target = “_parent”>Opens in Parent</a> |
<a href = “https://clicksite.org” target = “_top”>Opens in Body</a>
</body>
</html>
کدبالا، نتیجه زیر را تولید می کند. که در آن شما می توانید با کلیک بر روی لینک های مختلف، تفاوت بین option های مختلف برای ویژگی target را درک نمایید.
روی هر یک از لینک های زیر کلیک کنید
Opens in New | Opens in Self | Opens in Parent | Opens in Body
استفاده از مسیر پایه (Base Path)
هنگامی که درون یک صفحه وبسایت، صفحات HTML مربوط به همان وبسایت را پیوند (link) می دهید، نیازی به دادن URL کامل برای هر پیوند (link) نیست. اگر از تگ <base> در header صفحه HTML خود استفاده کنید، می توانید از شر این کار اضافه، خلاص شوید. این برچسب برای دادن یک مسیر پایه (base path) برای تمام لینک ها استفاده می شود. بنابراین مرورگر شما، مسیر نسبی (relative path) را به این مسیر پایه (base path) الحاق می کند و URL کامل را ایجاد می کند.
مثال:
در مثال زیر با استفاده از تگ <base> یک URL پایه مشخص می کنیم و بعد می توانیم به جای دادن URL کامل برای هر پیوند (link)، به تمام لینک ها، مسیر نسبی (relative path) دهیم.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://clicksite.org/">
</head>
<body>
<p>Click following link</p>
<a href = "/about" target = "_blank">درباره "کلیک سایت" بیشتر بدانید</a>
</body>
</html>
این مثال، نتایج زیر را تولید می کند بطوریکه، شما می توانید بر روی لینک ایجاد شده یعنی « درباره "کلیک سایت" بیشتر بدانید » برای رسیدن به صفحه درباره ما، کلیک نمایید.
در این مثال url ارائه داده شده یعنی <a href = "/about"> به صورت <a href = " https://clicksite.org/about "> در نظر گرفته شده است.
Click following link
درباره "کلیک سایت" بیشتر بدانید
لینک شدن به بخشی از صفحه
با استفاده از ویژگی name، می توانید یک پیوند(link) به یک بخش خاصی از صفحه وب ایجاد کنید. این یک فرایند دو مرحله ای است.
توجه - ویژگی name در HTML5 منسوخ شده است. بنابراین از این ویژگی استفاده نکنید. به جای آن از ویژگی id و title استفاده کنید.
ابتدا لینکی را ایجاد می کنیم. که به وسیله ی آن قصد داریم به قسمتی از صفحه ی وب دسترسی پیدا کنیم. به وسیله ی تعریف تگ <a> و همچنین تعریف ویژگی name برای آن، لینک را ایجاد می کنیم.
<h1>HTML Text Links <a name = "top"></a></h1>
گام دوم این است که یک hyperlink ایجاد می کنیم تا یک لینک برای جایی که می خواهید به آن دسترسی پیدا کنید، ایجاد شود.
<a href = "/html/html_text_links.htm#top">Go to the Top</a>
تنظیم رنگ پیوندها
شما می توانید رنگ لینک ها، لینک های فعال و لینک های بازدید شده را با استفاده از ویژگی های link، alink و vlink از برچسب <body> تنظیم کنید.
مثال :
در فایل test.htm کد زیر را ذخیره کنید و آن را در مرورگر وب باز نمایید تا ببیند که ویژگی های link، alink و vlink چگونه کار می کنند.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://clicksite.org/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/mojavez" target = "_blank" >مجوز های "کلیک سایت" را مشاهده نمایید</a>
</body>
</html>
کد فوق، را در یک فایل html ذخیره نمایید و تست کنید. قبل از کلیک روی آن، رنگ لینک را بررسی کنید، رنگ آن را بعد از آنکه آن را فعال کردید و هنگامی که لینک بازدید شده است را نیز، بررسی کنید.
لینک دانلود
شما می توانید لینک متنی ایجاد کنید. و به وسیله ی آن فایل PDF خود یا فایل های DOC یا ZIP را دانلود کنید. این بسیار ساده است شما فقط باید URL کاملی از فایل دانلود را به صورت زیر ارائه دهید -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://clicksite.org/page.pdf">Download PDF File</a>
</body>
</html>
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
