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

طرح پست:

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

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

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

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

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

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

همچنین تفاوت های ظریف دیگری وجود دارد که کار شما را آسان تر می کند و در مقاله من در مورد آنها خواهید خواند - اینها rel=”nofollow” و target=”_blank” و بسیاری چیزهای جالب دیگر مرتبط با لینک ها هستند.

تگ پیوند A – یک هایپرلینک در یک سند html با و بدون لنگر ایجاد کنید

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

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

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

با درک اندکی از تئوری هایپرلینک ها در یک سند html، می توانیم به مثال های گویا برویم. این کدی است که پیوند خواهد داشت:

اینجا باید متن هایپرلینک شما باشد، یعنی انکر

همانطور که می بینید، پیوند با یک براکت باز شروع می شود:

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

علاوه بر این، تصور بدی ایجاد می شود: «کاربر در حال ترک سایت است! او ممکن است هرگز به اینجا برنگردد! آه آه آه! چه باید کرد؟ بیا باز کنیم لینک جدیددر پنجره ای دیگر! شاید وقتی همه چیزهایی را که نیاز دارد دید، با بستن این پنجره، دوباره به سراغ ما بیاید و حتماً یک بازدیدکننده همیشگی شود!»

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

با این حال، علاوه بر جنبه اخلاقی، یک جنبه فنی نیز در این موضوع وجود دارد - ویژگی هدف در آن وجود ندارد مشخصات XHTML 1.0 سختگیرانه است و بر این اساس اعتبار سنجی را نمی گذراند!

راه حل معتبر: جاوا اسکریپت

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

اینجاست که جاوا اسکریپت به کمک می آید. بیایید سعی کنیم رویداد onclick پیوند را قطع کنیم و با استفاده از تابع ()window.open پنجره جدیدی باز شود. سپس با مشخص کردن return false، دنبال کردن پیوند در پنجره اصلی را ممنوع خواهیم کرد:

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

راه حل حاصل را بررسی می کنیم: .

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

راه حل بهتر

مسدود کننده های پاپ آپ در درجه اول برای مبارزه با تبلیغات مزاحم طراحی شده اند. این ویژگی در تمام مرورگرهای مدرن موجود است. حتی برخی از مرورگرها سطوح مختلف مسدود کردن را ارائه می دهند. به عنوان مثال، در Opera 9+ شما می توانید فقط پنجره های "ناخواسته" یا همه چیز را مسدود کنید.

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

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

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

در اینجا ما از این واقعیت استفاده کردیم که تابع window.open() برمی گردد درست است، واقعی، اگر پنجره با موفقیت باز شد و در غیر این صورت نادرست است. یعنی در صورتی که پیوند با موفقیت در یک پنجره جدید باز شود، باز شدن پیوند را در پنجره خودش مسدود می کنیم، زیرا بازگشت خواهد بود!true=false. و بالعکس، اگر پنجره باز نشد، بازگشت true به لینک اجازه می دهد تا به طور عادی کار کند.

روز بخیر، خوانندگان عزیز. مدت زیادی است که شماره پاسخ به سوالات منتشر نشده است، فکر می کنم خیلی ها قبلاً منتظر پاسخ سؤالات خود بودند. برخی از شما قبلا بدون کمک من پاسخ سوال خود را پیدا کرده اید، از اینکه پاسخ شما را ندادم عذرخواهی می کنم. من بهبود خواهم یافت. متأسفانه امروز من به همه سؤالات پاسخ نمی دهم، بلکه فقط به یک سؤال پاسخ می دهم.

این سوال برای من بسیار جالب و مفید بود، بنابراین تصمیم گرفتم به آن توجه ویژه ای داشته باشم. بنابراین سوال اینجاست.

آیا می توان از برچسب target="_blank" برای باز کردن پیوند در پنجره جدید مرورگر استفاده کرد؟ این مضر نیست؟ آیا این روی چیزی تأثیر می گذارد؟

یک سوال بسیار جالب، واقعیت این است که ویژگی برچسب ، که پیوند را در یک پنجره جدید یا تب مرورگر باز می کند، target="_blank، یکی از بحث برانگیزترین ها در HTML. اگرچه من خودم فقط از آن استفاده می کنم و بیش از یک بار از آن برای خوانندگانم استفاده می کنم، هنوز هم ارزش درک این موضوع و تلاش برای رسیدن به نوعی را دارد.

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

ویژگی target="_blank" یک ویژگی نامعتبر است و استفاده از آن فقط در اسناد انتقالی مجاز است:

برای مقایسه، در بلاگر به این صورت است:

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

اگر در مورد Blogger صحبت می کنیم، پس الگوی ما ترکیبی از دو زبان - HTML و XML است، در چنین مواردی لازم است مشخص شود - XHTML 1.0 Strict. اسناد از این نوع باید دارای یک نحو واضح باشند و مشخصات اسنادی از این نوع دارای ویژگی target="_blank" نیست. به همین دلیل است که برای ما این صفت باطل و در واقع استفاده از آن حرام است.

اگر در مورد سایت های دیگر صحبت می کنیم، آیا می توان از ویژگی target="_blank" در آنجا استفاده کرد، پس باید به کد منبع صفحه، یعنی ورودی نگاه کنید.

نوع سند توسط توسعه‌دهنده یک سایت خاص تنظیم می‌شود، بسته به اینکه چه زبانی یا نسخه آن در هنگام چیدمان سایت استفاده می‌شود.

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

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

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

گزینه دوم این است که از target="_blank" استفاده کنید و دیگر از این موضوع رنج نبرید. اگرچه این ویژگی نامعتبر است، اما همچنان توسط همه مرورگرها پشتیبانی می شود. و استفاده از آن به هیچ وجه تاثیری بر ایندکس شدن سایت توسط موتورهای جستجو ندارد.

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

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

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

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

دقیقاً به دلیل چنین نظرات مخالف و به دلیل سطوح مختلف دانش کاربران است که ویژگی target="_blank" و به طور کلی بحث باز کردن پیوندها در یک پنجره جدید، داغ ترین موضوع مورد بحث است.

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

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

به طراحی – ویرایش HTML بروید، کد را پیدا کنید و کد را در جلوی آن قرار دهید:

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

