Font HTML italic. Bold, italic, majuscule mici. Text îngroșat: etichetă

Pentru ca pagina noastră WEB să pară mai prezentabilă, împărțim textul în paragrafe și evidențiem titlul. HTML are 6 niveluri de titluri de secțiune a documentului, numerotate de la 1 la 6. Titlurile sunt declarate printr-o pereche de etichete cu numere corespunzătoare nivelului, de exemplu,

- antetul secției de la primul nivel și
- antetul secțiunii de nivelul șase. Titlurile diferă de textul obișnuit prin dimensiunea și lățimea literelor. Titlul de la primul nivel h1 este de obicei afișat într-un font foarte mare, în timp ce titlul de al șaselea nivel h6 este afișat foarte mic.

Titluri

Nu confundați titlurile secțiunilor unui document cu titlul documentului discutat anterior, definit de elementul .

Folosim prima propoziție ca titlu al textului - Pentru a face acest lucru, este suficient să o limităm cu etichete

și

.

Inserați etichete în textul fișierului other.html

și

astfel încât acestea limitează prima propoziție a textului, iar această bucată de cod ia următoarea formă:

Bun venit pe pagina companiei SD!

Să ne uităm la rezultatul obținut.

Salvați fișierul selectând comanda din meniul programului Notepad File - Save (File - Save).

Operația de salvare trebuie făcută întotdeauna înainte de vizualizarea documentului, deoarece deschide fișierul pentru vizualizare încărcându-l în memoria RAM a computerului de pe disc. Dacă nu salvați fișierul după editarea codului HTML, nu veți vedea nicio configurație în browser.

Restaurați fereastra browserului făcând clic pe butonul acesteia din bara de activități.

Apăsați butonul F5 sau butonul Reîmprospătare de pe bara de instrumente a ferestrei de lucru a programului. Fișierul other.html va fi reîncărcat și veți vedea în fereastra browserului cum arată titlul de la primul nivel.

Vedeți cum vor arăta titlurile celorlalte 5 niveluri schimbând numerele din etichete: h2, h3 și așa mai departe După fiecare configurare, nu uitați să salvați fișierul și să reîmprospătați imaginea în fereastra browserului.

Când terminați experimentele, restaurați din nou etichetele din fișierul other.html

.

Folosind cele 6 niveluri de titluri pe care le pune la dispoziție limbaj HTML, se poate face simplu document lizibil cu o structură intuitivă. Amintiți-vă că documentul dvs. va citi întotdeauna mult mai bine dacă are o împărțire precisă în secțiuni și subsecțiuni.

Alinierea capului

În mod implicit, titlul este aliniat în partea stângă a paginii. Dar poate fi și aliniat la dreapta sau centrat. Pentru alinierea la dreapta într-o etichetă

se folosește atributul align="right" și align="center" pentru centrare. Este permisă și indicația evidentă a alinierii pe partea stângă - align="left".

Adaugă la etichetă

atributul align="center" pentru a centra titlul. Acest element ar trebui să ia următoarea formă:

Bun venit pe pagina companiei SD!

Pe viitor, nu vă vom aminti de necesitatea de a salva fișierul cu codul inițial și de a actualiza imaginea în browser înainte de vizualizare.

Cum să faci textul aldine în HTML

Acum să trecem la restul textului. Măriți-i dimensiunea și faceți textul aldine italic. Etichetele pereche sunt folosite pentru a seta stilul îndrăzneț .

Lipiți în fișierul de deschidere other.html si inchidere etichete astfel încât să limiteze textul Aici veți învăța... Acest element ar trebui să ia următoarea formă:

Cum se face textul italic în HTML

Stilul italic este setat folosind etichete .

Introduceți o etichetă HTML în codul inițial și astfel încât elementul editat să ia următoarea formă:

Aici veți afla despre activitățile noastre, despre produse software despre compania noastră și echipamentele pe care le producem

Elementele de marcare pot fi imbricate, ca în această structură, unde elementul imbricat în element . Browserele moderne sunt capabile să gestioneze corect etichetele imbricate. Prin urmare, trebuie să vă asigurați că ordinea de cuibărit nu este încălcată. Browserul va fi împiedicat dacă imbricarea este întreruptă. De exemplu, următoarele ar fi incorecte: . Imbricarea este o parte foarte fundamentală a culturii generale de scriere a codului HTML.

