Muallifdan: ushbu blog o'quvchilariga xush kelibsiz. HTML-dagi shriftning o'lchami, uning rangi bilan birga, matnning asosiy xarakteristikalari bo'lib, ular ma'lumotni idrok etishga va natijada saytning foydalanuvchilar uchun qulayligiga katta ta'sir ko'rsatadi. Ushbu maqola HTML formatidagi shrift hajmini qanday o'rnatish haqida.

Matnning o'lchamini qanday to'g'ri o'zgartirish kerak

Gap shundaki, html shrift hajmini juda oz nazorat qiladi. Masalan, unda kichik va katta teglar mavjud. Ular sizga sahifadagi oddiy matnga nisbatan biroz kattaroq yoki kichikroq hajmdagi matnni namoyish qilish imkonini beradi. Ammo bunday imkoniyatlar kam, chunki tarkib biroz ozgina o'zgaradi va umuman bunday teglardan foydalanish eskirgan.

Shunday qilib, HTML formatidagi shrift hajmini qanday qilib to'g'ri oshirish mumkin? Albatta bilan cSS-dan foydalanish... Va nafaqat oshirish, balki kamaytirish ham kerak, chunki bu ham zarur.

Masalan, sahifadagi ahamiyatsiz so'zlar, masalan, sahifaning nashr etilgan sanasi yoki boshqa mulkiy ma'lumotlar, odatda uni iloji boricha kichikroq qilishga harakat qiladi. Bunday matn uchun siz shriftni asosiy matndan kichikroq belgilashingiz mumkin.

Boshqa tomondan, sarlavhalar asosiy tarkibdan kamida 2-3 baravar katta bo'lishi kerak. Bundan tashqari, pastki sarlavhalarni to'g'ri ko'rsatish haqida g'amxo'rlik qilishingiz kerak. Bu erda qoida quyidagicha: hech qanday holatda h3 ning o'lchami h2 dan kattaroq bo'lmasligi kerak.

Tarkibning o'zida, qoida tariqasida, e'tiborni jalb qilish uchun harflarning ko'payishini ishlatmaslik kerak. Ularni qandaydir fon bilan ta'kidlash, kursiv yoki qalin turini berish yaxshiroqdir, bunday tanlov juda ko'p yaxshiroq mos asosiy matn va uning idrokini yaxshilash. Xo'sh, yaxshi, bu bir oz nazariya edi, lekin endi keling, fikrga to'xtalamiz.

CSS-dan foydalanish

Bizga shrift o'lchamidagi xususiyat kerak. Bu harflarning o'lchamlarini turli birliklarda belgilashga imkon beradi. Saytni qurishda piksellar va nisbiy birliklar ko'pincha belgilanadi, ammo barcha variantlarni batafsil ko'rib chiqamiz.

Kalit so'zlar. CSS-da ushbu xususiyat uchun qiymatni yozishingiz mumkin kalit so'zlar kichikroq va kattaroq, bu shriftni asosiy elementga nisbatan kichikroq va kattaroq qiladi. Aytishimiz mumkinki, effekt kichik va katta teglardan foydalanishga o'xshash bo'ladi.

Kalit so'zlardan foydalangan holda mutlaq o'lcham. Ushbu xususiyatning yana bir guruh tugmachalari - xx-kichik, x-kichkina, kichik, o'rta, katta, x-katta va xx-katta - mutlaq qiymatni belgilashga imkon beradi. Aslida, uni piksel bilan aniq hisoblashning iloji bo'lmaydi, chunki ko'p narsa brauzer sozlamalariga bog'liq bo'ladi. Ishonch bilan aytish mumkinki, bunday qiymatlardan foydalanish saytni o'zaro brauzerga aylantirmaydi.

Birliklardan foydalangan holda mutlaq o'lcham. Ko'pincha shrift piksellarda (px) ko'rsatilgan. Umuman olganda, bu yaxshi qaror, lekin ehtimol siz turli o'lchamdagi harflar hajmini biroz o'zgartirishingiz kerak bo'ladi. Masalan, shriftni keng ekranlarda kattalashtiring. Buni sezgir dizaynni amalga oshiradigan media-so'rovlar yordamida amalga oshirish mumkin.

Nisbatan kattalik. Do'stona tarzda, nisbiy variant ko'rib chiqiladi eng yaxshi usul shrift hajmini html-da belgilang, chunki u har qanday qurilmada mukammal o'qish va yaxshi matnni namoyish etishga imkon beradi.

Nisbatan kattalik odatda em va foizlar yordamida ko'rsatiladi. Em - bu asosiy elementning shrift balandligi. Masalan, siz o'rnatishingiz mumkin:

tanasi (shrift hajmi: 12px;) a (shrift hajmi: 1.2em;) h1 (shrift hajmi: 2.8em;) jadval td (shrift hajmi: 0.9em;)

Shunday qilib, faqat bitta absolyut qiymatni belgilash orqali qolganlari nisbatan yozilishi mumkin. Shunday qilib, birinchi darajadagi sarlavhalar sahifadagi oddiy matndan 2,8 baravar yuqori bo'ladi, havolalar biroz kattaroq bo'ladi va jadval hujayralaridagi matn, aksincha, kichikroq bo'ladi.

Buning foydasi nimada? Agar shrift brauzerda to'satdan o'zgargan bo'lsa, unda barcha elementlar mutanosib ravishda o'zgaradi va sizning maketingizda biror narsa buzilish xavfi bo'lmaydi. Bundan tashqari, nisbiy hajmni foiz sifatida yozishingiz mumkin. Bu erda hammasi oddiy - 100% - bu asosiy elementning shrift hajmi. Shunga ko'ra, agar xatboshi hajmi 120% bo'lsa, paragrafdagi tirnoqlari - 150%.

Matn tarkibiga ta'sir qiluvchi boshqa omillar

Asosan, albatta, shrift o'lchamlari yordamida shriftlarning o'lchamlarini aniq belgilashingiz mumkin, ammo uning hajmiga qandaydir ta'sir ko'rsatadigan yana bir nechta xususiyatlar mavjud. Ular haqida qisqacha:

