Kako umetnuti tekst u HTML stranica? U tu svrhu postoje posebne HTML oznake za tekst.

U HTML-u postoji šest razina naslova. Dodaju se pomoću oznaka

-

. pri čemu

Ovo je naslov prve razine, najveći je.

Primjer izrade zaglavlja:

Naslovi ni na koji način ne ovise jedan o drugom. Možete dodati naslov bilo koje razine gdje god vam je potreban.

Početnici ponekad ne mogu shvatiti koliko naslova prve razine može biti na stranici. Na internetu sam više puta naišao na nepotpune i nepouzdane informacije o ovoj temi. Stoga sam odlučio detaljno razmotriti ovo pitanje.

Broj oznaka po radnoj stranici

nema nikakvog efekta. Možete ih dodati koliko god želite. I ovdje tražilice imaju negativan stav prema činjenici da na stranici postoji više od jednog naslova prve razine. Stoga, ako namjeravate promovirati svoju stranicu u tražilicama, tada bi na svakoj stranici trebao postojati samo jedan naslov prve razine. Zaključak: bolje je odmah se naviknuti da ne stavljate više od jedne oznake

na stranicu. Uostalom, HTML ima cijele razine naslova. Za bilo koji izgled stranice, to je sasvim dovoljno za isticanje oznake

samo za jedno zaglavlje.

stavak

Označiti

Stvara odlomak teksta. Ima ispunu na vrhu i dnu za odvajanje jednog odlomka od drugog. Osim toga, moguće je postaviti uvlačenje prvog retka. Sve se to kontrolira pomoću CSS-a.

Označiti

Označiti Ovo je oznaka retka za umetanje teksta. Obično se koristi kada je potrebno istaknuti dio teksta na određeni način.

Na primjer, označimo dio teksta crvenom bojom.

Traženi dio teksta je unutar oznake . Da bi bila crvena, oznaka ima postavljen atribut stila koji specificira stilove. Budući da je rad sa stilovima pokriven u CSS vodiču, ovdje neću objašnjavati kako ovaj atribut radi. Samo ga dodajte u oznaku kao što je napisano u primjeru.

Označiti

Označiti

Koristi se za posebne vrste teksta u kojima je važno sačuvati oblikovanje.  Tekst unutar ove oznake prikazuje se na stranici točno onako kako se pojavljuje u kodu stranice.  Čuva sve razmake i prijelome redaka.  Tekst se pojavljuje u fontu s jednim razmakom, ali to se može promijeniti pomoću stilova.

Izbor teksta
HTML ima oznake za označavanje teksta.  Oznake I stvoriti podebljani font.  Iako ove oznake imaju neke razlike, uglavnom izgledaju isto na stranici.  Oznake I označite tekst kurzivom.  Postoji oznaka , što čini tekst podcrtanim, ali se ne preporučuje njegova uporaba.

Primjer odabira teksta:
21
22
23
24

 Podebljani font
Podebljani font
Kurzivni font
Kurzivni font

Tekst se može istaknuti pomoću stilova.  Svatko odlučuje za sebe kako istaknuti tekst, koristeći oznake ili stilove.
Ostale oznake
Pogledali smo posebne HTML oznake za tekst.  Ali tekst također može sadržavati mnoge druge oznake koje dodaju sadržaj stranici.  Možete čak i zalijepiti tekst izvan oznaka i on će se i dalje pojavljivati ​​na zaslonu.  Ali u praksi to nitko ne radi jer se tekstom ne može manipulirati izvan oznaka.  Stoga sav tekst naravno mora biti sadržan unutar oznaka.  A kada naučite CSS, moći ćete definirati izgled tekst.
CSS daje dovoljno mogućnosti o radu sa stilom teksta.  Možete utjecati na font, boju, veličinu i druga svojstva teksta.
Budući da je ova stranica namijenjena početnicima, prvo se prisjetimo osnovne CSS sintakse i korištene terminologije.
Svaki CSS pravilo sastoji se od selektora i definicije.  Selektor je obično oznaka na koju primjenjujemo naš stil, a definicija je sam stil.  Definicija se sastoji od svojstva i njegove vrijednosti.  Na primjer: svojstvo - boja, vrijednost - crvena.
CSS sintaksa je sljedeća:
selektor (svojstvo: vrijednost)
Primjer CSS pravila:
p( boja: plava)
 
