آموزش ایجاد لینک در HTML | آموزش تگ a
یکی از مهم‌ترین اجزاء صفحات وب لینک‌ها (links) هستند. با استفاده از لینک‌ها می‌توانید پیوندی به صفحات دیگر ایجاد کنید. به طوری که وقتی کاربر روی آن کلیک کرد به یک صفحه وب دیگری منتقل شود. تگ a وظیفه ایجاد لینک در HTML را دارد.
درون این تگ می‌تواند یک متن یا دیگر عناصر HTML قرار گیرند. پس به این نکته توجه کنید که با استفاده از تگ a نه تنها متون، بلکه هر چیز دیگری، مثل تصاویر و… را می‌توانید لینک کنید.
نحوه ایجاد لینک در HTML
Syntax یا نحوه نوشتن تگ a بصورت زیر است:
1 | <a href="url">link text</a> |
برای مثال می‌خواهیم عبارت آموزش HTML و CSS را به آدرس adminesite.com لینک کنیم:
1 | <a href="https://adminesite.com/training/html-css/">آموزش HTML و CSS</a> |
همانطور که می‌بینید صفت href آدرس مقصد لینک را تعیین می‌کند. اگر نمی‌دانید صفت (attribute) چیست لطفا به جلسه آموزش پایه HTML بروید.
در مثال فوق بخشی که در خروجی نمایش داده می‌شود عبارت آموزش HTML و CSS است. که اگر کاربر روی این عبارت کلیک کند به آدرس https://adminesite.com/training/html-css منتقل می‌شود.
لینک‌های محلی
در مثال بالا ما از آدرس‌دهی مطلق (absolute) استفاده کردیم. یعنی آدرس لینک را بصورت کامل نوشته‌ایم.
نوعی آدرس‌دهی دیگر بنام آدرس‌دهی نسبی (relative) وجود دارد که نیازی به نوشتن آدرس بصورت کامل ندارد. یعنی می‌توان آدرس را بدون نام دامنه و پروتکل نوشت. به مثال زیر دقت کنید:
1 | <a href="/training/html-css/">آموزش HTML و CSS</a> |
از این نوع آدرس دهی فقط می‌توان برای لینک‌های داخلی استفاده کرد. لینک داخلی یعنی یک وبسایت به صفحات دیگر خودش لینک دهد نه وبسایت‌های دیگر. اگر آدرس لینک‌ها را مانند مثال فوق بدون پروتکل و نام دامنه وارد کنید (http://your-domain.com) بصورت خودکار نام دامنه خود وبسایت در ابتدای لینک قرار می‌گیرد.
پس یادتان باشد برای لینک‌های خارجی حتما باید آدرس مقصد را بصورت کامل وارد کنید (همراه با نام پروتکل و دامنه). اما برای لینک‌های داخلی می‌توانید بصورت مطلق یا نسبی عمل کنید.
نکته: آدرس‌دهی relative دارای نکات و ریزکاری‌های زیادی است که در اینجا گفته نشده. در آینده جلسه‌ای را برای آموزش انواع آدرس‌دهی ایجاد می کنیم.
صفت target در تگ a
صفت target تعیین می‌کند که آدرس مقصد لینک در کجا باز شود. این خصیصه می‌تواند مقادیر مختلفی بگیرد، ما در اینجا ۲ مورد که بیشترین کاربرد را دارد بیان میکنیم:
- blank_ (لینک را در یک tab یا پنجره جدید مرورگر باز می‌کند.)
- self_ (لینک را در tab یا پنجره فعلی مرورگر باز می‌کند. بصورت پیشفرض این گزینه برای لینک‌ها فعال است.)
در مثال زیر آدرس مقصد لینک در یک tab جدید مرورگر باز می‌شود:
1 | <a href="/training/html-css/" target="_blank">آموزش HTML و CSS</a> |
صفت title
صفت title اطلاعات متنی اضافه‌ای درباره یک عنصر تعریف می‌کند. به این اطلاعات به اصطلاح tooltip می‌گویند. متنی که درون این صفت نوشته شود، با قرار گرفتن ماوس روی عنصر نمایان می‌شود.
به مثال زیر دقت کنید:
1 | <a href="/training/html-css/" title="free learning">آموزش HTML و CSS</a> |
در خروجی، هنگامی که کاربر نشانگر ماوس را روی عبارت آموزش HTML و CSS می‌برد، عبارت free learning نمایش داده می‌شود.
نکته: صفت title مخصوص تگ لینک نیست و می‌توان آن را برای اکثر تگ‌های html استفاده کرد.
ایجاد Bookmark یا لینک لنگر
Bookmark یا لینک لنگر به بازدیدکننده اجازه می‌دهد تا به بخشی از صفحه وب پرش (Jump) کند. لینک‌های لنگر برای صفحات وب طولانی بسیار مفید هستند.
حتما تا به حال فِلِش برگشت به بالای صفحه و… را در وبسایت‌های مختلف دیده‌اید، اینگونه کارها با استفاده از لینک‌های لنگر ایجاد می‌شوند.
برای ایجاد لینک لنگر ابتدا باید برای عنصر مقصد یک شناسه در نظر بگیریم. صفت id می‌تواند یک شناسه منحصر بفرد به یک عنصر نسبت دهد. در مثال زیر ما به یکی از تگ‌های h2 شناسه C4 را نسبت داده‌ایم:
1 | <h2 id="C4">بخش چهارم</h2> |
بعد از ایجاد شناسه برای عنصر h2 تگ لینک لنگر را در مکان دلخواه ایجاد میکنیم:
1 | <a href="#C4">پرش به بخش چهارم</a> |
همانطور که مشاهده می‌کنید، کافیست در صفت href عبارت #C4 را قرار دهیم. در خروجی وقتی کاربر روی این لینک کلیک کند به بخشی از صفحه وب که عنصر h2 موردنظر ما وجود دارد هدایت می‌شود.
سلام وقتتون بخیر من برای یه پروژه باید یه وبسایت 5 صفحه ای درست کنم و فکر کنم درست متوجه نشدم چجوری باید صفحه های جدید رو ایجاد کنم خیلی ممنون میشم اگه راهنماییم کنید
سلام وقت بخیر
اگر همه 5 صفحه html ما در کنار هم قرار دارند، کافیه در صفت href هر لینکی که مدنظر هست فقط اسم صفحه دیگه رو بنویسید
برای مثال فرض کنید ما دوتا صفحه داریم بنام index.html و blog.html
حالا اگر بخوایم در صفحه index.html به صفحه blog.html لینک بدیم کافیه در صفت href تگ a موردنظر فقط عبارت blog.html رو بنویسیم.
سلام علیکم. خسته نباشید.ببخشید من هم با تگ a هم button دکمه ساختم،یسری کد های سی اس اس بهشون دادم و ظاهر جذابی پیدا کردن. اما وقتی روی a کلیک میکنم، یه مستطیل ابی و button یه مستطیل زرد رنگ میان که فکر کردم با border:none حل میشه مشکلش اما نشد. ممنون میشم راهنمایی کنین!
سلام وقت بخیر
به جفتشون این استایل رو بدید
outline: none
سلام مجدد. ممنون کدی رو که گفتین توی تگ استایلم گذاشتم و اوت لاین تگ باتن حذف شد، اما اون مستطیل ابی رنگی که موقع هاور مثل بک گراند ظاهر میشد همچنان بود و تگ اوت لاین روش کار نکرد.وقتی تگ بک گراند هم میذارم بک گراند موقع هاور اعمال میشه اما دوباره اون مستطیل ابی هست. من میخوام با تگ a دکمه بسازم و واقعا این بک گراند خیلی جالب نیست.ممنون میشم کمک کنید
سلام وقت بخیر
با استفاده از شبه کلاس :hover میتونید به حالت هاور عناصر هم css اعمال کنید
اول باید متوجه بشید که اون مستطیل آبی رنگ که می‌گید چیه، اگه background هست، میتونید با استفاده از background: none; از بین ببریدش
موفق باشید
سلام لطفاً بهم بگید توی کیبورد چی تایپ کنم تا تگ
بیاد
سلام وقت بخیر
تگ a قرار نیست خودش بیاد، باید کامل تایپش کنید
تایپ حروف که مشخصه
علامت های بزرگتری و کوچکتری هم که روی کیبور مشخصه فقط باید shift نگه دارید و اونارو بزنید
علامت های تگ کوتیشن و جفت کوتیشن هم دقیقا همینطور هستن
سلام یک سوالی که داشتم اینه یه فایلی که نه تو سایت بقیه هست نه سایت خودم چجوری با لینک بزارم برای دانلود؟؟؟
حتما باید از کوتاه کننده هایی که عکس هم لینک میدن استفاده کنم یا راه حلی داره؟
سلام وقت بخیر
فایلی که می‌خواید برای دانلود بهش لینک بدید حتما باید در یک وبسایتی آپلود شده باشه. حالا یا سایت شما یا سایت های دیگه.
از کوتاه کننده های لینک به دلایل مختلف استفاده می‌کنند، درصورت نیاز میتونید ازشون استفاده کنید ولی اجباری در استفاده از این سرویس ها وجود نداره.
موفق باشید
سلام چجوری یک تیکه از متن رو لینک کنیم
مثلا تو خیلی از سایت ها نوشته برای دانلود کلید کنید بعد “کلیک کنید” رو لینک کرده
همون عبارتی که میخواین لینک بشه رو داخل تگ a بذارید
سلام این لینکو ببنید وقتی رو عکس کلیک میکنیم دانلود میکنه، منم همینو کپی کردم و تو لوکال هوست خودم اجراش کردم البته ادرسه عکسو به عکسه خودم تغیر دادم ولی بعدش وقتی روش کلیک میکنم منو میبره تو یه قسمتی مثله پخش انلاین مانند و عکسو کامل اونجا نمایش میده، ولی من میخام مثله همون لینکه که فرستادم خود به خود در همون قسمته پایین مرورگر دانلود کنه، مرورگرم کرومه اپدیت اخرین نسخس، ایا مشکل اینه که تو لوکال هست اینجوری نشون میدش و بعدا که بره تو سرور برای بقیه درست میشه؟ یا اینکه مشکل یجا دیگس؟؟
سلام دوست عزیز، اگر میخواین تصاویر با کلیک دانلود شن باید تگ تصویر رو داخل یک تک a قرار بدید. داخل تگ a از ویژگی دانلود استفاده کنید:
<*a download="custom-filename.jpg" href="/path/to/image" rel="nofollow ugc">
<*img alt="ImageName" src="/path/to/image">
<*/a*>
علامت * رو پاک کنید.
در href و src ادرس تصویر را بذارید
درود، من یه لینک دانلود ساختم و توش یه فایل ویدئویی قرار دادم، دیدید که توی وبسایت های ایرانی وقتی رویه همچین لینکایی کلیک میکنیم فیلم رو دانلود میکنه و به پوشه دانلودز میره، خب منم دقیقا همون کارو کردم ولی فیلمو دانلود نمیکنه منظورم اینه که فقط قسمت picture to picture رو میاره و قسمته دانلود نداره و فقط پخشش میکنه، میدونم که فیلمو خودم دارم و نیازی به دانلود مجدد نیست ولی میخام بدونم که ایا کده من اشتباهه؟ یا اینکه کلا تویه لوکال هوسک اینجوریه و برای بقیه قسمت دانلود داره و درسته؟؟ و یه سوال دیگه من میخام با کلیک رویه لینک دانلود فیلم شروع به دانلود کنه یعنی نمیخام بره تو قسمتی شبیه پخش انلاین، همون قسمتی که بالا گفتم، اینو چجوری میشه ساخت؟
سلام بله کد شما اشتباهه، برای قرار دادن ویدیو با لینک دانلود از درس ۲۵ با موضوع آموزش کار با video در html کمک بگیرید در این درس نحوه صحیح درج ویدیو گفته شده که با این روش دکمه دانلود هم ظاهر میشه
یا میتونید لینک دانلود رو کنار باکس ویدیو بذارید یه بخش دانلود طراحی کنید اونجا از تگ a استفاده کنید.
سلام من تازه با این سایتتون آشنا شدم. ممنون از مطالبی که میزارید خیلیا میگن از w3schools استفاده کنید ولی به نظر من سایت های فارسی هم خوب توضیح دادن به نظرتون اشتباه میکنم؟
سلام این سایت چون به صورت تخصصی داره رو آموزش برنامه‌نویسی کار میکنه و تمام تمرکز این سایت روی همین موضوع هستش قطعا می‌تونه منبع خوبی باشه. اما مطالعه به زبان انگلیسی برای بسیاری از عزیران دشواره به همین دلیل ما سعی کردیم آموزش‌هایی رو فارسی منتشر کنیم.
عالی
ممنون از تدریس خوبتون
سپاس از همراهی شما
سلام و عرض خسته نباشید
من وب سایتی ساختم – می خواهم یک لینک برای نماد درگاهم بزنم که در یک صفحه ای دیگر از مرورگر باز بشه (مثل نماد نشان ملی ثبت) خودتان هم که تو همین سایت هست وقتی کلیک میشه روش تو یک صفحه ای دیگر باز بشه نه برگه
از چه کدی استفاده کنم؟
سلام
داخل تگ a عبارت
target="_blank"رو درج کنید.سلام
ممنون بابت مقاله مفیدتون .
با این سری مقالات رایگان css html چند درصد این زبان ها رو یاد میگیریم ؟
سلام دوست عزیز، سعی کریدم مباحث اصلی و پایه رو بیان کنیم و از گفتن نکات زیاد و جزییات خودداری کنیم. میشه گفت حدود ۶۰ تا ۶۵ درصد.
ممنون خانم جعفری یه سوال دیگه هم داشتم اینکه چه روشی هست که بشه یک سایت رو به طور کامل ه_*ک کرد و از دسترس عموم خارج کرد؟
موضوعی نیست که با یه کامنت قابل شرح باشه . نیاز به آموزش داره که این قبیل آموزش ها در وب سایت ما قرار نمی گیره.
سلام لینک ها رو باید تو کدوم تگ بنویسیم مثلا باید تو تگ head یا خودش جداگانه باشه مثل تگ body
داخل تگ بادی
سلام ببخشید برای وب سایت چگونه می تونم کاری کنم که پس از کلیک بر روی دکمه فایلی دانلود شود
سلام شایان جان
فقط کافیه لینک فایل مورد نظر رو در خصیصه href تگ a قرار بدی
با سلام.ترتیب خصیصه target و صفت Title مهمه یا آن چنان مهم نیست.
سلام آرین جان
کلا ترتیب در نوشتن خصیصه ها مهم نیست. حالا چه target و title باشه چه هرچیز دیگه‌ای.
سلام، ببخشید چگونه یک لینک برای باز کردن برنامه درست کنم؟
برای مثال باز کردن مرورگر و رفتن به یک آدرس
لینک رو که به روش گفته شده در همین آموزش میتونید اجرا کنید اگر منظورتون اینه که آدرسی را در مرورگر بزنید و سایت شما باز شه باید به درس نحوه‌ی آپلود سایت در سرور مراجعه کنید.
سلام میخواستم بپرسم که برای telegram , Twitter , YouTube چجوری میتونم با تگ a لینک بدم؟
ممنونتون میشم اگه راهنماییم کنید
سلام لطفا به مقاله زیر مراجعه کنید در این مقاله نمونه‌ای لینک های مورد نیاز شما موجوده:
نحوه اشتراک گذاری مطالب وبسایت در شبکه‌های اجتماعی
ممنون مطلب مفیدی بود. فقط من یه مشکلی دارم. وقتی رو لینک ساخته شده کلیک می کنم قبل از آدرسی که باید بره یک سری آشغال کد نشون میده و بنابراین آدرس رو خراب می کنه. مشکل کجاست؟
سلام احتمالا کد لینک به اشتباه نوشته شده بهتره کدبالا رو کپی کنید و فقط آدرس رو تغییر بدید.
سلام خسته نباشید ببخشی من یک سایت رو برنامه نویسی کردم ولی لینک نداره یعنی اون لینک فقط تو قسمت URL کار میکنه و من میخوام کاری کنم مثل سایت شما که لینک مثل
www._____.comباشه چطور برا صفحه ی سایت خودم لینک بزارم ؟سلام دوست عزیز، سایتی که برنامه‌نویسی کردید باید در یک سرور آپلود بشه. همچنین باید دامنه تهیه کنید. اون آدرسی که نوشتید مربوط به دامنه میشه. لطفا مقاله چگونه هاست و دامنه تهیه کنیم رو بخونید.