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

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

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

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

1. دفترچه یادداشت را باز کنید.
2. کد را در html می نویسیم. به عنوان مثال، یک صفحه با تعدادی عکس.
3. ما آن را به عنوان یک صفحه html در همان ذخیره می کنیم پوشه کار، جایی که اولین سندی که ایجاد کردیم قبلاً وجود دارد. بیایید، برای اینکه گیج نشویم، آن را primer.html بنامیم، و شاید نام اولی را نیز به index.html تغییر دهیم.

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

لینک های متنی

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

همه با هم اینطور نوشته شده است:

اینم عکسای من!!

همانطور که احتمالا متوجه شدید primer.html نام دومین سند html ما است و کتیبه "اینجا عکس های من است!" این یک تکه متن از فایل index.html است.

به قیاس با برچسب تصاویر مسیر پیوند به سند در حال باز شدن به همین روش نوشته می شود:

اینم عکسای من!!- این ورودی به این معنی است که در فهرستی که اولین سند html ما قرار دارد، یک پوشه stranica وجود دارد که فایل primer.html در آن قرار دارد.
اینم عکسای من!!- و این یعنی فایل primer.html یک سطح بالاتر از سند قرار می گیرد
اینم عکسای من!!- سند در وب سایت www.site.ru قرار دارد.

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

فایل index.html:

به من بگو ای فرزند عزیز: در کدام گوش من وزوز می کند؟


AT قانونیا ترک کرد?

فایل primer.html:

اما من حدس نمی زدم! در هر دو گوشم وزوز دارم

خب من اینطوری بازی نمیکنم...

مثال نشان می دهد که پیوندها با رنگ هایلایت شده اند، به طور پیش فرض آبی یک پیوند است، و قرمز پیوندی است که قبلاً بازدید شده است، این رنگ ها را می توان با استفاده از تگ افتتاحیه که قبلاً برای ما شناخته شده است تغییر داد. < body > و صفات آن

ارتباط دادن- رنگ پیوند
پیوند- رنگ پیوند فعال و کلیک شده.
vlink- رنگ لینک بازدید شده

اینگونه نوشته شده است:

>

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

فایل index.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

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

آر
ولی
D
در
جی
ولی




فایل primer.html:

link="#008000" alink="#ff0000" vlink="#ffff00">

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



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

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

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

قانون سه کلیک

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

ویژگی اصلی یک سند HTML این است که حاوی آن است هایپرلینک ها(یا به سادگی پیوندها) به سایر اسناد، سایت ها، فایل ها، تصاویر و غیره. این توانایی درج پیوند در صفحات به اشیاء خارج از آن بود که اینترنت را بسیار محبوب و راحت برای استفاده کرد. بنابراین، هنگام ایجاد سایت خود، همیشه "جادوی" پیوندها را به خاطر بسپارید.

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

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

مقررات

§ 1. پیوند به یک فایل، پیوند به یک سایت، پیوند به یک صفحه

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

برای اینکه فکر در کنار درخت پخش نشود، همه چیز را با یک مثال نشان می دهم.

در مرورگر ما این را خواهیم دید:

در مرورگر ما این را خواهیم دید:

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

§ 2. ایجاد پیوندهای خارجی

پیوندها با یکدیگر تفاوت دارند خارجیو درونی؛ داخلی، و همچنین در متنو گرافیکی. پیوندهای خارجی به خارج از "محدودیت" صفحه html هدایت می شوند، پیوندهای داخلی به بخش های مختلف همانصفحات پیوندهای متنی متنی هستند (به طور پیش‌فرض، با رنگ آبی مشخص شده و زیر آن خط کشیده شده است)، و پیوندهای گرافیکی، به عنوان یک شی که برای رفتن باید روی آن کلیک کنید، حاوی نوعی تصویر هستند. همه این نوع پیوندها در HTML با استفاده از یک برچسب (مخفف انگلیسی anchor - anchor) ایجاد می شوند. بیایید آن را با جزئیات بیشتر در نظر بگیریم.

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

به عنوان مثال، برای ایجاد یک پیوند متنی به صفحه نخستدر این سایت، باید کد HTML زیر را بنویسید:

http://www.seoded.ru/"> صفحه اصلی سایت

در مرورگر به شکل زیر خواهد بود:

همانطور که در ابتدای این آموزش نوشتم، رنگ متن پیوند (انکر) را می توان با استفاده از . به طور کلی، می‌توانید در متن لینک‌ها مانند متن اصلی صفحه، یعنی پررنگ، ایتالیک، عنوان استفاده و غیره را اعمال کنید.

