Proiectare Web

Informatica

Proiectare Web

Byadmin ianuarie 1, 2024

Proiectare WEB

Cuprins

Organizare Web pg

Ce înțelegem prin rețea

Structura hard a rețelelor mari

Conectarea la Internet

Aspecte economice

Web-ul pentru utilizator

Protocoale de transfer

Adresarea serverelor în Internet

Web-ul pentru dezvoltator

Servicii Internet

Adresarea resurselor în Internet

Modelul Client-Server

Structura informației în www

Tehnologii software

Bibliografie

Noțiuni de bază HTML

Structura documentului HTML

Proprietățile limbajului HTML

Modul de structurare al documentelor

Tag-ul (sau Eticheta) BODY

Exerciții

Formatarea textului

Formatarea la nivel de paragraf

Formatarea la nivel de caracter

Exerciții

Inserarea Legăturilor

Tag-ul (sau Marcajul) <A>

Tag-urile <LINK> și <BASE>

Exerciții

Inserarea Obiectelor multimedia

Tag-ul <IMG>

Tag-ul <APPLET>

Programarea Applet-urilor

Tag-ul <OBJECT>

Exercitii

Inserarea Tabelelor

Tabele simple, tag-ul <TABLE>

Tabele speciale

Imagini în tabele

Bibliografie

Noțiuni avansate de HTML pg. 101

Utilizarea Cadrelor

Eticheta <FRAMESET>

Eticheta <FRAME>

Tabele în cadre

Folosirea cadrelor inline

Folosirea Formularelor

Elementul <FORM>

Elementul <INPUT>

Elementul <SELECT>

Elementul <BUTTON>

Elementul <TEXTAREA>

Bibliografie

MySQL și PHP

Baze de date relaționale

BD distribuite

Bibliografie

Anexe

Anexa Calcul binar

Anexa Unitati de masura

Anexa Acronime

Anexa Indexul Elementelor

Anexa Indexul Atributelor

Organizare Web

Ce înțelegem prin rețea

Printr-o rețea de calculatoare înțelegem un număr oarecare de calculatoare (inclusiv echipamente conexe) ce pot comunica informații între ele. Din punct de vedere istoric conceperea rețelelor a traversat următoarele etape :

legarea mai multor terminale la un calculator central (time-sharing),

legarea mai multor calculatoare aflate în apropiere : aceeași încăpere sau aceeași clădire (rețele locale – LAN),

legarea rețelelor locale între ele,

și a avut ca scop inițial partajarea resurselor hard și/sau soft ce se găseau într-un număr mai mic de exemplare, fie din motive financiare (cele hard), fie din motive de coerență (cele soft). Exemple de resurse partajabile tipice hard: scanner, imprimante, respectiv de resurse soft: baze de date, să zicem contribuabilii unei localități.

Din punct de vedere al răspândirii geografice vom lua în considerare următoarele nivele :

– LAN (Local Area Network) – rețele locale;

– MAN (Metropolitan Area Network) – amplasate pe teritoriul unui oraș;

– WAN (Wide Area Network) – amplasate pe teritoriul unei țări sau al unui continent;

– GAN (Global Area Network) – rețele globale (Internet).

Din punct de vedere al accesului :

rețele private (ex. ale armatei sau intranet-urile diverselor instituții) permit accesul unui cerc restrâns de utilizatori, de regulă angajați ai respectivelor instituții;

rețele publice (ex. Internet, Microsoft Network, EduSoft – rețeaua Ministerului Educației din România) permit accesul oricui se abonează prin intermediul unui ISP (Internet Service Provider).

Actualmente la transferul informației se folosește tehnica pachetelor comutate (Packet-switching) a cărui esență constă în ruperea colecției de bytes ce constituie informația de transmis în pachete (grupuri) mai mici și adăugarea unor elemente de recunoaștere a fiecărui pachet (ordinea în pachet, destinatarul) în momentul "expedierii". La "destinație", pe baza elementelor de identificare, colecția originală este reconstituită.

Acest principiu este combinat cu o facilitate foarte importantă a rețelei de a oferi permanent mai multe legături între oricare două puncte ale sale. Pachetele pot urma astfel trasee diferite între sursă și destinație, în funcție de starea rețelei, pot ajunge în momente diferite de timp și într-o ordine oarecare.

Acest mecanism are ca principal avantaj flexibilitatea (cantitățile mai mici de informație au o probabilitate mai mare să traverseze căi ce sunt prin excelență eterogene și destul de puțin fiabile în multe regiuni geografice; în plus sunt permanent la dispoziție mai multe trasee crescând probabilitatea să existe cel puțin unul în stare de funcționare). Este evident că acest mecanism de transfer poate fi optimizat sub aspectul vitezei prin folosirea cu precădere a drumului minim.

Structura hard a rețelelor mari (publice)

Deosebim trei elemente de structură :

Calculatoarele gazdă (Host) sau nodurile rețelei sunt acele calculatoare ce dețin informații pe care vrem să le consultăm (la rețelele publice) sau care vrem să comunice între ele (mai ales la cele private). Ele se zic și Servere și primesc la acceptarea în rețea o adresă numerică unică numită adresă IP (ex. serverul uoradea.ro are adresa IP 193.231.135.12) de la o autoritate competentă. Când o informație se îndreaptă către un astfel de calculator ea are notată adresa IP a serverului destinație în fiecare pachet comutat.

Subrețeaua de comunicații este constituită din calculatoare ce exercită exclusiv funcția de distribuitoare numite și routere și de linii de transmisie (cabluri torsadate sau coaxiale, fibre optice, unde radio, unde infraroșii sau laser etc.) care interconectează aceste routere. Liniile de transmisie reprezintă suportul pe care circulă pachetele comutate iar routerele aleg traseul pe care pleacă spre serverul destinație orice pachet sosit, exercitând astfel funcția de distribuitor.

Calculatoarele sau LAN-urile utilizatorilor (clienților rețelei) se conectează la serverul ISP-ului la care s-au abonat prin intermediul mai multor tipuri de subrețele.

Conectarea la Internet

Prin serviciile puse la dispoziție de ISP, calculatoarele utilizatorilor finali pot avea acces la informațiile serverelor din toată rețeaua (serviciul de navigare Web) sau pot coresponda cu toți clienții rețelei (serviciul poșta electronică cunoscut și sub denumirea de e-mail) etc.

În prezent ISP-urile oferă conexiune full-acces pentru toate serviciile descrise, prin următoarele medii:

abonații persoane fizice preferă la domiciliu- la punct fix ca să zicem așa, accesul prin rețeaua de distribuție a semnalului TV (CATV), pe fibră optică mai rapidă sau cablu torsadat; nu rareori, în locuințele mari, semnalul din cablu devine disponibil în orice punct al locuinței printr-o subrețea proprietară wireless;

o libertate spațială mai mare oferă conexiunea prin intermediul uneia dintre rețelele de telefonie mobila, direct pe telefonul celular;

printr-o "linie" telefonică mobilă adică prin modem USB, care este o placă de rețea wireless, și conectează calculatorul la AP-ul Providerului); este oferită cu reducere pentru abonații de telefonie mobilă ai aceleași companii;

agenții economici și instituțiile preferă accesul prin intermediul rețelei telefonice fixe (pe cablu dedicat sau mai rar comutat), ceea ce le oferă o viteza mai mare și un volum de trafic mai ridicat dar este și mai scumpă;

printr-o linie telefonică fixă comutată (Dial-Up), conexiune preferată de persoanele particulare care nu au altă posibilitate; se folosește propria linie telefonică fixă; este de viteză mică dar mai ieftină; la costuri trebuie adăugat costul convorbirilor telefonice.

Aspecte economice

Între deținătorul informației, care se adresează oricui este abonat în rețea și un utilizator final care consultă net-ul de pe calculatorul propriu, se interpun nu numai rețelele de transport ci și niște costuri.

Păstrarea în bună stare de funcționare a serverului care conține informația, ca și calitatea lui, care-i dă viteza de acces, se face pe cheltuiala proprietarului informației. Acesta este fie instituție și acoperă cheltuiala din bani publici, fie agent economic care urmărește profit. Profitul poate să fie direct, când e vorba de site-uri la care accesul se plătește, fie indirect, prin afișarea de reclame sau oferirea de informații care să orienteze utilizatorul către a cumpăra ceva prin intermediul acestor site-uri.

ISP-ul, deținătorul infrastructurii de transport al informației, este și el un agent economic care funcționează în profit, acoperindu-și cheltuielile de funcționare, întreținere și modernizare a rețelei proprii din abonamentele celor 2 feluri de clienți, cei care oferă )de obicei persoane juridice și cei care consumă informații.

În sfârșit, consumatorul final, utilizatorul care numai navighează pe această mare învolburată, plătește tot. Sistemul se susține prin prețuri de abonament rezonabile aplicate unui număr imens de utilizatori.

Web-ul pentru dezvoltator

Protocoale de transfer

Cum am arătat deja, informațiile circulă între calculatoare sub formă de calupuri (pachete) care pleacă de la calculatorul gazdă, traversând porțiuni de rețea până la un router, unde sunt redirectate către alt router, și așa mai departe, ultimul router redirectîndu-le către calculatorul destinație. Pe fiecare router (care este un microcalculator), rulează numai programe de transmisie (soft specializat).

Prin protocol de transfer se înțelege regula de comunicație respectată de programul emițător respectiv programul receptor care conduc procesul de transmisie prin mediul de transfer între cele două calculatoare/routere, precum și formatul mesajelor recunoscut de aceste programe. În situația în care emițătorul și receptorul lucrează cu protocoale diferite, este evident că transmisia nu va avea succes.

Internetul folosește modelul TCP/IP (Transmission Control Protocol/Internet Protocol) care este un set de protocoale ierarhice, structurat pe 5 nivele, corespunzător cu arhitectura fizică a rețelei, organizate astfel :

Informația pleacă de la nivelul aplicație (de ex. pt. poșta electronică = SMTP sau protocol Simple Mail Transfer Protocol, sau alte protocoale ca FTP – pentru transferul de fișiere, HTTP-pentru pagini Web, DNS-pentru adresarea serverelor, etc.) care are drept scop să-i ofere utilizatorului o interfața prietenoasă cu rețeaua. La acest nivel informația este un flux de octeți.

De aici coboară pe nivelul de transport (protocoale TCP și UDP) unde devine pachete IP ce conțin informațiile necesare pentru reasamblare la destinație.

Pachetele intră pe nivelul inter-rețea, care este nivelul principal și are drept scop livrarea pachetelor pe rețea. Sub controlul protocolului IP pachetele devin cadre de date (format standard IP) și tot aici sunt definite strategiile de alegerea traseului. ICMP este protocolul care generează mesajele de eroare. Prin intermediul IP acestea sunt transmise expeditorului iar IGMP tratează mesajele multiple (cu mai mulți destinatari).

Cadrele de date sunt preluate de nivelul interfață rețea care le transformă în șiruri de biți. La acest nivel protocolul ARP convertește adresele IP în adrese fizice iar RARP efectuează reconversia adreselor.

Șirurile de biți astfel rezultați "călătoresc" pe nivelul fizic al arhitecturii.

La destinație procesul se inversează conducând la reconstituirea șirurilor de octeți recunoscuți de protocoalele de aplicație.

Adresarea serverelor în Internet

Fiecare server din rețea dispune de o adresă IP din momentul "înmatriculării" sale, pe care o primește contra cost, pentru o perioada de timp determinată, de la o autoritate competentă (care dispune de un interval de adrese IP astfel încât aceste adrese sunt unice în lume). Costul respectiv este suportat de proprietarul serverului, care are intenția de a face cunoscut prin acest server informații în rețea.

La nivel mondial adresele de Internet sunt gestionate de IANA (Internet Assigned Numbers Authority), care împarte spațiul de adrese pe regiuni, gestionate de birourile Registrelor Regionale pentru Internet (RIRs – Regional Internet Registry). De Europa, Orientul Mijlociu și Asia Centrală răspunde/se ocupă RIPE.

Protocolul folosit pentru gestionarea adreselor IP până în 2011 se numește IPv4 și în cadrul lui adresa IP este o succesiune de 4 numere, fiecare cuprins între 0 și 255 (inclusiv), lungimea codului binar rezultat fiind 32 biți, de exemplu 255.255.255.10, iar mesajele multiple (cu mai mulți destinatari).

Cadrele de date sunt preluate de nivelul interfață rețea care le transformă în șiruri de biți. La acest nivel protocolul ARP convertește adresele IP în adrese fizice iar RARP efectuează reconversia adreselor.

Șirurile de biți astfel rezultați "călătoresc" pe nivelul fizic al arhitecturii.

La destinație procesul se inversează conducând la reconstituirea șirurilor de octeți recunoscuți de protocoalele de aplicație.

Adresarea serverelor în Internet

Fiecare server din rețea dispune de o adresă IP din momentul "înmatriculării" sale, pe care o primește contra cost, pentru o perioada de timp determinată, de la o autoritate competentă (care dispune de un interval de adrese IP astfel încât aceste adrese sunt unice în lume). Costul respectiv este suportat de proprietarul serverului, care are intenția de a face cunoscut prin acest server informații în rețea.

La nivel mondial adresele de Internet sunt gestionate de IANA (Internet Assigned Numbers Authority), care împarte spațiul de adrese pe regiuni, gestionate de birourile Registrelor Regionale pentru Internet (RIRs – Regional Internet Registry). De Europa, Orientul Mijlociu și Asia Centrală răspunde/se ocupă RIPE.

Protocolul folosit pentru gestionarea adreselor IP până în 2011 se numește IPv4 și în cadrul lui adresa IP este o succesiune de 4 numere, fiecare cuprins între 0 și 255 (inclusiv), lungimea codului binar rezultat fiind 32 biți, de exemplu 255.255.255.10, iar în binar același cod este 11111111.11111111.11111111.00001010; cu această lungime de cod s-au putut înmatricula 232 calculatoare= 4.294.967.296 unități. Acest spațiu de adrese a fost complet epuizat la începutul anului 2011, de aceea s-a trecut la un protocol mai cuprinzător, IPv6.

Protocolul IPv6 are codul compus din 128 cifre binare împărțite în 8 grupe a câte 16; pentru ușurința citirii cele 16 cifre binare se grupează la rândul lor în 4 grupe de câte 4 cifre și se scriu în baza de numerație 16, numită și hexazecimală; în Anexa … se poate studia corespondența sistemelor zecimal, binar și hexazecimal; aceeași adresă IP ca mai sus, completată cu 0 la stânga este în noul protocol 0000:0000:0000:0000:0000:0000:00FF:FF0A; IPv6 poate înmatricula 2128 calculatoare, ceea ce reprezintă aprox. 3,4×1038 unități.

Adresarea numerică descrisă mai sus este foarte convenabilă pentru programe, dar pentru oameni este prea greoaie, de aceea s-a imaginat un sistem de adresare pe domenii (DNS Domain Name System – Sistemul Numelor de Domenii) care se bazează pe :

un nume propriu cât mai simbolic al serverului, care în general îl indică pe proprietar;

apartenența serverului la un domeniu geografic sau la un domeniu de activitate, eventual la subdomenii ale acestora;

corespondența biunivocă între denumire și adresa IP (așa cum a fost descrisă mai sus).

De exemplu adresa serverului Universității din Oradea este "uoradea.ro" și vrea să indice faptul că Universitatea din Oradea= uoradea aparține domeniului geografic Romania (arătat prin indicativul auto al țărilor= ro). Serverul pentru Invățământul Deschis la Distanță din cadrul Universității Oradea are adresa DNS "idd.uoradea.ro" respectând a treia regulă a adresării pe domenii, și anume aceea că cel mai cuprinzător domeniu se scrie cel mai la dreapta și se desparte prin punct de subdomeniul imediat inferior care este scris cu câte o poziție mai la stânga. (Alte exemple: gmi.dk – Geological&Marine Instruments Danemarca; gmi.ro – Grupul MicroInformatica Cluj-Napoca).

Unii proprietari de servere consideră că apartenența la un domeniu de activitate este mai semnificativă decât apartenența la un domeniu geografic (mai ales în SUA). Se folosește următoarea clasificare a domeniilor de activitate :

edu = organizații educaționale (școli, universități)

com = organizații comerciale

gov = organizații guvernamentale

mil = organizații militare

org = alte organizații etc.

Ex. sun.com – compania americana Sun; xerox.com, xerox.de (filiala germană); stanford.edu – Universitatea Stanford SUA; gmi.edu – Kettering University SUA (fosta General Motors Institute); gmi.org – Global Mapping International – agenție misionară creștină etc.

Domeniile geografice și organizaționale sunt în număr de câteva sute. Ele sunt partiționate în subdomenii, care la rândul lor sunt și ele partiționate etc. Când cineva dorește să-și introducă serverul în rețea, trebuie să cumpere de la autoritatea gestionară a domeniului dreptul de a-și insera subdomeniul dorit. De exemplu un liceu din România care dorește să-și facă cunoscute lumii activitatea și proiectele are de ales între a-și insera numele ca subdomeniu al domeniului geografic .ro (ca aparținând deci de România) sau de al insera ca subdomeniu ".edu" (caz în care ar putea exista confuzia că liceul se găsește în SUA).

Din cauza dilemei create de alegerea între domeniul geografic și cel de activitate astăzi sunt tot mai dese construcțiile de adresă de forma: nume_server.domeniu_de_activitate.indicativ_de_țara, ex. sporum.gov.tr – portalul pentru fotbal al Turciei de sub autoritatea guvernamentală.

În adresare se mai folosește și tipul serverului – pe prima poziție – respectiv tipul serviciului deservit prin server, ex. www.stanford.edu, și toate de mai sus, fiind servere disponibile prin serviciul WWW, ftp.utcluj.ro – serverul de fișiere pentru transfer cu serviciul FTP al Universității Tehnice Cluj, news.nissan.net server pentru grupuri de știri etc., dar din cauza redundanței (browserele cer precizarea protocolului de transfer separat) unii proprietari au început să renunțe la a mai preciza în cadrul domeniului tipul serverului ex. oradea.iiruc.ro.