Cum să faci text subliniat în HTML

Cu câteva etichete puteți seta stilul de subliniat al unei părți de text delimitată de aceste etichete și folosind o pereche de etichete - afișați textul în font teletype.

De remarcat faptul că recent eticheta simplificată și sublinierea se face folosind stiluri. echivalent . Da, noul analog pare mai greoi, dar, din păcate, este mai adevărat. Principalul lucru în această favoare este că varianta voluminoasă este cross-browser, cu alte cuvinte, este potrivită pentru toate browserele, când ambele Nu toate browserele acceptă.

Cum să incrementați textul în HTML

Acum să mărim dimensiunea fontului textului. Acest lucru se poate face în diferite moduri.

Etichete măriți dimensiunea fontului textului cuprins între ele.

Adăugați etichete la începutul și, respectiv, la sfârșitul piesei de cod de mai sus și astfel încât elementul să ia următoarea formă:

Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem.

Utilizarea etichetelor puteți reduce dimensiunea fontului textului în comparație cu cea inițială.

O altă metodă de a specifica dimensiunea fontului este cu etichete. cu atributul dimensiune. Valorile acestui atribut sunt numere întregi de la 1 la 7. Valoarea 1 corespunde celei mai mici dimensiuni de font, iar valoarea 7 corespunde celei mai mari.

Folosind în loc de etichete vizualizați etichetele , vedeți cum se modifică dimensiunea fontului textului cu diferite valori ale atributului dimensiune - de la 1 la 7.

De asemenea, puteți utiliza numere de la 1 la 7 cu semnul + (plus) sau - (minus) ca valoare pentru atributul dimensiune. În acest caz, dimensiunea fontului crește sau scade în mod corespunzător, în comparație cu cea inițială, de exemplu, etichetele va crește dimensiunea fontului, comparativ cu cel actual, cu un nivel. Verifica.

Setați 5 ca valoare a atributului dimensiune pentru fragmentul de text în cauză: . Codul HTML pentru această piesă ar trebui să arate astfel:

Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem..

În etichete atributul color poate fi folosit și pentru a specifica culoarea fontului delimitată de etichete text. Valorile acestui atribut sunt aceleași ca și pentru atributele discutate anterior care descriu culoarea fundalului și a textului documentului.

În mod implicit, paragraful cu textul Aici veți ști... este aliniat la stânga. Centrați-l orizontal cu etichete

. De asemenea, puteți alinia un paragraf în partea dreaptă a paginii folosind etichete. sau în stânga - folosind etichete .

Lipiți etichete

limitându-le la paragraful desemnat.

Rețineți că am folosit etichete pentru a centra paragraful

, spre deosebire de atributul align="center", pe care l-am aplicat în etichete

.

Atenţie! Pentru etichetele 2010 ,

, , sunt considerate învechite și, prin urmare, este necesară utilizarea analogilor din stiluri. Asta nu înseamnă că nu le poți folosi, dar dacă poți, încearcă să scapi de ele.

=

=

=

=

=

Există, de asemenea, un număr mare de altele etichete învechite, care nu sunt descrise în acest articol, de aceea este mai bine să vă familiarizați imediat cu site-urile WEB specializate pe această problemă. Dar pe cele principale le-am postat aici puțin mai sus

Codurile de selecție

Limbajul HTML permite două abordări ale selectării fontului fragmentelor de text. Pe de o parte, puteți indica direct faptul că fontul dintr-o anumită secțiune a textului poate fi aldin sau italic, cu alte cuvinte, este evident să indicați stilul fontului textului, așa cum am făcut în acest experiment. Pe de altă parte, este posibil să marcați orice bucată de text ca având un fel de stil logic, care este mai frumos decât de obicei, lăsând acel stil să fie interpretat de browser. În acest fel, stilul logic arată rolul piesei de text, de exemplu, marea sa importanță în comparație cu textul obișnuit, sau faptul că această piesă este un citat. LA Propria munca veți putea folosi etichetele ulterioare care definesc stiluri logice. Verificați cum funcționează în diferite browsere.

