چرا هایپرلینک در html کار نمی کند؟ نحوه ساخت لینک در HTML - انواع لینک - لینک تصویر. مسیر مطلق و نسبی

یک هایپرلینک می تواند صفحاتی را در همان سایت پیوند دهد یا به هر صفحه ای در اینترنت اشاره کند. هنگام ایجاد پیوند به صفحات دیگران، همیشه باید از آدرس مطلق صفحه (http://www.site.com/page.html) استفاده کنید. اگر پیوندی به صفحه ای در یک سایت ایجاد می شود، ترجیحاً از یک URL نسبی (page.html، catalog/page.html) استفاده شود. هنگام ایجاد یک لینک گرافیکی، به خاطر داشته باشید که گرافیک ممکن است برای برخی از کاربران در دسترس نباشد، بنابراین مطمئن شوید که عناصر متنی مناسب را درج کنید.

مثال:

گاهی اوقات لازم است که یک هایپرلینک در همان صفحه ایجاد کنید. به عنوان مثال، در این صفحه، این هاپرلینک ها در ابتدای درس هستند که به شما اجازه می دهند به یک سوال خاص بروید و در پایین صفحه به شما اجازه می دهد تا به بالای صفحه بروید.

مثال:

مثال:

با استفاده از ویژگی TARGET، می توانید صفحه را در یک پنجره مرورگر جدید بارگذاری کنید. این ویژگی برای تنظیم نام پنجره استفاده می شود. نام پنجره برای اهداف سرویس استفاده می شود. برای باز کردن یک صفحه در یک پنجره جدید، از ثابت _blank استفاده کنید.

مثال:

ویژگی های LINK، ALINK، VLINK رنگ فونت را برای لینک ها تنظیم می کند.

ویژگی LINK برای برجسته کردن لینک هایی استفاده می شود که هنوز توسط کاربر بازدید نشده است.

برخی از مرورگرها ممکن است از توانایی دنبال کردن پیوندها با استفاده از کلید Tab پشتیبانی کنند. در این حالت، مرورگر پیش‌فرض، لینک‌ها را به ترتیبی که در متن صفحه ظاهر می‌شوند، برجسته می‌کند. می توانید ترتیب انتقال را با استفاده از ویژگی TABINDEX تگ تغییر دهید . برای گنجاندن یک هایپرلینک در لیستی که ترتیب ناوبری جدید را توصیف می کند، باید یک عدد صحیح مثبت در محدوده 1 تا 32767 به ویژگی TABINDEX اختصاص دهید. برای حذف یک پیوند از لیست، باید هر عدد منفی را به ویژگی اختصاص دهید. هنگامی که کاربر کلید TAB را فشار می دهد، مکان نما به لینکی با کمترین مقدار شاخص مثبت حرکت می کند. اگر به چندین لینک یک مقدار شاخص اختصاص داده شود، اولین مورد انتخاب شده همانی خواهد بود که در متن صفحه بالاتر است.

• این عنصر به مرورگر می گوید که چگونه سند را تفسیر کند. این عنصر الزامی نیست، اما توصیه می‌شود از آن برای جلوگیری از مشکلاتی که ممکن است هنگام رندر کردن صفحه ایجاد شود، استفاده کنید.
• - این برچسبی است که هر سند وب با آن شروع و با آن پایان می یابد.
• < سر > - این برچسب حاوی اطلاعات مهمی است (فراداده، عنوان صفحه، پیوند به سبک های طراحی، و همچنین اسکریپت).
• - تگ جفت دیگری که در داخل قبلی قرار دارد. برای تعریف عنوان صفحه وب که در مرورگر نمایش داده می شود استفاده می شود.
• تگ در زیر آمده است. داخل آن است که حاوی تمام اطلاعاتی است که کاربر در مرورگر می بیند.
• - برای طراحی هایپرلینک ها (). این یکی از مهمترین عناصر زبان html است.
• - با کمک آن پاراگراف های متنی ترسیم می شود.
• - برای برجسته کردن متن به صورت پررنگ استفاده می شود.
• , , , , همچنین برچسب های جفتی هستند، به عنوان مثال: . با کمک آنها می توان متن را به زیرعنوان سطوح مختلف تقسیم کرد که به شما امکان می دهد اهمیت آنها را در رابطه با کل سند تعیین کنید.
• تگ برخلاف موارد قبلی جفت نشده است. برای نشان دادن یک خط جدید در یک سند استفاده می شود.

در واقع، تگ های بسیار بیشتری وجود دارد، اما موارد ذکر شده برای ایجاد یک صفحه وب سایت ساده از طریق دفترچه یادداشت کاملاً کافی است.

پارامتر برچسب اجباری ویژگی href است که نشانی اینترنتی صفحه وب را مشخص می کند.

پیوند از دو بخش تشکیل شده است - بخش فهرست و آدرس. نشانگر پیوند قطعه ای از متن یا تصویری است که برای کاربر قابل مشاهده است. قسمت آدرس لینک برای کاربر قابل مشاهده نیست، این آدرس منبعی است که می خواهید به آن بروید.

قسمت آدرس پیوند از URl تشکیل شده است. URl (Uniform Resource Locator) یک آدرس منبع یکسان است. هنگام ایجاد آدرس برای جدا کردن کلمات، توصیه می شود از خط فاصله استفاده کنید تا خط زیر. به طور کلی، یک URL دارای فرمت زیر است:

روش دسترسی:://servername:port/path

یک روش دسترسی یا پروتکل، داده ها را بین ایستگاه های کاری در شبکه های مختلف مبادله می کند. رایج ترین پروتکل های انتقال داده:

فایل یک فایل را از دیسک محلی می خواند:

فایل:/gallery/pictures/summer.html

http دسترسی به یک صفحه وب را با استفاده از پروتکل HTTP فراهم می کند:

http://site.ru/

https یک پیاده سازی ویژه از پروتکل HTTP است که از رمزگذاری (معمولا SSL یا TLS) استفاده می کند.

https://site.ru/

ftp برای دریافت فایل از سرور FTP درخواست می کند:

ftp://pgu/directory/library

mailto یک جلسه نامه را با مقصد و میزبان مشخص شده شروع می کند:

میلتو: [ایمیل محافظت شده]

نام سرور نام کامل دستگاه را در شبکه توصیف می کند، به عنوان مثال، site.ru . اگر نام سرور مشخص نشده باشد، پیوند محلی در نظر گرفته می شود، یعنی. به همان ماشینی اشاره دارد که سند HTML حاوی پیوند است.

شماره پورت TCP که وب سرور روی آن اجرا می شود. اگر روش به شماره پورت نیاز دارد، این عددی است که باید مشخص شود (سرورهای جداگانه ممکن است شماره پورت مجزای خود را داشته باشند). اگر پورتی مشخص نشده باشد، پورت 80 به طور پیش فرض استفاده می شود. پورت های استاندارد عبارتند از:
21 - FTP
23 - شبکه راه دور
70 - گوفر
80 - HTTP

مسیر شامل نام پوشه ای است که فایل در آن قرار دارد.

هنگامی که فقط نام فایل در یک پیوند مشخص می شود، مرورگر فرض می کند که فایل در همان پوشه سند حاوی لینک قرار دارد. در عمل، وب سایت ها حاوی صدها سند هستند که در پوشه های جداگانه قرار می گیرند تا مدیریت آنها را آسان تر کند. برای ایجاد پیوند به فایلی خارج از پوشه حاوی سند جاری، باید مکان یا مسیر فایل را مشخص کنید. HTML از دو نوع مسیر پشتیبانی می کند: مطلق و نسبی.

مسیر مطلق مکان دقیق فایل را در کل ساختار پوشه روی کامپیوتر (سرور) مشخص می کند. مسیر مطلق فایل به فایل از منابع شخص ثالث دسترسی می دهد و شامل اجزای زیر است:
1) پروتکل، به عنوان مثال، http (اختیاری)؛
2) دامنه (نام دامنه یا آدرس IP رایانه)؛
3) پوشه (نام پوشه که مسیر فایل را نشان می دهد)؛
4) فایل (نام فایل).

