Foydali maslahatlar

HTML rasmlar - yangi boshlanuvchilar uchun hiyla varaqasi

Pin
Send
Share
Send
Send


Matnda hamrohlik qiluvchi rasmlardan foydalanish siz o'quvchilar tomonidan taqdim etilgan ma'lumotni idrok qilishni sezilarli darajada yaxshilaydi. HTML-da sahifaga rasmlarni qo'shish yorlig'i mavjud. Va bugun biz ushbu yorliqni qanday ishlatish, uni qanday atributlar qo'llab-quvvatlayotganini batafsil ko'rib chiqamiz va tajribasiz veb-ustalar tomonidan qo'yilgan bir nechta umumiy savollarga javob beramiz.

Tasvirni (rasmni) sahifaga HTML-ga joylashtiring

Yuqorida aytib o'tilganidek, sahifaga rasmlarni qo'shish uchun yorliq ishlatiladi. Uning qisqa shakli quyidagicha:

XHTML-da. Misollardan ko'rinib turibdiki, oxiriga chiziq (chiziq) qo'shiladi.

Bularning barchasi, aytganda, faylga havoladan tashqari, hech qanday atributlarga ega bo'lmagan rasmni tezda kiritishdir.

Ushbu teg (), masalan, havoladan farqli o'laroq, yopilmaydi va yuqorida men aytib o'tgan shaklda yozilgan. Tavsiya etilgan atribut "altยป:

hozirgi paytda tasvir to'liq yuklanmagan yoki singan (mavjud bo'lmagan) havola mavjud.

Va endi teg qo'llab-quvvatlaydigan barcha xususiyatlar haqida gapirish mantiqiy.

HTMLda mavjud teg atributlarini ro'yxatlang

Rasmlarning barcha atributlari bo'sh joy bilan ro'yxatdan o'tgan. Ammo aslida ularning ro'yxati o'zi.

src - rasmga havolani o'z ichiga oladi, u mutlaq (boshqa saytdagi faylga havola) yoki nisbiy (saytingizdagi faylga havola) bo'lishi mumkin. Yaroqli formatlar: JPEG (JPG), PNG, GIF, BMP, ICO, APNG, Svg va Base64. Mutlaq rasm manzili bilan namunadan foydalanish:

Nisbatan rasm manzili bilan misol:

alt - matni o'z ichiga oladi - ko'rinmaydigan / etishmayotgan rasmga ishora. Foydalanish misoli:

tekislang - qo'shni matnga nisbatan rasmning hizalanishini sozlaydi (matn bilan rasm atrofida oqim hosil qiladi). Yaroqli qiymatlar: tepasida, pastki, o'rtasi, chapga va to'g'ri. Foydalanish misoli:

Bu atribut HTML5-da qo'llab-quvvatlanmaydi.

chegara - tasvir atrofidagi chegara (ramka) kengligini belgilaydi. Yaroqli qiymatlar: px, % va boshqa miqdorlar. Foydalanish misoli:

Bu atribut HTML5-da qo'llab-quvvatlanmaydi.

balandligi - tasvir balandligini o'rnatadi. Yaroqli qiymatlar: px, % va boshqa miqdorlar. Foydalanish misoli:

kengligi - tasvir kengligini belgilaydi. Yaroqli qiymatlar: px, % va boshqa miqdorlar. Foydalanish misoli:

hspace - tasvirning gorizontal (chap va o'ng) chiziqlarini o'rnatadi. Yaroqli qiymatlar: px, % va boshqa miqdorlar. Foydalanish misoli:

Bu atribut HTML5-da qo'llab-quvvatlanmaydi.

vspace - tasvirning vertikal (yuqori va pastki) pastki qismini ajratadi. Yaroqli qiymatlar: px, % va boshqa miqdorlar. Foydalanish misoli:

Bu atribut HTML5-da qo'llab-quvvatlanmaydi.

uzun bo'yli - kengaytirilgan rasm tavsifi uchun manzilni o'z ichiga oladi. Yaroqli qiymatlar: Txt fayli. Src atributi kabi manzil ham mutloq yoki nisbiy bo'lishi mumkin. Foydalanish misoli:

krosorigin - domenga so'rov (CORS) orqali boshqa saytdan rasmni joylashtirishga imkon beruvchi atribut. Yaroqli qiymatlar: anonim (ishonch yorliqlarisiz anonim so'rov) va foydalanish-hisob ma'lumotlari (hisob ma'lumotlarini topshirish bilan). Foydalanish misoli:

Bu atribut faqat HTML5-da qo'llab-quvvatlanadi.

