Cum se inserează text în Pagina HTML? Există etichete HTML speciale pentru text în acest scop.

Există șase niveluri de titluri în HTML. Ele sunt adăugate folosind etichete

-

. în care

Acesta este primul nivel, este cel mai mare.

Exemplu de creare a antetelor:

Titlurile nu depind în niciun fel unele de altele. Puteți adăuga un titlu de orice nivel oriunde aveți nevoie.

Uneori, începătorii nu își pot da seama de câte titluri de prim nivel pot fi pe o pagină. Pe Internet, am întâlnit în mod repetat informații incomplete și nesigure despre acest subiect. Prin urmare, am decis să analizez această problemă în detaliu.

Numărul de etichete pe pagină funcționează

nu are nici un efect. Puteți adăuga oricâte dintre ele doriți. Si aici motoare de căutare au o atitudine negativă față de faptul că există mai mult de un titlu de prim nivel pe o pagină. Prin urmare, dacă intenționați să vă promovați site-ul în motoarele de căutare, atunci ar trebui să existe un singur titlu de prim nivel pe fiecare pagină. Concluzie: este mai bine să vă obișnuiți imediat să nu puneți mai mult de o etichetă

la pagina. La urma urmei, HTML are niveluri întregi de titluri. Pentru orice aspect de pagină, acest lucru este suficient pentru a evidenția eticheta

pentru un singur antet.

Paragraf

Etichetă

Creează un paragraf de text. Are umplutură în partea de sus și de jos pentru a separa un paragraf de altul. În plus, este posibil să setați indentarea primei linii. Toate acestea sunt controlate folosind CSS.

Etichetă

Etichetă Aceasta este o etichetă de linie pentru inserarea textului. Este de obicei folosit atunci când trebuie să evidențiați o parte a textului într-un anumit mod.

De exemplu, să evidențiem o parte a textului cu roșu.

Partea necesară a textului se află în interiorul etichetei . Pentru a-l face roșu, eticheta are setul de atribute stil, care specifică stilurile. Deoarece lucrul cu stiluri este tratat în tutorialul CSS, nu voi explica cum funcționează acest atribut aici. Doar adăugați-l la etichetă așa cum este scris în exemplu.

Etichetă

Etichetă

Folosit pentru tipuri speciale de text în care este important să se păstreze formatarea.  Textul din interiorul acestei etichete este afișat pe pagină exact așa cum apare în codul paginii.  Păstrează toate spațiile și întreruperile de rând.  Textul apare într-un font monospațial, dar acesta poate fi modificat folosind stiluri.

Selectarea textului
HTML are etichete pentru a evidenția textul.  Etichete Și crea font aldine.  Deși aceste etichete au unele diferențe, în general arată la fel pe pagină.  Etichete Și evidențiați textul cu caractere cursive.  Există o etichetă , ceea ce face ca textul să fie subliniat, dar utilizarea lui nu este recomandată.

Exemplu de selectare a textului:
21
22
23
24

 Font aldine
Font aldine
Font italic
Font italic

Textul poate fi evidențiat folosind stiluri.  Fiecare decide singur cum să evidențieze textul, folosind etichete sau stiluri.
Alte etichete
Ne-am uitat la etichetele HTML speciale pentru text.  Dar textul poate conține și multe alte etichete care adaugă conținut paginii.  Puteți chiar să lipiți text în afara oricăror etichete și va apărea în continuare pe ecran.  Dar, în practică, nimeni nu face acest lucru, deoarece textul nu poate fi manipulat în afara etichetelor.  Prin urmare, tot textul trebuie, desigur, să fie conținut în etichete.  Și când înveți CSS, vei putea defini aspect text.
CSS dă oportunități ample la operarea cu stilul textului.  Puteți influența fontul, culoarea, dimensiunea și alte proprietăți ale textului.
Deoarece această pagină este destinată începătorilor, să ne amintim mai întâi de sintaxa și terminologia CSS de bază utilizate.
Fiecare regula CSS constă dintr-un selector și o definiție.  Selectorul este de obicei eticheta căreia îi aplicăm stilul, iar definiția este stilul în sine.  O definiție constă dintr-o proprietate și valoarea acesteia.  De exemplu: proprietate - culoare, valoare - roșu.
Sintaxa CSS este următoarea:
selector (proprietate: valoare)
Exemplu de regulă CSS:
p( Culoarea albastra)
 