دو نوع رکورد مسیر مطلق وجود دارد - با و بدون پروتکل:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

اگر فایل در پوشه root قرار دارد، مسیر فایل به صورت زیر خواهد بود:

http://site.ru/index.html

در صورت عدم وجود نام فایل، صفحه وب که به طور پیش فرض در تنظیمات وب سرور تنظیم شده است (به اصطلاح فایل فهرست) بارگذاری می شود.

http://site.ru/

به طور معمول، فایل فهرست سندی به نام index.html است. وجود یک اسلش / به این معنی است که آدرس در صورت عدم وجود مستقیماً به پوشه به فایل می رود.

یک مسیر نسبی مسیر سند مشخص شده را نسبت به سند فعلی توصیف می کند. مسیر بر اساس موقعیت صفحه وب که لینک در آن قرار دارد تعیین می شود. هنگام ایجاد پیوند به اسناد دیگر در همان سایت از پیوندهای نسبی استفاده می شود. هنگامی که مرورگر پروتکل http:// را در پیوند پیدا نمی کند، به دنبال سند مشخص شده در همان سرور می گردد.

یک مسیر نسبی شامل اجزای زیر است:
1) پوشه (نام پوشه که مسیر فایل را نشان می دهد)؛
2) فایل (نام فایل).

مسیر پیوندهای نسبی دارای سه نماد ویژه است:
/ به دایرکتوری ریشه اشاره می کند و به شما می گوید که از پوشه اصلی سند شروع کنید و به پوشه بعدی بروید
./ به پوشه فعلی اشاره می کند
../ یک پوشه بالا بروید (دایرکتوری)