Conversia între numele de domeniu și adresa numerică IP este făcută automat de serverele DNS pe baza convenției că subdomeniile ocupă plaje numerice disjuncte, pentru fiecare domeniu existând câte un server DNS care gestionează subdomeniile sale.

Web-ul pentru utilizator

Servicii Internet

Sunt disponibile mai multe servicii pe care un abonat al rețelei le poate utiliza (în funcție de tipul de abonament pe care l-a ales din oferta ISP) și anume :

Poșta electronică (electronic-mail sau e-mail) permite ca abonatul să poată coresponda prin scrisori electronice cu alți abonați ai rețelei, dacă le cunoaște o adresă din rețea (comunicare clasificată ca asincronă, nefiind nevoie ca cei doi corespondenți să se găsească deodată în fața calculatorului); o persoană se poate înmatricula la mai multe servere de mail și astfel poate avea mai multe adrese electronice; cele mai cunoscute servere pentru publicul larg sunt yahoo.com și google.com, dar destul de frecvent persoanele angajate primesc căsuțe poștale și de la firma unde lucrează sau de la ISP-ul lor;

www (world wide web) permite consultarea de către abonat a informațiilor de pe serverele rețelei (indiferent de amplasarea lor geografică) în limita drepturilor de acces, adică a informațiilor publice și a Intranet-ului în care este membru. Consultarea are la bază sistemul de adresare a serverelor DNS (Domain Name Service) descris mai sus, și care evită memorarea de adrese numerice. Consultarea WWW sau a Web-ului se mai numește și navigare deoarece multe dintre informații sunt distribuite pe diverse servere din rețea și utilizatorul trebuie "să se mute" în căutarea lor de la o adresă de server la alta. Este serviciul cel mai puternic deoarece numărul serverelor publice este foarte mare și în continuă creștere (mai ales sub impulsul comerțului electronic și al transparenței instituționale). Informațiile de pe serverele WWW se numesc hipertexte (sau pagini web) deoarece conțin înafară de texte desene, fotografii, imagini, sunete sau animație. Protocolul de aplicație utilizat este HTTP – HyperText Transfer Protocol. Obiectul "Web Design-ului" este chiar găsirea de modalități ca aceste informații să fie accesibile și ușor de manipulat de către clienți;

File Transfer Protocol- FTP permite transferul de fișiere (text sau binare) între calculatorul abonatului și un server FTP, în ambele sensuri, și cu viteză mai mare decât prin navigare (WWW), prin protocolul de aplicație corespunzător (FTP – File Transfer Protocol);

Telnet permite conectarea la un calculator din rețea ca simplu terminal. Calculatorul din rețea poate accepta acces public sau privat (în acest caz utilizatorul are nevoie de un cont și de drepturi de acces stabilite de administratorul calculatorului din rețea). Utilizatorul are acces la datele și aplicațiile calculatorului din rețea;

Newsgroups sau grupuri de știri este un serviciu prin care utilizatorul poate comunica cu alți clienți ai rețelei care sunt abonați la același grup ca și el. Grupurile au ca numitor teme de interes comun iar mesajele din grupul de știri se numesc articole și sunt create de membrii grupului. În practică, clientul este limitat de selecția pe care o face ISP-ul său, deoarece numărul grupurilor de știri este de ordinul miilor. Totalitatea grupurilor de știri formează Usenet – o structură ierarhică de domenii iar transferul știrilor prin rețea folosește protocolul Network News Transfer Protocol – NNTP;

Talk este serviciul care permite "discuții" directe între doi abonați care sunt conectați în același timp și acceptă discuția. Discuția este de fapt un schimb de mesaje afișate pe monitoarele celor doi abonați în timp real (comunicație sincronă), de tipul cunoscutului mess;

Chat permite "discuții" în timp real între mai mulți abonați.

Finger permite aflarea de informații suplimentare despre persoane cărora le cunoaștem doar adresa Internet (nume, prenume, data ultimei conectări etc.); din motive de securitate acest serviciu nu mai este oferit de majoritatea ISP;

În prezent tendința este de a oferi serviciile la pachet, cum o fac de ex. companiile Yahoo! și Google, protocolul YMSG (Yahoo! Messenger Protocol) pentru clientul de mesagerie conținând pe lângă mesageria sincronă (Yahoo! Messenger) și asincronă (Yahoo! Mail), grupul de discuții, transferul de fișiere, chat, chat-ul de voce, webcam, conferința și avatare; alte companii de messengers sunt: Skype, AOL Instant Messenger sau Windows Live messenger.

newsgroups au evoluat în următoarele subvariante: 1) liste de discuții pentru diseminare de informații comerciale sau profesionale (newsletters), mai mult sau mai puțin publice, de la înscrierea liberă până la intrarea restricționată de administrator; este o comunicare unidirecțională; 2) grupul de discuții (ex. yahoo groups) tot cu intrare (relativ) restricționată dar în care accentul cade pe intercomunicare între membrii; 3) forums, cu intrare liberă, bazată pe interesul față de temă (ex. Forumul Softpedia); toate sunt comunicații asincrone;

voice chat s-a dezvoltat mai ales pe platforma jocurilor de calculator, generând și apariția unui dispozitiv asociat, căști cu microfon; utilizatorii pot vorbi și se auzi sincron;

webcam sunt aplicații de tip client-server la care serverul culege și pune pe rețea imagini dintr-o zonă (ex. Cabana Bâlea Lac) iar clientul le recepționează; ar fi corespondentul newsletterului în video;

video chat permite comunicarea sincronă sunet și imagine a 2 posesori de calculator ce dispun de camere de luat vederi și de softul corespunzător (ex. Skype);

conferința permite unui grup să converseze și să se vadă; a fost impulsionată de golbalizarea economică (ex. Centrul de Videoconferință al British Council Romania);