- folosit pentru a defini un cuvânt. Textul este afișat implicit cu caractere cursive.

- pentru a evidenția cuvintele și a amplifica. Textul este afișat implicit cu caractere cursive.

- pentru a evidenția titlurile cărților, filmelor, spectacolelor și așa mai departe, afișate implicit cu caractere cursive.

- pentru fragmente de cod de program. Afișat pe afișaj într-un font cu lățime fixă.

- folosit pentru textul pe care utilizatorul îl introduce de la tastatură. Poate fi afișat în diferite fonturi în diferite browsere. Etichetă depreciată.

- servește la afișarea mesajelor programului. Afișat într-un font cu lățime fixă. Etichetă depreciată.

- pentru fragmente deosebit de importante. De obicei evidențiate cu aldine.

- este folosit pentru a indica faptul că o bucată de text sau un cuvânt este o variabilă caracter, cu alte cuvinte, text care poate fi înlocuit cu diferite expresii. Afișat implicit cu caractere cursive. Etichetă depreciată.

Specificația HTML 4.0 oferă o metodă mai avansată de specificare a stilurilor pentru text și alte părți, folosind limbajul CSS Cascading Style Sheets. Foile de stil reprezintă o realizare uriașă în domeniul web design-ului, extinzând capacitatea de a îmbunătăți aspectul paginilor. Foile de stil facilitează definirea spațierii liniilor, a indentațiilor, a culorilor utilizate pentru text și fundaluri, a dimensiunii și stilului fontului și așa mai departe. Ca valoare a atributului de stil, sunt folosite perechi de forma „proprietate: valoare”. De exemplu, într-o bucată de cod care descrie un titlu de secțiune,

atributul style="color: blue" specifică faptul că proprietatea culorii este setată la albastru, adică textul antetului de la primul nivel ar trebui să fie afișat în albastru.

Alinierea stilului

Să vedem cum să folosiți limbajul foaie de stil în cascadă pentru a specifica stilul unei piese de text care începe cu cuvintele Aici veți învăța...

Pentru a specifica greutatea fontului, utilizați proprietatea font-weight cu valorile mai ușor (îngust), bold (bold), bolder (bold), de exemplu, style="font-weight: bold".

Pentru a defini stilul italic, utilizați proprietatea font-style cu valoarea italic. Prin urmare, pentru a face textul bold italic, ar trebui să găsiți atributul de stil astfel: style="font-weight: bold; font-style: italic". Vă rugăm să rețineți: caracteristicile pot fi plasate în orice ordine și trebuie separate prin punct și virgulă.

Dacă doriți să specificați dimensiunea fontului, atunci ar trebui să utilizați proprietatea font-size, ale cărei valori pot fi specificate în valori relative sau absolute. Valorile relative sunt procente, iar valorile absolute sunt puncte (pt), pixeli (px), centimetri (cm), milimetri (mm). De exemplu:

style="font-size: 200%"

style="font-size: 16pt"

style="font-size: 100px"

Prin specificarea dimensiunilor absolute, mai degrabă decât relative, privați utilizatorii care se uită la paginile dvs. de capacitatea de a mări sau micșora dimensiunea fontului folosind comanda meniului browserului în conformitate cu viziunea și rezoluția monitorului. Fonturile vor fi afișate numai în dimensiunea specificată de dvs. Prin urmare, este mai bine să specificați dimensiunea fontului ca procent. În acest caz, dimensiunea fontului va fi mai mică sau mai mare cu procentul indicat decât atunci când este formatat folosind eticheta HTML implicită.

Pentru a determina metoda de aliniere orizontală a textului, proprietatea text-align este utilizată cu valorile stânga (la stânga), dreapta (la dreapta), centru (în centru), justificare (în lățime). În acest fel, pentru a indica faptul că textul Aici veți învăța... ar trebui să fie formatat cu caractere aldine italice cu o dimensiune de 150% din inițial și aliniat la centru, stilul său ar trebui găsit după cum urmează:

style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center"