تفاوت اصلی مسیر نسبی و مسیر مطلق در این است که مسیر نسبی حاوی نام پوشه ریشه و پوشه والد نیست که باعث کوتاه‌تر شدن آدرس می‌شود و در صورت جابجایی از یک دامنه به دامنه دیگر نیازی نیست. برای نوشتن یک آدرس مطلق جدید اما اگر یک منبع شخص ثالث، به عنوان مثال، به تصاویر شما با آدرس های نسبی پیوند داده شود، آنها در سایت دیگری نمایش داده نمی شوند.

لنگرها یا پیوندهای داخلی، پیوندهایی را به بخش‌های مختلف صفحه وب فعلی ایجاد می‌کنند و به شما امکان می‌دهند به سرعت بین بخش‌ها حرکت کنید. هنگامی که متن بیش از حد در صفحه وجود دارد، این کار مفید است. لینک های داخلی نیز با استفاده از تگ ایجاد می شوند با این تفاوت که ویژگی href حاوی نام اشاره گر، به اصطلاح anchor است و نه URL. قبل از نام اشاره گر همیشه علامت # قرار می گیرد.

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

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

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

پیوند دادن به صفحه دیگری در سایت شما یا سایت دیگری بسیار آسان است. برای ایجاد یک هایپرلینک، باید به مرورگر بگویید پیوند چیست و آدرس سندی را که به آن منتهی می شود را مشخص کنید. این کار با استفاده از تگ HTML انجام می شود. و ویژگی href مورد نیاز:

در اینجا URL آدرس سندی است که باید به آن بروید. و متن هایپرلینک که بین تگ ها قرار دارد و، لنگر پیوند نامیده می شود و برای بازدید کننده صفحه وب قابل مشاهده است. علاوه بر این که متن پیوند (لنگر) به خواننده اطلاع می دهد که انتقال به کجا انجام می شود، در بهینه سازی موتورهای جستجو (SEO) نیز بسیار مهم است، زیرا یکی از عوامل تعیین کننده در رتبه بندی سایت شما برای شما است. کلمات کلیدی موجود در این لنگر. معمولاً به این نوع رتبه بندی ارجاعی می گویند.

لینک مطلق

از آنها برای اشاره به یک سند در یک سایت دیگر (پیوند خارجی) استفاده می شود.

ایجاد لینک های مطلق در همان سایت مجاز است، اما استفاده از آدرس های نسبی برای ایجاد یک لینک داخلی که کوتاه تر به نظر می رسد صحیح تر است. اما، هنگام تجزیه و تحلیل سایت های مختلف، متوجه شدم که اکثریت قریب به اتفاق مدیران وب سایت ها لینک های داخلی را با آدرس های مطلق ایجاد می کنند. در اینجا یک نکته مثبت وجود دارد، زیرا اگر صفحه شما کپی شده باشد، به این ترتیب پیوندهای خارجی را بازگردانید.

همانطور که می بینید، با ارجاعات مطلق، همه چیز ساده است. با موارد نسبی دشوارتر است، زیرا هنگام ایجاد آنها، باید بفهمید که چه مقدار از ویژگی href را باید مشخص کنید، زیرا به مکان اصلی اسناد بستگی دارد. همانطور که گفتم، هیچ کس واقعاً با این کار زحمت نمی کشد و همه لینک های سایت را مطلق می کند. با این حال، اگر علاقه مند به کسب اطلاعات بیشتر در مورد نحوه درست ایجاد پیوندهای نسبی برای یک سایت هستید، می توانم مقاله ای از دیمیتری، نویسنده وبلاگ ktonanovenkogo.ru را توصیه کنم. من هنوز توضیح دقیق و قابل فهم تری ندیدم.

