3. Formatarea textului

Servere virtuale de la 20 eur / luna. Servere dedicate de la 100 eur / luna - servicii de administrare si monitorizare incluse. Colocare servere si echipamente de la 75 eur / luna. Pentru detalii accesati site-ul BluePink.

3. 1. Stiluri de baza pentru formatarea textului

Majoritatea browser-elor suporta patru tipuri fundamentale de formatare: aldin, italic, subliniat si monospatiu – existand mai multe etichete care produc aceste stiluri:

Este posibila si combinarea stilurilor de formatare. De exemplu, pentru un text cu caractere aldine si italice, monospatiat: :

<B><I><TT> Acest text apare cu caractere aldine si italice, monospatiat </TT></I></B>

3. 2. Inserarea caracterelor speciale

Caracterele speciale disponibile in setul de caractere ISO Latin 1, sunt numerotate de la 32 pana la 255 inclusiv. Inserarea in pagina a caracterelor speciale, se face folosind numarul caracterului sau numele (daca exista). Astfel, putem specifica: referinta de caracter (character reference) sau numele de entitate (entity name). De exemplu, caracterul © (copyright) poate fi afisat cu referinta de caracter &#169 sau cu numele de entitate &copy:

Caracterul „spatiu nonbreaking" din tabelul de mai sus, forteaza browserul sa afiseze spatiu in locul respectiv (asa ne asiguram ca browserul nu ignora spatiul - cum face de obicei). Exemplu:

3. 3. Stiluri de antet

Antetele se folosesc pentru evidentierea titlurilor diferitelor sectiuni ale paginii. Astfel, folosim eticheta <H1> pentru un titlu de capitol, <H2> pentru titlul de subcapitol, etc. Etichetele pentru stiluri de antet sunt <H1>, <H2>, . . . , <H6>. Exemplu:

<HTML><HEAD><TITLE>Exemple de antete</TITLE></HEAD><BODY>
<H1 >Infinitul in poezia romaneasca</H1>
<H2>Mihai Eminescu</H2>
<H3>La steaua</H3>
<P>La steaua care–a rasarit</P> <P>E–o cale–atat de lunga</P> <P>Ca mii de ani au trebuit</P>
<P>Luminii sa ne-ajunga</P> </BODY></HTML>

3. 4. Alinierea paragrafelor

Paragrafele de text se pot alinia specificand modul de aliniere in interiorul etichetei de paragraf <P>, dupa modelul:

Modurile de aliniere sunt: LEFT(obisnuita), CENTER si RIGHT. In mod asemanator putem alinia si antetele (<H1>... <H7>). De asemenea, se pot centra antete, texte sau imagini incadrandu–le cu eticheta <CENTER>, dupa modelul:

<HTML><HEAD><TITLE>Exemple de aliniere</TITLE></HEAD><BODY>
<CENTER>
<H1>Infinitul in poezia romaneasca</H1>
<H2>Mihai Eminescu</H2>
</CENTER>
<H3 ALIGN="CENTER">La steaua</H3>
<P ALIGN="CENTER">La steaua care–a rasarit</P>
<P ALIGN="LEFT">E–o cale–atat de lunga</P>
<P ALIGN="CENTER">Ca mii de ani au trebuit</P>
<P ALIGN="RIGHT">Luminii sa ne-ajunga</P>
</BODY></HTML>.

Folosirea textului preformatat. Eticheta <PRE>

Desi in mod obisnuit browserul ignora spatiile, tabulatorii si sfarsiturile de rand daca acestea sunt stabilite din editorul de text, il putem forta sa tina cont de aceste elemente, incadrand textul respectiv intre etichetele <PRE> si </PRE>. Astfel, textul isi pastreaza modul de aranjare in pagina si este afisat cu font monospatiat. Ca exemplu, prezentam mai jos codul HTML scris in Notepad si pagina web rezultata.:

Se observa ca numai textul incadrat intre etichetele <PRE> isi pastreaza aranjarea.

@ Pentru a folosi alt font impreuna cu eticheta <PRE> (in locul celui monospatiat), se foloseste o foaie de stiluri – cum vom arata in capitolele urmatoare.

Intreruperea de rand. Eticheta <BR>

