Cuprins Cteva cuvinte...nainte HTML i World Wide Web Capitolul 1 Primii pai Ce este HTML? Standarde i extensii HTML Coninut i aspect ntr-un document HTML Uneltele de care avei nevoie Cum s procedai? Convenii de notaie Rezumat Capitolul 2 Structura unui document HTML 1. Ce este un document HTML? 2. Etichete de structur 3. Folosirea corect a etichetelor 4. Rezumat 5. Test Capitolul 3 Culori 1. Sistemul de definire a culorilor 2. Corespondena dintre codurile hexazecimal i zecimal 3. Culoarea fundalului 4. Culoarea textului 5. Culoarea legturilor 6. Alegerea culorilor 7. Culori "sigure" 8. Rezumat 9. Test Capitolul 4 Fonturi 1. Formatarea caracterelor 2. Accentuarea textului 3. Etichete logice i etichete fizice 4. Rezumat 5. Test Capitolul 5 Formatarea textului 1. Trecerea la un rnd nou 2. Titlurile (Headings) 3. Paragrafele 4. Preformatarea textului 5. Centrarea textului 6. Afiarea textului pe o singur linie 7. Blocul 8. Linii orizontale 9. Inserarea unei adrese potale 10. Inserarea unui citat 11. Inserarea caracterelor speciale 12. Sugestii privind aspectul textului 13. Rezumat 14. Test Capitolul 6 Legturi (Link-uri)

1

1. Adresa URL 2. Adrese absolute i adrese relative 3. Stabilirea legturilor 4. Ancore - legturi n cadrul aceleiai pagini 5. Legtura ctre o pagin aflat n acelai director (folder) 6. Legtura ctre o pagin localizat n alt director (folder) 7. Legtura ctre pagini externe 8. Alegerea culorilor pentru legturi 9. Utilizarea potei electronice (e-mail) 10. Legturi ctre fiiere oarecare 11. Deschiderea paginilor referite printr-o legtur 12. Crearea unei bare secundare de navigare 13. Rezumat 14. Test Capitolul 7 Imagini i elemente multimedia 1. Formatele fiierelor grafice 2. Cteva metode de obinere a imaginilor 3. Inserarea unei imagini 4. Dimensionarea imaginii 5. Alinierea imaginii i a textului 6. Imagini folosite ca fond (background) al paginii 7. Imagini folosite ca legturi 8. Imaginile miniaturale (thumbnails) 9. Imaginile video 10. Sunetele 11. Sugestii privind folosirea imaginilor i elementelor multimedia 12. Imaginile i timpul de ncrcare al paginii 13. Rezumat 14. Test Capitolul 8 Liste 1. Liste neordonate 2. Liste ordonate 3. Imbricarea listelor 4. Liste de definiii 5. Rezumat 6. Test Capitolul 9 Tabele 1. Crearea unui tabel 2. Alinierea tabelului n pagin 3. Dimensionarea unui tabel 4. Spaierea celulelor unui tabel 5. Dimensionarea celulelor unui tabel 6. Alinierea coninutului unei celule 7. Definirea culorilor pentru un tabel 8. Titlul unui tabel 9. Capul de tabel 10. Tabele de forme oarecare 11. Celule fr coninut 12. Grupuri de coloane 13. Atribute pentru aspectul chenarului unui tabel

1

14. Tabele imbricate 15. Recomandri privind folosirea tabelelor 16. Rezumat 17. Test Capitolul 10 Cadre (Frames) 1. Documentul de definire a cadrelor 2. Cadre imbricate 3. Controlul aspectului unui cadru 4. Bare de derulare 5. Poziionarea documentului ntr-un cadru 6. Cadre interne 7. Deschiderea documentelor n alte cadre 8. Sugestii privind folosirea cadrelor 9. Rezumat 10. Test Capitolul 11 Formulare (Forms) 1. Ce este un formular? 2. Crearea unui formular 3. Eticheta 4. Etichetele i 5. Eticheta 6. Validarea datelor 7. Rezumat 8. Test Capitolul 12 Script-uri CGI 1. Ce este CGI? 2. Transferul datelor 3. Execuia script-ului 4. Structura unui script 5. Exemple de script-uri 6. Instalarea interpretorului Perl i a aplicaiei PWS 7. Rezumat Capitolul 13 JavaScript 1. Ce este JavaScript? 2. Cum poate fi inclus un script n pagin? 3. Modul de execuie al script-ului 4. Ce se poate realiza cu JavaScript? 5. Rezumat Capitolul 14 Foi de stiluri (CSS) 1. Ce este un stil? 2. Tipuri de foi de stiluri 3. Efecte obinute cu ajutorul stilurilor 4. Rezumat Capitolul 15 Elemente avansate de grafic 1. Imagini hart 2. Imagini animate 3. Imagini transparente 4. Rezumat Capitolul 16 Motoare de cutare i metatag-uri 1. Ce este un motor de cutare?

1

2. Metatag-uri 3. Rezumat Crearea i publicarea unui site Capitolul 17 Planificarea 1. Factori care nu pot fi planificai 2. Etapele planificrii site-ului 3. Rezumat Capitolul 18 Designul 1. Principiile designului web 2. Organizarea unui site 3. Metodologia de construire a site-ului 4. Tehnici de design web 5. Greeli de design 6. Rezumat Capitolul 19 Testarea 1. Corectarea paginilor 2. Testarea paginilor 3. Rezumat Capitolul 20 Publicarea 1. Numele de domeniu 2. Serviciul de gzduire Web (Web hosting) 3. Organizarea i denumirea fiierelor 4. Transferul fiierelor 5. Rezumat Cteva cuvinte...la final Anexa 1 Index etichete Anexa 2 Glosar Anexa 3 Tabelul culorilor

Cteva cuvinte...nainte Internetul reprezint, fr ndoial, mediul de comunicare al viitorului, un viitor care, n multe pri ale lumii deja a nceput. El reprezint o veritabil revoluie panic i tcut, care rezid n asocierea progresiv dintre informatic i mijloacele de comunicare, conducnd la o integrare fascinant a tuturor mijloacelor tradiionale de comunicare: telefonie clasic i mobil, radio, televiziune, transmisii de date, nregistrri audio i video. Au aprut chiar forme noi de comunicare, utilizate cu entuziasm de milioane de oameni din lumea ntreag, cum sunt e-mail-ul i chat-ul, care deja au dobndit reguli proprii, o cultur i chiar i un folclor propriu. Internetul a produs totodat o extraordinar democratizare a informaiei i comunicrii. O cantitate literalmente uria de informaie, sub toate formele sale: text, imagini statice sau video, sunet, adunate ntr-o "bibliotec" accesibil oricui, oricnd, de la orice calculator legat la reea, fa de care chiar i cele mai complete enciclopedii clasice par o glum. A devenit o joac de copil comunicarea direct, n timp real, cu verioara din Cluj, cu prietenul din Australia, cu firma furnizoare din Brazilia

1

sau cu banca din Elveia. Sunt suficiente pentru toate acestea un computer, un modem i o linie telefonic. Dei Internetul i World Wide Web cunosc o expansiune exponenial, se afirm totui c se afl nc n faza copilriei. Raportndu-ne la o astfel de apreciere, am putea afirma c n Romnia Internetul este nc n fa, dar cu un potenial de dezvoltare cert i rapid ascendent. Cu toate c foarte muli tineri manifest un interes i o deschidere extraordinare ctre orice subiect legat de Internet, acest domeniu este cel mai adesea ignorat n licee, sau tratat cu superficialitate. Programele colare nu l abordeaz dect tangenial, prin urmare nu exist manuale colare dedicate, iar lucrrile de specialitate la un nivel accesibil strlucesc prin absen. Designul i programarea Web se afl ntr-o dezvoltare accelerat i constituie o orientare profesional cu un mare potenial de succes, dar n mod paradoxal, relativ puini tineri se ndreapt azi ctre aceste domenii. Unul din motive l constituie, desigur, atenia insuficient acordat acestor ramuri ale informaticii n nvmntul liceal, alturi de un contact direct cu Internetul extrem de redus, limitat mai ales de posibilitile tehnice i economice actuale ale colilor. Argumentul principal care m-a determinat s scriu aceast carte a fost un sondaj realizat n rndul elevilor unui liceu de informatic, sondaj ale crui rezultate au confirmat impresia iniial. i anume faptul c, n marea lor majoritate (87%), elevii i doresc s nvee nu doar s utilizeze Internetul, ci, urmnd ndrzneala tipic vrstei, s devin o prezen activ n acest mediu de comunicare. Cei mai muli i doresc acest lucru pentru a se exprima pe sine, pentru a comunica lumii i n aceast form, faptul c exist, c au caliti, dorine, aspiraii, talente, cunotine, gnduri, sentimente care merit s fie cunoscute i de ceilali. i cum pot fi puse toate acestea n valoare ct mai eficient, ntr-un mod accesibil pentru milioane de oameni din lumea larg, dac nu pe un site Web? Scopul acestei cri, dedicate limbajului specific Internetului, HTML, i tehnicilor uzuale de creare a unui site Web, este s i nvee, nu doar pe tineri, ci pe toi cei care i doresc acest lucru, s i creeze propriul site pe Internet, cu minimum de efort i costuri, i cu maximum de rezultate. Cartea nu i propune s fie o lucrare academic, un manual exhaustiv de HTML i Web design. Subiectele sunt extrem de vaste i ar fi fost imposibil cuprinderea lor ntr-o singur lucrare. Am dorit s ofer o imagine de ansamblu asupra limbajului HTML, cu un marcat accent pe aspectele practice ale utilizrii sale, precum i o trecere n revist a unora dintre cele mai folosite tehnici de programare care extind posibilitile limbajului: script-urile CGI, JavaScript, programarea cu ajutorul foilor de stiluri CSS. De asemenea, n partea a doua a crii am prezentat etapele procesului de construire a unui site Web i cteva dintre tehnicile uzuale de design Web. Adresndu-se mai ales nceptorilor care stpnesc totui elementele de baz (utilizarea computerului i sistemul de operare Windows, noiuni de editare de text i imagini), cartea este scris ntr-un limbaj care se dorete accesibil. Fiecare noiune prezentat este nsoit de exemple reprezentate de secvene de cod HTML ce ilustreaz modul ei de aplicare. Recomandarea noastr este ca cititorii s verifice personal toate aceste exemple, deoarece numai experimentnd pe cont propriu se poate ajunge la o bun nelegere i stpnire a efectelor codului HTML asupra aspectului paginii Web.

1

