Câteva operaţii banale
<FONT>...</FONT>
<BASEFONT...>
Prima lecţie de scriere
<B>...</B> Bold
<I>...</I> Italic
<U>...</U> Underline
<STRIKE>...</STRIKE> Striketrough
<SUB>...</SUB> Subscript
<SUP>...</SUP> Superscript
<BIG>...</BIG> Big
<SMALL>...</SMALL> Small
<TT>...</TT> TeleType
<BLINK>...</BLINK> Blink
Marcaje "Information Type"
<ABBREV>...</ABBREV> Abbreviation
<ACRONYM>...</ACRONYM> Acronym
<AU>...</AU> Author
<BANNER>...</BANNER> Banner
<BDO>...</BDO> Bi-Directional Override
<BQ>...</BQ> Blockquote
<CITE>...</CITE> Citation
<CODE>...</CODE> Code
<CREDIT>...</CREDIT> Credit
<EM>...</EM> Emphasis
<FN>...</FN> Footnote
<INS>...</INS> Inserted
<KBD>...</KBD> Keyboard
<LANG>...</LANG> Language
<LH>...</LH> List Header
<NOTE>...</NOTE> Note
<PERSON>...</PERSON> Person
<Q>...</Q> Quotation
<SAMP>...</SAMP> Sample
<STRONG>...</STRONG> Strong
<VAR>...</VAR> Variable
Caracterele sunt "cărămizile" textului
Exerciţii

Orice pagină care se respectă conţine măcar o frântură de text. Veţi (re)învăţa în acest capitol o serie de operaţii de formatare a textului cu care sunteţi obişnuiţi de la omniprezentul Word, dar şi alte tipuri de formatare, caracteristice paginilor web.

Orice persoană care editează un text îşi alege întâi tipul de pagină adecvat. Acest lucru nu este necesar la crearea unei pagini web, mărimea paginii se adaptează după dimensiunile monitorului vizitatorului, aşa că putem tăia de pe listă această corvoadă. Urmează apoi alegerea tipului de literă (font); dacă vă place Times New Roman, fontul implicit, tăiaţi şi această operaţie de pe listă; pare simplu până acum, nu-i aşa?

Revenind la font, alegerea acestuia se face cu atributul FACE:

<FONT FACE="numefont(,numefont,numefont...)">...</FONT>

Acestă sintaxă ne permite să specificăm unul sau oricâte fonturi, în ordinea preferinţelor; browserul caută în sistem primul font din listă şi, dacă îl găseşte, îl utilizează; dacă nu, îl caută pe următorul etc.; dacă nu găseşte nici unul dintre fonturile specificate, va utiliza Times New Roman.

• Nu indicaţi cine ştie ce fonturi exotice; este mai mult decât probabil ca acestea (chiar dacă arată foarte bine) să nu se găsească pe sistemul vizitatorului
• Evitaţi să folosiţi în exces fonturi artistice, cititul unui astfel de text poate fi foarte obositor
• Dacă intenţionaţi să scrieţi textele în limba română (sau în orice altă limbă cu exces de diacritice), asiguraţi-vă că fontul selectat poate afişa caracterele specifice limbii respective.
• Fonturi recomandate: Verdana, Tahoma, Arial, Times New Roman

O altă operaţie pe care o putem efectua este modificarea mărimii caracterelor, cu atributul SIZE:

unde x poate lua valori între 1 şi 7 (cea mai mică, respectiv cea mai mare dimensiune de caracter); dimensiunea implicită este 3.

Alegerea culorii fontului (implicit negru) poate fi determinantă pentru realizarea unei pagini de succes, bineînţeles în pereche cu imaginea de fundal sau cu culoarea acestuia.

• Evitaţi fonturile cu culori puternice, sunt obositoare; folosiţi aceste culori doar pentru texte de mici dimensiuni, pe care vreţi să le scoateţi în evidenţă
• Evitaţi perechile de culori complementare (gen roşu-verde), dar şi nuanţele prea apropiate pentru culoare font - culoare background

Culoarea fontului se alege cu atributul COLOR, astfel:

<FONT COLOR="numeculoare">...</FONT> sau
<FONT COLOR="#rrggbb">...</FONT>

Sunt valabile toate regulile enunţate în capitolul 1 (atributul COLOR pentru fundal)

Este un tag utilizat tot pentru setarea fonturilor şi lucrează cu aceleaşi atribute ca şi tag-ul <FONT>, cu deosebirea că setarea dimensiunii literelor (SIZE) se mai poate face şi prin incrementarea sau decrementarea dimensiunii fontului de bază:

<BASEFONT SIZE="4"> (valoarea implicită este tot 3, ca şi la <FONT>)
...
<FONT SIZE=+1>...</FONT> (incrementare)
...
<FONT SIZE=-2>...</FONT> (decrementare)

După cum ştiţi, orice editor de text ceva mai evoluat (ex. WordPad din Windows) ne oferă posibilitatea de a scrie Plain (normal, implicit), Bold (îngroşat), Italic (înclinat) şi Underline (subliniat), precum şi combinaţii ale acestora. Limbajul HTML ne oferă aceleaşi facilităţi, cu ajutorul tag-urilor:

Evident, pentru scrierea Plain nu este necesar un marcaj special.

În crearea paginilor web, am putea avea nevoie şi de alte formatări de text, pe care le putem obţine astfel:

<STRIKE>Striketrough</STRIKE> text tăiat cu o linie
<SUB>Subscript</SUB> textul încadrat apare micşorat şi coborât faţă de nivelul normal (ex. indici)
<SUP>Superscript</SUP> textul încadrat apare micşorat şi ridicat faţă de nivelul normal (ex. exponenţi)
<BIG>Big</BIG> textul încadrat apare mărit faţă de mărimea normală
<SMALL>Small</SMALL> textul încadrat apare micşorat faţă de mărimea normală
<TT>TeleType</TT> textul încadrat apare scris cu un font cu lăţime fixă, monospaţiat (ex. Fixedsys, Courier), indiferent de fontul ales pentru textul respectiv
<BLINK>Blink</BLINK> textul încadrat "clipeşte" (tag-ul e suportat doar de Netscape)

Limbajul HTML vă pune la dispoziţie o serie de marcaje specifice, pe care le puteţi folosi în cazul în care le găsiţi utile, deşi ca mod de afişare ele pot fi înlocuite cu marcajele de formatare a textului prezentate înainte.

<ABBREV>Abbreviation</ABBREV> indică o abreviere, iar textul va fi afişat cu caractere normale
<ACRONYM>Acronym</ACRONYM> indică o prescurtare, iar textul va fi afişat cu caractere normale
<AU>Author</AU> indică autorul documentului, iar textul va fi afişat cu caractere normale
<BANNER>Banner</BANNER> specifică faptul că textul / imaginea încadrată este un banner
<BDO>Bi-Directional Override</BDO> specifică faptul că textul poate fi parcurs în ambele direcţii (atributul DIR="ltr | rtl" - left to right, right to left); textul va fi afişat cu caractere normale
<BQ>Blockquote</BQ> indică o citare, iar textul încadrat va fi afişat cu caractere normale
<CITE>Citation</CITE> indică o citare, iar textul încadrat va fi afişat cu caractere italice
<CODE>Code</CODE> specifică un exemplu de cod, iar textul încadrat va fi afişat cu un font cu lăţime fixă (ex. Formula: <CODE>x=(-b+/-(b^2-4ac)^1/2)/2a)</CODE>)
<CREDIT>Credit</CREDIT> indică autorul unui document, iar textul încadrat va fi afişat cu caractere normale
<EM>Emphasis</EM> specifică o emfază tipografică, iar textul încadrat va fi afişat cu caractere italice
<FN>Footnote</FN> indică o notă de subsol, iar textul încadrat va fi afişat cu caractere normale
<INS>Inserted</INS> indică un text inserat, care va fi afişat cu caractere subliniate
<KBD>Keyboard</KBD> poate fi folosit pentru a indica un text ce va fi introdus de utilizator, iar textul încadrat va fi afişat cu un font cu lăţime fixă
<LANG>Language</LANG> indică un text scris în altă limbă decât limba de bază a documentului, iar textul încadrat va fi afişat cu caractere normale
<LH>List Header</LH> indică un cap de listă, iar textul încadrat va fi afişat cu caractere normale
<NOTE>Note</NOTE> indică o notă, iar textul încadrat va fi afişat cu caractere normale
<PERSON>Person</PERSON> indică numele unei persoane, iar textul încadrat va fi afişat cu caractere normale
<Q>Quotation</Q> indică un citat, iar textul încadrat va fi afişat cu caractere normale
<SAMP>Sample</SAMP> poate fi folosit pentru a indica o secvenţă de caractere literale, iar textul încadrat va fi afişat cu un font cu lăţime fixă
<STRONG>Strong</STRONG> specifică o emfază tipografică puternică, iar textul încadrat va fi afişat cu caractere boldate
<VAR>Variable</VAR> poate fi folosit pentru a indica numele unei variabile, iar textul încadrat va fi afişat cu caractere italice

