Laborator HTML

Introducere in tehnologii Web

1. Reteaua Internet. 2. World Wide Web (www). Pagini Web. 3. HTML. 4. Tema proiect.

1. Reteaua Internet

1. 1 Scurt istoric In 1969 apare prima retea cu comutare de pachete, denumita ARPAnet (Advanced

Research Projects Agency network), fondata de Pentagon, punctul de start al retelei Internet actuale.

In anul 1980, NSF (National Science Foundation) reproiecteaza modelul ARPAnet, transformindu-l intr-o retea moderna, arhitectura primind numele de Internet, interconectind la inceput super-calculatoare guvernamentale, institutii academice si centre de cercetare si utilizind o suita standard de protocoale de comunicatie reprezentata de TCP/IP. In anii care urmeaza, Internetul se dezvolta spectaculos, intr-o maniera exponentiala.

Serviciile traditionale ale Internetului se rezumau in anii '80 la posta electronica (e-mail), accesul la grupuri de stiri (usenet), conectare la distanta (telnet) si transfer de fisiere (FTP). In 1990-1991 apar doua noi servicii: Archie utilizat pentru cautarea fisierelor pe Internet si Gopher, structura de meniuri ierarhizate facilitind organizarea documentelor pe Internet.

Unul dintre cele mai importante si de succes servicii ale Internetului, World Wide Web-ul - sau, mai pe scurt, Web ori spatiul WWW - a fost creat la CERN (Centrul European de Cercetari Nucleare de la Geneva) în anul 1989 de catre fizicienii Tim Berners-Lee, Robert Caillau si echipa lor, cu scopul de a avea acces mai usor la informatiile tehnice ale manualelor de utilizare a calculatoarelor. Data de 12 noiembrie 1990 se considera a fi ziua de nastere oficiala a Web-ului. Dezvoltarea ulterioara a sistemului a fost facilitata de programul Mosaic, sub mediul X Window, foarte simplu de folosit si poseda facilitati multimedia, de la NCSA (Centrul National pentru aplicatiile supercalculatoarelor, Universitatea Urbana-Champaign) furnizat gratuit pe Internet începind din 1993.

Web-ul reprezinta un sistem de distributie locala sau globala a informatiilor hipermedia. Din punct de vedere tehnic, spatiul Web pune la dispozitie un sistem global si standardizat de comunicare multimedia, informatiile fiind organizate asociativ si fiind distribuite in functie de cererile utilizatorilor, functionind conform modelului client-server. Web-ul, cu toata dezvoltarea lui spectaculoasa, nu trebuie confundat cu Internetul, ci poate fi vazut drept cea mai dinamica si "minunata" componenta software a acestuia, neputind exista insa fara infrastructura hardware a retelelor mondiale interconectate.

Cresterea masiva a numarului de servicii si produse Web este data de utilizarea unui tot mai bogat continut informational: imagini, video si sunet.Combinarea si integrarea acestor medii formeaza multimedia, utilizata pe scara larga in reprezentarea si interschimbarea informatiilor.

Autoritatile care se ocupa de reteaua INTERNET: - administrativ: ISOC (Internet SOCiety) - tehnic: IETF (Internet Engineering and Task Force) - furnizarea de IP-uri(adrese), informatii si statistici: InterNIC

Laborator HTML

In ROMANIA serviciile de Internet sunt asigurate de Institutul Central de Informatica (ICI) si ROMTELECOM. Costurile implicate de extinderea retelei in tara noastra sunt suportate la nivel regional si local, astfel ca legatura dintre ICI si INTERNET este asigurata din fonduri guvernamentale, insa fiecare abonat suporta costurile liniei telefonice inchiriate sau comutate, prin care se aboneaza la nodul ICI.

Cu alte cuvinte o definitie a Internetului ar trebui sa cuprinda urmatoarele: - mediu informational si de calcul, cu bogate resurse si servicii - mediu de comunicare, de schimb al ideilor, de instruire dar si de autoinstruire - mediu de partajare a informatiilor - educare, e-learning = invatamant la distanta - mediu al comertului electronic si e-business = magazine virtuale - divertisment - pe Net poti participa la licitatii, poti cauta un job, poti face bani navigand sau citind

emailuri

Arhitectura INTERNET de tip client/server permite oricarei persoane fizice sau juridice sa utilizeze instrumentele informatice in doua directii opuse, dar complementare: ca sistem informational intern si ca instrument de comunicare externa.

Arhitectura client/server consta in faptul ca un calculator ce navigheaza pe Internet cu ajutorul unui browser este client-el utilizeaza resursele puse la dispozitie, partajate de calculatoarele server. De retinut: serverele sunt calculatoare performante ce functioneaza pe baza unui soft special si ele pot fi pe de o parte server dar pot rula ca si client. Astfel un browser de web este CLIENT.

1. 2 Functionarea Internetului Transmisia datelor in INTERNET se supune unui set de reguli, incluse in protocoalele

TCP/IP (Transmission Control Protocol / Internet Protocol). Principalele caracteristici ale acestora sunt:

- Standardele de protocoale deschise , disponibile gratuit si independente de tipul calculatorului sau a sistemului de operare utilizat;

- Independenta fata de tipul relelei, ceea ce perrnite interconectarea unor retele de tipuri diferite;

- Protocoale de inalt nivel standardizate, serviciile fiind disponibile in toata lumea. Adresarea

Calculatoarea care sunt conectate la INTERNET poarta denumirea de hosturi si sunt identificate unic printr-o adresa si un nume. O adresa INTERNET este reprezentata pe 32 de biti. In mod uzual, o adresa de retea se regaseste intr-un format zecimal cu punct: nl.n2.n3.n.4 Prin aceasta notatie, in fiecare din cei patru octeti se reprezinta o valoare cuprinsa intre 0 si 255.

Reteaua este partajata in domenii si subdomenii sub forma unei structuri arborescente. Avand in vedere aceasta partajare, numele unui calculator (host) se constituie dupa urmatorul model: nume host . nume subdomeniu . nume domeniu Exemple: ccp.pub.ro, amcsit.ro, fin.ase.ro, snr.ro, etc.

1. 3 Protocolul TCP/IP TCP/IP a fost lansat in anul 1980 de Departamentul Apararii al SUA in proiectul

DARPA (Defence Advanced Research Project Agency). Ulterior acesta a fost integrat in

Laborator HTML

sistemul de operare UNIX, permitand astfel interconectarea calculatoarelor in reteaua INTERNET.

TCP/IP este organizat patru nivele : - Aplicatie (FTP, TELNET, WEB, SMTP) - Transport (TCP, UDP)

- Internet (IP) - Acces Acces Din punct de vedere al conexiunilor fizice exista trei posibilitati: reteaua telefonica,

legaturi pe linii numerice si linii specializate. Reteaua telefonica ajunge pana la un debit de 33600 biti-s, ceea ce inseamna ca un fisier de 1Mb se poate transfera teoretic in 8-10 minute, iar un CD de 640 Mb, in 4 zile. Deoarece pe liniile telefonice informatiile sunt analogice, iar in calculator informatiile sunt reprezentate prin semnale digitale, este necesar un modulator/demudulator (modem) care sa realizeze conversia. Legaturile pe linii numerice (ISDN in SUA sau RNIS in Franta) utilizeaza doua canale cu un debit de 64Kb/s fiecare. Deoarece informatiile se transmit digital pe liniile numerice nu mai avem nevoie de modem ci de adaptoare. Liniile specializate (LS) au un debit mult mai mare care incepe de la 1.5 Mb/s (liniile numite T1) pana la 45 Mb/s (liniile numite T3)

1. 4 Servicii de Internet Serviciile de INTERNET furnizate utilizatorilor pot fi grupate in cinci categorii:

a. Servicii pentru administrare (protocoalele TCPlIP, SMTP, SNMP); b. Serviciile pentru comunicarea dintre persoane (E-mail, News, Usenet); c. Servicii pentru comunicarea dintre calculatoare (Telnet); d. Servicii pentru difuzarea informatiei (FTP, Web, Gopher, Mosaic); e. Servicii pentru cautarea informatiei (Archie, Veonica, Wais).

1.4.1 Serviciul de posta electronica Posta electronica(e-mail) functioneaza dupa principiul postei clasice, astfel ca daca o

persoana scrie o scrisoare si o introduce in plic pe care scrie atat adresa destinatarului cat si adresa sa si o depune intr-o cutie postala, ea va ajunge intr-o anumita perioada de timp la destinatar, prin intermediul postasului.

Standardul actual folosit pentru trimiterea de astfel de mesaje prin INTERNET se bazeaza pe standardul RFC. Utilizatorii sunt identificati prin adrese de e-mail unice in lume, care au urmatoarea structura: nume_utilizator@nume_host