§ 2.1 پیوندهای گرافیکی (پیوندهای تصویری)

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

و مرورگر نشان خواهد داد:

به طور پیش فرض، مرورگر تصویر را در پیوند تصویر با یک قاب احاطه می کند. اگر این مورد نظر نیست، پس ویژگی مرزبرچسب زدن imgباید روی 0 تنظیم شود:

border="0">

صفحه اصلی

§ 3. پیوندهای داخلی

برای پیمایش راحت در صفحات با محتوای زیاد، از لینک های داخلی استفاده می شود. با کمک آنها بود که محتوای درس را ساختم (به ابتدای این صفحه مراجعه کنید). لینک های داخلی نیز مانند لینک های خارجی ایجاد می شوند. فقط در مقدار مشخصه href"لنگر" پیوند نشان داده شده است. Anchor توسط ویژگی ایجاد می شود نام:

name="anchor name">متن

و نام "لنگر" خودسرانه تنظیم شده است. در اینجا شایان ذکر است که همه مرورگرها نام روسی "لنگرها" را نمی دانند، بنابراین توصیه می کنم از الفبای لاتین استفاده کنید. متن بین تگ ها برای ایجاد "لنگر" اختیاری است و اغلب مشخص نیست.

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

همانطور که در بالا گفتم، در صفت hrefلینک داخلی به جای آدرس، نام "لنگر" مورد نظر با نماد هش اجباری نشان داده شده است ( # ) در مقابل او. بیایید یک مثال بزنیم.

من یک "لنگر" به نام ایجاد کردم سرتیترو آن را در کد صفحه در کنار عنوان این درس («Hyperlinks in HTML») قرار دهید. کد "انکر" به شرح زیر است:

name="title">

href="#zagolovok">به عنوان بروید

و در مرورگر به این صورت:

اگر متوجه شدید که پس از کلیک بر روی لینک داخلی عنوان، URL تغییر کرده است نوار آدرسمرورگر:

به آدرس اصلی:

http://www.html

http://www..html#header

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

§ 4. مراجع مطلق و نسبی

صفحه اصلی

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

فرض کنید باید به یک صفحه لینک دهیم client.html، که دروغ می گوید در یک پوشهبا صفحه اصلی سایت سپس کد پیوند نسبی به شکل زیر خواهد بود:

/clienty.html">مشتریان

حال فرض کنید در همان پوشه با صفحه اصلی است سفارش پوشهو در حال حاضر در آنصفحه klienty.html قرار دارد. سپس کد پیوند نسبی به این صورت می شود:

/zakazy/clienty.html">مشتریان

حالا بیایید به ایجاد هایپرلینک نگاه کنیم نسبت به صفحه اصلی. فرض کنید یک صفحه داریم price.html(صفحه منبع) و از آن باید به صفحه پیوند دهید client.htmlدر اینجا گزینه های معمولی زیر وجود دارد:

1. صفحات price.html و clienty.html هستند در یک پوشه.

clientty.html">مشتریان




2. در پوشه ریشه سایت، قیمت صفحه.html در پوشه سفارش است یک سطح بالاتر).

کد به این صورت خواهد شد:

../clienty.html">مشتریان

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




3. صفحه klienty.html و پوشه zakazy هستند در پوشه ریشه سایت، پوشه مبلمان در پوشه سفارش است، قیمت صفحه.html در پوشه mebel قرار دارد(یعنی صفحه klienty.html نسبت به صفحه اصلی price.html دروغ است دو سطح بالاتر).

../../clienty.html">مشتریان

یعنی هر سطح با دو نقطه و یک اسلش نشان داده می شود. / ».




4. در پوشه ریشه سایت, page clienty.html در پوشه سفارش است(یعنی اکنون صفحه klienty.html نسبت به صفحه اصلی price.html است یک سطح پایین تر).

zakazy/clienty.html">مشتریان

در این مورد، نقطه و اسلش قرار نمی گیرد.




5. صفحه price.html (صفحه اصلی) و پوشه زکازی هستند در پوشه ریشه سایت، پوشه مبلمان در پوشه سفارش است, page clienty.html در پوشه mebel قرار دارد(یعنی اکنون صفحه klienty.html نسبت به صفحه اصلی price.html است در دو سطح زیر قرار دارد).

zakazy/furniture/clienty.html">مشتریان