Shrift varianti: kichik bosh harflar - bu qiymatga ega bo'lgan ushbu xususiyat barcha harflarni katta harflar bilan aks ettiradi, lekin odatdagidan biroz kamayadi. Bu nostandart xatti-harakatlar.

Matnni o'zgartirish: katta harf - bu xususiyatga ega bo'lgan barcha matnlar katta harflar bilan ko'rsatiladi, bu ularning hajmiga ta'sir qiladi.

Matnni o'zgartirish: kichik harf - aksincha holat, bunday matnda yo'q bo'ladi bosh harflar.

Shrift og'irligi: qalin - bu erda, menimcha, siz tushunasiz. Ushbu xususiyat matnni qalin qiladi va bu uslubda u biroz kattalashadi.

Harflar oralig'i: pikseldagi qiymat - bu parametr belgilar orasidagi masofani aniqlashga imkon beradi. Bu belgilarning o'lchamiga ta'sir qilmaydi, lekin matnning kengligini o'zgartiradi. Siz ijobiy va salbiy qiymatlarni yozishingiz mumkin.

Natija

Matndagi belgilar hajmini aniqlash uchun shrift kattaligi xususiyatidan foydalaning, uni mutlaq va nisbiy o'lchamlarga o'rnatish mumkin. Unga matnni u yoki bu tarzda o'zgartiradigan boshqa xususiyatlar ham bilvosita ta'sir qilishi mumkin. Shu munosabat bilan bugun siz bilan xayrlashaman va sayt qurilishida yangi ma'lumotlarni qidirishda blogimizga qarashni unutmang.