La ora actuala standardul RFC 822 a fost completat de standardul RFC 1521 numit MIME (Multipurpose Internet Mail Extension), introdus pentru a permite transmiterea de mesaje si in alte limbii decat engleza, mai ales cele ce necesitau caractere nelatine, cat si posibilitatea de a transmite imagini si sunete atasate de scrisori.

Din punct de vedere functional, serviciul de posta are doua parti: - interfata cu utilizatorul prin care se pregatesc scrisorile, se expediaza si se citesc cele primite; - agentul de transmitere, care asigura transportul corespondentei la destinatar.

Laborator HTML

Exista mai multe programe de posta electronica, dintre care cele mai utilizate sunt Microsoft Outlook, Pine, Pegasus, Eudora, etc. Mai exista si browsere de INTERNET care contin servicii de mail incorporate, asa cum este si browser-ul NETSCAPE.

Fiecare utilizator are o cutie postala unde se primesc scrisorile expediate pe adresa sa. In momentul pregatirii unei scrisori campurile ce contin data si adresa de expeditie sunt completate automat de sistem, conform cu informatiile precizate la instalarea programului sau la crearea contului de utilizator. Restul campurilor din antetul scrisorii au structura urmatoare: To: adresa destinatarului/destinatarilor; Subject: subiectul scrisorii; Cc: lista cu alte adresa de destinatie, unde se vor expedia copii ales scrisorii (Carbon copy); Bcc: lista cu alte adrese de destinatii, unde se vor expedia copii oarbe ale scrisorii (Blind carbon copy).

Lista de adrese specificata in campul Cc face parte din scrisoare si va fi transmisa la toti destinanatarii acestia. Lista de adrese din campul Bcc nu face parte din scrisoare, deci nu va fi vazuta de toti destinatarii, de unde si denumirea de copii oarbe. Dupa receptia scrisorilor, conform unei reguli de politele, destinatarul trebuie sa raspunda in maxim 24 de ore. Exista posibilitatea ca scrisorile care sosesc la un destinatar sa fie reexpediate catre alte persoane din retea.

In anumite situatii utilizatorii nu sunt conectati direct la INTERNET, spre exemplu acestia lucreaza intr-o retea locala de PC-uri care au acces la un server de e-mail, capabil sa expedieze si sa receptioneze scrisori. Comunicarea dintre PC-uri si server se face prin intermediul a trei protocoale:

POP3 (Post Office Protocol). O data transferate mesajele se pot citi de pe calculatorul local fara a mai fi nevoie de conectarea la server.

IMAP (Interactive Mail Access Protocol). Cand se doreste citirea unui mesaj acesta e copiat temporar, citit, dupa care sters. Dezavantajul este ca trebuie o conectarea de lunga durata la INTERNET.

DMSP (Distributed Mail System Protocol). Acesta permite transferul scrisorilor catre o statie de lucru, dupa care are loc deconectarea. Utilizatorul poate citi scrisorile si compune altele in timp ce este deconectat. Ulterior dupa. ce se reconecteaza, scrisorile sunt retransferate si sistemul este resincronizat.

1.4.2 FTP FTP (File Transfer Protocol) permite transferul fisierelor intre doua noduri ale retelei

INTERNET. Acest transfer este implementat dupa arhitectura client server, in care pe server se executa procesul ftpd (demon), iar clientul foloseste un program tip linie de comanda sau cu interfata grafica.

Din punct de vedere al accesului sunt doua posibilitati: · Clientul care emite comanda a fost introdus ca utilizator pe serverul de la distanta; (MS-

DOS prompt) · Clientul nu este introdus ca utilizator pe serverul la distanta, dar acesta este un server

public, la care utilizatorii au drepturi restranse (eventual, numai de citire). (Windows Commander)

Fiecare dintre programele FTP, tip comanda sau cu interfata grafica, executa aceleasi operatii:

Deschiderea unei conexiunii pe un server la distanta (open). Identificarea serverului se face fie prin adresa sa sau prin numele anonymous, urmat de adresa de e-mail in loc de parola.

Laborator HTML

Vizualizarea continutului directoarelor (folder-elor) de pe server (comanda dir). La unele versiuni de FTP, aceasta operatie se face mai mult sau mai putin automat. Cu aceasta ocazie se pot vedea numele fisierelor si proprietatile acestora (tip, dimensiune). In general, fisierele accesibile publicului larg se gasesc memorate intr-un director cu numele pub si sunt comprimate pentru a ocupa cat mai putin spatiu.

Deplasarea in cadrul directoarelor (comanda dir). Controlul transferului de fisiere in functie de modul de reprezentare. Exista doua moduri

standard in acest sens: ASCII si binar. Tipul ASCII este cel presupus si se foloseste in general pentru fisiere text, programe sursa, posta electronica, arhive, fisiere postscript. Aceste fisiere sunt supuse unor transformari de adaptare la caracteristicile calculatoarelor sursa si destinatie. Tipul binar sau imagine se foloseste in general pentru fisierele din baze de date, procesoare de tabele, programe executabile.

Copierea unuia sau mai multor fisiere de pe un server la distanta pe un calculator local (get, mget).

Copierea unui sau mai multor fisiere de pe un calculator local pe un server la distanta (put, mput).

1.4.3 TELNET Al treilea protocol de aplicatie, definit oficial si utilizat in reteaua Internet, este TELNET

(terminal emulation). Standardul TELNET a fost definit in SUA de catre Agentia de Comunicatii a Apararii ca Protocol TELNET Standard Militar, MIL-STD-1782. Protocolul TELNET permite conectarea unui terminal utilizator local la un server aflat la distanta. Practic comunicarea intre doua persoane sau calculatoare.

Intr-o retea cu un grad ridicat de conectivitate si un numar mare de tipuri de terminale, in masura in care este posibil, este necesar sa existe un protocol de terminal virtual, ca intermediar intre terminalul real si servere, cu scopul de a oferi un limbaj comun acestora. Acest protocol foloseste trei concepte principale: asocierea, negocierea si profitul

1.4.4 Alte aplicatii: Finger permite cunoasterea caracteristicilor unui utilizator conectat la retea. Acest

serviciu este inclus in alte instrumente Internet sau poate fi dat ca o comanda DOS, sub forma urmatoare: finger [nume utilizator@nume host]

Daca nu se specifica nici un argument, se afiseaza o lista cu toti utlilizatorii conectati la sistemul local. Daca se specifica argumentul, se afiseaza informatiile aferente utilizatorului respectiv, daca este conectat la retea. Uneori, retelele locale conectate la Internet sunt protejate printr-un "firewall", care nu permite accesul din exterior la adresele IP ale acestuia.Astfel, comanda telnet sau comanda finger nu vor merge.

Ping permite testarea conexiunii cu un anumit host din Internet. Ea poate fi specificata ca o comanda DOS sau UNIX sub forma: ping -s [nume host]

Traceroute afiseaza o lista cu toate serverele aflate pe traseul de retea care conecteaza serverul destinatie specificate ca argument. Sub DOS se specifica urmatoarea comanda: traceroute [nume host] Aceasta comanda este utila pentru a afla care este hostul in pana, daca apare o eroare de conexiune.

Whois permite accesul al o baza de date care se gaseste pe serverul aflat la Network Information Center. Astfel, se pot obtine informatii privind hosturile INTERNET si utilizatorii acestora.

Laborator HTML

Web sau WWW (World Wide Web) reprezinta unul din serviciile de informare pe Internet. Un serviciu Web combina tehnologiile noi cu serviciile Internet disponibile. Web este o adevarata colectie de documente multimedia, calculatoare, retele si evident soft client si server Web.

2. World Wide Web(www.). Pagini Web. 2.1 Browser Elementele la care face Web apel sunt: · Identificatorul uniform al resurselor, URL (Universal Resource Locators), care

permite recuperarea tuturor tipurilor de informatie din orice punct de Internet. · Protocolul de transfer hipertext, HTTP (HyperText Transfer Protocol), care permite

comunicarea intre serverul si navigatorul Web. HTTP reprezinta un ansamblul de reguli relativ simple pentru a fi utilizate in cadrul sistemelor hipermedia distribuite.

· Limbajul de realizare a hipertextelor, HTML (HyperText Markup Language), care permite crearea documentelor hipertext, care vor fi vizualizate cu ajutorul navigatoarelor Web. Web se deosebeste de alte servicii Internet, deoarece prin conceptia sa inglobeaza alte servicii cum ar fi: FTP, Gopher, Telnet, Wais, News.

Serverul Web reprezinta sistemul pe care ruleaza un soft, numit demon httpd, ce are ca scop distributia informatiei stocate, sub forma unor documente. Accesul la informatia de pe serverul Web se obtine prin intermediul unui soft client numit navigator sau browser.

