Mai întâi, să vorbim despre titluri. În lecțiile anterioare ați putut vedea cum este folosit textul. Cu toate acestea, împreună cu acesta, există etichete în html care indică titluri: h1, h2, h3, h4, h5, h6. Acestea merg în ordine de la cel mai mare la cel mai mic: h1- cel mai mare titlu, h2- Puțin mai puțin, ei bine h6, ultimul dintre ele este, în consecință, cel mai mic.



anteturi html

Titlul 1


Titlul 2


Titlul 3


Titlul 4



Demonstraţie Descărcați surse
Codul de mai sus va afișa următoarele

Atenţie! Vreau să spun imediat că titlurile trebuie folosite cu grijă! Un robot de căutare care creează o serie de informații pe site-ul dvs. ÎNTÂI analizează titlurile pe baza conținutului. Și dacă, de exemplu, conțin informații goale precum Interesant, Atenţie, Și iată încă ceva interesant, atunci acesta va fi un negativ pentru site-ul dvs.!

Fiți atenți la acest lucru imediat și faceți titluri informativ! De exemplu: Introducere în sociologie, Paradoxul Einstein-Podolsky-Rosen, Biografia lui Horațiu, Perioada jurasică, care ar trebui să conțină semnificația tuturor sau a informațiilor intermediare de pe această pagină.

Formatarea textului în HTML

Probabil ați observat deja că, dacă întrerupeți o linie și continuați să introduceți text în cod, atunci textul în sine apare în continuare într-un paragraf fără întrerupere de linie. Pentru a rupe o linie trebuie să folosiți o singură etichetă brîmpreună transfer forțat.

Cel mai adesea (și mai corect) pentru rupturi de rând și marcaje de paragraf utilizați eticheta p (paragraf). Dacă utilizați această etichetă, paragrafele dvs. vor fi separate prin indentări unele de altele.



paragrafe html

Textul primului paragraf. Textul primului paragraf. Textul primului paragraf. Textul primului paragraf.


Textul al doilea paragraf. Textul al doilea paragraf. Textul al doilea paragraf. Textul al doilea paragraf.



Demonstraţie Descărcați surse

La etichetă p există un atribut alinia, care este responsabil pentru alinierea paragrafelor. Poate avea următoarele semnificații:

stânga- alinierea la stânga
corect- alinierea la dreapta
centru- în centru
justifica- în lățime

Să ne uităm la un exemplu de cod pentru alinierea textului la stânga, la dreapta și la centru



<a href="https://jolly-me.ru/ro/prilozheniya-i-po/esli-teg-font-okazhetsya-ne-zakryt-to-formatirovanie-teksta-v-html---sposoby-i/">alinierea html</a> paragrafe

Textul primului paragraf. Textul primului paragraf. Textul primului paragraf.


Textul al doilea paragraf. Textul al doilea paragraf. Textul al doilea paragraf.


Textul al treilea paragraf. Textul al treilea paragraf. Textul al treilea paragraf.




Demonstraţie Descărcați surse

Există și o etichetă centru. Își concentrează conținutul (text, imagine etc.). Pentru text, efectul său este similar cu alinierea la centru.



centrare în html

Centrare text


Cum se face textul aldine în html?

puternic- evidențierea textului standard cu caractere aldine.
b- evidențierea cuvântului cheie cu caractere aldine. A intrat în uz înainte de eticheta puternică, așa că unii o consideră depășită (cu toate acestea, eticheta este folosită în HTML5). Alături de puternic, este perceput de motoarele de căutare atunci când determină cuvinte cheie și expresii.
Atenţie! Evidențierea textului cu aceste etichete este înțeleasă de Motorul de căutare ca fiind deosebit de importantă.
Atenție:
1. evidențiați numai important cuvinte și fraze
2. cele importante nu sunt un sfert din text. Încerca limita de utilizare a acestei etichete.

Să ne uităm la un exemplu de cod pentru evidențierea textului cu caractere aldine



html bold

