Pentru a deosebi vizual două zone ale unei pagini Web se recomandă inserarea unei linii orizontale.

1. Introduceţi tag-ul <HR> între cele două paragrafe (figura 5.1).

2. Introduceţi în tag-ul <HR> atributul noshade pentru a suprima efectul umbririi (figura 5.2).

3. Validaţi documentul HTML 4 strict cu aplicaţia validator.

4. Inseraţi codul HTML care afişează icon-ul de conformitate .

5. Vizualizaţi pagina Web într-un browser (figura 5.3).

Pentru a insera o linie (riglă) orizontală într-un document XHTML, care se întinde pe spaţiul orizontal disponibil utilizaţi tag-ul vid <hr />.

În figura 5.4 se prezintă documentul XHTML generat.

Inseraţi codul XHTML care afişează icon-ul de conformitate. Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 5.5.

În mod implicit, linia orizontală se afişează în gri. Dacă doriţi, puteţi aplica o culoare liniei orizontale.

   – HTML 4 propune două metode (metoda „veche” şi metoda „nouă”) total diferite pentru personalizarea (culoare, lungime, grosime) unei linii orizontale.

   – Tag-urile pe care le studiaţi în această conversaţie reprezintă „vechea metodă”, care în prezent este descurajată oficial de W3C.

   – Foile de stiluri reprezintă „noua” metodă care este încurajată oficial de W3C (vezi Conversaţia 6).

   – De ce învăţăm o metodă depăşită? Întrucât un număr deloc neglijabil de utilizatori posedă încă navigatoare Web care nu permit utilizarea foilor de stiluri.

1. Introduceţi în tag-ul <HR> atributul color=”?” înlocuind semnul întrebării (?) cu valoarea hexazecimală a culorii sau cu numele culorii (figura 5.6).

2. Validaţi documentul HTML 4 strict cu aplicaţia validator.

3. Inseraţi codul HTML care afişează icon-ul de conformitate .

4. Vizualizaţi pagina Web într-un browser (figura 5.7).

Pentru a colora o linie orizontală în XHTML puteţi utiliza atât metoda „veche”, care în prezent este descurajată oficial cât şi metoda nouă – foile de stiluri (vezi Conversaţia 6) încurajată în prezent de W3C pentru avantajele pe care le oferă.

În figura 5.8 se prezintă documentul XHTML generat.

Inseraţi codul XHTML care afişează icon-ul de conformitate. Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 5.9.

În figura 5.10 este prezentat documentul XHTML creat manual, în care s-au definit clasele hr.blue şi hr.red. Documentul a fost validat cu aplicaţia validator. Pentru afişarea icon-ului de conformitate s-a inserat codul XHTML.

Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 5.11.

În mod implicit, linia orizontală se afişează pe toată lungimea paginii. Desigur, dumneavoastră puteţi decide şi altfel!

1. Introduceţi în tag-ul <HR> atributul width=”?” pentru a defini lungimea liniei înlocuind semnul întrebării (?) prin dimensiunea în procente (75) sau în pixeli (figura 5.12).

2. Introduceţi în tag-ul <HR> atributul size=”?” pentru a defini grosimea liniei, înlocuind semnul întrebării (?) cu 10 şi în continuare, atributul width=”?” pentru a defini lungimea liniei, înlocuind semnul întrebării (?) cu 25 (figura 5.13).

3. Validaţi documentul HTML 4 strict cu aplicaţia validator.

4. Inseraţi codul HTML care afişează icon-ul de conformitate .

5. Afişaţi pagina Web într-un browser (figura 5.14).

Pentru a defini lungimea şi înălţimea unei linii orizontale în XHTML puteţi utiliza atât metoda „veche” care în prezent este descurajată oficial cât şi metoda „nouă” – foile de stiluri (vezi Conversaţia 6) încurajată în prezent de W3C pentru avantajele pe care le oferă.

În figura 5.15 se prezintă documentul XHTML generat.

Inseraţi codul XHTML care afişează icon-ul de conformitate. Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 5.16.

În figura 5.17 este prezentat documentul XHTML creat manual, în care s-au definit clasele hr.blue1 şi hr.red1. Documentul a fost validat cu aplicaţia validator. Pentru afişarea icon-ului de conformitate s-a inserat codul XHTML corespunzător.

Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 5.18.

Dacă linia orizontală ocupă întreaga pagină, atunci nu mai este cazul să o aliniem. În caz contrar, dacă linia este mai mică este indispensabil să indicăm modul de aliniere (stânga, dreapta, centrat) al acesteia.

1. Introduceţi în tag-ul <HR> atributul align=”?” înlocuind semnul întrebării (?) cu una din valorile: right (cazul nostru), left, center (figura 5.19).

2. Introduceţi în tag-ul <HR> atributul align=”center” pentru a centra cea de-a doua linie orizontală (figura 5.20).

3. Validaţi documentul HTML 4 strict cu aplicaţia validator.

4. Inseraţi codul HTML care afişează icon-ul de conformitate.

5. Vizualizaţi pagina Web într-un browser (figura 5.21).

Pentru a alinia o linie orizontală în XHTML puteţi utiliza atât metoda „veche”, care în prezent este descurajată oficial cât şi metoda „nouă” – foile de stiluri (vezi Conversaţia 6) încurajată în prezent de W3C pentru avantajele pe care le oferă.

În figura 5.22 se prezintă documentul XHTML generat.

Inseraţi codul XHTML care afişează icon-ul de conformitate. Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 5.23.

În figura 5.24 este prezentat documentul XHTML creat manual, în care s-au definit clasele hr.red2 şi hr.red3. Documentul a fost validat cu aplicaţia validator. Pentru afişarea icon-ului de conformitate s-a inserat codul XHTML corespunzător.

Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 5.25.