6. در پوشه ریشه سایت دو پوشه وجود دارد: زکازی و اوپلاتا. صفحه clienty.html در پوشه سفارش است، صفحه اصلی price.html در پوشه oplata قرار دارد(یعنی هر دو صفحه دروغ هستند که در پوشه های مختلفیک سطح پایین تراز پوشه ریشه سایت).

../zakazy/clienty.html">مشتریان

§ 5. پیوند به ایمیل

به ایجاد لینک ایمیل، به جای URL در مقدار مشخصه نیاز دارید hrefیک آدرس ایمیل با پروتکل بنویسید ( mailto:). و پس از کلیک بر روی چنین لینکی، پنجره ای باز می شود برنامه پستیبا یک آدرس ایمیل وارد شده در قسمت "به". در کد HTML به شکل زیر است:

mailto: [ایمیل محافظت شده]"> نامه من

و به همین ترتیب در مرورگر است.

با سلام خدمت خوانندگان محترم سایت وبلاگ. امروز در مورد صحبت خواهیم کرد نحوه ایجاد هایپرلینک در html، نحوه استفاده از تگ "A" و ویژگی های href و target آن را بیاموزید، یاد بگیرید که چگونه یک تصویر را لینک کنید.

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

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

ایجاد لینک های متنی

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

این قطعه کد html یک پاراگراف ایجاد می کند که حاوی یک پیوند است. پیوند به صفحه وب page15.html اشاره می کند که در پوشه کاتالوگ ذخیره شده در پوشه اصلی سایت www.site.ru قرار دارد.

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

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

آدرس های اینترنتی

آدرس کامل شامل آدرس اینترنتی سرور وب و مسیر فایلی است که باید بازیابی شود. مثلا:

در اینجا www.site.ru آدرس وب سرور است و /catalog/page15.html مسیر فایل روی این سرور است. به طور کلی، آدرس‌های کامل اینترنت معمولاً تنها در صورتی استفاده می‌شوند که ایجاد یک پیوند با اشاره به برخی منابع واقع در وب‌سایت دیگر ضروری باشد.

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

آدرس های اینترنتی مخفف عبارتند از مطلقو نسبت فامیلی. آدرس مطلق مسیر فایل مورد نظر را نسبت به پوشه ریشه سایت مشخص می کند. چنین آدرسی با کاراکتر / (اسلش) شروع می شود که نشان دهنده پوشه ریشه است. به عنوان مثال، آدرس "/page15.html" به فایل page15.html اشاره می کند که در پوشه اصلی سایت ذخیره می شود. یا آدرس "/catalog/page.html" به فایل page.html اشاره می کند که در پوشه کاتالوگ تو در تو پوشه ریشه سایت قرار گرفته است.

آدرس نسبی یک مسیر فایل نسبت به فایل صفحه وب فعلی است. آدرس‌های نسبی دارای یک اسلش اصلی نیستند. بیایید به چند نمونه نگاه کنیم.

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

با استفاده از دو نقطه در ابتدای آدرس، می توانید پوشه های سطح قبلی تودرتو را مشخص کنید. بنابراین، برای مثال، آدرس ".../page.html" به page.html ذخیره شده در پوشه ای که پوشه با صفحه وب فعلی در آن قرار دارد اشاره می کند.

پیوند به ایمیل

با استفاده از زبان htmlمی توانید ایجاد کنید هایپرلینک های پستی، روی آن کلیک کنید که برنامه راه اندازی می شود سرویس گیرنده پست الکترونیکی. هنگام تعیین یک آدرس در یک ویژگی hrefقرار دادن قبل از ایمیل "mailto:"، یعنی چیزی شبیه به این: href="mailto: [ایمیل محافظت شده]علاوه بر این، پس از دو نقطه، نباید قبل از آدرس پستی فاصله وجود داشته باشد.

چگونه یک تصویر را لینک کنیم

از آنجایی که یک عنصر درون خطی یک صفحه html است، به سادگی این تگ را به جای متن در داخل تگ "A" قرار می دهیم:

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

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

تصویر-نقشه در سه مرحله ایجاد می شود:

کد کامل html که نقشه تصویر را ایجاد می کند به صورت زیر است:

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

لنگرها

لنگر یا برچسب- این نوعی لینک است که بخش جداگانه ای از یک صفحه html را مشخص می کند و به شما امکان می دهد در محتوای سند حرکت کنید.

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