Dacă doriți să evidențiați o anumită frază, astfel încât să fie pur și simplu vizibilă pentru utilizator,
de exemplu, un memento, atunci facem asta. Sau așa în cazul cuvânt cheie



Demonstraţie Descărcați surse
Browserul va afișa următoarele:

Ambele cuvinte vor fi evidențiate cu caractere aldine, dar cuvintele vor fi importante pentru Motorul de căutare cuvânt cheie

Cum se pune textul în cursive în html?

i- cursive. Aceste etichete de deschidere și de închidere ar trebui doar să evidențieze informatii importante (cuvinte cheie), pentru că motoarele de căutare va furniza date pe baza acestuia.
ei- cursive standard. Nu există restricții de utilizare.
cita - acest tip cursivele sunt folosite pentru citări, referințe la materiale și autori.
dfn- să evidențieze definiții și termeni.

Să ne uităm la un exemplu de cod cu text cu caractere cursive



Să spunem o pagină despre mașini

Mercedes-Benz este un producător auto german care a fost fondat în 1886.
Numele provine de la două mărci - MercedesŞi Benz.
El este implicat în principal în producție mașini premium, camioane, autobuze.

http://ru.wikipedia.org/wiki/Mercedes-Benz



Demonstraţie Descărcați surse
Va apărea în browser astfel

Cum să evidențiezi textul subliniat în html?

u- subliniere standard (folosită cel mai bine cu cele mai recente specificații html)
ins- așa sunt marcate datele noi (text, explicație) introduse în documentul dumneavoastră (fie adăugate, fie înlocuindu-le pe cele vechi). Evidențiat prin subliniere

Datele din primul și al doilea caz vor fi evidențiate subliniere.

Cum să faci text barat în html?

Textul din următoarele etichete este marcat cu un baraj
del- corectia facuta.
grevă- baraj standard.
s- stenografia pentru grevă



Text barat în html

De două ori doi egali cinci patru. Comun text tăiat



Demonstraţie Descărcați surse

Cum să evidențiezi textul în indice și indice în html?

sub- o etichetă care afișează text sub nivelul liniei într-o dimensiune mai mică a fontului.
cina- o etichetă care afișează text deasupra nivelului liniei într-o dimensiune mai mică a fontului.



indexuri în html

o 2+b 2=c 2- Teorema lui Pitagora.


H 2 O este formula chimică a apei.



Demonstraţie Descărcați surse
Browserul va afișa următoarele:

eticheta fontului în html

Este, de asemenea, folosit pentru a edita text în html eticheta fontului. Cu toate acestea, odată cu introducerea aspectului bloc și popularitatea CSS această metodă Am început repede să uit.

Etichetă font indică parametrii fontului (tip de font, dimensiune, culoare). Are atributele corespunzătoare:

faţă- numele fontului. Puteți furniza mai multe nume de fonturi (separate prin virgule), deoarece utilizatorul care vizionează site-ul dvs. poate să NU aibă un astfel de font în mod implicit sau să nu accepte această limbă. De exemplu, un utilizator din Polonia sau China. În consecință, dacă acest font nu este găsit, atunci este utilizat următorul font din listă.

dimensiune- valori active de la 1 la 7. Fontul implicit este 3.

culoare- culoarea textului. Dacă nu setați parametrul, textul va fi negru.



eticheta fontului în html

Font Tahoma, dimensiune 5, culoare albastru.



Demonstraţie Descărcați surse
Repet, această metodă este depășită, așa că vă sfătuiesc să nu vă obișnuiți să o folosiți.

Este posibil să afișați textul în forma în care a fost tastat? Eticheta PRE

Da, vă puteți face viața mai ușoară și puteți scăpa de multe liniuțe, cratime și alte lucruri. Pentru asta există pre eticheta. Numărul de spații mai mare decât unu în cod este egal cu unu, dar în pre textul rămâne în forma în care a fost introdus.



pre etichetă în html

Cum ai vrut să introduci textul? 
Așa a apărut!  =)



Demonstraţie Descărcați surse
În browser va fi așa

Alte etichete pentru formatarea textului