Trecerea la alt paragraf are ca efect adaugarea unui rand liber intre cele doua paragrafe. Daca nu dorim sa apara acest rand liber, putem comanda trecerea la randul urmator in cadrul aceluiasi paragraf, folosind eticheta <BR>. Eticheta <BR> nu are pereche (nu exista </BR>). Exemplu:

<HTML><HEAD><TITLE>Sfarsitul de rand</TITLE></HEAD><BODY>
<H2>La steaua</H2>
<P>La steaua care-a rasarit<BR>E-o cale-atat de lunga</P>
<P>Ca mii de ani au trebuit<BR>Luminii sa ne-ajunga</P>
</BODY></HTML>

3. 5. Inserarea unei linii orizontale

Liniile orizontale au rol ornamental si de separare a diferitelor sectiuni din pagina. Eticheta folosita este <HR> (fara pereche) si denumirea provine de la horizontal rule (rigla orizontala) . Folosind simplu <HR>, vom insera o linie simpla subtire pe toata latimea paginii, iar daca folosim si alte atribute obtinem diferite efecte suplimentare, conform tabelului de mai jos:

<HTML><HEAD><TITLE>Linie orizontala</TITLE></HEAD><BODY>
<H2>La steaua</H2>
<HR ALIGN="LEFT" WIDTH="33%" SIZE="3" NOSHADE>
<P>La steaua care-a rasarit<BR>E-o cale-atat de lunga</P>
<P>Ca mii de ani au trebuit<BR>Luminii sa ne-ajunga</P>
</BODY></HTML>

@ In locul liniilor obtinute cu eticheta <HR>, in multe pagini web se folosesc imagini.

3. 6. Eticheta <FONT>

Stabilirea marimii textului

Stabilirea marimii textului se face cu ajutorul etichetei <FONT>, insotita de atributul SIZE, dupa modelul:

unde „marime” este un numar intre 1(foarte mic) si 7(foarte mare), iar 3 este marimea standard. Exemplu:

<HTML> <HEAD>
<TITLE>Stabilirea marimii textului</TITLE> </HEAD> <BODY>
<H1>Folosirea etichetei <FONT> </H1> <HR>
<FONT SIZE="7">Text cu marimea 7. </FONT><BR><FONT SIZE="6"> Text cu marimea 6.</FONT><BR>
<FONT SIZE="5"> Text cu marimea 5.</FONT><BR><FONT SIZE="4"> Text cu marimea 4.</FONT><BR>
<FONT SIZE="3"> Text cu marimea 3 (standard).</FONT><BR>
<FONT SIZE="2"> Text cu marimea 2.</FONT><BR><FONT SIZE="1"> Text cu marimea 1.</FONT><BR> <HR>
<FONT SIZE="7">P</FONT>uteti folosi litere de diferite marimi intr–o fraza.
</BODY> </HTML>

Fontul de baza

Fontul de baza (base font) este fontul implicit cu care este afisat textul din pagina si se poate stabili cu eticheta <BASEFONT>. Pentru precizarea marimii fontului, folosim eticheta <BASEFONT> astfel:

unde „marime” este un numar intre 1 si 7. Daca, de exemplu, inseram <BASEFONT=”5”> imediat dupa eticheta <BODY>, atunci textul din pagina va aparea implicit cu marimea 5.

Fontul de baza permite si precizarea unei marimi relative de font pentru un anumit text, dupa modelele:

insemnand cu n puncte mai putin, respectiv mai mult decat fontul de baza – vezi exemplul urmator.

Avantajul folosirii marimilor relative de font este ca putem mari sau micsora rapid intregul text din pagina - de exemplu, cand fonturile apar prea mici sau prea mari in browser – modificand doar eticheta <BASEFONT>.

Modificarea fontului

Daca un anumit text trebuie scris cu alt font decat cel de baza, putem preciza fontul dorit cu eticheta <FONT FACE=”typeface”>, unde „typeface” este numele fontului dorit si care trebuie sa fie instalat in calculatorul utilizatorului. De asemenea, se poate utiliza eticheta <FONT FACE=”typeface1, typeface2, typeface3, ...”>. Browserul va folosi primul font valabil din lista precizata, iar in caz de esec, fontul implicit. Atributul FACE poate fi folosit si in eticheta <BASEFONT>.

