Matn atrofidagi matnni qanday saralash kerak

Har qanday veb-sahifani ko'rib chiqing va matn mazmuni va tasvirlarining kombinatsiyasini ko'rasiz. Ushbu elementlarning har ikkalasi ham veb-saytning muvaffaqiyati uchun muhim tarkibiy qismlardan hisoblanadi. Matn mazmuni - saytga tashrif buyuradiganlar o'qiydi va ularning qidirish mexanizmlari ularning tartiblashtirish algoritmlari qismi sifatida foydalanadi . Rasmlar, saytga ingl. Qiziqish qo'shib, matn tarkibiga urg'u beradi.

Veb-saytlarga matn va tasvirlarni qo'shish oson. Matnlar paragraflar, sarlavhalar va ro'yxatlar kabi standart HTML teglar bilan qo'shilib, tasvirlar elementi bo'lgan sahifaga joylashtiriladi. Veb-sahifangizga rasmni qo'shgandan so'ng, siz rasmning yonidagi matn o'rniga matnli oqimga ega bo'lishni xohlashingiz mumkin (bu HTML-kodga qo'shilgan rasm aslida brauzerda ko'rsatiladi). Texnik jihatdan, ushbu ko'rinishga erishishning ikkita yo'li mavjud: CSS-dan (tavsiya etilgan) yoki ingliz tilidagi ko'rsatmalarni to'g'ridan-to'g'ri HTML- ga qo'shib (tavsiya etilmaydi, chunki veb-saytingiz uchun uslub va tarkibni ajratishni davom ettirishni xohlaysiz).

CSS-dan foydalanish

Sahifaning matnini va rasmlarni tuzish usulini va ularning ingl. Uslublarini brauzerda qanday ko'rinishini o'zgartirishning to'g'ri usuli CSS bilan . Esda tuting, chunki biz sahifada ingl. O'zgarish (rasm atrofida matn oqimi qilish) haqida gapirganda, bu Cascading Style Sheets domenidir.

1. Birinchidan, rasmingizni veb-sahifangizga qo'shing. HTML-dan har qanday ingl. Xususiyatlarni (kenglik va balandlik qadriyatlari kabi) istisno qilmang. Bu, ayniqsa, rasmning o'lchami brauzerga qarab o'zgaradigan javob beruvchi veb-sayt uchun juda muhimdir. Adobe Dreamweaver kabi muayyan dasturiy ta'minot kenglik va balandlik ma'lumotlarini ushbu vositaga qo'shilgan tasvirlarga qo'shadi, shuning uchun ushbu ma'lumotni HTML kodidan olib tashlang! Biroq, tegishli alt matnni kiritish ishonch hosil qiling. HTML kodingiz qanday ko'rinishi mumkinligi haqidagi misol:
2. Uslublar uchun rasmga sinf qo'shishingiz mumkin. Ushbu sinf qiymati bizning CSS faylimizda qanday foydalanamiz. Bu erda ishlatiladigan qiymat o'zboshimchalik bilan bo'lsa ham, ushbu uslub uchun biz "rasm" ning qaysi tomonga moslashini xohlashimizga bog'liq holda "chap" yoki "o'ng" qiymatlaridan foydalanishga intilamiz. Biz ushbu sodda sintaksikdan yaxshi ishlashi va kelajakda saytni boshqarishi kerak bo'lgan boshqa kishilar uchun oson bo'lishini topamiz, ammo siz buni istagan har qanday sinfga berishingiz mumkin.
   2. O'z-o'zidan bu sinfning qiymati hech narsa qilmaydi. Rasm avtomatik ravishda matning chap tomoniga mos kelmaydi. Buning uchun endi biz CSS faylga murojaat qilishimiz kerak.

