Giperhavolalarni kiritish uchun HTML teglari. Html-da havola rasmini qanday qilish kerak. Havolalarda tagiga chizish
Biz “Ijtimoiy media kontenti marketingi: qanday qilib o‘z izdoshlaringizning boshiga kirib, ularni o‘z brendingizga mehr qo‘yish” nomli yangi kitobni chiqardik.
Bu yo'lning o'ng tomonidagi reklama banneridir. Rangli tasvir haydovchini o'zi reklama qilgan dunyoga yuborishi mumkin. Agar, albatta, sayohatchi u erga borishni xohlasa - ya'ni bannerda ko'rsatilgan manzilga boradi.
Saytdagi havolalar turlari
Biz allaqachon aytganimizdek, saytdagi havolalar boshqacha bo'lishi mumkin. Bog'lanishning ikkita asosiy turi - langar matn, langar bo'lmagan matn va rasm havolalari. Matn havolalari reklama uchun muhim, chunki ular langar ro'yxatidagi qidiruv so'rovlarining og'irligini oshiradi. Rasm havolalari ham og'irlikni bildiradi, lekin ko'pincha ular saytdan foydalanish qulayligini yaxshilash uchun ishlatiladi.
Masalan, "fotogalereya" bo'limida foydalanuvchilarga qulaylik yaratish uchun rasm havolalarini yaratish mantiqan to'g'ri keladi. Fotosurat belgisini bosganingizda, yangi katta oyna ochiladi, unda odam rasmni katta formatda to'liq ko'rishi mumkin. Yoki, masalan, agar foydalanuvchi xohlasa, haydash xaritasi tasvirini ham kattalashtirish mumkin. Agar matningizda chizmalar va grafikalar mavjud bo'lsa, rasmni to'liq hajmda yuklab olish uchun havolani taqdim etish mantiqan to'g'ri keladi.
Rasm saytdagi boshqa sahifaga olib kelishi mumkin. Bu reklama banneridan, menyu elementidan va hokazolardan yo'l bo'lishi mumkin.
Sizga eslatib o'tamizki, veb-saytingizdagi menyuni rasm shaklida tashkil qilish tavsiya etilmaydi - bu siz uchun ham, siz uchun ham noqulay. qidiruv tizimi. Matnni ishlatish tavsiya etiladi.
Rasmga havolani qanday kiritish kerak
Aksariyat CMS-larda o'rnatilgan muharrirlar mavjud bo'lib, ular sizga rasmlarni yuklash va ulardan havolalarni o'rnatish bilan ishlashga imkon beradi.
- IN vizual muharriri Odatda siz shunchaki rasmni tanlashingiz mumkin, "havolani qo'shish" tugmasini bosing va kerakli urlni belgilang.
- Agar siz HTML kod sifatida rasmga havola kiritsangiz, quyidagi imlodan foydalaning:
teg<а>havolaga ergashishni bildiradi, a foydalanuvchini biror joyga yuboradigan tasvirga yo'lni belgilaydi. Ya'ni, dastlab siz uni serveringizga yuklashingiz kerak.
Qo'shimcha ko'rsatmalar:
- balandlik, kenglik - tasvirning o'lchamini ko'rsatadi;
- chegara - biz chekka (ramka) bilan ishlaymiz;
- alt - tasviri ko'rsatilmagan tashrif buyuruvchi uchun muqobil matn.
Siz tasvirga soya qo'shishingiz, sichqoncha ko'rsatgichini olib borganingizda shaffoflikni o'zgartirishingiz, rangni, yumaloq burchaklarni o'zgartirishingiz mumkin - bularning barchasi CSS vositalari bilan mumkin.
Agar siz boshqa saytdan rasmni havola sifatida qilsangiz
Buning uchun siz boshqa manbadagi rasmdan foydalanishingiz mumkin uning to'liq yo'lini joylashtirishingiz kerak.
Agar siz rasmni yuklab olmasdan, ya'ni uni boshqa saytdan tortib o'z saytingizga joylashtirmoqchi bo'lsangiz:
- Esda tutingki, boshqa odamlarning rasmlaridan foydalanish tavsiya etilmaydi va umuman imkonsizdir, chunki har bir grafik materialning o'z muallifi bor.
- Saytingizda boshqa birovning resursidan yuklangan rasmni ko'rsatishda siz saytingiz ishonchining bir qismini uchinchi tomon resursiga o'tkazasiz va qo'shimcha ravishda sahifani yuklash uchun ko'proq vaqt to'laysiz.
Bularning barchasi veb-saytni reklama qilish natijalarini yomonlashtiradi.
Saytda rasm havolalarini joylashtirish qoidalari
- Faqat rasmlaringizdan havola.
- Noyob rasmlardan foydalaning. Matnlar singari, muvaffaqiyatli reklama qilish uchun tasvirlar Internetda takrorlanmasligi kerak.
- Katta rasm yuklamang. Vizual ravishda tegdagi kenglik va balandlikdan foydalanib, uni qisqartirishingiz mumkin
, va sahifadagi rasm kichik hajmda bo'ladi. Ammo, aslida, har safar sahifaga to'liq o'lchamli rasm yuklanadi, bu sahifani yuklash vaqtini oshiradi va saytni reklama qilishga yomon ta'sir qiladi. Va majburiy siqilgan tasvirning sifati yomonlashadi.
- Roʻyxatdan oʻtish
- har bir rasm uchun tavsif. Siz ham ro'yxatdan o'tishingiz mumkin .</li> </ul><ul><li>Bunday havolalardan foydalanishga shoshilmang. Shunga qaramay, manbani targ'ib qilishda matnli havolalar muhimroq rol o'ynaydi.</li> </ul> <p>HTML hujjatlarining asosiy farqlovchi xususiyati boshqa hujjatlarga maxsus faol havolalar yaratishdir, ular giperhavolalar deb ataladi.</p> <p>Ularning ustiga sichqonchani olib borganingizda kursor qo'l shaklini oladi va bosganingizda brauzer oynasida boshqa veb-sahifa yoki ma'lum bir hujjat ochiladi. Giperhavolalar matn yoki tasvir bo'lishi mumkin.</p> <p>Agar yakuniy hujjat joriy katalog bilan bir xil katalogda joylashgan bo'lsa, u ishlaydi. Shuningdek, siz "/" belgisidan foydalanib, veb-saytning asosiy katalogiga nisbatan faylga yo'lni belgilashingiz mumkin.</p> <p>Masalan:</p> <p><a href=”/example.html”>sahifa nomi</a></p> <p>Masalan:</p> <p><a href=”http://sitename.com/sitepage.html”>sahifa nomi</a></p> <p>HTMLda giperhavolalar yaratish oddiy jarayondir. Odatiy bo'lib, ular ko'k rangda ta'kidlangan va ta'kidlangan va tashrif buyurilganlar binafsha rangda ta'kidlangan.</p> <ul><li>havola – veb-sahifa havolalarining rangi;</li> <li>vlink – tashrif buyurilgan veb-sahifa giperhavolalarining rangi;</li> <li>alink - veb-sahifadagi faol havolalarning rangi.</li> </ul><p>Masalan:</p> <p><body link=”black” vlink=” #8AA080” alink=”grey”></p> <p>Belgilangan atributlar butun HTML hujjatining havola ranglarini aniqlaydi. Agar siz ushbu kodni tegga kiritsangiz <body>, har safar shrift rangini o'rnatishingiz shart emas.</p> <h2>Giperhavolalarning asosiy atributlari</h2> <p>1. sarlavha - sichqonchani giperhavola ustiga olib borganingizda paydo bo'ladigan maslahat matnini yaratish imkonini beradi.</p> <p>Masalan:</p> <p><a href=”http://sitename.com/” title=”Текст_всплывающей_подсказки”>Havola nomi</a></p> <p>2. maqsad - brauzerga havolani qaysi oynada ochish kerakligini aytadi.</p> <p>U quyidagi qiymatlarni olishi mumkin:</p> <ul><li>_blank - havola yangi varaqda ochilishi kerak;</li> <li>_self - HTML giperhavolasi joriy yorliqda ochilishi kerak. Standart qiymat;</li> <li>_parent - brauzer havolani ota-ona oynasiga yuklashi kerak;</li> <li>_top - giperhavola brauzer oynasining butun maydoni bo'ylab yuklanadi (bu holda ramka yo'qoladi).</li> </ul><p>Masalan:</p> <p>Havola nomi</p> <p>Shunday qilib, yangi boshlanuvchilar tomonidan tez-tez beriladigan savolga javob " <span>html ga giperhavola qanday kiritiladi</span>" qabul qildi.</p> <p>Veb dasturlashni o'rganishda muvaffaqiyatlar tilaymiz!</p> HTML hujjatida havolalar qanday yaratiladi <p>(Ushbu sahifaning pastki qismida ko'proq misollar topasiz)</p> <h2>HTML giperhavolalari (havolalar)</h2> <p>teg <a>ikki usulda foydalanish mumkin:</p> <ol><li>Boshqa hujjatga havola yaratish uchun - href atributidan foydalaning</li> <li>Hujjat ichiga xatcho'p qo'yish uchun - name atributidan foydalanish</li> </ol><h2>HTML sintaksisi havolalari</h2> <h2>Misol</h2> <table class="code notranslate" cellspacing="0" cellpadding="0" border="0" width="100%" id="table2"><tr><td>Veb-saytga tashrif buyuring</td> </tr></table><p>u brauzer tomonidan quyidagicha ko'rsatiladi:</p> <h2>HTML havolalari - Target atributi</h2><p>Maqsad atributi bog'langan (havola ko'rsatilgan) hujjatni qayerda ochishni belgilaydi.</p> <p>Quyidagi misol bog'langan hujjatni yangi brauzer oynasida yoki yorliqda ochadi:</p> <h2>HTML havolalari - Ism atributi</h2><p>Name atributi HTML hujjatida xatcho'p ("langar") yaratish uchun ishlatiladi.</p> <p><b>Izoh: <br></b> Kelgusi HTML5 standarti havola nomini belgilash uchun name atributi oʻrniga id atributidan foydalanishni taklif qiladi. <br>Id atributidan foydalanish aslida barcha zamonaviy brauzerlarda HTML4 da ishlaydi.</p> <p>Xatcho'plar hech qanday maxsus tarzda ko'rsatilmaydi. Ular o'quvchiga ko'rinmaydi.</p> <p><b>Izoh:</b> Pastki katalog havolalariga har doim qiyshiq chiziq qo'shing. Agar siz shunday havola yaratsangiz: href="http://site/html", keyin serverga ikkita so'rov hosil bo'ladi, avval server manzilga chiziq qo'shadi va keyin yangi so'rov yaratadi: href="http ://site/html/" .</p> <p><b>Maslahat:</b> Nomlangan havolalar ko'pincha katta hujjat boshida "tarkib" yaratish uchun ishlatiladi. Hujjatdagi har bir bobga nomli langar beriladi va ushbu nomli langarlarning har biriga havolalar hujjatning boshida kiritiladi.</p><p><b>Maslahat:</b> Agar brauzer belgilangan havolani topmasa, u hujjatning boshiga o'tadi. Hech qanday xatolik yuz bermaydi.</p> <table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" width="48"> </td> <td align="left" valign="middle"> </td> </tr></table> <p>Keling, juda oddiy, ammo ayni paytda mashhur savol haqida gapiraylik. <b>Qanday qilib rasmni havola qilish kerak</b>? Sayt tuzilishiga, biron bir manbaga matn havolasi ko'rinishida emas, balki rasm shaklida havola qo'shish zarurati tug'iladi. Bu juda mantiqiy, chunki rasm ko'rinishidagi havola oddiy matn havolasidan ko'ra jozibali ko'rinadi. Bundan tashqari, bu tashrif buyuruvchiga ancha yaxshi ko'rinadi.</p> <p>Savol aslida juda oddiy, ammo hamma ham buni hal qila olmaydi. Misol tariqasida, men Internetdagi istalgan rasmni olishni va uni manbaga havolaga aylantirishni taklif qilaman. Masalan, men ushbu maqolaga VKontakte ijtimoiy tarmog'iga havola qo'shaman. Va havolaning ko'rinishini loyihalash uchun men VKontakte logotipidan foydalanaman.</p> <p>Shunday qilib, rejangizni amalga oshirish uchun siz keyinchalik havola bo'ladigan rasmni topishingiz yoki chizishingiz kerak. Va bilan tasvirni qanday ko'rsatishni biroz aniqlang <a href="https://whatsappss.ru/uz/utilities/css-bolshie-bukvy-sozdanie-zaglavnyh-bukv-s-pomoshchyu-css-html-bukvy.html">html yordamida</a>. Shuningdek, rasmni qanday qilib to'liq bosiladigan va ishlaydigan havolaga aylantirish mumkin.</p> <h2>HTML - tasvir kodi.</h2> <p>Tasvirni HTML kodida ko'rsatish uchun siz buning uchun mo'ljallangan img tegidan foydalanishingiz mumkin. Bizning kodimiz sintaksisiga qarab, tasvir chiqishi boshqacha ko'rinishi mumkin. Misol uchun, HTML sintaksisidan foydalanganda kod quyidagicha ko'rinadi:</p><p> <img src='https://i0.wp.com/URL' loading=lazy loading=lazy> </p><p>Va XHTML sintaksisidan foydalanganda - shunga o'xshash:</p><p> <img src='https://i1.wp.com/URL' loading=lazy loading=lazy> </p><p>Sintaksis haqida batafsil ma'lumotni DOCTYPE haqidagi maqolada topishingiz mumkin.</p> <p>Kod haqida bir oz ko'proq:</p> <p>src="URL" - URL o'rniga biz havolaga aylantiradigan rasmga yo'lni kiritishingiz kerak.</p> <p>alt="alternativ matn" - ko'rsatish uchun mo'ljallangan <a href="https://whatsappss.ru/uz/tips/shifrovanie-slov-v-dvoichnom-kode-kodirovanie-tekstovoi-informacii.html">matnli ma'lumotlar</a> tasvir haqida, brauzerda tasvirlarni ko'rsatish o'chirilgan.</p> <p>Bundan tashqari, img tegi boshqa atributlarga ega. Asosiylari:</p> <p>balandlik - tasvir balandligi</p> <p>width - tasvir kengligi</p> <p>Bu tasvirlarga qo'llaniladigan atributlarning faqat bir qismi. Ammo bu bosqichda bizda yetarli. Bu atributlarning barchasi quyidagi kabi tayinlanishi mumkin <a href="https://whatsappss.ru/uz/tips/ispolzovanie-probelnyh-simvolov-dlya-formatirovaniya-koda-html.html">html kodi</a>, va CSS uslublarida.</p> <h3>HTML - havola kodi.</h3> <p>Kod uchun tushuntirishlar:</p> <p>a tegining boshqa atributlari ham bor, ammo bu bosqichda bizni faqat bir nechtasi qiziqtirishi mumkin:</p> <p>maqsad - joriy havola yordamida hujjat qaysi brauzer oynasida ochilishini aniqlash uchun mo'ljallangan. Masalan, hujjat joriy oynada (standart) yoki yangi oynada ochiladi.</p> <p>Shunday qilib, endi biz rasmning havola ekanligini va kodning ikki qismidan iboratligini bilamiz. Faqat ularni birlashtirish qoladi. Yuqorida aytganimdek, logotipdan foydalanaman <a href="https://whatsappss.ru/uz/what-is-it/4-zadanie-samaya-pervaya-socialnaya-set-istoriya-vozniknoveniya-socialnyh.html">ijtimoiy tarmoq</a> VKontakte, rasmni ko'rsatish va o'z guruhimga havola qo'yish uchun, men maqsad atributidan foydalanib, havolani yangi oynada ochish uchun o'rnataman.</p> <p>Birinchidan, siz tasvirni biz foydalanadigan serverga yuklashingiz yoki Internetdagi rasmga havolani nusxalashingiz kerak. Rasmlarni ko'rsatish uchun o'z serverimdan foydalanishni afzal ko'raman.</p><p> <img src='https://i2.wp.com//wp-content/uploads/2013/06/logo_vkontakte.png' loading=lazy loading=lazy> </p><p>Tasvirni wordpress kutubxonasiga, ya'ni media fayllarga yuklaganimni darhol band qilmoqchiman. Men maqolaga faqat rasm havolasini qo'shaman. Lekin saytni loyihalashda va qo'shishda <a href="https://whatsappss.ru/uz/utilities/primery-ispolzovaniya-css-teni-teksta-css-neskolko-tehnik-dlya.html">turli elementlar</a> saytga ftp mijozi yordamida rasmlarni buning uchun mo'ljallangan papkaga yuklash to'g'riroq. WordPress-da papka ko'pincha mavzular papkasida joylashgan va tasvirlar yoki img deb ataladi.</p> <p>Bu shunday ko'rinadi:</p> <p><img src='https://i0.wp.com/sdelaemblog.ru/wp-content/uploads/2013/06/logo_vkontakte.png' height="203" width="387" loading=lazy loading=lazy></p> <p>Ko'rib turganimizdek, yumshoq qilib aytganda, unchalik yaxshi bo'lmagan. Yaxshilash <a href="https://whatsappss.ru/uz/browser/prikreplennaya-tema-blyutuz-naushniki-dlya-telefona-podklyuchenie-bluetooth.html">tashqi ko'rinish</a> va joylashuvga img atributlari yordam beradi. Men o'rtasiga matnni tekislash atributini tayinlagan paragrafni ham qo'shdim. Bu p teglar orasida joylashgan matn va boshqa elementlarning tekislanishini bildiradi.</p><p>p tegi haqida bir oz ko'proq:</p> <p>U matnli paragrafni aniqlash uchun mo'ljallangan. Ochilish va yopish teglari mavjud.</p> <p>uslub - Atribut CSS qoidalaridan foydalangan holda elementning uslublarini belgilaydi.</p> <p>matnni tekislash: markaz; - CSS qoidasi. Elementning gorizontal tekislanishini belgilaydi (p teg va ichidagi barcha elementlar). Bunday holda, element markazga to'g'ri keladi.</p> <p>Shunday qilib, biz rasmni ajratdik. Ammo u hali havolaga aylangani yo'q.</p> <p>Hammasi shu. Bir qarashda bu biroz murakkab ko'rinishi mumkin. Lekin aslida hamma narsa oddiy, asosiysi yozilganlarni diqqat bilan o'qib chiqishdir. Va, albatta, siz o'zingiz rasm bilan bog'lanishga harakat qilishingiz kerak. Eng yaxshi amaliyot nazariy jihatdan tushunarsiz bo'lgan hamma narsani tushunishga yordam beradi, shuningdek, nima qilish kerakligini yaxshiroq eslab qolishga yordam beradi.</p> <p>Giperhavolalar tarmoqdagi hujjatlarni bir-biri bilan bog'lash uchun ixtiro qilingan va agar sizning saytingiz bitta emas, balki bir nechta sahifalardan iborat bo'lsa, ularni faqat giperhavolalar yaratish orqali bog'lashingiz mumkin. Keling, bu qanday ko'rinishini misol bilan ko'rib chiqaylik.</p> <h3>Oddiy giperhavola yaratish</h3> <p><!Doctype html><br> <html lang="uz-UZ"><br> <head><br> <meta charset=windows-1251><br> <title>
Boshqa sahifaga o'ting