Menda tanadagi shrift hajmini 11px qilib qo'yganimda muammo bor, lekin jadvallar shriftni 16px-da aks ettiradi. Bunga nima sabab bo'lganini bilmayman - men CSS va chiqishni qayta-qayta takrorladim (sahifaga o'tishda manba). Jadval shriftining o'lchamini 11px ga aniq belgilash kerakli effektga ega, ammo men uni tanadan tashqari biron bir joyga o'rnatishga hojat yo'q.

Menda quyidagi CSS mavjud:

Tana (shrift oilasi: Verdana, Arial, Helvetica, sans-serif; shrift hajmi: 11px; margin: 0px; background-color: # E7D2B8; color: # 863F2B;) img.headerImg (width: 100%;). menyu chizig'i (float: chap; kenglik: 20%;). asosiy tarkib (float: chap; kenglik: 80%;) .clear (aniq: ikkalasi;) ul.menu (margin: 0px; margin-left: 10px padding: 0px; list-style: none;) ul.menu li (margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 10px;) div.footer (width: 60%; margin-left : 20%;) ul.footer-links (list style: none;) ul.footer-links li (float: left; padding: 20px;) ul.footer-links li: last (aniq: o'ng;) jadval ( kengligi: 100%; chegara qulashi: qulash;) td (vertikal-tekislash: tepa;)

Va chiqish quyidagicha ko'rinadi:

Jadvalda shrift hajmini 16 pikselga tenglashtiradigan hech narsa ko'rmayapman. Bu uchta bo'lim uchun ham sodir bo'ladi (thead, tfoot, tbody). Bundan tashqari, Netbeans 6.9 jadvalni to'g'ri formatlay olmaydi, ammo hujjatning qolgan qismi (oldin va keyin). Deyarli stolda biron bir noto'g'ri narsa bor, lekin men nimani ko'ra olmayapman. Bu Firefox va Opera-da sodir bo'ladi (eng ko'p so'nggi versiyalar ikkalasi ham). Men buni IEda sinab ko'rmadim, chunki u hech qachon IEda ishlatilmaydi.

Jadvalning o'lchamlari, uning balandligi va kengligi, hujayralar ichidagi narsalarga qarab avtomatik ravishda aniqlanadi. Hujayralarni to'ldirish qanchalik ko'p bo'lsa, jadval kattaroq bo'ladi va aksincha.

Biroq, CSS sizga kerakli kenglik va balandlik qiymatlarini aniq belgilab, HTML formatidagi jadval o'lchamlarini o'zgartirishga imkon beradi. Adolat uchun shuni ta'kidlash kerakki, jadval atributlari sizga kerakli o'lchamlarni o'rnatishga ham imkon beradi. Biroq, ichida bu lahza biz faqat CSS haqida gaplashamiz.

Shuni ta'kidlash kerakki, har bir jadval o'zining minimal kengligi va minimal balandligiga ega, bu tarkibga ta'sir qiladi. Va hatto kenglik va balandlik qiymatlarini kamroq o'rnatgan bo'lsangiz ham, hech narsa bo'lmaydi. Jadvalning yon tomonlari minimal darajadan oshmaydi.

Jadvalning kengligini ko'rsatish uchun CSS xususiyatidan foydalanish kerak kengligiva balandlikni belgilash uchun siz xususiyatni qo'llashingiz kerak balandlik.

Bir misolda, bu shunday ko'rinadi.

Jadval (kengligi: 500px; balandligi: 100px;)

Brauzerda natija:

To'liq kod:

Jadvalning kengligi va balandligi qiymatlari mutlaq qiymat sifatida (piksellarda), nisbiy qiymati esa foizda ko'rsatilishi mumkin. Masalan, mos ravishda 20px va 20%.

Jadvalning o'lchamlarini o'rnatish uchun foizlardan foydalansangiz, ular asosiy element o'lchamlari asosida hisoblanadi. Bizning misolimizda biz brauzer oynasi haqida gapiramiz.

Yana bitta ma'no bor - avtomatik. Va bu alohida, chunki u jadvalning kengligi va balandligini sukut bo'yicha avtomatik ravishda hisoblab chiqadi. Amalda ushbu qiymatni ko'rsatish shunday ko'rinadi.

Kenglik: avtomatik;

Balandligi: avtomatik;

Biz sizning e'tiboringizni shunday muhim nuqtaga qaratmoqchimiz. Balandlikni foizlarda ko'rsatmaslik yaxshiroqdir, chunki odatda bu holda ular ishlamaydi.

Alohida kataklar va ustunlar hajmini belgilash

Agar brauzer kataklarning tarkibidan boshlab ustunlar kengligini noto'g'ri o'rnatgan deb hisoblasangiz, unda katakchalar va ustunlar o'lchamlarini o'zingiz belgilash huquqiga egasiz. Va endi HTML jadvalidagi katakchaning o'lchamini qanday o'zgartirish haqida gaplashamiz.

Hujayraning o'lchamlarini o'zgartirish jadvalning o'lchamlari bilan bir xil CSS xususiyatlaridan foydalangan holda amalga oshiriladi, ya'ni: kengligi va balandlik.

Hujayralarga uslublarni qo'shish uchun siz ikkita variantdan birini ishlatishingiz mumkin:

1. Hujayralarga alohida sinf nomlarini bering. Bu shunday bo'ladi: class \u003d "cell-50px"

   Va bundan keyin siz ushbu sinflar uchun uslublarni qo'llashingiz kerak.

2. Xususiyatni chaqirish uslubiichida kerakli CSS-kodni yozish.

Amalda, ikkinchi variant quyidagicha ko'rinadi:

...

Ammo shuni ta'kidlashni istaymizki, hujayralar hajmini alohida-alohida o'zgartirish juda zarur emas. Odatda, bu jadval ustunlarining ma'lum bir kengligini o'rnatish kerak bo'lgan holatlarda amalga oshiriladi. Bunday holda, muammoni hal qilish osonroq. Birinchi qatorda kataklarning kengligini ko'rsatishingiz kerak.

Brauzerda natija:

Jadvaldagi shrift hajmini qanday o'zgartirish mumkin

Jadvalda ko'pincha matn hajmini o'zgartirishga ehtiyoj bor. Masalan, sarlavha hujayralarida. Buni CSS xususiyati yordamida amalga oshirish mumkin shrift hajmi... Elementlar uchun shrift hajmini belgilaymiz :

Th (shrift hajmi: 30px;)

Shu bilan ushbu dars yakunlanadi. Uy vazifangizni yaxshilab o'ylab ko'rishingizni tavsiya qilaman. Buni juda diqqat bilan o'rganing va taxmin qiling. Barcha ezgu tilaklarni tilayman!

Ko'rinib turibdiki, nima uchun HTML teglarini matn uchun bilish kerak, agar hozir deyarli har qanday administrator panelida ularni avtomatik ravishda o'rnatadigan qulay bo'lsa?

Haqiqat shundaki, veb-saytdagi tarkibni formatlash ishlashdan tubdan farq qiladi ofis dasturlari... Faqatgina matnga jozibali ko'rinish berishning o'zi etarli emas, chunki nafaqat veb-sahifani namoyish qilish, balki uni qidiruv tizimlarida targ'ib qilish ham to'g'ri dizaynga bog'liq.

HTML teglari va atributlari: sintaksis asoslari

Har qanday matnda mavjud yashirin kod, bu kompyuterga ekranda nimani va qanday ko'rsatishni "tushuntiradi". Barcha ma'lumotlar universal elementlar to'plami yordamida qayd etiladi.

Asosan, matn uchun HTML teglar sahifaga blok qo'shadigan yoki o'zgartiradigan buyruqlardir. tashqi ko'rinish... To'g'ri yozuv formati quyidagicha:

Iltimos, barcha teglar birlashtirilmaganligini unutmang. Masalan,
(chiziq o'tkazib yuborish) yoki

Nima uchun Word va boshqa dasturlardan maqolalarni sayt muharririga ko'chira olmaysiz

Zamonaviy bo'lsa-da ofis dasturlari matn uchun bir xil HTML teglardan foydalaning, 99% hollarda mahalliy kod veb-sahifalar uchun yaroqsiz. Hujjat dasturning o'zida odatiy ko'rinishda bo'lsa ham, saytga kiritilganda formatlash yo'qolishi mumkin. Bundan tashqari, keraksiz teglar va atributlarning ko'pligi sababli qidiruv tizimlari sahifa tarkibini etarlicha tahlil qila olmaydi. Bu, o'z navbatida, sizning resursingizni targ'ib qilishni qiyinlashtiradi.

Toza va tegishli kodni olish uchun avval oddiy muharrir tomonidan yaratilgan HTML teglarining matnini tozalash kerak. Buning bir necha yo'li mavjud:

1. Maqolani "Bloknot" orqali "ishga tushiring" va shundan keyingina saytga joylashtiring. Ilova barcha HTML-larni o'chirib tashlaydi, shu sababli matnni qayta formatlashingiz kerak (muharrir vositalaridan foydalangan holda yoki qo'lda).
2. LiveWriter orqali maqolalar yozing va nashr eting. Ommabop blog muharriri darhol to'g'ri kodni yaratadi. Va alohida yorliqda saytdagi matn qanday ko'rinishini ko'rishingiz mumkin.
3. HTML Cleaner-dan foydalaning. Ushbu onlayn xizmat butun kodni yo'q qilmaydi, faqat qo'shimcha qismlarni. Filtrlar qaysi teglarni saqlashni tanlashga imkon beradi. Kodga allaqachon optimallashtirilgan buyruqlarni qo'shadigan kuchli vizual formatlash muharriri ham mavjud.

Paragraflar

Ushbu element deyarli barcha maqolalarda mavjud. Har bir paragraf bunday konteyner ichida joylashgan bo'lishi kerak - bu formatlashni soddalashtiradi va saytning barcha sahifalarida izchil uslubni saqlashga imkon beradi. Qulaylik uchun yorliq

Har doim bilan yozing yangi qator.

Hizalama

"Matnni tekislash" alohida HTML yorlig'i endi ishlatilmaydi. Buning o'rniga umumiy ALIGN atributi yaratildi. Matn blokining sahifadagi o'rnini o'zgartirish uchun siz uchta qiymatdan birini tanlashingiz kerak - MARKAZI, O'ng yoki chap. Xuddi shunday, siz boshqa elementlar uchun hizalamani o'rnatishingiz mumkin - masalan, sarlavhalar.

Ba'zi holatlarda hizalamak uchun boshqa teglar ishlatiladi, masalan, element yordamida joylashishingiz mumkin

Sarlavhalar va pastki sarlavhalar

Sub-sarlavha tizimi sizning tarkibingiz uchun mantiqiy tuzilmani yaratishga imkon beradi. Matnni semantik bloklarga ajratganda o'quvchi diqqatini jamlashi va o'zlashtirishi ancha osonlashadi yangi ma'lumotlar... Qidiruv tizimlar sahifalarni qaysi so'rovlarda targ'ib qilish kerakligini tushunish uchun sarlavhalarni tahlil qiladi. Shuning uchun SEO mutaxassislari ularda tematik kalitlardan foydalanishni maslahat berishadi.

HTML-da oltita pastki sarlavha ishlatiladi - dan

oldin

... Ushbu tizimda aniq bir ierarxiya mavjud:

• ...

  ... Asosiy maqola, Internet-do'kondagi mahsulot va boshqalar). Matnda faqat bittasi bo'lishi mumkin

  ... Odatda, u asosiy kalit so'zni o'z ichiga oladi.

• ...

  ... Ikkinchi darajali pastki sarlavhalar matnni semantik bloklarga ajratadi. Masalan, agar siz noutbuklarni baholayotgan bo'lsangiz, bir nechtasini qilishingiz mumkin

  turli xil modellarning nomlari bilan.

• ...

  ... Uchinchi daraja, agar matn ikkalasi orasida bo'lsa kerak

  shuningdek, kichik bloklarga bo'linadi. Bizning misolimizda bu har bir model uchun baholash mezonlari bo'lishi mumkin - "Ishlash", "Xotira", "Video karta" va boshqalar.

• ,

  ,

  ... Amalda ular juda kam uchraydi. Ammo umumiy tamoyil bir xil - ular yuqori darajadagi pastki sarlavha blokida "joylashtirilgan" bo'lishi kerak.

To'g'ri iyerarxiyani saqlaganingizga ishonch hosil qiling. Bizning misolimizga qaytsak, bu shuni anglatadiki, siz modellarning nomlarini darhol kiritolmaysiz

yoki

... Va bundan ham ko'proq, bir hil bloklar uchun turli darajadagi pastki sarlavhalardan foydalaning (masalan, reytingda oxirgi o'rinni egallagan noutbukni ajratib ko'rsatish.

).

Va bu erda HTML-da to'g'ri sarlavha tuzilishini bir zumda tushunishga va eslashga yordam beradigan diagramma mavjud.

Ro'yxatlar

Har qanday sanoq va ko'rsatmalar ro'yxat shaklida, matn uchun maxsus HTML teglardan foydalangan holda yaxshiroq bajariladi ( odatdagi xato - faqat bir nechta xatboshilar

Qaysi chiziq yoki raqam bilan boshlanadi).

Bunday bloklarning tuzilishi juda oddiy. Birinchidan, biz ro'yxat turini aniqlaymiz - o'q yoki raqamlangan.

Barcha elementlar ochilish va yopish teglari orasida. Ro'yxatdagi har bir element yangi satrdan boshlanadi va formatga ega. Elementlar soni cheklanmagan.

Tanlov va uning xususiyatlari

Ushbu shrift va uning rangi yordamida nimani o'zgartirish mumkin - va CSS-ga yangi sinflar qo'shmasdan. Bu faqat bitta jumla yoki fragmentni tanlash kerak bo'lganda juda qulaydir.

bir nechta xususiyatlarga ega:

• Yuz... Matn shriftini o'zgartirishga imkon beradi. Siz vergul bilan ajratilgan bir nechta variantlarni ro'yxatlashingiz mumkin (Tahoma, Verdana). Agar foydalanuvchida birinchi shrift o'rnatilmagan bo'lsa, tizim shunchaki alternativadan foydalanadi.
• Hajmi... Matnni kattalashtirish yoki kamaytirish uchun tirnoqlarga 1 dan 7 gacha bo'lgan qiymatni kiriting.
• Rang... Dizaynga qarab siz standart soyalardan birini (qizil, yashil, ko'k) tanlashingiz yoki xohlagan rangingiz uchun kod kiritishingiz mumkin.

Bilan formatlangan xatboshilardan foydalanmang , pastki sarlavhalar o'rniga. To'g'ri yorliq bilan bir xil uslub parametrlarini o'rnatish yaxshiroqdir.

Matnni tanlash usullari

Monoton matn, hatto paragraflar bilan ham charchatadi. E'tiborni jalb qilish va o'quvchining qiziqishini oshirish uchun, asosiy fikrlar uni grafik jihatdan ajratib ko'rsatish tavsiya etiladi. Ushbu vazifani bajarishda sizga yordam beradigan ba'zi buyruqlar.

... ... Juda mashhur HTML yorlig'i. Jasoratli matn darhol ko'zni tortadi, shuning uchun uni muhim tezislar va faktlarni ta'kidlash uchun ishlatish qulay.

Ko'pchilik teglarni chalkashtirib yuborishadi va ... Vizual farq yo'q, lekin ular turli yo'llar bilan ishlaydi. Birinchisi shunchaki matn ko'rinishini o'zgartirsa, ikkinchisi "indeks" vazifasini bajaradi va eng muhim bo'laklarni ajratib ko'rsatadi (SEO uchun tematik kalit so'zlar va iboralar).

... ... Elegant va qat'iy kursiv ilmiy atamalarni, chet tilidagi so'zlarni va turli xil takliflarni formatlash uchun juda mos keladi. Jiddiy nashrlarda badiiy asarlarning sarlavhalari ham egri matn bilan belgilanadi.

... ... Ehtimol, bitta HTML yorlig'i bu qadar ko'p tortishuvlarga sabab bo'lmagandir. Chizilgan matn kamdan kam qo'llaniladi, chunki bu yerga ta'kidlash tarixiy ravishda ko'priklar bilan bog'langan. Agar siz foydalansangiz maqolalarda, bu faqat qisqa qismlarga mos kelishini unutmang - 1 qatordan oshmasligi kerak.

... ... Reklamada uning qismini juda dolzarb qilishiga imkon beradigan qiziqarli yorliq - masalan, eski va yangi narxlar o'rtasidagi farqni ta'kidlash.

... ... Shrift hajmini qo'shimcha parametrlarsiz oshirishning eng oson usuli.

... ... Oldingi teg bilan bir xil tarzda ishlaydi. Ichida joylashgan matn asosiyga nisbatan qisqartiriladi.

^... ... Ushbu format uchun to'g'ri nom yuqori belgidir. Asosan ushbu yorliq matematik darajalar va izohlarga mo'ljallangan. U shrift hajmini pasaytiradi va tanlangan matnni yuqoriga siljitadi.

_... ... Subscript ko'pincha turli formulalarda uchraydi. Tanlov asosiy matn ostida joylashgan.

Sense idishlari

Ba'zi bloklar ko'plab matnlarda topilganligi sababli, ular uchun maxsus teglar yaratishni boshladilar. Bu formatlashni soddalashtiradi, chunki tarkibning har bir turi o'ziga xos uslublar to'plamiga ega bo'lsa, matn qismini tanlash va unda qanday ma'lumot borligini ko'rsatish kifoya.

... ... Kompyuter kodlarini qo'shish uchun teg. Maqolalarni dasturlashda misollar bilan ajralmas - buyruqlar bajarilmaydi, ammo oddiy matn sifatida ko'rsatiladi.

... ... Iqtiboslar uchun mo'ljallangan - masalan, intervyulardan asosiy parchalar.

... Matnning bir qismini alohida blokga etkazib beradi. Odatiy bo'lib, tanlov chap tomonda kattaroq chegaraga ega, ammo CSS-da siz matn hajmini, uslubini va rangini o'zgartirishingiz mumkin.

... Havolalarni o'z ichiga olgan muallif haqidagi ma'lumotlarni o'z ichiga olgan qo'shimcha yorliq.

Ajratuvchi chiziq

---

Oddiy chiziq yordamida katta qismning mantiqiy tugashini belgilash mumkin.

---

juftlangan teglarga taalluqli emas. Bu shuni anglatadiki, yopilish formati elementi kerak emas.

WIDTH atributidan foydalanib, mos o'lchamni pikselga yoki deraza kengligining foiziga o'rnatib, ajratgichni qisqartirishingiz mumkin.

HTML-matningizni oqilona formatlash uchun teglardan qanday foydalanishni o'rganib, siz nafaqat maqolalaringizni o'qishni osonlashtirasiz, balki SEO-ni takomillashtirasiz.

Albatta, siz ba'zi saytlarda sichqonchaning o'ng tugmasi taqiqlanganligini ko'rgansiz. Bu xususiyat birinchi navbatda sizning tarkibingizni o'g'irlamoqchi bo'lganlarga qarshi kurashadi. Ushbu chora sizni o'g'irlikdan emas, balki qo'lda nusxalashdan to'liq himoya qiladi. Boshqa variantlar.
O'z blogingizda nusxalash uchun mo'ljallangan materialni joylashtirsangiz, sichqonchaning o'ng tugmachasini o'chirishni tavsiya etmayman. Bu kodlar, skriptlar, retseptlar, ma'lumotnomalar va boshqalar bo'lishi mumkin. Bunday holda nusxa ko'chirish sizdan tashrif buyuruvchilarni chetlab o'tmaydi va sizning blogingiz tashrif buyuruvchilar uchun unchalik foydali bo'lmaydi. Agar siz plagiatdan himoya siz uchun muhim bo'lsa, unda nusxaning oxirida url-ni qo'shganingiz ma'qul. Shunda amin bo'lasizki, agar kimdir sizdan nusxa ko'chirilgan Internetda boshqa joyda nashr etmoqchi bo'lsa, u holda nusxa ko'chirish sizning blogingizga havola bilan bo'lishishi mumkin.
Ushbu retsept har qanday veb-sayt uchun ishlaydi. Kodni blogingizning barcha sahifalariga joylashtirishingiz kerak:

IN Blogger kodni Dizayn yorlig'idagi HTML / Javascript gadjetiga qo'shing. Agar siz blogingizdagi so'nggi mavzulardan birini ishlatayotgan bo'lsangiz (Emporio, Contempo, Soho, Notable), unda vidjet ko'rinishini faollashtirishni unutmang ("Hamma uchun ko'rinadigan" yonidagi katakchani, "HTML / JavaScript" vidjetini ko'rsatish ").
Yoqilgan Wordpress kodni "Matn" vidjetiga qo'shing.

