با سلام خدمت خوانندگان محترم سایت وبلاگ. امروز می خواهم با جزئیات بیشتری در مورد اینکه یک هایپرلینک در زبان Html چیست، چگونه می توانید آنها را در متن سایت قرار دهید، چگونه یک پیوند را به یک تصویر تبدیل کنید، نحوه استفاده صحیح از تگ "A" و "آن" صحبت کنم. ویژگی های Href" و "Target blank" (باز کردن در پنجره جدید).
به طور کلی، هایپرلینک عنصر کلیدی است. علاوه بر این، لینک ها اکنون یکی از سه عامل اصلی موثر در ارتقای موفقیت آمیز سایت هستند. کاربرد و درک صحیح آنها، به عنوان مثال، چگونگی تأثیر آنها بر حسابداری موتورهای جستجو، می تواند به طور قابل توجهی بر حضور منابع شما تأثیر بگذارد.
هایپرلینک و انکر (انکر) چیست؟
بنابراین، ما قبلا با منسوخ شده و توصیه نمی شود ملاقات کرده ایم استفاده روزمرهبرچسب ها . بیایید به آشنایی خود ادامه دهیم.
برای ایجاد هایپرلینک به کد html، همچنین باید از تگ A استفاده کنیم. می توان از ویژگی های مختلفی برای آن استفاده کرد، مثلاً آدرس URL هدف را برای پیمایش از طریق این پیوند (href) تنظیم کرد یا دستور باز کردن آن در یک پنجره جدید را داد. (هدف=_خالی). اما بیایید در مورد همه چیز به ترتیب صحبت کنیم.
همانطور که در بالا ذکر کردیم، هایپرلینک ها یک عنصر کلیدی زبان Html هستند و به شما امکان می دهند هم به صفحات داخلی سایت خود و هم به سایر منابع اینترنتی پیوند دهید. من یک پیش پا افتاده می گویم - انتقال به پیوند با کلیک کردن روی آن انجام می شود (و چه فکر می کردید؟).
علاوه بر این که آنها را می توان به داخلی یا خارجی تقسیم کرد، آنها نیز هستند ممکن است رسمی باشدو صرفاً برای نیازهای مرورگری که صفحات سایت شما با آن باز می شود استفاده شود.
در این صورت، آنها در صفحه قابل مشاهده نخواهند بود، زیرا در قسمت Head کد منبع سند نوشته شده است که محتویات آن در صفحه نمایش داده نمی شود (من در مقاله مربوط به ساختار کد زبان نشانه گذاری فرامتن را ذکر کردم).
پیوندهای خدماتی با استفاده از تگ "A" (مثلاً) ایجاد نمی شوند، بلکه با استفاده از تگ ایجاد می شوند ارتباط دادن. آنها کارهای زیادی را انجام می دهند، به عنوان مثال، با کمک آنها سند htmlفایل های خارجی با جداول آبشاری متصل می شوند سبک های cssیا مثلا .
اما امروز ما در نظر نخواهیم گرفت که چگونه می توان آنها را ایجاد کرد (زمان به آنها خواهد رسید) ، اما در مورد آن صحبت خواهیم کرد لینک های قابل مشاهده، که می توانند در داخل قسمت Body ایجاد شوند و بر این اساس در صفحه وب نمایش داده شوند.
اما، با این وجود، همه هایپرلینک ها (هم قابل مشاهده و هم خدمات) یک چیز مشترک دارند - همه آنها دارای یک ویژگی اجباری هستند. Href. در آن، به عنوان مقدار آن، یک مکان خاص در سند (اگر قبلاً با لنگر مشخص شده بود) یا آدرس خود سند در اینترنت (یا به عبارت دیگر، مسیر صفحه یا موارد دیگر نوشته شده است). فایل به زبان Href نوشته شده است).
هایپرلینک ها عناصر ناوبری هستند که برای هدایت شما به اسناد دیگر در وب یا حرکت در محتوای صفحه وب که قبلاً مشاهده می کنید با استفاده از علامت هایی که قبلاً در بدنه سند ایجاد شده اند، که Html نیز نامیده می شوند، طراحی شده اند. لنگرها(لنگرها).
ممکن است در اینجا سردرگمی وجود داشته باشد، زیرا. در سئو، زیر کلمه، اما در زبان Html، انکر دقیقا به معنای لنگر (ترجمه کلمه انکر) یا برچسبی در متن است که می توان به آن اشاره کرد.
چرا از انکرها در Html استفاده می شود؟ این هنگام ایجاد ناوبری برای یک صفحه وب نسبتا طولانی بسیار مفید است. احتمالاً زمانی که در صفحه ای که باز کردید، بلافاصله در زیر عنوان آن، نام بخش های مقاله منتشر شده در این صفحه آورده شده است، در شبکه ملاقات کرده اید.
بنابراین، خواننده می تواند بلافاصله به مکانی در صفحه که اطلاعات مورد علاقه در آن قرار دارد برود و با پیمایش متن و جستجوی بصری مکان مناسب خود را خسته نکند. راحت و تقویت می کند.
چگونه انکرها و لینک های هش ایجاد می شوند
بنابراین، وظیفه ما در این مورد نصب لنگرها در مکان های مناسب در صفحه (سند) خواهد بود که در حالت کلی به شکل زیر خواهد بود:
آن ها برای ایجاد یک لنگر، باید یک ویژگی واحد "Name" را در تگ هایپرلینک خالی "A" ثبت کنید، که ارزش آن استفاده از یک برچسب منحصر به فرد است که نباید حاوی فاصله باشد و در آن می توانید از حروف لاتین استفاده کنید. اعداد، خط تیره و زیرخط (در قیاس کامل با قوانینی که توسط آنها می توانید URL ایجاد کنید - ,,,[_],[-]).
در این صورت، انکر در خود صفحه قابل مشاهده نخواهد بود، زیرا. ما هیچ متنی را در عناصر "A" ننوشتیم. با این حال، لنگرهایی که به این روش ایجاد می‌شوند، کد Html را آلوده می‌کنند و بنابراین در حال حاضر بسیار بیشتر از انکرها استفاده می‌شوند. راه دیگری برای ایجاد یک برچسب.
در این مورد، نیازی به ایجاد یک تگ خالی "A" ندارید، اما می توانید از هر یک از عناصر موجود در مکان مناسب در متن استفاده کنید. به عنوان مثال، می تواند باشد.
آن ها برای ایجاد آنالوگ یک لنگر، کافی است یک ویژگی ID جهانی به هر تگ اضافه کنید (برای همه برچسب ها قابل استفاده است و اتفاقاً آنها بر اساس آن کار می کنند)، به عنوان مثال، مانند این:
متن عنوان
بنابراین، اکنون به جای ایجاد تعداد مورد نیاز لنگرها که کد را آلوده می کنند و روی آن ظاهر می شوند این لحظهمعتبر نیست (توسط W3C که زبان Html را توسعه می دهد توصیه نمی شود)، ما به سادگی شناسه را اضافه می کنیم.
به نظر می رسد که برای این کار، طبق معمول، لازم است که ویژگی اجباری "Href" را در داخل هایپرلینک "A" درج کنید، اما مقدار آن از نام برچسب مورد نظر (انکر) قبل از آن تشکیل می شود. علامت پوند "#"، که نام هش را نیز دارد (از این رو، به هر حال، پاهای نام پرکاربرد رشد می کنند: پیوند هش):
به محل صفحه مشخص شده با لنگر می پرد
لطفاً توجه داشته باشید که وقتی روی چنین لینکی کلیک می کنید، سند جدیدی باز نمی شود. مرورگر قبلاً پیمایش خواهد کرد صفحه باز شودبه گونه ای که مکانی در متن که لنگر را در آن قرار داده اید در بالای صفحه قرار گیرد. منطقی است که فرض کنیم مقادیر همه برچسب ها (لنگرها) در یک صفحه باید منحصر به فرد باشند تا از سردرگمی برای مرورگر جلوگیری شود.
اگر یک لنگر با استفاده از ویژگی ID در یک تگ که به راحتی برای این کار قرار دارد می سازید، باید در نظر داشته باشید که علاوه بر محدودیت در نوع کاراکترهای استفاده شده (,,,[_],[-])، مقدار شناسه مورد نیاز است باید با یک کاراکتر لاتین شروع شود.
سپس همه کاراکترهای معتبر را می توان در هر کمیت قرار داد، اما اولین کاراکتر برچسب لنگر در مقدار مشخصه ID باید یک حرف باشد (البته لاتین). در غیر این صورت، چنین لنگر درج شده در کد Html کار نخواهد کرد (در اکثر مرورگرها).
اگر بعد از علامت هش "#" هیچ نام لنگر برچسب (href="#") ننویسید، پس چنین هایپرلینکی صفحه را به بالا اسکرول می کند. به این صورت است که می توانید با ایجاد یک پیوند از تصویر (در این مورد کمی بعداً صحبت خواهیم کرد) و به عنوان مثال به شکل زیر، آن را در قالب سایت خود قرار دهید، ساده ترین دکمه "بازگشت به بالا" را ایجاد کنید:
Href یک ویژگی لازم برای هر تگ هایپرلینک است.
حالا بیایید از پیمایش درون سند (با استفاده از لنگرها) به ناوبری خارجی، یعنی. ما باید پیوندهایی ایجاد کنیم که منجر به اسناد دیگر در سایت خود یا سایت دیگری می شود. اکنون در ویژگی Href، دیگر نیازی به نوشتن علامت های لنگر نداریم، بلکه باید مسیر فایل در حال باز شدن را بنویسیم (صفحه، با طراحی خود، فایلی است که برای نمایش بعدی در مرورگر بارگذاری می شود).
لنگر
در اینجا ما باید بیشتر در مورد آنها صحبت کنیم، اما من قبلاً در مورد آنها بیش از جزئیات در مطالب ذکر شده نوشته ام، بنابراین احتمالاً تکرار آن منطقی نیست. اما باید بدانید که چگونه می توانید مسیر فایل را در ویژگی Href لینکی که ایجاد کرده اید تنظیم کنید. بنابراین، برای آشنایی با مطالب ارائه شده اقدام نکنید.
با این حال، به شما یادآوری می کنم که هنگام ایجاد URL، استفاده از آن ترجیح داده می شود فقط شخصیت های زیر: (,,,[_],[-]) و از فاصله استفاده نکنید. اگر محتویات صفت Href را برای در نظر بگیریم لینک های مطلق، می توان آن را به صورت شماتیک به صورت زیر نشان داد:
اگر آنچه را که به ندرت استفاده می کنید کنار بگذاریم، می توانید همه را به شکلی ساده شده ارائه دهید:
پروتکل (معمولا http)://domain_name (به عنوان مثال وب سایت)/path_to_file ( صفحات وب)
علاوه بر پروتکل ساده http در اینترنت، می توانید پیوندهایی با پروتکل https پیدا کنید، که تفاوت آن در استفاده از رمزگذاری است. مورد دوم در سایت هایی استفاده می شود که نیاز به محافظت از کانال تبادل داده بین سرور و مرورگر مشتری وجود دارد. به عنوان مثال، در خدمات استفاده می شود پول الکترونیکیوب مانی.
در اینترنت، می توانید انواع مختلفی از محتوای Href را پیدا کنید، به عنوان مثال، این یکی:
https://website/videokursy
یا مانند این (با پسوند فایل):
https://site/seo/kak-raskrutit-sajt.html
این اصل را تغییر نمی‌دهد، اما اگر یک اسلش در انتهای محتوای ویژگی Href در داخل هایپرلینک وجود داشته باشد، به این معنی است که دسترسی دیگر به فایل نیست، بلکه به پوشه‌ای است که شی index مربوطه در آن خواهد بود. جستجو شود (در این مورد در مقاله آدرس های url ذکر شده در بالا بیشتر بخوانید).
چیزی را از لینک دانلود کنید
همانطور که می بینید، این هایپرلینک با لینک معمولی تفاوتی ندارد، مرورگر به سادگی می فهمد که باید فایل را با پسوند zip بارگیری کند و سعی نکند آن را برای مشاهده باز کند، مثلاً فایل های سند با پسوند html. اگرچه، شما می توانید همه اینها را به صورت کاملاً جداگانه در مرورگر خود پیکربندی کنید تا مطابق با نیازهای شخصی خود باشد.
دانلود از سرور Ftp
شما همچنین می توانید، برای مثال، با اضافه کردن آدرس مربوطه به Href، (mail) ایجاد کنید:
یک نامه بنویس
هنگامی که روی چنین پیوندی کلیک می کنید، مرورگر پیش فرض شما در رایانه شما باز می شود. برنامه پستی(می توانید مرورگر را طوری پیکربندی کنید که پیوندهای mailto در Href در Gmail باز شوند و غیره) و یک گفتگو برای ایجاد یک نامه جدید ظاهر می شود که در آن آدرس ایمیل داده شده در Href در قسمت "To" درج می شود.
در واقع، می‌توانید پیوندهای ایمیلی کاملاً پیچیده ایجاد کنید که فیلدهای دیگر را در گفتگوی ارسال ایمیل پر می‌کنند، اما این بسیار به ندرت استفاده می‌شود.
به هر حال، اخیراً مدیران وب‌سایت‌ها عملاً استفاده از لینک‌های با mailto در Href را متوقف کرده‌اند، زیرا توسط اسپمرها تجزیه می‌شوند و تمام عواقب ناشی از آن وجود دارد. بهتر است در سایت ایجاد کنید، اگرچه هنوز همه چیز را به شکل کلاسیک در صفحه تماس ارائه می کنم. لازم است که در اوقات فراغت خود تغییر دهید (یا نه ... فکر می کنم).
نحوه باز کردن پیوند در یک پنجره جدید (هدف خالی)
هنگام ایجاد پیوند در کد Html، اغلب با این سوال روبرو می شویم که سندی را که به آن منتهی می شود در کدام پنجره مرورگر باز کنیم؟ به‌طور پیش‌فرض، در یک پنجره موجود باز می‌شود که روی صفحه‌ای که این لینک از آن قرار گرفته است همپوشانی دارد.
من شخصاً طرفدار بزرگی هستم ویژگی Target با مقدار خالی، که به شما امکان می دهد صفحه را در یک پنجره جدید باز کنید و سندی را که این پیوند در آن قرار داده شده را باز بگذارید. نمی‌دانم این موضوع چگونه بر قابلیت استفاده وبلاگ من تأثیر می‌گذارد، اما من این گزینه را بیشتر دوست دارم و تقریباً در همه موارد از آن استفاده میکنم.
در موتورهای جستجو نیز دوست دارم باز کردن لینک ها را شخصی سازی کنم در یک پنجره جدیدبه طوری که موضوع همیشه در دسترس است و شما همیشه می توانید به آن بازگردید. برای این منظور، همانطور که قبلا ذکر شد، Html از یک ویژگی Target ویژه استفاده می کند که به طور پیش فرض دارای مقدار Self است:
سند را در همان پنجره باز می کند
اگرچه، البته، هیچ کس target="_self" را در تگ "A" نمی نویسد، زیرا این مقدار به طور پیش فرض استفاده می شود، اما اگر نیاز به باز کردن صفحه در یک پنجره جدید دارید، باید target="_blank" را بنویسید. ":
در پنجره ای جدید باز می شود
توجه داشته باشید که مقادیر مشخصه Target نوشته شده است با زیرخط در ابتدا(_blank)، زیرا در اعتبارسنجی Wc3 که حاوی حفره هایی در زبان نشانه گذاری فرامتن است، تصریح شده است. قابل توجه است که Html امکان تغییر گزینه باز کردن لینک پیش فرض را فراهم می کند.
به عنوان مثال، اگر می خواهید تمام لینک های سایت شما در یک پنجره جدید باز شوند، باید در قسمت Head قالبی که استفاده می کنید بنویسید. تگ پایهبا ویژگی target="_blank":
و اکنون، اگر می‌خواهید هر یک از پیوندها را در همان پنجره باز کنید، باید target="_self" را به تگ "A" آن اضافه کنید، زیرا _blank اکنون به طور پیش‌فرض استفاده می‌شود. اه چطور.
به هر حال، من از عنصر Base به روشی که در بالا توضیح داده شد استفاده کردم، اما همچنین یک ناحیه کد با چندین لینک که باید در یک پنجره جدید باز می شد را در آن قرار دادم. آن ها من همچنین از تگ بسته شدن Base در قسمت Body استفاده کردم و همه چیز درست شد. اگرچه چنین کدی البته معتبر نیست.
رنگ هایپرلینک در شناور و انتقال - نحوه تغییر آنها
در زبان Html، به قدری تصور می شد که برای کاربر آسان بود که کدام پیوند را قبلاً باز کرده بود و کدام یک هنوز دست نخورده باقی می ماند.
برای این منظور از رنگی استفاده می شود که با کلیک کاربر بر روی لینک و سند آویزان شده روی آن با موفقیت باز می شود. با بازگشت به صفحه اصلی، کاربر متوجه می شود که لینکی که بازدید کرده تغییر رنگ داده است. همه مرورگرها می توانند این ترفند را انجام دهند.
به طور پیش فرض، در Html خالص (بدون استفاده ویژگی های CSS) لینک ها زیرخط دار هستند و ممکن است داشته باشند سه گزینه رنگ:
- آبی رنگ پیوندهای شکسته است که کاربر هنوز روی آن کلیک نکرده است
- قرمز - بلافاصله پس از کلیک بر روی آن و تا زمانی که سند درخواستی از طریق شبکه در مرورگر کاربر بارگیری شود توسط هایپرلینک پذیرفته می شود (در شرایط مدرن گرفتن این لحظه اصلاً آسان نیست و همه چیز در همه جا مقصر است)
- بنفش - رنگ پیوندهای استفاده شده که کاربر قبلاً دنبال کرده است
در Html 4.01، این رنگ های پیوند پیش فرض هستند، اما آنها را می توان تغییر دادبا استفاده از ویژگی های خاصی که در تگ Body نوشته شده است که می توانید آن ها را در یکی از فایل های قالب مورد استفاده خود بیابید. برای تغییر هر سه رنگ، به ترتیب از سه ویژگی استفاده می شود:
- پیوند - رنگ یک پیوند بازدید نشده را تنظیم می کند
- Alink - رنگ مورد فعال فعلی که توسط مرورگر پردازش می شود
- Vlink - رنگ پیوندی که قبلاً توسط کاربر بازدید شده است
به یاد داشته باشید، من قبلاً در مورد چگونگی آن نوشتم. بر این اساس، ویژگی های ذکر شده ممکن است به صورت زیر باشد:
طبیعتاً منظور در اینجا گزینه Pure Html است، در صورتی که به دلایلی استفاده از استایل راحت یا غیرممکن است، در غیر این صورت می توان به راحتی همه این رنگ ها را با استفاده از ست و تغییر داد.
چگونه یک تصویر را لینک کنیم - دو روش
خوب، همه چیز در اینجا بسیار ساده است. زیرا یک عنصر درون خطی است، پس به طور کلی هر تصویری را می توان فقط یک حرف در نظر گرفت، به جز شاید بزرگتر.
در مورد Html خالص در اطراف تصویر شما یک لینک، شما خواهد بود حاشیه پهن سه پیکسلی. علاوه بر این، رنگ این قاب کاملاً با رنگ پیوندهای پذیرفته شده برای سایت شما مطابقت دارد (در متن در مورد آنها کمی صحبت کردیم).
برای حذف اضافه کردن حاشیه به تصویری که یک پیوند ایجاد کرده اید، باید یک ویژگی Border با مقدار صفر به تگ Img اضافه کنید:
این یک راه بسیار ساده برای تبدیل یک تصویر به یک لینک است، اما گزینه پیچیده تری نیز وجود دارد به نام نقشه تصویر. در این مورد، به دلیل استفاده از و نه تعداد زیادی تگ html ovs و ویژگی ها، می توانید یک نقشه کامل از پیوندها با مناطق فعال (قابل کلیک و دارای اشکال مختلف - یک مستطیل، یک دایره، یک چند ضلعی) از یک تصویر ایجاد کنید.
به عنوان مثال، می توانید یک عکس بزرگ را در صفحه خود قرار دهید و آن را طوری درآورید که وقتی روی قسمت های مختلف آن کلیک می کنید، صفحات مختلفاز طریق هایپرلینک های مختلف در واقع، زمان زیادی برای توصیف نقشه تصویر است، و بعید است که کسی از آن استفاده کند، بنابراین من این کار را انجام نمی دهم، زیرا "بازی ارزش شمع را ندارد."
موفق باشی! به زودی شما را در سایت صفحات وبلاگ می بینیم
ممکن است علاقه مند باشید
انتخاب، Option، Textarea، Label، Fieldset، Legend - برچسب ها فرم های Htmlلیست های کشویی و فیلد متنی
نحوه چسباندن لینک HTMLو یک عکس (عکس) - برچسب های IMG و A 
Iframe و Frame - چه هستند و بهترین روش استفاده از فریم ها در Html 
کاراکترهای فضای خالی و قالب بندی کد آنها در Html و همچنین کاراکترهای ویژه فضای خالی و سایر یادداشت ها 
MailTo - چیست و چگونه می توان یک پیوند ایمیل در Html ایجاد کرد 
نحوه تنظیم رنگ ها در کد Html و CSS، انتخاب سایه های RGB در جداول، نتایج Yandex و سایر برنامه ها 
فونت (چهره، اندازه و رنگ)، Blockquote و تگ‌های Pre قالب‌بندی متن قدیمی در HTML خالص (بدون استفاده از CSS)
Img - تگ Html برای درج یک تصویر (Src)، تراز کردن و بسته بندی آن با متن (تراز کردن)، و همچنین تنظیم پس زمینه (پس زمینه) 
لیست در کد Html - برچسب های UL، OL، LI و DL 
برچسب ها و ویژگی های عنوان H1-H6، خط افقی Hr، خط شکسته Br و پاراگراف P مطابق با استاندارد Html 4.01
به‌طور پیش‌فرض، وقتی روی یک پیوند کلیک می‌کنید، سند در پنجره یا قاب فعلی باز می‌شود. در صورت لزوم، این شرایط را می توان با ویژگی هدف تگ تغییر داد . XHTML اجازه این ویژگی را نمی دهد.
نحو
...ویژگی مورد نیاز
ارزش های
مقدار نام پنجره یا فریم است که با ویژگی name مشخص شده است. اگر یک نام غیر موجود تنظیم شود، یک پنجره جدید باز می شود. موارد زیر به عنوان نام های رزرو شده استفاده می شوند.
Blank صفحه را در یک پنجره مرورگر جدید بارگیری می کند. _self یک صفحه را در پنجره فعلی بارگیری می کند. _parent صفحه را در فریم والد بارگیری می کند، اگر هیچ فریمی وجود نداشته باشد، این مقدار مانند _self عمل می کند. _top همه فریم ها را لغو می کند و صفحه را در یک پنجره کامل مرورگر بارگیری می کند، اگر هیچ فریمی وجود نداشته باشد، این مقدار مانند _self عمل می کند.
مقدار پیش فرض
اعتبار سنجی
استفاده از این ویژگی توسط مشخصات HTML منسوخ شده است، کد معتبرتنها با استفاده از انتقال به دست می آید .
HTML5 IE Cr Op Sa Fx
باز کردن در پنجره جدید
به‌طور پیش‌فرض، وقتی روی پیوندی کلیک می‌کنید، سند در برگه مرورگر فعلی باز می‌شود. این رفتار را می توان با استفاده از ویژگی هدف عنصر تغییر داد . مقدار، نام فریم است که توسط ویژگی نام عنصر مشخص شده است