Browser-ul si serverul Web coopereaza dupa modelul client-server. Browser-ul emite cererile si receptioneaza datele care vor fi afisate. Dupa receptia datelor, browser-ul formateaza documentele tinand seama de tag-urile HTML(un fel de instructiuni) si apoi le afiseaza.

Primul navigator Web grafic a fost Mosaic de la NCSA. Navigatoarele Netscape si Internet Explorer sunt cele mai utilizate. Netscape poate fi folosit atit in sistemul de operare Windows cit si Unix(Linux).

Sub sistemul de operare Windows mai putem rula si alte browsere ca Opera, Mozzila, Mozaic etc; in sistemul de operare DOS mai putem rula Dos Lynx; in Xwindows se poate rula Xmosaic.

2.2 Universal Resource Locators (URL) Accesul la un anumit document se face prin specificarea adresei acestuia. Forma

standardizata a unui URL contine: · protocolul de schimb; · serverul; · directorul ce contine fisierul; · fisierul. Sintaxa folosita pentru specificarea unei adrese in scopul accesarii unui document pe

WWW este urmatoarea: protocol://nume server/cale/nume document. Exemplul unui URL catre un motor de cautare: http://www.yahoo.com. Exista mai multe tipuri de protocoale (tipuri de URL), fiecare reprezentand un serviciu

dat. Astfel avem:

Laborator HTML

· ftp://nume:parola@server/dirl/dir2 acest tip de URL permite accesul la un server FTP pentru vizualizarea ansamblului de fisiere dintr-un director, daca nu s-a specificat un fisier sauincarcarea fisierului pe discul local, daca a fost specificat un nume de fisier;

· file://server/fisier, pentru accesarea unui fisier prezent pe discul local; · gopher://server permite deschiderea unui meniu Gopher, pentru regasirea informatiei; · telnet://nume:parola@server:port perrnite deschiderea unei sesiuni telnet pe masina

de la distanta; · news://grup.articol permite deschiderea unei sesiuni News pe un server News dat ca

parametru in softul client. · wais://server/ permite accesul la un server baza de date Wais; · mailto://nume@server perrnite deschiderea unei sesiuni de posta electronica, pentru

scrierea si transmiterea unui mesaj catre utilizatorul a carui adresa figureaza in URL. 2.3 Hipertext Web face apel la conceptul hipertext. Hipertextul este o metoda de prezentarea a

informatiei, unde anumite cuvinte ale textului pot fi apelate in orice moment pentru a furniza alte informatii. Respectivele cuvinte reprezinta legatura catre alte documente, ce pot fi texte, imagini sau alte fisiere.

Dezvoltarea rapida a comunicatiilor numerice si a sistemelor de afisarea grafica a determinat o evolutie a hipertextului catre hipermedia, in care legaturile se realizeaza catre texte, imagini, sunete si filme.

Informatia tranzitata sub Web este organizata sub forma documentelor multimedia, cu legaturi catre alte documente. Informatia pe care un server Web este in masura sa o elibereze este structurata ierarhic intr-un arbore. Radacina arborelui constituie punctul de intrare. Informatiile eliberate prin Web pot fi: · documente HTML (.html sau .htm); · textele ASCII (.txt); · documentele performante, cum ar fi PostScript (.ps); · imagini fixe, su diferite reprezentari GIF, JPEG, TIFF; · inregistrari sonore in format AU sau AIFF. · filme in format QuickTime (.mov) sau MPEG; · reprezentarea VRLM a unei scheme tridimensionale; · un microprogram sau applet JAVA.

2.4 Publicarea documentelor Pentru a se stabili in linii mari, care este publicul interesat de ideile, produsele sau

serviciile care vor fi lansate prin Web, trebuie sa ne punem urmatoarele intrebari: ~ Catre cine ne adresam? ~ Pentru ce-i intereseaza produsul sau serviciul? ~ Cum facem sa-i depistam pe cei interesati? Inainte de a crea documentul, trebuie stabilita structura acestuia. Un document bine

structurat va fi urmarit mult mai usor de catre cititor. Intr-un document trebuie sa se regaseasca urmatoarele elemente: ~ partea introductiva: prezentare ~ documentul pe scurt (organizare, continut); ~ corpul documentului: continutul site-ului;

Laborator HTML

~ elementul de incredere: ofera cititorului argumentul de a mai reveni;

Laborator HTML

2.5 Doua exemple de programe pentru crearea de pagini Web.

Programul FrontPage este creatia concernului Microsoft in scopul de a realiza o puternica unealta in creatia si managementul resurselor Web, fara a fi necesara cunoasterea unui limbaj de programare, dar avand suficienta robustete pentru realizari deosebite. Acest program detine toate elementele strict necesar pentru proiectarea si realizarea unui site World Wide Web, foarte atractiv si foarte usor de navigat.

Una din calitatile programului este faptul ca include un browser de web, denumit FrontPage Explorer, unde creezi, proiectezi si intretii un intreg site Web, include un editor numit FrontPage Editor, unde se pot crea si edita pagini Web, iara a fi nevoie de cunoasterea limbajului HyperText Markup Language (HTML). De asemenea programul mai include si alte optiuni si unelte care fac ca design-ul de pagini Web sa se faca cat mai usor pentru orice tip de utilizator.

Produsele Macromedia - Dreamwaver, Flash Macromedia este unul din cele mai inalte standarde in privinta proiectarii, constructiei si

realizarii de prezentari multimedia si design Web. De fapt Macromedia este o corporatie similara cu Windows.

Misiunea lor este de a permite o viata usoara, persoanelor ce lucreaza sau proiecteaza in Web, asigurandu-le cele mai eficiente si mai moderne modalitati de a atrage clienti sau utilizatori.

Programele din pachetele Macromedia (Dreamweaver, Fireworks, Flash, Freehand, Authorware, Macromedia Director etc.) au fost create pentru a inzestra designer-ul de Web si dezvoltatorii de multimedia cu unelte capabile sa raspunda oricarei cerinte din noua generatie.

Astazi, Macromedia Flash si Macromedia Dreamweaver sunt unelte foarte importante in domeniul design-ului profesional de Web. Standardul Macromedia Flash (ce include Macromedia Flash, FreeHand si Generator) este liderul pe piata dezvoltatorilor de multimedia.

Programul Macromedia Dreamweaver (care integreaza Macromedia Dreamweaver, Dreamweaver UltraDev si Fireworks) stapaneste peste 70% din piata produselor de gen si a comunitatii de peste un milion de dezvoltatori de gen.

3. Metalimbajul HTML

HTML nu este chiar un limbaj de programare asa cum unii ar putea crede. Este mai degraba un metalimbaj intrucat nu foloseste comenzi ci niste marcatori(tag-uri) care sunt interpretate de catre browser in vederea executarii unor comenzi.

Un document HTML se poate realiza prin intermediul unui editor de texte ASCII(de exemplu Notepad), procesor de texte, editor HTML sau convertor HTML. Limbajul HTML include o mare diversitate de tag-uri (marcatori), sub forma:

<Nume Tag> Text --------------------------- (</Nume Tag>) Dupa cum se vede un tag se pune intre semnele <>. Majoritatea tagurilor au o zona de

actiune. Un tag se sfirseste cind apare </Nume Tag>. Dupa cum se vede sfirsitul unui tag e marcat cu /

Tag-urile sunt: singulare, cand se regaseste numai tag-ul de inceput (<BR>);

Laborator HTML

pereche, reprezentat prin tag-ul de inceput (<HEAD>) si de tag-ul de sfarsit (</HEAD>).

Unele tag-uri detin atribute (parametri) care pot lua anumite valori, in acest caz sintaxa este: <Nume tag atrib1="valoare1" atrib2="valoare2">

Este complet indiferent pentru browser daca numele tagului este scris cu litere mari sau mici. Se recomanda totusi ca intr-un acelasi document sa se pastreze acelasi mod de folosire a acestora(de exemplu scriem tagurile cu litere mari) pentru o mai rapida recunoastere a acestora.

Structura documentelor Orice document HTML include un antet si un corp. Pentru structurarea documentului se

utilizeaza tag-urile:

<HTML> defineste inceputul si sfarsitul documentului; <HEAD> defineste inceputul si sfarsitul antetului documentului; <TITLE> defineste inceputul si sfarsitul titlului documentului; <BODY> defineste inceputul si sfarsitul documentului propriu-zis.

Iata un prim exemplu de pagina web: <html> <head> <title>Acesta este titlul paginii si va apare pe bara de titlu </title> </head> <body> Acesta este corpul paginii si va apare in zona de lucru(de aplicatie) a ferestrei browser-

ului. Iata prima pagina de internet. </body> </html>

Dupa scrierea secventei de mai sus intr-un editor de texte ASCII(de exemplu Notepad) se salveaza fisierul cu extensia .htm sau .html