لنگرها، مانند لینک های معمولی، با استفاده از ایجاد می شوند تگ جفت شده A، فقط به جای ویژگی href، صفت name یا id در آن قرار می گیرد که مقدار آن شناسه منحصر به فرد برچسب را تعیین می کند. در این حالت، خود تگ A معمولاً محتوایی ندارد:

راه دومی برای ایجاد یک لنگر وجود دارد که نیازی به ایجاد عناصر خالی "A" ندارد. یا می توانید از عناصری استفاده کنید که از قبل در صفحه وب هستند، مانند . برای انجام این کار، ویژگی universal id را به عنصر مورد نظر اضافه کنید:

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

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

لینک چیست (هایپرلینک).

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

نحوه ایجاد لینک (هایپرلینک) در HTML در وب سایت.

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

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

لینک مطلق

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

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

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

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

پیوند نسبی

به اصلی

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

رنگ ها و ظاهر متن بازشو فقط به تنظیمات بستگی دارد سیستم عاملو مرورگر

نحوه باز کردن لینک در یک پنجره جدید

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

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

1	<a href = "http://site" target = "_blank" >پنجره جدید</a>

پنجره جدید

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

نحوه ایجاد پیوند به یک ایمیل (آدرس ایمیل).

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

به جای عبارت “subject_of the letter” باید موضوع مورد نظر و البته با حروف لاتین را بنویسید. ما این کار را به این دلیل انجام می دهیم که بسیاری از مرورگرها و برنامه های ایمیل با سیریلیک به خوبی کار نمی کنند و این شانس وجود دارد که انواع چرندیات را در خط موضوع مشاهده کنیم. با استفاده از این توصیه نه روی حیله، می توانید بدون ترس از غافلگیری غیر ضروری، پیوندی به یک ایمیل ایجاد کنید.

چگونه یک تصویر را لینک کنیم.

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

نحوه ایجاد هایپرلینک (انکر html) در یک صفحه html.

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

برای ایجاد یک لنگر، ابتدا یک نشانک با هر نامی (فقط از حروف لاتین، اعداد، خط تیره و زیرخط استفاده می شود) که با استفاده از ویژگی name تگ مشخص شده است ایجاد کنید. :

بالا

1	<a href = "javascript:scroll(0,0);" > "aligncenter size-full wp-image-1393" title = "(!LANG: دکمه بالا" src = !} "http://website/wp-content/uploads/2011/12/Top.jpg" alt= "Button Top_Top" width="100" height="100" />

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

متن عنوان

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

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

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

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

انواع و رنگ هایپرلینک ها در HTML.

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

با استفاده از تگ می توانید رنگ هایپرلینک ها را در یک سند html تغییر دهید و صفات زیر:

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

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

1	<پیوند بدنه = "#1122cc" vlink = "#6611cc" alink = "#d14836" >

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

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

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

وجه تمایز اصلی اسناد HTML ایجاد پیوندهای فعال ویژه به اسناد دیگر است که به آنها هایپرلینک می گویند.

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

اگر سند هدف در همان دایرکتوری فعلی قرار داشته باشد، کار خواهد کرد. همچنین، می توانید مسیر فایل را نسبت به دایرکتوری ریشه وب سایت با استفاده از کاراکتر "/" مشخص کنید.

مثلا:

نام صفحه

مثلا:

نام صفحه

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

• پیوند - رنگ پیوندهای صفحه وب؛
• vlink - رنگ هایپرلینک های صفحه وب بازدید شده.
• alink رنگ پیوندهای فعال در صفحه وب است.

مثلا:

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

ویژگی های اساسی هایپرلینک ها

1. title - به شما امکان می دهد یک متن راهنمای ابزار ایجاد کنید که وقتی نشانگر ماوس را روی یک لینک می گذارید ظاهر شود.

مثلا:

نام پیوند

2. target - به مرورگر می گوید که در کدام پنجره پیوند را باز کند.

می تواند مقادیر زیر را بگیرد:

• _blank - پیوند باید در یک تب جدید باز شود.
• _self - لینک HTML باید در برگه فعلی باز شود. مقدار پیش فرض؛
• _parent - مرورگر باید پیوند را در پنجره والد بارگذاری کند.
• _top - هایپرلینک در کل فضای پنجره مرورگر بارگذاری می شود (در این مورد کادربندی ناپدید می شود).

مثلا:

نام پیوند

بنابراین، پاسخ به سؤالی که اغلب توسط وب مسترهای تازه کار پرسیده می شود " نحوه درج هایپرلینک در html" اخذ شده.

برای شما در یادگیری برنامه نویسی وب آرزوی موفقیت داریم!