12.

PAGINI WEB LIMBAJUL HTML (1) Blocuri preformatate i blocuri paragraf

Obiective generale: prezentarea componentelor i serviciilor Internet; prezentarea ferestrei unui browser de Internet; identificarea structurii unei pagini Web; editarea documentelor hipertext; formatarea documentelor hipertext; interactivitatea paginilor Web; utilizarea cadrelor (subferestrelor); crearea de formulare. Obiective specifice partea 1: familiarizare cu reeaua Internet; editarea i vizualizarea paginilor Web; structura unei pagini Web; blocuri preformatate i blocuri paragraf. 12.1. ASPECTE PRIVIND REEAUA INTERNET INTERNET este o super-reea de calculatoare (reea de reele), cu rspndire pe ntreg mapamondul (WAN), legtura dintre calculatoare fiind realizat satelit, cablu optic i chiar prin liniile telefonice. Bazele INTERNET au fost puse n anul 1968, printr-un proiect al guvernului S.U.A. Reeaua respectiv, denumit ARPANET (Advanced Research Projects Agency NETwork), realiza legtura ntre patru calculatoare aflate la mare distan. n 1975 majoritatea universitilor renumite i departamentelor militare din S.U.A. s-au cuplat ntr-o reea denumit DARPANET. n timp reeaua s-a dezvoltat, la nceputul anului 1990 cuprinznd peste 80.000 de calculatoare. Din 1991, reeaua INTERNET a devenit public (pn atunci era un domeniu privat, rezervat armatei, nvmntului i cercetrii), astzi existnd peste 30.000 de reele interconectate, cu peste 60 milioane de utilizatori pe ntreg globul. Prin INTERNET, comunicarea se face mult mai rapid i mai ieftin dect prin utilizarea mijloacelor clasice (telefon sau fax). Se pot studia materiale (documente) din biblioteci i arhive, se pot transmite/recepiona mesaje ctre/de la persoane situate

- 107 -

n cele mai ndeprtate coluri ale lumii, se pot transfera fiiere ntre utilizatori i se poate dialoga live, n particular sau n grupuri de discuii. Calculatoarele din INTERNET sunt conectate la o infrastructur comun, realizat i ntreinut de companiile telefonice, prin intermediul unui program de interfa cu reeaua, denumit IP (Internet Protocol). Protocolul este un set de reguli care stabilete comunicarea n INTERNET. Interconectarea reelelor componente n INTERNET se face prin cluze (router-e), care stabilesc care este calea de urmat pentru trimiterea datelor, astfel nct acestea s ajung ct mai rapid la destinaie. Calculatoarele din reea sunt adresate (accesate) printr-un cod de identificare format din patru grupuri de numere, gestionate de router-e. Datele care circul prin INTERNET sunt mprite n pachete, care conin maxim 1500 de caractere. Pentru a se prentmpina riscul ca pachetele s fie amestecate la destinaie se folosete protocolul de control al transmisiei TCP (Transfer Control Protocol). Acesta mparte informaia la plecare n mai multe pachete IP, iar la destinaie un alt TCP aranjeaz i asambleaz pachetele primite. La plecare, programul TCP al emitorului ataeaz pachetului IP un numr (sum de control). Receptorul recalculeaz suma i dac apar diferene anuleaz pachetul i cere retransmiterea acestuia. Furnizorii de servicii, denumii Internet Service Providers, achiziioneaz de la companiile de telefoane dreptul de a utiliza liniile telefonice sau pot folosi reeaua de comunicaii prin satelit SIPEX (Satellite Internet Packet Exchange). Utilizatorii propriu-zii pltesc furnizorilor (distribuitorilor) de servicii accesul n reea i pot folosi linii telefonice sau linii nchiriate. Marile firme utilizeaz, de regul, linii nchiriate, astfel nct au acces foarte rapid la reea. Conectarea unui calculator la INTERNET presupune ca acesta s fie dotat cu o plac de fax-modem suficient de rapid (cu viteza peste 30 KB /secund). Un calculator permanent conectat la INTERNET, care constituie punctul de intrare n reea pentru alte calculatoare, se numete nod INTERNET. Calculatorul unui furnizor de servicii, pe care sunt stocate diverse informaii apelate de utilizatori, astfel nct nu mai este necesar s fie luate de fiecare dat din INTERNET, se numete ProxyServer. Accesul la resursele reelelor din INTERNET este practic nelimitat. Totui, pentru a se restriciona accesul la datele secrete ale unei firme conectat la INTERNET se utilizeaz un sistem de protecie numit firewall. Cele mai importante servicii oferite de INTERNET sunt: pota electronic (email electronic mail), navigarea (WWW World Wide Web, sau pe scurt Web) i transferul de fiiere (FTP File Transfer Protocol).