Tag abr reprezintă abreviere. O abreviere este un cuvânt sau o expresie scurtată. Abrevierile pot fi găsite peste tot, de exemplu, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
atributul titlului



eticheta abbr în html

HTML



Demonstraţie Descărcați surse
Va arăta așa în browser

Acronim de etichetă spre deosebire de o abreviere, denotă un cuvânt stabilit (acronim), care este folosit ca un cuvânt independent. De exemplu: URSS (Uniunea Republicilor Sovietice Socialiste), SIDA (Sindromul Imunodeficienței Dobândite), SUA (Statele Unite ale Americii).
Cuvântul selectat în aceste etichete este evidențiat cu o linie punctată și, atunci când trece cu mouse-ul, afișează conținutul atributul titlului



Etichetă acronim în html

HTML


Bară orizontală în eticheta html sau hr

Pentru a desemna o linie orizontală în html este folosită eticheta hr. Se distinge prin indentări în partea de sus și de jos.

Această etichetă are următoarele atribute:
alinia- alinierea liniei orizontale. Au fost deja menționate tipuri de aliniere: stânga, centru, dreapta.
lăţime- fixează lungimea liniei în pixeli sau procente
dimensiune- grosimea liniei
culoare- culoarea liniei
noshade- înlătură relieful liniei



eticheta fontului în html

Linie obișnuită

O linie în centru cu o lungime de 50% din lățimea blocului, grosimea liniei 2

Linie dreapta, albastră, 200 pixeli



Demonstraţie Descărcați surse
În browser

Vă mulțumim pentru atenție! Lecția a fost lungă și grea! Ai făcut un mare pas înainte!


Eticheta este încă utilizată pe scară largă pentru a bara textul în codul HTML. , care este o scurtă ortografie a etichetei . Printre multele sensuri Cuvânt englezesc„strike” are „barra” și „barra”. Iată cum arată rezultatele utilizării acestor două etichete:

  2. textul eliminat folosind eticheta → text barat folosind eticheta

După cum puteți vedea, rezultatul este identic. Toate browserele moderne înțeleg aceste etichete, dar cu toate acestea, ambele nu sunt recomandate pentru utilizare. Ele sunt complet absente din specificațiile XHTML și HTML5. Și specificația HTML 4.0 este, de asemenea, descrisă ca fiind nedorită.

Motivul pentru aceasta este că etichetează Şi aparțin unei clase de așa-numite etichete de formatare fizică. Adică nu poartă nicio încărcătură semantică și determină doar stilul de afișare a textului. Cu toate acestea, limbajul de marcare HTML în sine este destinat în mod special pentru marcarea semantică a textului. Iar pentru formatarea vizuală se folosesc foile de stil CSS.

Și, deși s-ar putea să nu vă pese de astfel de detalii academice, totuși nu utilizați aceste etichete învechite. Dacă trebuie să barați textul în HTML, este mai bine să utilizați eticheta . Iată rezultatul utilizării lui:

  1. textul eliminat folosind eticheta → text barat folosind eticheta

După cum puteți vedea, vizual nu există nicio diferență între , Şi , dar în sens este o diferență foarte mare.

Etichetă conceput pentru a marca liniile de text șterse. Adică poartă anumite informații logice despre text și aparține clasei așa-numitelor etichete HTML semantice. Formatarea textului ca barat atunci când este aplicat – acesta nu este scopul acestei etichete, ci doar o consecință a esenței sale logice.

Repet încă o dată: dacă nu vă pasă de ideologia limbajului de markup HTML și numai efect vizual, luați în considerare eticheta ca text barat si nu sau . Cel puțin din aceleași motive pentru care scrieți „profesionalism” și nu „profesionalism”.

În plus, eticheta mai funcțional decât Şi . Poate transmite informații suplimentare despre text folosind atributele „cite” și „datetime”:

  • Atribut " cita„ are scopul de a conține un link către un document care oferă motivul ștergerii acestui text și, poate, alte detalii despre editarea lui.
  • Atribut " datetime» are scopul de a indica data și ora editării acestui text.