srcset - ekranning kengligi yoki zichligiga qarab ko'rsatiladigan fayllar ro'yxatini belgilaydi. Yaroqli qiymatlar: Nw (bu erda N har qanday musbat butun son) va Kx (bu erda K musbat o'nlik son). Foydalanish misoli:

Atribut Android va Internet Explorer-da qo'llab-quvvatlanmaydi.

o'lchamlari - srcset atributida ko'rsatilgan tasvirlar hajmini belgilaydi. Yaroqli qiymatlar: Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Yo'q, Nq, Nmm, Npc, Ncm, Npt va Npxbu erda N musbat son. Foydalanish misoli:

Misol printsipi quyidagicha: agar ekran o'lchamlari 600 px dan past bo'lsa, unda biz tasvir kengligini 300 px ga belgilaymiz va aksincha, agar 600 px dan yuqori bo'lsa, biz rasm kengligini 600 px ga o'rnatamiz.

Srcset kabi xususiyat Android va Internet Explorer brauzerlarida qo'llab-quvvatlanmaydi.

sayt xaritasi - rasmni teg yordamida o'rnatiladigan xarita bilan bog'laydi. Yaroqli qiymatlar: # ism (bu erda nom xaritadagi ism atributining qiymati) va #id (bu erda ID - kartaning id atributining qiymati). Foydalanish misoli:

Agar siz kartani () havolaga () yoki (() tugmachasiga o'ralgan bo'lsangiz, siz havola yarata olmaysiz.

ismap - Tasvirni server kartasining ma'lum bir sohasi bilan bog'laydi. Bunday rasmni bosganingizda, chap chap burchakdagi chertish koordinatalari o'qiladi va havolada ko'rsatilgan manzilga yuboriladi. Atribut ishlashi uchun rasm havolaga o'ralgan bo'lishi kerak (). Foydalanish misoli:

Bundan tashqari, u global xususiyatlarni qo'llab-quvvatlaydi. sinf va id, shuningdek to'g'ridan-to'g'ri ichki jihozlash uslublari:

Agar so'ralsa, shaxsiy atributlarning aksariyati tegishli uslublar bilan almashtirilishi mumkin.

Tasvirni (rasmni) HTML-ga qanday qilib havola qilish mumkin?

O'zingizning veb-saytingiz (va nafaqat) boshqa sahifasiga kirish uchun funktsiyani qo'shib, rasmingizni bosadigan qilib qo'yish uchun uni teg bilan o'rashingiz mumkin :

Bog'lanish boshqa sahifaga olib kelishi mumkinligidan tashqari, u, masalan, langar bo'lishi mumkin. Bu bizning rasm darsligimizni yakunlaydi.

Hali ham savollaringiz bormi? Ularni ushbu maqola ostidagi sharhlarda joylashtirish uchun bepul his eting.

Tasvirni HTML-ga qanday kiritish mumkin?

Tasvirni HTML sahifaga kiritish uchun bitta oddiy teg ishlatiladi:

bu erda xxx - rasm manzili. Agar rasm sahifada joylashgan katalogda bo'lsa, teg quyidagicha ko'rinadi.

Biroq, yuqori tezlikda va barqaror Internetga ulanish hali dunyoning barcha burchaklariga etib bormagan va veb-saytdagi rasm shunchaki yuklanmaganligi sababli sodir bo'ladi. Bunday holatlar uchun muqobil matn tushunchasi mavjud.

Rasm saytida u mavjud bo'lmagan, yuklangan yoki brauzer rejimida "rasmlarsiz" ko'rsatiladi. U tegning alt atributidan foydalanib qo'shiladi.

Tasvir fayliga muqobil matn qo'shishga misol:

HTML rasm o'lchamlari

Tasvir faylining displey hajmini o'zgartirish uchun balandlik va kenglik teglaridan foydalaning, bu erda balandlik balandlik va kenglik piksel bilan o'lchanadigan kenglikdir.

Ushbu atributlardan foydalanganda brauzer avval grafik tarkib uchun joy ajratadi, umumiy sahifa tartibini tayyorlaydi, matnni namoyish qiladi va keyin rasmni o'zi yuklaydi.

Rasm berilgan o'lchamlari bilan to'rtburchaklar ichiga joylashtirilgan va agar parametrlar aslidan kichikroq yoki kattaroq bo'lsa, rasm cho'zilgan yoki siqilgan.

Agar balandlik va kenglik atributlari ishlatilmasa, brauzer darhol rasmni yuklaydi, bu matn va boshqa sahifaning elementlarini namoyish qilishni kechiktiradi.

Ushbu parametrlar ikkala pikselda ham ko'rsatilishi mumkin (rasm o'lchami doimiy va foydalanuvchining ekran o'lchamiga bog'liq emas) yoki foizda (rasm o'lchami ekran o'lchamiga bog'liq).

Shuni esda tutish kerakki, rasmning asl hajmini o'zgartirganda siz uning nisbatlarini saqlashingiz kerak.

Buning uchun faqat bitta parametrning qiymatini (kenglik yoki balandlik) belgilang, ikkinchisining qiymati avtomatik ravishda hisoblab chiqiladi.

HTML rasmlarning joylashuvi

Ko'p HTML teglaridagi kabi

Rasm havolasi

HTML-da havolani yaratish uchun tegdan foydalaning:

Grafik aloqani o'rnatish uchun siz rasm yorlig'ini ulanish yorlig'i bilan birlashtirishingiz kerak.

Bu quyidagicha amalga oshiriladi:

Ko'rinib turibdiki, grafik qo'shimchani bosish paytida to'liq yoki qisqartirilgan versiyada yozilgan har qanday manzilga yo'nalish va yo'naltirish bo'lishi mumkin.

Qanday qilib HTML-da rasmni fonga aylantirishim mumkin?

Rasm nafaqat sahifaga ko'rinadigan ob'ekt sifatida joylashtirilishi, balki fon sifatida ham o'rnatilishi mumkin. Rasmni fon sifatida aniqlash uchun tegda background = "xxx" atributini ko'rsatish kerak, bu erda xxx - yuqoridagi misollar bilan bir xil tarzda ko'rsatilgan rasmning manzili.

Misol uchun, biz bunday tekstura rasmini fon rasm sifatida o'rnatamiz:

Tasvirni saytning HTML-sahifasiga kiritish uchun zarur bo'lgan teglar va atributlar to'g'risida ma'lumot yo'q bo'lib ketdi.

Videoni tomosha qiling: 'Hydrangea' Acrylic Painting Technique for Beginners (Iyun 2020).

Pin
Send
Share
Send
Send