- 108 -

12.2. NAVIGARE PE INTERNET Acest serviciu, cunoscut sub numele WWW (World Wide Web pnza de pianjen a lumii pe scurt Web), permite accesarea unei multitudini de informaii de pe reelele din INTERNET (cutare prin resursele reelei). WWW este, de fapt, o baz informaional universal. Bazele Web au fost puse n anul 1989, la laboratorul CERN (Conseil Europeen pour la Recherche Nucleaire) din Elveia, printr-un sistem informaional de colaborare ntre fizicieni din ntreaga lume. Printele acestui serviciu este Tim Berners-Lee. Acesta s-a inspirat din cercetrile lui Ted Nelson, inventatorul termenului hypertext, ca metod asociativ de strngere a informaiilor, n care utilizatorul poate crea urme de informaie (legturi, trimiteri ctre informaii). n mai puin de un deceniu, Web a devenit cel mai complex i rapid sistem de informare /documentare, care a fcut din INTERNET o adevrat manie pentru utilizatori de pe ntregul mapamond. Informaiile sunt stocate n INTERNET ca documente hipertext (text cu trimiteri), care pot avea legturi ntre ele. Fiecare document este o pagin Web, adic un fiier rezident pe un site. Acesta este similar unui folder (dosar), fiind localizat pe un server conectat la INTERNET, denumit server Web. n cadrul unui document hipertext pot exista trimiteri la alte documente din INTERNET, prin hiperlegturi. Acestea sunt scrise, de regul, cu alt culoare (sau sunt subliniate) i pot fi activate printr-un singur clic cu mouse-ul. Un document hipertext poate conine mai multe pagini. Prima pagin se numete Home Page (gazd), din ea putnd fi accesate celelalte pagini. Pentru a crea o pagin Web este necesar un limbaj specializat, numit HTML (HyperText Markup Language). Se poate folosi un editor de texte simplu, de exemplu NOTEPAD din Windows, sau un editor profesional, de tip WYSIWYG (What You See Is What You Get ceea ce vezi este ceea ce obii), precum FRONT PAGE, NETSCAPE NAVIGATOR GOLD. Spaiul pe serverul Web necesar publicrii unei pagini Web este asigurat de ctre furnizorul de servicii (Internet Service Providers). Accesarea unui document hipertext se face prin indicarea adresei acestuia, descris prin formatul URL (Uniform Resource Locator locator uniform de resurse). O adres n Web este de forma urmtoare: http://www.unitbv.ro/mechanics/index.htm,

- 109 -

unde: http (HyperText Transfer Protocol) este un protocol pentru transferarea documentelor, www.unitbv.ro numele server-ului Web pe care se afl informaiile, mechanics/index.htm numele fiierului (pagina Web). n exemplul prezentat, ro specific tipul domeniului, fiind folosit pentru specificarea rii (Romnia). Alte nume de domeniu frecvent ntlnite sunt: com - specific firmele, edu - instituii educaionale, mil organizaii militare, gov organizaii guvernamentale, org alte tipuri de organizaii. 12.3. STRUCTURA PAGINII WEB Etapele de lucru pentru editarea, respectiv afiarea (vizualizarea) unei pagini Web sunt urmtoarele: editarea fiierului cu un editor de texte simplu (ex. Notepad) sau specializat (ex. FrontPage); salvarea fiierului cu extensia "html" sau "htm"; vizualizarea paginii cu un browser de Internet (Internet Explorer, Netscape Navigator .a.); pentru a ncrca fiierul, se lanseaz browser-ul i se utilizeaz apoi comanda Open (Open Page) din meniul File al ferestrei browser-ului. Documentul HTML const dintr-o succesiune de blocuri, care pot fi imbricate (incluse unul n altul). Blocurile sunt delimitate de simboluri speciale (marcaje, taguri), incluse ntre caracterele < .. >. Structura unui document HTML este urmtoarea: <html> <head> </head> <body> </body> </html> unde <eticheta> specific nceputul entitii, iar </eticheta> sfritul acesteia. Documentul HTML, delimitat de eticheta "html", include dou sub-blocuri: "head" (capul documentului), care poate conine o etichet de titlu ("title"), respectiv "body", pentru coninutul propriu-zis al paginii. n cazul paginilor structurate pe subferestre (cadre), blocul body este nlocuit cu frame.

