Pentru a-i da un anumit stil, trebuie să plasați textul în containerul corespunzător.

Toate etichetele de formatare pot fi împărțite în trei grupuri:

1. Etichete de titlu ( h1-h6).

2. Design tag-uri ale textului principal ( , , ,

, 
 etc.).
3. Etichete de grupare ( 

, 

, 

)

Etichete de titlu
Transformați textul simplu într-un titlu de un anumit nivel.  Etichetă 

 creează un titlu de prim nivel - cel mai mare și cel mai important (de obicei, titlul articolului de pe pagină), 

 este responsabil pentru titlul celui de-al șaselea nivel - cel mai mic și mai discret.  Aceste etichete sunt importante atât pentru utilizatori, cât și pentru motoarele de căutare - titlurile cu subtitluri sunt îndrăgite de ambele.  Trebuie respectată ierarhia nivelurilor, adică pt 

 trebuie sa plec 

, și nu invers.

Pentru a înțelege cum funcționează, introduceți următorul cod în fișierul html:
 
Titlu de primul nivel
Titlu de al doilea nivel
Titlu de nivel al treilea
Titlu de nivel 4
Titlu de nivel 5
Titlu de nivel 6

În browser va arăta așa:
Etichete de design pentru textul corpului
Permite formatarea la nivel de caractere.  Să vedem ce poți face cu ei.
Font aldine
Trebuie să ne concentrăm pe text.  De asemenea, este important pentru motoarele de căutare, acestea pot evidenția cuvinte cheie.
Responsabil pentru etichetele îndrăznețe 
și .

Superscript și indice
Ele pot fi folosite în formule, ecuații, notarea unor mărimi.
Eticheta este responsabilă pentru crearea subscriptelor 
, pentru eticheta de sus este folosită 
.
X 1=32 m 2
Reducerea dimensiunii
Dacă trebuie să faceți textul cu unul mai mic decât cel stabilit pe întreaga pagină, atunci trebuie să utilizați eticheta 

Text simplu. Text redus.
Subliniați
Acest tip de evidențiere poate fi folosit pentru a indica modificările aduse unui document sau pur și simplu pentru a sublinia textul.
Text simplu. Text subliniat.
Striat
Puteți tăia informații dacă acestea și-au pierdut deja relevanța.  Conceput pentru această etichetă 
.
Cursive
Este necesar să se concentreze atenția asupra textului și poate fi creat cu o etichetă 
 sau 
.

Introducerea textului pe computer
Se întâmplă că trebuie să adăugați codul sursă al programului și rezultatele muncii sale pe o pagină web.  Pentru a facilita distingerea vizuală a diferitelor părți ale textului una de cealaltă, dezvoltatorii HTML au introdus etichetele acestui grup.
La container 
 codul programului este încheiat, în timp ce variabilele sale sunt evidențiate cu o etichetă 
, iar rezultatul execuției este 
.  Container 
 conține text pe care utilizatorul trebuie să îl introducă de la tastatură atunci când lucrează cu programul și tot ceea ce este inclus în etichete 
, păstrează formatul original, inclusiv spații suplimentare și întreruperi de rând.

  prin urmare a, b, c, Aici rezultatul executării programului , și asta este text introdus de utilizator 
afișat astfel
.

Citate și definiții
Codul va arăta ca 
 prin urmare 
, variabilele se notează după cum urmează: 
 a, b, c 
, Aici 
 rezultatul executării programului 
, și asta este 
 text introdus de utilizator 
.  Păstrați formatarea originală 
 afișat astfel 

.

 
Citat în eticheta blockquote.
Un citat în interiorul unui container de citare.Citat scurt cu eticheta q.Definiție dedicată.Abreviere (ONG, IP).

Exemplu general
Pentru a înțelege mai bine de ce este responsabilă o etichetă și cum funcționează, consultați următorul cod și rezultatul execuției sale.
 
Gras textul poate fi etichetat puternicși b.  Pe cursive Răspuns eiși i.
Etichete subși cina folosit pentru a crea inferior(X 1…X n) și superior (42=16) indici. Del lovește, ins - subliniază.
Etichete cod, kbd, varși mămăligă folosit rar și necesar pentru afișarea listelor de programe
 abr necesare pentru abrevieri ( HTML).  Etichetele blockquote, cite și q sunt folosite pentru citat ( Deja cerul respira toamna)