ncheiem cu sperana c aceasta carte va constitui un instrument de lucru util i c, la finalul ei cititorii vor dobndi abilitatea de a construi, publica i menine un site propriu interesant, atrgtor i perfect funcional. i, de ce nu, ca o parte din ei s fac din aceast activitate o veritabil profesie. Not asupra terminologiei utilizate ntruct anumii termeni din limba englez, specifici domeniului abordat n prezenta lucrare, au intrat n limbajul curent ca atare, i vom utiliza i noi n aceast form. Am optat pentru folosirea lor cu statut de neologisme, n forma original, uneori cu forme flexionare ad-hoc, chiar cu riscul de a fi considerate drept "barbarisme" de ctre lingvitii puritani. n definitiv, n acest fel au intrat n limbaj termeni deja consacrai precum computer, tast, monitor, mouse, pixel, CDROM, modem, server, port, ca s dm numai cteva exemple. Pentru unii termeni am utilizat ambele forme aflate n circulaie, cum ar fi link legtur, font caracter, tag etichet. Exist i autori care folosesc numai echivalentele romneti ale acestor termeni. Cu toate c traducerea lor respect cel mai adesea sensul, aceste echivalente nu au reuit s se impun n lumea informaticii, nu de puine ori utilizarea lor conducnd, n mod paradoxal, la confuzii sau nedumeriri. (Nu vorbim aici de tentativele ridicole, cum ar fi de pilda icoan, sau, nc i mai ru, iconi, utilizate de unii autori pentru icon, care firete c nu pot avea vreo ans de succes.) Prezentm n continuare o list a acestor termeni. Explicaii asupra sensului lor se gsesc n text i/sau n glosarul prezentat la sfritul crii. browse r directo r downlo ad e-mail folder link script Web host, hosting icon tag template font site

HTML i World Wide Web nainte de a ncepe prezentarea limbajului HTML, vom face cteva precizri despre semnificaia conceptului World Wide Web (ntr-o traducere aproximativ, pnz de pianjen, cu sensul de reea, extins n lumea larg). Precizrile ar putea prea inutile, dar realitatea este c dei foarte mult lume vorbete despre World Wide Web, puini tiu exact ce reprezint. Mai mult, datorit extinderii sale exponeniale i a extraordinarei sale populariti, adesea noiunea este confundat cu cea de Internet. World Wide Web este ns doar o parte a Internetului. Internetul exist de mai bine de treizeci de ani. Bazele acestuia au fost puse la sfritul anilor 60, ca urmare a unei iniiative a Departamentului de Aprare al Statelor Unite, care avea drept scop realizarea unei reele robuste i fiabile de comunicaii ntre computere aflate la distan. Reeaua avea rolul de a asigura un contact permanent ntre elementele sale componente, chiar dac o parte din legturi ar fi fost ntrerupte ca urmare a unui atac nuclear. Ulterior, reeaua a ptruns n domeniul civil i a fost adoptat rapid, iniial de lumea academic, mai apoi de companiile comerciale.

1

Internetul nu este altceva dect un ansamblu alctuit dintr-un numr enorm de reele de computere interconectate, localizate pe toat suprafaa globului, care suport diverse pachete software cum ar fi e-mailul, grupurile de tiri (newsgroup), protocoalele de transfer al fiierelor (FTP), Gopher i World Wide Web. Cu toate avantajele imense oferite de posibilitile de comunicare global a informaiilor ca i de rapiditatea comunicrii, Internetul a rmas, vreme de dou decenii, doar apanajul ageniilor guvernamentale i al mediilor tiinifice. Motivul l-a constituit dezorganizarea sa iniial cvasi-total. Folosirea unor standarde de comunicaie i a unor pachete software foarte diverse reprezentau nite bariere tehnologice aproape insurmontabile pentru utilizatorii obinuii. n plus, informaiile accesibile la acea vreme pe Internet erau prezentate sub forma unor simple fiiere text i nu n forma cunoscut azi. Dezvoltarea exploziv pe care a cunoscut-o Internetul n ultimii zece ani a fost determinat de apariia World Wide Web. World Wide Web a luat natere n 1989, ca urmare a eforturilor unor fizicieni ai CERN (Laboratorul European de Fizica Particulelor) de a pune la punct un sistem standardizat pentru crearea i distribuirea documentelor electronice oriunde pe glob, sistem care s permit integrarea tuturor elementelor media: text, imagini, sunet. Aa cum dovedete imensa sa popularitate, Web-ul s-a dovedit a fi mediul ideal pentru distribuirea informaiilor ntr-o maniera extins i accesibil. Motivul l constituie faptul c Web-ul asigur o interfa hypermedia pentru informaii. Hypermedia reprezint variatele tipuri de informaie (text, imagini, fiiere audio i video) care pot fi localizate oriunde pe glob, mpreun cu legturile dintre ele. Pentru a transmite i a afia informaiile hypermedia, Web-ul folosete un protocol de transfer (un set de reguli) care este numit HTTP (Hypertext Transfer Protocol, protocol de transmitere a hypertextului). Deci, n esen, World Wide Web este o colecie imens de documente interconectate prin intermediul Internetului, care folosete protocolul HTTP pentru a afia elementele hypermedia. Pentru a face posibil o asemenea performan, s-a impus necesitatea ca fiecare computer conectat la Internet s fie identificat n mod unic, printr-un element numit adresa IP (Internet Protocol). Adresa IP este format din patru numere, fiecare mai mic de 255, desprite ntre ele prin punct (de exemplu 123.67.9.201). n vreme ce computerele lucreaz cu numere, oamenii prefer numele. Din acest motiv, fiecrei asemenea adrese IP i s-a asociat i un nume. Cum sunt sute de milioane de computere n ntreaga lume, a veni cu un nume unic care s diferenieze un computer de celelalte pare aproape imposibil. Totui, s ne amintim c Internetul este o reea de reele. El este mprit n grupuri numite domenii care, la rndul lor, sunt mprite n subdomenii. Datorit acestui fapt, chiar dac un computer poart un nume destul de comun, prin asocierea acestui nume cu domeniul i subdomeniile din care face parte, se obine un nume unic de identificare al computerului respectiv. Organizarea domeniilor pe Internet respect un model ierarhic. Primul nivel ierarhic l constituie diversele tipuri de organizaii. Tot pe primul nivel se afl i domeniile corespunztoare rilor lumii, de exemplu uk, pentru Marea Britanie sau ro, pentru Romnia. Urmtorul nivel ierarhic l constituie organizaiile, firmele, instituiile care dein propriile domenii i subdomenii. Internetul conecteaz dou tipuri de computere: serverele, care furnizeaz documentele, i clienii, care solicit i afieaz documentele pentru a fi vizualizate de utilizator. Pentru a accesa i afia documentele HTML, pe computerul client ruleaz aplicaii numite browsere. Uneori termenii server Web i client Web pot produce confuzii, deoarece se refer att la computerele pe care ruleaz aceste aplicaii ct i la aplicaiile n sine. Din acest motiv, pentru aplicaia

1

client vom folosi termenul de browser, iar pentru aplicaia sau pachetul de aplicaii care ruleaz pe server, termenul de aplicaie server. Relaia client-server pe care se bazeaz funcionarea World Wide Web este facilitat de protocolul de comunicaie HTTP. Interaciunea dintre browserul Web i serverul Web ncepe cu o cerere din partea clientului. Aplicaia client transmite o cerere ctre aplicaia server. Aceast cerere poate consta n transmiterea unui anumit document sau n efectuarea unei anumite tranzacii. Aplicaia server fie ndeplinete cererea clientului, caz n care obiectul solicitat este transmis browserului, fie o refuz, situaie n care browserul afieaz binecunoscutele mesaje de eroare "The page cannot be displayed" sau "File not found". Cu alte cuvinte, procesul vizualizrii unei pagini Web ncepe cu o cerere a browserului Web ctre serverul Web. Browserul transmite serverului detalii despre el nsui i despre fiierul pe care l dorete prin intermediul unui header HTTP de cerere (headerul este acea parte a unui pachet de date care este plasat naintea informaiilor efectiv transmise i care poate conine adresa sursei i a destinaiei, verificri ale erorilor i alte cmpuri). Serverul primete i analizeaz headerele HTTP de cerere n cutarea informaiilor relevante, cum ar fi numele fiierului care este solicitat i transmite napoi fiierul cerut mpreun cu headerele HTTP de rspuns. Browserul folosete headerele HTTP de rspuns pentru a determina cum s afieze rezultatele obinute. Trebuie s subliniem c browserele nu au nevoie de conexiune la Internet ca s funcioneze. Putei ncrca i afia cu ajutorul browserului dumneavoastr documente HTML care sunt stocate pe propriul hard-disk. Aceasta v d, printre altele, posibilitatea de a definitiva i testa documentele HTML nainte de a le publica pe Internet, evitnd astfel prezentarea unor pagini nc nefinalizate, cu erori, sau care funcioneaz defectuos. Capitolul 1 Primii pai 1. Ce este HTML? HTML este o abreviere de la Hypertext Markup Language i reprezint scheletul oricrei pagini de Web. HTML nu este un limbaj de programare. Nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML este modul n care i comunicam browserului ce elemente dorim s introducem n pagina Web i care este aspectul acestora. 2. Standarde i extensii HTML HTML este un limbaj standardizat, aceasta nsemnnd c orice browser poate interpreta i afia corect un document Web. Sintaxa de baz a limbajului HTML este definit n versiunea HTML 3.2. n prezent a fost lansat i versiunea HTML 4.0 care se afl n curs de standardizare. De la o versiune la alta, limbajului HTML i se aduga noi elemente. De asemenea, fiecare tip de browser (Netscape Navigator i Internet Explorer, n particular) folosete anumite elemente ne-standard, pentru a mbunti capacitile limbajului. Etichetele noi, care nu fac parte din versiunea standard poart numele de extensii. n general, browserele cele mai folosite, Netscape Navigator i Internet Explorer recunosc etichetele HTML 3.2 i o mare parte din cele nou introduse n HTML 4.0.

1

Este recomandat s evitai extensiile, n afara cazului cnd avei un motiv foarte serios pentru a le folosi. Pentru utilizatorii browserelor care nu recunosc aceste extensii, anumite pri ale documentului dumneavoastr pot deveni complet ilizibile. Bineneles, extensiile pot afecta n grade diferite aspectul formal al paginii dumneavoastr. De exemplu, folosirea extensiilor care in de aspectul liniilor orizontale incluse n pagin nu va afecta n mod grav aspectul paginii n browserele care nu suport aceste extensii. Cele mai multe dintre acestea vor ignora extensiile i vor afia o line orizontal standard. Pe de alt parte, extensiile care realizeaz formatarea i alinierea textului i aspectul fonturilor pot face ca documentul s aib un aspect foarte dezordonat n browserele care nu suport extensii de acest tip. Sau, n cazurile cele mai grave, acea parte a documentului poate s nu fie deloc afiat. 3. Coninut i aspect ntr-un document HTML Pentru a realiza documente Web eficiente, cu impact asupra cititorului, i pentru a valorifica pe deplin puterea limbajului HTML, trebuie s inei seama de o idee fundamental: HTML este destinat structurrii documentele i nu doar formatrii n vederea afirii lor. HTML furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de fonturi (tipurile de caractere), de formatare a textului, de culori, etc. Desigur, aspectul formal este important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilor prezentate. Totui, nu aspectul formal, ci coninutul documentului primeaz. HTML conine numeroase ci de structurare a coninutului documentului fr a pune problema felului cum vor fi afiate elementele: titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite n limbajul HTML fr a impune browserului s le afieze ntr-un anumit mod. Browserului i se las astfel posibilitatea de a afia respectivele elemente n conformitate cu rolul pe care l au ele n structura documentului i nu respectnd regulile impuse de creatorul documentului HTML. Marele avantaj al abordrii bazate pe coninut fa de cea bazat pe aspect rezid n faptul c paginile dumneavoastr vor fi vizualizate cu tipuri diferite de browsere, fiecare avnd versiuni diferite. n abordarea bazat pe aspect, dac browserul nu recunoate indicaiile de formatare specificate, fie nu le execut, fie le execut eronat, astfel c structurarea paginii va avea de suferit. n abordarea bazat pe coninut, indiferent cum va alege browserul s execute indicaiile de formatare, semnificaia elementelor din pagin va rmne neschimbat. De exemplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturi, caractere cu stiluri variate: aldine (bold, sau ngroate), cursive (italice, sau nclinate), subliniate, etc., un browser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care afieaz restul textului, astfel c semnificaia lor n pagin i-ar pierde relevana. Pe de alt parte, dac vei folosi etichetele speciale pentru titluri, chiar daca browserul nu le recunoate, are posibilitatea de a evidenia totui titlurile n cea mai bun manier pe care o are la dispoziie, astfel nct semnificaia lor pentru restul documentului se va pstra. 4. Uneltele de care avei nevoie Instrumentele minime de care avei nevoie pentru a realiza documente HTML sunt, n esen, urmtoarele: un editor de text, cu ajutorul cruia s scriei documentul, un browser, prin intermediul