Vom aplica acest atribut în etichete<р>, care vă permit să prezentați textul ca un paragraf separat.

Editați elementul HTML pentru a include text Aici veți afla... prin eliminarea etichetelor

, , , și inserarea etichetelor<р>șicu atributul style, astfel încât acest element să ia următoarea formă:

<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Aici veți afla despre activitățile noastre, despre produsele software ale companiei noastre și despre echipamentele pe care le producem.

Vedeți, limbajul HTML permite o varietate de tehnici de stilare. În același timp, utilizarea limbajului tabelelor în cascadă stiluri css este mai de dorit.

Alte opțiuni de aliniere și stil

Am văzut o singură utilizare a limbajului foii de stil, în care definiția stilului este plasată în mod specific în eticheta elementului pe care îl descrieți.

Acest lucru se face folosind atributul style, care este folosit cu majoritatea etichetelor HTML standard. Dar există și alte utilizări pentru CSS.

În HTML standard, fără introducerea foilor de stil, pentru a atribui anumiți parametri oricărui element, precum culoarea, dimensiunea, poziția pe pagină și altele asemenea, trebuie să conturați aceste caracteristici pentru fiecare element de fiecare dată, chiar dacă Sunt necesare 10 pagini pentru a fi plasate pe o pagină.ki astfel de părți care nu diferă unele de altele. Trebuie să inserați aceeași bucată de cod HTML în pagină de 10 ori, mărind dimensiunea fișierului și timpul de descărcare din rețea.

Foile de stil funcționează într-un mod diferit, mai confortabil și mai economic. Pentru a atribui anumite caracteristici oricărui element, trebuie mai întâi să conturați acest element și să găsiți această descriere ca stil, iar în viitor, să indicați pur și simplu că elementul pe care doriți să-l stilizați corespunzător ar trebui să capete caracteristicile stilului pe care l-ați descris. . Confortabil, nu-i așa?

Mai mult, puteți salva descrierea stilului nu în textul paginii dvs. WEB, ci în dosar separat- acest lucru vă va permite să utilizați descrierea stilului pe orice număr de pagini WEB. Și un alt avantaj asociat este capacitatea de a schimba designul oricărui număr de pagini, corectând doar descrierea stilului într-un fișier separat.

În plus, limbajul foii de stil vă permite să lucrați cu designul fontului paginilor pentru și mai mult cel mai înalt nivel decât HTML standard.

În prezent, limbajul CSS are un număr destul de mare de opțiuni pentru părțile HTML pe care le poate controla. Prin aplicarea „safe”, cu alte cuvinte, compatibil cu cel mai mare număr de browsere elemente css- caracteristicile fontului, culorile părților și fundalului, caracteristicile textului și a chenarelor - vă puteți facilita foarte mult munca și vă puteți face paginile WEB mai atractive în ceea ce privește designul textului.

În HTML, textul aldine poate fi creat în mai multe moduri. Acestea includ:

  • Etichetă b;
  • Etichetă puternic;
  • proprietate CSS grosimea fontului.

Să vorbim despre fiecare dintre opțiunile de selectare a textului în ordine.

Text îngroșat: etichetă

Etichetă b HTML-ul se aplică astfel:

Creator de site-uri web „Nubex”

Pentru Tag trebuie să aibă o închidere, și atribute generice (cum ar fi clasă, id, titlu etc.)

Deși valabilitatea etichetei bși nu este depreciat de specificațiile HTML, mai relevant pentru utilizare este eticheta puternic sa vedem de ce.

Text îngroșat: etichetă

Conform specificației HTML, eticheta b Folosit pentru a face textul aldine. În schimb, eticheta puternic HTML servește la evidențiere important frah, cuvinte cheie pentru această pagină.

Această etichetă este de mare importanță atunci când se clasifică paginile în rezultatele căutării, așa că este utilizată pe scară largă în promovarea site-urilor web și optimizarea SEO. Motoarele de căutare respectă textul inclus în etichete , și marcați-l ca important.

Etichetă folosită puternicîn același mod:

Creator de site-uri web „Nubex”