خارجی (
padding: 0 10px 2px 0;
پس زمینه: url(http://lh6.googleusercontent.com/_G92voTj-yF0/TcFG68RdfLI/AAAAAAAABfA/QJM25G6lInk/externallink.gif) بدون تکرار در مرکز راست؛
}

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

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

http://sites.google.com/site/seobiblioteka/extlinks.js
http://sites.google.com/site/seobiblioteka/external.js

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

همه چیز در مورد استفاده از target="_blank" و باز کردن پیوند در یک تب جدید است. امیدوارم به سوال خواننده پاسخ داده باشم و این اطلاعات برای بقیه نیز مفید باشد.

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

با سلام خدمت خوانندگان محترم سایت وبلاگ. امروز می خواهم با جزئیات بیشتری در مورد اینکه هایپرلینک در چیست صحبت کنم زبان HTML، نحوه قرار دادن آنها در متن سایت، نحوه ایجاد پیوند به یک عکس، نحوه استفاده صحیح از تگ "A" و ویژگی های "Href" و "Target blank" آن (در یک پنجره جدید باز کنید).

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

هایپرلینک ها و انکرها چیست؟

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

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

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

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

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

هایپرلینک های خدماتی با استفاده از تگ "A" (مانند موارد معمولی)، بلکه با استفاده از برچسب "پیوند" ایجاد می شوند. کارهای بسیار زیادی وجود دارد که آنها انجام می دهند، مثلاً از آنها استفاده می کنند سند HTMLفایل های خارجی با شیوه نامه های آبشاری CSS یا، برای مثال، .

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

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

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

ممکن است در اینجا سردرگمی وجود داشته باشد، زیرا ... در سئو، کلمه است، اما در Html، "anchor" به معنای لنگر (ترجمه کلمه anchor) یا علامتی در متن است که سپس می توان به آن ارجاع داد.

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

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

نحوه ایجاد لنگرها و هش پیوندها

بنابراین، وظیفه ما در این مورد نصب لنگرها در مکان های مناسب در صفحه (سند) خواهد بود که به طور کلی به شکل زیر خواهد بود:

آن ها برای ایجاد یک لنگر، باید یک ویژگی واحد "Name" را در تگ هایپرلینک خالی "A" وارد کنید، به عنوان مقدار آن از یک برچسب منحصر به فرد استفاده کنید که نباید حاوی فاصله باشد و در آن می توانید از کاراکترهای لاتین، اعداد استفاده کنید. ، خط تیره و زیرخط (در قیاس کامل با قوانینی که به وسیله آنها می توانید URL ایجاد کنید - ,,,[_],[-]).

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

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

آن ها برای ایجاد یک آنالوگ لنگر، کافی است یک ویژگی ID جهانی را به هر تگ اختصاص دهید (برای همه برچسب ها می توان از آن استفاده کرد، و اتفاقاً آنها بر اساس آن کار می کنند)، به عنوان مثال، مانند این:

متن عنوان

بنابراین، اکنون به جای ایجاد تعداد مورد نیاز لنگر، کد را آلوده کرده و روی آن ظاهر می شود این لحظهمعتبر نیست (توسط کنسرسیوم W3C که زبان Html را توسعه می دهد توصیه نمی شود)، ما به سادگی ID را اضافه می کنیم.

به نظر می رسد که برای این کار، طبق معمول، باید ویژگی مورد نیاز "Href" را در لینک "A" وارد کنید، اما مقدار آن از نام برچسب مورد نظر (لنگر) قبل از هش تشکیل می شود. علامت "#" که به آن هش نیز می‌گویند (به هر حال، این جایی است که پاهای نامی که اغلب استفاده می‌شود رشد می‌کند: link hash):

به محل صفحه مشخص شده با لنگر منتقل می شود

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

اگر یک لنگر با استفاده از ویژگی ID در یک برچسب با موقعیت مناسب ایجاد کنید، باید در نظر داشته باشید که علاوه بر محدودیت در نوع کاراکترهای استفاده شده (,,,[_],[-])، مقدار ID باید با حروف لاتین شروع شود.

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

اگر هیچ نام برچسب لنگر (href="#") را بعد از نماد هش "#" ننویسید، چنین لینکی صفحه را به ابتدا اسکرول می کند. به این صورت است که می توانید با ایجاد یک پیوند از یک تصویر (در این مورد کمی بعداً صحبت خواهیم کرد) و به عنوان مثال، به صورت زیر در قالب وب سایت خود قرار دهید، یک دکمه ساده «بازگشت به بالا» ایجاد کنید:

Href یک ویژگی برچسب مورد نیاز هر لینک است

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

لنگر

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

با این حال، به شما یادآوری می کنم که هنگام ایجاد URL، ترجیحاً فقط از کاراکترهای زیر استفاده کنید: (,,,[_],[-]) و از فاصله استفاده نکنید. اگر محتویات ویژگی Href را برای پیوندهای مطلق در نظر بگیریم، می توان آن را به صورت شماتیک به صورت زیر نشان داد:

اگر آنچه را که به ندرت استفاده می کنید کنار بگذاریم، می توانید همان چیزی را به شکلی ساده شده ارائه دهید:

پروتکل (معمولا http)://domain_name (به عنوان مثال، وب سایت)/path_to_file ( صفحات وب)

علاوه بر پروتکل ساده http، در اینترنت می توانید پیوندهایی با پروتکل https پیدا کنید که تفاوت آن در استفاده از رمزگذاری است. مورد دوم در سایت هایی استفاده می شود که نیاز به محافظت از کانال تبادل داده بین سرور و مرورگر مشتری وجود دارد. به عنوان مثال، در خدمات پول الکترونیکی وب مانی استفاده می شود.

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

Https://site/videokursy

یا این (با پسوند فایل):

Https://site/seo/kak-raskrutit-sajt.html

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

چیزی را از لینک دانلود کنید

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

دانلود از سرور Ftp

همچنین می‌توانید برای مثال، با افزودن URL مربوطه به Href، یک (mail) ایجاد کنید:

یک نامه بنویس

وقتی روی این پیوند کلیک می کنید، لینک پیش فرضی که استفاده می کنید در رایانه شما باز می شود. برنامه پستی(در مرورگر می توانید پیوندها را با mailto در Href پیکربندی کنید تا در Gmail باز شوند و غیره) و یک گفتگو برای ایجاد یک نامه جدید ظاهر می شود که در آن آدرس ایمیل داده شده در Href در قسمت "To" درج می شود.

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

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

نحوه باز کردن پیوند در یک پنجره جدید (هدف خالی)

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

من شخصاً یکی از حامیان اصلی ویژگی Target با مقدار خالی هستم که به شما امکان می دهد صفحه ای را در یک پنجره جدید باز کنید و سندی را که پیوند در آن قرار داده شده است باز بگذارید. نمی‌دانم این موضوع چگونه بر قابلیت استفاده وبلاگ من تأثیر می‌گذارد، اما من این گزینه را بیشتر دوست دارم و تقریباً در همه موارد از آن استفاده می‌کنم.

در موتورهای جستجو نیز دوست دارم باز شدن پیوندها را در یک پنجره جدید پیکربندی کنم تا نتایج همیشه در دسترس باشند و همیشه بتوانید به آن بازگردید. برای این منظور، همانطور که قبلا ذکر شد، Html از یک ویژگی Target ویژه استفاده می کند که به طور پیش فرض دارای مقدار Self است:

سند را در همان پنجره باز می کند

اگرچه، البته، هیچ کس target="_self" را در تگ "A" نمی نویسد، زیرا این مقدار به طور پیش فرض استفاده می شود، اما اگر نیاز به باز کردن صفحه در یک پنجره جدید دارید، باید target="_blank" را بنویسید. ":

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

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

به عنوان مثال، اگر می‌خواهید تمام لینک‌های سایت شما در یک پنجره جدید باز شوند، باید یک تگ Base با ویژگی target="_blank" در قسمت Head قالبی که استفاده می‌کنید اضافه کنید:

یه چیز دیگه اونجا هست

و حالا، اگر می خواهید یکی از لینک ها را در همان پنجره باز کنید، باید target="_self" را به تگ "A" آن اضافه کنید، زیرا به طور پیش فرض اکنون از _blank استفاده می کنید. اه چطور.

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

هایپرلینک ماوس را نگه دارید و روی رنگ ها کلیک کنید - نحوه تغییر آنها

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

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

به طور پیش فرض، در HTML خالص (بدون استفاده ویژگی های CSS) پیوندها با زیرخط برجسته می شوند و می توانند سه گزینه رنگی داشته باشند:

آبی رنگ پیوندهای فالو نشده ای است که کاربر هنوز روی آنها کلیک نکرده است

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

بنفش رنگ پیوندهایی است که کاربر قبلاً دنبال کرده است

در Html 4.01، این رنگ‌ها برای پیوندها پیش‌فرض هستند، اما با استفاده از ویژگی‌های خاصی که در تگ Body نوشته شده‌اند، می‌توان آن‌ها را تغییر داد، که می‌توانید آن‌ها را در یکی از فایل‌های قالبی که استفاده می‌کنید پیدا کنید. برای تغییر هر سه رنگ، به ترتیب از سه ویژگی استفاده می شود:

پیوند - رنگ یک پیوند بازدید نشده را تنظیم می کند

Alink - رنگ مورد فعال فعلی که توسط مرورگر در حال پردازش است

Vlink - رنگ پیوندی که قبلاً توسط کاربر بازدید شده است

به یاد داشته باشید، من قبلاً در مورد چگونگی آن نوشتم. بر این اساس، ویژگی های ذکر شده ممکن است به صورت زیر باشد:

طبیعتاً منظور در اینجا یک گزینه Html خالص بود، در حالی که به دلایلی استفاده از استایل راحت یا ممکن نیست، در غیر این صورت همه این رنگ ها را می توان به راحتی با استفاده از ست و تغییر داد.

نحوه ایجاد یک تصویر یک لینک - دو روش

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

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

برای حذف اضافه کردن حاشیه به تصویری که لینک داده‌اید، باید یک ویژگی Border با مقدار صفر به تگ Img اضافه کنید:

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

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

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

ممکن است علاقه مند باشید

انتخاب، Option، Textarea، Label، Fieldset، Legend - برچسب ها فرم های HTMLلیست های کشویی و فیلد متنی
نحوه درج در لینک HTMLو یک عکس (عکس) - برچسب های IMG و A
Iframe و Frame - چه هستند و بهترین روش استفاده از فریم ها در Html
کاراکترهای فضای خالیو قالب بندی کد آنها در Html و همچنین کاراکترهای خاص فضای بدون شکستنو یادگاری های دیگر
MailTo - چیست و چگونه می توان یک پیوند در Html برای ارسال ایمیل ایجاد کرد
نحوه تنظیم رنگ ها در کد Html و CSS، انتخاب سایه های RGB در جداول، خروجی Yandex و سایر برنامه ها
فونت (چهره، اندازه و رنگ)، Blockquote و تگ‌های قبلی - قالب‌بندی متن قدیمی در HTML خالص(بدون با استفاده از CSS)
Img - تگ Html برای درج یک عکس (Src)، تراز کردن و بسته بندی متن در اطراف آن (تراز کردن)، و همچنین تنظیم پس زمینه (پس زمینه)
لیست در کد Html - برچسب های UL، OL، LI و DL
تگ ها و ویژگی های عنوان H1-H6، خط افقی Hr، شکست خط Br و شکست پاراگراف P مطابق با استاندارد Html 4.01