Eticheta pre păstrează formatarea originală a textului fără a elimina spații sau întreruperi de linie.

Browserul interpretează acest cod astfel:

Etichete de grupare
Este necesar ca textul să nu meargă într-o singură linie continuă, ci să fie împărțit în componente logice.
Etichetele conțin un paragraf.
 
Primul paragraf
Al doilea paragraf


Etichetă 

 trece la rândul următor dintr-un paragraf (nu va exista nicio liniuță înainte de linie).

 vă permite să trasați o linie orizontală.  Îl puteți folosi pentru a separa mai vizual textul.  Atribute lăţime, mărimea, culoare, aliniași noshade setați lățimea, grosimea, culoarea, alinierea și, respectiv, absența efectului 3D al liniei.
 
Linie deasupra liniei. 
Linie sub linie.

Orice text are propria sa structură unică: cărțile sunt împărțite în părți, secțiuni și capitole, ziarele și revistele au titluri și subtitluri separate, care, la rândul lor, includ fragmente de text care au și o structură proprie: paragrafe, indentări etc.
 
Textul plasat pe paginile web nu face excepție, trebuie să aibă și o structură logică pe înțelesul fiecărui utilizator.  La urma urmei, multe depind de cât de convenabil și simplu va fi perceput textul de pe pagină: în primul rând, ce impresie va avea vizitatorul despre site-ul tău.
 
Pentru a crea astfel de unități structurale de text ca paragrafe, eticheta este utilizată în documentele HTML. 
, care separă fragmentele de text cu o indentare verticală (se adaugă o linie goală înainte și după un paragraf).
Notă: în mod implicit, distanța dintre paragrafe este 1em (em este o unitate de măsură egală cu înălțimea fontului), adică distanța dintre paragrafe depinde direct de dimensiunea fontului.
Pentru a modifica indentațiile dintre paragrafe fără a modifica dimensiunea fontului, puteți utiliza proprietatea CSS margin.
 
Nu uitați de eticheta de închidere
 
Majoritatea browserelor vor reda corect un document HTML chiar dacă ați uitat eticheta de final.

 
Paragraf 
Un alt paragraf
 
Acest cod va funcționa în majoritatea browserelor, dar nu vă bazați pe el.  O etichetă de închidere uitată poate duce la rezultate sau erori neașteptate.
 
linie rosie
 
Ce este o linie roșie?  Prin definiție, aceasta este linia inițială a unui paragraf, care era evidențiată cu roșu (de unde și numele).  Înainte de inventarea tiparului, cărțile erau scrise de mână - capitolul sau o parte a textului, primul cuvânt sau literă era scris cu vopsea roșie.  Așa a apărut conceptul de „scriere de pe linia roșie” - aceasta înseamnă începutul unui nou gând, capitol sau parte.
 
Cu toate acestea, atunci când creați pagini web, designul liniei roșii este folosit destul de rar, în ciuda faptului că vă permite să percepeți textul vizual cu mult mai multă comoditate, ceea ce este destul de important pentru cititorul tradițional - nu toată lumea este confortabilă să citească versiunea electronică a textului.
 
Pentru a adăuga o linie roșie la paragrafele dvs., trebuie să utilizați proprietatea CSS text-indent, care vă permite să indentați prima propoziție:

 
 
 
 
 
 
 




Încerca "
În exemplul de mai sus, primul rând al fiecărui paragraf de pe pagină va începe cu o indentare de 25 de pixeli.  Exemplul de mai jos demonstrează cum puteți seta linia roșie doar la un anumit paragraf dintr-o pagină.

 
Ca în orice artă adevărată, nu există fleacuri în textele bune, la care unii includ linia roșie, crezând că utilizarea sa nu este atât de importantă.  Cu toate acestea, trebuie să înțelegeți că orice virgulă poartă atât o sarcină estetică, cât și semantică și nu este doar un tribut adus regulilor gramaticale - acest lucru se aplică și formatării.
Încerca "
Notă: nu este necesar să setați indentarea la 25px, puteți alege singur dimensiunea optimă de indentare, este, de asemenea, posibil să faceți o linie care să iasă deasupra restului textului folosind proprietatea text-indent, pentru aceasta trebuie să setați o valoare negativă pentru proprietate (de exemplu: -30px).
Etichete care definesc paragraf, spațiu, bloc HTML și paragraf
 