Este posibil să observați că se aplică extern etichete și nu diferă deloc (pentru că toate browsere moderne interpretează-le aproape la fel), dar diferențele semantice în cod pentru motoare de căutare, cu toate acestea, au unde să fii. Prin urmare, majoritatea SEO recomandă utilizarea etichetei puternic.

Text îngroșat cu CSS

Am remarcat deja importanța etichetei puternicîn timpul promovării căutării, dar ce să faci dacă trebuie să evidențiezi un numar mare de text bold (dar textul nu trebuie marcat ca important pentru motoarele de căutare) sau este necesar să se controleze gradul de „îndrăzneală” al fontului? În astfel de cazuri, este utilizată proprietatea CSS grosimea fontului. Se aplică după cum urmează:

Text îngroșat cu CSS - „Nubex”

Site-urile noastre sunt cu adevărat pas imensîn dezvoltarea web.

O facem pe bune calitate site-uri.

Aveți încredere în noi și vom face nu te vom dezamăgi.

Valori mai îndrăznețși mai usoara poți seta gradul de îndrăzneală mai mult (sau mai puțin) decât părintele. Valoarea numerică (100-900) poate fi utilizată pentru a seta gradul de conținut de grăsime.

Există trei moduri de a face textul aldine Pagina HTML, dar nu vă grăbiți să utilizați imediat pe unul care vă place, deoarece o astfel de selecție poate avea o semnificație diferită și poate afecta optimizarea site-ului pentru motorul de căutare.

Font aldine cu etichetă puternică

Această metodă este potrivită dacă doriți să puneți în aldine o parte importantă a textului. Eticheta HTML este o etichetă de formatare logică și esența sa este de a „sublinia” importanța fragmentului selectat.

Există și alte etichete de formatare logică în HTML. De exemplu, eticheta evidențiază textul cu caractere cursive și indică accentul pe fraza selectată.

Alte tipuri de selecție de text sunt descrise în articol:.

text simplu a evidențiat o parte importantă de text. Text simplu.

Text îngroșat cu etichetă b

text simplu text îngroșat. Text simplu.

Stiluri CSS aldine

Textul îngroșat poate fi făcut nu numai cu ajutorul special Etichete HTML. Puteți face aldină pe orice etichetă setând proprietatea font-weight: bold; (nu funcționează pentru toate fonturile).

O astfel de selecție va fi de natură stilistică, fără a adăuga greutate logică textului selectat.

În plus, puteți selecta simultan atât o etichetă specifică, cât și un grup de elemente, setând stiluri printr-o clasă CSS.

Proprietatea CSS din atributul style:

Text cu caractere aldine.

Text cu caractere aldine.

Text în font normal.

Text cu caractere aldine.

Ce să faci dacă nu poți face textul aldine

Dacă nu puteți face textul îngroșat, este probabil ca site-ul dvs. să fi înlocuit stilurile de elemente CSS. În acest caz, va trebui să ajustați aceste stiluri. În cele mai multe cazuri, acest lucru se va face prin fișierul principal al foii de stil CSS. Dacă nu înțelegeți acest lucru, contactați webmasterul. Cu un grad ridicat de probabilitate, nu va dura mai mult de 5 minute de lucru pentru a rezolva această problemă (deși, desigur, pot exista și excepții).

Continuăm să lucrăm cu fonturi și în această lecție ne vom uita la modul în care sunt setate proprietățile pentru a da fontului un aspect aldine sau italic. Până acum, ne-am gândit cum creați font aldine sau cursive prin utilizarea HTML Etichete. Dar după cum știm deja HTML nu ar trebui să fie folosit pentru a proiecta un document, este destinat doar să creeze markup, structura paginii, așa că trebuie să stilați totul printr-o foaie de stil css. Și acum să vedem cum sunt stabilite astfel de proprietăți.

Font CSS italic

Proprietatea ajută la formatarea textului cu caractere cursive. stilul fontului: ; , căruia i se atribuie valoarea cursiv , care înseamnă „Stilul fontului este italic”.

Acum să ne imaginăm că sunt multe paragrafe pe pagină și unul dintre ele trebuie scris în italic. Ceea ce facem este să creăm o clasă pentru paragraful dorit și apoi să specificăm că elementul cu acea clasă ar trebui să fie italic.