1

cruia s vizualizai aspectul i coninutul documentului, un editor grafic cu care s prelucrai imaginile pe care le vei introduce n pagin i o conexiune la Internet. Editorul Pentru a scrie documente HTML avei la dispoziie trei posibiliti: 1. Folosirea unui simplu editor de text. Cel mai cunoscut i accesibil este Notepad-ul din Windows. Atenie! Nu este recomandat s folosii un procesor de text complex cum este Microsoft Word, chiar dac acesta poate salva documentele n format HTML (cu extensia .htm), deoarece la salvarea documentelor Word-ul adaug automat la textul documentului dumneavoastr o mare cantitate de cod coninnd informaii lipsite de relevan care ncarc inutil documentul i mrete dimensiunile fiierului. 2. Folosirea unui editor HTML. Acest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea documentului din punct de vedere sintactic i chiar scriu secvene de cod pentru anumite elemente pe care dorii s le inserai n document. 3. Folosirea unui editor WYSIWYG (What You See Is What You Get, n traducere liber "ceea ce vezi la editare este ceea ce obii la vizualizare"). Un editor de tip WYSIWYG permite alegerea i formatarea, cu ajutorul mouse-ului, a elementelor pe care dorii s le includei n pagin: tabele, link-uri, formulare, putei stabili tipul fonturilor, culorile, aranjarea textului n pagina. Pe msur ce un anumit element este inserat, editorul scrie n mod automat codul HTML corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra lui. Totui, dac avei cunotine de HTML putei interveni la nivelul codului n orice manier dorii, orice schimbare pe care o facei n cod, reflectndu-se automat n aspectul paginii. Printre profesioniti persist o controvers n privina tipurilor de editoare care ar trebui folosite pentru a edita documentele HTML. n esen, problema este aceasta: este mai bine s-i construieti paginile folosind HTML "pur", adic scriind totul tu nsui, sau este de preferat s foloseti un editor de tipul WYSIWYG? Editoare deosebit de puternice de acest tip: Macromedia Dreamweaver, Microsoft Front Page, Coffe Cup ca s dm numai cteva exemple, par a nclina definitiv balana n favoarea acestui tip de editare. Ele ofer facilitai avansate de editare a paginii, inclusiv posibilitatea de a crea pagini dinamice i de a include script-uri JavaScript sau applet-uri Java. Cu ajutorul lor se pot construi site-uri extrem de complexe. Exist, de asemenea i editoare de tip "built-in". Acestea sunt cel mai uor de folosit i adesea sunt puse la dispoziie de providerii care ofer i servicii gratuite de hosting (www.home.ro, www.rhp.ro, etc.). Editoarele de acest tip ofer un numr (de obicei redus) de template-uri (pagini preformatate), i doar cteva opiuni de editare: putei aduga text, modifica tipul fonturilor, culoarea fundalului i a textului, forma butoanelor de navigare, putei include un numr prestabilit de imagini. Din pcate, gradul de control asupra aspectului paginii este foarte redus. Utilizatorul este limitat la cteva opiuni, iar numrul mic de template-uri puse la dispoziie face ca pagina s fie lipsita de originalitate. Ai putea, atunci, s v ntrebai de ce mai este nevoie s nvai HTML dac exist editoare profesionale care scriu codul n locul dumneavoastr. n fond, muli dintre web designerii profesioniti

1

le folosesc, deoarece a scrie codul unui site "by hand", cu ajutorul unui simplu editor de text, este o munca titanic i mare consumatoare de timp. Rspunsul este simplu: trebuie s cunoatei HTML deoarece orict de performant ar fi un editor WYSIWYG, mai devreme sau mai trziu v vei gsi n situaia de a interveni la nivelul codului. Cea mai comun situaie este aceea n care, datorit multiplelor operaii de editare cum sunt mutarea, copierea, tergerea elementelor, anumite pri ale paginii nu vor mai funciona corect. De obicei, interveniile necesare asupra codului pentru depanarea sa sunt minime i uor de realizat... cu condiia s tii ce trebuie s facei. Cu alte cuvinte, s tii HTML. n concluzie, oricare ar fi opiunea dumneavoastr, fie c vei folosi un editor de HTML de tip text, fie c vei folosi unul de tip WYSIWYG, pentru a putea construi documente Web corecte i funcionale este nevoie s stpnii bine limbajul HTML. Browserul Evident, pentru a vizualiza documentele dumneavoastr avei nevoie de un browser. Recomandarea noastr este s deinei cel puin dou dintre cele mai rspndite browsere, Internet Explorer i Netscape Navigator, de dorit ar fi chiar cu versiuni diferite ale aceluiai browser. Testarea paginilor dumneavoastr sub diferite browsere este o etap important naintea publicrii lor pe Web. Dei n anii de nceput ai Web-ului problema aspectului paginilor n diferite tipuri de browsere era vital, deoarece erau folosite o mare diversitate de browsere, fiecare tip realiznd afiarea paginilor n maniera sa proprie, n prezent aceast problem i-a pierdut din importan. Motivul este acela c browserele Internet Explorer au acaparat cea mai mare parte din pia, statisticile artnd c Internet Explorer este tipul folosit de 93% dintre utilizatori iar Netscape Navigator de circa 6% dintre ei. Editorul grafic Desigur, vei dori s introducei imagini n paginile dumneavoastr. Pentru a putea s prelucrai imaginile n conformitate cu inteniile dumneavoastr i cu rolul lor n pagin avei nevoie de un editor grafic. Numrul editoarelor de acest tip este foarte mare, printre cele mai puternice i mai cunoscute fiind CorelDraw i Adobe Photoshop. Putei alege ns acel editor cu care suntei deja familiarizat, chiar dac mai puin performant, mai ales dac pentru nceput nu dorii s facei prelucrri foarte complexe ale imaginilor. Conexiunea la Internet Spre deosebire de primele trei instrumente, conexiunea la Internet nu este absolut esenial n etapa de construire a documentului HTML. Aa cum spuneam, documentele HTML se pot construi i vizualiza local, pe propriul computer. Cu toate acestea, existena unei conexiuni Internet v va ajuta foarte mult n procesul de nvare, i nu numai. Pe de-o parte deoarece pe Web vei gsi nenumrate exemple, i bune i rele, pe care le putei studia. n plus, vei avea acces la o cantitate uria i n continu cretere de resurse, documentaie i produse care v vor ajuta cu siguran la construirea paginilor dumneavoastr. i, n fine, accesul la Internet este esenial n etapa de testare a legturilor cu pagini externe. 5. Cum s procedai?

1

Pentru a folosi eficient informaiile din aceast carte iat mai jos cteva indicaii n privina modului n care v putei organiza activitatea: Creai-v n folderul My Documents (sau ntr-o alta locaie aleas de dumneavoastr) un folder de lucru numit Work. Deschidei editorul de text n care ai ales s lucrai (ar fi de dorit ca pe parcursul procesului de nvare s folosii un simplu editor text, de exemplu Notepad). Scriei (editai) fiecare exemplu pe care l gsii aici. Salvai-l n folderul dumneavoastr cu numele indicat n blocul i extensia .html. Putei folosi att extensia .html ct i extensia .htm dar este bine ca odat ce ai ales o anumit extensie s fii consecvent n folosirea ei. Denumii-v fiierele cu litere mici. Atenie! Editorul de text Notepad salveaz fiierele cu extensia implicita ".txt". De aceea cnd salvai este necesar s precizai n mod explicit extensia dorit (.html sau .htm) Cnd vei salva fiierul creat n Notepad s-ar putea s constatai c restul de fiiere HTML pe care le-ai salvat anterior nu apar n fereastr. Pentru a le vedea, deschidei meniul File>Save As..., iar n fereastra deschis selectai din list All files. Deschidei cu browserul utilizat fiierul HTML (File> Open> Browse) pentru a vedea cum arat pagina Web descris n fiierul dumneavoastr. Dup fiecare modificare pe care o facei n fiierul HTML nu uitai s-l salvai, altminteri schimbrile fcute nu se vor reflecta n aspectul final al paginii. Pentru a observa felul cum modificrile pe care le facei n codul HTML schimb aspectul paginii, trebuie s apsai butonul Refresh/Reload al browserului. Pentru a putea s vizualizai cu uurin aspectul paginilor dumneavoastr este bine s avei deschise permanent att editorul de text n care scriei documentul HTML ct i browserul cu care l vizualizai. 6. Convenii de notaie HTML nu este un limbaj case-sensitive, adic nu face distincia ntre literele mici i cele mari(majuscule). Aceasta nseamn c indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser. Din acest motiv pe parcursul acestei lucrri vom utiliza o convenie de notaie n care etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru o mai bun difereniere i evideniere a acestora. Desigur c n documentele pe care le scriei putei respecta aceast convenie sau putei scrie cu un singur tip de litere, dup cum v este mai uor. Peste tot n cadrul textului, unde apar etichete, atribute sau valori ale acestora am folosit caractere Courier New pentru a diferenia elementele de limbaj de restul textului. De asemenea, vei observa c, n exemplele prezentate, codul HTML este scris indentat, adic aliniat la diverse nivele. Ca i n cazul etichetelor, acest lucru nu are importan pentru browser.

