Bugungi kunda har qanday veb-sahifani ko'rib chiqing va siz ular bilan muayyan narsalarni birgalikda bo'lishayotganini ko'rasiz. Ushbu umumiy xususiyatlardan biri tasvirlardir. To'g'ri tasvirlar veb-sayt taqdimotiga juda ko'p qo'shiladi. Ushbu tasvirlarning ayrimlari, masalan, kompaniyaning logotipi, saytni markalashga yordam beradi va u raqamli shaxsni sizning jismoniy shirkatingizga ulang.
Veb-sahifangizga rasm, belgi yoki grafik qo'shish uchun siz tagning HTML-kodida foydalanishingiz kerak. IMG yorlig'ini sizning HTML- da grafika ko'rsatilishini xohlagan joyga qo'yasiz. Sahifa kodini ko'rsatadigan veb-brauzer sahifani ko'rgandan keyin ushbu tegni tegishli grafik bilan almashtiradi. Kompaniya logotipi misoliga qaytib, bu tasvirni saytingizga qanday kiritishingiz mumkin:
Rasm xususiyatlari
Yuqoridagi HTML kodni ko'rib chiqsangiz, element ikkita atributdan iborat ekanligini ko'rasiz. Ularning har biri tasvir uchun talab qilinadi.
Birinchi xususiyat "src" dir. Bu sahifada aks ettirmoqchi bo'lgan rasm faylining to'liq ma'nosi. Bizning misolimizda "logo.png" nomli faylni ishlatamiz. Bu veb-brauzer saytni yaratishda ko'rsatadigan grafikadir.
Bundan tashqari, ushbu fayl nomidan oldin, "/ images /" ga qo'shimcha ma'lumot qo'shdik. Bu faylning yo'lidir. Dastlabki oldingi slash serverga katalogning ildizini tekshirishni bildiradi. So'ngra, "rasm" deb nomlangan papkani va nihoyat "logo.png" deb nomlangan faylni qidiradi. Saytdagi barcha grafikalarni saqlash uchun "rasmlar" deb nomlangan papkadan foydalanish ancha keng tarqalgan dasturdir, lekin sizning faylingiz saytingiz uchun dolzarb bo'lgan narsalarga o'zgartiriladi.
Ikkinchi talab qilinadigan atribut "alt" matni. Ushbu rasm, biron-bir sababga ko'ra yuklamasa, ko'rsatilgan "muqobil matn". Misolimizdagi "Kompaniya logotipi" deb nomlangan ushbu matn, rasm yuklamasada ko'rsatiladi. Nima uchun bunday bo'ladi? Turli sabablar:
- Noto'g'ri fayl yo'li
- Noto'g'ri fayl nomi yoki noto'g'ri yozilgan
- Etkazish xatosi
- Fayl serverdan o'chirib tashlandi
Bu biz ko'rsatgan tasvirning etishmayotganligi sababli bir nechta imkoniyat. Bunday hollarda, bizning pastki matnimiz o'rniga ko'rsatiladi.
Pastki matn shuningdek, ekran o'qiydigan programma tomonidan tasvirni zaiflashgan mehmonga tasvirni "o'qish" uchun ishlatiladi. Biz kabi tasvirni ko'rmagani uchun, bu matn ularni tasvirning o'zi qandayligini bilishga imkon beradi. Shuning uchun pastki matnni kiritish kerak va nima uchun suratning nima ekanligini aniq ko'rsatish kerak!
Pastki matnning keng tarqalgan noto'g'ri tushunilishi, bu qidiruvi maqsadlari uchun mo'ljallangan. Bu to'g'ri emas. Google va boshqa qidiruv tizimlari ushbu tasvirni qanday tasvirlayotganini bilish uchun (esda tuting, ular sizning rasmingizni "ko'rmaydilar"), faqat qidiruv tizimlariga shikoyat qilish uchun pastki matn yozmasligingiz kerak. Odamlar uchun mo'ljallangan ochiq-oydin matnni yozing. Agar siz qidirish motorlariga murojaat etadigan yorliqqa ba'zi kalit so'zlarni ham qo'shishingiz mumkin bo'lsa, bu yaxshi, lekin har doim ham pastki matnning asosiy maqsadiga grafik tasvirini ko'ra olmaydigan har bir kishi uchun nimani bildirayotganligiga ishonch hosil qiling.
Boshqa xususiyatlari
IMG yorlig'i, shuningdek, sizning veb-sahifangizga grafika qo'yish vaqtida - kenglik va balandlikda foydalanishingiz mumkin bo'lgan boshqa ikkita atributga ega. Misol uchun, Dreamweaver kabi WYSIWYG muharriri foydalanayotgan bo'lsangiz, u siz uchun bu ma'lumotni avtomatik ravishda qo'shib qo'yadi. Mana bir misol:
Kenglik va balandlik ko'rsatkichlari brauzerda tasvir hajmiga ishora qiladi. Brauzer keyinchalik joylashtirishdagi qancha bo'sh joyni aniq biladi va rasm tushirilganda sahifadagi keyingi elementga o'tishi mumkin. Ushbu ma'lumotni sizning HTML-da ishlatish bilan bog'liq muammo sizning suratlaringizning aniq hajmida ko'rsatishini xohlamasligingizdir. Misol uchun, sizga moslashtirilgan veb-saytingiz sizning tashrif buyuruvchilar ekrani va qurilma kattaligiga asoslangan o'zgarishlarga ega bo'lsa, sizning rasmlaringiz moslashuvchan bo'lishini xohlaysiz. Agar siz HTML-da siz qattiq o'lchamdagi narsa haqida gapiradigan bo'lsangiz, javob beruvchi CSS-muhit so'rovlarini bekor qilish juda qiyin bo'ladi. Shu sababli va uslub (CSS) va strukturani (HTML) ajratishni davom ettirish uchun siz HTML kodingizga kenglik va balandlik atributlarini kiritishiga hojat yo'q.
Bitta eslatma: Agar siz ushbu o'lchamlarni ko'rsatmalarni o'chirib qoldirsangiz va CSS-da kattalik belgilansangiz, brauzer tasvirni asl holatida ko'rsatib beradi.
Jeremy Girard tomonidan tahrirlangan