HTML

Pagina HTML

Al patrulea paragraf Al patrulea paragraf Al patrulea paragraf

Setați proprietatea pentru fontul italic.

Dacă ați creat astfel de paragrafe și ați stabilit o proprietate pentru ele, atunci textul celui de-al doilea paragraf a devenit italic. Am stabilit proprietatea pentru întregul paragraf, dar acum să facem totul mai dificil și să setăm italic doar pentru două cuvinte din al patrulea paragraf. Cum să facă acest lucru? LA HTMLÎn lecție, am analizat eticheta de nivel logic . Această etichetă este folosită doar pentru astfel de situații când pentru o parte a elementului trebuie să setați o clasă. Și așa încorporăm eticheta în al patrulea paragraf și îi atribuim o clasă clasa=„italic”> . Ca rezultat, obținem următoarea intrare:

HTML

Primul paragraf Primul paragraf Primul paragraf Primul paragraf

Al doilea paragraf Al doilea paragraf Al doilea paragraf Al doilea paragraf

Al treilea paragraf Al treilea paragraf Al treilea paragraf Al treilea paragraf

Al patrulea paragraf Al patrulea paragraf Al patrulea paragraf

Al cincilea paragraf Al cincilea paragraf Al cincilea paragraf Al cincilea paragraf


Cursiv( stilul fontului: cursiv; )

Al doilea paragraf și o parte din al patrulea paragraf sunt acum afișate cu caractere cursive. LA demonstrație acest lucru se arată clar.

CSS aldine

Pentru a seta fontul aldine, se folosește o altă proprietate, numită grosimea fontului: ; cu alte cuvinte, se mai numește și saturație de font. Saturația este setată inițial la normal adică saturația fontului este normală, iar prin setarea valorii îndrăzneţ va deveni îndrăzneț.

Bold (greutate font: bold ; )

De asemenea, puteți seta valoarea de saturație cu numere de la 100 inainte de 900 pas cu pas 100 . Sens normal echivalează cu un număr 400 , și valoarea îndrăzneţ figura 700 . Sens 900 nu este acceptat de toate fonturile, așa că prin setarea acestei valori este posibil să nu observați diferența față de valoare 700 . Această condiție arată astfel:

Bold (greutate font: 700 ; )

LA html codul faceți exact același lucru: dacă trebuie să selectați întregul paragraf, atunci întrebați-l noua clasa, dacă face parte din text, atunci utilizați eticheta clasa=„italic”> . Luați în considerare un mic exemplu:

HTML

Pagina HTML

Primul paragraf Primul paragraf Primul paragraf Primul paragraf

Al doilea paragraf Al doilea paragraf Al doilea paragraf Al doilea paragraf

Al treilea paragraf Al treilea paragraf Al treilea paragraf Al treilea paragraf

Al patrulea paragraful patru paragraful patru paragraf

Al cincilea paragraf Al cincilea paragraf Al cincilea paragraf Al cincilea paragraf

Bold( grosimea fontului: bold; )

Drept urmare, am evidențiat în text aldin o parte a celui de-al patrulea paragraf, unde este în același timp cursiv, și întregul paragraf al cincilea. Iată încă două proprietăți pe care le-am studiat. Sunt folosite destul de des, așa că merită să ne amintim că:

  • Fontul italic este setat: stilul fontului: cursiv; .
  • Fontul aldine este setat: grosimea fontului: îndrăzneţ; .
  • Pentru a readuce fontul la saturația normală, setați valoarea: grosimea fontului: normal; sau valoare grosimea fontului: 400 ; , care în acest caz înseamnă același lucru.

Aici am luat în considerare încă două proprietăți ale fonturilor. Vezi in Demo ce ar fi trebuit să vi se întâmple până la urmă și trecem la studiul următoarelor proprietăți.

Salutare dragi cititori ai blogului! Acest articol va vorbi despre etichete de formatare a textului. Exemple proeminente fac textul îngroșat sau cursiv. Vom avea în vedere și influența unor etichete asupra optimizării interne a site-ului și a regulilor de scriere a acestora. Puteți citi despre asta în articolul de mai jos. Apropo, puteți găsi elemente de design text similare în multe editoare de text, de exemplu, în Word.

