Kako napraviti podebljane fontove u HTML-u. Kreiranje podebljanih i kurzivnih fontova pomoću CSS podebljanog fonta b
Pogledajmo sve načine na koje možete napraviti podebljani font koristeći html i CSS. Postoje dvije opcije:
- Preko html oznake I
- Kroz CSS svojstvo font-weight
Podebljani font putem html oznake I
Sav tekst je zatvoren u html tagovima i će biti debeo. Prva oznaka, koja se sastoji od neobičnog slova “b”, je skraćenica za englesku riječ “bold”.
Ne postoji vizualna razlika između ove dvije oznake. Među SEO optimizatorima postoji mišljenje da za tražilice ima veći uticaj kada želimo da istaknemo ključnu reč.
Regularni font. Podebljano preko b oznake
Običan tekst.
Konvertuje na stranici u
Regularni font. Podebljano preko b oznake
Običan tekst. Podebljani tekst preko jake oznake
Podebljani font preko svojstva CSS font-weight
CSS ima svojstvo font-weight, koje je odgovorno za debljinu slova.
CSS sintaksa težine fonta
font-weight: bold|bolder|lighter|normal|100..900;
- bold - podebljana vrijednost fonta (analogno 700)
- normalno (zadano) - normalna vrijednost fonta (400)
- bolder/lighter - font bi trebao biti veći/manji od nadređenog
- naslijediti - prihvatiti vrijednost pretka (roditelja)
U našem slučaju, za podebljanost fonta, potrebno je primijeniti bold svojstvo da bi se fontu dala „debljina“.
na primjer:
Текст со свойством font-weight: bold
Преобразуется на странице в
В текущей статье мы поговорим о том, как выделить текст курсивом HTML. Как и в случае с жирным текстом, курсивный текст можно сделать тремя способами:
- Тег i HTML;
- Тег em HTML;
- CSS-свойство font-style .
Рассмотрим все три варианта, как можно сделать курсив в HTML, обсудим тонкости этого вопроса и какие способы удобнее и правильнее использовать в тех или иных ситуациях.
Курсивный текст: тег
Тег i (italic), по аналогии с тегом b для жирного текста, служит для физического выделения курсивного текста (это означает, что изменяется только начертание текста). Применение тега i :
Конструктор сайтов "Нубекс"
Таким образом, нужная часть текста помещается между тегами .
Курсивный текст: тег
Хотя тег i остается валидным, с точки зрения оптимизации сайта лучше использовать тег em для выделения логически важных участков текста. Это означает, что поисковые роботы учитывают важность текста, помещенного между тегами :
Конструктор сайтов "Нубекс"
Результат:
Конструктор сайтов "Нубекс"
Но не стоит забывать, что текст, заключенный в теги i и em , хоть и отображаются практически одинаково (во всех современных браузерах), по своей сути являеются не совсем идентичными, как уже отмечалось выше. Поэтому использовать теги нужно по мере необходимости: тегом em HTML обрамлять важные участки текста, а визуальное курсивное оформление применять с помощью тега i или CSS-стилей. Рассмотрим теперь использование CSS-стилей для курсивного выделения текста.
Курсивный текст силами CSS
Для установления стилей отображения шрифтов в CSS применяется свойство font-style , которое может принимать значения: oblique (наклонный текст), italic (курсив) и normal (обычный шрифт).
Стоит помнить о том, что курсивный шрифт и наклонный , по своей сути, не являются одним и тем же. Курсив - это особый шрифт, который является аналогом рукописного текста, а наклонный формируется посредством наклона обычного шрифта вправо.
Применение атрибута font-style на практике:
Naše stranice su zaista ogroman korak u web razvoju.
Radimo to stvarno kvaliteta web stranice.
Ali morate imati na umu da neki pretraživači imaju tekst sa svojstvom font-style:oblique; ne može se tumačiti kao kurziv tekst, već kao kurziv tekst.
Nastavljamo da radimo sa fontovima iu ovoj lekciji ćemo pogledati kako postaviti svojstva koja daju fontu podebljan ili kurziv izgled. Prethodno smo već pogledali kako kreirajte podebljani ili kurziv font korišćenjem HTML oznake Ali kao što već znamo, HTML ne bi se trebao koristiti za dizajn dokumenta, namijenjen je samo za kreiranje oznake i strukture stranice, tako da sve mora biti formatirano kroz stilski list CSS. A sada pogledajmo kako su takva svojstva postavljena.
Kurziv font CSS
Svojstvo vam pomaže da formatirate tekst u kurzivu font-style: ; , kojoj je dodijeljena vrijednost kurziv , što je skraćenica za "Font Style - Italic".
Sada zamislimo da na stranici ima mnogo paragrafa i da neke od njih treba ispisati kurzivom. Ono što radimo je da kreiramo klasu za željeni pasus, a zatim navedemo da element sa tom klasom treba da bude kurziv.
HTML
Četvrti stav Četvrti stav Četvrti stav
Postavite svojstvo za kurziv font.
Ako ste kreirali takve pasuse i za njih postavili svojstvo, onda je tekst drugog pasusa postao kurziv. Postavili smo ovo svojstvo za ceo pasus, a sada da ga komplikujemo i postavimo kurziv samo za dve reči u četvrtom pasusu. Kako to učiniti? IN HTML U lekciji smo pogledali oznaku logičkog nivoa . Ova oznaka se koristi upravo u situacijama kada nekom dijelu elementa treba dodijeliti klasu. I tako smo ugradili oznaku u četvrti pasus i dodijelili joj klasu class="kurziv"> . Kao rezultat, dobijamo sljedeći unos:
HTML
Prvi paragraf Prvi paragraf Prvi paragraf Prvi paragraf
Drugi stav Drugi stav Drugi stav Drugi stav
Treći stav Treći stav Treći stav Treći stav
Četvrti stav Četvrti stav Četvrti stav
Peti stav Peti stav Peti stav Peti stav
Kurziv (font-style: italic; )
Sada su drugi pasus i dio četvrtog stava u kurzivu. IN demo ovo je jasno prikazano.
Podebljani CSS font
Da biste postavili podebljani font, koristite drugo svojstvo pod nazivom font-weight: ; drugim riječima, naziva se i težina fonta. U početku je zasićenje postavljeno na normalno odnosno zasićenost fonta je normalna, a postavljanjem vrijednosti bold poprimiće hrabar izgled.
Bold (font-weight:bold ; )
Također možete postaviti vrijednost zasićenja u brojevima od 100 to 900 u koracima 100 . Značenje normalno je ekvivalentno figuri 400 , i vrijednost bold figure 700 . Značenje 900 nije podržan od svih fontova, tako da ako postavite ovu vrijednost, možda nećete primijetiti razliku u odnosu na vrijednost 700 . Ovo stanje izgleda ovako:
Bold (font-weight:700 ; )
IN html kod učinite potpuno isto: ako trebate odabrati cijeli pasus, onda mu dajte novu klasu, ako dio teksta, onda koristite oznaku class="kurziv"> . Pogledajmo mali primjer:
HTML
Prvi paragraf Prvi paragraf Prvi paragraf Prvi paragraf
Drugi stav Drugi stav Drugi stav Drugi stav
Treći stav Treći stav Treći stav Treći stav
Četvrto stav četvrti stav četvrti stav
Peti stav Peti stav Peti stav Peti stav
Bold (font-weight: bold; )
Kao rezultat toga, podebljanim tekstom izdvojili smo dio četvrtog pasusa, gdje je istovremeno kurziv, i cijeli peti pasus. Ovo su još dva svojstva koja smo proučavali. Koriste se prilično često, pa je vrijedno zapamtiti da:
- Naveden je kurziv font: stil fonta: kurziv; .
- Postavljen je podebljani font: font-weight: bold; .
- Da vratite font na normalnu težinu, postavite vrijednost: font-weight: normalno; ili značenje font-weight: 400 ; , što u ovom slučaju znači isto.
Ovdje smo pogledali još dva svojstva fontova. Pogledaj unutra Demošta ste na kraju trebali dobiti, a mi prelazimo na proučavanje sljedećih svojstava.
Zdravo, dragi čitaoci bloga! Ovaj članak će govoriti o oznake za formatiranje teksta. Glavni primjeri uključuju podebljanje teksta ili kurziv. Također ćemo pogledati utjecaj nekih oznaka na internu optimizaciju web stranice i pravila za njihovo pisanje. O tome možete pročitati u datom članku. Usput, slične elemente dizajna teksta možete pronaći u mnogim uređivačima teksta, na primjer u Wordu.
Oznake su podijeljene u 2 tipa: blok i inline. Kada koristite prvi, možete promijeniti sadržaj dijela teksta (redovi, pojedinačni fragmenti ili riječi), a drugi su . Oznake za formatiranje koje ćemo pogledati u ovom članku prvenstveno su mala slova.
Pravila i redosled pisanja oznaka
Već znate šta su oznake za otvaranje i zatvaranje. Ako ne, onda pročitajte članak dat na samom početku ovog materijala. Ukratko, postoje dvije vrste oznaka: pojedinačne (na primjer, prijenos na nova linija) i kontejner (u paru). Dakle, sve oznake za formatiranje teksta jesu upareno. To znači da bilo koji element ima oznaku za otvaranje i zatvaranje, a između njih se mora staviti istaknuti element. na primjer, ispravan izbor fraza će izgledati ovako: Odabrani fragment
Kada pretraživač obradi ovaj fragment, vidjet ćete sljedeći tekst: Odabrani fragment. Usput, sve oznake se ne prikazuju u RSS feed-u ().
Glavna stvar prilikom pisanja oznaka je zapamtiti da ih zatvorite. U suprotnom će sav tekst na stranici biti istaknut podebljanim (u primjeru sa oznakom ). Ali postoje slučajevi kada morate istovremeno istaknuti određeni fragment i podebljanim i kurzivom. Ali ne postoji oznaka koja izvodi ovu radnju. Postoji samo jedan izlaz iz ove situacije: koristite dvije oznake u isto vrijeme. Nije bitno kojim redosledom ih koristite. Dakle, pisanje teksta sa ovakvim oznakama:
Odabrani fragment
ili ovako:
Odabrani fragment
I dalje ćete primati Odabrani fragment kurziv i podebljan u isto vrijeme. Međutim, bolje je koristiti prvu opciju, jer je u početku bila jedina i ispravna. Također, ne zaboravite da svaki pretraživač može različito obraditi oznake (), ovisno o postavkama. Sada pređimo na same oznake za formatiranje.
Podebljani i kurziv tekst - oznake , , I
Najpopularnije oznake za formatiranje teksta - isticanje bold I kurziv. Obično se koriste da daju važnost fragmentu. Prvi slučaj služi za odabir fragmenta koji sadrži korisne informacije ili ključne riječi. Kurziv služi istoj svrsi kao i podebljani tekst, ali su informacije manje važne jer je kurziv manje uočljiv u pozadini osnovnog teksta od podebljanog teksta.Hajde da prvo razmotrimo podebljavanje teksta. Za ovu radnju koriste se dvije oznake − I . Razlike u izgled br. Iako, s obzirom na to da svaki pretraživač može različito tumačiti svaki element, možda ćete moći vidjeti razlike. Ovako izgleda tekst u tagovima I u obliku koji je već obrađen u pretraživaču:
Tekst u tagovima jak
Tekst u b tagovima
A evo kako ova dva reda izgledaju u izvornom kodu stranice:
Tekst u tagovima jak Tekst u b tagovima
Istu situaciju možemo uočiti iu slučaju kurzivne oznake I . Pokušajte pronaći razlike između ova dva primjera:
Tekst u em tagovima
Tekst u tagovima I
Ali izvorni kod:
Tekst u em tagovima Tekst u tagovima I
Dakle, smatrane podebljane i italic oznake se zapravo ne razlikuju, ali zašto nam je onda potrebna, na primjer, oznaka ako postoji ? Uostalom, potonji sadrži samo jedan znak (ne računajući zagrade) i stoga ga je lakše pisati. A cela poenta je u tim oznakama I uticaj . Ako ključne riječi okružite ovim tagovima, to će imati blagotvoran učinak na promociju web stranice. Glavna stvar je ne pretjerivati - tekst bi trebao sadržavati najviše 5% podebljanog teksta u oznaci , i isto toliko kurziva u oznaci .
Ako samo želite da istaknete neku tačku u tekstu, onda koristite oznaku ili . Generalno, mislim da pretraživači takođe smatraju tekst u ovim tagovima važnijim, ali interna optimizacija oni i dalje imaju manji uticaj od I .
Oznake za isticanje teksta linijom - , I
Pogledajmo sada nekoliko oznaka koje koriste crticu u dizajnu teksta. Najpoznatiji vama uređivači teksta — tag
ili donja crta. Ovaj tag nema uticaja na rangiranje (koliko ja znam), ali isticanje nekog teksta i fokusiranje pažnje na njega će pomoći. Dao sam primjer korištenja ove oznake malo iznad. Još dvije oznake slične namjene - I . Oba imaju funkciju precrtavanja teksta. Ovu oznaku možete koristiti u bilo kojoj situaciji: ako ažurirate dokument (ili bolje rečeno, njegov dio), možete precrtati stari i dodati novi; ako ćete napisati nešto što odstupa od teme materijala; nešto što ne odgovara moralnim i etičkim standardima.
Razlike između ove dvije oznake su samo u njihovoj pisanje, zbog čega je poželjno koristiti prvi, jer prvo, zgodnije je pisati, a drugo, vaša stranica će sadržavati manje HTML koda, a pretraživači to vole.
Tag i atributi - parametri fonta teksta
Sada razmotrite oznaku koja se ne koristi bez atributa. Koristeći ga, možete postaviti parametre za određeni dio teksta. Općenito, sada je poželjno koristiti (kaskadne stilove), jer... koristeći ih možete uvelike smanjiti cijeli HTML kod stranice. Dakle, pogledajmo tu istu oznaku . Za njega sve postoji tri atributa:
- lice- sam font. Na primjer, Arial, Courier ili Verdana. Možete navesti nekoliko, jer nemaju svi korisnici opsežan skup fontova, a upisivanjem nekoliko u atribut face, pretraživač će moći da odabere koji će koristiti, odnosno koji je prisutan u sistemu;
- veličina— atribut koji označava veličinu teksta. Može se izraziti iu konvencionalnim jedinicama i u pikselima;
- boja— boja teksta. Ovaj atribut se može koristiti i u HTML kodovima boja i u wordovima. Prvi imaju oblik #FFFFFF (gdje je F bilo koji broj ili slovo od A do F), a drugi su napisani jednostavnim riječima(na primjer, crveno - crveno).
Ovako izgleda tekst u tag-u koristeći svaki atribut:
Ovaj tekst je 6px
Ovaj tekst je crvene boje Ovaj tekst je u fontu Arial Ovaj tekst je crvene boje i veličine 5pxA ovo je ono što ćete vidjeti nakon obrade napisanog koda: 
Elementi dizajna teksta blokova - naslovi -, stav
, stav
Na kraju ćemo pogledati blok elemente, koji se koriste u gotovo svakom dokumentu. Ovo su oznake naslova i paragrafa. Razmotrimo prvo. Postoji 6 vrsta naslova i svaki ima svoju oznaku. Svaki tip ima samo svoj serijski broj i bilježi se pomoću oznaka
, ,..., . Evo kako izgledaju sva zaglavlja kada se obrađuju:
. Evo kako izgledaju sva zaglavlja kada se obrađuju:
Broj iza naslova riječi odgovara broju u oznaci
Sada razgovarajmo o oznaci za isticanje pasusa
Funkcija ove oznake je da odvoji tekst između drugog identičnog teksta i praznog reda. Ako pogledate izvorni kod dokumenta, možete vidjeti sljedeće:
Zeleni pravokutnici sadrže jedan pasus, crveni pravokutnici drugi. A evo kako izgleda ovaj kod nakon obrade od strane pretraživača (strelica pokazuje na prazan red):
Kao rezultat toga, dobijamo prilično uočljivo odvajanje jednog pasusa od drugog, što je korisno - čitanje postaje praktičnije.
Ovo je kraj članka o oznake za formatiranje dokumenata. Ima ih mnogo više nego što sam opisao u ovom materijalu. Samo o nekima od njih treba puno reći, zbog čega će im biti posvećeni zasebni članci s punim pregledom!
U HTML-u, podebljani tekst se može napraviti na nekoliko načina. To uključuje:
- Tag b;
- Tag jaka;
- CSS svojstvo font-weight.
Razgovarajmo o svakoj od opcija odabira teksta redom.
Podebljani tekst: oznaka
Tag b HTML se primjenjuje ovako:
Kreator web stranica "Nubex"
Za oznaku mora imati zatvaranje, i ima pristup univerzalnim atributima (kao što je klasa, id, naslov itd.)
Iako valjanost oznake b i nije osuđen HTML specifikacijom, oznaka je relevantnija za upotrebu jaka, hajde da shvatimo zašto.
Podebljani tekst: oznaka
Prema HTML specifikaciji, tag b služi za isticanje teksta podebljanog. Nasuprot tome, oznaka jaka HTML se koristi za isticanje važno frah, riječi koje su ključne za ovu stranicu.
Ova oznaka je od velike važnosti pri rangiranju stranica u rezultati pretrage Stoga se široko koristi u promociji web stranica i SEO optimizaciji. Pretraživači uzimaju u obzir tekst zatvoren u tagove , i označite ga kao važno.
Oznaka korištena jaka na sličan način:
Kreator web stranica "Nubex"
Možda ćete primijetiti da vanjska primjena oznaka I se uopšte ne razlikuje (pošto ih svi moderni pretraživači tumače skoro isto), ali semantičke razlike u kodu za pretraživače i dalje postoje. Stoga većina SEO optimizatora preporučuje korištenje oznake jaka.
Podebljani tekst koristeći CSS
Već smo primijetili važnost oznake jaka tokom promocije na pretraživačima, ali šta učiniti ako trebate istaknuti veliki broj Da li je tekst podebljan (ali tekst ne mora biti označen kao važan za pretraživače), ili je potrebno kontrolisati stepen „podebljanosti“ fonta? U takvim slučajevima koristi se CSS svojstvo font-weight. Primjenjuje se na sljedeći način:
Naše stranice su zaista ogroman korak u web razvoju.
Radimo to stvarno kvaliteta web stranice.
Vjerujte nam i mi ćemo vam pomoći nećemo vas izneveriti.
Vrijednosti smelije I upaljač Možete podesiti nivo masti da bude veći (ili manji) od roditeljskog. Numerička vrijednost(100-900) možete podesiti stepen sadržaja masti.
-
17. aprila 2015Telefon traži lozinku kada je uključen -
17. aprila 2015Odakle su zvali - kako saznati? -
17. aprila 2015Kako besplatno preuzeti Amigo pretraživač?