Iata rezultatul:

In cadrul limbajului HTML exista o serie de tag-uri ce permit aranjarea in pagina si

formatarea documentelor. Mentionam ca unele browsere recunosc toate tagurile de mai jos, altele insa nu. Ca atare, in functie de browserul rulat aspectul general al paginii poate fi usor diferit ca aliniere, marime.

Laborator HTML

<Hi> .... </Hi> indicele i=1, 2, 3, 4, 5, 6 stabileste dimensiunea caracterelor pentru textul din interiorul tag-ului. Dimensiunea cea mai mica se obtine pentru i=6 si cea mai mare pentru i=1. <EM> .... </EM> text scos in evidenta (Emphasis). <STRONG> ... </STRONG> text puternic scos in evidenta. <ADDRESS> ... </ADDRESS> textul specifica o adresa postala, o adresa e-mail sau un numar de telefon. <B> ... </B> textul este bolduit (ingrosat). <I> .... </I> textul este italic (inclinat). <TT> ... </TT> textul este monospatiat. <BR> interupe linia curenta si trece pe urmatoarea, indiferent daca urmeaza text sau imagine. <P> ... [</p>] trece la paragraful urmator, care incepe cu o noua linie, dar spre deosebire de BR lasa si o linie libera ca separator de paragrafe. <! ...Text ... > comentariu, fiind ignorat de navigator. <HR [SIZE=n] [WIDTH=n] [ALIGN=left/right/center] [NOSHADE]> traseaza o linie orizontala de separare, care poate avea urmatoarele caracteristici: grosime (SIZE), lungime (WIDTH), aliniere (ALIGN) si fara umbra (NOSHADE). <DIV ALIGN="left/center/right"> .... </DIV> alinierea textului. <PRE [WIDTH=n]> ... </PRE> permite conservarea formatarii textului din intervalul tag-ului. Atributul WIDTH fixeaza numarul de coloane in care se afla textul formatat, valoarea implicita fiind de 80 de coloane. <FONT SIZE=n COLOR=x FACE=t1, t2, t3> ... </FONT> efectul atributelor acestui tag actioneaza asupra textului situat inaintea acestui tag. Atributele componente sunt urmatoarele: * atributul SIZE=n stabileste dimensiunea caracterelor, n poate lua valori cuprinse intre 1 si 7. Daca valoarea atributului este precedata de semnul + atunci n reprezinta cresterea in raport cu dimensiunea curenta a caracterelor. * atributul COLOR=x, stabileste culoarea caracterelor dupa modelul RGB: rrggbb (rr-rosu, gg-verde, bb-bleu). Valorile rr, gg, bb sunt date in hexazecimal. Valoarea 00 da o intensitate minima, iar FF o intensitate maxima. Astfel combinatia FF0000 corespunde pentru culoarea rosu intens, FFFFFF pentru alb, iar 000000 pentru negru. O lista de culori predefinite le puteti gasi pe Internet la adresa http://users.rcn.com/giant.interport/COLOR/ColorSpecifier.htrnl. * atributul FACE=t1, t2, t3 permite stabilirea tipului de font, care. trebuie sa existe pe masina clientului. <MULTICOL COLS=n GUTTER=1 WIDTH=d> ... </MULTICOL> permite scrierea textului pe mai multe coloane (gen ziar). Numarul de coloane, dimensiunea acestora si spatiul dintre ele se specifica prin atributele: COLS, WIDTH, GUTTER. <CENTER> ... </CENTER> centreaza pe orizontala textul sau imaginile. <SPACER TYPE=tip SIZE=n> permite controlul vertical si orizontal al spatiului dintre elementele unei pagini HTML. Atributul TYPE poate lua valorile HORIZONTAL, VERTICAL sau BLOCK. Daca atributul TYPE ia valoarea BLOCK atunci sintaxa este: <SPACER TYPE="BLOCK" WIDTH=n HEIGHT=j ALIGN=a> atunci se pot specifica si atributele latime WIDTH, inaltimea HEIGHT si ALIGN cu valorile TOP, BOTTOM, CENTER sau MIDDLE. <BR CLEAR=c> permite spatierea unei imagini fata de textul documentului HTML. Atributul CLEAR poate lua valorile LEFT, RGIHT sau ALL. Valoare LEFT lasa liber locul din stanga imaginii, RIGHT lasa liber locul din dreapta imaginii, iar ALL se foloseste cand avem doua imagini in pagina si vrem ca una sa fie aliniata la stanga, cealalta, la dreapta si spatiul dintre ele sa fie liber. <BODY BGCOLOR=c text=t LINK=1 VLINK=v ALINK=a> controleaza culorile pentru fondul ecranului, text si legaturi. Toate valorile atributelor din tag-ul BODY (c, t, 1, v si a) se specifica dupa modelul RGB sub forma "#rrggbb". Atributul BGCOLOR da culoarea fontului de ecran, TEXT culoarea textului (altul decat legaturile hipertext), LINK, culoarea legaturile care nu au

Laborator HTML

fost inca vizitate si ALINK, culoarea temporara a legaturii din momentul activarii acesteia (culoarea implicita este rosu).

Exista posibilitatea ca fondul ecranului sa contina o imagine care trebui sa fie simpla si monocroma, pentru a permite o vizualizare usoara a paginii gazduite. Specificarea unei imagini ca fond de ecran se face prin: <BODY BACKGROUND="fisier imagine.gif'>

Iata un exemplu de pagina web ce foloseste elemente de formatare a textului: <html> <head> <title>Exemplul de folosire a tagurilor </title> </head> <body bgcolor=”#993366”> <center> <H2> Acesta este un text scris central cu marimea H2 </H2> </center> <br>Trecem pe alt rind si lasam alt 2 rinduri libere<br><br><br> <B> Iata un text cu bold</B><br> <I>si unul italic</I><br> <B><U>Iata un text bold si subliniat</u></b><br> <div>Iata si un paragraf nou.acesta poate avea propriile caracteristici, daca este

cazul</div><br> <font color=”#00ff00” size=”12”> Iata un text scris cu marimea 12 si alta culoare</font> </body> </html>

Rezultatul este:

Liste

In limbajul HTML se pot realiza mai multe tipuri de liste: ordonate, neordonate sau cu definitii. De asemenea continutul listei poate cuprinde orice sintaxa enumerata anterior. Sintaxa pentru aceste tipuri de liste este urmatoarea:

Laborator HTML

<OL TYPE=t START=s> <LI> text1 <LI> text2 <LI> test3 </OL> Atributul TYPE defineste tipul numerotarii elementelor listei, care pot fi: t=1 pentru cifre, t=A pentru caractere majuscule, t=a pentru numerotarea romana cu Iitere mari gi t=i pentru numerotarea romana cu litere mici, iar atributul START defineste valoarea de inceput. Liste neordonate Sintaxa pantru acesle lipuri de liste esta urmatoarea: <UL TYPE=t> <LI> text1 <LI> text2 <LI> text3 </UL> Atributul TYPE definesle semnul care va precede elementele listei t=SQUARE(patrat), t=CIRCLE(cerc vid) si t=DISC(cerc plin). Liste cu definitii Sintaxa pentru aceste lipuri de liste este urmatoarea: <DL> <DT><B> Termen1 pentru definitie </B> <DD> Definirea termenului <DT ><B> Termen2 pentm definitie </B> <DD> Definirea termenului </DL>

Iata un exemplu de pagina web ce foloseste liste: <html> <head> <title>Exemplul de folosire a listelor </title> </head> <body> <center> Urmatoarele elemente sunt intr-o lista: <UL TYPE=1> <LI> text1 <LI> text2 <LI> text3 </UL> </body> </html>

Rezultatul este:

Laborator HTML

Legaturile hypertext

Legaturile hipertext permit vizualizarea prin clic pe un cuvant fraza sau imagine, a altor fisiere decat cel curent. Pentru a realiza o legatura hipertext se utilizeaza tag-u1 ancora: <A> ... </A>, care include si atribute. Unul dintre aceste atribute este HREF (Hypemext REFerence), utilizat pentru a specifica URL-ul documentului tinta.

Sintaxa este nrmatoarea: <A HREF ="localizarea documentulni"> text de legatura </A> Legaturile se pot realiza in trei feluri:

• intem, in cadrul aceluiasi document • local, catre un document situat pe acelasi server • extern, eatre un document aflat pe alt server.

Legatura locala

Sintaxa in cazul legaturii locale este urmatoarea: <A HREF="Fisier local"> text de legatura </A> Valoarea fisier local reprezinta adresa fisierului local catre care se face legatura, acesta va

fi incarcat. Fisierul local se poate preciza folosind, una din urmatoarele doua metode: -calea relativa, serverul va cauta documentul incepand din acelasi director

