Cum arată cursivele? Etichete de formatare a textului HTML de bază - evidențierea textului cu caractere aldine și cursive; opțiuni de dimensiune, culoare și font; etichete de paragraf și titlu

Fontul italic este una dintre cele mai populare moduri de a evidenția o bucată de text și de a-i da o anumită semnificație. Este ideal pentru citate, note de subsol, titluri și nume proprii. Există două etichete speciale în HTML pentru afișarea cursivelor. În CSS, italic este controlat de proprietatea font-style.

Font italic sau italic?

Afișarea aceluiași font cu caractere cursive poate varia.

Imaginea arată trei blocuri de text în același font Playfair Display. Prima este în stil roman normal, în timp ce a doua și a treia sunt italice. Sunt deschise în același browser Google Chrome, dar arată complet diferit.

Faptul este că unele fonturi au propriile seturi de caractere italice. Dacă browserul nu are acces la acest set, dar întâlnește text care ar trebui să fie afișat ca cursiv, va încerca să îl încline singur.

În al doilea bloc - doar o astfel de versiune procesată de browser, iar în al treilea - versiunea originală italica a fontului Playfair Display, care are un stil unic, mai mult ca unul scris de mână. Browserul, pe de altă parte, înclină pur și simplu fiecare caracter al textului într-un anumit unghi, imitând caracterele cursive.

Când vă dați seama cum să faceți italice în CSS sau HTML, este important să rețineți că, în cazul anumitor fonturi, trebuie să vă asigurați că browserul are acces la seturile de italice ale acestora. În unele cazuri, rezultatul algoritmilor de înclinare a browserului poate fi nesatisfăcător.

HTML cursiv

Există două etichete speciale pentru textul italic în HTML: i (de la cuvântul italic) și em. Stilul unui fragment de text inclus în oricare dintre acești descriptori va fi același.

Diferența constă în alocarea logică. Eticheta em indică semnificația specială a fragmentului. Acest lucru este important pentru roboții de căutare și cititoarele de ecran, care vor evidenția textul specificat folosind intonația.

proprietate de stil font

În CSS, cursul este controlat de instrucțiunea stil font. Poate lua una dintre cele trei valori de bază:

  • normal - font normal;
  • italic - stil italic;
  • oblic - stil oblic.

În prezent, majoritatea browserelor moderne tratează valorile oblice și italice în același mod, dar inițial se presupunea că primul este rezultatul unor algoritmi speciali de browser care înclină fiecare caracter spre dreapta.

Dacă fontul pe care îl căutați nu este găsit de browser, atunci italic va arăta exact la fel ca oblic.

Spre deosebire de eticheta em, nu acordă fragmentului evidențiat o importanță deosebită, ci mai degrabă corespunde descriptorului i.

Exemple

Citatele sunt adesea evidențiate cu caractere cursive. Să încercăm să-l facem să arate frumos.

Citat (stil font: italic; chenar-stânga: 5px violet continuu; umplutură-stânga: 20px; )

Pe lângă chenarul decorativ din dreapta și căptușeală, blocul de citate are o regulă de tip font cu valoare italic.

Setează CSS italic.

Acum vom studia etichetele principale. Să începem cu ce etichete sunt necesare pe pagină, formând structura acesteia.

Bloc . Structura celei mai simple pagini

Pagina site-ului este un fișier text simplu cu extensia .html. În interiorul acestui fișier, textul paginii HTML este stocat împreună cu etichete. Acest fișier trebuie să aibă următoarele etichete: tag , care ar trebui să conțină textul întregului site (tot ce este scris în afara acestei etichete va fi ignorat de browser), iar în interiorul lui ar trebui să mai existe două etichete: etichetă pentru conținutul și eticheta serviciului de pagină - pentru textul principal, care este vizibil pe ecranul browserului.

În conținutul serviciului, care se află în interiorul etichetei , apar multe lucruri diferite, dar deocamdată avem nevoie doar de două dintre ele. Aceasta este o etichetă , care specifică titlul paginii care va fi vizibilă în fila browser și eticheta <meta>, care specifică codificarea paginii (este setată în atributul <b>set de caractere</b>și de obicei contează <b>utf-8</b>, mai multe despre asta în videoclip, care va fi cu câteva paragrafe mai jos).</p> <p>De asemenea, înainte de etichetă <html>construcția este de obicei scrisă <b>doctype</b>, care specifică versiunea limbajului HTML în care este realizat site-ul. Versiunea actuală a limbii este numărul cinci și tipul documentar al acesteia ar trebui să arate astfel -<!DOCTYPE html> .</p> <p>Deci, să ne uităm la structura de bază a paginii (pentru a rula acest exemplu într-un browser - copiați-l într-un fișier text cu extensia <b>.html</b>și deschideți într-un browser, dacă aveți probleme cu asta - urmăriți videoclipul de mai jos un exemplu):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Acesta este titlul titlului Acesta este conținutul principal al paginii.