Muallif: Ivanova Natalya

2019-03-03

Bayram keladi - Xalqaro xotin-qizlar kuni. Keling, bunga oldindan tayyorlanamiz. Siz qizlarni va ayollarni quyida muhokama qilinadigan postcartalar xizmatlaridan foydalangan holda o'ziga xos tarzda tabriklashingiz mumkin.

Siz foydalangan xizmatlardan foydalanishingiz mumkin.

Pochta kartalari xizmatlari

Onlaynda 8 mart pochta kartasini yarating

Noldan boshlab postkartani yaratish uchun quyidagi xizmatlardan foydalaning.

1. Canva taniqli funktsional foto muharriri. Bu erda ko'plab shablonlarni topasiz. Ro'yxatdan o'tish talab qilinadi.
2. Printclick Agar sizda o'zingizning biznesingiz bo'lsa, unda siz o'zingizning kompaniyangiz logotipi va kontaktlari bilan postcartalar to'plamiga buyurtma berishingiz mumkin. Siz princlick postcart generatoridan foydalanishingiz mumkin. Ajoyib reklama va arzon.
3. Crello - bu ro'yxatdan o'tishni talab qiladigan muharrir. Xavotir olmang ingliz tilida, sozlamalarda siz rus tiliga o'tishingiz mumkin.
4. Onlayn postkarta yaxshi rivojlangan tasavvurga ega bo'lganlar uchundir, chunki siz noldan postkartani yaratishingiz kerak bo'ladi.
5. Mumotiki - tayyorlang chiroyli rasm, va bu erga tabrik matnini qo'shishingiz mumkin. Aytgancha, agar siz rasmga faqat matn qo'shishingiz kerak bo'lsa, unda siz o'qishingiz mumkin.

