parsgreen.com
article

نحوه ایجاد لینک در HTML

html-link

همان طور که اطلاع داریم، ایجاد لینک یا پیوند در صفحات وب امری عادی و مرسوم است، بدین معنی که مدیران وبلاگ ها و وبسایت های مختلف معمولا آدرس صفحات همکاران یا دوستان خود را در قسمتی خاص به نحوی درج می کنند که اگر بر روی آنها کلیک کنیم، وارد آدرس مورد نظر خواهیم شد، این حالت اغلب به صورت سیستماتیک (بدون کدنویسی) انجام می شود، یعنی کافی است آدرس صفحه (سایت، وبلاگ و...) را در قسمت درج لینک به همراه سایر مشخصات وارد کنیم تا آن لینک به لیست پیوندهای ما اضافه شود، اما باید بدانیم هنگامی که صفحه وب خود را مشاهده می کنیم، خروجی نهایی به صورت کدهای HTML به مرورگر ارسال شده است، لذا آشنایی با این مبحث می تواند تا حدود زیادی به درک ما از چگونگی کارکرد لینک ها کمک کند.

ایجاد لینک با تگ a و href


تگی که در HTML و در واقع در صفحات وب برای ایجاد لینک به سایر صفحات استفاده می شود تگ a است که در کنار href کامل می شود، عبارت a مخفف anchore یا لنگر است و href مخفف Hypertext Reference یا ابر متنی است که حاوی لینک (hyperlink) به صفحه دیگری است، به مثال زیر توجه کنید.
<a href="http://webgoo.ir">کلیک کنید</a>
در لینک ساده بالا، عبارتی که برای مقادیر href در نظر گرفته می شود، در واقع همان آدرس URL مقصد است که می خواهیم کاربر پس از کلیک بر روی متن "کلیک کنید" به آن هدایت شود.
نکته: محتوای لینک ها در حالت پیش فرض در همان صفحه فعلی نمایش داده می شوند، به عبارتی جایگزین صفحه فعلی می شوند، اما با تنظیم پارامتر target که در ادامه خواهیم دید، می توان رفتار آنها را تغییر داد.

ایجاد عنوان برای لینک یا title


تگ a با خاصیت های دیگری کامل تر می شود که از آن جمله می توان title را نام برد، استفاده از title اجباری نیست، اما می تواند از نظر بهینه بودن لینک های سایت مفید باشد.
<a href="http://webgoo.ir" title="این یک لینک است">کلیک کنید</a>

کنترل پنجره لینک یا target


همان طور که در نکته بالا گفتیم، لینک ها به صورت پیش فرض در همان پنجره نمایش داده می شوند، اما ممکن است بخواهیم پس از کلیک کاربر، پنجره فعلی حفظ شده و به جای آن، محتوای لینک در پنجره جدیدی نمایش داده شود، بدین منظور از پارامتر دیگری به نام target استفاده می کنیم، به مثال زیر توجه کنید.
<a href="http://webgoo.ir" title="این یک لینک است" target="_blank">کلیک کنید</a>
پارامتر target مقادیر متفاوتی می پذیرد که به صورت تیتروار در زیر ملاحظه می کنید.
- blank_ : نمایش محتوای لینک در پنجره جدید.
- parent_ : نمایش محتوای لینک در پنجره والد (معمولا در حالتی استفاده می شود که لینک از یک frame فراخوانی شود).
- self_ : نمایش محتوای لینک در پنجره فعلی (حالت پیش فرض).
- top_ : نمایش محتوای لینک در بالاترین سطح (معمولا در حالتی استفاده می شود که چند frame در صفحه وجود داشته باشد و بخواهیم محتوای لینک خارج از فریم ها و در بالاترین سطح نمایش داده شود).
- نام frame : برای پارامتر terget می توان نام یک frame را نیز قرار داد، بدین ترتیب محتوای لینک در داخل فریم نمایش داده خواهند شد.

ایجاد لینک به یک تصویر