Cum arată acest exemplu în browser, consultați acest link.

Cred că după ce ai citit despre structura de bază a paginii, mai ai o confuzie despre cum arată totul în practică. Prin urmare, am realizat un videoclip special în care vă voi arăta cum să vă faceți prima pagină HTML și să o rulați într-un browser (în el voi vorbi și despre titlul paginii, despre codificări, despre designul codului). Urmăriți-l și abia apoi treceți la citirea ulterioară:

Ei bine, acum, după ce am învățat cum să creăm cele mai simple pagini, vom trece la învățarea etichetelor utile care ar trebui folosite în interiorul etichetei . Acestea vor fi etichete pentru paragrafe, titluri, liste, link-uri și alte lucruri utile. Asadar, haideti sa începem.

Bloc . paragrafe

Unul dintre elementele principale ale paginii este paragrafe. Ele pot fi comparate cu paragrafele dintr-o carte - fiecare paragraf începe pe o linie nouă și are o așa-numită linie roșie (acesta este atunci când prima linie a textului paragrafului se indentează ușor spre dreapta). În mod implicit, nu există o linie roșie, dar este ușor de făcut (mai multe despre asta mai târziu).

Un paragraf este creat folosind o etichetă

Prin urmare:

Acesta este titlul titlului

Acesta este un paragraf.

Acesta este un alt paragraf.

Și încă un paragraf.



Acesta este un paragraf.

Acesta este un alt paragraf.

Și încă un paragraf.

Bloc . Titlurile h1, h2, h3, h4, h5, h6

Pe lângă paragrafe, importante pe pagină sunt titluri. Ele pot fi comparate și cu titlurile dintr-o carte - fiecare capitol are propriul său titlu (titlul acestui capitol) și este împărțit în paragrafe, care au și ele propriile titluri. Ei bine, textul principal al paginii este în paragrafe.

Se creează titluri folosind etichete

,

,

,

,

,
. Au grade diferite de importanță. În titlu h1 ar trebui sa aiba titlul întregii pagini HTML, V h2- Nume blocuri pagini, în h3- numele subblocurilor și așa mai departe.

Toate titlurile sunt aldine în mod implicit și au o dimensiune diferită (aceasta poate fi schimbată prin CSS, dar mai multe despre asta mai târziu). Vezi exemplu:

Acesta este titlul titlului

Titlul h1

rubrica h2

rubrica h3

rubrica h4

rubrica h5
rubrica h6

Acesta este primul paragraf.

Acesta este al doilea paragraf.

Acesta este al treilea paragraf.



Iată cum va arăta codul în browser:

Titlul h1

rubrica h2

rubrica h3

rubrica h4

rubrica h5
rubrica h6

Acesta este primul paragraf.

Acesta este al doilea paragraf.

Acesta este al treilea paragraf.

Bloc . Gras

Știți deja care sunt anteturile implicite gras. Cu toate acestea, puteți, de asemenea, să puneți textul simplu în aldine - doar puneți-l într-o etichetă . Vezi exemplu:

Acesta este titlul titlului

Acesta este text simplu și acesta este gras text.



Iată cum va arăta codul în browser:

Acesta este text simplu și acesta este gras text.

ar trebui să fie folosit în interiorul unei alte etichete, cum ar fi un paragraf. În acest caz, paragrafele creează structura generală a paginii (paragrafe și titluri) și eticheta b Face bucăți individuale de text îngroșate.

Bloc . Cursive

Pe langa grasi, mai poti face cursive folosind eticheta :

Acesta este titlul titlului

Acesta este text simplu și acesta este cursiv text.



Iată cum va arăta codul în browser:

Bloc . Liste

Alături de paragrafe și titluri, există un alt element important al paginii - acesta liste. Astfel de elemente sunt probabil familiare tuturor utilizatorilor de internet. Ele reprezintă o enumerare a ceva (o listă) punct cu punct. Lângă fiecare element din listă este de obicei un cerc umplut (se numește marker listă).

Listele sunt create cu o etichetă