Etichete HTML pentru text: aliniere, dimensiune, font

S-ar părea, de ce știu etichetele HTML pentru text, dacă acum aproape fiecare admin are un convenabil editor vizual, care le stabilește automat?

Faptul este că formatarea conținutului de pe site este fundamental diferită de cea a aplicațiilor de birou. Nu este suficient doar ca textul să arate atractiv, deoarece aspectul corect depinde nu numai de afișarea paginii web, ci și de promovarea acesteia în motoarele de căutare.

Etichete HTML și atribute: elementele de bază ale sintaxei

Orice text are un cod ascuns care "explică" calculatorului ce și cum ar trebui să fie afișat pe ecran. Toate informațiile sunt înregistrate utilizând un set de elemente universale.

De fapt, etichetele HTML pentru text sunt comenzi care adaugă blocuri specifice unei pagini sau își schimbă aspectul. Formatul corect pentru înregistrare este:

Rețineți că nu toate etichetele sunt asociate. De exemplu,
(sărind peste o linie) sau (adăugând o linie orizontală) nu trebuie închisă deloc.

De ce nu puteți copia articole din Word și alte programe în editorul de site-uri

Deși programele moderne de birou utilizează aceleași etichete HTML pentru text, în 99% din cazuri codul nativ nu este potrivit pentru paginile web. Chiar dacă documentul este afișat normal în aplicația în sine, formatarea poate eșua când este inserată pe site. În plus, datorită numărului mare de etichete și atribute inutile, motoarele de căutare nu pot analiza în mod adecvat conținutul paginii. Aceasta, la rândul său, face dificilă promovarea resursei.

Pentru a obține un cod curat și relevant, trebuie mai întâi să ștergeți textul din etichetele HTML create de editorul obișnuit. Există mai multe moduri de a face acest lucru:

1. "Rulați" articolul prin "Notepad" și numai după această inserare pe site. Aplicația șterge toate codurile HTML, deci după aceea va trebui să formatați din nou textul (utilizând instrumentele editorului sau manual).
2. Scrieți și publicați articole prin LiveWriter. Un editor popular de blog generează imediat codul corect. Și într-o filă separată, puteți vedea cum va arăta textul de pe site.
3. Utilizați HTML Cleaner. Acest serviciu online nu distruge în întregime codul, ci doar fragmente suplimentare. Folosind filtre, alegeți ce etichete doriți să salvați. Există, de asemenea, un editor vizual puternic pentru formatare care adaugă comenzi optimizate codului.

Verificați întotdeauna codul HTML înainte de a publica o nouă înregistrare. Nu ar trebui să conțină alte etichete decât cele la care ne vom uita acum.

alineatele

Acest element este prezent în aproape toate articolele. Fiecare paragraf trebuie să fie amplasat în interiorul unui astfel de container - simplifică formatul și vă permite să păstrați un singur stil pe toate paginile site-ului. Pentru comoditate, eticheta

scrieți întotdeauna o nouă linie.

aliniere

O etichetă HTML separată "Alinierea textului" nu a fost folosită mult timp. În schimb, a fost creat atributul universal ALIGN. Pentru a schimba poziția blocului de text pe pagină, trebuie să selectați una dintre cele 3 valori - CENTER, DREAPTA sau STÂNGA. În mod similar, puteți seta o aliniere pentru alte elemente - de exemplu, anteturi.

În unele situații, pentru aliniere se utilizează și alte etichete HTML. Textul din centru, de exemplu, poate fi aranjat utilizând un element

Titlurile și subpozițiile

Sistemul de subcategorii vă permite să creați o structură logică a conținutului. Atunci când textul este împărțit în blocuri semantice, cititorul este mult mai ușor să se concentreze și să învețe noi informații. Motoarele de căutare analizează, de asemenea, anteturile pentru a înțelege ce cereri de promovare a paginii. De aceea, experții SEO recomandă utilizarea cheilor tematice.

HTML utilizează șase niveluri de subtitrări - de la

• . Titlul principal (titlul articolului, bunurile din magazinul online, etc.). În text există doar unul

• ...

  . Subtitlurile celui de-al doilea nivel sparge textul în blocuri semantice. De exemplu, dacă vă clasificați notebook-urile, puteți face mai multe

  cu numele diferitelor modele.

• ...

  . Al treilea nivel este necesar în cazul în care textul dintre două

  de asemenea, sparte în blocuri mici. În exemplul nostru, pot fi criteriile de evaluare - "Performanță", "Memorie", "Placă video" etc. pentru fiecare model.

• ,

  ,

  . În practică, acestea sunt extrem de rare. Dar principiul general este același - ele trebuie să fie "imbricate" în bloc cu o subpoziție de cel mai înalt nivel.

Urmăriți ierarhia corectă. Revenind la exemplul nostru, aceasta înseamnă că nu puteți introduce imediat numele de modele ca

sau