Prikaz teksta u plavoj boji.  Jedan selektor može imati više parova (svojstvo: vrijednost).
p( boja:plava;  veličina fonta: 10pt)
U ovom primjeru, pravilo je postavljeno na oznaku 
Prikaz teksta u plavoj boji i 10pt.  Odnosno, ovdje imamo dva para (svojstvo: vrijednost) primijenjena na jedan birač, u ovom slučaju na oznaku odlomka 
Ubuduće, kada se u tekstu pojave riječi svojstvo i vrijednost, mislit će se na definiciju selektora u CSS pravilu.
 
Svojstva fonta
Ako ne navedete ovo svojstvo u CSS-u, preglednik će prikazati tekst u zadanom fontu.  Ovo je obično Times New Roman.
Popis fontova u vrijednosti obitelji fontova može uključivati ​​jedno ili više imena, odvojenih zarezom.  Ako naziv fonta sadrži razmake, na primjer, Trebuchet MS, mora biti u navodnicima, jednostrukim ili dvostrukim.
Preglednik jedan po jedan provjerava prisutnost fontova s ​​popisa na korisničkom računalu.  Ako je prvi font na popisu prisutan, on se koristi, u suprotnom preglednik provjerava prisutnost drugog fonta s popisa.  Ako nijedan nije prisutan, koristi se zadani font.  Na kraju popisa obično se piše ključna riječ koja opisuje željeni font - serif, sans-serif, fantasy, cursive ili monospace.
Univerzalne obitelji fontova:
serif - starinski fontovi (serifni fontovi), kao što je Times;
sans-serif - sans-serif fontovi (fontovi bez serifa ili bez serifa), tipičan predstavnik je Arial;
monospace - monospace fontovi, širina svakog znaka u takvoj obitelji je ista (font Courier).
fantazija - obitelj ukrasnih fontova;
cursive - obitelj kurzivnih fontova;
Primjer korištenja:

 


 
 


 
Naslov h1
 
Naslov h2






Sljedeće svojstvo:
Primjer koda, u ovom ćemo primjeru ugraditi stilove u oznaku pomoću atribut stila.

 


 


Primjer normalnog fonta.
Primjer kurziva.
Primjer kurzivnog fonta.






Može se vidjeti da se kurziv ne razlikuje po izgledu od kurzivnog fonta.
Sljedeće svojstvo:
Veliko je naziv u tipografiji za tekst u kojem mala slova izgledaju kao smanjena velika slova.  Potrebno je razlikovati mala i jednostavno smanjena velika slova.  Velika slova su nešto viša od malih slova i u pravilu su malo proširenih proporcija.

 


 


 
Običan tekst. Tekst malim slovima.
 
Opet običan tekst.






Sljedeće svojstvo:
Svojstvo font-weight postavlja težinu fonta.  Za to se koriste sljedeće ključne riječi u značenju: podebljano - podebljani stil, normalno - normalan stil.  Vrijednost se može postaviti u rasponu od 100 do 900 u koracima od 100. Ekstra lagana težina fonta koju preglednik može prikazati je 100, a ekstra podebljana težina fonta je 900. Normalna težina fonta (koja je zadana) je 400, standardni podebljani tekst je podebljan, - vrijednost 700.
Preglednici obično ne mogu točno prikazati potrebnu težinu fonta, pa se prebacuju između podebljanog, normalnog i svjetlijeg.  U praksi je stil u većini preglednika obično ograničen na samo dvije opcije: normalan stil i podebljani stil.
Svjetlije i podebljane vrijednosti mijenjaju težinu fonta u odnosu na težinu roditelja, prema dolje i dolje.

 


 


 
Običan tekst. podebljan tekst.
 
Opet običan tekst.