• Aceste ultime tag-uri prezentate nu sunt, de fapt, tag-uri de formatare a textului, ci aşa-numite marcaje "Information Type"; ele nu au efect asupra afişării caracterelor, dar pot fi utile creatorului de pagini web la citirea, actualizarea sau "depanarea" paginii
• Afişarea multor dintre ele este browser-specifică
• Ele acceptă atributele:

  DIR="ltr | rtl" stabileşte direcţia de scriere
  LANG="cod de două litere pentru limbă"

Prin caractere înţelegem literele mari şi mici, cifrele, semne de punctuaţie, semne matematice, semne speciale (ex. @ # $ etc.); aceste caractere, fie ele printabile sau neprintabile (non printing characters: line feed etc.) sunt codificate ISO (International Standards Organization, Organizaţia Internaţională pentru Standarde) şi au asociate o entitate numerică şi o valoare hexazecimală.
Atâta vreme cât textele pe care doriţi să le afişaţi sunt scrise în engleză, nu veţi întâmpina nici o problemă la afişare; dacă doriţi însă să scrieţi într-o limbă bogată în caractere diacritice, va trebui să apelaţi la entităţile numerice sau entităţile literale (dacă există) ale caracterelor specifice limbii respective. Astfel, un cuvânt de genul "Ångström" ar trebui scris în pagina web sub forma: "&#197;ngstr&#246;m" sau "&Aring;gstr&ouml;m". Cumplit, nu-i aşa?
Anexa 2 cuprinde setul de caractere ISO Latin 1, unde veţi găsi caracterele, însoţite de entitatea numerică, valoarea hexazecimală, entitatea literală şi descrierea. Parcurgând această anexă, puteţi observa că unele caractere specifice limbii române lipsesc; codificările lor pot fi găsite în anexa 3.

• Cu siguranţă că aţi fost îngroziţi la gândul că trebuie să scrieţi atât de mult şi într-un mod atât de ciudat pentru a obţine cuvinte cu caractere diacritice. Nu disperaţi, soluţia este simplă şi comodă! Dacă nu aţi făcut-o încă, specificaţi în marcajul <META> setul de caractere windows-1250 (vezi capitolul 1), apoi deschideţi Microsoft Word şi tastaţi textul cu diacritice. Salvaţi documentul într-un director temporar cu File-Save As HTML, vizualizaţi sursa (vezi capitolul introductiv), selectaţi zona de text ce vă interesează, Edit-Copy (sau Ctrl-C), deschideţi în Notepad şablonul sau pagina la care lucraţi, daţi click în locul unde doriţi să vă apară textul şi executaţi Edit-Paste (sau Ctrl-V). Gata!
• Prin salvarea documentului în format html, Word face singur codificarea caracterelor diacritice; un defect al acestei metode este faptul că acest editor generează foarte mult cod inutil, pe care, dacă doriţi, îl puteţi apoi elimina.
• Un efect interesant de marcare a textului se poate obţine folosind un marcaj CSS (Cascading Style Sheets), SPAN:

  <span style="color: black; background: yellow">Efect de textmarker</span>

  Exemplul 2.9