ca si documentul de 1a care a fost apelata legatura. -calea absoluta, cand documentul va fi identificat incepand cu directorul

radacina.

Legatura interna Se realizeaza intre elementele aceluiasi document sau catre un anumit punct tinta al altui

document. Aceasta implica:

- crearea unei ancore in punctul tinta, folosind sintaxa urmatoare: <A NAME="cuvant_cheie">Paragraf tinta</A> Ancorele din punctul tinta nu sunt afisate diferit fata de restul documentului.

- realizarea unei legaturi prin care se specifica numele fisierului (daca legatura se face intr-un punct al altui fisier) si paragraful:

<A HREF="[nume fisier]#cuvant_cheie">Paragraf tinta</A>

Laborator HTML

Se utilizeaza acest tip de legatura in cadrul unui document organizat pe sectiuni. La inceputul documentului poate fi prezentat continutul.

Legatura externa Sintaxa in cazul legaturii externe este urmatoarea: <A HREF='http://www.kappa.ro"> text de legatura </A> Tinta unei legaturi hipertext poate fi: un fisier HTML, o imagine externa (GIF, JPEG sau

POSTSCRIPT), un film sau text (caruia i s-a marcat o ancora). In cazul in care legatura hipertext puncteaza spre un fisier HTML, exista doua situatii posibile:

1. documentul apelat apartine unui ansamblu de documente omogene care sunt dirijate dintr-un document principal. In aceasta situatie se poate prevedea in documentul apelat o ancora de retur spre documentul principal pentru a facilita navigarea in ansamblul respectiv. Acest lucru trebuie facut cu multa atentie, deoarece intr-un alt context s-ar putea sa deruteze utilizatorul. Fiecare document are un buton de revenire spre documentul principal.

2. documentul apelat se afla pe un server independent de documentul in curs de realizare; dupa consultare, utilizatorul va reveni in documentul de apel prin actionarea butonului BACK din navigator.

Este posibila definirea unor legaturi catre celelalte servicii Internet: FTP,

TELNET,NEWS, MAILTO, JavaScript. Spre exemplu, o legatura de forma: mailto:adresa e-mail, va apela un program de scriere si expediere a scrisorilor, catre destinantarul a carui adresa a fost specificata.

Iata un exemplu de pagina web ce foloseste liste: <html> <head> <title>Exemplul de folosire a ancorelor pt legaturi </title> </head> <body bgcolor=”#993366”> <center> Aceasta este o <a href=”fis.htm”>legatura locala</a> deci catre un alt fisier html<br> Aceasta este o <a href=”http://yahoo.com”>legatura externa</a> deci catre o alta adresa de internet<br> <br><br><br> Pentru legatura interna exemplificarea este mai jos, fiind luata din site-ul Casa Noastra <a name="#up"><center>ACTIVITATI DESFASURATE IN CADRUL CENTRULUI</CENTER></a> <br> <center> <a href="#A1">[Activitati culturale]</a> <a href="#A2">[Activitati gospodaresti]</a> <a href="#A3">[Activitati spirituale]</a> <a href="#A4">[Activitati psihopedagogice]</a> </center> <br> <a name="#A1"> <center><p>1.Activitati culturale</p></center> <p>Actiunile din cadrul centrului, in care sunt implicati voluntari romani si straini sunt bine primite de copii si incununate de succes. Manifestarea de imagine reprezinta

Laborator HTML

initiativa unui grup de studenti la pshiologie din Anglia. Deseori in incinta Muzeului Teatrului ne-a fost gazda unei manifestari prilejuite de diferite ocazii precum Ziua Copilului, serbarile zapezii etc.</p></a> <br><br> <a name="#A2"> <center><p>2.Activitati gospodaresti</p></center> <p>Implicarea copiilor in activitati gospodaresti reprezinta una din conditiile integrarii cu succes in structuri de viata normale dobandirii sentimentului utilitatii si a responsabilitatii.</p></a> <br><br> <a name="#A3"> <center><p>3.Activitati spirituale</p></center> <p>Centrul ce poarta numele Sfantul Andrei, este dominat de atmosfera ecumenica. Religia fiecarui copil este respectata. Ei sunt prezenti in fiecare Liturghie de Sfintele Sarbatori, prilej in care canta la strana cantece religioase.</p> </a> <br><br> <a name="#A4"> <center>4.Activitati psihopedagogice</p></center> <p>Copii sunt permanent asistati la pregatirea lectiilor punandu-se un mare accent pe recuperarea deficientelor si completarea lacunelor in procesul invatarii. Jocurile de toate tipurile sunt initiate in vederea compensarii unor deficiente, dobandirii de indemnare , dezvoltarii spiritului competitiv.</p></a> <br><br> </body> </html>

Rezultatul este:

Laborator HTML

Includerea imaginilor in document Imaginile pot fi: - afisate direct in documentul Web, imagini on-line (in ideea ca exista un browser grafic).

Pentru a putea fi afisate imaginile trebuie sa fie salvate in format gif sau jpeg. - incarcate si afisate la cererea utilizatorului prin tag-ul <A>, imagini externe.

Imaginile incluse in paginile Web pot avea diverse surse: fotografii preluate dintr-un scanner, fotografii preluate de pe un CD-photo, prin captarea imaginilor de pe un video-disc sau imagini realizate printr-un soft specializat. In sistemele informatice, descrierea unei imagini se poate realiza in mod bitmap sau vectorial.

In modul bitmap imaginea este realizata punct cu punct. Dimensiunea si rezolutia sunt stabilite de la inceput. In acest caz este dificil sa se modifice marimea fara a se altera calitatea imagini. Preluarea unei imagini cu un scanner genereaza imagini bitmap. Photoshop, SuperPaint, XV reprezinta produse software capabile sa creeze si sa returneze imagini bitmap. GIF este un format pentru reprezentarea imaginilor in format bitmap. In modul vectorial, fiecare forma, fiecare curba este delinita printr-o formula matematica.

O astfel de reprezentare are avantajul ca desenele pot fi usor redimensionate sau deformate. Fisierele in care sunt inregistrate imaginile vectoriale sunt de capacitate mai mica decat cele cu imagini bitmap. Cele mai cunoscute tipuri de imagini vectoriale sunt cele POSTSCRIPT (ILLUSTRATOR fiind softul pentru desen). Daca se doreste utilizarea imaginilor Postscript in paginile Web, pentru afisarea lor este necesara conversia in modul bitmap.

Imaginile on-line sunt specificate prin tag-ul IMG: <IMG SRC="nume_img.gif' ALIGN=a HSPACE=n1, VSPACE=n2 WIDTH=n3

HEIGHT=i BORDER=n3 ALT="nume">

Atributul SRC indica URL-ul imaginii care se va insera in document. Imaginile sc pot alinia cu ajutorul atributului ALIGN, care poate lua valorile TOP, MIDDLE, BOTTOM, LEFT, RIGHT. Incarcarea si dimensionarea imaginilor se face prin atributele HSPACE (spatiu orizontal), VSPACE (spatiu vertical), BORDER (cadru), WIDTH (latimea) si HEIGHT (inaltimea).

O imagine poate fi un punet de legatura catre alte informatii. In acest caz se utilizeaza sintaxa: <A HREF="URL informatii"><IMG SRC="URL imagine"></A>

Proprietatile obiectului imagine sunt: SRC, HEIGHT, WIDTH si COMPLETE, o valoare logica care exprima starea de afisare a imaginii: totala sau partiala.

Iata un exemplu de pagina web ce foloseste liste: <html> <head> <title>Exemplul de folosire a imaginilor </title> </head> <body> Aceasta este o poza:<br> <IMG SRC="img.jpg' ALIGN=”TOP” WIDTH=”100” HEIGHT=”50” BORDER=”3”

ALT="Numele pozei il puteti pune aici"> </body> </html>

Laborator HTML

Rezultatul este:

Formulare Formularele (chestionarele) sunt instrumente oferite prin limbajul HTML pentru a

generarea pe ecran zone de dialog cu cititorul documentelor Web. Un formular reprezinta doar o interfata pentru captarea informatiilor, el necesitand elemente pentru tratarea datelor colectate. Prelucrarea finala a datelor se executa pe server, prin programele denumite CGI (Common Gateway Interface). Astfel spus, CGI asigura interactiunea server-navigator in sensul personalizarii rezultatelor prin diversele prelucrari asupra elementelor din paginile Web. Scriptul CGI este lansat in executie pe baza unor parametrii transmisi de client. Dialogul intre client si server, pentru prelucrarea unui formular, se deruleaza dupa urmatorul scenariu:

* Clientul lanseaza o cerere catre un URL., ce include un formular. * Serverul lanseaza in executie scriptul CGI, care realizeaza o anumita prelucrare asupra