Sljedeće svojstvo:
Svojstvo font-size određuje veličinu fonta elementa.  Veličina fonta može se postaviti na nekoliko načina.
Apsolutna veličina fonta može se postaviti pomoću ključnih riječi: xx-small (iznimno mali), small (mali), medium (srednji (zadana vrijednost), large (veliki), x-large (vrlo velik), xx-large (izuzetno veliki).  Apsolutne veličine fonta ovise o postavkama preglednika i operativnog sustava, tako da nisu u potpunosti apsolutne.
Za promjenu veličine teksta u odnosu na roditelja koristi se drugi skup konstanti (veći - povećava veličinu u odnosu na roditelja, manji - smanjuje veličinu).

 


 


 
Običan tekst.
 
Tekst xx-mali. Tekst veći.
 
Tekst mali.
 
Tekst medij.
 
Tekst velik.
 
Tekst x-velik.
 
Tekst xx-veliki.
 
Opet običan tekst.
 
Tekst 150%.
 
Tekst 15 px. Tekst veći.






 
Svojstva teksta
Osim rada s fontovima, CSS nudi niz alata za rad sa svojstvima samog teksta.
Pogledajmo prvo svojstvo:
Prilikom postavljanja proreda, izvještaj počinje od osnovne linije fonta.  Prema zadanim postavkama, razmak između redaka teksta ovisi o vrsti i veličini fonta i automatski ga određuju preglednici.  Negativne vodeće vrijednosti nisu dopuštene.

 


 


 
Običan tekst.  Prvi red. 
Druga linija. 
Treća linija.
 
Promijenjen tekst.  Prvi red. 
Druga linija. 
Treća linija.






Kada pišete postotak, visina fonta se uzima kao 100%.
Sljedeće svojstvo:
Koristeći definiciju ( text-decoration: none) Možete ukloniti podcrtavanje s veza, što je standardno instalirano u preglednicima.

 


 
 


 
Pretraživač Google.







Sljedeće svojstvo:
Svojstvo transformacije teksta kontrolira prikaz slova; možete postaviti velika ili mala slova ovisno o odabranoj vrijednosti.
svojstvo tekstualne transformacije 
Vlasništvo
Značenje
 
Opis
 
Primjer
tekstualna transformacija
 
nikakav 
kapitalizirati 
velika slova 
mala slova
 
Ukloni sve efekte 
Počnite s glavnim gradovima 
SAV KAPITAL 
sve malim slovima
 
tekst-transformacija: velika slova
Primjer upotrebe:

 


 


 
Tekst bez poruke.
 
Tekst velikim slovima.
 
Tekst velikim slovima.
 
Tekst malim slovima.






Usporedite tekst sadržan u html kodu s tekstom u prozoru preglednika.
Sljedeće svojstvo:
Svojstvo text-align koristi se za vodoravno poravnavanje teksta u prozoru preglednika ili spremniku u kojem se nalazi blok teksta.
svojstvo poravnanja teksta 
Vlasništvo
Značenje
 
Opis
 
Primjer
poravnanje teksta
 
lijevo 
pravo 
centar 
opravdati
 
Poravnanje teksta
 
poravnanje teksta: desno
Detaljan opis vrijednosti:
centar - tekst je poravnat prema sredini.
 
justify - poravnanje po širini, zapravo, istovremeno se poravnava desno i lijevo; između riječi teksta nastaju prazni prostori koje preglednik ispunjava razmacima.
 
lijevo - poravnanje prema lijevom rubu.  Ovo je zadana vrijednost.
 
desno - desno poravnanje.
Primjer korištenja ovog svojstva kombinirat će se s primjerom sljedećeg svojstva.
Sljedeće svojstvo:
Svojstvo text-indent koristi se za stvaranje vrijednosti uvlačenja prvog retka bloka teksta (na primjer, za odlomak 
Ovo svojstvo dopušta negativnu vrijednost, u kojem slučaju se stvara prvi prepust linije.
svojstvo uvlačenja teksta 
Vlasništvo
Značenje
 
Opis
 
Primjer
tekstualna uvlaka
 
značenje 
%

 
Uvlaka prvog retka
 
uvlaka teksta: 15px; 
uvlaka teksta: 10%
 


 
 


Rad sa svojstvima poravnanja teksta i uvlačenja teksta.  Da biste bolje razumjeli kako kod funkcionira, otvorite stranicu u novom prozoru i smanjite njezinu veličinu.






Izgled teksta na ekranu ovisi samo o oznakama, ne ovisi o razmacima ili prijelomima redaka.
Svi elementi dizajna HTML dokumenata podijeljeni su u dvije vrste: inline i blok.
Inline elementi mogu biti dio retka, ali blok elementi uvijek zauzimaju zasebno mjesto na web stranici i uvijek počinju s nova linija.  Naravno, blok elementi mogu uključivati ​​druge blok elemente i inline elemente.  Iz očitih razloga, inline elementi ne mogu uključivati ​​blok elemente.
Kombiniranje elemenata web-stranice u blokove omogućuje vam da na njih primijenite jedan dizajn i izvršite izgled.  Bit će dovoljno promijeniti lokaciju bloka promjenom jedne unificirajuće oznake.  Naravno, to je praktičnije nego mijenjati lokaciju svakog elementa web stranice pojedinačno.
Umetnuti elementi okruženi su oznakama ...
.
Za uokvirivanje elemenata blok tipa, par 
...

.

Preglednici uokviruju div blokove prijelomima redaka.
Blok 
ne može se nalaziti unutar bloka .

Primjer
 


 
 


Prvi blok teksta
Drugi blok teksta.






Osnovne oznake za oblikovanje teksta
Primjer
 


 
 


Naslov 
prva razina
Naslov druge razine
Naslov treće razine
Naslov četvrte razine
Naslov razine 5
Naslov šeste razine

Test odlomka






Stvoriti tekstualna datoteka, kao u primjeru.  Spremite ga s ekstenzijom html.
Dvostruki klik na njegovo ime u mapi pokrenut će zadani preglednik, a vaš HTML dokument već će biti učitan u njega.
Isticanje u tekstu
Primjer
 Tekst može biti podebljan. Tekst može biti u kurzivu.

Tekst se može podvlačiti. Tekst se može precrtati.
Tekst može biti superskript.  Tekst može biti indeks.
Citati, varijable, adrese
...


 
Služi za davanje autora dokumenta kontakt informacije tako da svatko može kontaktirati autora materijala.  Obično se prikazuje u kurzivu.  Blok element.


 
Isticanje citata.  Blok element.
...

 
Isticanje citata.  Obično se prikazuje u kurzivu.
...

 
Prikaz teksta u fontu fiksne širine.  U pravilu se koristi za prikaz malog dijela programskog koda (za velike popise oznaka 
).

...

 
Označavanje važnih fragmenata teksta.  Obično se prikazuje u kurzivu.
...

 

...

 
Prikaz teksta u fontu fiksne širine.
...

 
Snažno isticanje važnih fragmenata teksta.  Obično se prikazuje podebljanim fontom.
...

 
Koristi se za označavanje naziva varijabli.  Obično se prikazuje u kurzivu.

HTML oznake koje određuju poravnanje i uvlačenje teksta
 
Obostran tekst koji se koristi u tipografiji
 
Primjer u nastavku pokazuje kako poravnati tekst u širinu stranice:
 
poravnaj="lijevo"
 
poravnaj="desno"


 
Broj radnika zaposlenih u uslužnom sektoru i širenju informacija raste svakim danom.  Ako su simboli prošlih stoljeća bili farma i tvornica, onda je simbol sadašnjeg 21. stoljeća ured opremljen računalima koja imaju pristup protoku informacija.

align="justify"
 
align="center"
Broj radnika zaposlenih u uslužnom sektoru i širenju informacija raste svakim danom.  Ako su simboli prošlih stoljeća bili farma i tvornica, onda je simbol sadašnjeg 21. stoljeća ured opremljen računalima koja imaju pristup protoku informacija.

 
Broj radnika zaposlenih u uslužnom sektoru i širenju informacija raste svakim danom.  Ako su simboli prošlih stoljeća bili farma i tvornica, onda je simbol sadašnjeg 21. stoljeća ured opremljen računalima koja imaju pristup protoku informacija.

Opravdana vrijednost osigurava ujednačenost poravnati tekst desno i lijevo, to je u širinu.  Ova metoda ima široku primjenu u tiskarstvu.
 
Poravnavanje teksta u HTML-u prema sredini i širini
 
Poravnajte tekst u HTML-u centrirano, tekst udesno:
 
Proizlaziti:
 
Atributi i vrijednosti
 
align="left" - definira lijevo poravnanje teksta(zadano).
 
align="center" - poravnava tekst prema sredini.
 
align="desno" - poravnava tekst udesno.
Poravnaj |  Uvlačenje HTML teksta
 
HTML tekst i njegovo uvlačenje na lijevoj strani stranice
 
Proizvodit ćemo uvlačenje teksta lijevo na dva načina:
 
Proizlaziti:
 

 
Pogledaj u novom prozoru.
U html-u veličina fonta igra važnu ulogu.  Omogućuje vam da privučete pozornost korisnika važna informacija, objavljeno na stranici stranice.  Iako nije važna samo veličina slova, već i njihova boja, debljina, pa čak i obitelj.
 
Oznake i atributi pri radu s html fontovima
Jezik hiperteksta ima širok raspon alata za rad s fontovima.  Uostalom, oblikovanje teksta je glavni zadatak html-a.
Razlog stvaranja HTML jezik Došlo je do problema s preglednicima koji prikazuju pravila oblikovanja teksta.

Pogledajmo oznake koje se koriste za rad s fontovima u HTML-u i njihove atribute.  Glavna je oznaka .  Pomoću vrijednosti njegovih atributa možete postaviti nekoliko karakteristika fonta:

boja – postavlja boju teksta;
veličina – veličina slova u konvencionalnim jedinicama.
Podržane su pozitivne vrijednosti atributa od 1 do 7.
lice – koristi se za postavljanje obitelji fontova teksta koji će se koristiti unutar oznake .  Podržano je nekoliko vrijednosti odvojenih zarezima.


Formatiran je samo tekst koji se nalazi između dijelova par oznaka font. Ostatak teksta prikazuje se standardnim zadanim fontom.

Također u html-u postoji niz uparenih oznaka koje određuju samo jedno pravilo oblikovanja.  To uključuje:
— postavlja podebljani font u html.  Označiti sličan u djelovanju prethodnom;

— veličina je veća od zadane;

— manja veličina slova;

— tekst u kurzivu (kurziv).  Slična oznaka ;

— tekst s podvlačenjem;
- prekrižen;
— prikaz teksta samo malim slovima;
- velikim slovima.
Običan tekst

Sličica
Sličica
Više nego inače
Manje nego inače
Kurziv
Kurziv
S podvlakom
Prekrižen

Mogućnosti atributa stila
Osim opisanih oznaka, postoji još nekoliko načina za promjenu fonta u html-u.  Jedan od njih je korištenje generičkog atributa stila.  Pomoću vrijednosti njegovih svojstava možete postaviti stil prikaza fontova:
1) font-family – svojstvo postavlja obitelj fontova.  Moguće je ispisati više vrijednosti. 
Promjena fonta u html u sljedeća vrijednost dogodit će se ako prethodna obitelj nije postavljena operacijski sustav korisnik.
Sintaksa pisanja:
obitelj-fontova: naziv-fonta [, naziv-fonta[, ...]]
2) veličina fonta – veličina je postavljena od 1 do 7. Ovo je jedan od glavnih načina na koji možete povećati font u HTML-u. 
Sintaksa pisanja:
veličina-fonta: apsolutna veličina |  relativna veličina |  značenje |  kamata |  naslijediti
Također možete postaviti veličinu fonta:
U pikselima;
U apsolutnom smislu ( xx-mali, x-mali, mali, srednji, veliki);
U postocima;
U bodovima (pt).
Veličina slova: 7
Veličina fonta: 24 px
Veličina fonta: x-veliko
Veličina fonta: 200%
Veličina fonta: 24 pt