Ce ar trebui să faceți dacă trebuie să afișați textul barat, dar nu doriți să îl marcați ca șters? După cum am menționat mai sus, CSS vă va ajuta. Mai precis, proprietatea „text-decoration”, care are valoarea „line-through”. De exemplu, așa puteți face:

  1. dosar separat. În el puteți, de exemplu, să descrieți clasa de text barat după cum urmează:

    S ( text-decoration: line-through; ) Acest lucru vă va permite să scrieți în cod HTML astfel:

    1. Text barat CSS → Text barat CSS

    Acest cod este, de asemenea, mai lung decât în ​​cazul , dar dacă doriți să intrați în Web-ul semantic, va trebui să vă împăcați cu o astfel de redundanță. Trimitere fericită!

    Publicații anterioare:

    Pentru a bara textul în HTML, utilizați eticheta grevă:

    1. Elektronik
    2. Syroezhkin
    3. Smirnov
    4. Cijikov
    5. Kukushkina

    Rezultatul executării acestui cod:

    1. Elektronik
    2. Syroezhkin
    3. Smirnov
    4. Cijikov
    5. Kukushkina

    Această etichetă nu are atribute. În loc de o etichetă HTML grevă poate fi folosită și o versiune prescurtată - s(în mod similar, îndrăzneț - b, cursive - i, subliniat - u):

    Constructor LEGO"Nubex"

    După cum puteți vedea, rezultatul este similar:

    Set de construcție LEGO „Nubex”

    Folosind o etichetă sŞi grevă este considerat incorect din punct de vedere al validării codului (este necesar să se folosească un tranzitiv). Sau o altă opțiune este să folosiți CSS.

    Text barat: CSS

    Cu CSS, textul poate fi „descurajat” folosind proprietatea text-decor. Această proprietate poate lua următoarele valori:

    • line-through- folosit pentru a tăia text;
    • subliniază- subliniază textul;
    • supraliniere- folosit pentru a plasa o linie deasupra textului (text supraliniat);
    • clipi- flash-uri de test (în fiecare secundă);
    • nici unul- vă permite să anulați toate efectele aplicate textului.

    Valorile specificate pot fi aplicate simultan, pentru a face acest lucru, trebuie să scrieți parametrii necesari separați de un spațiu. De exemplu, aplicați sublinierea, supralinierea și clipirea în același timp:

    Text-decor: subliniere clipire supralinie;

    Acum să facem textul tăiat la Ajutor CSS:

    Barat <a href="https://jolly-me.ru/ro/set/obtekanie-div-css-kak-sdelat-obtekanie-kartinki-tekstom-v-microsoft/">text CSS</a>- „Nubex”

    Constructor LEGO Site-uri Nubex

    Salutare tuturor! În articolele anterioare am învățat multe despre link-uri și imagini. Acum este timpul să trecem la text. În acest articol voi vorbi despre cele mai populare etichete html care sunt folosite pentru a da textului un anumit aspect.

    Deci, mai întâi, creați un bloc de note gol document text. După aceea, schimbați extensia sa de la txt la html. Îl deschidem simultan folosind un browser și editor de text, de exemplu, același blocnotes. Recomand să folosiți programul în aceste scopuri Macromedia Dreamweaver sau Notepad++.

    Folosind editorul, ne vom edita documentul și vom vedea ceea ce am făcut folosind un browser.

    Pentru ca modificările să aibă efect, trebuie mai întâi să salvați modificările în editor apăsând pe dischetă sau pe combinația de taste Ctr+S, apoi să reîmprospătați același document în browser.

    Titluri de text de diferite niveluri

    Titlurile nu sunt doar o parte importantă a designului textului, ci și unul dintre instrumente optimizare internă. ÎN text html anteturile stabilesc etichete . Pentru a vedea cum vor arăta, scrieți următorul cod în document:

    Plasați aici textul dorit ca titlu

    Cifra 2 de lângă litera h indică nivelul titlului. Există 6 niveluri în total. Primul nivel este titlul articolului. Toate celelalte sunt titluri de secțiuni și subsecțiuni.

    Text îngroșat, subliniat, cursiv

    Etichete , , rezolva cu usurinta aceasta problema
    Acesta este modul în care puteți seta textul aldine în html
    Așa sunt setate italicele
    Acesta va fi textul subliniat

    Dacă trebuie să aplicăm mai multe proprietăți textului în același timp, pur și simplu imbricam etichetele una în alta.

    cursiv aldine

    Modificarea dimensiunii fontului

    Dimensiunea fontului textului este setată în html folosind eticheta , care are un atribut „dimensiune”.

    Dimensiunea fontului 5

    Cum se schimbă culoarea textului

    Culoarea textului este setată de aceeași etichetă folosind atributul „culoare”.

    Text roșu

    Textul așa cum a fost tastat

    HTML are o caracteristică destul de neplăcută. Dacă ați introdus text care are mai multe spații pe rând, unul după altul, browserul va afișa un singur spațiu. În unele cazuri, este necesar să afișați textul exact așa cum a fost introdus. Eticheta este folosită pentru aceasta 

    Acest text va arăta așa cum este tastat

    Ei bine, asta este probabil tot. Desigur, posibilitățile de modificare a textului folosind etichete html sunt destul de limitate. În majoritatea cazurilor, acest lucru nu este suficient. În acest caz, se recomandă utilizarea css. CSS Aceasta este o abreviere, care tradusă în rusă înseamnă foi de stil în cascadă. Vom vorbi mai multe despre asta într-una din lecțiile următoare.

    Text barat

    În general, în HTML puteți seta textul barat folosind trei etichete diferite simultan. Etichete Şi sunt afișate destul de corect în toate browserele, cu toate acestea, nu sunt recomandate pentru utilizare. Nici măcar nu sunt incluse în specificațiile XHTML și HTML5. Deci, pentru a crea text barat, vă recomand să utilizați eticheta .

    Text barat

    Din punct de vedere vizual, rezultatul utilizării acestei etichete nu va fi diferit de primele două. Cu toate acestea, are un sens ușor diferit. Această etichetă ar trebui să fie folosită pentru a tăia informații învechite sau incorecte. Această etichetă are 2 atribute:

    cita - destinat să conțină un link către un document care conține motivul ștergerii acestor informații

    datetime - conceput pentru a stoca ora ultimei editări a informațiilor.

    Să ne uităm la toate modalitățile prin care puteți crea text barat folosind html și CSS. Există două opțiuni de implementare:

    • Prin etichete html , Şi
    • Prin proprietatea CSS text-decoration

    1. Text barat folosind etichete html , Şi

    Tot textul este inclus în etichete html , Şi devine barată. Litera neobișnuită s provine dintr-o abreviere a cuvântului englezesc „strike”.

    Nu există nicio diferență vizuală între toate cele trei etichete. Cu toate acestea, ultima opțiune cu folosind html etichetă este considerat de preferat deoarece este acceptat în standardul HTML5. Alte etichete nu sunt acceptate (desigur vor fi afișate corect, dar nu vor trece validarea).

    Font obișnuit. Text barat prin etichetă

    Text simplu. Text tăiat prin etichetă de avertizare

    Text simplu. Text barat prin del tag

    Se convertește pe pagină în

    Font obișnuit. Text barat prin etichetă

    Text simplu. Text tăiat prin etichetă de avertizare

    Text simplu. Text barat prin del tag

    2. Text barat prin proprietatea de decorare a textului CSS

    CSS are o proprietate de decorare a textului care este responsabilă pentru sublinierea textului.

    Sintaxa text-decor CSS

    text-decor: niciunul|subliniat|supraliniere|linie prin linie|moştenire;
    • niciunul - text fără decor
    • subliniere - subliniere
    • overline - subliniere
    • line-through - text barat
    • clipește - text intermitent (se recomandă să nu folosiți această valoare)

    Ne interesează valoarea line-through, care specifică bararea textului.