datelor din formular (interogheaza o baza de date, calculeaza niste valori etc-) si pregateste rezultatele obtinute.

* Scriptul transmite in final rezultatele catre un server intr-un format care poate fi inteles de acesta.

*Server-ul receptioneaza rezultatele si le transmite mai departe clientului. Scripturile CGI sunt inregistrate in mod curent pe server, intr-un director care se creaza la instalarea acestuia (demonul httpd). Un script poate fi scris intr-un limbaj de programare ca: C, FORTRAN, PERL, VISUAI. C++, VISUAL BASIC, JAVA.

Sintaxa generala pentru deschiderea unui formular este: <FORM METHOD=tip_m AC'TION=URL_cgi NAME=nf TARGET=cadr> unde:

• atributul METHOD=tip_m specifica modul cum se emite informatia catre server. Valorile cel mai frecvent utilizat sunt: GET si POST. Cand se utilizeaza metoda GET sirul de caractere constituit din ansamblurile nume camp si valoare este adaugat la URL-ul scriptului cgi care se va executa. Separatorul intre numele scriptului si restul sirului de caractere il reprezinta caracterul ?. Deoarece majoritatea browserelor afiseaza URL-ul curent, acest sir de caractere va fi vizibil. Din aceasta cauza se prefera metoda POST, cand sirul de caractere trimis catre server printr-o secventa HTTP speciala.

• atributul ACTION=URL_cgi indica locul unde se trimite informatia, unde se gaseste scriptul care se va executa. Valoarea sa este reprezentata prin URL-ul scriptului.

Laborator HTML

• atributul NAME=nf detine doua functii particulare: --> indica scriptul CGI numele fonnularului care a trimis datele, in situatia cand mai multe formulare exista in acelasi document. --> identifica un fomular, prin numele sau, pentru a putea fi referit prin functiile JavaScript.

• atributul TARGET=cadr specifica fereastra sau cadrul (frame) in care se va afisa rezultatul executiei scriptului CGI. In absenta atributului TARGET se inlocuieste pagina curenta. Textul incadrat de <FORM> si </FORM> va contine un ansamblu de comenzi: INPUT,

SELECT, etc. Sintaxa generala a tag-ului care defineste un camp pentru introducerca datelor intr-un formular este:

<INPUT TYI'E="tip" NAME="nume_camp" VALUE="val" SIZE="n" MAXLENGHT="m"> unde: * atributul TYPE specifica tipul intrarii, care poate fi:

-->text: text simplu, parola, ascuns, multilinie -->meniu: cu selectarca unei intrari sau selectarea multipla -->butoane: casete, (checkboxes), radio, reset si submit.

* atributul NAME permite definirea numelor, in scopul identificarii datelor care vor fi trimise catre server. Intr-un formular se utilizeaza o singura data acelasi nume. Celelalte atribute sunt dependente de tipul intrarii. Intrarea text este cel mai simplu tip de intrare intr-un formular. Zona de introducere date accepta un cuvant sau o linie de text. Atributele sunt: - VALUE="val", atribut optional care permite predefinirea continutului din campul text, cu alte cuvinte, ceea ce o sa apara pe ecran la prima activare a formularului; - SIZE="n", atribut optional prin care se defineste lungimea campului de intrare text (in caractere). - MAXLENGHT="m", atribut optional prin care se limiteaza numarul caracterelor care pot fi introduse (daca se depaseste acest numar apare un semnal sonor/de avertizare). Intrarea password utilizeaza aceleasi atribute ca si intrarea text. Intrarea textarea se utilizeaza pentru introducerea unui text na aceasta tag-ul <INPUT TYPE="text"> este inlocuit cu: <TEXTAREA NAME="nume_camp" ROWS="r" COLS= "c">[Text implicit] </TEXTAREA> atributele sunt: -ROW'S="r", specifica numarul de randuri care pot fi afisate din textul care se va introduce. -COLS="c", specifica numarul de coloane care pot fi afisate. -Text implicit, reprezinta textul afisat prin lipsa.

Cand numarul liniilor si al coloanelor introduse depasesc pe cele prevazute a fi se utilizeaza scrollbars (bare de defilare). Intrare meniu SELECT are loc selectia unei intrari din meniu. De data aceasta se utilizeaza tag-ul SELECT in urmatorul context: <SELECT NAME="nume_camp"> <OPTION [VALUE="v"] [SELECTED]> Nume optiune1 <OPTION> Nume optiune2 ............................. </SELECT> Atributele sunt: - OPTION, prin care se specifica o optiune a meniului.

Laborator HTML

- VALUE="v", atributul optional prin care se specifica valoarea optiunii emise spre server (daca nu se regaseste acest parametru, numele optiunii va fi emis ca valoare); - SELECTED, atribut optional prin care se specifica prima optiune afisata a meniului (daca acest atribut lipseste se va afisa prima. optiune din lista meniu). Intrare meniu SELECT cu SIZE permite alegerea multipla dintr-o lista de optiuni. Diferenta fata de situatia anterioara consta in utilizarea optiunilor: SIZE, prin care se specitica numarul dc linii afisate si MULTIPLE, care permite o selectie multipla.

Intrarea buton ckeckbox (caseta de control) principiul de introducere a datelor ca daca se bifcaza, atunci textul aferent se completeaza in formular. Pentru acest tip de se foloseste tag-ul: <INPUT TYPE="checkbox" VALUE="v" CHECKED> unde: -VALUE="v", atribut optional prin care se specilica valoarea trimisa catre server, in cazul selectarii (daca nu este definita, o valoare "on" se emite catre server). -CHECKED, atribut optional pentru selectarea in mod implicit a casetei. Intrarea buton radio selecteaza una dintre posibilitatile existente. Sunt cazuri cand trebuie aleasa o optiune din mai multe, tipul campului de intrare este definit prin atributul TYPE="radio". Alte atribute sunt: -VALUE="v", atribut necesar pentru a indica valoarea butonului, daca acesta este selectat. Valoarea specificata prin atributul NAME identifica blocul de butoane. -CHECKED, butonul radio sclectat (se recomanda sa se foloseasca acest atribut). Intrarea buton reset/submit prin activarea acestor campuri are loc stergerea tuturor zonelor de intrare din formular, regasindu-se doar valorile implicite, respectiv transmiterea datelor catre server. Butonul SUBMIT transfera informatiile din fonnularul completat, la URL-ul specificat prin atributul ACTION al tag-ului <FORM ...>. Atributul optional VALUE se utilizeaza pentru afisarea unui text pe buton.

Intrarea hidden transmite informatiile ascunzand textul. Atributul VALUE="v" este necesar pentru a se specifica valoarea textului ascuns care va fi emis catre server.

Iata un exemplu de folosire a formularelor(Exemplul este luat din pagina de Internet

Cross Cultural Connection) <html> <head> <title>LOGIN</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <center> <font size="4" face="Arial, Helvetica, sans-serif" color="#666666"><i>CROSS CULTURALL CONNECTION</i></font></b><br> <br><br><br> <form name=inregistrare action=index.php method=post> <input type=hidden value=1 name=auth_> <b>Administrator: </b> <input maxlength=15 size=15 name=user><br> <b>Password: </b> <input type=password maxlength=15 size=15 name=pass><br> <input type=button value=" Login " name=Trimite> </form> </center> </body> </html>

Laborator HTML

Iata rezultatul:

Tabelele HTML permite descrierea tabelelor intr-o maniera amanuntita ca si in cazul listelor.

Un tabel poate contine un alt tabel. 0 celula dintr-un tabel poate contine: text, liste, imagini, legaturi hipertext sau elemente ale unui formular. Sintaxa generala pentru crearea unui tabel este: <TABLE BORDER=m CELLPADING=n1 CELLSPACING=n2 WIDTH=n3%> ..

................descrierea tabelului ......... </TABLE> Proprietatile generale ale unui tabel se specilica prin atributele: - BORDER, grosimea bordurii de incadrare a tabelului. -CELLPADING, spatiul din jurul textului unei celule. - CELLSPACING, spatiul intre celule. - WIDTH specifica in procente cat la suta din suprafata ferestrei ocupa tabelul.

Tabelul este descris rand cu rand cu ajutorul tag-ului:

<TR VALIGN=TOP~BOTTOM~MIDDLE ALIGN=RIGHT~LEFT~CENTER>... </TR> Atributul VALIGN specifica alinierea verticala a textului in toate celulele randului,

ALIGN da alinierea orizontala. Definirea unei celule in cadrul unui rand se face prin:

<TD VALIGN=v1 ALIGN=v2 COLSPAN=n1 ROWSPAN=n2 NOWRAP> ...</TD> Toate celule unui rand mostenesc valorile atributului VALIGN definit in tag-ul <TR>, cu