Umid qilamanki, ushbu generatorlardan birini ishlatib, siz o'zingizni ayollarni 8 mart bilan munosib tabriklashingiz mumkin!

Muallif: Ivanova Natalya

2019-02-17

Maqolaning mazmuni:

Google Plus yopilmoqda

Platforma Google plus ishlab chiquvchilarning umidlarini qondirmadi va 2019 yil 2 aprelda butunlay olib tashlanadi. U bilan bog'liq albomlar u bilan yo'qoladi. Google fotosuratlari, Google Plus hisob qaydnomasi bo'lgan saytlarda avtorizatsiya mavjud bo'lmaydi. 4 fevraldan boshlab Google Plus profillari, kanallari va sahifalarini yaratish funktsiyasi mavjud emas. Agar sizning hisobingizda qimmatli tarkib bo'lsa, uni yuklab olishingiz mumkin zaxira nusxasi.
O'zgarishlarning aksariyati Blogspot-da blog yuritadigan bloggerlarga ta'sir qiladi. Ba'zi G + vidjetlari, G + izohlari va Google + profillari endi mavjud bo'lmaydi. Bu haqda Blogger administrator panelidagi bildirishnomada aytilgan:

Ishni tugatish to'g'risida e'lon qilinganidan keyin Google API+, 2019 yil mart oyiga mo'ljallangan, 4 fevralda Bloggerning Google+ integratsiyasiga bir qator o'zgarishlar kiritiladi.
Google+ vidjetlari.Blog dizaynlari endi +1 tugmasi, Google+ izdoshlari va Google+ ikonka vidjetlarini qo'llab-quvvatlamaydi. Ushbu vidjetlarning barcha nusxalari sizning blogingizdan o'chiriladi.
+1 tugmalari.+1 va G + tugmachalari va blogdagi postlar ostidagi va navigatsiya panelidagi Google+ havolalari o'chiriladi.
Iltimos, shuni yodda tutingki, agar siz maxsus shablonni ishlatsangiz google funktsiyalari+, uni o'zgartirish kerak bo'lishi mumkin. Yo'l-yo'riq olish uchun sizga ushbu shablonni taqdim etgan shaxs bilan bog'laning.
Google+ sharhlari.Google+ yordamida sharhlarni qo'llab-quvvatlash to'xtatiladi va ushbu xususiyatdan foydalanadigan barcha bloglar uchun standart Blogger sharhlari tiklanadi. Afsuski, Google+ orqali joylashtirilgan sharhlar Blogger-ga o'tkazib yuborilmaydi, shuning uchun ular endi blogingizda ko'rinmaydi.