Afișează textul în albastru.  Un selector poate avea mai multe perechi (proprietate: valoare).
p( Culoarea albastra;  dimensiunea fontului: 10 pt)
În acest exemplu, regula este setată pentru etichetare 
Afișează textul în albastru și 10 pt.  Adică, aici avem două perechi (proprietate: valoare) aplicate unui singur selector, în acest caz etichetei de paragraf 
În viitor, când vor apărea cuvintele proprietate și valoare în text, se va menține definiția selectorului din regula CSS.
 
Proprietățile fontului
Dacă nu specificați această proprietate în CSS, browserul va afișa textul în fontul implicit.  Acesta este de obicei Times New Roman.
Lista fonturilor din valoarea familiei de fonturi poate include unul sau mai multe nume, separate prin virgulă.  Dacă numele fontului conține spații, de exemplu, Trebuchet MS, acesta trebuie să fie cuprins între ghilimele, simplu sau dublu.
Browserul verifică unul câte unul prezența fonturilor din listă pe computerul utilizatorului.  Dacă primul font din listă este prezent, atunci acesta este utilizat, în caz contrar browserul verifică prezența celui de-al doilea font din listă.  Dacă nu este prezent, se folosește fontul implicit.  La sfârșitul listei, de obicei este scris un cuvânt cheie care descrie tipul de font dorit - serif, sans-serif, fantasy, cursiv sau monospace.
Familii de fonturi universale:
serif - fonturi antice (fonturi serif), cum ar fi Times;
sans-serif - fonturi sans-serif (fonturi fără serif sau sans serif), un reprezentant tipic este Arial;
monospace - fonturi monospace, lățimea fiecărui caracter dintr-o astfel de familie este aceeași (font Courier).
fantezie - o familie de fonturi decorative;
cursiv - familie de fonturi italic;
Exemplu folosind:

 


 
 


 
Titlul h1
 
Titlul h2






Următoarea proprietate:
Exemplu de cod, în acest exemplu vom încorpora stiluri în etichetă folosind atribut de stil.

 


 


Un exemplu de font normal.
Exemplu italic.
Exemplu de font italic.






Se poate observa că caracterele italice nu diferă în aparență de fontul italic.
Următoarea proprietate:
Capitală este numele tipografiei pentru text în care caracterele mici arată ca majuscule reduse.  Este necesar să se facă distincția între majuscule mici și majuscule pur și simplu reduse.  Literele mari sunt puțin mai mari decât literele mici și, de regulă, au proporții ușor extinse.

 


 


 
Text simplu. Text cu majuscule mici.
 
Din nou, text obișnuit.






Următoarea proprietate:
Proprietatea font-weight stabilește greutatea fontului.  Pentru a face acest lucru, se folosesc următoarele cuvinte cheie în sensul: bold - stil bold, normal - stil normal.  Valoarea poate fi setată în intervalul de la 100 la 900 în trepte de 100. Greutatea fontului extra ușor pe care o poate afișa browserul este de 100, iar greutatea fontului suplimentar aldine este 900. Greutatea normală a fontului (care este implicită) este 400, textul aldin standard este aldin , - valoarea 700.
De obicei, browserele nu pot afișa cu exactitate greutatea fontului necesară, așa că comută între aldine, normal și mai ușor.  În practică, stilul în majoritatea browserelor este de obicei limitat la doar două opțiuni: stil normal și stil îndrăzneț.
Valorile mai ușoare și mai îndrăznețe modifică greutatea fontului în raport cu greutatea părintelui, în jos și, respectiv, în jos.

 


 


 
Text simplu. text îngroșat.
 
Din nou, text obișnuit.






Următoarea proprietate:
Proprietatea font-size specifică dimensiunea fontului elementului.  Mărimea fontului poate fi setată în mai multe moduri.
Dimensiunea absolută a fontului poate fi setată folosind cuvintele cheie: xx-small (extrem de mic), mic (mic), mediu (mediu (valoare implicită), mare (mare), x-large (foarte mare), xx-mari (extrem de mare) mare).  Dimensiunile absolute ale fonturilor depind de setările browserului și ale sistemului de operare, deci nu sunt în totalitate absolute.
Pentru a modifica dimensiunea textului în raport cu părintele, se folosește un alt set de constante (mai mare - mărește dimensiunea față de părinte, mai mic - scade dimensiunea).

 


 


 
Text simplu.
 
Text xx-mic. Text mai mare.
 
Text mic.
 
Mediu text.
 