1

Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uor diversele elemente pe care le includei n document. Totui, dac n cazul etichetelor putei opta pentru orice variant dorii n privina scrierii lor, indentarea este recomandat chiar i programatorilor cu experien. Un cod neindentat este foarte greu de citit i de depanat, n cazul apariiei unor erori. 7. Rezumat World Wide Web este o colecie imens de documente interconectate prin intermediul Internetului, care asigur o interfa hypermedia pentru informaii. Pentru a transmite i afia documentele, World Wide Web folosete protocolului de comunicaie HTTP. Funcionarea World Wide Web se bazeaz pe relaia client-server. Clienii sunt browserele Web iar serverele sunt serverele Web. Limbajul HTML realizeaz descrierea documentelor Web. Prin intermediul su i se comunic browserului ce elemente fac parte din pagina Web i care este aspectul acestora. Este recomandat crearea unor documente HTML orientate ctre coninut i nu ctre aspect. Pentru a crea documente HTML avei nevoie de un set minimal de instrumente: un editor de text, un browser, un editor grafic i o conexiune la Internet. Capitolul 2 Structura unui document HTML 1. Ce este un document HTML? Un document HTML nu este altceva dect un fiier text care, pe lng textul propriu-zis ce va aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje (tags, n limba englez). Not Toate celelalte elemente, de tip multimedia, care nsoesc documentul HTML, cum sunt sunetul, imaginile video, grafica, etc., nu fac parte din structura acestuia. Documentul HTML include referine la aceste elemente, prin intermediul unor etichete speciale, care indic browserului modul n care ele vor fi ncrcate i integrate n pagina Web. Etichetele nu sunt instruciuni n sensul cunoscut al noiunii, ele avnd doar rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse, privind aspectul textului, al fonturilor (tipurilor de caractere) i n general, al tuturor elementelor prezente n pagin. Etichetele sunt delimitate de perechi de paranteze unghiulare "< >". Unele etichete permit precizarea anumitor caracteristici ale elementului pe care l introduc n document prin intermediul unor perechi caracteristic - valoare numite atribute. Exist atribute specifice doar anumitor elemente i atribute ce sunt utilizate n asociere cu mai multe etichete. O etichet poate avea unul, nici unul, sau mai multe atribute. La rndul lor, atributelor li se pot atribui valori diferite.

1

Att etichetele ct i atributele sunt case-insensitive, ca atare nu va exista nici o diferen de aciune ntre, s spunem, , , , sau chiar . Ele sunt echivalente. Pe de alt parte, valoarea unui atribut poate fi case-sensitive, cum, n principiu, este cazul locaiilor fiierelor i adreselor URL. Regulile de folosire a etichetelor, atributelor i valorilor acestora reprezint sintaxa limbajului HTML. Similar limbajelor de programare, n HTML respectarea sintaxei limbajului este determinant pentru o bun funcionare a documentului. Spre deosebire de limbajele compilate cum ar fi limbajul C, n care programele trec nainte de execuie prin faza de compilare, etap n care compilatorul semnaleaz eventualele greeli de sintax, la documentele HTML nu se ntmpl acest lucru. Documentele HTML sunt interpretate de browser exact aa cum au fost ele scrise. Prin urmare, orice greeal de sintax se va reflecta direct n aspectul paginii Web, conducnd, de cele mai multe ori, la o funcionare defectuoas a acesteia. Dac la vizualizarea paginii dumneavoastr cu browserul constatai c anumite secvene ale paginii nu au aspectul ateptat, sau elementele pe care dorii s le introducei nu sunt afiate, revenii asupra documentului HTML i verificai nc o dat sintaxa acestor elemente. HTML lucreaz ntr-o manier foarte uor de neles. n esen trebuie s scriei textul i s precizai elementele care dorii s apar n pagin i s le includei ntre anumite etichete specifice. De exemplu, dac dorim s afim o propoziie cu caractere ngroate (bold), vom marca nceputul acesteia folosind eticheta iar pentru marcarea sfritului propoziiei eticheta . Acesta este un text scris cu litere aldine Atenie! Browserul nu ine cont de numrul spaiilor dintre cuvinte, afiarea fcndu-se invariabil cu un singur spaiu. De asemenea, nu se poate preciza mrimea liniilor de text, acestea fiind de mrimea ferestrei browserului (prin redimensionarea ferestrei se vor rearanja i liniile de text). Dup cum vom vedea mai trziu, se poate preciza totui unde s se termine un anumit rnd i cum se poate alinia un text n pagin. Etichetele HTML sunt de dou tipuri: etichete container (container tags) etichete vide (empty tags) Etichetele container sunt de forma: bloc de text unde: - marcheaz nceputul unui bloc - marcheaz sfritul blocului Etichetele specific formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul unora dintre ele, prezena etichetei de nchidere () este opional. Pe parcursul capitolelor care vor urma, vom preciza explicit care anume sunt etichetele care au aceast proprietate.

1

Etichetele vide au forma: Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: paragrafe, sfrit de linie, linii orizontale i altele, deci dau indicaii browserului despre ce element este vorba i despre cum s afieze acel element. Etichetele vide nu au etichet de nchidere. 2. Etichete de structur Orice document HTML conine dou seciuni: antetul (head) corpul documentului (body) Structura general a unui document HTML este urmtoarea: Documentul este delimitat de etichetele i este format din cele dou pri: antet (head) - este delimitat de etichetele i conine titlul documentului precum i alte informaii privind documentul. n antetul documentului se mai insereaz i anumite secvene de program (script-uri), care se execut la ncrcarea documentului n browser. corp (body) - care delimiteaz coninutul propriu-zis al documentului i este inclus ntre etichetele Iat acum i semnificaia etichetelor menionate i care fac parte din structura oricrui document HTML: ntre aceste etichete este inclus ntregul document HTML. Ele comunic browserului unde ncepe i unde se termin documentul. ntre aceste etichete sunt incluse titlul, deja menionat, precum i alte informaii despre documentul HTML. Aceste elemente, numite metatag-uri sunt deosebit de importante pentru ca pagina s fie ct mai bine cotat de ctre motoarele de cutare. Ele vor face obiectul unui capitol separat. Metatag-urile i antetul n ansamblul su nu sunt vizibile pentru vizitator n pagina Web. Totui, la fel ca ntreg codul HTML al paginii, antetul poate fi vizualizat selectnd din meniul browserului opiunea View > Source.

1

Stabilete titlul documentului HTML. Titlul documentului este deosebit de important deoarece este unul din criteriile folosite de motoarele de cutare pentru indexarea paginii. Prin urmare, strduii-v s gsii un titlu care s descrie ct mai corect i complet coninutul paginii dumneavoastr. Atenie! Eticheta de mai sus nu stabilete titlul care apare n cadrul paginii, ci pe acela care apare obinuit n bara de titlu a browserului. Conine descrierea textului i elementelor paginii. n corpul documentului se stabilesc, deci, aspectul i coninutul paginii Web. Elementele coninute n aceast seciune sunt vizibile n pagin. Poate nu v vine s credei, dar acum avei deja posibilitatea de a crea o pagin foarte simpl de text. Avei Notepad-ul deschis? Dac nu, deschidei-l acum i scriei exemplul urmtor: Exemplul 2. 1 Pagina mea Am reusit sa scriu prima mea pagina de Web. Urmatoarea va fi cu mult mai buna. Salvai fiierul cu numele primapagina.html. Apoi deschidei browserul pe care l folosii (Internet Explorer sau Netscape), selectai meniul File > Open > Browse, cutai folderul n care ai salvat fiierul, deschidei-l i v vei afla n faa primului dumneavoastr document HTML : Figura 2.1 Dac dorii s scriei un text pe mai multe linii n pagin, va trebui s folosii eticheta
(de la line break), care face trecerea pe o linie noua. Eticheta
este de tip empty, deci nu are etichet de nchidere. ncercai exemplul de mai jos, n care afiarea textului documentului se va face pe dou rnduri. Exemplul 2. 2 Pagina mea Am reusit sa scriu prima mea pagina de Web.
Urmatoarea va fi cu mult mai buna. Acum, documentul dumneavoastr va arta ca n Figura 2.2 Deoarece structura documentelor HTML obinuite este n realitate mult mai complex, este recomandat ca, pe msur ce procesul de editare avanseaz, s introducei comentarii n text pentru a face aceast structur ct mai explicit. Comentariile nu sunt vizibile pentru browser, ele servesc creatorului paginii pentru a da un grad crescut de lizibilitate documentului HTML.

1

Comentariile constau n scurte informaii, explicaii la elementele de cod utilizate, etc., fiind deosebit de utile ulterior, mai ales n situaia n care se impune depanarea codului. Comentariile se introduc prin includerea textului ntre etichetele de mai jos. Iat dou exemple: 3. Folosirea corect a etichetelor Etichetele container se compun, aa cum am vzut mai devreme, din perechi de etichete: etichet de deschidere i de nchidere . La construirea unei pagini Web complexe vei fi pus adesea n situaia de a folosi mai multe etichete pentru aceeai secven de text. De pild, vei dori s atribuii unui text dou proprieti: litere aldine sau ngroate (bold) i text centrat n pagin. Pentru aceasta va trebui s utilizai dou perechi de etichete, care descriu cele dou proprieti, n mod simultan, metod numit imbricarea etichetelor (nested tags), ca n exemplul de mai jos: Text cu aldine si centrat Este foarte important ca, n cazul folosirii mai multor etichete container mpreun, ele s fie plasate n mod corect. n aceast situaie, principiul de utilizare este: "Last In - First Out" (LIFO). Acest lucru nseamn c ultima etichet deschis trebuie s fie prima care se nchide. Atenie! Trebuie s fii foarte atent la nchiderea etichetelor, pentru a nu nclca principiul LIFO. n caz contrar, secvena de cod din pagin nu va funciona corect. Iat un exemplu generic de folosire corect a dou etichete: Etichete utilizate corect i un altul de folosire incorect: Etichete utilizate incorect 4. Rezumat Un document HTML este un fiier text care conine textul care va aprea n pagin i etichete. Acestea au rolul de a comunica browserului semnificaia i modul de afiare al elementelor incluse ntre ele.

1

Etichetele sunt nsoite de atribute care sunt perechi caracteristic - valoare i care au rolul de a stabili diverse caracteristici ale etichetei. Etichetele pot fi de dou tipuri: etichete container i etichete vide. Etichetele container necesit eticheta de nchidere n timp ce etichetele vide nu trebuie nchise. Un document HTML este format din antet i corp. Etichetele de structur ale documentului sunt: care delimiteaz documentul care delimiteaz antetul care delimiteaz titlul documentului care delimiteaz corpul documentului. ntr-un document HTML se pot introduce comentarii prin introducerea textului ntre etichetele Imbricarea etichetelor respect regula LIFO: prima etichet deschis este ultima care se nchide. 5. Test HTML este un acronim de la: a) b) c) Hyper Text Marker Line Hyper Text Markup Language Hyper Technical Method Library

Etichetele HTML sunt incluse ntre: a) b) c) [ i ] ( i ) < i >

Etichetele i textul care nu sunt vizibile n pagin sunt plasate n blocul: a) b) c) Body Head Table

Ce fel de program este necesar pentru a scrie HTML? a) b) c) un editor de text un editor grafic HTML Development 4.0

O pagina Web este format din dou pri: a) b) c) Top i Bottom Body i Frameset Head i Body

Care etichete i comunica browserului unde ncepe i unde se termin pagina?

1

a) b) c)

Care dintre urmtoarele elemente nu poate fi gsit n seciunea Head? a) b) c) Title Table Metatag

n construcia urmtoare: Pagina mea Pagina mea reprezint: a) b) c) Numele fiierului HTML Titlul care va aprea n pagina Web Titlul care va aprea n bara de titlu a ferestrei browserului

Care dintre urmtoarele fiiere nu este un fiier HTML? a) b) c) mypage.htm mypage.txt mypage.html

Iat exemplul de mai jos: Text Text Text Text Este un exemplu de folosire corect a etichetelor? a) b) c) Nu, deoarece nchiderea etichetelor nu respect regula LIFO. Nu, deoarece nu avem voie s folosim mai mult de dou etichete imbricate Da, deoarece etichetele se nchid corect.

Structura unui document HTML1. b) 2. c) 3. b) 4. a) 5. c) 6. a) 7. b)

1