Google Plus sharhlarini o'chirib tashlang

Afsuski, tizimda e'lon qilingan sharhlar butunlay o'chiriladi. Siz faqat bitta vositadan foydalanishingiz mumkin https://takeout.google.comGoogle + sharhlarini zaxira nusxasini kompyuteringizga aytib berish. Buning uchun faqat bootloader ta'minlanmagan va siz sharhlarni qo'lda faqat egri shaklda tiklashingiz mumkin. O'z vaqtida o'z vaqtida kelganim yaxshi.

Google profilini Blogger profiliga qanday almashtirish mumkin

Agar siz Blogspot-da blog yuritayotgan bo'lsangiz, endi Google Plus-dan Blogger-ga o'tish tavsiya etiladi (o'sha paytda Google Plus-ga o'tganlar uchun). O'chirish paytida yuzaga kelishi mumkin bo'lgan kutilmagan vaziyatlarni oldini olish uchun buni hozirda qilishni maslahat beraman google hisoblari Bundan tashqari.

Blogger profilini qanday qaytarish mumkin

Blogger administratori sozlamalarida buni qilish oson:
Sozlamalar -\u003e Foydalanuvchi sozlamalari -\u003e Foydalanuvchi profili - bu erda Blogger-ni tanlang

O'zgarishlaringizni saqlang.

Ismingiz yoki taxallusingizga o'tishni tasdiqlang va kiriting.

Blogger profilingizga avatar yuklashni unutmang.

Google plus profilini qanday o'chirish mumkin

Agar siz G + profilidan butunlay voz kechishga qaror qilsangiz, google plus sahifangizga o'ting -\u003e Sozlamalar -\u003e sahifaning pastki qismiga o'ting -\u003e google plus hisobini o'chirib tashlang:

Muallif: Ivanova Natalya

Bugun men sizga CSS3 nima ekanligini, nima bilan iste'mol qilinishini, qaerdan qidirishni, qanday qilib to'g'ri tayinlashni aytib beraman. Sizni ogohlantiraman, o'zim aytaman, oddiy odamlar uchun soddalashtirilgan, buni ko'rib turibman + misollar. Shunday qilib, uzoqdan boshlaylik.
CSS - bu ob'ektning xususiyatlari yoziladigan uslub. Bu shuni anglatadiki, ular mavjud bo'lgan barcha dvigatellarda, agar siz ularni topa olmasangiz, u holda siz u erda ko'rinmaysiz yoki ular aslida yo'q ( qiyshiq sayt). Odatda uni qaerdan topishadi? Odatda bu sayt ildizi, style.css faylining nomi, garchi bu kengaytmali fayl uslub fayli bo'lsa, printsipial ravishda bu nom .css kengaytmasi kabi muhim emas.
Shuningdek, mening blogimni ko'ring.

Ularni qaerdan topish mumkin?

Fayl yo'li shablonda o'rtasida belgilanadi