Text mare.
 
Text x-mare.
 
Text xx-mare.
 
Din nou, text obișnuit.
 
Text 150%.
 
Text 15px. Text mai mare.






 
Proprietățile textului
Pe lângă lucrul cu fonturile, CSS oferă o serie de instrumente pentru a lucra cu proprietățile textului în sine.
Să ne uităm la prima proprietate:
Când setați spațierea între linii, raportul începe de la linia de bază a fontului.  În mod implicit, distanța dintre liniile de text depinde de tipul și dimensiunea fontului și este determinată automat de browsere.  Nu sunt permise valori negative.

 


 


 
Text simplu.  Prima linie. 
A doua linie. 
A treia linie.
 
Text schimbat.  Prima linie. 
A doua linie. 
A treia linie.






Când scrieți un procent, înălțimea fontului este considerată 100%.
Următoarea proprietate:
Folosind definiția ( text-decor: niciunul) Puteți elimina sublinierea din linkuri, care este instalată implicit în browsere.

 


 
 


 
Motor de căutare Google.







Următoarea proprietate:
Proprietatea text-transform controlează afișarea literelor; puteți seta caractere mari sau mici, în funcție de valoarea selectată.
proprietatea text-transform 
Proprietate
Sens
 
Descriere
 
Exemplu
text-transformare
 
nici unul 
valorifica 
majuscule 
litere mici
 
Eliminați toate efectele 
Începeți cu majuscule 
TOT CAPITALUL 
Doar litere mici
 
text-transform: majuscule
Exemplu de utilizare:

 


 


 
Trimite mesaj.
 
Text cu majuscule.
 
Text cu majuscule.
 
Text cu minuscule.






Comparați textul conținut în codul html cu textul din fereastra browserului.
Următoarea proprietate:
Proprietatea text-align este folosită pentru a alinia textul pe orizontală în fereastra browserului sau containerul în care se află blocul de text.
proprietatea text-align 
Proprietate
Sens
 
Descriere
 
Exemplu
aliniere text
 
stânga 
dreapta 
centru 
justifica
 
Alinierea textului
 
text-align: dreapta
Descrierea detaliată a valorilor:
centru - textul este aliniat la centru.
 
justificare - aliniere pe lățime, de fapt, este aliniată la dreapta și la stânga în același timp; între cuvintele textului se formează spații goale, pe care browserul le umple cu spații.
 
stânga - alinierea la marginea stângă.  Aceasta este valoarea implicită.
 