8. c) 9. b) 10. c)

Capitolul 3 Culori Culoarea reprezint un caracteristic extrem de important a unei pagini Web. Utilizat cu grij i msur, ea poate mbunti substanial aspectul paginii, fcnd-o mai lizibil i mai atractiv, iar textul mai uor de parcurs. Pe de alt parte, utilizarea excesiv sau inadecvat a culorilor poate transforma un text de calitate ntr-un fel de caleidoscop obositor, greu de urmrit, i care i va determina pe muli vizitatori s renune la a-l mai parcurge. Datorit faptului c ea reprezint un atribut al multor elemente ale documentelor Web (text, fundaluri, margini, link-uri), am optat pentru prezentarea detaliat a modului de utilizare al culorilor nc din aceast etap a lucrrii noastre. 1. Sistemul de definire a culorilor Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun. n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru. Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale: 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 1 0 A 1 B 1 2 C 1 3 D 1 4 E 1 5 F 1

De exemplu, #FF0000 este codul pentru rou. Semnificaia acestui cod este urmtoarea: cantitatea de rou este maxim, iar cantitile de verde i albastru sunt egale cu 0. Codul pentru verde pur este #00FF00 iar pentru albastru este #0000FF. Deoarece uneori definirea culorii prin intermediul codului su hexazecimal este incomod, standardul HTML 3.2 stabilete un set de 16 culori standard. n acest caz, pentru valoarea atributului de culoare se utilizeaz direct numele culorii, ca n exemplul de mai jos, n care se seteaz culoarea magenta pentru linkurile vizitate: Numele i codul culorilor stabilite n standardul HTML3.2 sunt urmtoarele: Tabelul 3. 1

1

Nume culoare aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal yellow white

Cod hexazecimal #00FFFF #000000 #0000FF #FF00FF #808080 #008000 #00FF00 #800000 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFF00 #FFFFFF

Mai trebuie menionat faptul c se pot utiliza, pe lng culori, 100 de nuane de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuana cea mai nchis, iar "gray 100" cea mai deschis. n Anexa 3 vei gsi tabelul culorilor nsoite de codurile lor hexazecimale. 2. Corespondena dintre codurile hexazecimal i zecimal Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Dei se bazeaz i ele pe acelai sistem RGB de definire a culorilor, numerele care stabilesc cantitile celor trei culori sunt specificate n sistemul zecimal. De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128. Aceast coresponden se realizeaz simplu, trecnd fiecare dintre cele trei numere hexazecimale din codul culorii n sistemul zecimal: 63(16)=99(10) , FF(16)=255(10), 80(16)=128(10) Motivul pentru care trebuie s cunoatei aceast coresponden este acela c pentru a folosi n documentul HTML o culoare al crei cod este dat n sistemul zecimal, aceasta trebuie convertit n cod hexazecimal.

1

Conversia se poate realiza foarte simplu folosind calculatorul din Windows (Start > Accessories > Calculator) care trebuie setat pe opiunea Scientific din meniul View. Vei observa o serie de butoane radio dintre care ne intereseaz dou: Hex i Dec. Nu avei altceva de fcut dect s selectai Dec, s tastai numrul n baza 10 i apoi s selectai opiunea Hex. Rezultatul conversiei va aprea pe ecran. Conversia invers se realizeaz n mod similar. i acum s trecem la lucruri mai atractive i s dm via paginii noastre adugndu-i culori. Vom lua pe rnd atributele etichetei . Cu ajutorul lor se pot seta culorile fundalului, textului i linkurilor: bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilor vlink - culoarea linkurilor vizitate alink - culoarea linkului activ 3. Culoarea fundalului Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei , cruia i atribuim o valoare astfel: Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei. Iat un exemplu de pagin cu fundal verde: Exemplul 3. 1 culori1 Pagina cu fundal verde Aspectul paginii va fi cel din Figura 3.1. 4. Culoarea textului Pentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei , conform sintaxei: Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a textului (culoarea unui bloc de text), vom folosi o etichet despre care vom vorbi pe larg n capitolul urmtor: eticheta . Aceasta este o etichet container care cuprinde ntre etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei:

1

Text n Exemplul 3.2 culoarea textului este albastru iar anumite cuvinte sunt colorate n rou. Aspectul paginii va fi cel din Figura 3.2. Exemplul 3. 2 culori2 Text albastru si rosu Textul din aceasta pagina este albastru cu mici exceptii 5. Culoarea legturilor n general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel: blue (albastru) - pentru legturi red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng apsat) purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un click Pentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei : link pentru legturi alink pentru legturile active vlink pentru legturile vizitate conform sintaxei: Documentul din Exemplul 3.3 creeaz o pagin n care textul este negru iar legturile au culoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n exemplu este folosit eticheta i atributul sau href, care vor fi prezentate pe larg n capitolul despre legturi. n acest moment singurul lucru care ne intereseaz este cum putem stabili culorile acestora. Exemplul 3. 3 culori3 Legaturi colorate

1

Legatura catre primul exemplu Aspectul paginii va fi cel din Figura 3.3. 6. Alegerea culorilor Sunt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin Web. Primul i cel mai important este acela de a face coninutul uor de citit. Aceasta nseamn...ai ghicit! Litere negre pe fond alb. Dei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr-o pagin Web literele roii pe fond albastru nu arat bine i sunt greu de citit. O alt combinaie nefericit este cea cu fondul negru sau de culoare foarte nchis i textul de culoare alb. S nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana ochiului, de iluminarea camerei, etc. Pe un monitor cu reglaje medii ale contrastului i strlucirii, un text de culoare roie dispus pe un fundal negru va fi ilizibil, chiar dac la valori maxime ale acestor caracteristici combinaia poate genera efecte interesante. n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei. Iat cteva dintre sentimentele pe care le sugereaz culorile: Rou - agresivitate, pasiune, putere, vitalitate Roz - feminitate, inocen, moliciune Portocaliu - amuzament, veselie, cldur, exuberan Galben - sentimente pozitive i cordialitate Verde - linite, sntate, prospeime Albastru - autoritate, demnitate, securitate, ncredere Violet - sofisticare, spiritualitate, mister Maro - utilitate, legtura cu pmntul, bogie Alb - puritate, ncredere, modernitate, rafinament Gri - sobrietate, autoritate, sim practic Negru - seriozitate, distincie, hotrre Alegerea culorilor pentru site trebuie s fie n concordan cu tema site-ului i s sublinieze mesajul su. Astfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele i luminoase, n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sunt potrivite culori sobre i care sugereaz seriozitate i ncredere. Alegerea culorilor pentru legturi este, de asemenea, important. Legturile au, n mod prestabilit, anumite culori. Schimbarea acestora, dei posibil, l poate induce n eroare pe vizitator. Ca i n cazul textului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu culoarea sau imaginea de fundal a paginii. Rmnei consecvent culorilor alese pentru legturi, pe parcursul ntregului site.

1

7. Culori "sigure" Aa cum era de ateptat, nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, aa-numit palet Web sau "culorile sigure Web". Culorile "sigure" sunt cele definite prin standardul HTML 3.2 prezentat n tabelul de mai sus sau sunt realizate prin combinaii ale urmtoarelor numere hexazecimale: 00 33 66 99 CC FF Codul hexazecimal variaz ntre #FFFFFF (alb) i #000000 (negru). Un monitor setat s afieze 256 de culori va ncerca afiarea unei culori din afara acestui set prin fenomenul numit "dithering" (alternarea unui pixel de o culoare cu un pixel de alt culoare), ceea ce uneori d rezultate, dar adesea rezultatul e departe de culoarea real. Alteori, computerul va afia culoarea "sigur" cea mai apropiat de cea original. n principiu, o astfel de problem poate prea minor. n realitate, presupunnd c o pagin Web conine att textul ct i fundalul ambele n culori "nesigure", prin modificarea lor de ctre computerul cititorului, nuanele "aproximate" pot face textul total ilizibil. Pentru a evita astfel de surprize neplcute este suficient s v menine n limita celor 256 de culori "sigure". Desigur, putei folosi o combinaie hexazecimal ciudat, ca aceasta: #12EC8B, dar nu vei avea nici o garanie n privina modului n care va fi afiat aceast culoare n diferite browsere i pe diferite platforme. 8. Rezumat Culorile ntr-un document HTML sunt definite cu ajutorul codului RGB care exprim n sistem hexazecimal cantitatea de rou, verde i albastru prezent n fiecare culoare. Pentru a stabili culorile ntr-o pagin Web se folosesc atributele etichetei dup urmtoarea sintax: corpul documentului Alegerea culorilor pentru o pagin Web trebuie s fie n strns legtur cu mesajul transmis de aceasta i s permit citirea cu uurin a informaiilor prezentate. Pentru a evita afiarea defectuoas a culorilor din pagin este recomandat folosirea culorilor "sigure". 9. Test 1. a) Sistemul pentru definirea culorilor este: Red, Green, Blue

1

b) c)

Red, Yellow, Blue White, Black, Gray

Culorile n HTML pot fi specificate folosind: a) b) c) Codul zecimal Codul hexazecimal Codul Morse

Care este cea mai mare cifr n sistemul hexazecimal? a) b) c) 15 F A

O culoare care are n sistemul zecimal codul RGB cu valorile: 46, 250, 34 are codul hexazecimal: a) b) c) #2EFA22 #3CCD45 #66FF90

Pentru a stabili culoarea fundalului paginii folosim: a) b) c)

Setarea culorii pentru tot textul din pagin se face cu: a) b) c)

Cum se poate schimba culoarea unui bloc de text? a) b) c) text text text

Care sunt culorile prestabilite pentru legturi, legturi active i legturi vizitate? a) b) c) albastru, rou, violet albastru, verde, galben negru, albastru, rou

Culoarea legturilor se poate schimba folosind: a) b)

1

c)

Atributele link, alink i vlink servesc la: a) b) c) stabilirea legturilor stabilirea culorilor pentru legturi stabilirea culorilor pentru ntreaga pagin

Culori1. a) 2. b) 3. b) 4. a) 5. c) 6. c) 7. c) 8. a) 9. b) 10. b)

Capitolul 4 Fonturi nainte de a aborda tipurile de caractere care pot fi utilizate n documentele Web, se cuvine menionat un fapt: HTML nu este un limbaj orientat spre aspectul (layout) paginii, ci spre coninutul acesteia. Importana acestei meniuni rezid n aceea c etichetele HTML nu impun, cum s-ar putea crede, ci "sftuiesc" marea varietate de browsere care proceseaz pagina Web, cum s afieze textul. Ceea ce impun ele cu adevrat este coninutul, textul n sine, nu forma de prezentare. Desigur c nu se poate vorbi de cealalt extrem, a unui arbitrariu absolut, n care fiecare browser va afia textul sub o form absolut imprevizibil. Un text cu o anumit formatare pentru Internet Explorer, s spunem, va fi vizualizat practic identic de toi utilizatorii acestui tip de browser. Exist numeroase etichete care permit formatarea caracterelor i ne ofer posibilitatea de a da textului din pagina Web aspectul dorit. 1. Formatarea caracterelor Eticheta care se folosete pentru a da unui caracter sau unui ir de caractere (unui text) aspectul dorit este eticheta container . ntre eticheta de nceput i cea de sfrit se insereaz textul sau caracterul ale crui caracteristici dorim s le stabilim. nainte de a discuta despre atributele etichetei s luam un exemplu: Ion Luca Caragiale Efectul liniei de mai sus este afiarea textului "Ion Luca Caragiale" cu fonturi Arial, de culoare roie i de mrime egal cu 2 puncte. S analizm succesiv cele trei atribute ale etichetei :