- 110 -

Aplicaie: S se conceap o pagin Web, cu titlul Prima pagin Web" i coninutul: Universitatea "Transilvania" din Braov. Observatie: fiierul care conine pagina se va salva cu numele "pagina_1.html". 12.4. SFRIT DE LINIE, BLOCURI PREFORMATATE, BLOCURI PARAGRAF n cadrul documentului HTML, trecerea la o linie nou se face cu marcajul <br> (line break) la sfritul liniei curente. Totodat, pentru a se interpreta corect caracterele "spaiu", "tab" i "sfrit de paragraf", textul poate fi inclus ntr-un bloc <pre> text </pre> (pre preformat) caz n care nu mai este necesar marcajul <br>. i alte etichete produc trecerea la rnd nou i inserarea de spaii suplimentare: inserarea unei adrese eticheta <address>.</address> Exemplu: Adresa Universitii este: <address> B-dul Eroilor nr. 29 <br> 2200 Braov </address> intendarea (tabularea) unui bloc eticheta <blockquote></blockquote> Alinierea textului se face prin intermediul etichetei <div>..</div>, cu atributul align = valoare, valoare - left aliniere stnga, - right aliniere dreapta, - center aliniere centrat. Exemplu: <div align = center> text centrat </div> <div align = left> text aliniat stnga </div> Pentru utilizarea n text a caracterelor <, > i a numelor etichetelor, textul trebuie ncadrat de una din perechile: <xmp></xmp> sau <listing></listing>, care, n plus, interpreteaz i caracterele spaiu liber i rnd nou.

- 111 -

Aplicaie: Pentru fiierul de la aplicaia anterioar (pagina_1.html) se va considera urmtorul coninut: Universitatea "Transilvania" din Braov Catedra de Design de Produs i Robotic Secia Roboi industriali Anul I Blocurile paragraf se realizeaz cu eticheta <p></p>, tagul de sfrit fiind opional. Comparativ cu <br>, eticheta <p> permite: inserarea unui spaiu suplimentar nainte de blocul paragraf, inserarea unui spaiu suplimentar dup blocul paragraf (dac se utilizeaz </p>), alinierea textului, cu atributul align = valoare, unde valoare = {left, right, center}. Exemplu: <p align = left> paragraf aliniat stnga </p> <p align = right> paragraf aliniat dreapta </p> Alinierea centrat a tuturor componentelor unui bloc (blocuri centrate) se poate realiza cu eticheta <center></center>. Inserarea n pagin a unei linii orizontale se face prin intermediul etichetei <hr> (nu are tag de sfrit). Atributele pentru linie sunt: align (alinierea liniei) = left aliniere stnga, right aliniere dreapta, center aliniere centrat; width (lungimea liniei) = valoare ntreag pozitiv valoarea n pixeli, nr.% procentul din limea paginii; size (grosimea liniei) = valoare ntreag pozitiv valoarea n pixeli; noshade (linie fr umbr); color (culoarea liniei) = culoare (ex. color = red pentru linie roie). Aplicaie: Se va edita fiierul pagina_1.html dup cum urmeaz: - sub primul rnd se va insera o linie aliniat stnga, cu lungimea de 200 pixeli, grosimea 5 pixeli, culoare verde (green); - sub cel de-al doilea rnd se va insera o linie aliniat centrat, pe 50% din limea paginii, grosimea 10 pixeli, culoare albastru (blue).