alinierea dreapta - dreapta.
Un exemplu de utilizare a acestei proprietăți va fi combinat cu un exemplu al proprietății următoare.
Următoarea proprietate:
Proprietatea text-indent este utilizată pentru a crea valoarea indentării primei rânduri a unui bloc de text (de exemplu, pentru un paragraf 
Această proprietate permite o valoare negativă, caz în care este creată prima linie.
proprietatea text-indent 
Proprietate
Sens
 
Descriere
 
Exemplu
text-indentare
 
sens 
%

 
Primul rând liniuță
 
text-indent: 15px; 
indentare text: 10%
 


 
 


Lucrul cu proprietățile text-align și text-indent.  Pentru a înțelege mai bine cum funcționează codul, deschideți pagina într-o fereastră nouă și reduceți dimensiunea acesteia.






Aspectul textului pe ecran depinde doar de etichete, nu depinde de spații sau întreruperi de rând.
Toate elementele de design ale documentelor HTML sunt împărțite în două tipuri: inline și bloc.
Elementele inline pot face parte dintr-o linie, dar elementele bloc ocupă întotdeauna un loc separat pe o pagină web și încep întotdeauna cu linie nouă.  Desigur, elementele bloc pot include alte elemente bloc și elemente inline.  Din motive evidente, elementele inline nu pot include elemente bloc.
Combinarea elementelor unei pagini web în blocuri vă permite să le aplicați un singur design și să realizați aspectul.  Va fi suficient să schimbați locația blocului prin schimbarea unei etichete unificatoare.  Desigur, acest lucru este mai convenabil decât schimbarea locației fiecărui element al paginii web în mod individual.
Elementele în linie sunt înconjurate de etichete ...
.
Pentru a încadra elemente de tip bloc, o pereche de 
...

.

Browserele încadrează blocuri div cu întreruperi de linie.
bloc 
nu poate fi amplasat în interiorul unui bloc .

Exemplu
 


 
 


Primul bloc de text
Al doilea bloc de text.






Etichete de formatare a textului de bază
Exemplu
 


 
 


Titlu 
primul nivel
Titlu de al doilea nivel
Titlu de nivel al treilea
Al patrulea nivel al titlului
Titlu de nivel 5
Titlu de nivel șase

Testul paragrafului






Crea fisier text, ca în exemplu.  Salvați-l cu extensia html.
Făcând dublu clic pe numele acestuia din folder va lansa browserul implicit, iar documentul dvs. HTML va fi deja încărcat în el.
Evidențierea în text
Exemplu
 Textul poate fi aldine. Textul poate fi cu caractere cursive.

Textul poate fi subliniat. Textul poate fi tăiat.
Textul poate fi superscript.  Textul poate fi indicele.
Citate, variabile, adrese
...


 
Servește pentru a furniza autorul documentului informații de contact pentru ca oricine să poată contacta autorul materialului.  Afișat de obicei cu caractere cursive.  Element bloc.


 
Evidențierea citatelor.  Element bloc.
...

 
Evidențierea citatelor.  Afișat de obicei cu caractere cursive.
...

 
Afișați textul într-un font cu lățime fixă.  Este folosit, de regulă, pentru a afișa o mică bucată de cod de program (pentru listări mari eticheta 
).

...

 
Evidențierea fragmentelor importante de text.  Afișat de obicei cu caractere cursive.
...

 

...

 
Afișați textul într-un font cu lățime fixă.
...

 
Evidențierea puternică a fragmentelor importante de text.  Afișat de obicei cu font aldine.
...

 
Folosit pentru a marca numele variabilelor.  Afișat de obicei cu caractere cursive.

Etichete HTML care determină alinierea și indentarea textului
 
Text justificat folosit în tipografie
 
Exemplul de mai jos arată cum se aliniază text la lățime pagini:
 
align="left"
 
align="dreapta"


 
Numărul lucrătorilor angajați în sectorul serviciilor și difuzarea informațiilor crește în fiecare zi.  Dacă simbolurile secolelor trecute au fost ferma și fabrica, atunci simbolul actualului secol XXI este un birou dotat cu calculatoare care au acces la fluxul de informații.

align="justify"
 
align="center"
Numărul lucrătorilor angajați în sectorul serviciilor și difuzarea informațiilor crește în fiecare zi.  Dacă simbolurile secolelor trecute au fost ferma și fabrica, atunci simbolul actualului secol XXI este un birou dotat cu calculatoare care au acces la fluxul de informații.

 
Numărul lucrătorilor angajați în sectorul serviciilor și difuzarea informațiilor crește în fiecare zi.  Dacă simbolurile secolelor trecute au fost ferma și fabrica, atunci simbolul actualului secol XXI este un birou dotat cu calculatoare care au acces la fluxul de informații.

Valoarea justificativă asigură uniformitatea aliniați textul la dreapta și la stânga, acesta este în lățime.  Această metodă este utilizată pe scară largă în tipărire.
 
Alinierea textului în HTML la centru și lățime
 
Aliniați textul în HTML centrat, textul la dreapta:
 
Rezultat:
 
Atribute și valori
 
align="left" - definește alinierea textului la stânga(Mod implicit).
 
align="center" - aliniază textul la centru.
 
align="dreapta" - aliniază textul la dreapta.
Aliniați |  Indentarea textului HTML
 
text HTMLși indentarea acesteia în stânga paginii
 
Vom produce indentarea textuluiîn stânga în două moduri:
 
Rezultat:
 

 
Vizualizați în fereastră nouă.
În html, dimensiunea fontului joacă un rol important.  Vă permite să atrageți atenția utilizatorului asupra Informații importante, postat pe pagina site-ului.  Deși nu numai dimensiunea literelor este importantă, ci și culoarea, grosimea și chiar familia lor.
 
Etichete și atribute atunci când lucrați cu fonturi html
Limbajul hipertext are o gamă largă de instrumente pentru lucrul cu fonturile.  La urma urmei, formatarea textului este sarcina principală a html.
Motivul creației limbaj HTML A apărut o problemă cu browserele care afișează regulile de formatare a textului.

Să ne uităm la etichetele care sunt folosite pentru a lucra cu fonturile în HTML și la atributele acestora.  Principala este eticheta .  Folosind valorile atributelor sale, puteți seta mai multe caracteristici ale fontului:

culoare – setează culoarea textului;
dimensiune – dimensiunea fontului în unități convenționale.
Sunt acceptate valorile atributelor pozitive de la 1 la 7.
față – folosit pentru a seta familia de fonturi de text care va fi folosită în interiorul etichetei .  Sunt acceptate mai multe valori, separate prin virgule.


Doar textul situat între părți este formatat pereche de etichete font. Restul textului este afișat în fontul standard standard.

De asemenea, în html există o serie de etichete pereche care specifică o singură regulă de formatare.  Acestea includ:
— setează fontul aldine în html.  Etichetă similar în acțiune cu cel precedent;

— dimensiunea este mai mare decât cea implicită;

— dimensiune mai mică a fontului;

— text italic (italic).  Etichetă similară ;

— text cu subliniere;
- tăiat;
— afișarea textului numai cu litere mici;
- cu litere mari.
Text simplu

Miniatură
Miniatură
Mai mult decât de obicei
Mai puțin decât de obicei
Cursive
Cursive
Cu subliniere
Barat

Capacitățile atributelor de stil
Pe lângă etichetele descrise, există mai multe moduri de a schimba fontul în html.  Una dintre ele este utilizarea atributului stil generic.  Folosind valorile proprietăților sale, puteți seta stilul de afișare al fonturilor:
1) font-family – proprietatea stabilește familia de fonturi.  Este posibil să enumerați mai multe valori. 
Schimbarea fontului în html în următoarea valoare se va întâmpla dacă familia anterioară nu este stabilită sistem de operare utilizator.
Sintaxa de scriere:
familia-font: font-name [, font-name[, ...]]
2) dimensiunea fontului – dimensiunea este setată de la 1 la 7. Acesta este unul dintre modalitățile principale prin care puteți crește fontul în HTML. 
Sintaxa de scriere:
font-size: dimensiune absolută |  dimensiune relativă |  sens |  interes |  moşteni
De asemenea, puteți seta dimensiunea fontului:
În pixeli;
În termeni absoluti ( xx-mic, x-mic, mic, mediu, mare);
În procente;
În puncte (pt).
Dimensiunea fontului: 7
Dimensiunea fontului: 24px
Dimensiunea fontului: x-mare
Dimensiunea fontului: 200%
Dimensiunea fontului: 24 pt