3) font-style – postavlja stil pisanja fonta.  Sintaksa:
stil fonta: normalan |  kurziv |  koso |  naslijediti
Vrijednosti:
normalno – normalan pravopis;
kurziv – kurziv;
oblique – font nakošen udesno;
naslijediti – nasljeđuje pravopis nadređenog elementa.
Primjer kako promijeniti font u html-u pomoću ovog svojstva:
font-style:nasljedi
font-style:kurziv
font-style:normal
font-style: oblique

4) varijanta fonta – pretvara sva velika slova u velika slova.  Sintaksa:
varijanta fonta: normalno |  mala slova |  naslijediti
Primjer kako promijeniti font u html-u s ovim svojstvom:
font-varijanta: naslijediti
font-varijanta:normalno
font-varijanta: mala velika slova

5) font-weight – omogućuje vam postavljanje debljine teksta (zasićenost).  Sintaksa:
težina-fonta: podebljano|podebljano|svjetlije|normalno|100|200|300|400|500|600|700|800|900
Vrijednosti:
podebljano – postavlja html font podebljano;
hrabriji – hrabriji u odnosu na normalno;
svjetlije - manje zasićeno u odnosu na normalno;
normalno – normalan pravopis;
100-900 – postavlja debljinu fonta u numeričkom ekvivalentu.
težina-fonta: podebljano
font-weight:bolder
font-weight:lighter
težina fonta: normalna
težina slova: 900
težina slova: 100

Svojstvo HTML fonta i boja fonta
Font je još jedno svojstvo spremnika.  U sebi je kombinirao vrijednosti nekoliko svojstava namijenjenih za promjenu fontova.  sintaksa fonta:
font: veličina-font-familija |  naslijediti
Vrijednost se također može postaviti na fontove koje koristi sustav u oznakama na različitim kontrolama:
natpis - za gumbe;
ikona – za ikone;
jelovnik - jelovnik;
okvir za poruke – za dijaloške okvire;
mali natpis – za male kontrole;
status-bar – font statusne trake.
font: ikona
font:naslov
font:izbornik
font:box-poruka
mali natpis
font: statusna traka
font:kurziv 50px bold "Times New Roman", Times, serif

Za postavljanje boje fonta u HTML-u, možete koristiti svojstvo boje.  Omogućuje vam postavljanje boje pomoću ključna riječ, i u rgb formatu.  I također u heksadecimalnom kodu.