exceptia cazului cand acest atribut este redefinit prin tag-ul <TD>, devenind astfel prioritar fata de primul.

Atributul COLSPAN specifica latimea celulei, ca multiplu de latimea coloanei de baza, iar ROWSPAN specifica inaltimea celulei, ca multiplu de inaltimea randului de baza. Dimensionarea celulelor unui tabel se face automat la lungimea maxima a textului din celule. Daca textul introdus intr-o celula este mai lung de 64 de caractere, navigatorul il imparte automat in mai multe randuri. Atributul NOWRAP permite inhibarea acestei reguli, lasand textul pe un singur rand, indiferent de lungimea acestuia.

Antetul tabelului se descrie prin tag-ul <TH> </TH> care are aceleasi atribute ca si <TD>. Textul din acest tag este automat centrat si bolduit. Titlul tabelului se specifica prin tag-ul: <CAPTION ALIGN=TOP~BOTTOM> .... </CAPTION>

Laborator HTML

Se poate colora intregul tabel, o linie sau o celula cu ajutorul atributului BGCOLOR din tag-urile <TABLE>, <TR> sau <TD>.

Exemplu de folosire a tabelelor(folsit in siteul www.cssg.ro. &nbsp defineste un spatiu- space.) <html> <head> <title>Exemplu de folosire a tabelelor</title> </head> <body> <font color="#000066" size="6"><b><center> <p>Centrul de Studii pentru Stiinte de Granita</p> </center></b> </font> <p align="center">&nbsp;</p> <p align="center"><font size="5">Membrii&nbsp; Centrului de Studii pentru Stiinte de Granita</font></p> <div align="center"> <center> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="714" id="AutoNumber1" height="466"> <tr> <td align="center" width="24" height="38"><b>Nr. Crt.</b></td> <td align="center" width="22" height="38">&nbsp;</td> <td align="center" width="327" height="38"><b>Numele si prenumele</b></td> <td align="center" width="99" height="38">&nbsp;</td> <td align="center" width="202" height="38"><b>Telefon fix</b></td> <td align="center" width="172" height="38"><b>Telefon mobil</b></td> <td align="center" width="241" height="38"><b>Adresa de e-mail</b></td> <td align="center" width="394" height="38"><b>Observatii</b></td> </tr> <tr> <td align="center" width="24" height="25">&nbsp;</td> <td width="22" height="25">&nbsp;</td> <td width="327" height="25">&nbsp;</td> <td width="99" align="right" height="25">&nbsp;</td> <td width="202" align="right" height="25">&nbsp;</td> <td width="172" align="right" height="25">&nbsp;</td> <td width="241" align="center" height="25">&nbsp;</td> <td width="394" align="center" height="25">&nbsp;</td> </tr> <tr> <td align="center" width="24" height="19">1</td> <td width="22" height="19">&nbsp;</td> <td width="327" height="19" bgcolor="#CCFFFF">Bojor Ovidiu</td> <td width="99" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td> <td width="202" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td> <td width="172" align="right" height="19" bgcolor="#CCFFFF"></td> <td width="241" align="center" height="19" bgcolor="#CCFFFF"> <td width="394" align="center" height="19" bgcolor="#CCFFFF">&nbsp;</td> </tr>

Laborator HTML

<tr> <td align="center" width="24" height="20">2</td> <td width="22" height="20">&nbsp;</td> <td width="327" height="20" bgcolor="#FFFFCC">Banc Andrei</td> <td width="99" align="right" height="20" bgcolor="#FFFFCC">&nbsp;</td> <td width="202" align="right" height="20" bgcolor="#FFFFCC"></td> <td width="172" align="right" height="20" bgcolor="#FFFFCC">&nbsp;</td> <td width="241" align="center" height="20" bgcolor="#FFFFCC"> <td width="394" align="center" height="20" bgcolor="#FFFFCC">&nbsp;</td> </tr> <tr> <td align="center" width="24" height="19">3</td> <td width="22" height="19">&nbsp;</td> <td width="327" height="19" bgcolor="#CCFFFF">Constandache G</td> <td width="99" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td> <td width="202" align="right" height="19" bgcolor="#CCFFFF"></td> <td width="172" align="right" height="19" bgcolor="#CCFFFF">&nbsp;</td> <td width="241" align="center" height="19" bgcolor="#CCFFFF"> <td width="394" align="center" height="19" bgcolor="#CCFFFF"> &nbsp;</td> </tr> <tr> <td align="center" width="24" height="19">4</td> <td width="22" height="19">&nbsp;</td> <td width="327" height="19" bgcolor="#FFFFCC">Cristea Aurelia</td> <td width="99" align="right" height="19" bgcolor="#FFFFCC">&nbsp;</td> <td width="202" align="right" height="19" bgcolor="#FFFFCC"></td> <td width="172" align="right" height="19" bgcolor="#FFFFCC">&nbsp;</td> <td width="241" align="center" height="19" bgcolor="#FFFFCC">&nbsp;</td> <td width="394" align="center" height="19" bgcolor="#FFFFCC">&nbsp;</td> </tr> </table> </center> </div> </body> </html> Iata rezultatul:

Laborator HTML

Cadre Conceptul de cadru (frame) consta in divizarea ecranului in mai multe zone, fiecare

dintre acestea putand gazdui un document HTML. Obtinem astfel un ecran multifereastra pe care se pot vizualiza simultan mai multe documente HTML diferite, ca si in cazul ecranului unui televizor pe care se pot vedea simultan mia multe posturi. Fiecare zona este identificata printr-un nume propriu, ceea ce permite modificari punctuale la nivelul unei zone, fara a afecta pe celelalte. In mod standard, navigatorul incarca documentele unul peste altul, cel vizibil fiind cel curent. Deplasarea inainte sau inapoi se face cu ajutorul butoanelor back si forward. Cu ajutorul cadrelor se poate depasi aceasta limita, dedicand anumite zone ale ecranului (cadre) pentru realizarea unor sarcini precise.

Crearea cadrelor se face cu ajutorul a trei tag-uri FRAMESET, FRAME si NOFRAME. Structura unui document partajat in cadre difera de cea unui document clasic (figura 5.5.).

Intr-un document clasic se pot introduce orice tag-uri prin care se definesc texte, imagini, formulare, tabele. Pentru a se obtine un document partajat, in cadre se pot utiliza numai cele trei tag-uri amintite mai sus, care nu sunt destinate utilizatorului ci navigatorului (pentru structurarea ecranului in conformitate cu cerintele formulate). Asa cum se oberva din figura 5.5., in locul tag-ului <BODY> se foloseste tag-ul:

<FRAMESET COLS=vl, v2, ..... v" [FRAMEBORDER="no~yes"] [MARGINWIDTH="n"] [BORDERCOLOR="rrggbb"J> ...

</FRAMESET> <FRAMESET ROWS=v,, vz, ..... v" [FRAMEBORDER="no~yes"J