3) font-style – setează stilul de scriere a fontului.  Sintaxă:
stil font: normal |  cursiv |  oblic |  moşteni
Valori:
normal – ortografie normală;
italic – italic;
oblic – font înclinat spre dreapta;
inherit – moștenește ortografia elementului părinte.
Un exemplu despre cum să schimbați fontul în html folosind această proprietate:
font-style:moștenire
stil font: cursiv
stil font: normal
stil font: oblic

4) font-variant – convertește toate majusculele în majuscule.  Sintaxă:
font-variant: normal |  cu majuscule mici |  moşteni
Un exemplu despre cum să schimbați fontul în html cu această proprietate:
font-variant:moștenire
font-variant:normal
font-variant:small-caps

5) font-weight – vă permite să setați grosimea textului (saturație).  Sintaxă:
greutate font: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Valori:
bold – setează fontul html la bold;
bolder – mai îndrăzneț față de normal;
mai ușoară – mai puțin saturată față de normal;
normal – ortografie normală;
100-900 – setează grosimea fontului în echivalent numeric.
greutate font: bold
greutatea fontului: mai îndrăzneață
greutate font: mai ușor
greutate font: normal
greutate font: 900
greutate font: 100

Proprietatea fontului HTML și culoarea fontului
Fontul este o altă proprietate a containerului.  În interiorul său, a combinat valorile mai multor proprietăți destinate schimbării fonturilor.  sintaxa fontului:
font: font-size font-family |  moşteni
Valoarea poate fi setată și la fonturile utilizate de sistem în etichetele de pe diferite controale:
legenda – pentru butoane;
pictogramă – pentru icoane;
meniu - meniu;
mesaj-box – pentru casete de dialog;
small-caption – pentru controale mici;
status-bar – font bara de stare.
font:pictogramă
font:legendă
font:meniu
font: caseta de mesaje
subtitrare
font:bara de stare
font: italic 50px bold „Times New Roman”, Times, serif

Pentru a seta culoarea fontului în HTML, puteți utiliza proprietatea culoare.  Vă permite să setați culoarea folosind cuvânt cheie, si in format rgb.  Și, de asemenea, în cod hexazecimal.