به عنوان مثال، من نشان خواهم داد که پیوند منتهی به فایل نسبت به ریشه سایت چگونه به نظر می رسد (فقط همه چیز را در سمت چپ اسلش سوم در یک پیوند مطلق مشابه قطع کنید):

پیوند نسبی

به اصلی

متن پیوند (لنگر)

رنگ ها و طراحی متن پاپ آپ فقط به تنظیمات سیستم عامل و مرورگر بستگی دارد.

به طور پیش فرض، زمانی که روی یک پیوند کلیک می کنید، یک سند جدید در پنجره فعلی باز می شود. با این حال، هنگام مشاهده سایت ها به صورت شخصی، این برای من راحت نیست. هنگام خواندن یک مقاله و دنبال کردن یک پیوند، برای من راحت است که صفحه در یک پنجره جدید باز شود و می توانم در هر زمان به خواندن مقاله قبلی ادامه دهم. یکی دیگر از دلایل باز کردن لینک در یک پنجره جدید این است که وقتی به سایت شخص دیگری می روید، احتمال زیادی وجود دارد که خواننده برنگردد. به خصوص اگر چندین جابجایی انجام دهد و به سادگی به یاد نداشته باشد که چند دقیقه پیش کجا بوده است.

ویژگی تگ هدف به ما کمک می کند پیوند را در یک پنجره جدید باز کنیم. . پیش‌فرض روی _self است که معمولاً نوشته نمی‌شود. برای باز کردن سند در یک پنجره جدید، مقدار مشخصه target را به _blank تغییر دهید:

Dmitry KtoNaNovenkogo روش دیگری را برای تنظیم نشانک ها در متن یک صفحه وب بدون استفاده از لنگرهای html توصیه می کند. برای انجام این کار، ما یک نشانک از هر تگ HTML موجود در صفحه ایجاد می کنیم و یک ویژگی id جهانی برای آن تجویز می کنیم. به عنوان مثال، ما یک نشانک از تگ هدر h3 ایجاد می کنیم:

متن عنوان

مهم است که یک حرف لاتین در ویژگی id به عنوان اولین کاراکتر نام انکر بنویسید، سپس می توانید از هر کاراکتر مجاز دیگری استفاده کنید.

به عنوان مثال به عنوان " " برگردیم و سپس ادامه دهیم.

شما می توانید از لینک های هش برای رفتن به مکان مناسب نه تنها در یک صفحه، بلکه برای رفتن به صفحه دیگری از سایت استفاده کنید. برای این کار انکر html را در جای مناسب صفحه سمت راست قرار می دهیم و در خود لینک هش قبل از نماد هش آدرس این صفحه را می نویسیم. مثلا:

پیوند متن به لنگر نشانک html

• پیوند بازدید نشده آبی است و زیر آن خط کشیده شده است.
• پیوند فعال - در فاصله زمانی بین کلیک کردن روی پیوند و شروع به بارگذاری صفحه جدید قرمز می شود. البته او مدت زیادی در این حالت نبوده است.
• لینک بازدید شده - بعد از کلیک روی آن رنگ آن به بنفش تغییر می کند.

می‌توانید رنگ پیوندهای یک سند html را با استفاده از یک برچسب و ویژگی‌های زیر تغییر دهید:

• پیوند - رنگ پیوندهای بازدید نشده.
• Alink - رنگ پیوند فعال.
• Vlink رنگ پیوندهای بازدید شده است.

همه ویژگی های فوق را می توان ترکیب کرد:

امیدوارم اکنون روشن شده باشد که چگونه می توان یک هایپرلینک در یک صفحه HTML و در یک ایمیل ایجاد کرد، چگونه یک تصویر را به یک پیوند تبدیل کرد، لنگرهای متنی، لینک های هش و لنگرهای html، تگ های html و ویژگی های پیوند چیست. من تمام تلاشم را کرده‌ام تا به تفصیل توضیح دهم که چه پیوندهایی در HTML هستند و چه هستند. یادآوری می کنم که درج هایپرلینک ها در متن فقط در حالت HTML انجام می شود.

هرگز مجبور به نوشتن مقالات طولانی، بیش از 10000 کاراکتر نبودم. اما این مبحث پیوندها تمام نشده است، ادامه دارد.