1

size - dimensiunea textului - poate fi un numr ntre 1 i 7 (dimensiuni absolute), ntre -1 i -3 sau ntre +1 i +4 (dimensiuni relative, adic raportate la dimensiunea deja existent a fontului). Dimensiunea prestabilit (default) a fonturilor este 3. Dac dimensiunile menionate depesc intervalul 1-7, browserul rotunjete automat valorile pentru a le ncadra n acest interval. color - culoarea textului - este culoarea cu care va fi afiat textul prezent ntre etichete (n exemplul nostru, "Ion Luca Caragiale" ). face - tipul de font - determin tipul de font care va fi utilizat la afiarea textului. Tipurile cele mai uzuale sunt: Arial Tahoma Helvetica Times New Roman Courier Verdana Atributul etichetei permite precizarea fie a unui singur tip de font fie a mai multora, separate prin virgul. Precizarea mai multor fonturi ajut n eventualitatea cnd primul tip indicat nu este instalat pe calculatorul celui care viziteaz pagina, i se face ca n exemplul de mai jos. n aceast situaie browserul va alege singur din list primul tip de font pe care l recunoate, ignorndu-le pe urmtoarele. Atenie! La stabilirea tipului de caracter utilizat n pagin inei seama de faptul c nu toi utilizatorii au instalate pe computerele lor acelai set de caractere ca i dumneavoastr. Din acest motiv, folosirea unor caractere exotice, de efect, poate conduce la un eec n cazul cnd utilizatorul nu are instalat acel font. Din acest motiv este de preferat folosirea unor fonturi cu utilizare larg, cum sunt cele menionate mai sus. n Exemplul 4.1 vom aplica pe rnd fiecare dintre cele trei atribute menionate asupra unui text, aspectul paginii descrise de acest document fiind cel din Figura 4.1. a) Exemplul 4. 1 fonturi1 Manual de HTML si design Web
Manual de HTML si design Web
Manual de HTML si design Web

1

Pentru a stabili aspectul textului unei ntregi pagini Web, putem folosi eticheta . Spre deosebire de aceasta nu este o etichet container, deoarece efectul ei se refer la tot textul din pagin. Nu se folosete pentru a stabili caracteristicile unui bloc de text. Este indicat s fie inclus n documentul HTML imediat dup eticheta . Atributele etichetei sunt aceleai cu cele ale etichetei , respectiv: size, color, face. n Exemplul 4.2 vom construi o pagin creia i setm textul cu atributele: face - tip de font Arial, size - dimensiunea fontului 2, color - culoare albastr. O parte din text va avea alt tip de font, alt mrime i culoare, acestea fiind stabilite prin folosirea etichetei . b) Exemplul 4. 2 fonturi2 Am ajuns la lectia despre fonturi a Manualului de HTML Dup cum putei observa din Figura 4.2, caracteristicile textului din pagin au fost setate cu ajutorul etichetei . Pentru a afia simultan o parte din text ntr-un mod diferit am folosit eticheta . Dei eticheta face parte din standardul HTML 3.2, atributele sale nu sunt recunoscute de browserele Netscape. Ca urmare, acesta va afia textul utiliznd propriile setri prestabilite (default), ignornd atributele menionate n eticheta . Urmtorul exemplu (Exemplul 4.3) afieaz un cuvnt avnd literele de mrimi diferite. Aspectul acestei pagini este cel din Figura 4.3. c) Exemplul 4. 3

fonturi3 G R A T U I T

1

S trecem n revist, n continuare, alte etichete care schimb aspectul unui caracter sau al unui bloc de text. 2. Accentuarea textului 1. Eticheta face fonturile mai mari dect dimensiunea curent.

Text cu caractere mari Text cu caractere mari 2. Eticheta face fonturile mai mici dect dimensiunea curent.

Text cu caractere mici Text cu caractere mici 3. Etichetele (bold) i realizeaz scrierea cu caractere aldine, sau ngroate (bold). Text ingrosat 1 Text ingrosat 1 Text ingrosat 2 Text ingrosat 2 4. Etichetele (italic) i (emphasized)realizeaz scrierea cu caractere italice. Text inclinat 1 Text inclinat 1 Text inclinat 2 Text inclinat 2 5. Etichetele i realizeaz scrierea textului tiat de o linie orizontal. Text taiat 1 Text taiat 1 Text taiat 2 Text taiat 2 6. Eticheta (underlined) realizeaz sublinierea textului.

Text subliniat Text subliniat Atenie! Utilizarea textului subliniat trebuie fcut cu grij, ntruct acesta poate fi confundat cu un link.

1

7. Eticheta (superscript). Prin intermediul ei se pot insera n document caractere/texte plasate deasupra nivelului liniei de scriere. Apa ingheata la 0 0C Apa ingheata la 0 0C 8. Eticheta (subscript). Prin intermediul ei se insereaz texte plasate sub nivelul liniei de scriere. Coordonatele X1, Y2 Coordonatele X1, Y2 Este de remarcat faptul c etichetele i sunt executate diferit n diverse browsere. Astfel, n Netscape face textul mai mare cu un punct iar mai mic cu un punct dect dimensiunea curenta. n Internet Explorer, afieaz textul cu fonturi de dimensiune 4 iar cu fonturi de dimensiune 2. Etichetele i pot fi repetate pentru a obine un efect mai accentuat. Exemplele urmtoare ilustreaz modul cum pot fi utilizate aceste etichete. d) Exemplul 4. 4 fonturi4 Etichete care schimba aspectul textului Aspectul paginii este cel din Figura 4.4 e) Exemplul 4. 5 fonturi5 Acesta este font Arial
Acesta este font Algerian
Acesta este font Courier
Acesta este font Vivaldi
Acesta este font Garamond
Acesta este font Modern

1