Luați în considerare în detaliu Blocuri și paragrafe HTML ca elemente ale unei pagini web.
 
Paragraf HTML definite de etichete.
 
Paragrafe HTML de obicei conțin text, etichete de formatare, imagini.
 
Paragraf HTML nu poate conține elemente la nivel de bloc, cum ar fi anteturile 
 
 - 
, bloc 
 
 si alte paragrafe.
 
Bloc HTML definite de etichete 
 
 .
 
Bloc HTML poate conține orice elemente ale unei pagini web, în ​​orice cantitate.
 
blocuri HTML excelente pentru pagini web, sunt ușor de manipulat.
Luați în considerare codul de mai jos:
 
Rezultat:
 
Putem vedea asta Paragrafe HTML sunt indentate pe verticală - aceasta este o caracteristică a etichetelor. blocuri HTML
 
 
 astfel de spații nu sunt create, pentru că nu poartă nicio încărcătură, ci sunt pur și simplu containere.

 
Etichetele nu pot conține alte sau 
 
.  Elementele liniare pot fi plasate în interior, cum ar fi sau, de exemplu, etichete responsabile pentru formatarea textului.

 
Etichetele și , în principiu, sunt același lucru, dar consorțiul W3C a recomandat folosirea literelor mici.  În noua versiune de HTML, ca și în XHTML modern, este interzisă utilizarea majusculelor la scrierea etichetelor.
 
bloc 
 
 poate conține orice număr de 
 
 si alte elemente HTML document.  Este ideal pentru aspect, dar mai multe despre asta mai târziu în tutorialul CSS.

 
Spațiu HTML din tabelul cu caractere speciale
 
Spațiu HTML vă permite să măriți spațiul dintre cuvinte și caractere.
 
Cât despre spațiile dintre cuvinte, oricâte sunt în Notepad, adică în codul sursă, pe pagina web va fi afișat doar unul.  Dacă trebuie să măriți distanța - utilizați caracterul spațiu din tabelul cu simboluri.  Vă întrebați: De ce avem nevoie de aceste valori codificate ale caracterelor obișnuite?  - Voi răspunde: Sunt necesare pentru a afișa, de exemplu, astfel de paranteze< >.  Cu alte cuvinte, pentru a afișa etichete pe ecran, în editorul meu scriu: .  Etichete  , după cum ne amintim, convertiți textul în monospațiu (dactilografiat).
 
Modalități de afișare a unui paragraf HTML
 
Exemple de rezultate de paragraf.
În cazul documentelor HTML, etichetele funcționează mai mult pentru a marca conținutul decât pentru a indica modul în care ar trebui să fie prezentat.  Mai mult control asupra prezentării este obținut cu stiluri.  În acest articol, voi analiza acele stiluri care sunt legate de formatarea paragrafelor în HTML.
Etichetă 
În HTML, puteți specifica paragrafe, iar atributul de aliniere le aliniază la stânga, la dreapta, la centru sau la justificare.  Pe lângă ele, vom folosi atributul de stil global.
Alinierea paragrafelor
Puteți alinia un paragraf folosind atributul align cu următoarele valori:
text-align: stânga|dreapta|centru|justificare|inițial|moștenire;
Copiați următorul cod într-un fișier .html.


Acest paragraf este aliniat la centru
Acest paragraf este aliniat la dreapta
Acest paragraf este afișat în fereastra browserului justificat.  Un paragraf bine distanțat este justificat la dreapta și la stânga prin adăugarea de spații suplimentare.  Puteți vedea că marginile paragrafului justificat se potrivesc cu marginile paragrafelor justificate din stânga și din dreapta.  Într-un paragraf aliniat la stânga, marginea din stânga este uniformă, iar într-un paragraf aliniat la dreapta, este dreapta.  Puteți vedea că acest paragraf are ambele margini egale?  Acest lucru se realizează datorită stilului text-align:justify.

În fereastra browserului HTML, codul paragrafului arată astfel.
Spațiere între linii
Puteți controla distanța dintre rânduri a unui paragraf cu style=line-height .  Utilizați atributul style cu următoarele valori:
line-height: normal|număr|lungime|inițial|moștenire;
Următorul este un exemplu de cod HTML care scoate paragrafe cu spațiere între rânduri diferită:


Acest paragraf folosește două valori pentru atributul stil.  Prima linie-height:1.5 specifică o spațiere între rânduri și jumătate pentru paragraf, iar a doua valoare text-align:justify specifică faptul că textul paragrafului trebuie să fie justificat în lățime.
Acest paragraf are spațiere dublă între rânduri și este justificat.  line-height:2 specifică spațierea dublă.  Atributul style nu trebuie să aibă două valori.  Dar dacă trebuie să specificați două valori, puteți face acest lucru separându-le cu punct și virgulă.







Iată câteva moduri diferite de a utiliza valoarea înălțimii liniei pentru atributul stil: 
: Setează distanța dintre linii la 13 pixeli; 

: Setează distanța dintre paragrafe în HTML la 200% din dimensiunea fontului curent; 

: Setează înălțimea liniei la 14 pixeli.
Indentare
Am folosit termenul „indentație” pentru a fi mai ușor de înțeles.  Dar în HTML, folosim spații pentru a crea spațiu alb în jurul unui obiect.  Puteți utiliza atributul de stil cu o valoare de umplutură pentru a seta indentarea la stânga sau la dreapta unui paragraf.
Următorul este un exemplu de paragrafe indentate la stânga și la dreapta:



Acest paragraf nu este indentat, este doar justificat.  Priviți atributul de stil al elementului P pentru acest paragraf.
Pentru acest paragraf, am setat indentarea din stânga la 30px folosind padding-left:30px .  Acest paragraf este, de asemenea, justificat folosind stilul text-align:justify.  După cum știți deja, putem folosi mai multe valori pentru atributul Stil, separându-le cu punct și virgulă.
Și acest paragraf are o liniuță din dreapta de 30 de pixeli, dar nicio liniuță din stânga.  Se justifică și în lățime.  Valoarea „padding-right” a atributului stil setează padding-ul la dreapta.  Dacă nu vedeți efectul, reduceți lățimea ferestrei browserului, astfel încât paragraful HTML justificat să fie afișat corect.

Indentări între paragrafe (indentare înainte și după un paragraf)
În HTML sau CSS, nu avem nevoie de asta.  Putem doar modela căptușeala pe element 
Padding-top și padding-bottom definesc spațiul alb înainte și după un paragraf, care funcționează ca o umplutură de sus sau de jos.  Uită-te la exemplul de etichetă de mai jos 
Am setat primul paragraf HTML la 10px indent înainte de al doilea și 50px după al doilea paragraf:



Acest paragraf nu este indentat înainte sau după.  Acesta este un paragraf normal justificat.  După cum știți deja, putem justifica un paragraf folosind codul style="text-align:justify" din interiorul etichetei.
Acest paragraf este aliniat.  De asemenea, are o indentație de 10 px înainte de paragraf și 50 px după.  În interiorul etichetei, am setat 3 stiluri.
Acesta este un paragraf normal, fără indentări și aliniere implicită.





Lucruri de amintit
Un paragraf HTML poate fi aliniat folosind atributul align sau stilul text-align;
HTML va fi redat diferit în funcție de dimensiunile ecranului, dimensiunile ferestrei browserului;
Adăugarea de spații suplimentare sau linii goale la codul HTML nu afectează rezultatul.  Browserul elimină toate spațiile suplimentare;
Etichetele definesc ceea ce ar trebui să fie afișat, iar stilurile definesc modul în care ar trebui să fie afișat;
Stilurile pot fi setate în trei moduri diferite - inline (în interiorul etichetelor), intern ( în interiorul aceluiași fișier HTML cu un element 
 
 
 
Pandemia Babiloniană, conform tradiției biblice, este încercarea eșuată a regelui Nimrod de a construi un stâlp în Babilon la fel de înalt ca cerul.  Dumnezeu, supărat pe oameni pentru dorința lor nesăbuită, a hotărât să-i pedepsească pe constructori: le-a amestecat limbajul ca să nu se mai înțeleagă, să fie nevoiți să nu mai construiască și să se împrăștie treptat în lume.  De aici, așa cum au explicat anticii, diferența de limbi a mers.
 
În conceptul obișnuit, pandemoniul babilonian înseamnă dezordine, confuzie cu o mulțime mare de oameni.
 





Rezultatul acestui exemplu este prezentat în Fig.  unu.