Etichetele sunt împărțite în 2 tipuri: bloc și inline. Când utilizați primul, puteți modifica conținutul unei părți a textului (linii, fragmente individuale sau cuvinte), iar cele din urmă sunt . Etichetele de formatare pe care le vom acoperi în acest articol sunt predominant inline.

Reguli și ordinea scrierii etichetelor

Știți deja ce sunt etichetele de deschidere și de închidere. Dacă nu, atunci citiți articolul de la începutul acestui material. Pe scurt, există două tipuri de etichete: single (de exemplu, transfer to linie nouă
) și container (pereche). Deci, toate etichetele de formatare a textului sunt pereche. Aceasta înseamnă că orice element are o etichetă de deschidere și de închidere, iar evidențierea trebuie plasată între ele. De exemplu, selectarea corectă a unei fraze ar arăta astfel: Selecţie

Când browserul procesează acest fragment, veți vedea următorul text: Fragment selectat. Apropo, toate etichetele nu sunt afișate în fluxul RSS ().

Principalul lucru atunci când scrieți etichete este să nu uitați să le închideți. În caz contrar, tot textul de pe pagină va fi aldine (în exemplul cu eticheta ). Dar există cazuri când trebuie să selectați un anumit fragment atât cu caractere aldine, cât și cu caractere cursive în același timp. Dar nu există nicio etichetă care să efectueze această acțiune. Există o singură cale de ieșire din această situație: folosiți două etichete în același timp. Nu contează în ce ordine le folosiți. Prin urmare, scrieți textul cu etichete ca aceasta:

Selecţie

sau cam asa:

Selecţie

Încă mai primești Selecţie cursiv și îndrăzneț în același timp. Cu toate acestea, este de preferat să folosiți prima variantă, deoarece inițial a fost singura și corectă. De asemenea, nu uitați că fiecare browser poate procesa etichetele în mod diferit (), în funcție de setări. Acum să trecem la etichetele de formatare în sine.

Crearea textului aldin și italic - etichete , , și

Cel mai etichete populare formatarea textului - evidențierea acestuia îndrăzneţși cu caractere inclinate. De obicei sunt folosite pentru a da importanță oricărui fragment. Primul caz servește la selectarea unui fragment care conține Informatii utile sau Cuvinte cheie. Cursivele servesc aceluiași scop ca și textul aldin, dar informațiile sunt mai puțin importante, deoarece caracterele cursive sunt mai puțin vizibile pe fundalul corpului textului decât textul aldin.

Sa incepem cu făcând textul aldine. Există două etichete utilizate pentru această acțiune − și . Diferențele în aspect Nu. Deși, având în vedere că fiecare browser poate interpreta diferit fiecare element, ar trebui să puteți vedea unele diferențe. Așa arată textul din etichete și în forma deja procesată de browser:

Text în etichete puternice

Text în etichete b

Și iată cum arată aceste două rânduri în codul sursă al paginii:

Text în etichete puternice Text în etichete b

Aceeași situație o putem observa și în cazul etichete italice și . Încercați să găsiți diferențele dintre cele două exemple:

Text în etichetele em

Text în etichetele I

Dar sursă:

Text în etichetele em Text în etichetele I

Deci, etichetele de selecție considerate îngroșate și cursive nu diferă de fapt, dar de ce atunci avem nevoie, de exemplu, de eticheta în cazul în care există ? La urma urmei, acesta din urmă conține un singur caracter (fără a număra paranteze) și, prin urmare, este mai ușor de scris. Și chestia este că etichetează și a afecta . Dacă înconjurați cuvintele cheie cu aceste etichete, acest lucru va avea un efect pozitiv asupra promovării site-ului. Principalul lucru este să nu exagerați - textul trebuie să aibă maximum 5% text aldine în etichetă. , și aceeași cantitate de italice în etichetă .

Dacă doriți doar să evidențiați un punct din text, atunci utilizați eticheta sau . În general, cred că motoarele de căutare consideră și textul din aceste etichete ca fiind mai important, dar pe optimizare internă au tot mai puțin efect decât și .