avatare: baze de date cu identități virtuale (ex. http://www.avatare4all.com/ ).

O mare dezvoltare au avut-o în ultimii ani o serie de servicii derivate:

găzduire site-uri (hosting): mulți deținători de spațiu pe servere oferă acest serviciu, gratuit sau contra cost- în sistem abonament, împreună cu diverse facilități suplimentare cum ar fi: înregistrarea domeniului(iilor), adrese email, baze de date, protecție la defectarea suportului informației (protecție RAID), suport tehnic (ex. www.iLive.ro );

găzduire bloguri: prescurtarea termenului weblog (log= jurnal (de bord)), blogul a devent o interesantă posibilitate de exprimare publică, deschisă oricărei persoane; în prezent se observă un fenomen de coagulare a blogurilor în jurul unor tipologii: bloguri personale, tematice sau informative, ex.: www.blogspot.ro, www.xhost.ro;

rețele de socializare (fenomenul social media): oferă posibilitatea virtualizării relațiilor sociale, membrii unei rețele putându-și împărtăși reciproc preocupările și interesele; fiecare utilizator își definește un profil personal și își construiește o subrețea de legături personale, rolul soft-ului fiind de a interconecta aceste subrețele;

în anii din urmă a apărut o tendință de a exploata economic aceste spații de socializare, unii membri folosindu-le pentru a-și promova produsele comerciale; ex. de rețele de socializare mai cunocute: MySpace (lansat în 2003), Hi5.com (2003), Linkedln (2003), FaceBook (2004), Twitter (2006);

și în această materie a apărut fenomentul tipologiei, unele rețele încercând să se individualizeze pe o arie de preocupări, ex. Linkedln s-a orientat pe sfera profesională, având și o secțiune cu plată, destinată mai ales să faciliteze recrutarea;

RSS [feeds]- sau fluxuri de știri (Really Simple Syndication- bazate pe XML): sunt o varianta de newsletters la care utilizatorul are acces în timp real; el se abonează la site-urile care îl interesează și distribuie updates-urile în această formă (în principal text XML) adică imediat ce informația a fost produsă (ex. agenții de știri, blog-uri); pentru vizualizare pe calculatorul propriu, utilizatorul folosește un gestionar numit și 'RSS reader' care poate fi desktop-based și necesită instalare, sau poate fi web-based ca Google Reader (oferit gratuit), la care știrile se citesc online în browser;

mix-uri sau diverse servicii combinate, numite și portaluri; ele oferă informație, știri, baze de date, email, divertisment etc.; ele pot fi publice instituționale, cum ar fi cele guvernamentale (ale Ministerelor) sau private corporatiste, ex. în jurul trusturilor de media, în jurul burselor de acțiuni, etc.;

Adresarea resurselor în Internet

Pentru a putea localiza o informație (o pagina web, un fișier, un articol cu știri, etc.) în rețeaua Internet adresarea serverului care o conține este numai o parte din indicațiile ce trebuie cunoscute. O adresă completă se numește URL – Uniform Resource Locator și are următoarea sintaxă :

protocol_de_transfer://domeniu-server/cale/nume[.extensie]

– unde protocoalele de transfer sunt :

http pt. serviciul www

ftp pt. ftp

nntp pt. grupuri de știri;

– domeniu-server a fost prezentat la Adresarea serverelor (este deci calculatorul gazdă al informației);

– cale este șirul de subdirectoare de pe acest calculator care conduce la resursă;

– iar nume[.extensie] este numele fișierului care conține resursa.

Ex. http://www.uoradea.ro/romanian/topic/16/Admitere.html

Ex. ftp://ftp.uoradea.ro/solaris/acrobat-reader/sunsparc-rs-405.tar.gz

Ex. nntp://comp.lang.c .

Modelul Client-Server

Aplicațiile care funcționează în structurile de rețea respectă următoarea organizare numită și model Client-Server :

pe calculatorul abonatului (client al rețelei) se execută aplicația client destinată să exploateze un anumit serviciu (ex. aplicația client e-mail, browser etc.) și având rol de interfață; ea dialoghează cu aplicația complementară server astfel :

se conectează prin intermediul protocolului TCP la server

trimite o cerere aplicației server

recepționează răspunsul

îl prezintă într-o formă adecvată utilizatorului;

pe server rulează aplicația complementară pentru serviciul respectiv :

așteaptă cereri din partea clienților

rezolvă cererile

trimite rezultatul către clienți.

Aplicațiile client pentru principalele servicii sunt :

browser (Internet Explorer sau Mozila Firefox) pt. navigare

utilitar de poștă electronică (Outlook Express sau Netscape Messenger) pt. e-mail și grupuri de știri.

De-a lungul timpului aplicațiile client au evoluat de la o structură statică, de afișare, către una cât mai interactivă, dinamică; de asemenea tehnologia de realizare a evoluat de la orientarea Desktop, în care aplicația client trebuie instalată pe calculatorul utilizatorului, către orientarea Web, în care upgradarea aplicației se realizează de către producătorul soft-lui.

Pe designerul Web îl interesează serviciul de navigare în primul rând din perspectiva realizatorului acestor informații (claritate, aspect, legături), în al doilea rând din perspectiva posibilităților oferite de aplicația clientului (ce tip de informații poate aceasta trata) și apoi din perspectiva manipulării lor de către aplicația server ("postarea" lor în rețea).

Structura informației în www

Fiecare server Web (fiecare adresă DNS) este o colecție de pagini (din punct de vedere fizic fișiere hipertext) de la câteva până la sute de pagini; aceste pagini sunt legate între ele prin hiperlegături, ceea ce permite clientului care le consultă să ceară browserului său (prin intermediul URL-urilor) afișarea uneia sau alteia dintre paginile legate. Fiecare pagină având o natură compozită (este formată din mai multe tipuri de informații ex. texte, fotografii, zone de animație) browserul are nevoie de indicații de afișare pentru reconstituirea paginilor.

Cu alte cuvinte un fișier hipertext conține de fapt ordinea de aranjare a "puzzle"-ului, ce este interpretată de browser, și în plus poate conține referințe către alte pagini, ceea ce constituie suportul fenomenului de navigare. Crearea acestor fișiere se face respectând convențiile HyperText Markup Language adică ale limbajului HTML.

Figura nr.

Tehnologii software

Proiectarea și realizarea siturilor are două componente:

– stabilirea structurii paginilor, a conținutului de informație din fiecare pagină și a aspectului fiecărei pagini: culori, imagini, stil de scriere etc., componentă numită mai des Web Design; ea dă aspectul siteului;

– alegerea instrumentelor necesare realizării specificațiilor din faza de proiect (descrisă mai sus) și programarea propriu-zisă, componentă numită și Programare Web; ea dă funcționalitatea siteului;

In continuare sunt enumerate principalele instrumente ce pot fi folosite în fiecare fază:

Web Design cu timpul acest termen s-a coagulat în jurul cerințelor de aspect:

Layout (sau schița siteului)

– conține specificațiile de aspect estetic al siteului (culori, fonturi); termenul denumește proiectul;

CSS

– instrument de descriere al stilurilor folosite, care oferă flexibilitate sporită la modificările ulterioare;

Adobe (Macromedia) Flash

– Flash este o tehnologie lansată de firma Macromedia, și ulterior cumpărată de Adobe. Se folosește pentru animații interactive la care se pot adăuga sunete sau pentru crearea bannerelor web publicitare și a altor materiale sau prezentări interactive.

Programare Web pe partea de Client:

– browsere: sunt aplicații care rulează pe calculatorul clientului și dispun de o interfață (meniuri, butoane) prin care acceptă comenzi de la acesta; pentru a satisface cerințele clientului, browserul comunică cu aplicația server pereche, care îi furnizează informațiile dorite, în particular fișiere compozite, redactate într-un limbaj de marcaje; interpretând aceste marcaje, browserul afișează informațiile din paginile accesate; de asemenea browserul rulează programele atașate acestor pagini (de tip Javascript, VBScript, Java applets sau Active X controls);

– SGML (Standard Generalized Markup Language): un standard internațional pentru descrierea de marcaje (markups) ale textelor; un meta-limbaj

– (X)HTML, CSS sunt limbaje standardizate de prezentare a datelor;

– XML (EXtensible Markup Language) este un meta-limbaj, adică o descriere formală a unui limbaj și anume descrierea formală a limbajului de marcare (adnotare) a textelor; cea mai importantă deosebire dintre XML și HTML este capacitatea XML de a accepta marcaje ale utilizatorului, ceea poate da semnificație datelor; specificațiile sale sunt standardizate de către Consorțiul Web și publicate la adresa: http://www.w3.org/TR/xml/; Avantajele standardului XML este ca este citibil si de catre oameni, este acceptat general si este usor de folosit; pe baza lui au fost realizate diverse limbaje adaptate la situații de lucru:

– MathML: pentru lucrul cu expresiile matematice;

– SVG (Scalable Vector Graphics): crearea de grafică vectorială;

– SMIL (Synchronized Multimedia Integration Language): crearea de prezentări multimedia sincronizate (animație), șa.;

– DOM (Document Object Model): standard pentru descrierea obiectuală a documentelor XML și HTML independent de platformă, folosit pentru prelucrare ; JDOM implementarea DOM în Java;

– SAX (Simple API for XML): standard pentru descrierea documentelor XML mai mici; este mai puțin complet ca DOM dar mai rapid (nu necesită încărcarea integrală a documentului pentru analiză);

– JavaScript (produs de Netscape), cu variantele Jscript si Visual Basic Script- VBScript ambele de la Microsoft, Java applets, ActiveX sunt limbaje de programare utilizate pentru crearea de aplicații pe partea de client destinate să fie rulate de browser, deobicei pentru redarea de formate de date nestandardizate (. pdf, playere multimedia, conținut Flash șa); aceste programe se cunosc sub denumirea de plug-in;

– VRML (Virtual Reality Modeling Language) este un limbaj pentru realizarea de interfețe interactive 3D; în prezent este rescris în termeni XML sub denumirea de X3D; interacțiunea se desfășoară prin intermediul unor dispozitive specifice: căști de vizualizare sau ecran retinal și mănușă VR;

Medii de dezvoltare

– deși aplicațiile se pot scrie cu editoare de texte simple, există și instrumente dedicate creerii cum ar fi Microsoft FrontPage sau (Macromedia) Dreamweaver care au proprietatea WYSIWYG (previzualizare).

CMS (Content Mangement System- Sistem de Management al Continutului)

– Fără a avea cunoștințe avansate de operare a PC-ului, orice utilizator își poate actualiza propriul site cu ajutorul unui CMS; este mai mult un instrument de întreținere.

– Motoarele de căutare sunt aplicații care servesc la localizarea informațiilor din WWW și pot fi organizate pe bază de indecși (ex. Altavista), pe bază de ierarhii de termeni (ex. Yahoo!) sau mixte (ex. Excite); Un motor de căutare are 3 componente:

a. un robot de căutare (spider sau crawler) care vizitează paginile și extrage informații despre ele; aceste informații se depun în

b. index (catalog) care este depozitul de informații, organizat de o manieră care să faciliteze regăsirea;

c. o metodă de evaluare (ranking) a importanței paginii în funcție de cererea utilizatorului (relevanța), pe baza căreia se stabilește ordinea de returnare a rezultatelor;

Programare Web pe partea de Server (Severe de aplicații Web):

– serverul de Web permite includerea de cod (script) în cadrul documentului Web, ceea ce permite generarea de conținut dinamic utilizând procesarea unor surse de date: fișiere text, baze de date, alte documente XML sau multimedia; ceea ce diferă de la o interfață la alta este maniera de includere a codului;

– CGI (Common Gateway Interface) prima metodă de generare dinamică a reprezentărilor unor resurse solicitate de clientul Web; este interfața care permite interacțiunea cu serverul Web; alte interfețe de programare Web pe partea de server după modelul CGI: mod_perl pentru serverul Apache, NSAPI (Netscape Server API) și ISAPI (Microsoft Internet Services API);

– PHP 4/5 (Hypertext PreProcessor) limbaj de programare orientat obiect, destinat serverelor de aplicații, accesibil din cadrul fișierelor HTML, cu suport pentru manipularea bazelor de date într-un dialect SQL; exemplu de baze de bate: MySQL, dBASE, Informix, mSQL, Oracle, PostreSQL, Solid, Sybase, ODBC; este gratuit și împreună cu MySQL sunt integrate cu serverul Apache;

– alte limbaje pentru servere de aplicații: PERL (Practical Extraction and Report Language), JSP (Java Server Pages- de la Sun MicroSystems), ASP (Active Server Pages- Microsoft) și ASP.NET (parte integrantă a .NET Framework);

– AJAX (Asynchronous JavaScript And XML) este suită de tehnologii de transfer asincron de informații XML ce încorporează: (X)HTML, CSS, redare și interacțiune via standardul DOM, procesare prin limbajul ECMAScript/JavaScript (ECMA), ceea ce permite ca conținutul paginilor Web să nu mai trebuiască reîncărcat în întregime;

Limbaje de programare aplicații folosite pentru prelucrări:

– C, C++, C#, Java, Perl, Python;

Societatea civilă participă la procesul de dezvoltare al Web-ului prin:

W3C (World Wide Web Consortium)

– este principala organizație internatională care stabilește normele și standardele după care funcționează browserele web și în care ar trebui scrise codurile sursă ale site-urilor web. Folosirea de cod valid este obligatorie pentru a evita problemele cu diferite browsere. O simplă verificare vizuală a unui site nu presupune validitatea codurilor sursă folosite.

Bibliografie

Grindei Laura, Orza Bogdan, Vlaicu Aurel, Tehnologii multimedia cu aplicații interactive în eLearning, Editura Albastra, Cluj-Napoca, 2007

Buraga Sabin, Tehnologii XML, Editura Polirom, Iași, 2006

Alboaie Lenuța, Buraga Sabin, Servicii Web. Concepte de bază și implementări, Editura Polirom, Iași, 2006

Buraga Sabin, coord., Tendințe actuale în proiectarea și dezvoltarea aplicațiilor Web, Editura Matrix Rom, București, 2006

Buraga Sabin, Proiectarea siturilor Web. Design și funcționalitate, Editura Polirom, Iași, 2005

Stefan Tanasa, Cristian Olaru, Dezvoltarea aplicatiilor Web folosind JAVA, Ed. Polirom, Iași, 2005

Buraga Sabin, On security of Web Applications, Revista economică, nr. 2(34), 2005

Anghel Traian, Dezvoltarea aplicațiilor Web folosind XHTML, PHP și MySQL, Editura Polirom, Iași, 2005

Sabin Buraga, Mihaela Brut, Prezentari multimedia pe Web. Limbajele XHTML+TIME si SMIL, Editura Polirom, 2004

Tanenbaum Andrev, Rețele de calculatoare (ediția a patra), Editura Byblos, Târgu Mureș, 2003

Popovici Diana, Popovici Ovidiu, Web Design sau Proiectarea paginilor Web, Editura Universității din Oradea, 2002

Homorodean Marcel Andrei, Iosupescu Irina, Internet și pagini Web, Editura Niculescu, București, 2001

Cerchez Emanuela, Internet. Utilzarea rețelei Internet. Proiectarea paginilor Web, Editura Polirom, Iași, 2000

Tanenbaum Andrew, Rețele de calculatoare, Editura Computer Libris Agora, Cluj-Napoca, 1998

***, http://ro.wikipedia.org/wiki

***, http://en.wikipedia.org/wiki

***, SAX: http://www.saxproject.org

***, Apache XML: http://xml.apache.org

***, Apache2Triad: http://apache2triad.sourceforge.net

***, Site dedicat dezvoltatorilor MySQL: http://dev.mysql.com

***, Site oficial PHP: http://www.php.net

***, Site oficial Java: http://java.sun.com

***, Site oficial WWW: World-Wide Web Consortium: http://www.w3.org

***, Site oficial XML: http://www.xml.com

***, Site oficial VRML: http://www.vrml.org

Notițe

Limbajul XHTML

Structura documentului HTML

Conținând facilități ce permit construirea paginilor Web, HTML este mai mult un limbaj de descriere, ce oferă posibilitatea publicării pe Web a unor documente ce conțin texte, imagini, tabele, secvențe audio respectiv video sau formulare care accesează alte servicii on-line și legături spre alte resurse Web.

Derivat din Standard Generalized Markup Language (SGML – care permite tehnoredactarea unor documente complexe și riguros formatate), limbajul HTML, creația lui Tim Berners-Lee și Daniel Connoly (1990), este mai simplu și se adresează doar paginilor Web. El este un limbaj structurat și independent de platformă, adică aspectul documentului este același, sub orice Sistem de Operare.

Proprietățile limbajului HTML

Se poate spune că limbajul HTML are unele caracteristici pe care le întâlnim la limbajele descriptive, cum ar fi :

documentele limbajului HTML sunt de tip text -ASCII-, putând fi editate cu orice editor ASCII inclusiv editoarele incluse în sistemul de operare folosit;

limbajul HTML utilizează pentru scrierea documentelor Web tag-uri (în traducere etichete sau marcaje). Tag-urile sunt descriptori specifici pentru fiecare structură afișată, ele stabilesc aspectul documentului, fiind totodată un identificator care furnizează browser-ului instrucțiuni de formatarea documentelor. Cu alte cuvinte un document (sau fișier) HTML este un aranjament de tag-uri, creat de proiectant, și care este depus pe un server Web. Utilizatorul care consultă acest document vede pe monitorul său efectul interpretării tag-urilor respective de către browser-ul propriu. Vom numi în continuare fișierele HTML surse (sau documente HTML) iar imaginea afișată la consultare pagină HTML.

documentele HTML au un caracter independent de platformă, ele putând fi vizualizate cu ajutorul browser-elor, aplicații care lucrează pe mai multe tipuri de sisteme de calcul. Acest lucru este valabil în măsura în care diferitele tipuri de browser-e sunt capabile să interpreteze mulțimea tag-urilor care alcătuiesc limbajul (mai exact o versiune a lui).

In HTML orice o structură de afișare este etichetată (marcată); deși nu se face distincție între literele mari și mici, pentru a pune în evidență etichetele, se obișnuiește ca acestea să fie scrise cu litere mari. Denumirea lor este o prescurtare a cuvîntului corespunzător din imba engleză.

Principiul etichetelor HTML este că, pentru delimitare, ele sunt încadrate de paranteze unghiulare (<,>), și că sunt de doua feluri: etichete perechi (una la începutul structurii și una la sfârșit) respectiv singulare (numai la început); diferența dintre eticheta de început și cea de sfârșit este un slash (/) – care se adaugă la începutul etichetei de sfârșit. Efectul indicat de etichetă se aplică textului aflat între eticheta de început și perechea ei de sfârșit. De exemplu, pentru scrierea cursivă a textului Primăria Oradea, îl vom încadra între etichetele <I> și </I>:

<I> Primaria Oradea </I>

având ca efect :

Primaria Oradea

Efectul unei etichete singulare se aplică textului care urmează, de ex. <BR> are efectul de a crea un rând nou, ca în exemplul de mai jos:

<I> Primaria <BR> Oradea </I>

având ca efect :

Primaria

Oradea

În cazul în care există necesitatea transmiterii unor informații suplimentare, aceasta se poate face pe calea atributelor. Atributele sunt denumite prin grupuri de litere și au un set de valori predefinite pe care le pot lua, care pot fi văzute ca proprietăți ale tag-urilor. Ele trebuie precizate în eticheta de început, iar dacă nu se face nici o precizare, browserul va considera ca prezente valorile implicite ale atributelor. De exemplu culoarea implicită a literelor este neagră, dar dacă atributul COLOR este prezent in tag-ul FONT, textul se va scrie cu culoarea precizată de COLOR. De asemenea e important de reținut că odată setat (precizat) un atribut, el rămâne valabil ca atare, până la o setarea ulterioară.

În exemplul următor eticheta IMG care permite includerea unei imagini în document, este însoțită de două atribute, unul (SRC) precizând numele și poziția fișierului sursă al imaginii (Casa.gif din locația curentă) iar celălalt (ALIGN) poziția ocupată de imagine în raport cu textul (la dreapta):

Este necesară separarea atributelor prin spații, precum și precizarea numelui atributului și a valorii lui: nume_atribut= valoare, iar dacă valoare este un șir de caractere, trebuie folosite ghilimelele.

De exemplu atributul SRC, asociat etichetei IMG, acceptă orice șir de caractere ce reprezintă URI-ul unui fișier ce conține o imagine, însă majoritatea atributelor accepta o plajă de valori specifice, cum ar fi atributul alinierea (ALIGN) care poate fi la stânga (LEFT), la dreapta (RIGHT), stânga-dreapta (JUSTIFY) sau centrata (CENTER).

Forma generală a unui tag pereche (container) este deci:

<nume_tag nume_atribut1=valoare1 nume_atribut2=valoare2 …> conținut </nume_tag>

Tag urile perechi pot fi imbricate. Regula este cea uzuală în limbajele de programare, anume că un container trebuie să fie integral în interiorul altui container. Există anumite browsere care nu acceptă imbricarea în toate cazurile. Acestea iau în considerare doar tag ul cel mai interior pentru formatare

Atunci când un atribut cu valoare specifică este introdus greșit (de ex. RIGT în loc de RIGHT), atunci se va lua în considerare ultima valoare precizată anterior în cadrul fișierului, respectiv valoarea implicită prestabilită dacă aceasta este prima utilizare a atributului.

Realizatorul paginii poate introduce comentarii respectând următoarea sintaxă:

<!– comentariu… –>

Comentariile nu vor avea nici un efect în pagina afișată, ele mai degrabă îi folosesc realizatorului sau oricui are acces la sursa paginii, ca explicații suplimentare despre intenția avută la proiectare.

Modul de structurare al documentelor

Documentul HTML, care este un fișier ASCII cu extensia HTM(L) și urmează să fie interpretat de un program de aplicație client – browser – este delimitat de etichetele <HTML> și </HTML>, fiind alcătuit din "Antetul documentului" și din "Corpul (sau fondul) documentului".

"Antetul documentului" oferă informații cu caracter general: titlu, autor șa. și este delimitat de etichetele <HEAD> și </HEAD>.

"Corpul/Fondul documentului" reprezintă conținutul documentului adică textul însoțit de descrierea formatului. Aplicația browser va interpreta etichetele de descrierea formatului, afișând pe calculatorul clientului textul documentului așa cum a fost cerut de autor; această zonă este delimitată de tagurile <BODY> și </BODY>.

Titlul documentului, care este util să fie precizat în antet, nu poate depăși 64 de caractere, va fi afișat în bara de titlu a ferestrei browser-ului, iar ca etichete se vor folosi perechea de etichete <TITLE> și </TITLE>, așa cum se vede în exemplu :

<HTML>

<HEAD>

<TITLE> LIMBAJE DE PROGRAMARE </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

În exemplul de mai sus se poate vedea structura unui document HTML care afișează numai titlul. Dacă dorim să furnizam și alte informații, cum ar fi autorul, data elaborării, etc., se va folosi eticheta <META>. Această etichetă admite două atribute, NAME prin care se poate specifica o proprietate (prin numele ei) și CONTENT, prin care se atribuie o valoare proprietății respective. Deoarece autorul unui document și unele cuvinte cheie – keywords vor fi foarte utile atunci când motoarele de căutare – search engines vor vizita documentul, vom exemplifica cum în cadrul etichetei <META> se poate specifica autorul, se pot enumera unele cuvinte cheie și se poate face o scurtă descriere a documentului :

Tag-ul (sau Eticheta) BODY

"Corpul/Fondul documentului" este delimitat de eticheta <BODY> sau de eticheta <FRAMESET>. Astfel structura unui document în limbajul HTML cuprinde:

<HTML>

<HEAD>

… antet, descriere…

</HEAD>

<BODY>

… fondul documentului…

</BODY>

</HTML>

Să considerăm exemplul de mai sus, adăugând în tagul Body un text, care va fi afișat exact așa cum l-am scris:

<HTML>

<HEAD>

<TITLE> LIMBAJE DE PROGRAMARE </TITLE>

</HEAD>

<BODY>

Primul meu program <BR>

Afisare reusita!

</BODY>

</HTML>

Pentru a executa acest program, il vom edita cu editorul Notepad, îl vom salva cu denumirea pe care o dorim și cu extensia .htm sau .html dupa care vom da dublu click pe fișierul creat; rezultatul îl putem citi în browserul nostru implicit.

Atributele pe care le admite elementul <BODY> sunt:

BACKGROUND= URI; URI (un șir de caractere) reprezintă adresa Web a unei imagini ce urmează a fi utilizată ca fundal pentru document, de către browser. În cazul în care imaginea nu ocupă toată zona din fereastră, aceasta va fi multiplicată.

BGCOLOR= culoare; acest atribut –BackGround COLOR- impune culoarea fundalului, în zona în care este vizualizat documentul. Există două moduri de a defini culorile:

prin utilizarea unor denumiri asociate culorilor (BLACK pentru negru, BLUE pentru albastru, etc.)

prin utilizarea unor combinații ale culorilor de baza RED- ROȘU, GREEN- VERDE și BLUE-ALBASTRU (modelul RGB). Utilizând două cifre hexazecimale cuprinse între 00 și FF, se va preciza cuantumul fiecărei culori de bază, în ordinea RED, GREEN, BLUE, șirul #rrggbb luând valori cuprinse între BLACK- #000000 și WHITE- #FFFFFF. Astfel, o culoare de bază cum este verdele, poate fi precizată fie BGCOLOR= GREEN, fie BGCOLOR= #00FF00 (RED- #FF0000, BLUE- #0000FF, GRAY- #808080 etc.). Formula RGB poate fi invocată și cu una din formele rgb(r,g,b) unde r, g, b sunt cuprinse între 0 și 255 respectiv rgb(r%, g%, b%) unde r,g,b reprezintă procentele dorite de roșu, verde și albastru. Astfel, culoarea gray poate fi precizată și ca rgb(128,128,128) sau rgb(50%,50%,50%).

TEXT= culoare; fixează culoarea textului (ca mai sus)

LINK= culoare; fixează culoarea ce va marca în text link-urile nevizitate

VLINK= culoare; culoarea ce va marca în text link-urile vizitate

ALINK= culoare; culoarea link-ului activ (pe care este plasat cursorul).

Ex. <BODY BGCOLOR= #987654> este o culoare bej, si

<BODY BGCOLOR= #987654 TEXT= Blue> sunt litere albastre pe fond bej.

Utilizarea culorilor este importantă atât pentru aspectul general, estetic al documentului, cât și pentru utilizator, care va putea să distingă mai ușor structura documentului, fără a-l stresa și obosi vizual. Mai jos se prezinta un tabel cu culori uzuale.

Tabel Culori uzuale

LANG= cod – limba; acest atribut desemnează limba de redactare a textului documentului. Fără să influențeze modul de vizualizare, precizarea limbii de redactare este utilă motoarelor de căutare, analizoarelor lexicale și gramaticale etc. Atributul LANG are ca valoare asociată un cod de limbă, compus din două litere, pentru engleză –en, pentru franceză –fr, pentru romana –ro, etc., care au fost stabilite de International Organization for Standardization (ISO 3166).

Ex. <BODY BGCOLOR= #987654 TEXT= Blue LANG= ro>

DIR= LTR | RTL; atributul DIR[ection] indică direcția de scriere a textului astfel:

Left To Right de la stânga la dreapta (este direcția implicită);

Right To Left de la dreapta la stânga.

Este indicat ca în cadrul unui document să fie cuprinse diverse comentarii, utile celor ce citesc sau editează un document, cunoscut fiind faptul că browser-ul nu le va afișa. Cum s-a arătat mai sus, în limbajul HTML comentariile încep cu <!– și se termină cu –>.

În cazul unor greșeli de sintaxă în document, browser-ul nu va lua în considerare elementele care nu respectă regulile limbajului și nu le va afișa.

Deasemenea utilizatorul poate să-și redacteze codul HTML așa cum dorește, ținând cont că pentru browser modul de aranjare pe linie a elementelor HTML este lipsit de semnificație. Dacă totuși utilizatorul dorește să transfere spre afișare textul așa cum a fost redactat în documentul HTML, el trebuie să-l încadreze cu etchetele <PRE> și </PRE> (de la Preformatted text).

Exerciții

Exercitiul 1: Scopul acestui exercițiu este de a ne familiariza cu modul de generare al fișierelor .htm.

Deschideți editorul Notepad si introduceti textul de mai jos:

<HTML>

<HEAD>

</HEAD>

<BODY >

Hello

</BODY>

</HTML>

Salvați cu numele BunVenit și închideți;

Redenumiți fișierul BunVenit.htm

Vizualizați conținutul dând dublu clic pe fișier ceea ce activează Browserul implicit, în cazul nostru Internet Explorer.

Exercițiul 2: Scopul acestui exercițiu este de a ne familiariza cu structura documentului .htm, care conține tag-urile HTML, HEAD si BODY.

Deschideți editorul Notepad si introduceti textul de mai jos:

<HTML>

<HEAD>

<TITLE> Prima noastra pagina Web </TITLE>

</HEAD>

<P ALIGN= CENTER> Pagina WEB a studentilor de la Facultatea de Mediu, Oradea</P>

<P ALIGN= LEFT> Sectia Prelucrarea Lemnului

</BODY>

</HTML>

Salvați cu numele Primapagina și cu extensia .htm

Vizualizați conținutul dând dublu clic pe fișier.

Exercițiul 3: Scopul acestui exercițiu este de a ne familiariza cu modificarea documentului .htm

Deschideti editorul Notepad si introduceti textul de mai jos:

<HTML>

<I> Primaria Oradea </I><BR>

<I> Primaria <BR> Oradea </I>

</body>

</HTML>

Salvați cu numele Primaria si extensia .htm

Vizualizați conținutul dând dublu clic pe fișier.

Se deschide fișierul din nou și se modifica sectiunea HEAD adaugând tag-ul TITLE astfel încât titlul paginii web, afisat de browser pe bara de antet, sa fie "Primaria Oradea", ca mai jos:

<TITLE> Primăria Oradea</TITLE>

Se salveaza modificarea si se vizualizeaza utilizand butonul Refresh al browserului

Se șterge tagul <BR> dintre cuvintele Primaria și Oradea, observând că browserul nu mai sare la rând nou

Se modifica sectiunea HEAD adaugand tag-uri META cu parametrii Author, Keywords si Description pentru atributul NAME, ca mai jos:

Se modifica tag-ul BODY adaugand o culoare de fond, ca mai jos:

Al doilea rând de text se transformă în comentariu, ca mai jos:

<!– <I> Primaria Oradea </I> –>.

Exercițiul 4: Scopul acestui exercițiu este de a ne fixa cunoștințele dobândite; am plecat de la 0 și acum putem scrie o pagină Web destul de consistentă!

Deschideti editorul Notepad si introduceti textul de mai jos:

<HTML>

<HEAD>

<TITLE> Lab Proiectare Web – Structura documentului HTML</TITLE>

</HEAD>

PRIMA TEMĂ</p>

Un fisier HTM(L) este o constructie ierarhica de tag-uri

(marcaje), care presupun o eticheta de inceput obligatorie

si una de sfarsit, care poate fi si optionala in unele cazuri.

Tag-ul HTML este tag-ul principal. In interiorul lui sunt

definite doua sectiuni ale fisierului delimitate de tag- urile HEAD (antet) si BODY (continut)<br>

Ex. de fisier HTML:<br>

&ltHTML&gt<br>

&ltHEAD&gt<br>

continutul HEAD…<br>

&lt/HEAD&gt<br>

&ltBODY&gt<br>

continutul BODY…<br>

&lt/BODY&gt<br>

&lt/HTML&gt<br>

<p>

In tag-ul HEAD se pot pune titlul paginii care se va afisa

pe bara browser-ului (etichetele de inceput si sfarsit TITLE)

si unul sau mai multe tag-uri META pentru a preciza autorul, cuvintele cheie, etc.

<p>

In tag-ul BODY se pun etichetele de paragraf care contin

textul precum si etichete pentru imagini sau alte obiecte;

Atributele BODY sunt: BACKGROUND= imaginea de fundal,

BGCOLOR= culoarea de fundal, TEXT= culoarea textului,

LANG= limba documentului, DIR= directia de scriere a textului, etc.

Atributele se pot pune intre ghilimele duble dar acest

lucru nu este obligatoriu.

<p>

Intr-un document HTML se pot pune si comentarii, insa acestea

nu se afiseaza de catre Browser.

<!– comentariu –>

</BODY>

</HTML>

Salvați cu numele Primapagina și cu extensia .htm

Vizualizați conținutul dând dublu clic pe fișier.

Iată ce se afișează în fereastra browserului, pentru Exercițiul 4:

PRIMA TEMĂ

Un fisier HTM(L) este o constructie ierarhica de tag-uri (marcaje), care presupun o eticheta de inceput obligatorie si una de sfarsit, care poate fi si optionala in unele cazuri. Tag-ul HTML este tag-ul principal. In interiorul lui sunt definite doua sectiuni ale fisierului delimitate de tag- urile HEAD (antet) si BODY (continut)
Ex. de fisier HTML:
<HTML>
<HEAD>
continutul HEAD…
</HEAD>
<BODY>
continutul BODY…
</BODY>
</HTML>

In tag-ul HEAD se pot pune titlul paginii care se va afisa pe bara browser-ului (etichetele de inceput si sfarsit TITLE) si unul sau mai multe tag-uri META pentru a preciza autorul, cuvintele cheie, etc.

In tag-ul BODY se pun etichetele de paragraf care contin textul precum si etichete pentru imagini sau alte obiecte; Atributele BODY sunt: BACKGROUND=imaginea de fundal, BGCOLOR=culoarea de fundal, TEXT=culoarea textului, LANG=limba documentului, DIR=directia de scriere a textului, etc. Atributele se pot pune intre ghilimele duble dar acest lucru nu este obligatoriu.

Intr-un document HTML se pot pune si comentarii, insa acestea nu se afiseaza de catre Browser.

Tag-uri studiate: <HTML>, <HEAD>, <BODY>, <TITLE>, <META>,<BR>,<P>.

Notițe

Formatarea textului in HTML

Prima chestiune care trebuie clarificată este semnificația termenului. În mod obișnuit, prin formatarea textului, se înțelege aspectul documentului, de obicei al documentului editat. Dar, cum s-a arătat deja, aspectul, sau mai bine zis caracteristicile de formatare ale unui document redactat în limbajul HTML, nu au relevanță decât pentru cititorul acestuia. În cele ce urmează, noi ne vom referi la chestiunile ce privesc caracteristicile de formatare ale documentului virtual, adică al aceluia rezultat prin interpretarea documentului HTML de către un browser (pagina HTML), și pe care îl vede internautul.

Formatarea textului în documentele HTML se poate face fie la nivel de bloc- block level, fie la nivel de caracter- text level.

Diferența este că elementele de formatare la nivel de bloc pot să conțină și alte elemente de formatare, la nivel de bloc sau de caracter, spre deosebire de elementele de formatare la nivel de caracter, care pot să conțină doar text sau alte elemente de formatare la nivel de caracter.

Pentru gruparea la nivel de bloc, se utilizează etichetele <DIV> și </DIV>, iar pentru gruparea la nivel de caracter a mai multor elemente dintr-un bloc se utilizează etichetele <SPAN> și </SPAN>. Gruparea mai multor elemente se dovedește interesantă, deoarece se va putea aplica același stil simultan tuturor elementelor din grup.

Formatarea la nivel de paragraf

Din dorința de a face un text mai ușor accesibil atât vizual cât și în conținut, ideile pe care acesta le transmite vor fi structurate în paragrafe. În limbajul HTML delimitarea paragrafelor, așa cum am văzut și în exemplul precedent, se face cu ajutorul etichetei <P>, cu mențiunea că eticheta de sfârșit </P> este opțională.

Atributele admise de eticheta <P> sunt ALIGN, LANG, TITLE, DIR. Cel mai des folosit este atributul ALIGN, care determină alinierea stânga – dreapta a paragrafelor:

ALIGN= LEFT; aliniat la marginea din stânga

= CENTER; centrat

= RIGHT; aliniat la marginea din dreapta

= JUSTIFY; aliniat și la stânga și la dreapta.

În funcție de direcția de scriere a textului există un mod implicit de aliniere, astfel, dacă textul este scris de la stânga la dreapta (DIR= LTR), valoarea implicită a modului de aliniere este LEFT, iar dacă textul este scris de la dreapta la stânga, valoarea implicită este RIGHT.

Iată un exemplu în acest sens:

<P ALIGN= CENTER> Modul de aliniere al paragrafelor </P>

<P ALIGN= RIGHT> Acest paragraf este aliniat la dreapta

<P ALIGN= JUSTIFY> Acest paragraf este aliniat si la stanga si la dreapta. Acest paragraf este aliniat si la stanga si la dreapta. Acest paragraf este aliniat si la stanga si la dreapta.

<P> Acest paragraf este aliniat in modul implicit, deci in situatia data la stanga.

Pe ecran:

Modul de aliniere al paragrafelor

Acest paragraf este aliniat la dreapta

Acest paragraf este aliniat si la stanga si la dreapta. Acest paragraf este aliniat si la stanga si la dreapta. Acest paragraf este aliniat si la stanga si la dreapta.

Acest paragraf este aliniat in modul implicit, deci in situatia data la stanga.

În cazul în care se dorește același mod de aliniere pentru mai multe paragrafe, acestea se grupează într-un bloc utilizând eticheta <DIV>, astfel:

<P>…

</DIV>

Etichetele <P> fără conținut sunt ignorate de browser, iar dacă dorim să inserăm într-un text o linie nouă, atunci folosim eticheta <BR>.

Paragrafele titlu

În situația unui document mai cuprinzător, care conține capitole și subcapitole, este indicat ca fiecare dintre acestea să fie precedat de un paragraf titlu- heading, în care se face o descriere pe scurt a ceea ce urmează.

În limbajul HTML există 6 etichete care definesc nivelul paragrafului titlu: <H1>,<H2>,…,<H6>, în acest caz eticheta de sfârșit fiind obligatorie.

Importanța nivelurilor delimitate de etichetele <H1>,…,<H6> pornește de la <H1> și scade spre <H6>, iar browser-ul vizualizează paragrafele titlu mai importante cu caractere mai mari.

Ca și atribute, etichetele pentru paragrafe titlu admit atributele: LANG, TITLE, ALIGN, DIR.

Linii

Marcajul pentru desenarea liniilor orizontale este <HR> (Horizontal Rule), iar pentru cele verticale <VR> și are atributele ALIGN, COLOR, SIZE (grosime) și WIDTH (lungime); alinierea și culoarea se stabiliesc cum s-a arătat deja, în timp ce grosimea și lungimea se vor preciza ca procent din grosimea și lungimea implicită;

ALIGN= LEFT | CENTER | RIGHT; specifică modul de aliniere

SIZE= număr_de_pixeli; specifică grosimea liniei

WIDTH= valoare; specifică lungimea liniei, în cazul implicit lungimea este 100% din lățimea zonei de vizualizare

NOSHADE; specifică faptul că linia trasată este fără umbră.

Exemplu:

reprezintă o linie neagră orizontală, aliniată la dreapta, cu o grosime cu 10% mai mare decât grosimea implicită și cu lungimea egală cu jumătate din lungimea implicită;

Formatarea la nivel de caracter

Referitor la fontul utilizat de browser pentru vizualizarea textului, precizările se fac cu ajutorul etichetelor <FONT> și </FONT>, care dacă nu apar explicit, duc la utilizarea de către browser a fontului său implicit, sau a ultimei precizări.

Eticheta FONT admite următoarele atribute:

SIZE= valoare; determină dimensiunea caracterelor. Dimensiunea fontului poate fi indicată ca mărime absolută (un număr natural între 1 și 7), sau relativă la dimensiunea curentă a caracterelor, +n sau -n având semnificația cu n mărimi mai mari sau mai mici. Facem precizarea că dimensiunea efectivă de vizualizare a caracterelor depinde de browser.

FACE= lista de fonturi; definește o listă cu fonturi, dintre care browserul îl va alege în ordine pe primul disponibil, iar atunci când nici unul dintre fonturi nu este instalat (în sistemul de operare client pe care rulează), browserul îl folosește pe cel implicit.

COLOR= culoare; determină culoarea textului (cum s-a arătat la BGCOLOR).

Dimensiunea implicită a font-ului (care corespunde la SIZE= 3) se poate modifica folosind eticheta <BASEFONT> cu atributul SIZE. De exemplu, pentru a avea un font implicit de mărime 2, vom scrie:

Obs. Pentru a evita utilizarea de către browser a fontului implicit este bine să folosim cât mai rar fonturile cu caractere speciale (căci este puțin probabil ca acestea să fie instalate pe calculatorul clientului). Pentru a dispune totuși de caracterele speciale vom prefera seturile de caractere speciale.

Iată în continuare un exemplu:

<P> Exemplu de text cu diferite fonturi si diferite marimi

<P> <FONT SIZE= 1 FACE= ROMAN>Font Roman cu dimensiune 1

<P> <FONT SIZE= +1 FACE= ROMAN>Font Roman cu dimensiune 2

<P> <FONT SIZE= 5 FACE= ARIAL>Font Arial cu dimensiune 5

Pe ecran vom vedea:

Exemplu de text cu diferite fonturi si diferite marimi

Font Roman cu dimensiune 1

Font Roman cu dimensiune 2

Font Arial cu dimensiune 5

Utilizarea seturilor de caractere

Deoarece memorarea informațiilor se face digital (numeric), există pentru fiecare caracter un cod de identificare numeric, cel mai cunoscut fiind codul ASCII- American Standard Code for Information Interchange, care codifică 256 caractere (în principal cele comune limbilor latine- fără diacritice), cărora le asociază coduri între 0 și 255.

Pentru un sistem internațional cum este Web-ul, codul ASCII este însă insuficient, prin urmare s-a trecut la standardizarea și a altor seturi de caractere, ce conțin câteva mii de caractere utilizate pe plan mondial (216= 65.536), și care se numește UNICODE.

În limbajul HTML specificarea setului de caractere se face cu eticheta <META>. Iată un exemplu în care se precizează că documentul utilizează codificarea pentru Europa Centrală și de Est:

<META HTTP-EQUIV= "Content-Type"

CONTENT= "text/html; CHARSET= ISO-8859-2">

Se folosește atributul HTTP-EQUIV pentru a oferi informații asociate câmpurilor din antetul protocolului HTTP, respectiv câmpul se numeste Content-Type iar valoarea asociată este "text/html; CHARSET= ISO-8859-2".

Seturile de caractere cel mai des utilizate sunt următoarele:

ISO-8859-1 pt. Europa de Vest

ISO-8859-2 pt. Europa Centrală și de Est

SHIFT-JIS sau EUC-JP pt. limba japoneză

ISO-8859-5 pentru documente redactate în alfabetul chirilic.

Dacă nu se face precizarea setului de caractere folosit, browserul îl va utiliza pe cel transmis de către server prin același parametru ca mai sus al protocolului HTTP. În cazul în care se dorește modificarea setului de caractere implicit, acesta se selectează după dorință din submeniul Character Set al meniului View (la Netscape Navigator) respectiv submeniul Encoding (la Internet Explorer).

Caractere speciale

Pentru specificarea caracterelor care nu au corespondent pe tastatură, soluțiile sunt următoarele:

Folosirea codului numeric Unicode asociat caracterului, după cum urmează: &#D; D fiind codul Unicode al caracterului exprimat în zecimal;

Ex. Â reprezintă litera Â

Folosirea unor referințe speciale, asociate unor caractere mai utilizate, astfel: Â reprezintă aceeași litera (Â) și este mai ușor de memorat (A circumflex); &quot reprezintă (") ghilimelele (quotation mark); &nbsp folosit pentru crearea de spații suplimentare (non breaking space);.

Obs. 1. Caracterul ; este obligatoriu deoarece indică sfârșitul codului.

Obs. 2. Pentru a putea folosi în corpul documentului caracterele < și > le vom specifica printr-una din metodele indicate la caracterele speciale; folosirea lor ca < respectiv > este interpretată automat ca marcaj de început respectiv sfârșit de etichetă. Pentru caracterul < putem folosi &#60 sau &lt (less then- mai mic decât) iar pentru > putem folosi &#62 sau &gt (greather then- mai mare decât).

Efecte în text

Se procedează la încadrarea textului între etichetele de început și de sfârșit corespunzătoare efectului dorit; cele mai folosite efecte în HTML sunt următoarele:

Scriere cursivă <I>Text</I> Pe ecran:Text

Scriere îngroșată <B>Text</B> Pe ecran:Text

Scriere subliniată <U>Text</U> Pe ecran:Text

Scriere mai mare <BIG>Text</BIG> Pe ecran: Text

Scriere mai mică <SMALL>Text</SMALL> Pe ecran: Text

Scriere tăiată <STRIKE>Text</STRIKE> Pe ecran: Text

Se pot executa și combinații între efecte, de ex.:

Scriere cursivă+subliniată <I><B>Text</I></B> Pe ecran: Text

Atunci când este necesară utilizarea unor citate se folosesc fie eticheta <BLOCKQUOTE> pentru citate lungi (mai multe paragrafe), fie eticheta <Q> pentru citate scurte (un singur paragraf), ambele necesitând și etichetă de sfârșit. Ca exemplu:

<P>Eminescu intuia în poezia sa infinitul spunand: <P><BLOCKQUOTE>" La steaua care-a rasarit <P> E-o cale-atat de lunga <P> Ca mii de ani i-au trebuit <P> Luminii sa ne-ajunga. &quot </BLOCKQUOTE></P>

Pe ecran:

Eminescu intuia în poezia sa infinitul spunand:

" La steaua care-a rasarit

E-o cale-atat de lunga

Ca mii de ani i-au trebuit

Luminii sa ne-ajunga."

Eticheta <BLOCKQUOTE> recunoaște atributul CITE care primește ca valoare o adresa Web, anume URI-ul documentului sursă al citatului:

CITE= URI;

Folosirea exponenților și a indicilor

Pentru ca un text să apară ca exponent se utilizează etichetele <SUP> și </SUP>, iar pentru ca să apară la indice se utilizează etichetele <SUB> și </SUB>, ca în exemplul de mai jos:

<P> A= 10m <SUP> 2 </SUP> Pe ecran: A= 10m2

<P> Anexa A <SUB> 3 </SUB> Pe ecran: Anexa A3

Folosirea listelor

Pentru reprezentarea structurată a unor informații în majoritatea cazurilor se folosesc listele. În mod curent, în funcție de necesitatea prezentării informației într-o anumita ordine sau aleatoriu, se utilizează listele ordonate, respectiv neordonate.

Listele neordonate- Unordered List, sunt etichetate cu <UL> și </UL>, fiecare acces în listă fiind anunțat cu eticheta <LI> de la List Item:

<P>Marci de calculatoare:

<UL>

<LI> Lenovo

<LI> Apple

<LI> COMPAQ

Pe ecran:

Mărci de calculatoare:

Lenovo

Apple

COMPAQ

…

Este posibilă selectarea simbolului care precede fiecare intrare în listă, cu ajutorul atributului TYPE, care admite trei valori: disc, circle și square. De exemplu:

<P>Marci de calculatoare:

<LI> IBM

<LI> Apple </UL>

Pe ecran:

Mărci de calculatoare:

IBM

Apple

Pentru crearea unei liste ordonate se folosesc la încadrarea intrărilor perechea de etichete <OL> și </OL>. Ca exemplu:

<P> Membrii Consiliului Local

<OL>

<LI> Antonescu Ion

<LI> Argesanu Victor

<LI> Astalos Petru

<LI> …

</OL>

Pe ecran:

Membrii Consiliului Local

Antonescu Ion

Argesanu Victor

Astalos Petru

…

Modul de numerotare este determinat de atributul TYPE (asociat etichetei <OL>) care poate fi:

TYPE= 1; o succesiune de cifre arabe: 1,2,3… (implicit începe cu 1); este modul de numerotare implicit;

TYPE= I; o succesiune de cifre romane: I,II,III… (implicit începe cu I) = a; o succesiune de litere mici: a,b,c… (implicit începe cu a)

= A; o succesiune de litere mari: A,B,C… (implicit începe cu A) = i; o succesiune de i-uri mici: i,ii,iii… (implicit începe cu i)

Eticheta <OL> acceptă și atributul START cu care se poate modifica valoarea de la care începe numerotarea listei, astfel:

START= NUMĂR; unde număr reprezintă al câtelea termen din succesiune va fi utilizat pentru începerea numărătorii.

Numerotarea intrărilor în listă se face automat. Atunci când se dorește modificarea valorii cu care este automat numerotată o intrare în listă, în eticheta <LI> corespunzătoare se include atributul VALUE, căruia i se asociază numărul valorii de etichetare, VALUE= număr, ca în exemplu:

<P> Lista de prenotare persoane

<LI> Antonescu…

<LI VALUE= 8> Bărbulescu…

<LI VALUE= 12> Codreanu

<LI> Popescu…

</OL>

Pe ecran:

Lista de prenotare persoane

Antonescu…

Bărbulescu…

Codreanu

Popescu…

Intrările în liste fiind indentate, se pot construi și liste imbricate (liste în liste) sau liste ierarhice, folosind fie cele trei simboluri ale tag-ului <UL> fie tipurile de numerotare ale tag-ului <OL>, chiar si amestecat. Dacă utilizatorul nu stabilește altfel cele trei niveluri (implicite) ale tag-ului <UL> sunt în ordine cerculetul plin, cerculetul gol si patratelul plin.

Ex:

<UL>

<LI> Capitolul I

<UL>

<LI> Subcapitolul 1

<OL>

<LI> Tema…

</OL>

<LI> Subcapitolul 2

</UL>

<LI> Capitolul II, etc.

</UL>

Pe ecran:

Capitolul I

Subcapitolul 1

Tema…

Subcapitolul 2

Capitolul II, etc.

Exerciții

Creati un nou fisier Formatare.htm

Scrieti cate un paragraf care sa fie aliniat centrat, stanga, dreapta si justify

Optional grupati doua paragrafe cu tagul <DIV>

Utilizati doua paragrafe titlu <H1> si<H3>

Utilizati un tag <FONT> cu atributele SIZE, FACE si COLOR

Utilizati <SPAN> pentru a afisa o parte de text cu alta culoare

Desenati o linie orizontală aliniată centrat, și opțional una verticală;

Afisati 20 de caractere pe baza de cod, altele decat #226 (â) si #238 (î) pentru a cauta diacriticele limbii romane;

Introduceti efectele Italic, Bold, Underline, Big, Small si Strike combinat

Introduceti un citat

Introduceti o expresie ce contine exponenti si indici de ex. A2+bi= c3

Creati o lista neordonata ex.:

Hochei

Volei

Tenis

Creati o lista ordonata ex.:

Muzica

Dans

Lectura

Creati o lista ierarhica ex:

Sectia Prelucrarea Lemnului

Anul I

Grupa 1…

Grupa 2…

Anul II…

Anul IV

Tag-uri studiate: <P>, <BR>, <DIV>, <H1…>, <FONT>, <SPAN>, <HR>, <VR>.

În continuare se prezintă o posibilă rezolvare a problemelor propuse:

<HTML>

<HEAD>

<TITLE> Proiectare Web Formatarea in HTML</TITLE>

</HEAD>

Formatarea textelor in HTML</p>

Tag-ul paragraf (P) are atributul ALIGN cu care se indica alinierea,

LANG si DIR care au fost prezentate la tag-ul BODY si atributul TITLE;

acest text este afisat cu align= left

Pentru a grupa mai multe paragrafe in vederea utilizarii unui atribut comun

(de ex. align) se foloseste perechea DIV; acest text este afisat cu align= right

<p>

Sunt prezentate mai jos cele 6 variante de formatari de titlu disponibile

in limbajul HTML

<H1>Titlu H1

<H2>Titlu H2

<H3>Titlu H3

<H4>Titlu H4

<H5>Titlu H5

<H6>Titlu H6

Formatarea la nivel de caracter se face cu eticheta FONT care admite atributele

SIZE (marimea literelor), FACE (fontul) si COLOR (culoarea literelor); acest text

este afisat cu align= justify, size= 3, face= roman si color= red;<BR>

Randurile noi se creeaza cu tag-ul BR<BR>

Pentru a grupa o parte dintre caractere se foloseste tag-ul

<H4 align= center><font color= black>Diacriticele si seturile de caractere

Aflati care sunt codurile diacriticelor din limba romana, mari si mici

stiind ca cele de mai jos au codurile cuprinse intre 190 si 219

&#190 &#191 &#192 &#193 &#194 &#195 &#196 &#197 &#198 &#199

&#200 &#201 &#202 &#203 &#204 &#205 &#206 &#207 &#208 &#209

&#210 &#211 &#212 &#213 &#214 &#215 &#216 &#217 &#218 &#219

<BR>

Alte exemple:<BR>

pentru < inlocuiti cu & urmat de lt;<BR>

pentru > inlocuiti cu & urmat de gt;<BR>

pentru © inlocuiti cu & urmat de copy;<BR>

pentru & inlocuiti cu & urmat de amp;<BR>

pentru " inlocuiti cu & urmat de quot;<BR>

<p align= left>Exemple de diacritice:

&#194 &#226 &#206 &#238 &#258 &#259

<H4 align= center>Efectele in text

<I>Scriere cursiva: tag I</I><BR>

<B>Scriere ingrosata: tag B</B><BR>

<U>Scriere subliniata: tag U</U><BR>

<BIG>Scriere mai mare: tag BIG</BIG><br>

<SMALL>Scriere mai mica: tag SMALL</SMALL><br>

<strike>Scriere taiata: tag STRIKE</strike><br>

<I><U> Efecte combinate – atentie la ordinea tag-urilor! </U></I>

<H1 align= center><font color= black> Citatul

Eminescu intuia în poezia sa infinitul spunand:

<P><BLOCKQUOTE>" La steaua care-a rasarit

<P> E-o cale-atat de lunga

<P> Ca mii de ani i-au trebuit

<P> Luminii sa ne-ajunga. &quot </BLOCKQUOTE></P>

<p>

<H2 align= center><font color= black> Indici si exponenti

Exponentii sunt marginiti de etichetele &ltSUP&gt si &lt/SUP&gt

iar indicii de etichetele &ltSUB&gt si &lt/SUB&gt

<br>

Ex. a<sup>2</sup>+b<sup>2</sup>= c<sup>2</sup>

<br>

Sau: m<sub>i</sub>, n<sub>i</sub>, etc.

<h2 align= center>Liste

<p align= left>Lista neordonata

<p>

<ul>

<li>Steaua <li>Dianamo

</ul>

<li>… <li>…

</ul>

Lista ierarhica

<ul> <li>Capitolul I

<ul> <li>Subcapitolul 1

<li>Subcapitolul 2

</ul>

<br> . <br> .

<ul> <li>Subcapitolul n

</ul>

<ul> <li>Capitolul II

<ul> <li>Subcapitolul 1

<li>Subcapitolul 2

</ul>

<br>. <br>.

<ul> <li>Subcapitolul n

</ul>

Lista ordonata

<p>

Accesorii

<ol>

<li>Poseta <li>Pantofi <li>Centura

<li value= 10>Cercei

<li>Bratari <li>Esarfa <li>Colier <li>Verigheta

</ol>

</BODY>

</HTML>

Mai jos se poate vedea ceea ce se afișează în fereastra browserului (pe un fond de culoare galbenă, care nu a fost reluat în text):

Formatarea textelor in HTML

Tag-ul paragraf (P) are atributul ALIGN cu care se indica alinierea, LANG si DIR care au fost prezentate la tag-ul BODY si atributul TITLE; acest text este afisat cu alingn=left

Pentru a grupa mai multe paragrafe in vederea utilizarii unui atribut comun (de ex. align) se foloseste perechea DIV; acest text este afisat cu align=right

Sunt prezentate mai jos cele 6 variante de formatari de titlu disponibile in limbajul HTML

Titlu H1

Titlu H2

Titlu H3

Titlu H4

Titlu H5

Titlu H6

Formatarea la nivel de caracter se face cu eticheta FONT care admite atributele SIZE (marimea literelor), FACE (fontul) si COLOR (culoarea literelor); acest text este afisat cu align=justify, size=3, face=roman si color=red;
Randurile noi se creeaza cu tag-ul BR
Pentru a grupa o parte dintre caractere se foloseste tag-ul SPAN

Diacriticele si seturile de caractere

Aflati care sunt codurile diacriticelor din limba romana, mari si mici stiind ca cele de mai jos au codurile cuprinse intre 190 si 219

¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û

Alte exemple:
pentru < inlocuiti cu & urmat de lt;
pentru > inlocuiti cu & urmat de gt;
pentru © inlocuiti cu & urmat de copy;
pentru & inlocuiti cu & urmat de amp;
pentru " inlocuiti cu & urmat de quot;

Exemple de diacritice: Â â Î î Ă ă

Efectele in text

Scriere cursiva: tag I
Scriere ingrosata: tag B
Scriere subliniata: tag U
Scriere mai mare: tag BIG
Scriere mai mica: tag SMALL
Scriere taiata: tag STRIKE
Efecte combinate – atentie la ordinea tag-urilor!

Citatul

Eminescu intuia în poezia sa infinitul spunand:

" La steaua care-a rasarit

E-o cale-atat de lunga

Ca mii de ani i-au trebuit

Luminii sa ne-ajunga. "

Indici si exponenti

Exponentii sunt marginiti de etichetele <SUP> si </SUP> iar indicii de etichetele <SUB> si </SUB>
Ex. a2+b2=c2
Sau: mi, ni, etc.

Liste

Lista neordonata

Steaua

Dianamo

…

Lista ierarhica

Capitolul I

Subcapitolul 1

Tema1
.
.

Tema n

Subcapitolul 2

Tema1
.
.

Tema n

.
.

Subcapitolul n

Tema1
.
.

Tema n

Capitolul II

Subcapitolul 1

Tema1
.
.

Tema n

Subcapitolul 2

Tema1
.
.

Tema n

.
.

Subcapitolul n

Tema1
.
.

Tema n

Lista ordonata

Accesorii

Poseta

Pantofi

Centura

Cercei

Bratari

Esarfa

Colier

Verigheta

Notițe

Inserarea legăturilor

O caracteristică importantă a hipertextelor este că, în cadrul lor, pot fi utilizate conexiuni către alte resurse Web, așa numitele link-uri, resurse ce pot fi simplu accesate din fereastra browser-ului.

În funcție de resursele utilizate, limbajul HTML are mai multe posibilități, elemente, cu ajutorul cărora se pot crea legături, astfel:

A – legătură către o resursă Web, document HTML, ex. pagina precedentă, pagina următoare, etc.

LINK – legătură către resurse utile (autor, versiune, fișier de descriere a stilurilor, etc.)

APPLET – legătură către un program executabil pe terminalul utilizatorului.

Tag-ul (sau Marcajul) <A>

Elementul <A> (anchor-ancoră) se utilizează pentru a insera un salt (legătura) într-un document HTML. În funcție de atributele VLINK (culoare pt. VisitedLINKS), ALINK (culoare pt. saltul-ul selectat) și LINK (culoarea restului salturilor) ce aparțin etichetei <BODY>, sau de modul de configurare al browser-ului, textul cuprins între etichetele <A> și </A> va apărea evidențiat corespunzător în fereastra browser-ului. Este bine ca acest text să descrie cât mai sugestiv resursa către care se va face saltul.

Elementul <A> are următoarele atribute specifice:

HREF= URI; specifică adresa resursei la care se face saltul

NAME= șir de caractere; asociază un nume saltului curent pentru a putea să devină ținta unui alt salt

TITLE= șir de caractere; asociază un titlu resursei la care se face saltul, astfel încât browser-ul va putea afișa acest titlu când utilizatorul trece cu cursorul deasupra link-ului.

Iată câteva exemple:

Primul exemplu, în care se creează un salt către documentul HTML par9.htm și în care adresa resursei țintă este specificată relativ la locația curentă, ceea ce înseamnă că documentul către care se face saltul se află în același dosar/ folder:

… Confirmarea rezultatelor în <A HREF= ”par9.htm”> Paragraful 9 – Rezultate experimentale</A>

Pe ecran:

… Confirmarea rezultatelor în Paragraful 9 – Rezultate experimentale

Obs. Efectul este următorul: când utilizatorul se găsește cu cursorul deasupra textului subliniat, forma cursorului se modifică la o mână și dacă se dă clic_stânga se poate accesa conținutul fișierului par9.htm, adică se pot consulta rezultatele experimentale (spunem că am făcut un salt la rezultatele experimentale sau că avem o legătură la ele);

În al doilea exemplu, adresa resursei destinație este specificată în mod absolut (http://www.uoradea.ro) iar ancora primește și un nume (ancorauoradea), astfel încât, pe lângă saltul către resursă, în cadrul aceluiași document se va putea executa un salt la această ancoră, utilizând numele ei; numele legăturilor favorizează și înțelegerea mai bună a textului sursă de către cel care îl citește:

<A NAME= "ancorauoradea" HREF= "http://www.uoradea.ro"> Universitatea Oradea </A>

…

<A HREF= "#ancorauoradea"> Înapoi la site-ul Universitatea Oradea </A>

Pe ecran:

Universitatea Oradea

…

Înapoi la site-ul Universitatea Oradea

Un alt exemplu, în care definim un salt (o legătură) către ancora "Legături" din documentul HTML "Listă legături.htm":

<A HREF= "Listă legături.htm#Legături"> Listă legături HTML </A>

Pe ecran:

Listă legături HTML

Prin activarea acestei legături se deschide în fereastra browser-ului documentul "Listă legături.htm" la ancora "Legături". Se poate vedea că pentru specificarea drept țintă a unei ancore dintr-un alt document se folosește construcția: URI#nume_ancoră.

Obs. Nu este admisă definirea unui salt în interiorul altui salt!

Eticheta <A> mai admite și alte atribute, cum ar fi:

CHARSET – specifică setul de caractere utilizat de resursa destinație

HREFLANG – specifică limba de redactare a documentului legat

TARGET – specifică încărcarea resursei într-o pagină nouă sau în cadrul dorit

LANG, DIR, etc.

De exemplu daca dorim ca documentul la care se face saltul să se deschidă într-o fereastră nouă vom specifica atributul TARGET astfel:

<A HREF= ”Fisiertinta.htm” target= ”_blank”>Fisier tinta</A>

iar daca dorim ca atunci când cursorul se găsește deasupra legăturii să se afișeze un text explicativ vom adăuga și atributul TITLE:

<A HREF= ”Fisier-tinta.htm” title= ”textul explicativ” target= ”_blank”>Fisier tinta</A>

Pe ecran:

Fisier tinta

Tag-urile <LINK> si <BASE>

Elementul <LINK> dă posibilitatea specificării unor legături către alte elemente, dar, spre deosebire de elementul A, trebuie plasat în antetul documentului, în secțiunea HEAD, din această cauză neavând nimic afișat în pagina vizualizată de browser. Deasemenea se deosebește de Tag-ul <A> prin faptul că este o etichetă singulară. Ca atribute, elementul LINK admite aceleași atribute ca și elementul A.

Ca utilitate, cu ajutorul elementului LINK se pot accesa informații care se găsesc în alte fișiere, în alte locații, cum ar fi informații despre autor, bibliografie etc.,.

Iată un exemplu:

<HTML>

<HEAD>

<TITLE> PROIECTARE WEB </TITLE>

</HEAD>

Elementul <BASE> s-a intodus deoarece specificarea adreselor resurselor Web, la care se creează legături în documente HTML este destul de greoaie, mai ales când aceste adrese sunt lungi. Cu ajutorul acestui element se poate simplifica scrierea lor astfel: vom preciza prin intermediul acestei etichete adresa de bază a URI-urilor specificate în mod relativ.

Nici elementul <BASE> nu admite etichetă de sfârșit, iar valoarea atributului URI trebuie să fie o adresă absolută:

Plasarea etichetei <BASE> se face în antet, ca în exemplul următor:

<HTML>

<HEAD>

<TITLE> CARTE </TITLE>

<HEAD>

<BODY>

…

<A HREF= "Carte/Cuprins.htm"> Cuprins </A>

…

<BODY>

</HTML>

Conform exemplului de mai sus, după ce am precizat adresa de bază, care este: http://www.idd.uoradea.ro/~pdiana, prin activarea legăturii Cuprins, browserul va încărca documentul existent la adresa: http://www.idd.uoradea.ro/~pdiana/Carte cu numele Cuprins.htm.

Obs. Specificarea relativă a adreselor se poate face și în absența etichetei <BASE>, caz în care "baza" se consideră locația curentă.

Exerciții

Introduceți în primul document (Structura.htm) o legătură către documentul Formatare (.htm) cu textul "Doc. următor"

In documentul Formatare introduceți o legătură către documentul Structura cu textul "Doc. precedent" și cu TITLE="Doc. Structura"

La începutul documentului Formatare introduceți o ancoră numită "sus"

Tot aici introduceți la mijloc și la sfârșit câte o legătură către începutul documentului (ancora precedentă) cu textul "Sus"

Creați un document nou numit Legături.htm

În documentul Formatare introduceți o legătură către noul document (Legături.htm) cu textul "Doc. următor" și cu opțiunea ca să se deschidă într-o fereastră nouă

In documentul curent (Legături.htm) introduceți o legătură către documentul precedent (Formatare.htm) cu textul "Doc. precedent"

Stabiliți culorile legăturilor (vizitată, curentă etc.) și introduceți-le în tag-ul body ale celor trei documente

Introduceți într-un document la alegere o legătuăa ăatre site-ul Universității din Oradea: www.uoradea.ro

În documentul Formatare.htm utilizați tag-ul <Base> simplificând referințele

În documentul curent introduceți un <Link> catre un fișier care conține o bibliografie.

Tag-uri studiate: <A>, <BASE>, <LINK>.

O posibilă rezolvare avem mai jos:

<HTML>

<HEAD>

<TITLE> Proiectare Web Tema 4 Legaturi in HTML </TITLE>

</HEAD>

Legaturi in HTML</p>

<a href="LPW3 Formatare.htm" target="_blank">DOC Precedent</A>

<a href="LPW5-7 Obiecte.htm" title="LPW 5-6-7 Obiecte">Doc Urmator</A>

<a href="http://www.uoradea.ro" target="_blank">Univ. Oradea</a>

Tag-ul &ltA&gt permite creerea de salturi catre alte documente HTM(L)

aflate atat pe acelasi calculator cat si pe alte calculatoare; sunt

recunoscute atributele HREF care indica adresa resursei, NAME – numele

resursei, TITLE – titlul resursei, CHARSET – setul de caractere al resursei,

HREFLANG – limba resursei, TARGET – fereastra/cadrul in care se va incarca

resursa, etc.<br>

Ex. &lt a href=http://www.uoradea.ro" target="_blank" &gt Univ. Oradea &lt /a &gt

este un link catre site-ul Universitatii din Oradea, care se va deschide intr-o

pagina noua

<p>

Tag-ul &ltA&gt permite si creerea de salturi catre diverse puncte ale

documentului, daca acestea au fost marcate anterior ca ancore (este necesara

si suficienta precizarea atributului NAME) <br>

Ex. &lt a name="Sus" &gt se aseaza la inceputul documentului si

&lt a href="#Sus" &gt Sus &lt /a &gt la sfarsitul lui, realizandu-se un salt

la inceputul paginii

<p>

Culorile legaturilor se stabilesc cu atributele LINK (legatura nevizitata),

ALINK (legatura activa – pe care se gaseste cursorul) si VLINK (legura deja vizitata)

ale tag-ului BODY<br>

Ex. &ltBODY VLINK=green&gt va afisa legaturile deja vizitate cu culoarea verde

Obs. Nu sunt permise legaturi incluse in alte legaturi!

Tag-ul &ltBASE&gt se foloseste pentru simplificarea scrierii adreselor

atunci cand acestea sunt prea lungi; el se aseaza in zona &ltHEAD&gt si

contine partea de inceput a adreselor (care se repeta)si nu necesita

sa fie inchis<br>

Ex. &lt base href=C:\student\LAB PW &gt se aseaza in antet si

&lt a href="LPW5-7 Obiecte.htm" title="LPW 5-6-7 Obiecte" &gt Doc Urmator &lt /A &gt

creeaza un link catre fisierul LPW5-7 Obiecte.htm aflat in dosarul LAB PW

<p>

In recapitulare, am vazut pana acum ca zona &ltHEAD&gt poate contine tag-

urile: &ltTITLE&gt, &ltMETA&gt, &ltLINK&gt si &ltBASE&gt

<br>

</BODY>

</HTML>

Iată ceea ce se vede în fereastra bowserului (pe un fond roșu deschis):

Legaturi in HTML

DOC Precedent Doc Urmator Univ. Oradea

Tag-ul <A> permite creerea de salturi catre alte documente HTM(L) aflate atat pe acelasi calculator cat si pe alte calculatoare; sunt recunoscute atributele HREF care indica adresa resursei, NAME – numele resursei, TITLE – titlul resursei, CHARSET – setul de caractere al resursei, HREFLANG – limba resursei, TARGET – fereastra/cadrul in care se va incarca resursa, etc.
Ex. < a href=http://www.uoradea.ro" target="_blank" > Univ. Oradea < /a > este un link catre site-ul Universitatii din Oradea, care se va deschide intr-o pagina noua

Tag-ul <A> permite si creerea de salturi catre diverse puncte ale documentului, daca acestea au fost marcate anterior ca ancore (este necesara si suficienta precizarea atributului NAME)
Ex. < a name="Sus" > se aseaza la inceputul documentului si < a href="#Sus" > Sus < /a > la sfarsitul lui, realizandu-se un salt la inceputul paginii

Culorile legaturilor se stabilesc cu atributele LINK (legatura nevizitata), ALINK (legatura activa – pe care se gaseste cursorul) si VLINK (legura deja vizitata) ale tag-ului BODY
Ex. <BODY VLINK=green> va afisa legaturile deja vizitate cu culoarea verde

Obs. Nu sunt permise legaturi incluse in alte legaturi!

Tag-ul <BASE> se foloseste pentru simplificarea scrierii adreselor atunci cand acestea sunt prea lungi; el se aseaza in zona <HEAD> si contine partea de inceput a adreselor (care se repeta)si nu necesita sa fie inchis
Ex. < base href=C:\student\LAB PW > se aseaza in antet si < a href="LPW5-7 Obiecte.htm" title="LPW 5-6-7 Obiecte" > Doc Urmator < /A > creeaza un link catre fisierul LPW5-7 Obiecte.htm aflat in dosarul LAB PW

In recapitulare, am vazut pana acum ca zona <HEAD> poate contine tag- urile: <TITLE>, <META>, <LINK> si <BASE>

Sus

Notițe

Inserarea Obiectelor multimedia

O facilitate deosebită a limbajului HTML este că permite celor care proiectează pagini Web, să utilizeze pentru afișare și elemente multimedia, ca de exemplu imagini, secvențe video sau programe compilate scrise în Java– numite applet-uri. Deși la început în limbajul HTML erau acceptate doar imaginile și applet-urile (ce puteau fi inserate cu etichetele IMG, respectiv APPLET), începând cu versiunea 4.0, prin eticheta OBJECT sunt acceptate toate elementele multimedia.

Inserarea imaginilor (Eticheta <IMG>)

Elementul IMG permite inserarea unei imagini într-un document HTML. Neavând conținut, elementul IMG nu are etichetă de sfârșit. El admite următoarele atribute:

SRC= URI; specifică adresa fișierului care conține imaginea.

Ca fișiere grafice utilizate, cele mai cunoscute sunt JPEG (Joint Photographic Expert's Group) și GIF (Graphic Interchange Format). Primul dintre acestea este foarte performant, permițând reprezentarea comprimată a imaginilor cu peste 16 milioane de culori (224), iar al doilea cu 256 de culori.

HEIGHT= dimensiune; specifică înălțimea imaginii

WIDTH= dimensiune; specifică lățimea imaginii

Dimensiunile HEIGHT și WIDTH dacă sunt prezente înlocuiesc dimensiunile originale ale imaginii și reprezintă dimensiunile pe care imaginea o va avea pe ecran atunci când va fi afișată de browser. Ele pot fi exprimate fie în număr de pixeli (absolut) fie în procente (relativ), în cazul din urmă, procentajul raportându-se la spațiul disponibil pentru afișare pe Verticală (HEIGHT) sau pe Orizontală (WIDTH). HEIGHT și WIDTH dau browser-ului o indicație despre mărimea imaginii, astfel încât acesta poate rezerva spațiul necesar, continuând încărcarea paginii cu alte părți (în așteptarea imaginii).

ALT= text; specifică un text alternativ care va fi afișat de browser-ele ce nu pot afișa imagini.

ALIGN= valoare; specifică modul de aliniere în raport cu textul și admite valorile:

TOP – imaginea se aliniază cu textul în partea sa de sus

MIDDLE – alinierea imaginii se face centrat

BOTTOM – partea de jos a imaginii aliniată în raport cu textul

LEFT – alinierea imaginii se face la marginea din stânga

RIGHT – alinierea imaginii se face la marginea din dreapta

BORDER – număr pixeli; imaginea urmează să fie încadrată într-un chenar a cărui grosime este specificată prin numărul de pixeli

HSPACE= dimensiune (pixeli); specifică spațiul din stânga și dreapta imaginii

VSPACE= dimensiune (pixeli); specifică spațiul sus – jos al imaginii

HSPACE și VSPACE dacă sunt prezente înlocuiesc dimensiunile implicite (un mic spațiu non-zero).

Alte atribute cum ar fi ISMAP și USEMAP vor fi explicate în capitolele următoare.

Iată acum și un exemplu:

<HTML>

<HEAD>

<TITLE> Bicicletă </TITLE>

</HEAD>

<BODY>

<IMG SRC= "bicycle.gif" HEIGH= 140 WIDTH= 90

ALIGN= middle ALT= "Bicicletă romantică">

<I> O bicicletă </I>

</BODY>

</HTML>

Pe ecran:

O bicicletă

Inserarea unor legături pe o imagine

Se poate utiliza eticheta IMG drept conținut pentru elementul ancoră A, având posibilitatea de a insera în document o legătură pe o imagine, astfel încât prin acționarea imaginii va fi accesată resursa destinație. În acest caz imaginea specificată de eticheta IMG înlocuiește textul afișat de eticheta <A> și pe care utilizatorul acționează mouse-ul pentru a activa legătura. În exemplul de mai jos, printr-un clic pe imagine, se încarcă în fereastra browser-ului documentul "Cap.htm":

Pe ecran:

Maparea imaginilor

Prin crearea unor legături doar pe anumite zone din imagine, efectele sunt deosebite. Să luăm exemplul unei pagini Web având ca subiect Europa, în care inserăm imaginea hărții administrative a continentului. Creând acum pentru fiecare țară reprezentată pe hartă o legătură, prin activarea acesteia am putea deschide în fereastra browser-ului o pagină Web cu informații despre țara respectivă.

Pentru a ajunge la acest rezultat, este necesar să atașăm o descriere în care să specificăm zonele senzitive ale imaginii, operație care se numește "mapare".

Uzual, există două tipuri de mapare, anume:

Client – prin definirea zonelor senzitive ale imaginii și a legăturilor în cadrul documentului HTML, harta grafică va fi interpretată de către browser. Astfel, la activarea unei zone a imaginii, browser-ul calculează coordonatele pixelului pe care s-a dat clic și apoi execută operațiunea

Server – cu ajutorul unui soft – poate fi de tip CGI (Common Gateway Interface), harta grafică este interpretată de către server. La activarea unei zone a imaginii, coordonatele pixelului sunt transmise către server, unde sunt interpretate și se execută operațiunea.

Maparea client este mai simplă și permite vizualizarea în regim off-line.

Elementul IMG admite atributul USEMAP, cu ajutorul căruia se asociază unei imagini o hartă grafică.

USEMAP= "#nume-hartă"

În vederea descrierii hărții unei imagini se folosește elementul MAP. Elementul MAP face descrierea zonelor senzitive ale imaginii, cuprinsă între o etichetă de început <MAP> și una de sfârșit </MAP>, iar ca unic atribut pe NAME, care asociază un nume hărții grafice. Acest nume va fi utilizat de atributul USEMAP.

Pentru descrierea unei zone senzitive a imaginii se folosește elementul AREA, care are mai multe atribute:

SHAPE= DEFAULT | RECT | CIRCLE | POLY; definește forma zonei astfel:

DEFAULT – întreaga zonă

RECT – o zonă dreptunghiulară

CIRCLE – o zonă circulară

POLY – o zonă poligonală

COORDS= coordonate; stabilește poziția zonei pe ecran, prin definirea coordonatelor acesteia.

Iată câteva exemple de coordonate impuse de geometria zonei:

CIRCLE are 3 coordonate: center-x abscisa centrului,

center-y ordonata centrului,

radius raza;

RECT are 4 coordonate: left-x abscisa stânga sus

top-y ordonata stânga sus

right-x abscisa dreapta jos

bottom-y ordonata dreapta jos;

POLY are 2n coordonate: x1, y1, x2, y2, …,xN, yN abscisa respectiv ordonata fiecărui vârf din cele N ;

Valorile coordonatelor sunt relative, se ia ca referință colțul din stânga sus și se scriu în ordinea precizată, cu virgulă între ele.

NOHREF; specifică faptul că nici o legătură nu se asociază acestei zone

HREF= URI; specifică adresa resursei la care se creează legătura din zonă

ALT= șir de caractere; specifică un text alternativ, o descriere a zonei, care va fi afișată atunci când săgeata-cursor rămâne un timp asupra zonei.

Deci structura generală a unei mapări cuprinde:

<IMG SRC= "nume_fisier_imagine" ALT= "text_alternativ_imagine"

HEIGHT= Înălțime WIDTH= Lățime USEMAP= "#nume_hartă":

<AREA HREF= "resursă_legată" ALT= "text_alternativ_zonă"

SHAPE= "formă_zonă"

COORDS= "coord1, …,coord_finală">

.

<AREA HREF= "resursă_legată" ALT= "text_alternativ_zonă"

SHAPE= "formă_zonă"

COORDS= "coord1, …,coord_finală">

</MAP>

Ex. Se mapeaza pe imaginea a doua bile 2 legaturi catre fisierele LPW3 Formatare.htm si LPW4 Legaturi.htm. Imaginea bilelor se gaseste in dosarul Obiecte si este continuta in fisierul 2balls150x150.jpg. Dimensiunea imaginii este de aprox. 150×150 pixeli, centrul primei bile are coordonatele 50,100 si raza 60 pixeli iar centrul celei de-a doua bile are coordonatele 110,80 si raza de 40 pixeli.

<area href= "LPW3 Formatare.htm" alt= "Doc Formatare"

shape= circle coords= "50,100,60">

<area href= "LPW5 Legaturi.htm" alt= "Doc Legaturi"

shape= circle coords= "110,80,40">

</map>

Eticheta <APPLET>

Scris în limbajul Java, un limbaj orientat obiect, un applet este un program de mică dimensiune. Fiind o aplicație independentă, applet-ul poate fi executat pe orice calculator legat la Internet și al cărui browser acceptă limbajul Java. Prima fază a creerii unui applet este compilarea programului sursă Java, obținându-se un fișier binar executabil cu extensia .class. Utilizatorii care doresc să folosească applet-uri fie le realizează singuri, fie le descarcă de pe Internet.

Pentru a insera applet-ul într-un document HTML se poate folosi fie elementul OBJECT fie elementul <APPLET>.

Iată în continuare atributele pe care le acceptă APPLET:

CODEBASE= URI; specifică adresa la care se află applet-ul, care trebuie să fie un subdirector al directorului în care se află documentul curent. În mod implicit, dacă acest atribut lipsește, se consideră că applet-ul se găsește la aceeași adresă cu a documentului curent;

CODE= șir_de _caractere; specifică numele fișierului în care se află applet-ul, în unele cazuri și calea către acesta;

NAME= șir_de_caractere; specifică un nume pentru applet, având posibilitatea de comunicare cu alte applet-uri din cadrul aceluiași document;

ARCHIVE= listă_de_adrese_URI; specifică o listă de adrese URI-uri, la care se află arhive ce conțin resurse care vor fi preîncărcate.

Elementul APPLET mai admite și alte atribute cum ar fi: ALT, ALIGN, HSPACE, VSPACE, HEIGHT sau WIDTH care au o semnificație ce a fost prezentată.

Să luăm un exemplu în care se dorește includerea într-o pagină Web a unui applet care să deseneze bule animate:

<APPLET CODE= "Bubbles.class" WIDTH= "500" HEIGHT= "500"

Un applet aflat în dosarul curent și care desenează bule animate

</APPLET>

Exemplul poate fi rescris utilizând elementul OBJECT (recomandat) și care este prezentat pe larg în Tema Inserarea Obiectelor:

<P><OBJECT CODETYPE= "application/java"

CLASSID= "java:Bubbles.class"

WIDTH= "500" HEIGHT= "500">

Un applet aflat în dosarul curent și care desenează bule animate

</OBJECT>

Applet-urile mai pot fi utilizate pentru a completa cu sunet și animație paginile Web, fără a fi nevoie să se utilizeze programe de vizualizare externe, sunetele și animația producându-se atunci când este încărcată pagina sau când se produce un eveniment (de regulă un clic într-o anumită zonă).

Uneori, pentru a executa un applet este necesar să fie transmise valori inițiale, ceea ce se face cu ajutorul elementului <PARAM>. Atributele pe care le admite acest element sunt următoarele:

NAME= șir_de_caractere; specifică numele parametrului

VALUETYPE= data | ref | object; specifică tipul valorii parametrului

– data: valoarea asociată parametrului este un șir de caractere (implicită)

– ref: valoarea asociată parametrului este o adresă (URI), la care se află valorile de inițializare ale acestuia

– object: valoarea asociată parametrului este identificatorul unui applet sau obiect, din același document HTML. Precizăm că identificatorul este valoarea asociată prin atributul ID al applet-lui.

VALUE= șir_de_caractere; specifică valoarea atribuită parametrului

TYPE= "tip_conținut"; specifică tipul valorilor parametrului (vezi <OBJECT>) de la adresa specificată de VALUETYPE dacă și numai dacă VALUETYPE este ref.

Ca un aspect pozitiv menționăm că applet-urile nu conțin viruși și nu permit accesul neautorizat la fișiere.

În exemplul ce urmează se poate vedea un applet care execută un buton "exploziv". Parametrul are numele "button_text", este de tip data (VALUETYPE) și are valoarea "Păzea!" care se afișează pe perioada cât se așteaptă apăsarea. După apăsare butonul "explodează", apoi își revine la forma inițială și se pune din nou în așteptare.

</APPLET>

Programarea Applet-urilor

Aceste programe sunt extensii ale clasei Applet, se editează într-un editor text (NotePad), se salvează cu extensia .java și se compilează in mediul Java, rezultând fișierul nume.class, care este chiar appletul; iată un exemplu de text sursă din fișierul UnApplet care afișează mesajul 'sunt un appletel':

import java.applet.Applet;

import java.awt.Graphics;

public class UnApplet extends Applet {

public void paint(Graphics g) {

g.drawString("sunt un appletel", 50, 25);

}

Inserarea obiectelor (Eticheta <OBJECT>)

Din dorința de a face paginile Web tot mai atractive și interesante, realizatorii au trecut la includerea celor mai variate elemente multimedia: audio, video, animație, applet-uri Java, etc., de îndată ce a fost posibil. Datorită dimensiunilor mari ale acestor elemente este nevoie de mult timp pentru a vizualiza o pagină, deci un inconvenient pentru utilizatori, care trebuie să fie informați despre acesta.

Elementul OBJECT este prezentat de către W3C ca o soluție unică de inserare a elementelor multimedia. Noțiunea de obiect este folosită în sens generic, acesta desemnând orice date ce urmează a fi inserate. Elementul OBJECT dă posibilitatea creatorilor de pagini Web să specifice obiectul pe care vor să-l insereze, parametrii necesari pentru inițializarea acestuia, precum și aplicația necesară în vederea manipulării lui.

Având o etichetă de început <OBJECT> și una de sfârșit </OBJECT>, acest element admite următoarele atribute:

CLASSID= URI; specifică adresa la care se află o implementare a obiectului

CODEBASE= URI; specifică adresa de bază, fiind folosită pentru rezolvarea adreselor URI relative asociate atributelor DATA, ARCHIVE și CLASSID. În mod implicit adresa de bază este adresa documentului curent.

CODETYPE= tip_conținut; specifică tipul codului ce va fi încărcat, specificat prin CLASSID. În cazul în care lipsește, se ia drept bun tipul specificat de atributul TYPE. Relativ la acest atribut, se va respecta sintaxa:

tip_conținut: tip/subtip; parametrii; un tip poate fi:

"image", "audio", "text", "video", "application",

sau poate fi o extensie de fișier reprezentată printr-un simbol;

simbolul poate fi: standard (anterior înregistrat ca simbol MIME – vezi RFC 2048)

sau format din caracterele X- sau x- urmate imediat de o extensie (simboluri neînregistrate sau în curs de înregistrare);

Subtipul poate fi tot o extensie ca mai sus.

Parametrii au forma: atribut= valoare.

Exemple:

"text/plain"; charset= "us-ascii"; tip_conținut implicit; tipul text, subtipul plain, parametrul charset cu valoarea us-ascii

"application/java-script"; folosit pentru a specifica o aplicație, iar subtipul indică natura aplicației: java-script

"image/jpg"; folosit pentru a specifica o imagine stocată în format jpg

DATA= URI; specifică adresa la care se află datele obiectului respectiv

TYPE= tip_conținut; specifică tipul datelor stabilite cu DATA

STANDBY= text; specifică mesajul ce urmează să fie vizualizat în timpul încărcării obiectului

ARCHIVE= listă_URI; specifică o listă de adrese la care se află resurse utile obiectului

ALIGN= TOP | MIDDLE | BOTTOM; specifică poziționarea obiectului față de textul documentului

BORDER= valoare; specifică grosimea conturului chenarului care va înconjura obiectul

HEIGHT= valoare; specifică înălțimea obiectului

WIDTH= valoare; specifică lățimea obiectului

HSPACE= valoare; dimensiunea spațiului la stânga și la dreapta obiectului

VSPACE= valoare; dimensiunea spațiului față de marginile sus-jos ale obiectului

USEMAP= adresă; specifică descrierea hărții grafice a imaginii

Exemple:

Un ceas animat

</OBJECT>

Se observă că eticheta <OBJECT> are ca și conținut un text alternativ pe care browser-ul îl afișează dacă nu poate transfera obiectul.

Pământul

</OBJECT>

Ca o observație importantă, este permisă declararea unor obiecte imbricate. Această proprietate se bazează pe faptul că browser-ul, dacă nu reușește transferarea obiectului, încearcă să transfere conținutul obiectului.

În exemplul următor browser-ul va încerca vizualizarea primului obiect, iar în caz de nereușită va încerca vizualizarea conținutului său:

<!– în caz contrar, încerc gif-ul –>

Peisaj

</OBJECT>

Exerciții:

Obiectiv1: Inserarea imaginilor (statice)

Creați un nou fișier Obiecte.htm (al 5-lea dupa Structura.htm, Formatarea.htm, Liste.htm si Legaturi.htm)

Stabiliți o imagine de fundal folosind atributul BACKGROUND al tag-ului BODY si un desen sau o imagine; extensii: .bmp, .jpg, .gif (vezi Tema Structura)

Stabiliți culorile legaturilor – vizitata, curenta etc. la alegere

Creați o legătura către documentul Legaturi.htm cu textul "Precedent" si cu TITLE="Legaturi" (vezi Tema Legaturi)

În documentul Legaturi.htm creați un link către documentul Obiecte cu textul "Următor" " si cu TITLE="Obiecte";

Introduceți in documentul Obiecte un salt catre site-ul de informații al Universitatii din Oradea: info.uoradea.ro, cu optiunea ca să se deschida intr-o fereastra noua;

Refaceți structura site-ului după modelul:

Structura

Formatarea Legaturi Obiecte

Liste

Introduce-ți o imagine cu dimensiunile originale si atribut ALT (un text care se afiseaza daca nu se poate afisa imaginea) utilizând tag-ul <IMG>

Modificați aceste dimensiuni intai in pixeli, apoi in procente

Modificați atributul ALIGN (alinierea fata de text)

Adăugați o bordura

Stabiliți spații in jurul imaginii (HSPACE, VSPACE);

Înlocuiți linkul "Precedent" (către Legaturi) cu un link catre documentul legaturi.htm pe imaginea sageatas.gif (săgeată la stânga)

Obiectiv2: Inserarea obiectelor dinamice

Adăugați o imagine în mișcare (.gif), de exemplu Pisic.gif, Soricel_misc.gif

Mapati pe imaginea a 4 bile (4balls340x464.jpg) 4 legături către cele 4 documente HTML realizate;

Adăugați appletul Lake.class (<APPLET>) știind că are parametrul <param name=image value="ODusk.gif">

Căutați pe net un alt applet cu care să înlocuiți Lake.class

Adăugați un obiect audio, .mp3 sau . wav (de exemplu obiectul RayCharles.mp3 sau Cantec.wav

Adăugați un obiect video, de exemplu OPEN.AVI, SCAN.AVI,

sau COGS.AVI;

Căutați pe net un alt obiect video pe care să-l adăugați;

Tag-uri studiate: <IMG>, <MAP>, <APPLET>, <OBJECT>

O posibilă rezolvare:

<HTML>

<HEAD>

<TITLE> Proiectare Web Tema 6-7 Obiecte in HTML </TITLE>

</HEAD>

Obiecte in HTML</H2>

<a href="LPW5 Legaturi.htm"><font face=arial size=3>Doc Precedent</A>

<a href="LPW8 Tabele.htm" title="LPW8 Tabele">Doc Urmator</A>

<a href="http://info.uoradea.ro" target="_blank">Site-ul de informare al
Universitatii</A>

<p>

In loc de o culoare de fundal se poate folosi si o imagine ca atribut

BACKGROUND al tag-ului BODY

<p>

De asemenea se pot insera si obiecte folosind tag-ul IMG care admite atributele SRC (adresa, este obligatorie), HEIGH (inaltimea) si WIDTH (latimea) masurate in pixeli sau procente; aceste atribute se adauga numai daca dorim sa modificam dimensiunile originale; Imaginea următoare este la dimensiunea originala, aliniata față de text "top";

</DIV>

Imaginea de mai jos se afiseaza la 20% din spatiul total pe orizontala

respectiv verticala si are bordura de 5 pixeli; alinierea este bottom:

Se pot insera si legaturi pe imagini ca mai jos:<br>

<br>

<p><font color=magenta> Imaginea de mai jos este animata, cu inaltimea de 100 si latimea de 200 de pixeli; nu a fost precizata alinierea, deci browserul a luat implicitul "top"; daca nu se poate afisa va aparea textul "Un pisic forțos"

<br>

In imaginea de mai jos avem doua mapari, bila din stanga face un salt

spre Doc Formatare /fereastra noua) iar bila din dreapta spre Doc Legaturi;
latime=inaltime= 150 pixeli

<area href="LPW5 Legaturi.htm" alt="Doc Legaturi"

shape=circle coords="110,80,40">

</map>

<br>

Iar acestea sunt applet-uri java:

</applet>

<br>

In imaginea de mai jos avem un obiect de tip audio cu extensia .mp3

Ce pacat ca nu se aude!

</object>

<br>

<p>

In imaginea de mai jos avem un obiect de tip video cu extensia .avi

Ce pacat ca nu se vede!

</object>

</BODY>

</HTML>

Notițe

Inserarea Tabelelor

Tabele simple <TABLE>, <TR>, <TH>, <TD>

Tabelele permit organizarea informațiilor, repartizându-le în celule structurate pe linii și coloane, constituind astfel un instrument foarte util.

Elementul folosit pentru inserarea unui tabel într-un document HTML este <TABLE>, eticheta de început și </TABLE> eticheta de sfârșit.

Principalele atribute admise de TABLE sunt:

SUMMARY= text; specifică o descriere a structurii tabelului și a rolului acestuia. Descrierea nu este vizualizată în pagina Web, dar poate fi folosită acolo unde browser-ul o permite, la redarea audio a informațiilor din pagină.

WIDTH= valoare; specifică lățimea tabelului și poate fi dată în pixeli sau procentual din lățimea de vizualizare a documentului pe ecranul utilizatorului

HEIGHT= valoare; specifică înălțimea tabelului, în pixeli

ALIGN= LEFT | CENTER | RIGHT; specifică modul de aliniere al tabelului în cadrul documentului

BORDER= valoare; specifică grosimea liniei chenarului (în pixeli)

COLS= valoare; numărul de coloane al tabelului

CELLSPACING= valoare; spațiul dintre celule precum și spațiul dintre celule și marginea tabelului

CELLPADDING= valoare; spațiul dintre conținutul și chenarul celulei. Atunci când valoarea este exprimată în pixeli, aceasta reprezintă distanțele dintre conținutul celulei și latura stânga, dreapta, sus și jos. Când valoarea este exprimată în procente, spațiul se calculează raportat la lățimea celulei pentru stânga, dreapta și la înălțimea celulei pentru sus și jos (vezi figura următoare).

Tabelul este alcătuit din linii, specificarea unei linii realizându-se cu elementul TR (Table Row), unde se face descrierea celulelor de pe o linie, între etichetele <TR> și </TR> (eticheta de sfârșit este opțională).

Celulele care alcătuiesc o linie sunt specificate cu elementul TH (Table Header), pentru celulele din antetul tabelului, respectiv cu TD (Table Data) pentru celulele care conțin informația. Iată un prim exemplu:

<TH> Nr. crt.

<TH> Numele, Prenumele

<TH> Profesia

<TD> 1.

<TD> Ion Geogescu

<TD> inginer

<TD> 2.

<TD> Sandu Marin

<TD> electrician

</TABLE>

Pe ecran:

Elementele TH și TD admit ca atribute principale, următoarele:

ROWSPAN= număr_de_linii; specifică numărul de linii acoperite de celula respectivă. Valoarea 0 (zero) exprimă faptul că celula acoperă toate liniile, de la cea curentă până la ultima din tabel, iar valoarea implicită a atributului este valoarea 1.

COLSPAN= număr_de_coloane; specifică numărul de coloane acoperite de celula respectivă. Valoarea 0 (zero) exprimă faptul că celula acoperă toate coloanele, de la cea curentă până la ultima din tabel, iar valoarea implicită a atributului este valoarea 1.

WIDTH= valoare; specifică lățimea celulei, în pixeli

HEIGHT= valoare; specifică înălțimea celulei, în pixeli

Prezentăm în continuare un exemplu ilustrativ:

<TH ROWSPAN= 2> Nr. crt.

<TH ROWSPAN= 2> Nume, prenume

<TH COLSPAN= 2> Salar

<TH> brut

<TH> net

<TR>

<TD> 1.

<TD> Ionut Popescu

<TD> 3.600.000

<TD> 2.450.000

<TR>

<TD> 2.

<TD> Vasile Goldis

<TD> 3.100.000

<TD> 2.270.000

</TABLE>

Pe ecran:

Tabele speciale

Exemplul ce urmează prezintă un tabel în care nu toate celulele sunt completate:

<TR>

<TH COLSPAN= 7 BGCOLOR= #00AA00> <I> SPECTACOLE </I>

<TR>

<TH WIDTH= 46> MARȚI

<TH WIDTH= 70> MIERCURI

<TH WIDTH= 40> JOI

<TH WIDTH= 90> VINERI

<TH WIDTH= 64> SÂMBĂTĂ

<TH WIDTH= 70> DUMINICĂ

<TR>

<TH ALIGN= CENTER> 17-19

<TD> Teatru

<TD> Concert

<TD>

<TD> Teatru pt. copii

<TR>

<TH ALIGN= CENTER> 19-21

<TD> Teatru

<TD> Filarmonica

<TD> Teatru

<TD>

<TD> Teatru

<TD> Concert

</TABLE>

Pe ecran:

Se poate observa că alinierea implicită din celulele antet este CENTER,

Se poate observa că alinierea implicită din celulele antet este CENTER, iar din celulele de date este LEFT. Totodată, se poate observa că odată fixată dimensiunea explicită pentru o celulă, aceasta este urmată și se transmite pentru toate celulele de pe coloana respectivă.

Un alt exemplu ne prezintă rezultatele obținute prin folosirea atributelor CELLPADDING și CELLSPACING:

<TABLE BORDER= 4 COLS= 4 WIDTH= "25%"

CELLPADDING= 4 CELLSPACING= 12>

<TR>

<TH> 1

<TH> 2

<TH> 3

<TH> 4

<TR>

<TH> A

<TH> B

<TH> C

<TH> D

</TABLE>

Pe ecran:

Imagini în tabele

De foarte multe ori tabelele sunt folosite pentru aranjarea imaginilor în pagină, fără vizualizarea chenarului, așa cum se poate vedea în exemplul următor:

<TR>

SĂRBĂTORILE DE IARNĂ

</FONT> </I> </B> </CENTER>

<TR>

Nu se țin cursuri!

</CENTER> </B> </I> </FONT>

</TR>

</TABLE>

Pe ecran:

Bibliografie

Gugoiu Teodor, HTML, XHTML, CSS si XML prin exemple, Editura Teora, 2005

Sabin Buraga, Mihaela Brut, Prezentari multimedia pe Web. Limbajele XHTML+TIME si SMIL, Editura Polirom, 2004

Sorin Tudor, Hutanu Vlad, Crearea si programarea paginilor Web: HTML + CSS + JavaScript + Photoshop + PHP, Editura L&S Soft, Bucuresti, 2003

Mcfedries Paul, Crearea paginilor web, Editura B.I.C. ALL, Bucuresti, 2003

Cojocaru Silviu Stefan, OK! Un site Web la indemana tuturor! Cunostintele si aplicatiile de care aveti nevoie pentru a-l concepe/crea/publica/promova, Editura Compania, Bucuresti, 2003

Acu Calin Ioan, Optimizarea paginilor Web, Editura Polirom, Iasi, 2003

Tanasă, Ștefan, Cristian Olaru, Java de la 0 la expert, Editura Polirom, Iași, 2003

Gugoiu, Teodor, HTML prin exemple, Editura Teora, Bucuresti, 2002

Buraga, Sabin, Proiectare situri Web: Design și funcționalitate, Editura Polirom, Iași, 2002

Snell, Ned, Crearea paginilor Web, Editura Teora, Bucuresti, 2002

Popovici Diana, Popovici Ovidiu, Web Design sau Proiectarea paginilor Web, Editura Universității din Oradea, 2002

Buraga, Sabin, Tehnologii Web, Editura Matrix Rom, București, 2001

Cerchez Emanuela, Internet. Utilzarea rețelei Internet. Proiectarea paginilor Web, Editura Polirom, Iași, 2000

Văduva Călin M., Programarea în Java, Ed. Albastră, Cluj-Napoca, 1999

***, Site oficial World-Wide Web Consortium: http://www.w3.org

***, HyperText Markup Language (HTML) Home Page:

http://www.w3.org/MarkUp/

Refsnes Data, W3Schools: http://www.w3schools.com/default.asp

***, Site oficial Java: http://java.sun.com

***, http://ro.wikipedia.org/wiki

***, http://en.wikipedia.org/wiki

Notițe

Noțiuni avansate de HTML

Utilizarea Cadrelor

Eticheta <FRAMESET>

Folosirea cadrelor, numite frames, ne dă posibilitatea structurării în pagină a informației, prin împărțirea ferestrei browser-ului în mai multe zone dreptunghiulare.

În plus față de tabele, în cadre se pot vizualiza chiar documente HTML. Posibilitatea de a utiliza cadrele a apărut doar la varianta 4.0 a limbajului HTML, iar la nivelul browserelor, pentru Internet Explorer de la varianta 3.0 și pentru Netscape Navigator începând de la varianta 2.0.

Iată un exemplu în care fereastra browser-ului este împărțită în 3 cadre:

titlul CURS DE UTILIZAREA CALCULATOARELOR, permanent vizibil

meniu alcătuit din 12 link-uri, fiecare deschizând în zona III un capitol al cursului sau o lucrare de laborator

zona în care se face vizualizarea documentelor, momentan este afișată pagina inițială (pagina de bun-venit);

Atunci când dorim să lucrăm cu cadre, este necesar să creăm un document de tip FRAMESET, care va defini împărțirea în cadre a ferestrei browser-ului și care va avea următoarea structură:

<HTML>

<HEAD>

…

</HEAD>

…

</FRAMESET>

</HTML>

Fără să conțină elementul BODY, descrierea cadrelor se face cu elementul FRAMESET, care admite următoarele atribute:

ROWS= listă_dimensiuni; specifică dimensiunile cadrelor orizontale, care se poate face în pixeli sau în procente pornind de la dimensiunea ferestrei. În cazul în care o dimensiune lipsește, fiind înlocuită cu caracterul *, aceasta înseamnă că dimensiunea corespunde spațiului rămas disponibil în fereastră.

COLS= listă_dimensiuni; specifică dimensiunile cadrelor verticale.

În exemplul următor, vom utiliza ambele atribute, pentru o rețea de cadre, care conține:

– 3 rânduri, primul de 100 pixeli, al doilea 50% din spațiul disponibil al ferestrei în care se afișează pagina (deci de dimensiune variabilă), iar al treilea cu dimensiunea rămasă disponibilă (tot variabilă);

– 3 coloane, prima și ultima de 60 de pixeli iar cea din mijloc cu dimesiunea rămasă:

Ex.

…

</FRAMESET>

Efect:

Ca o observație importantă, elementele FRAMESET pot fi deci imbricate.

Eticheta <FRAME>

Pentru a specifica aspectul și conținutul fiecărui cadru se utilizează elementul FRAME, care admite atributele:

NAME= șir_de_caractere; asociază un nume cadrului respectiv și poate fi folosit ca țintă pentru diverse link-uri

SRC= URL; specifică adresa documentului care va fi deschis inițial în cadru

NORESIZE; prezența acestui atribut împiedică pe utilizator să modifice dimensiunea cadrului prin drag-and-drop, ceea ce altminteri este permis.

LONGDESC= URL; este util pentru browser-ele care nu pot vizualiza cadre; atributul specifică adresa la care se află o descriere a cadrului

SCROLLING= AUTO | YES | NO; specifică modul de defilare a informației. Acest atribut admite următoarele valori:

AUTO; barele de defilare sunt vizualizate numai când este nevoie și aceasta este valoarea implicită

YES; barele de defilare sunt permanent vizibile

NO; barele de defilare nu sunt vizualizate

MARGINWIDTH= număr_de_pixeli; specifică spațiul dintre conținutul cadrului și marginile stânga – dreapta. Valoarea va fi cel puțin 1, valoarea implicită fiind dictată de browser

MARGINHEIGHT= număr_de_pixeli; specifică spațiul dintre conținutul cadrului și marginile sus – jos. Valoarea va fi cel puțin 1, valoarea implicită fiind dictată de browser

FRAMEBORDER= 1 | 0; specifică separarea cadrului prin linii de contur, față de cadrele adiacente. Valoarea implicită este 1, iar valoarea 0 indică lipsa unei separări prin linii față de cadrele adiacente.

Prezentăm în continuare un exemplu, în care primul rând are 60 de pixeli, al doilea dimensiunea care rămâne disponibilă; al doilea rând este îmărți la în două coloane, prima coloană de 220 de pixeli, iar a doua coloană cât rămâne; în primul rând se deschide documentul "titlu.htm", în prima coloană a celui de-al doile rând se deschide documentul "menu.htm", iar în a doua coloană home.htm; în plus, acest cadru poartă numele "DREAPTA":

<FRAME SRC= "menu.htm"

</FRAMESET>

Pe ecran:

Tabele in cadre

Cu ajutorul atributului SRC fiecărui cadru îi este asociat un document HTML, care va fi inițial încărcat în cadru.

Cadrul cu documentul menu.htm conține un meniu, cu link-uri spre capitolele, respectiv lucrările cursului. Cadrul din dreapta, căruia i s-a asociat cu ajutorul atributului NAME numele "DREAPTA", va fi utilizat ca țintă- TARGET, pentru link-urile din "menu.htm".

Iată în continuare descrierea documentului menu.htm:

<HTML>

<HEAD>

</HEAD>

<BODY>

<P> e-mail

<A HREF= mailto:[anonimizat]> [anonimizat] </A>

<P> <P>

<tr>

<th> Curs

<th> Lucrari practice

<tr>

<tr>

<tr>

<tr>

<tr>

<tr>

</Table></ul>

</BODY>

</HTML>

Deoarece fiecare link din documentul menu.htm folosește atributul TARGET, având valoarea DREAPTA, prin activarea link-ului respectiv documentul asociat va fi deschis în cadrul numit "DREAPTA". În cazul în care toate link-urile au aceeași țintă-cadru este mai ușor să utilizăm elementul BASE= URL, într-o scriere de forma:

<HTML>

<HEAD>

</HEAD>

Vom putea întâlni trei situații:

în descrierea link-urilor NU este specificată o valoare pentru TARGET, iar în antet apare BASE (cu specificarea unei valori pt. TARGET), atunci documentul destinație va fi deschis în cadrul indicat de BASE

în descrierea link-ului este specificată o valoare pentru TARGET, atunci documentul este deschis în cadrul indicat de link (indiferent de BASE)

nici în descrierea link-ului și nici în elementul BASE nu este specificată o valoare pentru TARGET, atunci documentul destinație va fi deschis în același cadru cu cel care conține link-ul.

Pentru delimitarea unor grupuri de cuvinte sau capitole se folosește elementul HR – horizontal ruler, care este o linie orizontală, elementul admițând următoarele atribute:

ALIGN= LEFT | CENTER | RIGHT; specifică modul de aliniere

SIZE= număr_de_pixeli; specifică grosimea liniei

WIDTH= valoare; specifică lungimea liniei, în cazul implicit lungimea este 100% din lățimea zonei de vizualizare

NOSHADE; specifică faptul că linia trasată este fără umbră (vezi tema Formatarea la nivel de Paragraf).

Se poate observa că în cadrul numit DREAPTA există bara de defilare verticală, din cauză că documentul HTML vizualizat în acest cadru nu încape în zona corespunzătoare.

În situația în care un browser nu acceptă cadre, putem utiliza elementul NOFRAME, conținutul acestuia fiind vizualizat de către browser, cum se poate vedea în exemplul de mai jos:

<A HREF= "fără.htm"> În acest loc

este posibilă vizualizarea fără cadre </A>

</NOFRAMES>

</FRAMESET>

Folosirea cadrelor inline

Putând fi inserate în cadrul unui bloc, cadrele inline, foarte asemănătoare celulelor unui tabel, conțin un întreg document HTML în fiecare celulă. Elementul cu ajutorul căruia se inserează un cadru inline este IFRAME. Atributele admise de acesta sunt: SRC, NAME, LONGDESC, MARGINWIDTH, MARGINHEIGHT, FRAMEBORDER, SCROLLING, pe care le găsim și la elementul FRAME. Elementul IFRAME admite și atributele:

ALIGN; specifică modul de aliniere al cadrului

HEIGHT; specifică înălțimea cadrului

WIDTH; specifică lățimea cadrului

Pentru exemplificare, vom insera într-un document un cadru inline, ce conține inițial documentul biblio.htm. Documentul nostru conține și alte doua link-uri care țintesc același cadru. Urmarea este că la activarea unuia dintre cele două link-uri, documentul destinație asociat link-ului respectiv va fi încărcat în cadrul inline; adică putem încărca succesiv două (mai multe) documente în același cadru (inline):

Variantă demonstrativă pentru Cadru inline:

<IFRAME NAME= "inline" SRC= "biblio.htm"

FRAMEBORDER= 1 ALIGN= BOTTOM

HEIGHT= 250 WIDTH= 250

</IFRAME>

<P> Cadrul conține bibliografia Cap.1 din CURS DE UTILIZAREA CALCULATOARELOR.

<P> Apăsați pentru:

<A HREF= "biblio cap2.htm" TARGET= "inline"> bibliografia Cap.2</A>

sau

<A HREF= "biblio cap3.htm" TARGET= "inline"> bibliografia Cap.3</A>

Pe ecran:

Notițe

Folosirea Formularelor

Scopul utilizării formularelor este de a crea pagini Web interactive, adică de apermite comunicarea bidirecțională dintre proprietarul site-ului și utilizatorul (vizitatorul) acestuia. Cu ajutorul unor elemente speciale, numite elemente de control, ca de exemplu meniuri, câmpuri text sau butoane de validare, vizitatorul paginii poate comunica date serverului care găzduiește respectiva pagină Web .

Un formular poate fi inserat într-un document HTML prin folosirea elementului FORM. Acesta necesită o etichetă de început <FORM> și una de sfârșit </FORM>, între care sunt descrise elementele de control, precum și alte elemente HTML, cum ar fi link-uri, texte, grafică.

Iată în continuare prezentarea elementelor de control din formulare:

meniuri – prezintă utilizatorului o listă de opțiuni care se introduc cu ajutorul elementului SELECT, prin OPTGROUP și OPTION

câmpuri text – facilitează introducerea de către utilizator a unui text care poate fi format dintr-o linie, folosind elementul INPUT, sau din mai multe linii, folosind elementul TEXTAREA.

butoane de validare – CHECKBOXES – dau posibilitatea utilizatorului să selecteze anumite opțiuni, prin activarea sau dezactivarea butoanelor asociate, includerea în formular putându-se face cu ajutorul elementului INPUT.

butoane de comandă – care sunt de trei tipuri și pot fi incluse în formular cu ajutorul elementelor BUTTON și INPUT:

Submit – transmit informațiile înscrise în formular spre server

Reset – resetează formularul aducând toate câmpurile acestuia la valorile inițiale

Push – comandă executarea unei anumite acțiuni

butoane radio – dau posibilitatea utilizatorului să selecteze o anumită opțiune, care însă le exclude pe celelalte. Elementul folosit pentru includere în formular este INPUT.

elemente de control ascunse – hidden – fără să fie vizualizate de către browser, aceste elemente permit transmiterea concomitent cu informațiile înscrise în formular și a altor informații considerate utile. Elementul utilizat pentru includere în formular este INPUT.

Elementul <INPUT>

Această etichetă dă posibilitatea introducerii unui rând de text, în diferite condiții, în funcție de anumite elemente de control. El nu necesită etichetă de închidere iar atributele pe care le admite sunt următoarele:

NAME= șir_de_caractere; asociază un nume elementului de control, care va putea fi folosit de programele de procesare a informației culese;

VALUE= șir_de_caractere; specifică valoarea inițială a elementului de control. În afară de cazul în care tipul specificat este RADIO, acest atribut este opțional;

| SUBMIT | RESET | IMAGE | HIDDEN; specifică tipul elementului de control, valoarea implicită fiind TEXT.

Prezentăm în continuare câteva exemple ilustrative:

– butoane radio (care se exclud):

<P> Cunoasteti calculatorul?

<P> <INPUT TYPE= RADIO VALUE= "D" CHECKED> Da

<P> <INPUT TYPE= RADIO VALUE= "N"> Nu

Pe ecran:

– casete de validare (se pot alege mai multe):

<P> <I> Dezvoltarea durabila presupune … </I>

<BR>

… gestionarea ecologica a deseurilor <BR>

… gasirea unor resurse nepoluante de energie <BR>

… reducerea emisiilor de noxe si a deseurilor <BR>

Pe ecran:

– text și parolă:

<P> <I> Nume utilizator </I> &nbsp

<P> <I> Parola </I> &nbsp &nbsp

<INPUT TYPE= PASSWORD NAME= "pass"

Pe ecran:

Cu ajutorul tipului PASSWORD am reușit inserarea în formular a unui câmp text cu diferența că textul introdus nu va fi vizualizat, fiind înlocuit cu o serie de asteriscuri.

– pentru inserarea butoanelor de comandă de tip SUBMIT (accept), RESET (inițializare) și PUSH (apăsare) se folosesc tipurile de mai jos:

<P>

Pe ecran:

– atunci când dorim să specificăm o imagine pentru butonul SUBMIT, vom utiliza tipul IMAGE, astfel:

<P> <I> Incepe </I>

Pe ecran:

– putem să specificăm un fișier ce va fi transmis prin intermediul formularului cu tipul FILE, așa cum se poate vedea în exemplul următor:

Pe ecran:

unde SIZE= valoare, indică dimensiunea elementului de control (în cazul nostru lungimea ferestrei, adică a numelui fișierului). De regulă această dimensiune se specifică în pixeli, iar atunci când tipul elementului este FILE, PASSWORDS sau TEXT se interpretează ca număr de caractere.

Alte atribute:

MAXLENGHT= valoare; specifică numărul maxim de caractere, ce poate fi introdus de utilizator și care în mod normal este mai mic decât SIZE, lungimea câmpului în care textul este introdus;

CHECKED; specifică activarea elementului de control respectiv și se folosește pentru tipul RADIO și CHECKBOX;

SRC= URL; specifică adresa fișierului ce conține imaginea care reprezintă butonul folosit ca element de control și se utilizează la elementul IMAGE.

Elementul <SELECT>

Acesta este folosit pentru a introduce într-un formular diferite meniuri. Atributele admise de elementul SELECT sunt următoarele:

NAME= șir_de_caractere; asociază un nume elementului de control

SIZE= valoare; specifică numărul de opțiuni vizibile în fereastră

MULTIPLE; oferă posibilitatea selectării mai multor opțiuni din meniu.

Pentru introducerea opțiunilor din care se constituie meniul, se folosește elementul OPTION, care are ca atribute:

SELECTED; specifică selectarea inițială a acestei opțiuni

LABEL= șir_de_caractere; specifică o denumire scurtă pentru respectiva opțiune – o etichetă

VALUE= șir_de_caractere; specifică valoarea inițială a elementului de control, care are ca valoare implicită tocmai conținutul elementului OPTION.

Prezentăm în continuare un exemplu de descriere a unui meniu cu patru opțiuni, într-o fereastră derulantă cu 3 opțiuni vizibile:

<OPTION VALUE= "Oradea"> Oradea, str. M.I. Antonescu nr. 2 </OPTION>

<OPTION VALUE= "Cluj"> Cluj Napoca, Str. Arges nr. 71

</OPTION>

<OPTION SELECTED VALUE= "Bihor"> Bihor, Alparea nr. 23

</OPTION>

<OPTION> Bucuresti, P-ta Amzei nr. 34 </OPTION>

</SELECT>

Pe ecran:

Ținând cont că valoarea implicită a atributului SIZE este 1, dacă nu specificam SIZE= 3, atunci pe ecran am fi avut:

Dacă acum am folosi atributul MULTIPLE și am da comanda SELECTED și pentru cea de a patra opțiune din meniu, atunci am vedea pe ecran:

Elementul <BUTTON>

Acest element admite eticheta de început <BUTTON> și eticheta de sfârșit </BUTTON>, între care apare conținutul elementului. Acest conținut va fi vizualizat pe butonul creat, aceasta și în cazul în care elementul BUTTON este o imagine.

Atributele principale ale elementului BUTTON sunt similare și au aceeași semnificație cu ale elementului INPUT, adică: NAME, VALUE și TYPE, care admite valorile SUBMIT, RESET, BUTTON.

Elementul <TEXTAREA>

Acesta permite inserarea unui text format din mai multe linii. Atributele principale pe care le admite sunt:

ROWS= număr_de_linii; specifică numărul de linii vizibile din textul respectiv

COLS= număr_de_caractere; specifică numărul maxim de caractere admis pe linie

Presupunem că proiectantul dorește inserarea în formular a unui câmp de text de 9 de linii și 42 de coloane, pentru a da utilizatorului posibilitatea de a introduce un text, de exemplu o părere. Pentru a preveni situațiile de depășire ale condițiilor impuse, respectiv număr de caractere și număr de linii, ceea ce se poate întâmpla cu ușurință, deoarece utilizatorul introduce liber textul, câmpul de text va fi prevăzut cu o bară de defilare verticală și una orizontală dacă este cazul, ca în exemplul de mai jos:

Completati Curriculum vitae dupa modelul anexat!

</TEXTAREA>

Pe ecran:

Este necesar ca pentru a facilita navigarea printre elementele de control ale unui formular, să dăm utilizatorului posibilitatea de a utiliza tasta Tab și de a selecta după dorință folosind o combinație de taste.

Pentru aceasta, cel care proiectează formularul, trebuie să stabilească ordinea de parcurgere a elementelor de control, ceea ce se realizează printr-un număr de ordine dat fiecărui element de control, cu ajutorul atributului:

TABINDEX= valoare.

Numerele de ordine asociate sunt parcurse prin acționarea tastei Tab, de la numărul de ordine minim, către cel maxim, fără obligația de a fi consecutive și putând fi cuprinse între 0 și 32767. În cazul în care același număr este asociat mai multor elemente de control, ele sunt parcurse în ordinea de descriere din documentul HTML.

Pentru a folosi o combinație de taste care va fi asociată unui element de control, soluția este dată de atributul:

ACCESSKEY= caracter; în acest caz se va acționa asupra caracterului asociat în combinație cu tasta Alt.

Comunicarea datelor introduse într-un formular

Schimbul de informații de la utilizator la server se poate face utilizând elementul FORM și apoi SUBMIT; transmiterea are loc sub forma unor perechi nume-câmp; valoare; care vor fi preluate prin intermediul programului CGI – Common Gateway Interface.

Cu ajutorul atributului ACTION, se va face specificarea programului CGI, aflat la adresa URL, sau o altă acțiune cum ar fi trimiterea informației prin poșta electronică:

ACTION= URL

Modul de transfer al informațiilor către server este comandat de atributul METHOD, care poate lua valoarea GET sau POST și urmează procedura:

GET; informațiile sunt atașate adresei URL care specifică programul de prelucrare, separate prin ?, după care noul URL va fi transmis către programul CGI;

POST; informațiile introduse de utilizator sunt incluse în corpul formularului și transmise către server.

Prezentăm în continuare un exemplu de completare a unui CV pe formular impus:

<P ALIGN= CENTER> <FONT= 5>Curriculum vitae</P></FONT>

<FORM METHOD= POST

ACTION= "/cgi-ram/x.cgi">

Prenume <INPUT TYPE= TEXT NAME= "Prenume">

<P> Adresa <INPUT TYPE= TEXT NAME= "Adresa">

Telefon <INPUT TYPE= TEXT NAME= "Telefon">

<P> Sexul &nbsp &nbsp <INPUT TYPE= RADIO VALUE= "M"> M

&nbsp &nbsp <INPUT TYPE= RADIO VALUE= "F" CHECKED> F

<P> Situatia familiala

<BR>

Casatorit <BR>

Necasatorit <BR>

Divortat <BR>

<P> Aptitudini:

<OPTION> Inteligenta </OPTION>

<OPTION> Corectitudine </OPTION>

<OPTION> Punctualitate </OPTION>

<OPTION SELECTED> Indemanare </OPTION>

<OPTION SELECTED> Rabdare </OPTION>

</SELECT>

&nbsp &nbsp <INPUT TYPE= RESET VALUE= "Renunt">

&nbsp &nbsp <INPUT TYPE= BUTTON VALUE= "Ajutor">

</FORM>

Pe ecran:

Bibliografie

Buraga Sabin, Proiectarea siturilor Web. Design și funcționalitate, (ediția a doua), Editura Polirom, Iași, 2005