<HTML> <HEAD>
<TITLE>Stabilirea fontului</TITLE> </HEAD> <BODY>
<BASEFONT FACE="Verdana" SIZE="4">
<FONT FACE="Times New Roman">Times New Roman</FONT><BR>
<FONT FACE="Times New Roman" SIZE="-1">Times New Roman</FONT><BR>
<FONT FACE="Georgia">Georgia</FONT><BR>
<FONT FACE="El Primo, Arial">acesta este fontul Arial - daca nu aveti El Primo :)</FONT>
</BODY> </HTML>

3. 7. Culoarea textului

Culorile HTML sunt rezultatul combinarii a trei 3 culori de baza: rosu, verde si albastru. Intensitatea acestora este codificata printr–un numar hexazecimal intre 00 si FF (adica, in baza 10, intre 0 si 15*16 1 +15*16 0 =255 – reamintim ca cifrele bazei 16 sunt: 0, 1, . . . , 9, A, B, C, D, E, F) . Culoarea rezultata din combinatie este notata dupa modelul #rrggbb , unde rr reprezinta rosul, gg – verdele si bb – albastrul. Aceste combinatii se mai numesc valori RGB.

Exemple: #FF0000 inseamna rosu aprins, #000000 – negru, #FFFFFF – alb, iar cu valori egale pentru rr, gg si bb obtinem nuante de gri. In total, exista aprox. 16 milioane de culori diferite (256 x 256 x 256) .

@ Pentru vizualizarea codului RGB al unei anumite culori: deschidem Paint, facem dublu clic pe caseta de culori si apasam Define Custom Colors, apoi selectam culoarea dorita si observam valorile din casetele Red, Green, Blue. Pentru lista completa cu numele de culori, codurile RGB si mostrele de culoare, accesati pagina web http://www.w3schools.com/html/html_colornames.asp

CULOAREA HYPERLINK-URILOR care urmeaza a fi introduse in pagina, se modifica cu eticheta <BODY>, astfel:

unde: LINK reprezinta legaturile inca nevizitate, VLINK- legaturile vizitate (pe care utilizatorul a facut deja clic) si ALINK- legaturile active (pe care s-a facut clic, dar pagina solicitata nu a aparut inca).

CULOAREA UNUI TEXT OARECARE se poate specifica cu eticheta <FONT>, dupa modelul :

<HTML> <HEAD>
<TITLE>Culoarea textului</TITLE> </HEAD>
<BODY TEXT="navy">
<BASEFONT FACE="verdana" size="4">
<FONT COLOR="#FF0000" SIZE="+1">La steaua</FONT><HR>
La steaua care-a rasarit<BR>E-o cale-atat de lunga<BR>
Ca mii de ani au trebuit<BR>Luminii sa ne-ajunga
</BODY></HTML>

Incercati:

Creati o pagina web continand o strofa dintr–o poezie cunoscuta. Numele poetului sa apara in bara de titlu a browserului. Titlul poeziei sa apara evidentiat, colorat „Navy”, cu font „Arial”, stil inclinat si centrat pe mijlocul paginii. Sub titlu inserati o bara orizontala aliniata centrat, cu lungimea cat jumatate din pagina. Versurile din poezie sa apara pe cate un rand, fara spatiu intre ele (in acelasi paragraf), cu aliniere centrata si colorate cu „OrangeRed”.

Caracter	Referinta de caracter	Nume de entitate
<	<	<
>	>	>
Spatiu nonbreaking
©	©	©
®	®	®
o	°	°
¼	¼	¼
½	½	½
¾	¾	¾

Atribut	Efect
<HR WIDTH=x>	Stabileste latimea liniei la x pixeli
<HR WIDTH=x%>	Stabileste latimea liniei la x la suta din fereastra
<HR SIZE=”n”>	Stabileste grosimea liniei la n pixeli (în conditiile în care grosimea implicita este de l pixel).
<HR ALIGN="LEFT">	Aliniaza linia la stânga
<HR ALIGN="CENTER">	Aliniaza linia la centru
<HR ALIGN="RIGHT">	Aliniaza linia la dreapta
<HR NOSHADE>	Afiseaza o linie mai groasa (în locul unei linii subtiri)