" />

Blogspot biroz boshqacha, uslublar kodning o'zida, tegdan oldin yozilgan o'rtasida

bu erda uslublar

Uslublar qanday ko'rinishga ega?

Misol keltiraylik:

#header (background: #fff; font-size: 13px; line-height: 1.5; font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; color: # 333;) .contacts ( pozitsiya: mutlaq; tepa: 20px; o'ng: 10px;)

sayt sarlavhasi

sayt muallifining aloqalari

Uslublarni istalgan saytda, faqat brauzerda ko'rishingiz mumkin. Endi ularni ushbu maqolada qanday ko'rinishini o'qish orqali osongina tanib olishingiz mumkin.
Ko'rib turganingizdek, uslublar har xil usulda yozilgan. Pound belgisi bilan boshlangan uslublar ma'lum bir blok identifikatoriga, nuqta bo'lgan uslublar ma'lum bir blok sinfiga mos keladi. Boshqa usul yo'q, uslublar ishlamaydi. Siz o'zingiz xohlagan nomlar haqida o'ylashingiz mumkin, asosiysi, ular html-da yozilgan id va sinfga mos keladi. Uslub xususiyatlari qavs ichiga olinishi kerak, so'ngra ikki nuqta ( yuqoridagi misolga qarang), parametr yoziladi va vergul bilan yopiladi. Oxirgi xususiyatda siz nuqta-vergul qo'yishingiz mumkin emas, faqat yopiladigan qavs.
CSS to'g'ridan-to'g'ri blokda yoziladi, uni alohida faylga chiqarmasdan:

sayt sarlavhasi

Blogspot-dagi CSS

Uslublarni boshqacha yozish mumkin, nima uchun keyinroq tushuntirib beraman. Kodni ochib, biz buni ko'rishimiz mumkin (uslublarni diqqat bilan ko'rib chiqing, shunda siz uslublarni belgilaydigan tanish bloglar teglarini ko'rasiz):

Ko'rib turganingizdek, uslubning xususiyati .H1 boshlig'i yuqorida alohida yozilgan. Qanday qilib mulkni tushunish va topish mumkin? juda oddiy, u shrift parametr mavjud header.font, biz nimani qidirmoqdamiz. Uni ".header h1 ″ uslubi uchun" Blog sarlavhasi "xususiyatlar guruhidan, 2" header.font "va" header.text.color "xususiyatlaridan toping. Shunday qilib, biz ularni o'zgartiramiz. Bu brauzer uslublarni tez o'qishi uchun qilingan, shuning uchun kamroq so'rovlar yuboriladi. Axir, mulk header.text.color boshqa joyda takrorlanishi mumkin. Quyida hali ham mavjud header.shadow.offset.left va boshqalar, ulardagi ma'no bir xil, men takrorlamayman.
Ular CSS-da (yoki uslublarda) qidirishni aytganda, biz blogspot-da teglar orasida qidiramiz
va odatda tegdan oldin
agar ular, albatta, html-da yozilmagan bo'lsa (yuqoridagi misol, bloklardagi uslublar). Boshqa sms-larda hamma narsa odatda .css kengaytmasi bilan alohida faylga joylashtiriladi

Muallif: Ivanova Natalya

2019-02-15

Ushbu so'nggi maqola sizga Blogspot shablonlaridan keraksiz havolalarni olib tashlash bo'yicha yangi ma'lumotlar va yangi Blogger mavzularini taqdim etish uchun yozilgan. Ma'lumki, 2018 yilda Blogger kodlarida o'zgarishlar yuz berdi, shuning uchun kod bilan ko'plab amallarni yangicha usulda bajarish kerak. Bundan tashqari, boshqacha shakllangan yangi mavzular paydo bo'ldi. Ushbu o'zgarishlar bilan bog'liq holda biz havolalarni o'chirish mavzusini tahlil qilamiz.
O'zingizning blogingizni https://pr-cy.ru/link_extractor/ va https://seolik.ru/links xizmatlarida tashqi havolalar uchun tekshirishingiz mumkin. Blogning nafaqat uy sahifasini, balki post (post) va sahifalarni (Sahifa) ham tekshirishni unutmang. Indekslash uchun ochilgan ko'plab tashqi havolalar taqiqlanadi.

Eski standart Blogger shablonidan havolalarni qanday o'chirish mumkin

Misol sifatida oddiy shablondan foydalanish.
Ushbu shablonlar eng ko'p kiruvchi havolalarni taqdim etadi. Sinov blogimda, oddiy mavzuni o'rnatayotganda, tekshirilganda, uy sahifasida 25 ta tashqi havola topildi, ulardan 14 tasi indekslangan.
Shablon kodiga o'zgartirish kiritmasdan oldin zaxira nusxasini oling!

1. Blogger-ga havolani olib tashlash - https://www.blogger.com/. Ushbu havola "Attribution" vidjetiga kiritilgan. Blog dizayni yorlig'ida u Attribution gadjeti va sifatida ko'rsatiladi. Uni olib tashlash uchun "Mavzu" yorlig'iga o'ting -\u003e HTML-ni o'zgartiring. Vidjetlarni qidirish (vidjetlar ro'yxati), biz Attribution1-ni topamiz va barcha kodlarni u joylashgan altbilgi bo'limi bilan birga o'chirib tashlaymiz. Yo'q qilish uchun yig'ilgan kod quyidagicha ko'rinadi:
   
   
   Va bu erda to'liq kod:
   

   
   
   
   
   
   
   

   
   
   
   
   

   
   
   
   
   

   O'zgarishlarni saqlaymiz va blogda Attribution-ni tekshiramiz.