. Și mai mult să folosească omogenă, în sensul subtitrărilor blocuri de diferite niveluri (de exemplu, evidențiați un laptop, pe ultimul loc în clasament, folosind

).

Iată o diagramă care vă va ajuta să înțelegeți instantaneu și să vă amintiți structura corectă a anteturilor în HTML.

liste

Orice enumerări și instrucțiuni sunt mai bine formatate ca liste utilizând etichete HTML speciale pentru text (o greșeală tipică este doar câteva paragrafe

,care încep cu o cratimă sau o cifră).

Structura acestor blocuri este foarte simplă. Mai întâi, definim tipul de listă - etichetat

...

...

Toate elementele se află între etichetele de deschidere și de închidere. Fiecare element din listă începe cu o nouă linie și are un format

selecție font: și atributele sale

Ce pot schimba folosind această etichetă HTML? Dimensiunea textului, fontul și culoarea acestuia - și fără adăugarea de clase noi în CSS. Acest lucru este foarte convenabil când trebuie să selectați doar o propoziție sau un fragment.

are mai multe atribute:

• față. Vă permite să modificați fontul textului. Puteți lista mai multe opțiuni separate prin virgule (Tahoma, Verdana). Dacă utilizatorul nu are primul font instalat, sistemul folosește pur și simplu alternativa.
• dimensiune. Pentru a mări sau micșora textul, specificați în ghilimele o valoare de la 1 la 7.
• culoare. În funcție de design, puteți alege unul dintre nuanțele standard (roșu, verde, albastru) sau introduceți orice cod de culoare de ales.

Nu utilizați paragrafele formatate cu , în loc de subtitrări. Este mai bine să setați aceleași setări pentru eticheta corectă.

Moduri de selectare a textului

Anvelopele cu text monoton, chiar și cu defalcarea pe paragrafe. Pentru a atrage atenția și pentru a încălzi interesul cititorului, se recomandă evidențierea grafică a punctelor-cheie. Iată câteva comenzi care vă vor ajuta să faceți față acestei sarcini.

.... Extrem de populară etichetă HTML. Textul îndrăzneț îți captează imediat ochiul și, prin urmare, cu ajutorul lui este convenabil să evidențieze teze și fapte importante.

Multe etichete confundate și . Din punct de vedere vizual nu există nici o diferență, dar funcționează în moduri diferite. Primul schimbă pur și simplu aspectul textului, iar al doilea efectuează funcția "pointer" și subliniază cele mai importante fragmente (cuvinte cheie și expresii tematice pentru SEO).

.... Cursul italic elegant și strict este ideal pentru proiectarea termenilor științifici, a cuvintelor străine și a unei varietăți de citate. În publicațiile serioase textul înclinat face de asemenea diferența între numele operelor de artă.

.... Poate că atât de multe litigii nu au cauzat nici o etichetă HTML. Subliniați textul Este rar utilizată, deoarece această metodă de alocare a fost atribuită istoric hyperlink-urilor. Dacă utilizați în articole, rețineți că aceasta este potrivită doar pentru fragmente scurte - nu mai mult de 1 rând.

.... O etichetă interesantă care vă permite să faceți o parte trasarea textului. Foarte relevant în publicitate - de exemplu, pentru a sublinia contrastul dintre prețurile vechi și noi.

.... Cea mai ușoară modalitate de a mări dimensiunea fontului fără parametri suplimentari.

.... Lucrează pe același principiu ca și eticheta anterioară. Textul interior este redus în raport cu textul principal.

^.... Numele corect pentru acest format este superscriptul. Practic, această etichetă este destinată pentru grade matematice și note de subsol. Reduce dimensiunea fontului și schimbă textul selectat în sus.

_.... Indicele este adesea găsit în diferite formule. Fragmentul selectat este situat sub textul principal.

Containere semantice

Deoarece unele blocuri au fost găsite în multe texte, au fost create etichete speciale pentru ei. Acest lucru simplifică formatul, deoarece, dacă fiecare tip de conținut are un set propriu de stiluri, este suficient să selectați un fragment din text și să indicați ce informații conțin.

.... O etichetă pentru adăugarea de coduri de computer. Este de neînlocuit în articolele despre programare cu exemple - comenzile nu sunt executate, dar sunt afișate ca text simplu.

.... Acesta este destinat pentru formularea de citate - de exemplu, extrase-cheie din interviu.

...

. Etichetă suplimentară, care conține informații despre autor, inclusiv link-uri.

Linia de separare

Folosind o bară simplă, puteți marca sfârșitul logic al unei secțiuni mari. nu se aplică etichetelor asociate. Aceasta înseamnă că elementul de închidere al formatului nu este necesar.

Utilizând atributul WIDTH, puteți face separatorul mai scurt prin specificarea dimensiunii corespunzătoare în pixeli sau procente din lățimea ferestrei.

Pentru a învăța să utilizați etichete pentru a formata textul în HTML, nu numai că va face articole mai ușor de citit, dar, de asemenea, îmbunătăți eficiența SEO.