Pagina arat ca n Figura 4.5 Dup cum ai observat mai sus, exist dou etichete al cror efect este acelai: accentuarea textului fie prin scrierea cu caractere italice fie cu caractere aldine. 3. Etichete logice i etichete fizice Etichetele i se numesc etichete fizice, iar i etichete logice. Etichetele de titluri de la la sunt, de asemenea, etichete logice. Diferena dintre cele dou tipuri de etichete este legat de felul cum sunt ele executate de diversele tipuri de browsere. Astfel, etichetele fizice impun browserului afiarea n formatul exact, precizat prin intermediul lor. Dac browserul nu suport acest format, etichetele sunt ignorate. Spre deosebire de etichetele fizice, cele logice las browserului libertatea de a alege cel mai bun mod de a ndeplini comanda transmis prin eticheta. De exemplu, efectul etichetei este, n cele mai multe browsere, scrierea textului cu caractere italice. Totui, dac un anumit tip de browser nu suport acest format de caractere, va accentua totui textul ntr-un alt mod, cel mai bun de care dispune. Alte etichete logice utilizate n documentele HTML sunt: (citation) Etichet folosit pentru inserarea unui citat. De obicei, citatul este afiat cu caractere italice. (code) Etichete folosite pentru inserarea n text a unor secvene de cod scrise ntr-un limbaj de programare. n general secvenele de cod sunt afiate cu fonturi Courier. (definition) Eticheta este folosit pentru a insera n text definiia unor termeni. Este util la crearea indexului sau glosarului unui document. (keyboard) Aceast etichet logic se folosete pentru a indica un text care urmeaz a fi introdus de la tastatur, ca n urmtorul exemplu: Pentru a parasi programul tastati quit (sample) Este o etichet logic folosit pentru a insera o mostr de text. (teletype) Aceast etichet se folosete pentru a afia textul inclus ntre etichete cu fonturi monospaiate. Tipul de font monospaiat (cum este de exemplu Courier) are proprietatea c fiecrui caracter i se rezerv acelai numr de pixeli pe ecran. Astfel, caracterul "i" va avea alocat tot atta spaiu pe ecran ca i caracterul "W": "Courier" este un font monospaiat. Mai trebuie precizat i faptul c utilizarea unora dintre etichetele de formatare a fonturilor aa cum au fost prezentate ele n acest capitol tinde s fie nlocuit cu foile de stiluri (Cascade Style Sheets) despre care vom vorbi ntr-un capitol viitor. 4. Rezumat1Pentru a stabili aspectul unei anumite secvene de text aceasta este inclus ntre etichetele conform sintaxei: text Pentru a seta aspectul textului n toat pagina Web se folosete eticheta conform sintaxei: Accentuarea textului se poate face folosind diverse etichete pentru scrierea cu caractere aldine, cu caractere italice, cu caractere mai mari sau mai mici dect dimensiunea curent a fonturilor. Etichetele sunt de dou tipuri: fizice i logice, etichetele fizice fiind orientate ctre aspectul textului iar cele logice ctre semnificaia textului n cadrul documentului. 5. Test 2. a) b) c) Pentru a stabili tipul de font pentru ntreaga pagin Web se folosete eticheta: Pentru a stabili tipul de font cu care se face afiarea unui text se folosete atributul: a) b) c) character type faceUnul dintre exemplele urmtoare este incorect. Care? a) b) c) Ce realizeaz urmtoarea etichet? a) b) c) curent. Afieaz textul cu fonturi de mrime 1. Afieaz pe pagin textul "+1". Afieaz textul cu fonturi de dimensiune mai mare cu un punct dect dimensiunean afara etichetei ce alt etichet se mai folosete pentru a scrie un text cu caractere aldine? a) b) 1c)Etichetele i realizeaz: a) b) c) scrierea textului cu caractere italice inserarea unei imagini scrierea textului cu caractere mai mici dect cele curenteCe este incorect n urmtorul exemplu? text a) b) c) Nu se pot preciza mai multe tipuri de fonturi ca valori pentru atributul face. Tipurile specificate nu se pot scrie cu caractere aldine Etichetele i nu se nchid corect.Prin ce se aseamn etichetele i ? a) b) c) Sunt amndou etichete logice. Sunt amndou etichete fizice. Servesc amndou la scrierea textului cu caractere italice.Care este greeala n urmtoarea construcie? text a) b) c) nu este o eticheta container nu suport atributul face nu suport atributul sizeCe efect are urmtoarea etichet? a) b) c) Textul se afieaz cu toate cele trei tipuri de fonturi. Textul se afieaz cu primul tip de font, dintre cele trei, pe care l recunoate browserul. Eticheta nu era nici un efect ntruct este incorect.Fonturi1. b) 2. c) 3. c) 4. c) 5. b) 6. a) 7. c) 8. a) 9. a) 10. b)1Capitolul 5 Formatarea textului Etichetele despre care vom vorbi n continuare nu se mai refer la particularitile fonturilor ci la felul n care poate fi amplasat un text n cadrul paginii. nainte de a discuta n amnunt despre etichetele care permit formatarea textului, s facem cteva precizri privind felul cum sunt afiate textele. Dup cum tii, fiierele HTML sunt fiiere text. Aceasta nseamn c atunci cnd salvai fiierul respectiv, el este salvat numai ca text, deci browserul nu poate recunoate i executa dect strict acele comenzi prevzute de etichetele HTML. Din acest motiv, trecerea la un rnd nou, care n editorul de text se realizeaz prin apsarea tastei ENTER, nu este recunoscut de browser. Un alt aspect este plasarea n text a spaiilor. Chiar dac vei introduce spaii suplimentare ntre cuvinte atunci cnd scriei documentul HTML n editorul de text, browserul va afia invariabil un singur spaiu ntre dou cuvinte. Acesta este motivul pentru care fiecare dintre aceste elemente de formatare a textului are o etichet proprie care indic browserului cum anume s fac afiarea. 1. Trecerea la un rnd nou Trecerea la un rnd nou se realizeaz cu ajutorul etichetei
(de la line break). Eticheta
nu este o etichet container. Ea are rolul de a comunica browserului c texul care urmeaz dup etichet va fi afiat pe un rnd nou aa cum rezult din Exemplul 5.1. Exemplul 5. 1 text1 Buna ziua
Ma numesc Lucia
Invat sa construiesc o pagina Web
Aspectul paginii descrise n exemplul de mai sus este cel din Figura 5.1. Eticheta
admite atributul clear care poate lua valorile left, right sau all. n mod normal, la ntlnirea etichetei
linia curent de text este ntrerupt i se face trecerea la o linie nou, ca i la acionarea tastei Enter ntr-un editor de text. Exist ns situaii cnd dorim ca linia s fie afiat lng un anumit element (o imagine, sau un tabel, de exemplu) care blocheaz partea din stnga sau din dreapta a liniei. n aceste cazuri putem folosi atributul clear al etichetei
ca n Exemplul 5.2. Putei observa efectul atributului clear al etichetei
n Figura 5.2. Exemplul 5. 2 text21 Acest text va fi afisat intre imagine si marginea dreapta a documentului.
Acest text va fi afisat sub imagine, aliniat stanga. Intre acest text si dreapta imaginii va exista un spatiu gol. 2. Titlurile (Headings) Utilizarea titlurilor este justificat de nevoia de a sublinia prin format structura logic a unui document, dar, nu n ultimul rnd, i de monotonia la care expune un text lung, lipsit de variaie n aspect. Firete c un asemenea text sfrete prin a obosi cititorul Web, obinuit cu texte scurte i concentrate. Din acest motiv se recomand "spargerea" textelor mai lungi i organizarea lor n secvene mai scurte, marcate de titluri i subtitluri, organizate ierarhic, pe nivele. Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor , , , , , . Ele sunt etichete container, deci necesit eticheta corespunztoare de nchidere. Eticheta definete titlul de dimensiunea maxim, iar pe cel de dimensiune minim. Atenie! Dei standardul HTML nu interzice utilizarea n orice ordine a titlurilor, este de preferat ca acestea s fie folosite n ordinea "normal", progresiv, fr a sri peste vreun nivel (de pild de la H1 direct la H5), pentru a evita eventualele probleme la convertirea textului n alte tipuri de fiiere. n Exemplul 5.3 vom folosi toate cele ase etichete pentru titluri pentru a face o comparaie cu dimensiunea standard a textului. Putei observa efectul acestor etichete n Figura 5.3. Exemplul 5. 3 text3 Titlu H1Text normal Titlu H2Text normal Titlu H3Text normal Titlu H4Text normal Titlu H5Text normal Titlu H6Text normal Este de menionat o proprietate interesant a etichetelor de titluri, i anume aceea c un text scris pe aceeai linie cu un titlu este afiat n pagin pe rndul urmtor titlului, lsndu-se o linie liber ntre titlu i text, dei nu este prezent nici una dintre etichetele
sau .1Etichetele de titlu accept atributul align cu valorile left, center i right pentru alinierea titlului blocului de text la stnga (n mod prestabilit), n centru i respectiv la dreapta. Figura 5.4 red aspectul paginii descrie de documentul din Exemplul 5.4 care ilustreaz modul de aliniere al titlurilor. Exemplul 5. 4 text4 Titluri Titlu de marime 1 aliniat in centru Titlu de marime 2 aliniat la dreapta Titlu de marime 4 aliniat la stanga 3. Paragrafele Trecerea la un nou paragraf n cadrul textului se realizeaz cu ajutorul etichetei . Aceast etichet comunic browserului s insereze o linie liber n text i s nceap o nou linie. Eticheta este o etichet container dar prezena etichetei de nchidere este opional n anumite situaii. Dac ea este prezent, indic browserului s insereze o linie liber i dup blocul de text cuprins ntre cele dou etichete. Eticheta admite atributul align cu cele trei valori ale acestuia: left, center i right, care permit alinierea textului la stnga, centrat respectiv la dreapta. Exemplul 5.5 ilustreaz cele trei modaliti de aliniere a textului. Exemplul 5. 5 text5 Paragrafe Acesta este un paragraf aliniat la stanga. Acesta este un paragraf aliniat la dreapta. Acesta este un paragraf aliniat la centru. Din Figura 5.5 care red aspectul paginii descrise n exemplu se poate observa c alinierea la stnga este implicit (nu mai trebuie specificat align="left"). Se mai poate observa c nu a fost folosit eticheta de nchidere a paragrafelor, deoarece la ntlnirea unei noi etichete vechiul paragraf se1consider nchis. Totui, prezena sau absena etichetei de nchidere a paragrafului atunci cnd este prezent atributul align trebuie stabilit cu grij, pentru a nu obine rezultate neconforme cu dorinele dumneavoastr. n Exemplul 5.6 dorim s aliniem un nou paragraf n dreapta paginii, iar textul de pe rndul urmtor paragrafului, care este introdus prin eticheta
, s fie scris normal, de la captul din stnga al paginii. Exemplul 5. 6 text6 Paragrafe Acest text este scris normal, incepand e la marginea din stanga. Acest text este aliniat la dreapta
Unde este afisat acest text? Din Figura 5.6 se poate observa c afiarea nu s-a fcut conform inteniilor noastre. Motivul este faptul c eticheta nu are eticheta de nchidere , i prin urmare efectul su se prelungete pn la ntlnirea unei alte etichete . Dac vei nchide paragraful n mod explicit cu ajutorul etichetei de nchidere, nainte de trecerea la o linie nou, efectul asupra textului va fi cel dorit aa cum rezult din Figura 5.7. Dei aparent etichetele
i au un efect asemntor, i anume trecerea la o linie nou, ele nu sunt executate la fel.
comunic browserului unde se ncheie o linie, n vreme ce i impune s lase o linie liber i s treac la un nou paragraf. Dac folosim atributul align al etichetei n situaiile cnd dup paragraf este introdus un alt element n pagin este recomandat nchiderea n mod explicit a etichetei respective. 4. Preformatarea textului Aa cum am precizat la nceputul capitolului, atunci cnd editai documentul HTML cu ajutorul unui editor de text, indiferent cte spaii vei lsa ntre cuvinte sau ntre liniile de text, browserul va afia textul invariabil cu un singur spaiu ntre cuvinte i va ajusta lungimea liniilor n funcie de mrimea ferestrei. Cu alte cuvinte, orice spaii sau linii libere suplimentare vor fi ignorate de ctre browser. Aa cum am vzut mai sus, trecerea la o linie nou se realizeaz cu ajutorul etichetei
iar inserarea unei linii libere se face cu ajutorul etichetei . Exist, ns, i o etichet care impune browserului s afieze textul ntocmai cum a fost el formatat n documentul HTML. Este vorba despre eticheta . Eticheta permite preformatarea textului i menine spaierea i alinierea textului aa cum a fost fcut n documentul surs HTML. Eticheta de nchidere este obligatorie. Exemplul 5.7 ilustreaz modul cum poate fi folosit eticheta . Aspectul paginii descrise n acest document este cel din Figura 5.8.1Testai exemplul folosind eticheta iar apoi eliminai-o, pentru a observa mai bine efectul su. Exemplul 5. 7 text7 Textul preformatat Acesta este un text normal Orar: Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 Fizica Acesta este textul de mai sus preformatat Orar: Luni 8:00 Romana 9.00 Matematica 10:00 Geografie 11.00 Istorie 12.00 Fizica 5. Centrarea textului Aa cum am vzut mai sus, afiarea textului centrat n pagin se poate face cu ajutorul etichetei avnd atributul align setat la valoarea "center". O alt posibilitate de a realiza acest lucru este de a utiliza o etichet dedicat, incluznd textul ntre etichetele . Eticheta este o etichet container, prezena etichetei de nchidere fiind obligatorie. Exemplul 5.8 realizeaz centrarea unui text. Exemplul 5. 8 text8 1Centrarea textului Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Acesta este un text centrat. Aspectul paginii descrise n exemplul de mai sus este cel din Figura 5.9. 6. Afiarea textului pe o singur linie n cazul cnd se dorete afiarea unui text pe o singur linie, chiar dac acest lucru nseamn depirea marginii ferestrei i derularea acestuia pe orizontal, se include blocul de text ntre etichetele . Aceast etichet mpiedic browserul s limiteze lungimea liniei la dimensiunea ferestrei. Exemplul 5.9 ilustreaz folosirea etichetei , pagina avnd aspectul din Figura 5.10. Exemplul 5. 9 text9 Textul pe o singura linie Acesta este un text care va fi afisat pe o singura linie, chiar daca depaseste dimensiunile unei ferestre obisnuite. Puteti verifica acest fapt prin reducerea dimensiunilor ferestrei browserului. 7. Blocul O alt modalitate de delimitare i de formatare a unui bloc de text este folosirea etichetei container . Prezena etichetei de nchidere este obligatorie. Eticheta realizeaz divizarea unui document HTML n seciuni distincte, diviziune n care pot fi incluse, pe lng text, i alte elemente: legturi, imagini, formulare. Ca i n cazul etichetei pentru introducerea paragrafelor, eticheta admite atributul align, pentru alinierea textului. Valorile posibile ale acestui atribut, deja cunoscute, sunt: left - aliniere la stnga center - aliniere la centru right - aliniere la dreapta Alinierea precizat de atributul align al blocului are efect asupra tuturor elementelor incluse n blocul . Blocul admite i atributul nowrap, care interzice ntreruperea rndurilor de ctre browser.1n documentul descris n Exemplul 5.10 este ilustrat utilizarea acestei etichete. Pagina va avea aspectul redat n Figura 5.11. Exemplul 5. 10 text10 Blocul div Aceasta linie este o linie de text normala. Aceasta este prima sectiune a textului, aliniata dreapta.
Aceasta este a doua sectiune a textului, aliniata central.
Aceasta este a treia sectiune a textului, aliniata stanga.
8. Linii orizontale ntr-o pagina Web pot fi inserate linii orizontale care au rolul de a delimita diferitele zone ale paginii sau de a mbunti aspectul ei estetic. Acest lucru se face cu ajutorul etichetei . Eticheta nu este o etichet container deci nu exist o etichet de nchidere. Pentru a configura o linie orizontal se utilizeaz urmtoarele atribute ale etichetei : align - permite alinierea liniei orizontale. Valorile posibile sunt left, center i right width - specific lungimea liniei - lungimea poate fi stabilit n pixeli sau n procente din limea ecranului. size - specific grosimea liniei, exprimat n pixeli color - permite definirea culorii liniei Atributele etichetei sunt ilustrate n Exemplul 5.11. Exemplul 5. 11 text11 Linii orizontale Linie aliniata la stanga, lungime 100%, grosime 2 Linie aliniata in centru , lungime 50%, grosime 5 pixeli. Linie aliniata la dreapta , lungime 150 de pixeli, grosime 12 pixeli , de culoare rosie. 1 Din Figura 5.12 care red aspectul paginii descrise n exemplul anterior se poate observa c simpla prezen a etichetei fr nici un fel de atribute duce la afiarea unei linii predefinite, de lungime egal cu 100% din pagin i grosimea egal cu 2 pixeli. Atributul color al etichetei nu este suportat de browserul Netscape. n exemplul urmtor (Exemplul 5.12) vom ilustra modul n care eticheta aliniaz elementele coninute n interiorul su, n cazul nostru text i linii orizontale. Pagina descris n acest exemplu va avea aspectul din Figura 5.13. Exemplul 5. 12 text12 Linii orizontale Linia de mai jos este aliniata la stanga Liniile de mai jos sunt aliniate la centru cu ajutorul blocului DIV Linii aliniate la centru 9. Inserarea unei adrese potale Dac ntr-o pagin Web trebuie inclus o adres potal, atunci putem folosi eticheta urmtoare: . Eticheta este o etichet logic i are drept efect, n cele mai multe browsere, afiarea textului cu caractere italice. n Exemplul 5.13 este inserat n pagin o adres, aspectul paginii fiind cel din Figura 5.14. Exemplul 5. 13 text13 Adresa Adresa firmei noastre este GoldenWeb Consult
Str. Paradisului, Nr. 1
Bucuresti1 10. Inserarea unui citat Pentru a insera un citat ntr-un text se pot folosi dou etichete, n funcie de dimensiunea citatului. Astfel, dac citatul depete cteva linii, se folosete eticheta . Efectul acestei etichete este afiarea indentat a textului cuprins ntre eticheta de nceput i cea de sfrit (n majoritatea browserelor) sau afiarea acestuia cu caractere italice (rareori). Dac dorim ca ntr-un text s citam un termen, titlul unei lucrri sau s dm o referin, putem include textul respectiv ntre etichetele . n cele mai multe dintre browsere, textul inclus ntre etichetele va fi afiat cu caractere italice. Exemplul 5.14 ilustreaz modul de folosire al celor dou etichete. Pagina descris n exemplu are aspectul din Figura 5.15. Exemplul 5. 14 text14 Inserarea unui citat Textul de mai jos este un citat Probabilitatea ca o felie de paine unsa cu unt sa cada pe covor cu fata unsa in jos este direct proportionala cu valoarea covorului Citatul de mai sus face parte din Legile lui Murphy 11. Inserarea caracterelor speciale Dei este impropriu s numim caracterul "blank" sau space un caracter special, avnd n vedere frecvena cu care este folosit, totui acesta, ca i alte caractere, este inserat n pagin cu ajutorul unei comenzi speciale: comanda & (comanda ampersand). Aa cum tii deja, indiferent cte spaii vom introduce atunci cnd editm documentul HTML, browserul le va ignora i va afia cuvintele cu un singur spaiu ntre ele. Pentru a fora introducerea spaiilor suplimentare se folosete comanda (no break space). Atenie Comanda ncepe cu simbolul & (ampersand) i se termin cu ; (punct i virgul). n Exemplul 5.15 este ilustrat modul cum pot fi spaiate cuvintele folosind comanda Exemplul 5. 151 text15 Inserarea caracterelor speciale Cuvintele din acest text sunt despartite de grupuri de trei spatii. Dup cum observai din Figura 5.16 cuvintele sunt desprite prin trei spaii n loc de unul singur. Putei aduga oricte spaii dorii n acest mod. De asemenea, pentru a indenta un text, putei insera la nceputul fiecrei linii numrul de comenzi egal cu numrul de spaii cu care vrei s indentai textul. Iat mai jos un tabel cu comenzile necesare pentru a insera n text cele mai cunoscute caractere. Tabelul 5. 1 Denumir e caracter Spaiu liber Copyright Trademar k Registere d Mai mic dect Mai mare dect Ampersa nd Ghilimele Cent Un sfert O jumtate < > & " Reprezen Comanda tarea grafic HTML sau < > & " 1Trei sferturi Grade 12. Sugestii privind aspectul textului Aspectul textului ntr-o pagin Web este esenial pentru calitatea acesteia. Un text lizibil, scris cu caractere de dimensiune potrivit, bine organizat i aezat n pagin va face din pagina dumneavoastr un mediu accesibil i prietenos care l va stimula pe vizitatorul acesteia s parcurg cu plcere informaiile oferite. Iat cteva sfaturi referitoare la aspectul paginilor Web, menite s v ajute la crearea unor texte lizibile, ct mai uor de parcurs de ctre cititori. Nu folosii fonturi de dimensiuni prea mici sau fonturi cu serife, cum este Times New Roman. Dei este tipul cel mai utilizat pentru publicaiile tiprite, textele scrise cu Times New Roman sunt mai greu de citit de pe monitor. Preferai tipurile Arial, Verdana, Helvetica. Nu folosii numai litere mari (majuscule). Textele scrise cu majuscule sunt mai greu de citit. Nu facei exces de caractere aldine (ngroate, bold). Limitai-v la a accentua cuvinte sau poriuni reduse din text. De asemenea, nu folosii caractere cursive (nclinate, sau italice) n exces. Nu folosii prea multe tipuri de fonturi i nici tipuri de fonturi rare. Folosirea unui mare numr de fonturi de dimensiuni i culori diferite va face ca paginile s arate ncrcate i s fie greu de citit. Folosirea tipurilor de fonturi rare aduce dup sine riscul ca vizitatorul s nu le aib instalate pe computerul propriu, astfel c textul va fi afiat de browser cu fonturile prestabilite. Nu aranjai textul n pagin pe dou coloane. Aceasta este o practic obinuit n ziare i reviste dar nu este potrivit ntr-o pagin Web deoarece foreaz vizitatorul ca odat ajuns la baza paginii s o deruleze din nou pentru a citi ce-a de-a dou coloan. Este bine s folosii fiecare etichet n scopul pentru care a fost ea definit. Nu folosii etichetele de titlu pentru a accentua anumite pri ale textului care nu sunt titluri. Nu folosii eticheta pentru a insera alte texte dect adrese sau eticheta pentru a realiza scrierea cu caractere italice a textului. Motoarele de cutare indexeaz paginile Web i n funcie de elementele (etichetele) care sunt incluse n ele iar folosirea lor neadecvat conduce la o indexare eronat a paginii dumneavoastr. Multe motoare de cutare scaneaz pagina n cutarea titlurilor i pe baza lor construiesc o schi a paginii. Dac vei folosi etichetele de titlu pentru a accentua anumite pri ale textului (operaie pe care o putei realiza n mod corect folosind eticheta ) vei oferi informaii eronate motoarelor de cutare. n acest fel, scad ansele ca paginile dumneavoastr s fie identificate i citite de cei interesai. Atenie! Nu uitai c paginile vor fi publicate pe Web, unde, pentru a-i atinge scopul, adic pentru a fi citite, trebuie mai nti descoperite de cititori, cel mai frecvent prin intermediul motoarelor de cutare.113. Rezumat Browserul afieaz textele cu cte un singur spaiu ntre cuvinte i nu recunoate sfritul de linie i nceputul unei linii noi. Elementele de formatare a textului se introduc n documentul HTML prin intermediul unor etichete specifice: trecerea la un rnd nou: eticheta