2. O'z blogingizda vidjetni tez tahrirlash uchun "Kalit va tornavida" belgilarini ko'rgansiz. Har bir bunday belgi o'zi bilan Blogger-ga tashqi havolani olib boradi. Endi ular nofollow yorlig'i bilan yopilgan, ammo baribir ulardan qutulish kerak. Vidjetlarni Dizayn yorlig'ida tahrir qilasiz.
   Kalit ikonkalarida shifrlangan havolalarning to'liq bo'lmagan ro'yxati (blog identifikatori sizga tegishli bo'ladi)
   - HTML1 vidjeti: http://www.blogger.com/rearrange?blogID\u003d1490203873741752013&widgetType\u003dHTML&widgetId\u003dHTML1&action\u003deditWidget§ionId\u003dheader
   - HTML2 vidjeti http://www.blogger.com/rearrange?blogID\u003d1490203873741752013&widgetType\u003dHTML&widgetId\u003dHTML2&action\u003deditWidget§ionId\u003dheader
   - Blog arxivi: http://www.blogger.com/rearrange?blogID\u003d1490203873741752013&widgetType\u003dBlogArchive&widgetId\u003dBlogArchive1&action\u003deditWidget§ionId\u003dmain
   - Blog yorliqlari: http://www.blogger.com/rearrange?blogID\u003d1490203873741752013&widgetType\u003dLabel&widgetId\u003dLabel1&action\u003deditWidget§ionId\u003dmain
   - Ommabop xabarlar: http://www.blogger.com/rearrange?blogID\u003d1490203873741752013&widgetType\u003dPopularPosts&widgetId\u003dPopularPosts2&action\u003deditWidget§ionId\u003dmain
   Ushbu havolalarning barchasidan xalos bo'lish oson. Blogingiz shablonida tegni toping ... Bu sizning blogingizda vidjetlar qancha bo'lsa, shuncha marta paydo bo'ladi. Tegning barcha ko'rinishini olib tashlang .
3. Blog yozuvlarini tezkor tahrirlash uchun havolalarni olib tashlang (Qalam belgisi). Xabarlarni tahrir qilishni osonlashtiradi, ammo tashqi havola sifatida tahdid soladi: https://www.blogger.com/post-edit.g?blogID\u003d1490203873741752013&postID\u003d4979812525036427892&from\u003dpencil
   Qanday o'chirish mumkin:
   1-usul. Dizayn ko'rinishida "Blog yozuvlari" bandini tahrirlang va "Tez tahrirlash" ni belgilash katagiga belgi qo'ying.
   2-usul. blog shablonidagi yorliqni toping va uni olib tashlang. O'zgarishlarni saqlang va blogingizni belgi va havola uchun tekshiring.
4. Navbar-ni olib tashlang. Navbar1 blog HTML shablonidan vidjetlarni qidiring va bo'lim bilan birga barcha kodlarni olib tashlang.

   Aynan:
   

   
   
   
   

   
   
   
   
   
   

   Endi blogdagi Navbar indekslangan tashqi havolalarni taqdim etmaydi, ammo men bu funktsional yukni ko'tarmaydigan qo'shimcha element deb o'ylayman va uni olib tashlash yaxshiroqdir.
5. Rasmlarga tashqi havolalarni olib tashlang. Blog postiga rasmlarni yuklaganingizda, havola avtomatik ravishda ularga joylashtiriladi. Bunday havolalarni olib tashlash uchun barcha blog yozuvlarini tahrirlashingiz kerak. "Ko'rish" rejimida va undan keyin "Bog'lanish" belgisiga. Agar rasmda tashqi havola mavjud bo'lmasa, unda post muharriridagi fotosuratni bosganingizda, "Havola" belgisi faol emas (belgini ajratib ko'rsatish yo'q).
   
   
6. Blog muallifining profiliga havolani olib tashlang. Blog muallifini post ostidan olib tashlang. Buning uchun kodni toping to'g'ri va "true" ni "false" bilan almashtiring. Bu chiqadi yolg'on
7. Nofollow yorlig'i bilan indekslashdan "" vidjetidagi havolani yoping. Agar siz blogingizda profil vidjetidan foydalanayotgan bo'lsangiz, Profile1 gadjetining kodini topish uchun blog shablonida tez vidjet qidiruvidan foydalaning. Ikki joyda rel \u003d 'muallif' o'rniga rel \u003d 'nofollow' o'rnini bosgan vidjet kodini tahrirlashingiz va ikkita havolaga rel \u003d 'nofollow' qo'shishingiz kerak. Siz skrinshotga o'xshash narsani olishingiz kerak:

   
   Google Plus profilini tahrirlash misolida qilingan. Eslatib o'tamiz, Google Plus 2019 yil 2 aprelda bekor qilinadi. Shunga ko'ra, ushbu sanadan keyin siz "Men haqimda" vidjetining kodida boshqa o'zgarishlarni kiritishingiz kerak bo'ladi.

8. Sharh qoldirilgan har qanday blogspot post sahifasini tashqi havolalarini tekshiramiz. Blog shablonidagi kodni toping va o'chiring:
   
   Blog sozlamalarida Blog sozlamalari -\u003e Boshqalar -\u003e Saytlar tasmasi -\u003e Blog tasmasiga ruxsat berish yo'lida quyidagi sozlamalarni qo'llang:
   
   

Yangi standart Blogger shablonidan tashqi havolalarni olib tashlang

Namunali mavzudan misol sifatida foydalanish

1. Atributni olib tashlang (quyidagi havola - Blogger Technologies)
   Vidjet qidirish blogi shablonidan Attribution1-ni toping (vidjetlar ro'yxati) va eski Blogger shabloniga o'xshash bo'lim bilan birga kodni o'chirib tashlang (1-ga qarang).
2. Havolani suiiste'mol qilish to'g'risida xabar berish vidjetidan olib tashlang. Bu ReportAbuse1 vidjeti. Vidjetlar bo'yicha qidirishda topamiz:
   Barcha kod quyidagicha ko'rinadi:
   

   
   
   
   
   

3. Biz blog postlarini sharhlar bilan tekshiramiz va eski blog andozalari bilan o'xshashlik bilan havolalarni olib tashlaymiz (yuqoriga qarang - 8-band).
4. Post rasmlariga joylashtirilgan blog yozuvlaridan havolalarni olib tashlang (5-bandga qarang).

Muallif: Ivanova Natalya