Salom aziz blog o'quvchilari. Ushbu bo'limning keyingi maqolasida biz teglarni ko'rib chiqishni davom ettiramiz. Biz avvalroq bilib oldik), sharhlar dizayni haqida gaplashdik va), shuningdek, Html kodidagi kosmik belgilar mavzusiga to'xtaldik va. Ha, biz ham imkoniyatlarni muhokama qildik.
Bugun men veb-loyihangiz ustida ishlayotganingizda tez-tez duch keladigan gipermatn belgilash tilining elementlari haqida batafsilroq to'xtalib o'tmoqchiman. haqida gapiryapman rasmlar va giperhavolalarni kiritish veb-sahifalar kodiga. Ushbu bilimsiz veb-sayt dizayni ustida samarali ishlash juda qiyin bo'ladi. Ushbu teglar maqolalarni yozishda ham, formatlashda ham, dvigatel ramkasi bo'ylab cho'zilgan shablonni loyihalashda ham faol foydalaniladi.
Rasmni qanday kiritish kerak - html Img teglari
Aytaylik, siz maqolalar yozish uchun vizual muharrirdan foydalanasiz, bu sizga rasmlar va giperhavolalar teglari kodda aniq qanday yozilganligi haqida o'ylamaslikka imkon beradi. Ammo haqiqat shundaki, hech qanday muharrir ideal emas va ko'pincha maqola matni dizaynidagi keyingi xatoni tuzatish uchun siz html muharriri rejimiga o'tishingiz va to'g'ridan-to'g'ri rasmlar va havolalarning teglariga o'zgartirish kiritishingiz kerak.
Agar siz HTML hujjatiga rasm va havolalarni qanday kiritishni bilsangiz, u hayotingizni sezilarli darajada soddalashtiradi va vaqtni tejaydi. Bundan tashqari, eng keng tarqalgan o'nta elementni o'rganish qiyin bo'lmaydi. Aslida, unchalik ko'p teglar qolmagan va, albatta, bugungi kun qahramonlari eng keng tarqalgan va tez-tez ishlatiladiganlar qatoriga kiradi.
Boshqa tomondan, siz foydalanayotgan shablonni loyihalashda bir xil elementlardan ham faol foydalaniladi - havolalar, rasmlar, konteynerlar, ro'yxatlar (ular haqida gapiriladi), turli xil va boshqalar.
Va shuning uchun shablonning tuzilishini tushunish uchun (biz Joomla shablonlari va WordPress mavzulari haqida gapiramiz) va agar kerak bo'lsa, unga o'zgartirishlar kiritish uchun yana kamida oz sonli kod elementlarini bilishingiz kerak. Ishoning, bunga sarflangan vaqt kelajakda o'z samarasini beradi. Xo'sh, biz sizni belgilash tili bilan tanishish zarurligiga ishontirdim deb taxmin qilamiz va to'g'ridan-to'g'ri bugungi nashrimiz qahramonlariga o'tish vaqti keldi.
Rasmlar kiritish uchun html tegi Img sahifada xizmat qiladi. Quyidagi rasm uning yordamida kiritilgan:
Src atributi tasvir faylining nomi va joylashuvini (boshqacha aytganda, unga boradigan yo'lni) belgilash imkonini beradi. Bunday holda, uni rasmli faylga ko'rsatish mumkin. Yo'llar tasvir fayllari saqlanadigan pastki kataloglar nomlari o'rtasida ajratuvchi bo'lib xizmat qiluvchi "/" belgisi yordamida belgilanadi.
Src-dagi mutlaq yo'l http://vash_sait.ru dan boshlanadi (mening blogim uchun -). Bundan tashqari, pastki papkalar nomlarini ajratish uchun "/" dan foydalanib, rasm fayliga to'liq yo'l yoziladi, oxirida faylning nomi va kengaytmasi bilan tugaydi. Masalan,
Src-dagi nisbiy yo'l HTML hujjatining faylini o'z ichiga olgan va siz tasvirni ochmoqchi bo'lgan manba papkasidan grafik faylga nisbiy yo'lni belgilash orqali o'rnatiladi. Agar ushbu fayl serverda unga kiradigan hujjat bilan bir papkada joylashgan bo'lsa, unga yo'lni ko'rsatish shart emas - faqat grafik fayl nomini ko'rsatishingiz kerak (harflar holatini saqlab ).
Agar ushbu fayl bir xil serverda joylashgan bo'lsa-da, lekin boshqa katalogda bo'lsa, unga kirish uchun hujjat joylashgan katalogdan unga yo'lni ko'rsatishingiz kerak (yuqorida ko'rsatilgan misolda faqat nisbiy yo'l ishlatiladi. - image / finik.jpg) ...
Width va Height atributlari yordamida tasvirning kengligi va balandligini o'rnatish
Html atributlari Width va Height sizga ushbu rasm uchun sahifada ajratiladigan maydon o'lchamini (mos ravishda kenglik va balandlik) o'rnatishga imkon beradi. Ular Img tegiga quyidagi tarzda kiritiladi:
Agar bu maydon siz kiritmoqchi boʻlgan rasmning haqiqiy oʻlchamiga mos kelmasa, rasm belgilangan oʻlchamga mos ravishda choʻziladi yoki toraytiriladi. Biroq, bu usulni, masalan, hujjatingizga kiritgan rasm hajmini kamaytirish uchun ishlatmasligingiz kerak. Axir, uning vazni hali ham katta bo'lib qoladi va bu veb-sahifaning yuklanishini sekinlashtiradi.
Avval grafik muharrirda rasm o'lchamini o'zgartirgan ma'qul (hatto undan foydalanishingiz mumkin) va shundan keyingina uni hujjatga kiriting. Bundan tashqari, grafik faylni saqlashda uning umumiy og'irligiga e'tibor berish kerak. Bu juda katta bo'lmasligi kerak. Ba'zan yakuniy vaznni kamaytirish uchun ozgina tasvir sifatini qurbon qilish yaxshiroqdir (xayriyatki, kichik o'lchamlarda u deyarli ko'rinmas bo'ladi).
Rasmlarni saqlashda ixcham GIF (eskiz rasmlarini kiritish uchun) yoki JPG (fotosuratlarni kiritish uchun) dan foydalaning. Kenglik va balandlik, Src atributidan farqli o'laroq (Img yorlig'ida talab qilinadigan yagona xususiyat) ixtiyoriydir. Ularning ko'pchiligi shunchaki ko'rsatmaydi, lekin ular baribir ahamiyatsiz ruxsat berishadi hujjatlarni yuklashni tezlashtirish.
Gap shundaki, agar brauzer html Img yorlig'i ichida kenglik va balandlikni topmasa, tasvir hajmini aniqlash, uni yuklash va shundan keyingina hujjat tarkibining qolgan qismini yuklashni davom ettirish uchun vaqt kerak bo'ladi. Agar siz balandlik va kenglikni belgilagan bo'lsangiz, brauzer avtomatik ravishda ushbu atributlarda ko'rsatilgan o'lchamlarning tasviri uchun joy ajratadi va veb-sahifani keyingi yuklashni davom ettiradi.
Agar ushbu sahifada ko'rsatilgan grafik fayllar juda og'ir bo'lsa va ular juda ko'p bo'lsa, Balandlik va Kenglik qo'shilishi foydalanuvchilarga grafik yuklanayotganda sayt matnini o'qishni boshlash imkonini beradi.
Bundan tashqari, agar siz Img ichida kenglik va balandlikni belgilamasangiz, unda kichik rasm va juda uzun muqobil matn (Img tegidagi Alt atributi tomonidan o'rnatilgan, bu quyida muhokama qilinadi) bilan grafiklardan oldin vaziyat yuzaga kelishi mumkin. yuklangan, bir smenada vaqtincha sayt dizayni sodir, chunki uzun o'zgaruvchan matn kerakli darajada ko'p joy egallaydi.
Kenglik va balandlikdan foydalanilganda, muqobil matnni ko'rsatish joyi ularda ko'rsatilgan o'lchamlar bilan cheklanadi. Ko'pincha, shuning uchun men ushbu atributlarni Img tegida yozishga harakat qilaman.
HTML Img tegidagi Alt va Sarlavha
Alt va Title atributlari saytning ichki qidiruv tizimini optimallashtirish nuqtai nazaridan juda foydali. Saytni o'zingiz yoki "" nashrida o'qing va targ'ib qiling.
Birinchisi, tasvir uchun muqobil matn deb ataladigan narsani o'rnatadi. Brauzeringizda grafiklarni ko'rsatishni o'chirib qo'ysangiz, ushbu matnni ko'rishingiz mumkin. Alt buning uchun mo'ljallangan - qidiruv tizimlariga bu erda qanday rasm bo'lishi kerakligini aytish. Sarlavha foydalanuvchini rasm mazmuni haqida xabardor qilish uchun mo'ljallangan.
Img tegidagi sarlavha mazmuni, agar foydalanuvchi sichqonchani rasm ustiga siljitsa, qalqib chiquvchi qatorda ko'rsatiladi. Ushbu atributlarning ikkalasi (agar siz ularni ko'rsatgan bo'lsangiz) sizga veb-loyiha rasmlaringizni kiritish imkonini beradi. Shuning uchun, siz ushbu imkoniyatni e'tiborsiz qoldirmasligingiz kerak va hech bo'lmaganda Alt-da ro'yxatdan o'tishingiz kerak. Tasvirlaringizning uslubi quyidagicha bo'lishi kerak:
Aslida, bo'lishi mumkin bo'lgan juda ko'p atributlar mavjud va ularning barchasini hech bo'lmaganda taqdim etilgan havolada ko'rishingiz mumkin. Ammo amalda siz ushbu maqolada faqat men tomonidan ro'yxatga olinadi.
Yana bir bor sizga teglarni yozish qoidalari haqida eslatib o'taman. Ochilgan uchburchak qavsdan keyin har doim bo'sh joysiz uning nomini yozing, so'ngra bo'sh joy bilan ajratilgan holda unga ruxsat berilgan atribut nomini yozing. Atribut nomidan keyin boʻsh joysiz tenglik belgisi qoʻyiladi va uning parametri tirnoq ichida yoziladi (masalan, Kenglik uchun pikseldagi kenglik).
Html tegidagi keyingi atribut oldingisidan bo'sh joy bilan ajratiladi. Oxirida yopiladigan uchburchak qavs o'rnatilgan. Iltimos, Img juftlashtirilmaganligini unutmang, ya'ni. uning yakuniy belgisi yo'q.
Ideal holda, veb-loyihangizda ishlatiladigan barcha tasvirlar shunday bezatilgan bo'lishi kerak. Bunday ko'rinishga har bir rasm uchun HTML kodini qo'lda tahrir qilmasdan erishish mumkin. Turli xil CMS (Joomla, WordPress va boshqalar) ning vizual muharrirlari ushbu boylikni foydalanuvchilarga qulay grafik interfeysda o'rnatishga imkon beradi, ammo sinovdan o'tgandan so'ng kodni tekshirishni unutmang (har qanday vizual muharrirda siz o'zgartirishingiz mumkin). maqolaning html kodini ko'rsatadi).
HTML havola tegi "A" yordamida giperhavolalar yarating
Havola Html da hujjatlarni tashkil qilishning asosiy elementlaridan biridir. Ularsiz veb-sahifa shunchaki sahifa bo'lib qoladi. Ular "A" tegi yordamida yaratilgan. Faqat talab qilinadigan atribut - Href. U ushbu giperhavolani bosish orqali foydalanuvchi borishi kerak bo'lgan URL manzilini (yo'lni) belgilaydi.
Havola o'z manbangizning ichki sahifasiga (ichki optimallashtirishning juda muhim nuqtasi u bilan bog'liq) va boshqa loyihaning sahifasiga olib kelishi mumkin. html A tegi juftlangan va shuning uchun yopish elementiga ega. Giperhavola matni (langar - bu haqda SEO targ'ibotini targ'ib qilish nuqtai nazaridan batafsil yozilgan) "A" ochilish va yopish teglari orasiga joylashtiriladi.
Qidiruv tizimlari nafaqat langarning o'zini, balki uning atrofidagi so'zlarni ham tahlil qiladi. Bu sizning saytingizga havolalarni boshqa manbalarga joylashtirishda e'tiborga olinishi kerak. Uni tabiiyroq qilish uchun matnning bir qismini langar tashqarisiga ko'chirishingiz mumkin, masalan:
Yangi oynada ochish va rasmdagi havola (rasm)
Xo'sh, biz yana qidiruv tizimini optimallashtirish bilan chalg'itdik. Keling, teglarga qaytaylik. "A" html tegi uchun ushbu havola olib boradigan sahifani ochishga imkon beradigan juda zarur atribut mavjud. yangi oynada... Agar siz sahifalaringizdan birida ko'plab tashqi hujjatlarga havola qilsangiz, bu kerak bo'lishi mumkin. Bunday holda, tashrif buyuruvchi uchun sahifangizni doimo ochiq saqlash qulayroq bo'ladi.
Ushbu maqsad uchun Target sahifani yangi oynada ochish imkoniyatiga ega _BLANK... Agar maqsad A tegida ko'rsatilmagan bo'lsa, u holda havola xuddi shu oynada ochiladi. Target atributidan foydalanishga misol:
Anchor (agar havola ichki havola uchun ishlatilsa, unda ushbu matnda ushbu giperhavola olib boradigan maqolani targ'ib qilmoqchi bo'lgan kalit so'zlar bo'lishi kerak)
Yodda tutingki, teglar ichidagi atributlar tartibi hech qanday tarzda tartibga solinmaydi. Siz ham yozishingiz mumkin:
Qidiruv mexanizmlari rasmdagi havolalarni yuqori baholaydi, degan fikr bor, ammo ba'zi manbalarga ko'ra, buning aksi. Ammo bu turdagi havolalardan foydalanganda kerakli kalit so'zlarni kiritishingiz mumkin bo'lgan langar yo'q. Bunday holda siz A tegi uchun Title atributidan foydalanishingiz mumkin.
Ru / image / finik.jpg "Eng =" 200 "Balandligi =" 150 ">
Sarlavha oddiy matn langari holatida ham ishlatilishi mumkin. Bunday holda, sichqoncha kursorini giperhavolaga olib borsangiz, unda yozilgan ma'lumotlar ko'rinadi. Aslida, bu atribut Html tilining deyarli barcha teglarida ishlatilishi mumkin, ammo bundan unchalik ma'no bo'lmaydi.
Bu erda siz ushbu giperhavola olib boradigan maqolani targ'ib qilmoqchi bo'lgan kalit so'zlarni ro'yxatdan o'tkazishingiz kerak
Ankorlar va xesh havolalarini yarating
Yana bir qiziqarli NAME atributi ilgari juda keng tarqalgan bo'lib, xesh havolalari yordamida kirish mumkin bo'lgan havola langarlarini yaratish uchun ishlatilgan. Biroz chalkash, lekin endi men tushuntirishga harakat qilaman. Aytaylik, sizga kerak hujjat matnidagi ma'lum bir joyga murojaat qiling(uning boshida emas), bu erda ma'lum bir masala muhokama qilinadi.
Agar siz ushbu maqolaga oddiy giperhavola qo'ysangiz, uni bosganingizdan so'ng, maqola eng boshida ochiladi va foydalanuvchi unda siz e'tibor qaratmoqchi bo'lgan joyni topishi kerak bo'ladi. Shunday qilib, langar va xesh-havolalar yordamida siz maqolani aniq o'zingiz mo'ljallangan joyda ochishingiz mumkin va foydalanuvchi keraksiz materiallarni siqib chiqarishi shart emas.
Html hujjatida giperhavolalar yaratishning tavsiflangan usulini amalga oshirish uchun avvalroq xesh havolasi olib boradigan maqolaga langar kiritish kerak edi. Langar oddiy rishtaga o'xshash tuzilma edi, lekin ayni paytda u tashrif buyuruvchi uchun ko'rinmas bo'lib qoldi. Bu shunday ko'rinardi:
Bular. Ma'lum bo'lishicha, langar faqat "A" ochilish va yopish teglaridan iborat bo'lib, unda langar bo'lmagan va bitta majburiy NAME atributiga ega edi. Ushbu atributning parametri yorliq edi, uning nomini o'zingiz ko'rsatishingiz kerak edi. Keyinchalik bu yorliq xesh havolasini yaratish uchun ishlatilgan.
Endi langarlarni kiritishning bu usuli eskirgan deb hisoblanadi va Html kodining validatori sifatida talqin qilinadi qo'pol xato... Iltimos, bunga e'tibor bering. Endi langarlar eng yaqin tegga qo'shish orqali joylashtiriladi.
Aytaylik, maqolaning sarlavhasi quyidagicha ko'rinishi mumkin:
Sarlavha
Shunday qilib, biz maqola matniga barcha kerakli langarlarni joylashtirganimizdan so'ng, siz maqola matnidagi yuqorida tavsiflangan tarzda (ID selektori yordamida) ilgari belgilangan joylarga murojaat qiladigan xesh havolalarini yaratishni boshlashingiz mumkin.
Giperhavola standart tarzda yaratilgan, faqat Href tilida yozilgan url oxirida funt belgisi (xesh yoki hesh belgisi) qo'yiladi va undan keyin langar yorlig'ining nomi keladi. maqola matnining kerakli joyida.
Anchor
Agar langar xesh havolasi bilan bir xil Html hujjatida bo'lsa, u holda faqat langarni ko'rsatish mumkin.
Anchor
Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha
Sizni qiziqtirishi mumkin
Html kodidagi ro'yxatlar - UL, OL, LI va DL teglari 
Html va CSS kodlarida ranglar qanday o'rnatiladi, jadvallarda, Yandex va boshqa dasturlarda RGB soyalarini tanlash 
Sayt uchun HTML shakllari - veb-shakllar elementlarini yaratish uchun Form, Input va Select, Option, Textarea, Label teglari va boshqalar. 
Img - Html yorlig'i tasvirni kiritish (Src), uni matn bilan tekislash va o'rash (tekislash), shuningdek fonni (fon) o'rnatish uchun. 
Qanday qilib giperhavola yaratish (A, Href, Target blank), uni saytning yangi oynasida qanday ochish, shuningdek, rasmni Html kodida havola qilish 
Iframe va Frame - ular nima va Html-da freymlardan qanday foydalanish yaxshiroq 
MailTo - bu nima va elektron pochta xabarini yuborish uchun Html-da havolani qanday yaratish kerak Tanlang, Variant, Textarea, Label, Fieldset, Legend - ochiladigan menyu va matn qutisi formasining Html teglarini tanlang. 
O'rnatish va ob'ekt - veb-sahifalarda media-kontentni (video, flesh, audio) ko'rsatish uchun Html teglari 
Html kodidagi sharh direktivalari va Doctype, shuningdek blok va inline elementlar (teglar) tushunchasi
HTML hujjatining asosiy xususiyati uning mavjudligidir giperhavolalar(yoki shunchaki havolalar) boshqa hujjatlar, saytlar, fayllar, rasmlar va boshqalar. Bu Internetni juda mashhur va foydalanish uchun qulay qilgan sahifalarga undan tashqaridagi ob'ektlarga havolalarni kiritish qobiliyatidir. Shuning uchun, o'z saytingizni yaratishda, har doim havolalarning "sehrliligi" haqida unutmang.
Ushbu darsda biz bu haqda gaplashamiz havolani qanday yaratish kerak saytga, uning alohida sahifasiga yoki fayliga. Siz havola matnini qanday o'zgartirishni, uni yangi oynada qanday ochishni, qanday qilib havolani rasmga aylantirishni, tashqi va ichki havolalar nima ekanligini va boshqa ko'p narsalarni bilib olasiz. Bundan tashqari, sizda havolalar bilan ishlash haqida oldingi darslarda to'xtalgan ma'lumotlaringiz bor (masalan, biz gaplashgan havola rangini qanday o'zgartirishingiz mumkin).
Umuman olganda, ushbu o'quv qo'llanma havolani yaratish haqidagi tushunchangizni to'liq va etarli qiladi. HTMLda giperhavolani qanday yaratishni va nima uchun ekanligini tushunasiz. Va siz uning xususiyatlarini nazorat qilishni o'rganasiz.
Shartlar
§ 1. Faylga havola, saytga havola, sahifaga havola
Faylga havola va sayt yoki alohida sahifaga havola o'rtasidagi farq haqidagi ko'plab savollar meni ushbu darsning boshida unga javob berishga majbur qildi. Javob: hech narsa. Ro'yxatdagi barcha havolalar tashqidir asl sahifa va xuddi shu tarzda yaratilgan.
Fikrni daraxt bo'ylab tarqatmaslik uchun men hamma narsani misol bilan ko'rsataman.
Brauzerda biz buni ko'ramiz:
Brauzerda biz buni ko'ramiz:
Ko'rib turganingizdek, barcha turdagi havolalar aynan bir xil yaratilgan. Faqatgina farq shundaki manzil havola qilinadigan ob'ekt. Endi o'quv qo'llanmaning asosiy qismiga o'tamiz.
§ 2. Tashqi havolalarni yaratish
Ma'lumotnomalar bir-biridan farq qiladi tashqi va ichki shuningdek, ustida matn va grafik... Tashqi havolalar html-sahifadan tashqariga, ichki turli qismlarga olib boradi xuddi shu sahifalar. Matn havolalari matndir (sukut bo'yicha, u ko'k rangda ta'kidlangan va tagiga chizilgan) va grafik havolalar navigatsiya qilish uchun bosiladigan ob'ekt sifatida rasmni o'z ichiga oladi. Ushbu turdagi havolalarning barchasi HTMLda teg (langar uchun qisqa) yordamida yaratilgan. Keling, buni batafsil ko'rib chiqaylik.
Sayt, sahifa yoki faylga tashqi havola yaratish uchun teg atributidan foydalaning - href... Bu atribut qiymat sifatida qabul qilinadi Url sayt, sahifa yoki fayl (biz bu haqda yuqorida gaplashdik). Teglar orasida va havolaning ko'rinadigan qismi (havolaning langari), ya'ni brauzer ekranida biz ko'rgan narsadir. Bog'lanishning langari oddiy matn (matnli havola) yoki grafik tasvir (bo'g'in-rasm) bo'lishi mumkin. Rasm havolasi va teglari orasiga tanish tegni kiritish orqali yaratiladi. Umuman olganda, havola yaratish sintaksisi quyidagicha ko'rinadi:
Masalan, ushbu saytning bosh sahifasiga matnli havola yaratish uchun siz quyidagi HTML kodini yozasiz:
http://www.seoded.ru/ "> Sayt bosh sahifasi
Brauzerda u quyidagicha ko'rinadi:
Ushbu darsning boshida yozganimdek, havolalar matnining rangi (langar) yordamida o'zgartirilishi mumkin. Umuman olganda, siz hamma narsani havolalar matniga sahifaning asosiy matni kabi qo'llashingiz mumkin, ya'ni uni qalin, kursiv bilan ajratib ko'rsatish, sarlavhalardan foydalanish va hokazo.
§ 2.1 Grafik havolalar (rasm havolalari)
Yuqorida aytganimdek, havola-tasvirni yaratish uchun matn o'rniga foydalanish kerak. Bunday havolaning namunasi quyidagicha ko'rinadi:
Va brauzer ko'rsatadi:
Odatiy bo'lib, brauzer grafik havoladagi rasmni ramka bilan o'rab oladi. Agar bu istalmagan bo'lsa, u holda atribut chegara teg IMG 0 qiymatini belgilashingiz kerak:
chegara = "0">
Bosh sahifa
§ 3. Ichki havolalar
Ichki havolalar juda ko'p tarkibga ega sahifalarda qulay navigatsiya qilish uchun ishlatiladi. Ularning yordami bilan men "Dars mazmuni" ni yaratdim (bu sahifaning boshiga qarang). Ichki havolalar tashqi havolalar kabi yaratiladi. Faqat atribut qiymatida href havolaning "langari" ko'rsatilgan. Anchor atribut tomonidan yaratilgan nomi:
name = "langar nomi"> matn
Va "langar" ning nomi o'zboshimchalik bilan o'rnatiladi. Bu erda shuni aytish kerakki, barcha brauzerlar ruscha "langarlar" nomlarini tushunmaydilar, shuning uchun lotin alifbosidan foydalanishni tavsiya qilaman. "Lanker" yaratish uchun teglar orasidagi matn ixtiyoriy va ko'pincha belgilanmagan.
"Men qizamiq" sahifadagi havolani bosgandan so'ng foydalanuvchi borishi kerak bo'lgan joylarda joylashgan.
Yuqorida aytganimdek, atributda href ichki havolada manzil o'rniga kerakli "langar" nomi majburiy xesh belgisi bilan ko'rsatilgan ( # ) uning oldida. Keling, bir misol keltiraylik.
nomli "langar" yaratdim zagolovok va uni ushbu darslik sarlavhasi yonidagi sahifa kodiga ("HTML-dagi giperhavolalar") qo'ying. Ankraj kodi quyidagicha:
nomi = "zagolovok">
href = "# zagolovok"> Sarlavhaga o'ting
Va brauzerda shunday:
Agar e'tibor bergan bo'lsangiz, sarlavhaga ichki havolani bosgandan so'ng, brauzerning manzil satridagi URL o'zgargan:
Asl manzilga:
http: //www..html
http: //www..html#zagolovok
Va bu xususiyatdan foydalanib, siz Internetdagi istalgan manbadan sahifaning ma'lum bir joyiga havola qilishingiz mumkin! Ya'ni, siz biror narsa haqida katta hajmli maqola bilan sahifa yaratdingiz (yoki sahifada ko'p sonli fotosuratlarni joylashtirdingiz) va uni ichki havolalar bilan belgiladingiz deylik. Unda bo'lganingizda, siz nafaqat maqola (yoki fotosuratlar) bo'lgan sahifaga, balki undagi ma'lum bir joyga (yoki ma'lum bir fotosuratga) murojaat qilishingiz kerak edi. Manzildagi ichki havola bilan opsiyadan foydalanib, siz xohlagan narsangizga osongina erishishingiz mumkin.
§ 4. Mutlaq va nisbiy havolalar
Bosh sahifa
Nisbiy havolalar biroz murakkabroq. Bunday havolalarda manzil ham ko'rsatiladi nisbatan saytning ildiz papkasi (asosiy sahifa joylashgan) yoki asl sahifaga nisbatan. Bunday havolalar kerak, masalan, agar sayt sizning uy kompyuteringizda joylashgan bo'lsa. Yoki bu veb-sayt emas, balki boshqa hujjatlar bilan bog'langan sahifa.
Keling, sahifaga havola qilishimiz kerak klienty.html bu yolg'on bitta papkada saytning asosiy sahifasi bilan. Keyin nisbiy havola kodi quyidagi shaklni oladi:
/klienty.html">Mijozlar
Aytaylik, asosiy sahifa bilan bir xil papkada mavjud zakazy papkasi va allaqachon unda bu klienty.html sahifasi Keyin nisbiy havolaning kodi quyidagicha bo'ladi:
/zakazy/klienty.html"> Mijozlar
Endi giperhavolalarni yaratishni ko'rib chiqamiz. asl sahifaga nisbatan... Aytaylik, bizning sahifamiz bor price.html(asl sahifa) va undan siz sahifaga havola qilishingiz kerak klienty.html Quyidagi odatiy variantlar mavjud:
1. Price.html va klienty.html sahifalari joylashgan bitta papkada.
klienty.html "> Mijozlar
2. saytning ildiz papkasida, price.html sahifasi zakazy papkasida yotadi bir daraja yuqori).
Kod shunday bo'ladi:
../klienty.html"> Mijozlar
Ikki nuqta joriy jilddan yuqoriroq darajaga o'tishingiz kerakligini ko'rsatadi.
3. klienty.html sahifasi va zakazy papkasi joylashgan saytning ildiz papkasida, papka mebel zakazy papkasida yotadi, price.html sahifasi mebel papkasida yotadi(ya'ni klienty.html sahifasi asl price.html sahifasiga nisbatan ikki daraja yuqori).
../../klienty.html"> Mijozlar
Ya'ni, har bir daraja ikkita nuqta va chiziq bilan belgilanadi " / ».
4. saytning ildiz papkasida, klienty.html sahifasi zakazy papkasida yotadi(ya'ni endi klienty.html sahifasi asl price.html sahifasiga nisbatan bir daraja pastda).
zakazy / klienty.html "> Mijozlar
Bunday holda, nuqta va chiziqli chiziqlar ishlatilmaydi.
5. Price.html sahifasi (manba sahifa) va zakazy papkasi joylashgan saytning ildiz papkasida, papka mebel zakazy papkasida yotadi, klienty.html sahifasi mebel papkasida yotadi(ya'ni endi klienty.html sahifasi asl price.html sahifasiga nisbatan ikki darajadan pastda joylashgan).
zakazy / mebel / klienty.html "> Mijozlar
6. Saytning ildiz papkasida ikkita papka mavjud: zakazy va oplata. Klienty.html sahifasi zakazy papkasida yotadi, original sahifa price.html oplata papkasida joylashgan(ya'ni, ikkala sahifa ham yolg'on turli papkalarda bir daraja pastda saytning ildiz papkasidan).
../zakazy/klienty.html"> Mijozlar
§ 5. Elektron pochtaga havola
Uchun elektron pochta havolasini yarating, atribut qiymatida url oʻrniga kerak href protokolni ko'rsatadigan elektron pochta manzilini yozing ( mailto:). Va keyin, bunday havolani bosganingizda, "Kimga" maydoniga kiritilgan elektron pochta manzili bilan pochta dasturi oynasi ochiladi. HTML kodida u quyidagicha ko'rinadi:
mailto: [elektron pochta himoyalangan]"> Mening pochtam
Va brauzerda shunday.
Gipermatn boshqa matnga havolalarni o'z ichiga olgan matn. Masalan, muallifning murakkab ta’riflar haqidagi eslatmalari yoki kitob sahifasining pastki qismidagi tarjimonlarning izohlari, agar unda chet tilidagi matn bo‘lsa. Internet saytlari gipermatnlarni bir sahifadan ikkinchisiga, sahifaning o'zida, shuningdek, bitta mavzuga aloqador bo'lmagan resurslar o'rtasida o'tkazishning murakkab tizimidir. Bunday tuzilma amaliy bo'lib, ko'p vaqtni tejaydi, tashrif buyuruvchiga kerakli ma'lumotlarni tezda topishga va ko'p sonli o'tishlarda yo'qolmaslikka imkon beradi.
Giperhavola kiriting
HTMLda giperhavola kiritish uchun deskriptor (teg) ishlatiladi u kerakli joyga o'rnatiladi. Odatda u matnning o'rtasiga joylashtiriladi, chunki giperhavolaning o'zi matn tuzilishidir. Lekin havolalar ham grafik (piktogrammalar, tugmalar, rasmlar); ular batafsil muhokama qilinadi. Ularning veb-sahifadagi joylashuvi matn bilan cheklanib qolmaydi, balki sayt yaratuvchisining dizayn qaroriga bog'liq.
Bu teg yordamida HTML hujjatiga giperhavola kiritishga misol ... Saytga tashrif buyuruvchi atrofdagi matn rangidan farq qiladigan tagiga chizilgan matnni (HTML havolasining rangi har qanday bo'lishi mumkin), "Google bosh sahifasini" ko'radi, uni bosish orqali u sahifaga o'tadi. Google qidiruv tizimining asosiy sahifasi. Shuni ta'kidlash kerakki, giperhavola matnida o'tish joyi haqida ma'lumot bo'lishi kerak. Ushbu tamoyilga rioya qilish va qoida sifatida qabul qilish kerak!
Teg tuzilishi ...
Teg ekanligini sezishingiz mumkin - juftlangan: yakuniy teg kerak.
href - atribut teg havola maqsadini bildiradi.
https://google.com/ - atribut qiymati navigatsiya qilinadigan resursning URL manzilini o'z ichiga oladi. U qo'sh yoki bitta tirnoq ichiga olingan. Bu HTML qoidalariga muvofiq teglarni joylashtirish tuzilishiga bog'liq.
bu butun qurilish deyiladi element veb-hujjat.
HTML qoidalariga ko'ra, ba'zi elementlar boshqa elementlarni o'z ichiga olishi mumkin. teg istisno emas. Agar dasturchi Google so'zini qalin harf bilan ajratib ko'rsatishi kerak bo'lsa, u holda bu matn formatlashning umumiy qoidalariga muvofiq teg yordamida, joylashtirish teglari ketma-ketligiga rioya qilgan holda amalga oshiriladi. Webmaster HTMLda xatosiz giperhavolalar yaratishni bilishi kerak, aks holda ular ishlamaydi. Kompyuter jargonidagi buzilgan havolalar "buzilgan" deb ataladi.
Bu erda: element
o'rnatilgan elementni o'z ichiga oladi
Mutlaq giperhavolalar
protokol: // domen nomi / fayl yo'li
Amerikada keng tarqalgan qidiruv tizimining manziliga misol: https://aol.com - mutlaq, chunki unda name.com domeni mavjud.
Mutlaq giperhavolalar boshqa saytlardagi sahifalarga o'tish yoki boshqa serverda joylashgan resurslarga kirish uchun ishlatiladi. O'tish Internet protokollari yordamida amalga oshiriladi. Protokollar ushbu maqolaning mavzusi emas, lekin ular giperhavolalarni yaratishda ishtirok etganligi sababli, ularni hech bo'lmaganda qisqacha eslatib o'tish kerak:
- http va https - eng keng tarqalgan; ular turli saytlarning Internet sahifalari orasida harakat qilish uchun ishlatiladi;
- ftp - fayllarni serverga yuklash yoki foydalanuvchi tomonidan veb-saytdan yuklab olish protokoli;
- mailto - pochta protokoli, bu orqali elektron pochta to'g'ridan-to'g'ri saytdan shaxsiy pochtaga kirmasdan yuboriladi.
Yana bir qancha maxsus maqsadli protokollar (gopher, telnet) mavjud, ular juda kam uchraydi, ulardan foydalanish dasturlash yoki tizim boshqaruvida maxsus bilimlarni talab qiladi.
Nisbiy giperhavolalar
Nisbatan manzillashda HTML-da giperhavolalardan foydalanish resurs ichida harakatlanish uchun xizmat qiladi va undan tashqariga olib kelmaydi. Agar sahifa shunchalik katta bo'lsa, vertikal aylantirish paneli ishlaydi, ba'zan juda uzun, masalan, lug'atlarda bo'lgani kabi, kerakli harfga tezda o'tish uchun nisbiy havolalardan foydalanish juda qulay va tavsiya etiladi.
Internet lug'atini yaratishda dasturchi alifboni sahifaning boshiga qo'yadi va agar havolalardan foydalanish bo'lmasa, foydalanuvchi "I" harfiga etib borish uchun sichqonchaning g'ildiragini juda uzoq vaqt aylantirishi kerak edi.
qayerda ha chaqirdi langar, a I harfiga o'ting- langar manzili. Anchorlarni to'g'ri ko'rsatish uchun lotin harflari va raqamlaridan foydalanish tavsiya etiladi, shuning uchun siz "men" deb yozmasligingiz kerak, ammo bu aniqroq bo'ladi.
Endi, sahifaning boshidagi alifbodan "I" harfiga o'tishni amalga oshirish uchun siz HTML hujjatidagi so'zlar "I" harfi bilan boshlanadigan joyga langarni mahkamlashingiz kerak. ":
langar oldida xesh belgisi mavjud, ularsiz harfga o'tish ishlamaydi.
Sayt yaratishda nisbiy adreslash
Dasturchi tomonidan veb-sayt yaratish uchun qulay va umumiy qabul qilingan algoritm:
- kompyuterda papka yaratish va qulaylik uchun uni tez kirish joyiga joylashtirish;
- ushbu papkada asosiy papkani yaratish;
- ikkilamchi veb-sahifalarni yaratish (index.html / page2);
- va unda grafik fayllarni joylashtirish;
- papka yaratish va unga boshqa ob'ektlarni joylashtirish (masalan, yuklab olish uchun fayllar);
- saytni kontent bilan to'ldirish;
- sayt fayllarini xostingda joylashtirish.
Siz, albatta, sayt elementlari orasidagi bog'lanish uchun havolalardan foydalanishingiz kerak bo'ladi va xuddi shu saytning boshqa sahifasiga HTML-da giperhavolani qanday kiritishni bilish juda qulay bo'ladi. Agar sayt fayllari bir xil katalogda, bitta serverda joylashgan bo'lsa, unda mutlaq adreslashdan foydalanishning hojati yo'q. Sayt fayllarini xostingga o'tkazishda ob'ektlar o'rtasidagi aloqa saqlanib qoladi, chunki ular ham xostingda bir xil katalogda joylashgan bo'ladi.
Aytaylik, dasturchi index.html saytining bosh sahifasini yaratdi, bu sahifada img.png tasviri bilan bezatilgan page2.html boshqa sahifaga havola mavjud. Keyin ushbu rasmning nisbiy yo'li quyidagicha ko'rinadi:
Maslahat: Ushbu mavzuni o'rganayotganda, oddiy matn muharriridan foydalanish yaxshidir, chunki siz o'tish manzillarini to'g'ri yozishda mahoratga ega bo'lishingiz va boshqa birovning kodini qanday tushunishni o'rganishingiz kerak. Ushbu bosqichda bloknotda yozilgan giperhavola xatosiz yaxshi natija bo'ladi,HTML ularni kechirmaydi va xatolar beradi.
Giperhavolalarni kuzatish usullari
Odatiy bo'lib, foydalanuvchi giperhavolani bosganida joriy brauzer oynasida yangi sahifa ochiladi. Ammo veb-dasturchi standartni o'zgartirishi va sahifani, masalan, yangi oynada ochishga majbur qilishi mumkin. Buning uchun atribut mavjud maqsad ma'lum bir qiymat bilan. Buni jadvalda eng aniq ifodalash mumkin.
Atribut sintaksisi maqsad:
Google bosh sahifasi yangi oynada ochiladi.
Eslatma: sahifalarni yangi tabda ochish uchun ushbu atribut uchun qiymatlar yo'q, lekin foydalanuvchining o'zi brauzer sozlamalarida o'rnatadi.
Giperhavola rangi
Tajribali Internet foydalanuvchisi vaqt o'tishi bilan giperhavolalar atrofdagi matndan rangi bilan farq qilishini va odatda ko'k rangda ekanligini payqagan bo'lishi kerak. U ergashgan va keyin oldingi sahifaga qaytgan havolalar binafsha rangga aylanadi. Nostandart rang sxemasida HTMLda giperhavolalardan foydalanish biroz bo'lsa-da, bu saytni boshqalardan ajratib turadi.
Tegdagi havolalar ranglarini o'rnatadi
rgb tizimidagi HTML rangi paydo bo'ladigan (# 00FF00) yoki rang nomini to'g'ridan-to'g'ri ko'rsatgan holda ("yashil") atributlar va ularning qiymatlari yordamida. Bog'lanish atributlarining uch turi mavjud:- havola - ko'rilmagan havola rangini o'rnatadi;
- vlink - foydalanuvchi allaqachon kuzatib borgan havola rangini o'rnatadi;
- alink - boshqa sahifaga o'tish paytida havola rangini o'rnatadi. Bu tez sodir bo'ladi, shuning uchun bu ta'sirni ushlab turish har doim ham mumkin emas.
Belgilash misoli:
Agar siz ushbu atributlarni tegda qo'llasangiz
, ushbu veb-hujjat uchun havolalar quyuq ko'k, tashrif buyurilgan havolalar binafsha rangda va faol havolalar to'q sariq-qizil rangda bo'ladi.Grafik giperhavolalar
Veb-dizaynning rivojlanishi va rivojlanishi HTML-ga giperhavolani tasvir sifatida qanday kiritishni bilishni talab qiladi. Rasm maqsad sahifaning mazmuniga mos kelishi kerakligi aniq. Misol uchun, dorivor o'simliklar haqidagi saytning asosiy sahifasi o'simliklarning fotosuratlari ko'rinishida taqdim etilishi mumkin, uni bosish orqali foydalanuvchi o'simlikning dorivor xususiyatlarini tavsiflovchi sahifaga o'tadi.
Statik tugmalarni almashtirish usuli ( ) grafik muharrirlarida (GIMP, Photoshop) veb-dizayner tomonidan yaratilgan chiroyli grafikalarga.
Sayt sahifalariga giperhavola sifatida grafiklarni kiritish uchun bir xil sintaksisdan foydalaniladi, faqat matn o'rniga HTML qoidalariga muvofiq rasm qo'shish yorlig'i ishlatiladi:
Muqobil matn, kenglik, balandlik va boshqalarni o'rnatish uchun atributlar xuddi shu tarzda qo'llaniladi.
Saytdan qo'ng'iroqlar
Html5 standarti Internetdan foydalanish funksiyasini kengaytirdi va endi siz nafaqat telefondan, balki to'g'ridan-to'g'ri saytdan qo'ng'iroq qilishingiz mumkin. Shu maqsadda siz HTML hujjatida giperhavolalardan ham foydalanishingiz mumkin va ular quyidagi sintaksisga ega:
...obunachi...
"Abonent" so'zi o'rniga telefon kitobidagi kabi qo'ng'iroq qiluvchiga tushunarli bo'lgan kontakt belgilanadi. Shuningdek, siz grafik faylni (abonentning fotosurati) joylashtirishingiz mumkin.
Saytdan qo'ng'iroqlar amalga oshirilishi uchun nafaqat abonentning telefon raqamiga havola, balki kompyuterning VoIP dasturida o'rnatilgan eshitish vositasi (mikrofon, naushnik) bo'lishi kerak, Internet tezligi 0,5 Mb / dan oshishi kerak. s. Qo'ng'iroqlar uchun to'lov trafik sarfi hisobiga amalga oshiriladi. Shuning uchun, agar Internet cheksiz bo'lsa, qo'ng'iroqlar bepul.
Giperhavolalar yaratish etikasi
Veb-saytni Internetga joylashtirishda webmaster HTML-da qanday giperhavolalar mavjudligini bilishi va ularni nafaqat to'g'ri va professional ravishda qo'llashi, balki quyidagi qoidalarga ham rioya qilishi kerak:
- Giperhavola aniq ko'rinadigan va atrofdagi matndan farqli bo'lishi kerak. Foydalanuvchi bu giperhavola ekanligini bilishi kerak.
- Havolani bosish orqali foydalanuvchi qaerga borishi aniq bo'lishi kerak. Buning uchun boshqa atributdan foydalanish tavsiya etiladi sarlavha, o'tish sahifasini qisqacha tasvirlab beradi. Atributni qo'llash sintaksisi quyidagicha:
- Foydalanuvchi havolani bosganida yuklab olinadigan fayl haqida to'g'ri ma'lumot olishi kerak.
Noto'g'ri sahifaga kirgan yoki noto'g'ri faylni yuklab olgan foydalanuvchi 99% hollarda darhol saytni tark etadi va kelajakda unga hech qachon kirmaydi.
Giperhavolalar yaratishda anti-SEO
HTML-ga giperhavolani qanday kiritish kerakligi haqidagi savolning texnik tomoni bilan bir qatorda, ta'kidlash kerak bo'lgan axloqiy jihat ham mavjud. Foydalanuvchilar xavfsizlik dasturlari (antivirus) yoki hatto hukumat tomonidan bloklangan ko'plab saytlar mavjud. Bular insofsiz veb-dasturchilar tomonidan yaratilgan saytlar.
Ular ishlatadigan hiyla-nayranglardan biri veb-sahifaga "ko'rinmas" giperhavolalarni kiritishdir. Firibgarlar HTML-da giperhavola yaratishni bilishadi va atributlardan foydalanib, havolaning tagiga chiziqni olib tashlashadi va oddiy foydalanuvchi uni ko'rmasligi uchun unga atrofdagi matnning rangini belgilashadi. Va boshqa veb-texnologiya vositalari (CSS, JavaScript, PHP) yordamida siz ularning xatti-harakatlarini dasturlashingiz mumkin. Masalan, JavaScript OnMouseOver hodisasi veb-sahifa elementida harakatni ishga tushiradi. Agar foydalanuvchi kursorni ko‘rinmas havola ustiga olib borsa, u boshqa saytdagi reklama sahifasiga o‘tadi. Yoki undan ham yomoni, faylga ko'rinmas havola mavjud bo'lganda va keraksiz dasturlar uning kompyuteriga yuklab olinib, o'rnatila boshlaydi. Odatda bu viruslar brauzerning bosh sahifasini o'zgartiradi, qattiq diskni ko'plab dasturlar bilan to'ldiradi va hokazo.
Tez orada bunday saytlar virus ma'lumotlar bazalari, xavfsizlik tizimlari va internet foydalanuvchilarining o'zlari "qora ro'yxati"ga kiritiladi. Bunday saytlar uzoq umr ko'rmaydi va ular o'z nomlarini o'zgartirishlari, Internet orqali cheksiz ko'chib o'tishlari, xost provayderlarini o'zgartirishlari kerak. Bu uning yaratuvchisi doimo intiladigan saytni targ'ib qilishga hissa qo'shmaydi, uni hech qachon, masalan, ijtimoiy tarmoqlar kabi megaportalga aylantirmaydi. Boshqa narsalar qatorida, bunday nayranglar bu harakatlardan ta'sirlangan odamlarda juda ko'p salbiy his-tuyg'ularni keltirib chiqaradi.
O'ylaymanki, siz bu bob nima haqida ekanligini allaqachon tushungansiz .. va siz havola nima ekanligini bilasiz, agar bo'lmasa, bu yerni bosing .. Bir necha turdagi havolalar, shuningdek, ularga rioya qilish uchun "mexanizmlar" mavjud. Ushbu bobda men sizga havolalarni qanday ro'yxatdan o'tkazishni batafsil aytib berishga harakat qilaman, shuningdek ular bilan ishlashning nozik tomonlariga bag'ishlayman.
Lirik chekinish:
Armiyada bo'lganimda, shtab boshlig'i oldimga kelib, buyruq berdi, men iqtibos keltiraman:
Menga o'sha hujjatni olib keling, men u qayerda va nima ekanligini bilmayman !! Nima turasiz? Yuguraylik!! Men kechikdim !!!
Xo'sh, men nima uchunman, brauzer, xuddi men kabi, bema'ni bo'lib qolmasligi uchun, u bilishi kerak: hujjatning aniq nomi, hujjatga boradigan yo'l va uni qayerga olib kelish kerakligi yoki Qaerda ochish kerak.
Ayni paytda bloknot yordamida biz faqat bitta HTML hujjatni yaratdik, menda index.html nomi bor (nega men bunday g'alati index.html nomini tanladim va nima uchun bu sizga kerak va nima uchun kerak) Men Qaysi biri bilan bilmayman, bu nomni o'zingiz o'ylab topdingiz, lekin menimcha, siz buni eslaysiz va qaerda yotganini bilasiz, agar siz mening boshlig'im bo'lmasangiz :) .. Ushbu hujjatda biz buni qilishga harakat qilamiz. bizda hali mavjud bo'lmagan boshqa hujjatga havola yarating .. Shunday qilib, unga bog'lanishdan oldin, uni yaratishingiz kerak , xayriyatki, qanday qilib allaqachon bilasiz.
- Biz daftarni ochamiz.
- Biz kodni html tilida yozamiz. masalan, bir nechta fotosuratlar bilan sahifa.
- Biz uni html sahifasi sifatida biz yaratgan birinchi hujjat allaqachon mavjud bo'lgan bir xil ishchi papkada saqlaymiz. Keling, chalkashmaslik uchun uni primer.html deb nomlaymiz va birinchisining nomini index.html deb o'zgartiramiz.
Endi men sizda ikkita html hujjat index.html va primer.html borligini va endi sizda keyingi o'rganish uchun minimal to'plam borligini bilaman.
Matn havolalari.
Teg bilan tanishing (langardan - langar) siz unga matn yoki rasmni qo'shishingiz mumkin, bu esa ma'lum hujjatlarga havola bo'ladi. Teg atributi href havola ko'rsatadigan hujjat nomi va yo'lini belgilaydi.
Hammasi birgalikda shunday yozilgan:
Mana mening rasmlarim!!Siz tushunganingizdek, primer.html ikkinchi html hujjatimizning nomi va "Mana mening fotosuratlarim !!" yozuvi. bu index.html faylidagi matnning bir qismi.
Rasmlarga o'xshash teg
ochilgan hujjatga havola yo'li xuddi shu tarzda yoziladi:
Mana mening rasmlarim!!- Bu degani, primer.html fayli hujjatdan bir pog'ona yuqorida joylashgan
Mana mening rasmlarim!!- hujjat www.site.ru veb-saytida joylashgan ..
Xo'sh, harakat qilaylikmi? Quyida bir vaqtning o'zida bir-biriga ishora qiluvchi havolalar yozilgan ikkita hujjatning namunasi keltirilgan.
Index.html fayli:
Ayting-chi, azizim bolam: mening qaysi qulog'im g'ichirlaydi?
V to'g'ri yoki chap?
Primer.html fayli:
Misoldan siz havolalar rang bilan ajratilganligini ko'rishingiz mumkin, sukut bo'yicha ko'k havola, qizil esa allaqachon tashrif buyurilgan havola bo'lib, bu ranglar bizga yaxshi ma'lum bo'lgan ochilish yorlig'i yordamida o'zgartirilishi mumkin. < body > va uning atributlari.
havola- havola rangi.aloqa- bosilgan, faol havolaning rangi.
vlink- tashrif buyurilgan havolaning rangi.
Bu shunday yozilgan:
>Matn havolasining rangi haqida gapirishni davom ettiradigan bo'lsak, shuni ta'kidlash kerakki, agar kerak bo'lsa, siz butun havolani ham, uning alohida qismlarini ham (harf so'zlarining iboralari) tanish teg bilan rang bilan ta'kidlashingiz mumkin. va uning atributi rang. Biroq, bu nafaqat rangga tegishli, balki matnning o'lchamini, uslubini va shriftini alohida o'rnatishingiz mumkin. Lekin esda tutingki, rang manipulyatsiyasi teg ichida amalga oshirilishi kerak. Bu yerga va haddan tashqari emas, aks holda havolaning rangi sukut bo'yicha yoki tegda yozilganidek bo'ladi
Index.html fayli:
havola = "# 008000" alink = "# ff0000" vlink = "# ffff00">
Kamalakdagi gullar joylarini eslab qolishingizga yordam beradigan iboraga qarang.
R
A
D
bor
G
A
Primer.html fayli:
havola = "# 008000" alink = "# ff0000" vlink = "# ffff00">
Har bir
ovchi
tilaklar
bilish
qayerda
o‘tiribdi
tustovuq
Asosiy sahifaga qayting
Saytdagi sahifalaringizdan biri albatta chaqirilishi kerak index.html. Biror kishi saytingiz nomini kiritganda, robot saytingizda aynan shu nomdagi faylni qidiradi. Sahifadan beri index.html birinchi bo'lib ochiladi, uni asosiy qiladi. Qolgan sahifalarni xohlaganingizcha chaqirishingiz mumkin ... nomlar bilan boshqa nuanslar yo'q.
Case haqida .. Hujjatlarning yo'li va nomlarini yozishda unutmang, masalan: Page.html, page.html va PAGE.html bular turli hujjatlarning nomlari! Xuddi shu narsa xatcho'p nomlari va rasmlari uchun ham amal qiladi. Kod yozishda har doim katta-kichik harflarga sezgir bo'ling, bunday nomlar u yoki bu brauzer tomonidan tan olinmaslik ehtimoli yuqori. Hamma narsani kichik lotin harflarida yozish va chaqirishni qoidaga aylantiring, shunda inson omili va dasturlarning injiqliklari xavfi nolga kamayadi.
Uch marta bosish qoidasi.
“Havolalar daraxti”ni shunday shakllantirishga harakat qilingki, saytga tashrif buyuruvchi har qanday sahifasidan saytning istalgan joyiga havolalarni minimal bosish bilan yetib borishi mumkin. Saytdagi kerakli joyga uchtadan ortiq o'tish endi yaxshi emas .. Inson uchun keraksiz sahifalarni cheksiz yuklab olish asabiy buzilish va saytning muddatidan oldin yopilishiga olib kelishi mumkin. Vaqt, pul va odamlarning asablarini tejang.
Keling, juda oddiy, ammo ayni paytda mashhur savol haqida gapiraylik. Qanday qilib rasmni havola qilish kerak? Ba'zan sayt tuzilishiga, manbaga matn havolasi ko'rinishida emas, balki rasm ko'rinishida havola qo'shish zarurati tug'iladi. Bu juda mantiqiy, chunki rasm ko'rinishidagi havola oddiy matn havolasidan ko'ra jozibali ko'rinadi. Bundan tashqari, u tashrif buyuruvchiga ancha yaxshi ko'rinadi.
Savol aslida juda oddiy, ammo hamma ham uni hal qila olmaydi. Misol sifatida, men Internetdagi istalgan rasmni olishni va uni biron bir manbaga havolaga aylantirishni taklif qilaman. Masalan, men ushbu maqolada VKontakte ijtimoiy tarmog'iga havola qo'shaman. Va havolaning ko'rinishini loyihalash uchun men VKontakte logotipidan foydalanaman.
Shunday qilib, rejangizni amalga oshirish uchun siz keyinchalik havola bo'ladigan rasmni topishingiz yoki chizishingiz kerak. Va html yordamida rasmni qanday ko'rsatishni biroz tushunish uchun. Shuningdek, rasmni qanday qilib to'liq bosiladigan va ishlaydigan havolaga aylantirish mumkin.
HTML - tasvir kodi.
Tasvirni html-kodda ko'rsatish uchun siz buning uchun mo'ljallangan img tegidan foydalanishingiz mumkin. Bizning kodimiz sintaksisiga qarab, tasvirning chiqishi boshqacha ko'rinishi mumkin. Misol uchun, HTML sintaksisidan foydalanganda kod quyidagicha ko'rinadi:
Va XHTML sintaksisidan foydalanganda - shunga o'xshash:
Sintaksis DOCTYPE haqidagi maqolada batafsil tavsiflangan.
Kod haqida bir oz ko'proq ma'lumot:
src = "URL" - URL o'rniga siz rasmga yo'lni yozishingiz kerak, biz uni havolaga aylantiramiz.
alt = "alternativ matn" - brauzerda tasvirlarni ko'rsatish o'chirilgan bo'lsa, tasvir haqidagi matn ma'lumotlarini ko'rsatish uchun mo'ljallangan.
Bundan tashqari, img tegi boshqa atributlarga ega. Ulardan asosiylari:
balandlik - tasvirning balandligi
kengligi - tasvir kengligi
Bu tasvirlarga qo'llaniladigan atributlarning faqat bir qismi. Ammo bu bosqichda biz uchun bu etarli. Bu atributlarning barchasi HTML kodida ham, CSS uslublarida ham tayinlanishi mumkin.
HTML - havola kodi.
Kod uchun tushuntirishlar:
a tegining boshqa atributlari ham bor, ammo bu bosqichda bizni faqat bir nechtasi qiziqtirishi mumkin:
maqsad - hujjat joriy havolada qaysi brauzer oynasida ochilishini aniqlash uchun mo'ljallangan. Masalan, hujjat joriy oynada (sukut bo'yicha) yoki yangi oynada ochiladi.
Shunday qilib, endi biz rasmning havola ekanligini bilamiz, kodning ikki qismidan iborat. Ularni birlashtirish uchungina qoladi. Yuqorida aytganimdek, men rasmni ko'rsatish uchun VKontakte ijtimoiy tarmog'ining logotipidan foydalanaman va o'z guruhimga havola qo'yaman, unda maqsad atributidan foydalanib, havolani yangi oynada ochish uchun o'rnataman.
Birinchidan, siz rasmni biz foydalanadigan serverga yuklashingiz yoki Internetdagi rasmga havolani nusxalashingiz kerak. Men rasmlarni ko'rsatish uchun o'z serverimdan foydalanishni afzal ko'raman.
Tasvirni wordpress kutubxonasiga, ya'ni media fayllarga yuklaganim uchun darhol band qilmoqchiman. Chunki men maqolaga shunchaki rasm havolasini qo'shaman. Ammo saytni loyihalashda va saytga turli elementlarni qo'shishda ftp mijozi yordamida rasmlarni buning uchun mo'ljallangan papkaga yuklash to'g'riroqdir. Wordpress-da, ko'pincha papka mavzu papkasida joylashgan va tasvirlar yoki img deb ataladi.
Bu shunday ko'rinadi:
Ko'rib turganimizdek, yumshoq qilib aytganda, unchalik yaxshi emas edi. Img atributlari tashqi ko'rinish va joylashuvni yaxshilashga yordam beradi. Shuningdek, men matnni o'rtada tekislash uchun atributni tayinlagan paragrafni qo'shdim. Bu p teglar orasidagi matn va boshqa elementlarning tekislanishini anglatadi.
p tegida biroz ko'proq ma'lumot:
U matnli paragrafni belgilash uchun mo'ljallangan. Ochilish va yopish teglari mavjud.
uslub - atribut CSS qoidalaridan foydalangan holda elementning uslublarini belgilaydi.
matnni tekislash: markaz; - CSS qoidasi. Elementning gorizontal tekislanishini aniqlaydi (p teg va ichidagi barcha elementlar). Bunday holda, element markazlashtirilgan.
Shunday qilib, biz rasmni aniqladik. Ammo u hali ham havolaga aylangani yo'q.
Bu borada, printsipial jihatdan, hamma narsa. Bir qarashda, bu biroz qo'rqinchli tuyulishi mumkin. Lekin aslida hamma narsa oddiy, asosiysi yozilganlarni diqqat bilan o'qib chiqishdir. Va, albatta, havolani o'zingiz rasmga aylantirishga harakat qilishingiz kerak. Amaliyot - bu nazariy jihatdan aniq bo'lmagan hamma narsani tushunishning eng yaxshi usuli, shuning uchun nima qilish kerakligini eslab qolish yaxshiroqdir.