1. Siz uslublar jadvalida quyidagi uslubni qo'shishingiz mumkin:
   1. .left {
   2. float: chap;
   3. padding: 0 20px 20px 0;
   4. }
   5. Bu yerda siz oddiy hujjat oqimidan tasvirni tortib oladigan CSS-ning "float" xususiyatidan foydalanishingiz mumkin (bu tasvir odatda ko'rsatilsa, matn ostidagi hoshiyali matn bilan) va uni konteynerning chap tomoniga moslashtiradi . So'ngra HTML formatida keladigan matn uning atrofini o'rab oladi. Biz, shuningdek, bu matn to'g'ridan-to'g'ri rasmga qarshi turmasligi uchun ba'zi bir to'ldirish qiymatlarini qo'shdik. Buning o'rniga, sahifa dizaynida ingl. Jihatdan jozibali bo'lishi mumkin bo'lgan ba'zi bo'shliqlar bo'ladi. Matnni to'ldirish uchun CSS stenografida rasmning yuqori va chap qismiga 0 va chap va pastki 20 piksel qo'shdik. Unutmangki, siz chap tomonga burilgan tasvirning o'ng tomonini biroz to'ldirishingiz kerak. To'g'ri hizalanmış tasvir (biz bir daqiqaga qaray boshlaymiz) chap tomonga to'ldirilgan bo'lishi kerak.
2. Agar veb-brauzeringizni brauzerda ko'rsangiz, sizning rasmingiz sahifaning chap tomoniga moslanganligini va uning atrofidagi matnni yaxshi ko'rib turishini ko'rishingiz kerak. Buni aytishning yana bir usuli shundaki, tasvir "chapga suzadi".

1. Agar siz bu tasvirni o'ngga (masalan, ushbu maqolada keltirilgan fotosuratda bo'lgani kabi) o'zgartirishni xohlasangiz, oddiy bo'ladi. Birinchidan, biz "chap" sinf bahosi uchun CSS-ga qo'shgan usuli bilan bir qatorda, biz ham to'g'ri o'ng tomonga egamiz. Bu shunday bo'lar edi:
   1. To'g'ri {
   2. float: o'ng;
   3. to'ldirish: 0 0 20px 20px;
   4. }
   5. Buni yozgan birinchi CSS-ga o'xshashligini ko'rishingiz mumkin. Faqatgina farq, "float" xususiyati va biz foydalanadigan padding qiymatlari uchun biz foydalanadigan qiymat (o'ngning o'rniga rasmimizning chap tomoniga qo'shamiz).
2. Nihoyat, HTML-dagi tasvirning sinfini "chapdan" "o'ngga" o'zgartiradi:
3. Brauzerda sizning sahifangizga hoziroq ko'ring va sizning rasmingiz o'ng tomonga to'g'ri moslashtirilishi kerak. Biz veb-sahifalarni yaratishda kerak bo'ladigan tarzda ushbu ingl. Uslublarni ishlatishimiz uchun biz barcha uslublar jadvallariga "chap" va "to'g'ri" bu uslublarni qo'shamiz. Ushbu ikkita uslublar atrofimizdagi matnni suratga olish bilan shug'ullanishimiz kerak bo'lgan har bir narsaga murojaat qilishimiz mumkin bo'lgan chiroyli, qayta foydalanish mumkin xususiyatlarga aylanadi.

CSS o'rniga HTMLni ishlatish (va nima uchun bunday qilmaslik kerak)

HTML bilan tasvirni atrofga o'rash mumkin bo'lsa-da, veb-standartlar CSS (va yuqorida keltirilgan qadamlar) strukturani (HTML) va uslubni (CSS) ajratishni davom ettirish uchun yo'lni ko'rsatishni belgilaydi. Buni hisobga olganda, ayniqsa, ba'zi qurilmalar va tartiblar uchun bu matn tasvir atrofida oqimga muhtoj bo'lmasligi mumkin . Kichkina ekranlar uchun javob beradigan veb-saytning tartibi matnning chizilgan rasmning pastki qismiga to'g'ri kelishini va tasvirning ekranning to'liq kengligidan cho'zilishini talab qilishi mumkin. Sizning uslubingiz HTML formatlashingizdan alohida bo'lsa, bu osonlikcha ommaviy axborot so'rovlari bilan amalga oshiriladi. Turli xil tashrif buyuruvchilar va turli ekranlar uchun rasm va matnlar turli xil ko'rinadigan bugungi ko'p qurilma dunyosida bu ajralish uzoq muddatli muvaffaqiyat va veb-sahifani boshqarish uchun juda muhimdir.