Tutoriale HTML - Fonturi, formatare text, blocuri, etichete în HTML

Fonturi

Un font este caracterizat de următoarele atribute:

· culoare (stabilită prin atributul color);

· tipul sau stilul (stabilit prin atributul face);

· mărimea (definită prin atributul size);

· mărimea în puncte tipografice (stabilită prin atributul point-size);

· grosime (definită prin atributul weight).

Culoarea de fond

O culoare poate fi precizată în două moduri:

  • Printr-un nume de culoare. Sunt disponibile cel puţin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.
  • Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.

Culoarea unei pagini se precizează prin intermediul unui atribut al etichetei <body>.
Culoarea fondului paginii Web se stabileşte cu atributul bgcolor al etichetei <body>, de exemplu:

<body bgcolor = culoare>.
Următorul exemplu realizează o pagină cu fondul de culoare gri.

tutorial fonturi html

tutorial fonturi html

Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> după sintaxa:

tutorial fonturi html

<body text=culoare>. În următorul exemplu textul are culoarea roşie.

tutorial fonturi html

O etichetă poate avea mai multe atribute. De exemplu , o etichetă cu trei atribute arată astfel:

<eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.

Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body>:

  • leftmargin ( stabileşte distanţa dintre marginea stânga a ferestrei browserului şi marginea stânga a conţinutului paginii );
  • topmargin ( stabileşte distanţa dintre marginea de sus a ferestrei browserului şi marginea de sus a conţinutului paginii );

Stiluri pentru blocurile de text

Pentru ca un bloc de text să apară în pagină evidenţiat (cu caractere aldine), trebuie inclus între delimitatorii <b>...</b> ( b vine de la "bold" = îndrăzneţ ).
Pentru ca un text să fie scris cu caractere mai mari cu o unitate decât cele curente acesta trebuie inclus într-un bloc delimitat de etichetele <big>...</big>.
Pentru ca un text să fie scris cu caractere mai mici cu o unitate decât cele curente acesta trebuie inclus într-un bloc delimitat de etichetele <small>...</small>.
Pentru ca un text să fie scris cu caractere cursive acesta trebuie inclus într-un bloc delimitat de etichetele <i>...</i> ( i vine de la " italic ").

Pentru a insera secvenţe de text aliniate ca indice (sub-script) sau ca exponent (super-script), aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv <sup>...</sup>.
Pentru a insera un bloc de caractere subliniate se utilizează etichetele <u>...</u> (u vine de la " underline ").
Pentru a insera un bloc de caractere secţionate se utilizează etichetele <strike>...</strike> sau <s>...</s>.

În exemplul următor se utilizează toate etichetele menţionate anterior.

tutorial fonturi html

tutorial fonturi html

Imbricarea etichetelor

Exemplul următor ilustrează că etichetele pot fi imbricate.

  • un fragment de text poate fi scris cu aldine şi cursive în acelaşi timp;
  • pentru un fragment de text se pot folosi simultan stilurile subliniat, exponent, mărit şi cursiv.

tutorial fonturi html

tutorial fonturi html

Blocul „q”

Blocul <q>...</q> permite inserarea in-line a citatelor.
" q " vine de la " in-line quotation " (citate inserate in-line);
Şi blocurile " q " pot fi imbricate.

tutorial fonturi html

tutorial fonturi html

Blocuri de text

Aceste etichete nu se referă la particularităţile caracterelor ce compun textul, ci la funcţiile pe care le poate avea un bloc de text în cadrul paginii Web.
Toate aceste etichete produc automat trecerea la un rând nou şi adăugarea unui spaţiu suplimentar.

Inserarea unei adrese

Dacă într-o pagina web trebuie inclusă o adresă, atunci putem utiliza facilităţile oferite de o etichetă dedicată: <address>...</address>.

Exemplu:

tutorial fonturi html

tutorial fonturi html

Indentarea unui bloc

Pentru ca un bloc de text să fie indentat (marginea din stânga a textului să fie deplasată la dreapta la o anumită distanţă faţă de marginea paginii), acesta trebuie inclus între etichetele <blockquote>...</blockquote>.

Exemplu:

tutorial fonturi html

tutorial fonturi html

Blocul preformatat

Într-un bloc <pre>...</pre>, semnificaţia marcajelor HTML se păstrează.
Blocul <pre>...</pre> este indicat pentru a insera rânduri vide (spaţiu între rândurile succesive). Caracterul " spaţiu " poate fi luat în considerare de browser dacă este inserat explicit prin &nbsp;.

tutorial fonturi html

tutorial fonturi html

Blocuri paragraf

Cu ajutorul etichetei paragraf <p> este posibilă trecerea la o linie nouă şi permite:

  • inserarea unui spaţiu suplimentar înainte de blocul paragraf;
  • inserarea unui spaţiu suplimentar după blocul paragraf, dacă se foloseşte delimitatorul </p> (acesta fiind opţional);
  • alinierea textului cu ajutorul atributului align, având valori posibile " left ", " center " sau " right ".

Exemplu:

tutorial fonturi html

tutorial fonturi html

Blocuri de titlu

Într-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Toate aceste etichete se referă la un bloc de text şi trebuie însoţite de o etichetă de încheiere similară.
Aceste etichete acceptă atributul align pentru alinierea titlului blocului de text la stânga (în mod prestabilit), în centru şi la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari şi aldine, pe când <h6> foloseşte caracterele cele mai mici.

Exemplu:

tutorial fonturi html

tutorial fonturi html

Linii orizontale

Într-o pagină Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a configura o linie orizontală se utilizează următoarele atribute ale etichetei <hr>:

  • align permite alinierea liniei orizontala. Valorile posibile sunt " left " ," center " şi " right";
  • width permite alegerea lungimii liniei;
  • size permite alegerea grosimii liniei;
  • noshade când este prezent defineşte o linie fără umbră;
  • color permite definirea culorii liniei.

Exemplu:

tutorial fonturi html

tutorial fonturi html

Blocuri <center>

Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele pe care le conţine.

Exemplu:

tutorial fonturi html

tutorial fonturi html

Blocuri <nobr>

Blocul de text cuprins între etichetele <nobr>...</nobr> va fi afişat pe o singură linie.

Exemplu:

tutorial fonturi html

tutorial fonturi html

Blocuri <div>

Modalitatea cea mai eficientă de delimitare şi de formatare a unui bloc de text este folosirea delimitatorilor <div>...</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune) este align (aliniere).
Valorile posibile ale acestui parametru sunt:

  • " left " (aliniere la stânga);
  • " center " (aliniere centrală);
  • " right " (aliniere la dreapta).

Un bloc <div>...</div> poate include alte subblocuri. În acest caz , alinierea precizată de atributul align al blocului are efect asupra tuturor subblocurilor incluse în blocul <div>;
Un bloc <div>...</div> admite atributul " nowrap " care interzice întreruperea rândurilor de către browser.

Exemplu:

tutorial fonturi html

tutorial fonturi html