اگر این مقاله برای شما مفید بود، لطفا روی دکمه های شبکه های اجتماعی زیر کلیک کنید. شما را در صفحات می بینم!

من فکر می کنم شما قبلاً متوجه شده اید که در این فصل در مورد چه چیزی بحث خواهد شد.. و می دانید پیوند چیست، اگر نه، اینجا را کلیک کنید.. چندین نوع پیوند و همچنین "مکانیسم" برای دنبال کردن آنها وجود دارد. در این فصل سعی خواهم کرد نحوه ثبت پیوندها و همچنین پیچیدگی های کار با آنها را با جزئیات به شما بگویم.

انحراف غزلی:
یک بار در ارتش، رئیس ستاد نزد من آمد و دستور داد، نقل می کنم:
اون مدرک رو برام بیار، هر چند نمیدونم کجاست و چیه!! چه ایستاده ای؟ بریم بدویم!! من دیر کردم!!!

بنابراین، چرا من آنقدر هستم که مرورگر، مانند من، در حالت گیجی قرار نگیرد، باید بداند: نام دقیق سند، مسیر سند، و مکانی که باید آن را بیاورد، یا بهتر است بگوییم کجا برای باز کردن آن

در حال حاضر، با کمک notepad، ما فقط یک سند HTML ایجاد کرده ایم، من آن را با نام index.html دارم (چرا چنین نام عجیبی را انتخاب کردم index.html و چرا باید به آن نگاه کنم) نمی دونم با کدوم یکی، خودت اسمشو پیدا کردی، اما فکر می کنم، تو یادت میاد و میدونی کجاست، مگر اینکه رئیس دفتر من باشی :). در این سند سعی می کنیم یک لینک ایجاد کنیم به سند دیگری که هنوز در اختیار نداریم.. بنابراین قبل از مراجعه به آن، باید آن را ایجاد کنید خوب، شما قبلاً می دانید که چگونه.

اکنون می دانم که شما دو سند html index.html و primer.html دارید و اکنون حداقل مجموعه ای برای یادگیری بیشتر دارید.

برچسب آشنایی (از لنگر - لنگر)، می توانید متن یا تصویری را در آن قرار دهید که به یک پیوند به اسناد خاصی تبدیل می شود. ویژگی برچسب href نام و مسیر سندی را که پیوند به آن اشاره می کند را مشخص می کند.

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

فایل index.html:

رنگين كمان



به دنبال عبارتی باشید که به شما کمک کند مکان رنگ ها را در رنگین کمان به خاطر بسپارید.


آر
آ
D
در
جی
آ




فایل primer.html:

رنگين كمان




هر
شکارچی
آرزوها
دانستن
جایی که
نشسته است
قرقاول



به صفحه اصلی برگردید

یکی از صفحات شما در سایت باید index.html نامیده شود. زمانی که شخصی نام سایت شما را وارد می کند، فایلی با این نام در سایت شما است که برنامه ربات به دنبال آن می گردد. از آنجایی که ابتدا صفحه index.html باز می شود، آن را به صفحه اصلی تبدیل کنید. شما می توانید بقیه صفحات را هر طور که دوست دارید صدا کنید ... دیگر هیچ تفاوتی با نام وجود ندارد.

در مورد پرونده هنگام نوشتن نام مسیر و سند به یاد داشته باشید که به عنوان مثال: Page.html، page.html و PAGE.html نام اسناد مختلف هستند! همین امر در مورد نام نشانک ها و نقاشی ها نیز صدق می کند. همیشه هنگام نوشتن کد به حروف کوچک و بزرگ حساس باشید، احتمال زیادی وجود دارد که چنین نام هایی توسط مرورگر خاصی شناسایی نشوند. نوشتن همه چیز و نامگذاری با حروف ریز لاتین را به یک قانون تبدیل کنید، در این صورت ریسک عامل انسانی و هوسبازی برنامه ها به صفر می رسد.

قانون سه کلیک

سعی کنید "درخت پیوند" را به گونه ای تشکیل دهید که بازدیدکننده سایت بتواند با حداقل تعداد کلیک روی لینک ها، از هر یک از صفحات آن به هر مکانی در سایت برود. بیش از سه جابجایی به جای مناسب در سایت دیگر خوب نیست.. بارگذاری بی پایان صفحاتی که شخص به آنها نیاز ندارد می تواند منجر به فروپاشی عصبی و بسته شدن زودهنگام سایت شود. در وقت، پول و اعصاب مردم صرفه جویی کنید.