hypertext یا متن حاوی لینک می تواند به صورت محتوای غیر متنی نیز باشد، به طور مثال می توان یک تصویر را با استفاده از تگ img در این قسمت درج کرد، به مثال زیر توجه کنید.
<a href="http://webgoo.ir" title="این یک لینک است" target="_blank"><img src="image/your-img.jpg" alt="your-alt"  width="100" height="100"></a>
نکته: در برخی مرورگرها تصاویر لینک شده با یک خط در حاشیه مشخص می شوند، برای محو این خط حاشیه ای باید از خاصیت border با مقادیر 0 در HTML یا در حالت بهتر و استاندارد تر، در CSS استفاده کنید.
در پایان این آموزش، شاید این پرسش به ذهنتان رسیده باشد که چگونه است بیشتر لینک های وب با رنگ ها و حالت های مختلف هستند، به طور مثال فونت و اندازه لینک ها متفاوت است یا با بردن ماوس روی لینک، رنگ آنها تغییر می کند و...، برای یافتن پاسخ این سوالات باید کمی صبر کنید و آموزش های مقدماتی HTML را به پایان برسانید، در گام بعدی یعنی فراگیری CSS، خواهیم دید که می توان لینک های وب را با استایل CSS فرم داد و به اصطلاح سفارشی نمود.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» بررسی تگ های اصلی و کلیدی HTML در صفحات وب
» آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)
» کاربرد تگ img و نمایش تصاویر در HTML
» فرمت بندی و کار با پاراگراف و متن در HTML
» کار با تگ فونت (font) و استایل در html
commentنظرات (۲۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: ielts
زمان: ۱۷:۵۵:۴۹ - تاریخ: ۱۳۹۲/۰۶/۰۶
very good
نویسنده: آزیتا
زمان: ۲۲:۴۳:۲۳ - تاریخ: ۱۳۹۲/۰۶/۰۶
سلام واقعا متشکرم از مطالب خوب سایتتون
من چطوری میتونم مثل سایت شما وقتی یک گزینه رو انتخاب کردم گزینه های فرعی اون دیده بشن؟
یعنی وقتی با ماوس روی مهارتهای وب در بالای صفحه می روید گرینه های وبلاگ نویسی و طراحی وب و ... دیده میشن؟
ممنون میشم اگه راهنمایی کنید
پاسخ: 
سلام
در این خصوص آموزش های مفصلی در سایت ارائه شده، در قسمت جستجو عبارت "منو" را وارد کنید.
نویسنده: نسرین
زمان: ۱۹:۱۱:۵۰ - تاریخ: ۱۳۹۲/۰۶/۱۰
سلام
ببخشید از اینکه سوال من ربطی به مطالب سایت نداره ولی در صورت امکان اگه جواب بدین ممنون میشم
چطوری در دریم ویور وقتی بر روی یکی از گزینه ها کلیک می کنم صفحه جدید در کل صفحه باز نشود و فقط در قاب اصلی باز شود
درست مثل سایت شما که با انتخاب گزینه های موجود در قاب دسته بندی فقط صفحه اصلی تغییر می کند
پاسخ: 
سلام
این موضوع به دریم ویور ارتباط ندارد، بلکه به نحوه کدنویسی مربوط می شود، در واقع باید سیستم سایت یا وبلاگتان طوری طراحی شده باشد که قابلیت ایجاد یک بخش و استفاده چند باره از آن فراهم باشد، به طور مثال ایجاد بخش منو و استفاده چند باره از آن در صفحات مختلف (نیاز به آشنایی در سطح متوسط به بالا با مباحث وب و برنامه نویسی دارد).
نویسنده: نسرین
زمان: ۱۷:۴۰:۲۲ - تاریخ: ۱۳۹۲/۰۶/۱۱
سلام
میتونید من راهنمایی کنید که به جواب سوالم برسم حالا به هر طریقی که باشد
پاسخ: 
سلام
عرض کردیم، سوالتان جواب مشخص و کوتاهی ندارد که مستقیم به آن اشاره کنیم، در واقع این یک تکنیک است که پیاده سازی آن به میزان آشنایی شما با برنامه نویسی وب و سیستمی که قصد استفاده از آن را دارید ارتباط دارد، به فرض اگر قرار است در وبلاگ چنین موردی داشته باشید، باید با نحوه طراحی قالب برای سرویس دهنده وبلاگتان آشنا باشید، یا اگر برای جوملا، وردپرس و... قالب طراحی می کنید، باید این مورد را در آنجا تعریف کنید، همین طور اگر از سیستم مدیریت محتوای شخصی استفاده می کنید، باید بخش مربوط به مطالب به صورت داینامیک طراحی شده باشد که متناسب با هر صفحه، تنها یک محتوای خاص را خروجی دهد، دریم ویور تنها یک محیط برای نوشتن کد است، اینکه چه کدی و چگونه بنویسید بستگی به شما دارد.
نویسنده: سی صد
زمان: ۱۴:۰۴:۵۰ - تاریخ: ۱۳۹۲/۰۶/۱۷
این آموزش که مخصوص تازه کار ها بود
بعد ۲ ماه اومدم تو سایت به امید اموزش مفید
اما انگار دل به کار نمیدید
به هر حال خسته نباشید
پاسخ: 
همان طور که از دسته بندی مطلب مشخص است، آموزش مربوط به مباحث مقدماتی HTML است که خود، مخاطبان خاصی دارد.
به هر حال نمی دانیم توقع کاربران از سایتی که هیچ توقعی از آنها ندارد چیست؟! هر کسی برای خود کار و زندگی دارد و نمی توان یکسره وقت را صرف سایت کرد، تهیه مطالب هر چند به ظاهر ساده، خیلی وقتگیر است و نیاز به دقت دارد، از طرفی پاسخگویی به نظرات کاربران + تهیه نسخه جدید سیستم مدیریتی سایت نیز مزید بر علت می شود.
نویسنده: خلیل
زمان: ۰۰:۱۲:۱۶ - تاریخ: ۱۳۹۲/۰۷/۲۶
سلام
خیلی ممنون از زحماتی که برای اموزش کشیدین .
خیلی مطالب ساده و هر کسی که بخواند یاد میگیرد . در خیلی از جاها اموزش هست ولی سر در اوردن ازشون خیلی سخته . ممنون که به زبان ساده و مبتدی مطالب رو نوشتین .
نویسنده: مصطفی
زمان: ۲۲:۰۱:۰۶ - تاریخ: ۱۳۹۲/۰۷/۲۸
تشکر از زحماتتون
چطور میشه وقتی موس روی یک لینک میره یه توضیح گرافیکی واسش باز بشه فکر می کنم با css امکانش باشه فقط نمی دونم دستور مورد نظر چیه
پاسخ: 
باید به دنبال عبارت Tooltip در وب جستجو کنید، متاسفانه کدی آماده برای این منظور در اختیار نداریم.
نویسنده: دانيال
زمان: ۰۳:۴۰:۱۳ - تاریخ: ۱۳۹۲/۰۸/۱۱
ممنون از سايت پر محتوا و زحماتي كه براي ارتقا سواد بينندگان مي كشيد .
پيروز باشيد
نویسنده: معصومه
زمان: ۰۹:۵۴:۲۰ - تاریخ: ۱۳۹۲/۰۹/۲۵
سلام
من در href از
target="_3"
که نام فرم سه است در لینک فرم 2 استفاده کردم اما روی لینک که کلیک می کنم یک صفحه مجزا باز می کند درون فرم 3 نشان نمیدهد.
پاسخ: 
سلام
هر چند دقیقا نمی دانیم که قصد انجام چه کاری را دارید، اما تا جایی که اطلاع داریم چنین کاری امکانپذیر نیست! تنها می توانید در قسمت target مقادیر id یک iframe را ست کنید که اطلاعات به آن ارسال شود یا اینکه با جاوا اسکریپت آشنا باشید و موارد مد نظرتان را به این وسیله تعریف کنید.
نویسنده: نسرین رفعتی
زمان: ۱۴:۳۹:۰۳ - تاریخ: ۱۳۹۲/۱۱/۱۴
سلام بخواهیم به یک صفحه مجزا (یک صفحه که خودمان ایجاد کردیم نه یک صفحه در اینترنت) باید چه کار کنیم یه توضیح واضح میدید؟ ممنون
پاسخ: 
سلام
فایل را در کنار فایل اصلی در یک دایرکتوری قرار دهید و در قسمت href نام کامل فایل (به همراه پسوند) را درج کنید.
نویسنده: اکبر آقابیگ
زمان: ۰۰:۵۷:۱۵ - تاریخ: ۱۳۹۳/۰۱/۰۵
با سلام
دوست عزیز به آدرس بنده یه نگاهی بنداز ، چطور می تونم برای لینک های پایین عکس مثلآ 175*200 قرار بدم ؟
مثل سایت دیجی کالا که هر لینک پایین سایتش یه عکسی داره.....!
داداشت رو یه راهنمایی کن (کجا باید قرارشش بدم)
اگه بخوام بنر قرار بدم ، خیلی متفاوته؟
با احترام
اکبر آقابیگ
پاسخ: 
سلام
دوست گرامی برای این گونه موارد باید با کدنویسی HTML و کمی CSS آشنا باشید، تغییر قسمت های مد نظرتان باید از طریق ویرایش سورس قالب انجام شود که توضیح ساده و مختصری ندارد، سایت اشاره شده نیز به صورت سیستماتیک (با برنامه نویسی داینامیک) طراحی شده که خود مبحث مفصلی دارد.
نویسنده: محمد
زمان: ۲۲:۲۶:۱۸ - تاریخ: ۱۳۹۳/۰۱/۳۱
سلام چند تا عکس داریم میخوام وقتی روش ماوس رو میبرم در همان صفحه در یه قاب بزرگتر که کنار این چند تا عکس نمایش داده شود به نمایش در بیاد اگه تکه کدش رو بگین ممنون میشم
پاسخ: 
سلام
برای اینگونه موارد باید در وب به دنبال کدهای آماده جاوا اسکریپت یا جی کئوری برای نمایش یا بزرگنمایی تصاویر باشید، متاسفانه کدی برای این منظور در اختیار نداریم.
نویسنده: بهزادی
زمان: ۱۹:۰۱:۴۱ - تاریخ: ۱۳۹۳/۰۹/۲۶
سلام.
من در پیج ی که طراحی کردم از href استفاده کردم. اما وقتی اون رو در xampp تست میکنم به صفحه ای که پیوند داده شده منتقل نمیشه و پیغام
Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster.
Error 404
localhost
Apache/2.4.10 (Win32) OpenSSL/1.0.1i PHP/5.5.15
میده. آیا این طبیعی است؟ یا ایراد از کد نویسی است؟
ممنون از شما.
پاسخ: 
سلام
بدون دیدن نمونه کدها و لینک های مد نظر شما نمی توان گفت که این یک مشکل است یا حالت عادی! متن خطا نشان می دهد که شما به صفحاتی لینک داده اید که وجود ندارند، ممکن است واقعا وجود نداشته باشند (به فرض لینک به سایتی که وجود خارجی ندارد)، یا اینکه آدرس دهی در قسمت href اشتباه باشد (به فرض برای نمایش یک دایرکتوری در لوکال هاست باید به صورت نمونه زیر آدرس دهی شود:
<a href="http://localhost/dir/">link</a>
)
نویسنده: بهزادی
زمان: ۲۲:۱۵:۴۸ - تاریخ: ۱۳۹۳/۰۹/۳۰
سلام.
مرسی از پاسخگویی شما.
<a href="http://www.mci.ir">همراه اول</a>
این نمونه کدیه که استفاده کردم . مانند توضیحات شما.
این به نظرتون اشتباه است؟
در غیر این صورت چرا اررور میدهد؟
پاسخ: 
سلام
لینک را با http درج کنید (آدرس بالا اصلاح شد!).
نویسنده: شارژ ايرانسل
زمان: ۱۱:۰۷:۴۱ - تاریخ: ۱۳۹۳/۱۱/۰۹
سلام خدمت مديريت محترم سايت
ببخشيد برخي افراد بجاي تگ تايتل از تگ name استفاده مي كنند. به اينصورت:
<a title="شارژ ایرانسل" href="http://www.behcharge.com">شارژ ایرانسل</a>

<a name="شارژ ایرانسل" href="http://www.behcharge.com">شارژ ایرانسل</a>
هر كدوم از تگهاي تايتل و نيم چه مزيتي نسبت به همديگر داره؟ آيا تگ name نسبت به تگ title از لحاظ سئو مزيت داره؟
ممنونم
پاسخ: 
سلام
- عبارات گفته شده "تگ" نیستند، "Attribute" یا "صفت" هستند که به تگی دیگر (مانند a) اختصاص می یابد.
- هدف از دو خصوصیت گفته شده متفاوت است و لذا نباید به جای هم استفاده شوند، خصوصیت name معرف عنوان یک لنگر (anchor) در صفحه است که به فرض می توان برای ایجاد bookmark در صفحه از آن استفاده کرد، به طور مثال اگر در لینک صفحه بعد از آدرس URL اصلی، مقدار یک name را (به همراه علامت # در ابتدا) قرار دهید، مرورگر شما را به موقعیت name مورد نظر هدایت می کند، این صفت در HTML 5 دیگر پشتیبانی نمی شود و به جای آن باید از ID استفاده کرد.
- صفت title برای ایجاد متن راهنما یا tooltip کاربرد دارد، یعنی زمانی که کاربر نشانه گر را روی لینک مورد نظر می برد، یک بالن به همراه توضیحات برای او نمایش داده می شود که این فاکتوری مثبت از نظر SEO است.
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

4 × 9
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...