Tutoriale HTML - Fonturi, formatare text, blocuri, etichete în HTML
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).
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.
Acest lucru se face prin intermediul atributului text al etichetei <body> după sintaxa:
<body text=culoare>. În următorul exemplu textul are culoarea roșie.
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.
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.
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.
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:
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:
Î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 .
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:
Î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:
Î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:
Blocul introdus de etichetele <center>...</center> aliniază centrat toate elementele pe care le conține.
Exemplu:
Blocul de text cuprins între etichetele <nobr>...</nobr> va fi afișat pe o singură linie.
Exemplu:
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:
