چگونه یک هایپرلینک در HTML وارد کنیم؟ ایجاد و استفاده از هایپرلینک در HTML. نحوه ایجاد یک تصویر در HTML، Vkontakte، در انجمن و با استفاده از CSS Image به عنوان یک لینک برای

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

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

نحوه ساخت لینک در HTML، مثال ها

1. HREF - مسئول جایی است که پیوند باید به آن منتهی شود. یک پیوند استاندارد به صورت زیر مشخص می شود: متن پیوند.

2. TARGET - مسئول این است که سند در کدام پنجره باز می شود. پیش فرض سند جدیددر پنجره مرورگر فعلی باز می شود. ویژگی "target" به شما امکان می دهد پیوندی را در یک پنجره مرورگر جدید باز کنید. این ویژگی دارای پارامترهای زیر است:

• _blank - صفحه را در یک پنجره جدید بارگذاری می کند.
• _self - صفحه را در پنجره فعلی بارگذاری می کند.
• _parent - صفحه را در قاب والد بارگذاری می کند.
• _top - تمام فریم ها را لغو می کند و صفحه را در یک پنجره جدید بارگذاری می کند.

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

نمونه لینک خارجی

به وب سایت بروید

به سایت درس های رایگان وردپرس بروید

مثال 4: تصاویر به عنوان پیوند.

تصویر نمونه به عنوان مرجع

نمونه ای از پیوند به یک مکان خاص در یک صفحه

برو به متن

متن صفحه...

در این مثال، صفحه با استفاده از ویژگی "name" برچسب "list" می شود. پیوند دادن به این برچسب شما را به قسمت خاصی از صفحه می برد.

دانلود فایل نامه بنویس

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

• پیوند - پیوند بازدید نشده، به طور پیش فرض به رنگ آبی نمایش داده می شود.
• alink - پیوند فعال، قرمز به طور پیش فرض.
• vlink - پیوند بازدید شده، بنفش به طور پیش فرض.

نمونه ای از تنظیم رنگ برای لینک ها...

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

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

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

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

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

دفترچه یادداشت را باز کنید.

روی کد می نویسیم زبان html. به عنوان مثال، یک صفحه با تعدادی عکس.

ما آن را به عنوان یک صفحه 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:

ایجاد پیوند به یک متن





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


سمت راست یا چپ؟



فایل Primer.html:

لینک اینجا را دنبال کنید





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


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

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

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

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

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

فایل Index.html:

رنگين كمان



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


آر
آ
D
U
جی
آ




فایل Primer.html:

رنگين كمان




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



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

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

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

قانون سه کلیک...

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

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

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

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

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

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

برای اینکه اجازه ندهم افکارم سرگردان شوند، همه چیز را با یک مثال به شما نشان خواهم داد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

border="0">

صفحه نخست

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

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

name="anchor name">متن

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

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

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

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

name="zagolovok">

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

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

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

به آدرس اصلی:

http://www..html

http://www..html#zagolovok

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

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

صفحه نخست

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

فرض کنید باید به صفحه klienty.html مراجعه کنیم که در همان پوشه با صفحه نخستسایت. سپس کد پیوند نسبی به شکل زیر خواهد بود:

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

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

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

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

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

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




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

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

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

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




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

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

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




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

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

در این حالت از نقطه و اسلش استفاده نمی شود.




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

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




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

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

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

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

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

و در مرورگر اینطور است.

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

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

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

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

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

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

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

لینک مطلق

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

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

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

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

پیوند نسبی

به اصلی

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

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

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

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

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

1	پنجره جدید

پنجره جدید

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

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

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

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

متن عنوان

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

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

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

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

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

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

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

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

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

1

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

من قبلاً هرگز چنین مقاله طولانی ننوشته بودم، بیش از 10000 کاراکتر. اما این پایان موضوع پیوندها نیست، ادامه دارد.

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

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

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

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

مثال: نحوه هایلایت کردن مو در فتوشاپ را می توانید در //site/adobe-photoshop/kak-vydelit-volosy/ بیابید.

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

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

به هر حال. تئوری خوب حالا بیایید به سراغ تمرین برویم و ببینیم کدام یک مسئول همه این امور هستند.

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

موتور جستجوی Yandex

همانطور که متوجه شدید، در این مثال نوشتم که وقتی روی یک قطعه متن "موتور جستجوی Yandex" کلیک می کنید، یک شخص به آدرسی که با مقدار ویژگی href نوشته شده هدایت می شود.

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

انتقال های داخلی فایل در همان پوشه

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

فایل را در پوشه دیگری قرار دهید

فایل pushkin.html را در Notepad++ باز کنید

حالا کلمه عکس را پیدا کنید و آن را در برچسب بپیچید.

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

عکس

حالا چیکار کردیم؟ و ما این کار را انجام دادیم: از آنجایی که مسیر عکس در یک پوشه img جداگانه قرار دارد که در همان پوشه فایل pushkin.html قرار دارد، پس در مقدار ویژگی ابتدا باید نام پوشه را بنویسیم و سپس از طریق یک اسلش (/) نام کامل سند (در عکس های مورد ما).

حالا فایل pushkin.html را در مرورگر خود ذخیره و اجرا کنید. مشاهده می کنید که کلمه عکس با رنگ آبی هایلایت شده و قابل کلیک است یعنی با کلیک روی این لینک به فایل fofo.jpg که در پوشه img قرار دارد منتقل می شویم.

خوب چطور؟ همه چیز روشن است؟ اگر اتفاقی افتاد، در پرسیدن دریغ نکنید.

انتقال های خارجی

و البته نمی توان از ذکر لینک های خارجی صرف نظر کرد که پس از کلیک روی آن ها به سایتی کاملا متفاوت منتقل می شویم. اما هیچ چیز پیچیده ای در اینجا وجود ندارد. نکته اصلی این است که شما آدرس کامل سایت یا صفحه وب را در مقدار href قرار می دهید. من یک مثال با Yandex در بالا نشان دادم. اما در اینجا یک مثال دیگر وجود دارد:

من درس خواهم خواند تا استاد پروژه های اجتماعی شوم.

در اینجا به صفحه خاصی از یک سایت خاص می رسیم.

در پنجره ای جدید باز می شود

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

ویژگی target با مقدار "_blank" به ما در این امر کمک می کند. هیچ چیز پیچیده ای در اینجا وجود ندارد. شما فقط باید این را در تگ افتتاحیه درج کنید بعد از مقدار ویژگی href. بیایید آن گزیده ای را از فایل lukomorye.html، جایی که پیوندی به صفحه pushkin.html ایجاد کردیم، برداریم، فقط اکنون همین ویژگی را می نویسیم. می بایست شبیه به این باشه:

از شعر روسلان و لیودمیلا (نویسنده - A.S. پوشکین)

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

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

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

با احترام، دیمیتری کوستین.