text introducerea unui titlu: etichetele - text introducerea unui paragraf: eticheta text preformatarea textului: eticheta text centrarea textului: eticheta text afiarea textului pe o singur line: eticheta text crearea unui diviziuni n text: eticheta text inserarea unei linii orizontale: eticheta inserarea unei adrese: eticheta text inserarea unui citat: etichetele i text text inserarea caracterelor speciale prin comanda &; 14. Test 3. a) b) c) Care este rolul etichetei
? Trecerea la un rnd nou Inserarea unei linii libere n text Inserarea unei linii orizontale1Pentru ca browserul s afieze textul aa cum a fost el formatat n documentul HTML se folosete eticheta: a) b) c) Ce se va afia n urmtorul exemplu? Text1 Text2 a) b) c) Text1 i Text2 vor fi aliniate la dreapta, cu o linie liber ntre ele Text1 va fi aliniat la stnga, Text2 va fi aliniat la dreapta, cu o linie liber ntre ele Text1 i Text2 vor fi scrise pe aceeai liniePentru a scrie un titlu de dimensiune maxim folosim eticheta: a) b) c) Pentru a afia un text pe o singura linie: a) b) c) folosim eticheta
folosim eticheta nu folosim nici o etichetCare dintre urmtoarele etichete nu realizeaz centrarea textului? a) b) c) Text Text TextCe realizeaz eticheta ? a) b) c) inserarea unui link inserarea unei adrese de e-mail inserarea unei adrese potalePentru a insera ntr-o pagin o linie orizontal standard folosim eticheta: a) b) c) Eticheta folosete la: a) b) indentarea textului scrierea textului cu caractere italice1c)inserarea unui citat n textCare dintre aceste afirmaii este fals? a) Toate spaiile i liniile libere introduse n text la editarea documentului HTML sunt afiate ntocmai de browser. b) Un text scris pe aceeai linie cu o etichet de titlu este afiat sub titlu, chiar dac nu este prezent eticheta
. c) Pentru a introduce spaii suplimentare n text se folosete comanda Formatarea textului1. a) 2. b) 3. b) 4. a) 5. b) 6. c) 7. c) 8. a) 9. c) 10. a)Capitolul 6 Legturi (link-uri) Legturile (link-urile) reprezint, poate, partea cea mai important a unei pagini Web. Ele transform un text obinuit n hypertext - un nou tip de text, diferit de cel din clasicele pagini de carte, care permite trecerea rapid de la o informaie aflat pe un anumit computer la alt informaie memorat pe un alt computer localizat oriunde n lume. 1. Adresa URL Pentru a stabili o legtur cu o alt pagin (un alt fiier) trebuie s specificm adresa URL a acestuia. URL este un acronim, de la Uniform Resource Locator, i reprezint adresa de identificare a unei resurse (a unui fiier) aflat pe calculatorul propriu sau pe orice alt calculator din lume conectat la Internet. O adres URL const dintr-un ir de caractere care identific n mod unic o anumit resurs, oferind informaii despre numele serverului pe care este stocat acea resurs precum i despre localizarea ei. Exist mai multe etichete HTML care folosesc adresa URL drept valoare pentru anumite atribute: etichetele care introduc legturi, imagini sau formulare. Toate acestea folosesc aceeai sintax a adresei URL pentru a specifica locaia unei anumite resurse, indiferent de tipul acesteia. Sintaxa general a unei adrese URL este: schema://server_gazda:port/calea_catre_fisier unde:1schema - reprezint unul dintre protocoalele de transfer al informaiilor, cum ar fi HTTP, FTP, Gopher, Telnet, etc. server_gazda - reprezint identificatorul serverului pe care este gzduit fiierul respectiv. Acest identificator poate fi adresa IP a serverului sau numele su. port - reprezint numrul portului de comunicaie prin intermediul cruia browserul se conecteaz la server. Serverele dein mai multe as