[MARGINWIDTH="n"] [BORDERCOLOR="rrggbb"J> ... </FRAMESET>

care divizeaza ecranul in cadre verticale (atributul COLS) sau orizontale (ROWS). Valorile v1, v2, ...., vn reprezinta dimensiunea cadrelor sub forma: - n, numarul de pixeli pentru latimea (COLS) sau inaltimea (ROWS) cadrului. - n%, procentul din latimea (COLS) sau inaltimea (ROWS) zonei parinte pe care i1 va ocupa cadrul. - n*, (n este optional) va aloca pentru cadru toata suprafata disponibila, daca mai multe elemente din lista se specifica sub aceasta forma, zona disponibila va fi impartita in mod egal intre acestea. Numarul de cadre este egal cu numarul de valori vi, v2, . , vn specificate prin atributele COLS sau ROWS.

Atributul FRAMEBORDER specifica daca separarea cadrelor se face printr-o bordura cu efect 3D (cu umbra), valoarea implicita pentru FRAMEBORDER=yes. Daca FRAMEBORDER=no latimea bordurii dintre cadre se specifica prin atributul MARGINWIDTH="n", valoarea 0 suprima bordura. Daca FRAMEBORDER="yes", atributul BORDERCOLOR="rrggbb" reprezinta culoarea bordurii.

Descrierea efectiva a unui cadru se face prin tag-ul: <FRAME [SRC="URL"] NAME="nume cadru" [MARGINWIDTH="n"] [MARGINHEIGHT="m"] [SCROLLING="yes~no~auto"] [NORESIZEJ> cu urmatoarele atribute:

- SRC indica URL-ul de unde se incarca documentul HTML ce va fi gazduit de cadru, daca nu se specifica, cadrul va fi gol.

- NAME, specifica numele cadrului, care va fi folosit ca tinta intr-o legatura hipertext prin noul atribut TARGET din tag-urile <A> si <FORM>.

- MARGINWIDTH si MARGINHEIGHT definesc spatiul intre document si marginea din stanga, respectiv cea de sus a cadrului.

Laborator HTML

- SCROLLING="yes" defineste o bara de defilare, ce este necesara pentru vizualizarea documentelor care pot fi afisate in totalitate in fereastra asociata cadrului. Daca atributul nu este specificat, navigatorul decide, in functie de dimensiunea documentului, afisarea barei de defilare.

- NORESIZE inhiba posibilitatea redimensionarii ferestrei cadrului cu ajutorul mouse-ului (ca orice fereastra).

Tag-ul <NOFRAMES></NOFRAMES> permite afisarea unui text explicativ pentru navigatoarele care nu suporta cadre. Acest text este ignorat in cazul celorlalte navigatoare. Cadrele pot fi imbircate pe mai multe niveluri.

O data definite cadrele, acestea pot fi utilizate pentru a gazdui documente HTML apelate prin intermediul legaturilor hipertext. In acest sens, tag-urile <A> si <FORM> au fost dotate cu un atribut nou TARGET, care specifica cadrul in care se va afla documentul asociat legaturii.

<A HREF="URL_document" TARGET="nume cadru">Text de legatura</A> <FORM ACTION="/cgi-bin/test" 'I'ARGET="nume cadru" METHOD="POST ................ </F0RM> Numele cadrului poate fi definit de utilizator sau predefinit. Numele predefinite sunt: · blank, documentul va fi afisat intr-o fereastra noua. · self, documentul va fi incarcat in cadrul unde se regaseste legatura hipertext de apel. · top, sterge toate cadrele existente si afiseaza documentul pe toata suprafata rezervata navigatorului (modul clasic). · parent, afiseaza documentul pe suprafata zonei in care a fost afisat documentul care a lansat legatura hipertext. Iata un exemplu de folosirea a cadrelor(s-au folosit elemente din site-ul www.fcrr.ro)

<html> <head> <title>Fundatia Culturala Renasterea Romana</title> </head> <frameset rows="150,*" frameborder="0" border="0" framespacing="0"> <frameset cols="166,*" frameborder="NO" border="0" framespacing="0"> <frame name="stema" scrolling="NO" noresize src="html/stema.htm" frameborder="NO" > <frameset rows="110,*" frameborder="0" border="0" framespacing="0"> <frame name="imag" scrolling="NO" noresize src="html/imag.htm" frameborder="NO" > <frame name="titlu" scrolling="NO" noresize src="titlu.htm" frameborder="NO" > </frameset> </frameset> <frameset cols="170,*" frameborder="NO" border="0" framespacing="0"> <frame name="menu" noresize scrolling="auto" src="menu.htm" frameborder="NO"> <frame name="main" src="html/prezentare.htm" scrolling="auto" noresize frameborder="NO"> </frameset > </frameset> <noframes> <body bgcolor="#FFFFFF" text="#000000" topmargin="1" leftmargin="1"> </body> </noframes> </html>

Laborator HTML

Rezultatul este:

Imagini reactive Imaginil reactive sunt imagini in care anumite zone pot deveni sensibile la mouse, in

sensul ca, prin activitatea acestora, se genereaza hipertext catre alte documente HTML. Altfel spus, ele pot inlocui tag-ul ancora din exprimarea textuala a limbajului HTML. Foarte multe servere Web au ca pagina principala o imagine reactiva cu mai multe zone click-abile, de unde se realizeaza conexiuni catre celelalte pagini de prezentare in detaliu.

Realizarea unei imagini reactive se objine in doua etape: · aducerea imaginii la dimensiunea dorita, prin simulari succesive si alegerea variantei potrivite. · stabilirea coordonatelor pentru zonele reactive ale imaginii, zonele reactive pot fi: patrate, cercuri sau poligoane.

Suprafata unei imagii se masoara in pixeli si are un sistem de coordonate cu originea altul din stanga sus (figura 5.6.).

Problema cea mai importanta in realizarea unei imagini reactive este trecerea de la coordonatele zonei click-abile la URL-ul care gazduieste documentul apelat. Acest lucru se realizeaza prin intennediul unor programe specializate. In acest sens exista doua metode:

* imagemap, cand programul de trecere al coordonatelor zonei click-abile catre URL-ul asociat se executa pe server, ceea ce mareste timpul de acces si traficul in retea

* usemap, cand progrmaul de trecere se excuta pe calculatorul clientului, reducand astfel timpul de acces si traficul pe retea. Pentru metoda imagemap dupa stabilirea coordonatelor zonelor click-abile se creaza un fisier in care acestea se inregistreazit sub forma: Zona URL XI, Y1 X2, Y2 Xn, Yn Punctul 1 Punctul 2 Punctul n Numarul de puncte necesar pentru descrierea unei zone click-abile este dependent de forma acesteia, dupa cum urmeaza: * Patratul (RECT) se defineste prin 2 puncte: coltul din stanga sus, coltul din dreapta jos. * Cercul (CIRCLE) se defineste prin 2 puncte: centrul si un punct de pe circumferinta. * Poligonul (POLY) se defineste prin maximul 100 de puncte care sunt colturile acestuia. Gestiunea imaginilor reactive nu este o functie intriseca a server-ului Web.

Laborator HTML

Programul imagemap, care se ocupa cu aceasta operatie, trebuie instalat in zone CGI a serverului Web.Descrierea in pagina HTML a unei imaginii reactive este: <A HREF="/cgi-bin/imagemap/zonec"> <IMG SRC="imaginer.gif' ISMAP> </A>

In momentul in care navigatorul intalneste aceasta secventa HTML, fisierul imaginer.gif va fi incarcat si afisat pe ecran. Daca utilizatorul executa clic pe una din cele 3 zone declarate ca zone click-abile, deoarece este inclus atributul ISMAP, navigatorul inregistreaza coordonatele mouse-ului si apeleaza programul imagemap din cgi-bin de pe server.

In momentul apelului se transmit catre server numele fisierului de descriere a zonelor click-abile zonec.map si coordonatele x si y ale mouse-ului. Metoda usemap este mai simpla decat imagemap, deoarece toate operatiile se executa pe calculatorul client. Astfel, imaginea reactiva se specifica fn documetnul HTML prin tag-ul <IMG> cu ajutorul atributului USEMAP, astfel: <IMG SRC="imaginer.gif' USEMAP="zonec">

Descrierea zonelor clickabile se obtine cu ajutorul tag-urilor MAP si AREA, dupa urmeaza: <MAP NAME="zonec">

<AREA SHAPE="rect" FIREF="http://wvv......" COORD="50,60 70,80"> <AREA SHAPE="circle" HREF="http://www......" COORD="50,60 70,80"> <AREA SHAPE="poly" HREF="http://www......" COORD="50,60 70,80 .....">

</MAP> In contextul limbajului JavaScript, imaginile reactive pot capata un comportament

dinamic, in functie de cele doua evenimente posibile pe tag-ul AREA: onMouseOver sau onMouseOut. Un exemplu de folosire a imaginilor reactive este mai jos(secventa din situl www.anffpa.ro): <html> .................... <body> .................... <div align=center><br><br> <img src=img/harta.jpg border="0" usemap="#Map" width="482" height="335"></div> <div align=center>&nbsp;</div> <map name="Map"> <area shape="poly" coords="105, 50, 108, 57, 110, 62, 118, 62, 122, 66, 137, 63, 147, 64, 140, 60, 147, 49, 152, 53, 157, 44, 152, 37, 163, 38, 170, 31, 150, 15, 130, 33, 124, 38, 115, 37" href="html/sm.htm"> .................... <area shape="poly" coords="309, 290, 314, 274, 308, 271, 301, 276" href="b.htm"> </map> .................... </body> </html>

Laborator HTML

Iata rezultatul:

Dind clik pe un judet se va activa o noua pagina de internet.

4. Tema de proiect.

Sa se realizeze o pagina de internet care sa va reprezinte. Aceasta va cuprinnde un CV detaliat in care veti trece datele personale, scolile urmate(date despre scoala in care ati invatat), obiectele la care ati dat Bacalaureatul, hobyuri-le dumneavoastra(cu detalii despre acestea).Va exista o sectiune link-uri utile in care dvs. Veti recomanda colegilor anumite site-uri de internet. Din punct de vedere tehnic trebuie sa folositi cadre, tabele, elemente grafice(imagini, culori), link-uri interne, locale si externe.

OBS. Folosirea de elemente sau tehnologii web pe care studentul nu stie sa le explice duce la

depunctarea dumneavoastra. Bibliografie: Sabin Corneliu Buraga – Aplicatii internet. *** Microinformatica – Introducere in Internet www.referate .ro www.e-referate.ro www.legi-internet.ro

www.wikipedia.org