Evidențiați etichetele slash de text − , și

Acum să ne uităm la câteva etichete care folosesc o lovitură în decorarea textului. Cel mai faimos pentru tine editori de textetichetă sau subliniere. Această etichetă nu afectează clasamentul (din câte știu eu), dar va ajuta la evidențierea unui text și la concentrarea asupra acestuia. Am dat un exemplu de utilizare a acestei etichete puțin mai sus.

Încă două etichete similare - și . Ambele îndeplinesc funcția de text barat. Puteți utiliza această etichetă în orice situație: dacă actualizați un document (sau mai degrabă o parte din acesta), îl puteți tăia pe cel vechi și adăugați unul nou; dacă aveți de gând să scrieți ceva care se abate de la subiectul materialului; ceva care nu corespunde standardelor morale și etice.

Diferențele dintre aceste două etichete sunt doar în lor scris, drept urmare este de preferat să se folosească primul, deoarece în primul rând, este mai convenabil să scrii și, în al doilea rând, va fi mai puțin cod HTML pe pagina ta, iar motoarele de căutare le place.

Etichetă și atribute - setările fontului textului

Acum luați în considerare o etichetă care nu este folosită fără atribute. Vă permite să setați parametrii pentru anumit fragment text. În general, acum este de preferat să se utilizeze (foile de stil în cascadă), deoarece folosindu-le, puteți reduce foarte mult întregul cod HTML al paginii. Deci, luați în considerare aceeași etichetă . Pentru el există de toate trei atribute:

  • față- fontul în sine. De exemplu, Arial, Courier sau Verdana. Puteți enumera câteva, pentru că. nu toți utilizatorii au un set extins de fonturi, iar prin scrierea mai multor în atributul face, browserul va putea alege pe care să îl folosească sau, mai degrabă, care este prezent în sistem;
  • mărimea este un atribut care specifică dimensiunea textului. Poate fi exprimat atât în ​​unități arbitrare, cât și în pixeli;
  • culoare- culoarea textului. Acest atribut poate fi folosit atât în ​​codurile de culoare HTML, cât și în cele verbale. Primele arată ca #FFFFFF (unde F este orice număr sau literă de la A la F), în timp ce cele din urmă sunt scrise în cuvinte simple(de exemplu, roșu - roșu).

Așa arată textul din etichetă folosind fiecare atribut:

Acest text are 6 pixeli


Acest text este roșu

Acest text este în font Arial

Acest text este roșu și are dimensiunea de 5 pixeli.

Și iată ce veți vedea după procesarea codului scris:

Elemente de proiectare a textului bloc - Titluri

-

, paragraful

În cele din urmă, ne vom uita la elementele bloc, care sunt utilizate în aproape fiecare document. Acestea sunt etichete de titlu și paragraf. Să luăm în considerare primul. Titlurile vin în 6 tipuri și fiecare are propria etichetă. Fiecare specie are doar propriul număr de serie și este înregistrată folosind etichete.

,

,...,

. Iată cum arată toate anteturile atunci când sunt procesate:

Numărul de după cuvântul din titlu corespunde numărului din etichetă . Titlurile au un impact uriaș asupra optimizării paginii, așa că includeți-le în etichete Cuvinte cheie. Există destul de multe caracteristici ale acestui caz, pe care le voi discuta în articolele următoare.

Acum să vorbim despre eticheta de selecție a paragrafului

Funcția acestei etichete este de a separa textul de alt text similar cu o linie goală. Dacă te uiți la codul sursă al oricărui document, poți vedea următoarele:

Dreptunghiurile verzi conțin un paragraf, dreptunghiurile roșii altul. Și iată cum arată acest cod după procesarea de către browser (săgeata indică o linie goală):

Drept urmare, obținem o separare destul de vizibilă a unui paragraf de altul, ceea ce este benefic - citirea devine mai convenabilă.

Acesta este sfârșitul articolului despre etichete de formatare a documentelor. Sunt mult mai multe decât am descris în acest articol. Doar că unora trebuie să li se spună destul de multe, drept urmare articole separate cu o recenzie completă le vor fi dedicate.!