Internet. mijloc de informare si comunicare

ŞCOALA NAŢIONALĂ DE STUDII POLITICE ŞI ADMINISTRATIVE

CURSUL : INTERNET – MIJLOC DE INFORMARE ŞI COMUNICARE Lect.univ.drd. Mihai GAVOTĂ

INTERNET

INTRODUCERE

2

Introducere Informaţie În sens practic vom înţelege prin informaţie orice descriere a lumii reale care conţine o semnificaţie pentru noi. Computer Computerul este un instrument performant capabil să stocheze şi să prelucreze informaţie. Reţea (în engleză net) O reţea de computere este un grup de computere interconectate. Scopul interconectării este schimbul de informaţii între ele. internet Un grup de reţele de computere interconectate formează o inter-reţea (în engleză internet). Internet Cea mai mare inter-reţea publică se numeşte Internet. Fiind o reţea publică accesul este permis oricărui utilizator. În afara reţelei Internet există şi reţele private în care accesul publicului larg nu este posibil. 2. Scurt istoric Anii ’60. ARPA În cadrul Departamentului Apărării Statelor Unite ale Americii (DOD, Department of Defense) funcţiona Agenţia pentru Proiecte de Cerecetare Avansate (ARPA, Advanced Research Projects Agency). Agenţia primeşte ca proiect de cercetare realizarea practică a interconectării reţelelor de computere ale bazelor militare americane. Această inter-reţea (ARPA) trebuia construită astfel încât să reziste unui atac atomic din partea unui potenţial inamic. IP (Internet Protocol) Protocolul IP a fost conceput special pentru a putea satisface obiectivele reţelei ARPA în condiţii de atac inamic. Protocolul realizează dirijarea informaţiei într-o inter-reţea. Pachete Înainte de fi lansată pe internet o informaţie aceasta este împărţită în pachete. Fiecare pachet are capacitatea de a circula în mod independent pe internet. Un pachet conţine:

• adresa sursei • adresa destinaţiei

INTERNET

INTRODUCERE

3

• numărul pachetului în cadrul informaţiei • un identificator pentru informaţia transmisă

Datorită adresei destinaţiei pe care o conţin pachetele, acestea pot circula independent pe internet şi ajung la destinaţie într-o ordine oarecare la momente de timp arbitrare. La destinaţie pachetele sunt repuse în ordine şi astfel informaţia iniţială este refăcută. 1969, ARPANET La dezvoltarea proiectului ARPA au fost invitate să participe 4 universităţi americane. Reţeaua ARPA se divide DARPA (partea militară) şi ARPANET (partea civilă). 1975 Este creat serviciul E-Mail pentru expedierea mesajelor electronice. Este crest serviciul TELNET pentru comanda de la distanţă a unui computer (remote control). 1979 Este creat serviciul UseNet pentru expedierea ştirilor pe internet. Anii ‘80 Apare protocolul TCP/IP care aduce corecţii la vechiul protocol IP. Apare NSF care interconectează supercalculatoarele din centrele universitare americane.

Anii ‘90 După anul 1990 pe Internet îşi fac apariţia firmele comerciale. Aceste firme prin investiţiile aduse contribuie foarte mult la dezvoltarea Internet-ului.

InterNIC Deşi Internet-ul nu are o structură administrativă bine determinată, după 1990 se face simţită nevoia unui organism care supervizeze activităţile care se petrec pe Internet. Astfel a apărut InterNIC. RFC (Request for Comments) Orice inovaţie adusă în tehnologiile legate de Internet care devine suficient de matură pentru a fi acceptată unenim de către utilizatori este cunoscută sub forma unei Cereri de Comentariu (Request for Coments). Există astăzi câteva mii de RFC-uri. WWW (World Wide Web) În 1991 în cadrul laboratoarelor de cercetare nucleară CERN, fizicianul Tim Berners-Lee a inventat o metodă de de expediere între cercetători a datelor ştiinţifice (text şi imagini). Această metodă a condus la naşterea celui mai popular serviciu Internet World Wide Web ( în traducere pânza de paianjen întinsă cât lumea întreagă).

INTERNET

INTRODUCERE

4

3. Modelul de referinţă Funcţionarea Internet-ului se bazează pe un model cu 4 niveluri numit model de referinţă (vezi figura de mai jos). 4. Nivelul Aplicaţie La acest nivel se află utilizatorul. El utilizează Internet-ul prin intermediul unor aplicaţii numite servicii Internet:

• WWW (World Wide Web). Prin intermediul unui browser (Internet Explorer sau Netscape Navigator) utilizatorul accesează informaţia (text, imagini, sunete, animaţii) aflată pe un server WWW oriunde în lume. Transferul de informaţie se face prin intermediul unui protocol numit HTTP (HiperText Transfer Protocol), protocolul de transfer a hipertextului.

• FTP (File Transfer Protocol). Acest protocol permite schimbul de fişiere între 2 computere conectate la Internet.

• E-Mail (Electronic Mail). Acest serviciu permite schimbul de mesaje electronice între 2 utilizatori pe Internet. Schimbul de nmesaje se face prin intermediul Protocolului SMTP (Send Mail Transfer Protocol), protocolul de transfer pentru expedierea mesajelor electronice şi prin intermediul protocoalelor POP3, IMAP, etc. pentru recepţionarea mesajelor electornice.

• TELNET (remote control). Acest serviciu permite controlul unui calculator de la distanţă prin intermediul Internet-ului.

• NEWS. Acest serviciu permite accesul la grupurile de ştiri prin intermediul Internet-ului.

Aplicaţie

Host to Host

Internet

Reţea Reţea

Internet

Host to Hos

AplicaţieWWW, FTP, E-Mail,

DNS

TCP, UDP

IP,

ARP, RARP

CSMA/CD

Aplicaţie

Host to Host

Internet

Reţea Reţea

Internet

Host to Hos

AplicaţieWWW, FTP, E-Mail,

DNS

TCP, UDP

IP,

ARP, RARP

CSMA/CD

INTERNET

INTRODUCERE

5

5. URL URL (Uniform Resource Locator) reprezintă un identificator unic al unei resurse pe Internet. Prin resursă pe Internet înţelegem un computer, un disc pe un computer, un fişier aflat pe un computer sau un fragment dintr-un fişier aflat pe un computer pe Internet. Un URL are următoarea sintaxă: protocol://hostname.domeniu/cale/fisier.extensie#ancora unde: 1. protocol reprezintă metoda de acces a resursei. Exemple de metode de acces:

http reprezintă metoda de acces la resursele aflate pe Internet prin intermediul serviciului WWW

ftp reprezintă metoda de acces la resursele aflate pe Internet prin intermediul serviciului FTP

news reprezintă metoda de acces la resursele aflate pe Internet prin intermediul serviciului NEWS 2. hostname reprezintă numele computerului (numele gazdei). El este stabilit de administratorul sistemului şi poate fi obţinut prin comanda hostname tastată la promptul MSDOS (linia de comandă). 3. domeniu reprezintă numele domeniului pe Internet în care se află computerul. Internetul este împărţit în domenii şi subdomenii. La nivelul cel mai înalt Internetul este împărţit în domeniile de nivel 1 ca de exemplu: com, org, edu, mil, net, us, ro, uk, etc. Aceste domenii de nivel 1 sunt împărţite la rândul lor în subdomenii (domenii de ordinul 2). De exemplu domeniul ro cuprinde ca subdomenii pe snspa, comunicare, kappa, edu, etc. La rândul lor domeniile de nivel 2 pot fi împărţite în alte subdomenii (domenii de nivel 3). De exemplu subdomeniul snspa din domeniul ro cuprinde ca subdomeniu pe comunicare (vezi figura de mai jos).

com ro edu

.

snspa mit netscape kappa

net

roedu

developer

comunicare

comunicare

INTERNET

INTRODUCERE

6

Pentru a obţine numele unui domeniu se parcurge ascendent structura arborescentă a subdomeniilor până la rădăcină. Exempel de domenii:

• comunicare.snspa.ro • kappa.ro • yahoo.com

Un computer are un nume unic pe Internet. Acesta are sintaxa: hostname.domeniu Exemple de nume de computere pe Internet:

• ns.comunicare.ro • www.yahoo.com

4. cale reprezintă calea către un fişier aflat pe computerul de pe Internet 5. ancora reprezintă un reper (etichetă) în interiorul unui fişier. Exemple de URL-uri:

• http://www.comunicare.ro/index.html • http://www.kappa.ro/inndex.html/#a1 • ftp://www.netscape.com/downloads/communicator

6. Nivelul Host to Host Nivelul Host to Host este nivelul conexiunilor pe Internet. La acest nivel întâlnim2 protocoale: 1. TCP (Transfer Control Protocol) este un protocol de control al transferului. Acest

protocol asigură o conexiune sigură şi bidirecţională între 2 computere pe Internet. Acest protocol împreună protocolul IP formează suita TCP/IP utilizată practic în toate reţelele de computere în momentul de faţă.

2. UDP (User Datagram Protocol) este protocolul de expediere a datagramelor (pachete de dimensiuni mici). Acest protocol este nesigur şi unidirecţional.

7. Nivelul Internet Nivelul Internet este dominat de protocolul IP (Internet protocol) care asigură dirijarea pachetelor pe Internet pentru a ajunge la destinaţie. Aşa cum am precizat anterior fiecare pachet circulă indepenndent pe Internet întrucât el are încapsulată adresa destinaţiei la care trebuie să ajungă. La nivelul Internet un computer se identifică unic prin adresa lui IP. Această adresă este un număr binar pe 32 de biţi. De regulă această adresă se exprimă prin 4 grupe de numere zecimale cuprinse între 0 şi 255. Exemple de adrese IP:

• 193.231.32.1 • 194.102.44.101

Adresele IP se grupează în clase. Există următoarele tipuri de clase: clasa C este de forma: r.r.r.c clasa B este de forma: r.r.c.c clasa A este de forma: r.c.c.c unde r reprezintă partea de reţea iar c reprezintă computerul. De exemplu clasa C 194.102.44.c poate avea cel mult 256 de drese IP, de la 194.102.44.0 la 194.102.44.255.

INTERNET

INTRODUCERE

7

8. Nivelul reţea Nivelul reţea este nivelul fizic reprezentat de mediul prin care circulă pachetele de date. Acest mediu poate fi:

• sârma de cupru • fibra optică • vidul (aerul) pentru comunicaţii radio

La acest nivel există mai multe protocoale depinzând de tipul reţelei de computere: • Ethernet • Token Ring • FDDI

Pentru o reţea de tipul Ethernet protocolul se numeşte CSMA/CD. Conectarea computerelor la o reţea Ethernet se face prin intermediul unor plăci de reţea (Network Card) de tip Ethernet. Fiecare placă de reţea are o adresă hardware (înscrisă în momentul fabricării) formată dintr-un număr pe 48 de biţi. De regulă această adresă se exprimă prin 6 grupe de câte 2 cifre hexagesimale. Exemplu: 6d 34 5f 4e bc 9a. Pentru a afla adresa hardware a plăcii de reţea tastaţi comanda route print la promptul MSDOS (linia de comanda). 9. Rezoluţia adreselor Aşa cum am stabilit până acum există 3 identificatori unici pentru un computer pe Internet:

• numele, Ex: www.comunicare.ro • adresa IP (software), Ex: 194.102.44.1 • adresa plăcii de reţea (hardware), Ex: a1 b2 c3 23 ae f5

Trecerea de la un identificator la alt identificator se face prin intermediul unor mecanisme de rezoluţie a adreselor. Trecerea de la nume adresa IP este făcută de serviciul DNS (Domain Name System) care rulează pe serverele DNS (Domain Name Server). Trecerea de la adresa IP la adresa hardware este făcută de protocolul ARP (Address Resolution Protocol) iar trecerea inversă de protocolul RARP (Revers Address Resolution Protocol). Ambele protocoale se află la nivelul Internet. 10. World Wide Web Serviciul WWW (World Wide Web) este practic serviciul Internet cel mai utilizat. El permite accesul la informaţia aflată pe un computer pe Internet, informaţie sub formă de text, imagini, sunete, filme etc.

INTERNET

INTRODUCERE

8

Aplicaţia WWW este o aplicaţie de tip client-server: • utilizatorul formulează o cerere prin intermediul unei aplicaţii client numite browser

(ca de exemplu Internet Explorer sau Netscape Navigator) • cererea este expediată de către aplicaţia client (browser) pe Internet • cererea ajunge pe severul destinaţie (serverul Web) care preia cererea prin

intermediul unei aplicaţii httpd • serverul interpretează cererea şi formulează răspunsul (caută paginile web solicitate,

imaginile, sunetele etc.) • răspunsul este expediat prin intermediul Internet-ului către computerul client • aplicaţia client recepţionează răspunsul şi îl interpretează (în fereastra browser-ului) 11. HTTP HTTP (HiperText Transfer Protocol, Protocolul de transfer a HiperTextului) este protocolul de comunicaţie între un browser şi un server de Web. Acest protocol este utilizat de către serviciul Internet WWW.

INTERNET

INTRODUCERE

9

12. HTML HTML (HiperText Markup Language, Limbajul de Marcare a HiperTextului) este limbajul în care sunt scrise paginile web, adică fişierele care citite şi interpretate de către browser). HiperTextul este un text îmbogăţit, un text care conţine marcaje speciale care permit încapsularea altor tipuri de informaţie: imagini, sunete, filme etc. 13. Comenzi în linia de comandă Pentru a verifica conexiunea la Internet există un număr de comenzi care se pot introduce în linia de comandă. Din meniul Start, Programs alegem Command Prompt (MSDOS-Prompt)

hostname Listează numele de gazdă al computerului

INTERNET

INTRODUCERE

10

ipconfig Listează adresa IP (software) a computerului, masca de reţea şi poarta implicită.

ping Verifică conexiunea cu un computer prin trimiterea şi recepţionarea unui pachet de date de dimensiuni reduse.

print route Listează adresa hardware a plăcii de reţea şi tabela de rutare.

INTERNET

INTRODUCERE

11

tracert Listează serverele intermediare între un computer sursă şi un computer destinaţie.

INTERNET

ÎNDRUMAR METODOLOGIC PRIVIND REALIZAREA PROIECTULUI

12

Indrumar metodologic privind realizarea proiectului 1. Obiectivul • Crearea unui site pentru o organizaţie publică sau privată (de preferat reală şi nu

ipotetică) 2. Alegerea organizaţiei Studenţii se vor orienta către acele firme sau organizaţii care vor accepta colaborarea cu studentul pe perioada realizării proiectului. Pot fi firme sau organizaţii: • la care studentul este angajat sau lucrează în colaborare • pe care studentul le cunoaşte foarte bine • care acceptă realizarea unui site de către student pe o perioadă determinată 3. Documentarea în vederea realizării proiectului presupune: • interviuri cu managerii organizaţiei, cu angajaţii, clienţii, partenerii sau cu publicul

larg despre scopul şi activităţile organizaţiei • strângerea informaţiilor sub formă de text, imagini, sunete, videoclipuri etc. legate de

organizaţie • strângerea de sigle, logo-uri, adrese, listă de parteneri, oferte de produse etc. • fonturi şi culori favorite 4. Proiectarea presupune • stabilirea conţinutul fiecărei pagini web, a imaginilor şi a legăturilor dintre ele • stabilirea elementelor constituente ale paginii Home • stabilirea unei hărţi a site-ului • stabilirea aplicaţiilor care vor utilizate pentru realizarea paginilor web (editoare

HTML, editoare grafice) 5. Implementarea proiectului presupune: • optimizarea imaginilor pentru web (orice imagine va fi sub 30K) • crearea paginilor web, inserarea imaginilor şi a legăturilor • introducerea de diacritice româneşti dacă site-ul va fi în limba română • introducerea datelor legate de autorul proiectului 6. Testarea proiectului presupune • corectarea textului, a legăturilor • verificarea funcţionării corecte pe mai multe computere, având monitoare de rezoluţii

diferite (600 X 800 pixeli, 768 X 1024 pixeli), utilizând mai multe browsere (Internet Explorer, Netscape Navigator etc.)

7. Predarea proiectului presupune • alegerea suportului (dischete sau CD) • alegerea datei de predare (zi programată pentru examen)

INTERNET

LECŢIA 1. PRIMA PAGINA WEB

13

Lecţia 1. Prima pagină web

Ciclul de viaţă al unui document HTML Un document HTML are următorul ciclu de viaţă:

1. Editarea documentului HTML cu ajutorul unui editor de texte (simplu sau specializat);

2. Salvarea documentului HTML cu extensia ".html" (pe computerul client sau pe un server de pagini web);

3. Vizualizarea documentului cu ajutorul unui browser; 4. Modificarea documentului; 5. Ştergereadocumentului când acesta devine inutil.

Prima pagină Exemplul următor prezintă cea mai simplă pagină web. Exemplul 1_1. Prima pagină.

Obs:

• Creaţi un fişier având conţinutul prezentat mai sus (adică "Prima pagina!"). • Salvaţi fişierul cu extensia ".html" (de exemplu "e1_1.html"). • Încărcaţi fişierul în browser-ul favorit pentru a-l vizualiza.

În anexa "Crearea primei pagini web" găsiţi în detaliu paşii de urmat pentru a crea prima pagină web pe un sistem "Windows".

Elementele standard ale unui document HTML Deşi documentul "e1_1.html" este perfect funcţional stilul în care a fost creat nu

se consideră elegant. Exemplul 1_2 prezintă un document HTML similar ca efect cu cel de la exemplul 1 dar conform cu specificaţiile HTML 4.0 întocmite de W3C (World Wide Web Consortium), organizaţie internaţională care stabileşte standarde pentru aplicaţiile INTERNET.

Prima pagina!

INTERNET


14

Exemplul 1_2. Un document HTML standard.

Salvaţi conţinutul acestui exemplu într-un fişier cu numele "e1_2.html" după care vizualizaţi pagina. Obs:

• Un document HTML este format din text şi marcaje (tag-uri). Textul conţine informaţia care va fi afişată în pagina web iar marcajele precizează modul în care acest text va fi afişat sau permit includerea în pagina a altor elemente (butoane, link-uri, imagini, sunete etc.).

• Un marcaj (tag) poate fi format din: a) Paranteza "<"; b) Caracterul "/" dacă marcajul este un marcaj final; c) Un cuvânt cheie (numele tag-ului); d) O listă de forma "atribut=valoare" dacă tag-ul are atribute; e) Paranteza ">". Exemple de marcaje: <html>, </html>, <body text=red bgcolor=green> unde "html" şi "body" sunt elemente, "text" şi "bgcolor" sunt atribute iar "red" şi "green" sunt valori.

• Un document "html" standard constă dintr-un bloc <html>…</html> care include alte două sub-blocuri: <head>…</head> şi <body>…</body>.

• Blocul <body>…</body> cuprinde conţinutul propriu-zis al paginii "html" adică ceea ce va fi afişat în fereastra browser-ului;

• Un tag poate fi scris atât cu litere mari cât şi cu litere mici; Obs: Caracterele "spaţiu" şi "tab" multiple (succesive) sunt echivalate cu un singur caracter "spaţiu". Caracterele "CR" şi "LF" sunt ignorate de către browser.

Astfel fişierul "e1_2.html" poate fi rescris fără a schimba conţinutul afişat de către browser şi astfel (salvaţile ca e1_2a.html, e1_2b.html respectiv e1_2c.html şi testaţi).

<html>

<head> </head> <body>

Prima Pagina! </body>

</html>

<HTML> <heaD> </Head> <bOdy> Prima Pagina! </BODY> </htMl>

<html><head></head><body>Prima Pagina!</body></html>

<html> <head> </head> <body> Prima Pagina! </body> </html>

INTERNET


15

Titlul unei pagini web Făra a fi obligatoriu se consideră elegant dacă fiecărui document HTML i se adaugă un titlu. Acest lucru se realizează cu ajutorul unui bloc <title>…</title> inserat în blocul <head>…</head>. Salvaţi conţinutul următor ca "e1_3.html" şi testaţi-l. Exemplul 1_3. Titlul unei pagini web.

Obs: • Conţinutul blocului <title>…</title> (în cazul de mai sus: "acesta este titlul primei

pagini") va apare în bara de titlu a ferestrei browser-ului. • Dacă blocul <title>…</title> lipseşte într-o pagină html atunci în bara de titlu a

ferestrei browser-ului va apare numele fişierului (în cazul de faţă "e1_3.html"); • Titlul unui document HTML trebuie ales cât mai sugestiv.

Sfârşitul de linie Să admitem că dorim să apară în pagina web (adică în ceea ce va afişa browser-ul) mai multe linii. Dacă vom crea fişierul "e1_4.html" sub forma:

atunci browser-ul va afişa "Prima linieA doua linieA treia linie" întrucât conform unei observaţii făcute mai sus caracterele de felul "CR/LF" sunt ignorate de browser. Trecerea pe o linie nouă se face numai la o comandă explicită care trebuie să apară în pagina html. Această comandă este marcajul <br> (de la "break line"=sfârşit de rând). Pentru a funcţiona conform aşteptărilor fişierul "e1_4.html" trebuie modificat astfel:

<html> <head> <title> acesta este titlul primei pagini </title> </head> <body> Acesta este continutul primei pagini! El va fi vizualizat de catre browser. </body> </html>

<html> <head> <title> Acesta este titlul primei pagini </title> </head> <body> Prima linie A doua linie A treia linie </body> </html>

INTERNET


16

Exemplul 1_4. Sfârşitul de linie.

Blocuri preformatate Pentru ca browser-ul să intrepreteze corect caracterele "spaţiu", "tab" şi "CR/LF" ce apar în cadrul unui text acest text trebuie inclus într-un bloc <pre>…</pre> ca în exemplul de mai jos. Obs: În mod implicit textul cuprins într-un bloc <pre>…</pre> este afişat cu caractere "monospace" (monospaţiate). Exemplul 1_5. Blocuri preformatate.

Salvati acest fişier ca "e1_5.html" şi încarcaţi-l în browser pentru a-l vizualiza. Pentru a observa facilităţile oferite de un bloc <pre>…</pre> testaţi următorul

exemplu distractiv: Exemplul 1_6. Un exemplu distractiv.

<html> <head> <title> Acesta este titlul primei pagini </title> </head> <body> Prima linie<br> A doua linie<br> A treia linie </body> </html>

<html> <head> <title> acesta este titlul primei pagini </title> </head> <body> <pre> (oo) \/||\/ _||_ </pre> </body> </html>

<html> <head> <title> acesta este titlul primei pagini </title> </head> <body> <pre> Prima linie

A doua linie indentata A treia linie de doua ori

indentata </pre> </body> </html>

INTERNET


17

Eliminaţi tag-urile <pre> şi </pre>, salvaţi din nou fişierul şi observaţi

modificările! Veţi constata că browser-ul va afişa secvenţa "(oo)\/||\/_||_" pe o singură linie.

Observaţii finale la lecţia 1 Obs: • Un document (fişier) HTML are extensia ".html" sau ".htm". El se numeşte şi fişier

sursă. • Un browser încarcă un document HTML (un fişier sursă), interpretează marcajele

conţinute în document iar rezultatul este afişat în fereastra browser-ului. Acest rezultat al interpretării se numeşte "pagină web".

• Un document conţine marcaje (comenzi sau tag-uri). Există două tipuri de marcaje sau tag-uri: (a) De tip "bloc" (pereche) conform sintaxei <nume_tag>bloc de elemente

</nume_tag> caz în care acţiunea precizată de numele tag-ului şi atributele acestuia are efect asupra blocului de elemente.

(b) De tip "solitar" (nepereche); de exemplu <br>. • Un marcaj (un tag) este delimitat de parantezele "<" şi ">". • Sunt "case-insensitive" adică pot fi scrise atât cu litere mici cât şi cu litere mari:

(a) Numele tag-urilor; (b) Numele atributelor; (c) Valorile atributelor.

• O pagină html standard este formată dintr-un bloc extern <html>…</html> şi două blocuri incluse: <head>…</head> (cap) şi <body>…</body> (corp).

• Trecerea la o linie nouă se face cu ajutorul tag-ului <br> (break). • Afişarea întocmai a conţinutului unui bloc de text din fişierul sursă se face incluzând

acest bloc între tag-urile <pre> şi </pre> (preformatat).

INTERNET

LECŢIA 2. CULORI, FONTURI ŞI MARGINI

18

Lecţia 2. Culori, fonturi şi margini În această lectie vom învăţa setările de bază ale unei pagini web: alegerea culorii de fond, a culorii textului şi alegerea dimensiunilor paginii.

Culoarea de fond Acest exemplu ne va arăta cum să alegem culoarea de fond a paginii web. O culoare poate fi precizată în două moduri:

1. Printr-un nume de culoare. Cel puţin următoarele 16 nume de culori sunt disponibile: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white şi yellow. În Anexa "Nume de culori" veţi găsi o listă mai completă cu numele de culori disponibile.

2. Prin construcţia " #rrggbb" unde r,g sau b sunt cifre hexagesimale şi pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f sau F. Se pot defini astfel 65536 de culori. S-a folosit aici modelul de culoare RGB (Red, Green, Blue). Conform acestui model o culoare se obţine din amestecul a trei culori fundamentale: roşu, verde şi albastru.

Obs: Este recomandat ca o culoare să fie delimitată prin două apostrofuri duble: "…". Exemple: "blue" sau "#0f4eA8".

Culoarea unei pagini se precizează prin intermediul unui atribut al tag-ului <body>.

Atributele sunt necesare pentru a particulariza acţiunea precizată de numele tag-ului.

Aceste atribute apar în interiorul parantezelor ce delimitează tag-ul după sintaxa: <tag atribut=valoare>.

De exemplu culoarea fondului paginii web este setată prin atributul "bgcolor" al tag-ului <body>. <body bgcolor=culoare> unde culoare se construieşte după modelul precizat mai sus. Pentru a realiza o pagină web cu fondul de culoarea galbenă putem proceda astfel:

Exemplul 2_1. Culoarea de fond.

<html> <head> <title> Exemplul 2_1 </title> </head> <body bgcolor="yellow"> Aceasta este o pagina web<br> cu fondul de culoarea galbena. </body> </html>

INTERNET


19

Culoarea textului Acest exemplu ilustrează cum poate fi setată culoarea textului unei pagini web. Acest lucru se face prin intermediul atributului "text" al tag-ului <body> după

sintaxa: <body text=culoare> unde "culoare" se precizează ca la exemplul 2_1. Pagina web următoare are textul de culoarea roşie. Exemplul 2_2. Culoarea textului.

Atribute multiple Un tag poate avea mai multe atribute. De exemplu un tag cu trei atribute arată

astfel: <tag atribut1=valoare1 atribut2=valoare2 atribut3=valoare3>.

Următorul exemplu prezintă modul de construire al unei pagini web cu fondul de culoare galbenă şi textul de culoare roşie: Exemplul 2_3. Text roşu pe fond galben.

Setarea fontului de bază Pentru afişarea unui text într-o pagină web se utilizează un font (adică un tip de litere) care este caracterizat de: • Mărime (prin atributul "size"); • Culoare (prin atributul "color"); • Font utilizat (prin atributul "style"). Acestea sunt atribute ale tag-ului <basefont>. Acesta este un tag nepereche (nu există delimitator de sfârşit de bloc). Sintaxa utilizată este: <basefont size=număr color=culoare style=font> unde:

<html><head> <title>Exemplul 2_3</title></head> <body bgcolor="yellow" text="red"> Aceasta este o pagina web cu fondul de culoarea galbena<br> si textul de culoarea rosie. </body></html>

<html><head><title>Exemplul 2_2</title> </head> <body text="red"> Aceasta este o pagina web cu textul de culoarea rosie. </body></html>

INTERNET


20

• număr poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic şi 7 pentru fontul cel mai mare);

• culoare este o culoare precizată prin nume sau printr-o construcţie RGB (vezi primul paragraf).

• font poate fi un font generic ca "serif", "sans-serif", "cursive", "monospace", "fantasy" sau poate fi un font specific instalat pe computerul clientului ca "Times New Roman", "Helvetica" sau "Arial". Se acceptă ca valoare şi o listă de fonturi separate prin "," de exemplu: "Times Roman, serif, monospace".

Obs: • Domeniul de valabilitate al setărilor precizate de acest tag este din locul în care apare

pâna la sfârsitul paginii sau până în locul în care apare alt tag <basefont>. • Dacă tag-ul <basefont> lipseşte atunci textul în pagina web are atribute implicite s-au

atribute precizate de browser-ul utilizat. Atributele implicite sunt: size=3, color="black" şi style="Times New Roman". În exemplul următor textul paginii web are la început atribute implicite după care este setat la "Arial", "green", 7.

Exemplul 2_4. Setarea textului de bază

Setarea marginilor paginii web Poziţionarea conţinutului paginii web faţă de marginile ferestrei browserului se poate face cu ajutorul a două atribute ale tag-ului <body>:

• "leftmargin" (setează distanţa dintre marginea din stânga a ferestrei browser-ului şi marginea din stânga a conţinutului paginii);

• "topmargin" (setează distanţa dintre marginea de sus a ferestrei browser-ului şi marginea de sus a conţinutului paginii);.

Obs: Ambele atribute pot primii următoarele valori posibile: • un număr întreg pozitiv reprezentând o distanţă măsurată în pixeli; • un procent din lăţimea respectiv înălţimea ferestrei browser-ului.

<html><head> <title>Exemplul 2_4</title></head> <body> Prima parte a prezentei pagini textul are atribute implicite.<br> <basefont style="Arial" color="green" size=7> A doua parte a paginii textul este scris cu fontul "Arial", culoarea verde si marimea 7. </body></html>

INTERNET


21

<html><head> <title>Exemplul 2_5</title></head> <body leftmargin="100" topmargin="20%"> Prima parte a prezentei pagini textul are atribute implicite.<br> <basefont style="Arial" color="green" size=7> A doua parte a paginii textul este scris cu fontul "Arial", culoarea verde si marimea 7. </body></html>

Exemplul 2_5. Setarea marginilor.

Recapitulare Acesta este un exemplu recapitulativ pentru cele învăţate în lecţia 2. Explicaţiile necesare le veţi găsi chiar în conţinutul paginii web pe care tocmai o

construiţi. Succes! Exemplul 2_6. Un exemplu recapitulativ.

<html><head><title>Exemplul 2_6</title></head> <body bgcolor="cyan" text="000000" leftmargin=80% topmargin=50> Aceasta pagina are fondul de culoarea "cyan" si textul de culoarea alba.<br> Textul are marimea implicita 3 iar fontul este cel implicit (posibil "TimesRoman")<br> In urmatoarele linii se schimba atributele de baza ale textului.<br> <basefont style="TimesRoman" size=1 color="red"> Text scris cu fontul "TimesRoman ", marimea 1, culoarea rosie.<br> <basefont size=3 color="green"> Text scris cu fontul implicit, marimea 3, culoarea verde.<br> <basefont size=5> Text scris cu fontul implicit, marimea 5, culoarea implicita (neagra).<br> <basefont style="Courier" size=7 color="magenta"> Text scris cu fontul "Courier", marimea 7, culoarea magenta.<br> </body></html>

INTERNET

LECŢIA 3. STILURI PENTRU BLOCURILE DE TEXT

22

Lecţia 3. Stiluri pentru blocurile de text În acestă lecţie sunt arătate posibilitaţile oferite de limbajul HTML pentru a alege

un stil pentru caracterele ce formează textul paginii web.

Caractere îngroşate Pentru ca un fragment de text să apară în pagină evidenţiat (îngroşat) el trebuie

inclus între delimitatorii <b> şi </b> (b vine de la "bold"=îndrăzneţ).

Exemplul 3_1. Caractere îngroşate.

Caractere mărite Pentru ca un fragment de text să fie format din caractere cu o unitate mai mare

decât cea curentă acest fragment trebuie inclus într-un bloc delimitat de tag-urile: <big> şi </big>. Obs: Blocurile <big>…</big> pot fi imbricate.

Exemplul 3_2. Caractere mărite.

Caractere micşorate Pentru ca un fragment de text să fie format din caractere cu o unitate mai mici

decât cea curentă acest fragment trebuie inclus într-un bloc delimitat de tag-urile: <small> şi </small>. Obs: Blocurile <small>…</small> pot fi imbricate.

<html><head><title><Exemplul 3_1</title></head><body> Aceasta linie este formata din text normal.<br> <b>Aceasta linie este scrisa in intregime cu caractere ingrosate.</b> In aceasta linie numai cuvantul <b>gros</b> este ingrosat. </body></html>

<html><head><title><Exemplul 3_2</title></head><body> Aceasta linie este formata din text normal.<br> <big>Aceasta linie este scrisa in intregime cu caractere marite cu o unitate.</big></br> Normal <big>marit <big>mai mare <big>si mai mare.</big></big></big> </body></html>

INTERNET


23

Exemplul 3_3. Caractere micşorate.

Caractere înclinate spre dreapta Pentru ca un fragment de text să fie format din caractere înclinate spre dreapta

acest fragment trebuie inclus într-un bloc delimitat de tag-urile: <i> şi </i> (i vine de la italic).

Exemplul 3_4. Caractere înclinate spre dreapta.

Caractere "sub-" şi "super-script" Pentru a insera fragmente de text aliniate "sub-script" şi "super-script" aceste

fragmente trebuie delimitate de tag-urile <sub></sub> respectiv <sup></sup>. Următorul exemplu arată cum pot fi introduse fragmente de text sub-scrip şi

super-script. Pentru a exemplifica mai bine în rândul al treilea al paginii web vom găsi următorul text specific limbajului matematic: F(y)=(x1+x2)2-y3. Urmăriţi cu atenţie fişierul sursă următor:

Exemplul 3_5. Caractere "sub-" şi "super-script".

<html><head><title><Exemplul 3_3</title></head><body> Aceasta linie este formata din text normal.<br> <small>Aceasta linie este scrisa in intregime cu caractere micsorate cu o unitate.</small></br> Normal <small>mai mic<small>si mai mic.</small></small><br> Normal <small>mai mic <big>normal <big>mai mare</big></big></small> </body></html>

<html><head><title><Exemplul 3_4</title></head><body> Aceasta linie este formata din text normal.<br> <i>Aceasta linie este scrisa in intregime cu caractere italice.</i></br> In aceasta linie numai fragmentul <i>aplecat spre dreapta</i> este italic. </body></html>

<html><head><title><Exemplul 3_5</title></head><body> Aceasta linie este formata din text normal.<br> In aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscript.<br> F<sub>(y)</sub>=(x<sub>1</sub>+x<sub>2</sub>)<sup>2</sup>-y<sup>3</sup> </body></html>

INTERNET


24

Caractere subliniate şi caractere "tăiate de o linie" În exemplul următor sunt introduse două tag-uri de tip bloc (pereche):

• <u> şi </u> pentru a insera un bloc de caractere subliniate; • <strike> şi </strike> sau <s> şi </s> pentru a insera un bloc de caractere secţionate pe

la mijloc cu o linie orizontală.

Exemplul 3_6. Caractere subliniate şi caractere "tăiate de o linie"

Stiluri fizice şi stiluri logice Până în acest moment au fost prezentate 8 stiluri de scriere a caracterelor unui bloc de text numite şi stiluri fizice întrucât nu s-a acordat nici o atenţie semnificaţiei informaţiei conţinută de aceste blocuri. În continuare sunt prezentate stilurile logice utilizate la formatarea unui bloc. Aceste stiluri ţin cont de semnificaţia pe care blocul o are în cadrul paginii web. Obs: Stilurile logice se bazează pe stilurile fizice iar modul lor de acţiune depind de browser-ul utilizat.

Blocuri evidenţiate În exemplul următor sunt introduse alte două tag-uri pentru a pune în evidentă (a scrie

în italic) fragmente de text: • <cite> şi </cite> ("cite" înseamnă citat); • <em> şi </em> (em vine de la "emphasize"=a evidenţia).

Obs: În locul lor se poate utiliza tag-ul echivalent <i>…</i>.

Exemplul 3_7. Blocuri de caractere evidenţiate.

<html><head><title><Exemplul 3_6</title></head><body> Aceasta linie este formata din text normal.<br> <strike>Aceasta linie este in intregime sectionata de o linie orizontala.</strike><br> In aceasta linie <u>underline</u> este subliniat iar <s>strike</s> este sectionat. </body></html>

<html><head><title><Exemplul 3_7</title></head><body> Aceasta linie este formata din text normal.<br> Colegiul National <cite>"Mihai Viteazul"</cite> din Bucuresti<br> este unul dintre <em>liceele de traditie</em> din Romania. </body></html>

INTERNET


25

Blocuri de caractere monospaţiate În continuare sunt prezentate trei tag-uri cu efecte similare. Ele permit scrierea

fragmentelor de text cu caractere monospaţiate (de tip maşină descris): • <code> şi </code> ("code" înseamna cod sau sursă); • <kbd> şi </kbd> (kbd vine de la "keybord"=tastatură); • <tt> şi </tt> (tt vine de la "teletype"=teleprinter).

Exemplul 3_8. Blocuri de caractere monospaţiate.

Blocuri de caractere clipitoare În exemplul următor apare tag-ul de tip bloc <blink>…</blink> care delimitează

fragmente de text ce clipesc. Obs: Acest tag este funcţional numai în browser-ul Netscape Communicator.

Exemplul 3_9. Caractere clipitoare.

Imbricarea tag-urilor Acest exemplu ne arată că tag-urile pot fi imbricate. De exemplu: • un fragment de text poate fi scris îngroşat şi italic în acelaşi timp; • un fragment de text poate fi subliniat, superscript, mărit şi italic în acelaşi timp.

<html><head><title><Exemplul 3_8</title></head><body> Aceasta linie este formata din text normal.<br> Codul functiei f(x,y) este: <code>Function f(x,y) {return x+y;}</code><br> Tastati urmatoarea comanda DOS: <kbd>copy c:\windows\* c:\temp</kbd><br> <tt>Asa scrie un teleprinter</tt> </body></html>

<html><head><title><Exemplul 3_9</title></head><body> Aceasta linie este formata din text normal.<br> <blink>Linia acesta clipeste.</blink><br> In aceasta linie fragmentul <blink>on/off</blink> clipeste. </body></html>

INTERNET


26

Exemplul 3_10. Imbricarea tag-urilor.

Blocul "q" Blocul <q>…</q> permite inserarea in-line a citatelor. Aceste citate sunt afişate de către browser în italic. Obs:

• Blocurile "q" pot fi imbricate ca în exemplul următor; • "q" vine de la "in-line quotation" (citate inserate in-line).

Exemplul 3_11. Blocul "q".

<html><head><title><Exemplul 3_10</title></head><body> Aceasta linie este formata din text normal.<br> Normal <b>ingrosat <i>ingrosat si italic</i> ingrosat</b> normal.<br> Normal <u>subliniat <b>subliniat si ingrosat <big>subliniat, ingrosat si marit.<br> <i>Subliniat, ingrosat, marit si italic.</i></big></b></u> </body></html>

<html><head><title><Exemplul 3_11</title></head><body> Maria povesti mai departe <q>M-am intors catre Mihai si l-am intrebat<q> Mergi maine la concert!</q> <q>Nu.</q> mi-a raspuns el.</q> In acest moment Maria se opri pentru o clipa. </body></html>

INTERNET

LECŢIA 4. SETAREA FONTURILOR

27

Lecţia 4. Setarea fonturilor

În această lecţie veţi învăţa cum să alegeţi caracterele (fonturile) cu care să scrieţi blocuri de text personalizate în cadrul unei pagini web.

Un font este caracterizat de urmatoarele atribute: • Culoarea (setată prin atributul "color"); • Tipul sau stilul (setat prin atributul "face"); • Mărimea (setată prin atributul "size"); • Mărimea în puncte tipografice (setată prin atributul "point-size"); • Grosimea (setată prin atributul "weight"). Toate aceste atribute aparţin elementului <font> care permite inserarea de blocuri de texte personalizate. Culori

O culoare poate fi precizată în două moduri: • Printr-un nume de culoare. Cel puţin următoarele 16 nume de culori sunt disponibile:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white şi yellow. În anexa "Nume de culori" este prezentat un tabel mai complet cu numele de culori disponibile.

• Printr-o constantă conformă standardului de culoare RGB (Red, Green, Blue). O astfel de constanta se formează astfel: #rrggbb unde r, g sau b sunt cifre hexazecimale. Cifrele hexazecimale sunt următoarele: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, a, A, b, B, c, C, d, D, e, E, f şi F. Numărul total de culori posibile este de 65536.

Exemple de culori RGB: #ff0000 este roşu (red), #00ff00 este verde (green), #0000ff este albastru (blue), #ffffff este alb (white), #000000 este negru (black), #28a7Fc este o culoare oarecare validă. Culoarea unui font

Pentru a scrie un fragment de text cu caractere de o anumită culoare se încadrează acest fragment prin delimitatorii <font> şi </font>, tag-ul <font> având setat atributul color la valoarea necesară: <font color=culoare>fragment de text de culoarea specificată</font>. Exemplul 4_1. Culoarea unui font.

<html><head><title>Exemplul 4_1</title></head><body> Aceasta linie este scrisa cu caractere normale.<br> <font color="red">Aceasta linie este rosie.</font><br> Aici <font color="red">fiecare</font> <font color="green">cuvant</font> <font color="yellow">are</font> <font color="00ff00">alta</font> <font color="0048Ae">culoare.</font><br> M<font color="olive">o</font><font color="gray">z</font><font color="cyan">a</font> <font color="magenta">i</font><font color="0f0e0d">c.</font> </body></html>

INTERNET


28

Familia fontului Pentru a scrie un text într-o pagină web pot fi folosite mai multe fonturi (stiluri de

caractere). Există cinci familii generice de fonturi care sunt de regulă disponibile pe toate

computerele utilizatorilor: "serif", "sans-serif", "cursive", "monospace" şi "fantasy". Alte fonturi mai specifice pot fi utilizate dacă acestea sunt disponibile pe

computerul client ca de exemplu: "Times" (un tip particular de "sans-serif"), "Helvetica" (un tip particular de "serif"), "Arial", "Courier" (un tip particcular de "monospace"), "Western" (un tip particular de "fantasy") şi altele.

Tipul de font necesar poate fi setat prin atributul "face" al tag-ului <font>. Pot fi introduse mai multe fonturi separate prin virgulă.

Exemplu: <font face="Arial, serif, monospace">. În acest caz browser-ul îl va utiliza pe primul font pe care îl va recunoaşte.

Exemplul 4_2. Familia fontului.

Mărimea fontului Pentru a seta mărimea unui font se utilizează atributul "size" al tag-ului <font>.

Valorile acestui atribut pot fi: • 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font şi 7 pentru cel mai mare); • +1, +2, etc pentru a creşte mărimea fontului cu 1, 2, etc faţă de valoarea curentă; • -1, -2, etc pentru a micşora mărimea fontului cu 1, 2, etc faţă de valoarea curentă;

Exemplul 4_3. Mărimea fontului.

<html><head><title>Exemplul 4_2</title></head><body> Aceasta linie este scrisa cu caractere normale.<br> <font face="monospace">Linie scrisa cu caractere monospatiate</font><br> <font face="Arial">Linie scrisa cu caractere Arial</font><br> <font face="TimesRoman, sans-serif">Linie scrisa cu caractere TimesRoman sau sans-serif</font><br> </body></html>

<html><head><title>Exemplul 4_3</title></head><body> Aceasta linie este scrisa cu caractere normale.<br> <font size="6">Fonturi de marimea 6. </font><br> <basefont size="4">Fonturi de marimea 4. <br> <font size="-3"> Fonturi de marimea 1. </font><br> <font size="+2">Fonturi de marimea 6. </font><br> </body></html>

INTERNET


29

Mărimea unui font poate fi setată exact cu ajutorului atributului "point-size" al tag-ului <font>. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numărul astfel precizat reprezintă marimea fontului în puncte tipografice. Obs: Acest atribut funcţionează numai cu Netscape Communicator.

Exemplul 4_4. Point-size.

Grosimea unui font Grosimea unui caracter poate fi setată cu ajutorul atributului "weight" al tag-ului <font>. Valorile posibile care pot fi date acestui atribut sunt 100, 200, 300, 400, 500, 600, 700, 800, şi 900 (100 pentru cel mai subtire font şi 900 pentru cel mai gros font).

Exemplul 4_5. Grosimea unui font. (???)

<html><head><title>Exemplul 4_4</title></head><body> Aceasta linie este scrisa cu caractere normale.<br> <font point-size="10">Fonturi de marimea 10 pt (puncte tipografice).</font><br> <font point-size="20">Fonturi de marimea 20 pt.</font><br> <font point-size="50">Fonturi de marimea 50 pt.</font><br> </body></html>

<html><head><title>Exemplul 4_5</title></head><body> Aceasta linie este scrisa cu caractere normale.<br> <font weight="100">Fonturi de grosimea 100.</font><br> <font weight="500">Fonturi de grosimea 500.</font><br> <font weight="900">Fonturi de grosimea 900.</font><br> </body></html>

INTERNET

LECŢIA 5. BLOCURI DE TEXT

30

Lecţia 5. Blocuri de text

În această lecţie veţi învăţa comenzi (tag-uri) la nivel de bloc de text. Toate aceste marcaje produc automat trecerea la un rând nou şi adăugarea unui extra-spaţiu.

Aceste comenzi nu se referă la caracteristicile caracterelor ce compun textul ci se referă la funcţiile pe care le poate avea un bloc de text în cadrul paginii web.

Inserarea unei adrese Dacă într-o pagină web trebuie inclusă o adresă atunci putem utiliza facilitătile

oferite de un tag dedicat: <address>…</address>. Multe browser-e afişează conţinutul cuprins între acesti delimitatori în italic, începând pe un rând nou.

Exemplul 5_1. Inserarea unei adrese. Obs: Blocurile de tip "adresă" includ informaţii despre persoana care a creat pagina web, adresa e-mail şi data creării acestei pagini. Aceste blocuri se plaseaza de obicei la sfârşitul paginii web dar pot apare şi la început.

Indentarea unui bloc Pentru ca un bloc de text să fie indentat (marginea din stânga să fie decalată la

dreapta cu o anumită cantitate) acesta trebuie inclus între tag-urile <blockquote> şi </blockquote>. Adesea browser-ele adaugă un spaţiu suplimentar înainte si după un blockquote.

Exemplul 5_2. Blockquote.

<html><head><title>Exemplul 5_1</title></head><body> Adresa institutiei noastre este: <adddress> Colegiul National Mihai Viteazul<br> Bulevardul Pache Protopopescu Nr. 62<br> Sector 2 Bucuresti Romania Europa </address> </body></html>

<html><head><title>Exemplul 5_2</title></head><body> Constantin Brancusi obisnuia sa spuna: <blockquote> <i>Simplitatea</i> nu este un scop in Arta, insa ajungi la simplitate fara voia ta, apropiindu-te de sensul cel real al lucrurilor. Simplitatea este in sine o complexitate - si trebuie sa te hranesti cu <i>esenta</i>, casa poti sa ii intelegi valoarea. </blockquote> </body></html>

INTERNET


31

Blocul "div" Modalitatea cea mai eficace de delimitare şi de formatare a unui bloc de text se

obţine prin folosirea delimitatorilor <div> şi </div>. Un parametru foarte util pentru setarea caracteristicilor unui bloc <div>

(diviziune) este "align" (aliniere). Valorile posibile ale acestui parametru sunt: • "left" (aliniere la stânga); • "center" (aliniere pe centru); • "right" (aliniere la dreapta).

Exemplul 5_3. Blocul "div". Obs:

• Un bloc <div….</div> poate include alte sub-blocuri. În acest caz alinierea precizată de atributul "align" al blocului "div" are efect asupra tuturor sub-blocurilor incluse în blocul "div";

• Un bloc <div>…</div> admite atributul "nowrap" care interzice ruperea rândurilor de către browser, lucrul acesta făcându-se numai acolo unde există marcaje care solicită explicit acest lucru.

Blocul preformatat În lecţia 1 a fost introdus tag-ul pereche <pre>…</pre> care permite păstrarea

caracteristicilor textului aşa cum au fost introdus în fişierul sursă (sunt interpretate corect caracterele "spaţiu", "tab" şi "CR/LF"). Obs:

• Într-un bloc <pre>…</pre> semnificaţia marcajelor HTML se păstrează; • Blocul <pre>…</pre> este indicat pentru a insera rânduri vide (spaţiu între liniile

succesive); • Caracterul "spaţiu" poate fi luat în considerare de browser dacă este inserat explicit

prin " ".

<html><head><title>Exemplul 5_3</title></head><body> Aceasta este o linie normala. Urmatorul bloc este aliniat la dreapta: <div align="right"> MOTTO:<br> "Misiunea artei este sa creeze <i>bucurie</i>;<br> si nu se poate crea artistic decat<br> in echilibru si in pace sufleteasca…"<br> <i>Constantin Brancusi</i> </div> Urmatorul bloc este aliniat pe centru: <div align="center"> "De cand viata mea te stie,<br> o suferinta port mereu;<br> Frumusetea ta-i o poezie,<br> pe care n-am facut-o eu."<br> <i>Lucian Blaga: Catren</i> </div> </body></html>

INTERNET


32

Prezentăm mai departe un alt exemplu care permite afişarea într-o pagina web a unui tabel:

Exemplul 5_4. Blocul preformatat.

Blocuri "plaintext" Într-un fişier html caracterele "<" şi ">" au o semnificaţie specială pentru browser.

Ele încadrează comenzile şi atributele de afişare a elementelor într-o pagină web. Dacă dorim ca un fragment de text să conţină astfel de caractere fără a avea semnificaţia specială implicită acest fragment trebuie încadrat de una din perechile de tag-uri:

• <xmp>…</xmp> (80 de caractere pe rând); • <listing>…</listing> (120 de caractere pe rând).

De asemenea în ultima parte a unei pagini web care începe cu marcajul <plaintext> nu sunt interpretate marcajele HTML. Obs:

• Aceste trei marcaje interpretează corect caracterele "spaţiu", "tag" şi "CR/LF". • Textul afişat în pagina web este monospaţiat.

<html><head><title>Exemplul 5_4</title></head><body> Planificarea examenelor in sesiunea iulie 1999 <pre> Examenul Data Sala Ora Grafica pe calculator 07.07.1999 EC105 8.00 Sisteme de operare 15.07.1999 ED221 14.00 Programare in Java 25.07.1999 EG210 9.00 </pre> </body></html>

INTERNET


33

Exemplul 5_5. Blocuri "plaintext".

Blocul paragraf Am văzut la Exemplul 1_4 că trecerea la o linie nouă se face cu ajutorul tag-ului

<br>. Acest lucru este posibil şi cu ajutorul tag-ului paragraf <p>. Spre deosebire de

acesta tag-ul <p> permite: • inserarea unui extra-spaţiu înainte de blocul paragraf; • inserarea unui extra-spaţiu după blocul paragraf dacă delimitatorul </p> există (acesta

fiind opţional). • alinierea textului cu ajutorul atributului "align" având valorile posibile: "left",

"center" sau "right".

Exemplul 5_6. Blocul paragraf.

<html><head><title>Exemplul 5_5</title></head><body> Un fisier html standard arata astfel: <xmp> <html> <head> </head> <body> Prima pagina web! </body> </html> </xmp> </body></html>

<html><head><title>Exemplul 5_6</title></head><body> Linia 1 <br>Linia 2 este generata de un break. <p>Linia 3 este generata de un un paragraf. Implicit paragraful este aliniat la stanga. <p align ="right">Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. Paragraf aliniat la dreapta. </p> <p align=center>Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. Paragraf aliniat in centru. </p> </body></html>

INTERNET


34

Blocuri "header"

Într-un text sunt necesare titluri (header-e) de capitole (paragrafe) de diferite dimensiuni. Acestea pot fi introduse cu ajutorul tag-urilor <h1>, <h2>, <h3>, <h4>, <h5> şi <h6>. Obs: • Toate aceste tag-uri se referă la un bloc de text şi trebuie însoţite de un tag de

încheiere similar, de exemplu: <h3>…</h3>. • Aceste tag-uri acceptă atributul align pentru alinierea titlului blocului de text la stânga

(implicit), în centru şi la dreapta. • Tag-ul <h1> permite scrierea unui titlu cu caracterele cele mai mari şi îngroşate pe

când <h6> permite scrierea unui titlu cu caracterele cele mai mici. • Toate browser-ele introduc un extra-spaţiu înainte de a afişa un titlu.

Exemplul 5_7. Blocuri "header".

Linii orizontale Într-o pagină web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul

tag-ului <hr>.

Exemplul 5_8. O linie orizontală.

Pentru a seta o linie orizontală se utilizează următoarele atribute ale tag-ului <hr>: • "align" permite alinierea liniei orizontale. Valorile posibile sunt: "left", "center" şi

"right". • "width" permite alegerea lungimii liniei. Valorile posibile pot fi:

<html><head><title>Exemplul 5_7</title></head><body> <h1 align="center">Titlu de marimea 1 aliniat in centru</h1> <h2>Titlu de marimea 2 aliniat la stanga (implicit)</h2> <h3 align="right">Titlu de marimea 3 aliniat la dreapta</h3> <h4 align="left">Titlu de marimea 4 aliniat la stanga</h4> <h5>Titlu de marimea 5</h5> <h6>Titlu de marimea 6</h6> </body></html>

<html><head><title>Exemplul 5_8</title></head><body> <h1 align="center">Linie orizontala</h1> <hr> <h2>Linia orizontala are parametrii impliciti</h2> <hr> </body></html>

INTERNET


35

(a) numere întregi pozitive reprezentând lungimea liniei în număr de pixeli; (b) numere între 1 şi 100 urmate de semnul "%" reprezentând procentul din lăţimea

paginii pe care se întinde linia. • "size" permite alegerea grosimii liniei. Valorile posibile sunt numere întregi

pozitive reprezentând grosimea liniei în pixeli (valoarea implicită este "2"). • "noshade" când apare setează o linie fără umbră; • "color" permite setarea culorii liniei.

Exemplul 5_9. Tipuri de linii orizontale.

Blocul "center" Blocul introdus de tag-urile <center> şi </center> aliniază la centru toate elementele conţinute de el. În exemplul următor este prezentat un mod de obţinere a unor efecte deosebite, într-o pagină web, cu unelte foarte simple.

Exemplul 5_10. Linii orizontale centrate.

<html><head><title>Exemplul 5_9</title></head><body> <h1 align="center">Tipuri de linii orizontale</h1> Urmeaza o linie implicita (aliniare stanga, latime 100%, grosime 2, cu umbra): <hr> Urmeaza o linie aliniata in centru, de latime 50%, grosime 5 pixeli, fara umbra: <hr align="center" width="50%" size="5" noshade> Urmeaza o linie de latime 200 de pixeli, aliniata la dreapta, grosime 10 pixeli, cu umbra: <hr align="right" width="200" size="10"> </body></html>

<html><head><title>Exemplul 5_10</title></head><body> <center> <hr width=10%> <hr width=40%> <hr width=70%> <hr width=100%> <hr width=70%> <hr width=40%> <hr width=10%> </center> </body></html>

INTERNET


36

Blocul "nobr" Blocul de text cuprins între <nobr> şi </nobr> va fi afişat pe o singură linie.

Exemplul 5_11. Blocul "nobr". Obs: Într-un bloc <nobr>…</nobr> se poate insera marcajul <wbr> pentru a sugera browser-ului locul în care poate fi rupt rândul dacă acest lucru este absolut necesar.

<html><head><title>Exemplul 5_10</title></head><body> <nobr> O singura linie.O singura linie. O singura linie.O singura linie. O singura linie.O singura linie. O singura linie.O singura linie. O singura linie.O singura linie. O singura linie.O singura linie. O singura linie. </nobr> </body></html>

INTERNET

LECŢIA 6. LISTE

37

Lecţia 6. Liste

În această lecţie veţi învăţa cum pot fi introduse liste într-o pagină web.

Liste neordonate O listă neordonată de elemente este un bloc de text delimitat de tag-urile

corespondente <ul> şi </ul> ("ul" vine de la "unordered list"=listă neordonată). Fiecare element al listei este iniţiat de tag-ul <li> (list item).

Obs: • Lista va fi indentată faţă de restul paginii web; • Fiecare item al listei începe pe un rând nou.

Exemplul 6_1. O listă neordonată. Obs: • Elementele <h1>, <h2> şi <hr> au fost utilizate în acest exemplu pentru ca pagina

web să aibă un aspect cât mai plăcut. Tag-urile <ul> şi <li> pot avea un atribut "type" care să seteze caracterul ce

prefixează fiecare element al listei. Valorile posibile ale acestui atribut sunt: • "circle" (cerc) pentru "Ο"; • "disc" (disc plin) pentru "!" (valoarea implicită); • "square" (pătrat) pentru """.

Exemplul 6_2. Lista neordonată cu itemi prefixaţi de """:

<html><head><title>Exemplul 6_1</title></head><body> <h1 align="center">Exemplul 6_1</h1> <hr> <h2>O lista neordonata</h2> <ul>Seria INTERNET va cuprinde urmatoarele carti: <li>HTML prin exemple <li>JavaScript prin exemple <li>Java prin exemple </ul> <body><html>

<html><head><title>Exemplul 6_2</title></head><body> <h1 align="center">Exemplul 6_2</h1> <hr> <h2>O lista neordonata</h2> <ul type="square">Seria INTERNET va cuprinde urmatoarele carti: <li>HTML prin exemple <li>JavaScript prin exemple <li>Java prin exemple </ul> <body><html>

INTERNET

LECŢIA 6. LISTE

38

Listele neordonate pot fi imbricate pe mai multe niveluri ca în exemplul de mai jos:

Exemplul 6_3. O lista neordonata de liste neordonate:

Liste ordonate O listă ordonată de elemente este un bloc de text delimitat de tag-urile

corespondente <ol> şi </ol> ("ol" vine de la "ordered list"=listă ordonată). Fiecare element al listei este iniţiat de tag-ul <li> (list item). Obs: • Lista va fi indentata faţă de restul paginii web; • Fiecare item al listei începe pe un rând nou.

Exemplul 6_4. O listă ordonată.

Tag-urile <ol> şi <li> pot avea un atribut "type" care să seteze tipul de caractere utilizat în ordonarea listei. Valorile posibile sunt: • "A" pentru pentru secvenţa de ordonare: A, B, C, D, etc (litere mari); • "a" pentru pentru secvenţa de ordonare: a, b, c, d, etc (litere mici); • "I" pentru pentru secvenţa de ordonare: I, II, III, IV, etc (numere romane mari); • "i" pentru pentru secvenţa de ordonare: i, ii, iii, iv, etc (numere romane mici);

<html><head><title>Exemplul 6_3</title> </head><body> <h1 align="center">Exemplul 6_3</h1> <hr> <h2>O lista neordonata de liste neordonate</h2> <ul>Elemente si atribute ale unei pagini html: <li>body <ul>Atribute:

<li>bgcolor <li>text

</ul> <li>font <ul>Atribute: <li>face

<li>size <li>color

</ul> </ul> <body><html>

<html><head><title>Exemplul 6_4</title></head><body> <h1 align="center">Exemplul 6_4</h1> <hr> <h2>O lista ordonata</h2> <ol>Pentru a realiza o pagina web trebuie: <li>creat un fisier de comenzi in limbajul html; <li>salvat fisierul cu extensia .html; <li>incarcat fisierul html intr-un browser. </ol> <body><html>

INTERNET

LECŢIA 6. LISTE

39

• "1" pentru pentru secvenţa de ordonare: 1, 2, 3, 4, etc (numere arabe) (setarea implicită).

Exemplul 6_5. O listă ordonată cu numere romane mari: Obs: Tag-ul <ol> poate avea un atribut "start" care să seteze valoarea iniţiala a secvenţei de ordonare. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

Exemplul 6_6. O listă ordonată cu litere mari începând de la valoarea "C":

Tag-ul <li> poate avea un atribut "value" care să seteze valoarea pentru acel item. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

Exemplul 6_7. O lista ordonată având itemi setaţi individual:

<html><head><title>Exemplul 6_5</title></head><body> <h1 align="center">Exemplul 6_5</h1> <hr> <h2>O lista ordonata cu cifre romane mari</h2> <ol type="I">Pentru a realiza o pagina web trebuie: <li>creat un fisier de comenzi in limbajul html; <li>salvat fisierul cu extensia .html; <li>incarcat fisierul html intr-un browser. </ol> <body><html>

<html><head><title>Exemplul 6_6</title></head><body> <h1 align="center">Exemplul 6_6</h1> <hr> <h2>O lista ordonata cu litere mari incepand cu valoarea C</h2> <ol type="A" start="3">Pentru a realiza o pagina web trebuie: <li>creat un fisier de comenzi in limbajul html; <li>salvat fisierul cu extensia .html; <li>incarcat fisierul html intr-un browser. </ol> <body><html>

<html><head><title>Exemplul 6_7</title></head><body> <h1 align="center">Exemplul 6_7</h1> <hr> <h2>O lista ordonata avand itemi setati individual</h2> <ol start="3">Repetati urmatorii pasi ai algoritmului: <li>salvati fisierul; <li value="5">incarcati fisierul in browser; <li>schimbati browser-ul utilizat. </ol> <body><html>

INTERNET

LECŢIA 6. LISTE

40

Listele ordonate pot fi imbricate între ele sau cu listele neordonate ca în exemplul următor:

Exemplul 6_8. O lista ordonată de liste ordonate şi neordonate:

Liste de definiţii O listă de definiţii este este formata dintr-o succesiune de termeni, fiecare termen

fiind urmat de o definiţie a acestui termen. Obs:

• Întreaga listă de definiţii se încadrează între tag-urile corespondente: <dl> şi </dl> (dl vine de la "definition list"=listă de definiţii);

• Un termen al listei este iniţiat de tag-ul <dt> (dt vine de la "definition term"=termen de definiţie);

• Definiţie a unui termen este iniţiată de tag-ul <dd> (dd vine de la "definition description"=descrierea definiţiei);

• Definiţia unui termen începe pe o linie nouă şi este indentată.

Exemplul 6_9. O listă de definiţii:

<html><head><title>Exemplul 6_8</title></head><body> <h1 align="center">Exemplul 6_8</h1> <hr> <h2>O lista ordonata de liste ordonate si neordonate</h2> <ol>Un sistem informatic include: <li>Hardware:

<ol><li>placa de baza<li>procesor <li> memorie</ol>

<li>Softtware de baza: <ul> <li> Windows <li> Unix <li> Linux</ul>

<li> Software de aplicatie: <ul type="disc"><li>AutoCad <li>CorelDraw<li> QuarkXPress</ul>

</ol> <body><html>

<html><head><title>Exemplul 6_9</title></head><body> <h1 align="center">Exemplul 6_9</h1> <hr> <h2>O lista de definitii</h2> <dl>Glossar de termeni pentru INTERNET <dt>Browser

<dd>Aplicatie ce ruleaza pe computerul client o pagina html <dt>Server WWW

<dd>Computer care raspunde la cererile de pagini html emise de un client </dl> <body><html>

INTERNET

LECŢIA 6. LISTE

41

Obs: Tag-urile <ul>, <ol> şi <dl> pot avea un atribut "compact" care permite afişarea compactă a listei. De exemplu în cazul unei liste de definiţii vom scrie: <dl compact>. Dacă acest atribut este prezent (el nu ia mai multe valori) atunci definiţiile termenilor încep pe aceeaşi linie cu termenii. Exemplul 6_10. O listă compactă de definiţii. Liste de meniuri O listă de meniuri este un bloc delimitat de tag-urile corespondente <menu> şi </menu> ("menu" înseamnă meniu). Fiecare element al listei este iniţiat de tag-ul <li> (list item). Obs:

• Cele mai multe browsere afişează lista de meniuri la fel ca o listă neordonată. • Nu se recomandă utilizarea acestui tip de listă.

Liste de directoare O listă de directoare este un bloc delimitat de tag-urile corespondente <dir> şi </dir> ("dir" vine de la director). Fiecare element al listei este iniţiat de tag-ul <li> (list item). Obs:

• Cele mai multe browsere afişează lista de directoare la fel ca o listă neordonată; • Nu se recomandă utilizarea acestui tip de listă.

Utilizări speciale ale listelor În acest paragraf vor fi prezentate câteva utilizări speciale ale listelor. Dacă într-o listă în loc de elementele listei introduse prin <li> se introduce un bloc de text atunci acest text va fi indentat (întocmai ca elementele unei liste). Exemplul 6_11. Un bloc de text indentat. În exemplul următor lista de definiţii are itemi <dt> şi <dd> multiplii.

<html><head><title>Exemplul 6_10</title></head><body> <h1 align="center">Exemplul 6_10</h1><hr> <h2>O lista compacta de definitii</h2> <dl compact>Glossar de termeni pentru INTERNET <dt>Browser

<dd>Aplicatie ce ruleaza pe computerul client o pagina html <dt>Server WWW

<dd>Computer care raspunde la cererile de pagini html emise de un client </dl> <body><html>

<html><head><title>Exemplul 6_11</title></head><body> <h1 align="center">Exemplul 6_11</h1> <hr> <h2>Un bloc de text indentat</h2> <ul> Acest bloc de text va fi indentat. Acest bloc de text va fi indentat. Acest bloc de text va fi indentat. Acest bloc de text va fi indentat. Acest bloc de text va fi indentat. Acest bloc de text va fi indentat. </ul> <body><html>

INTERNET

LECŢIA 6. LISTE

42

Exemplul 6_12. O listă de definiţii specială.

Liste personalizate În exemplul următor este creată o listă neordonată personalizată care utilizează pe post de itemi imagini şi texte.

Exemplul 6_13. O listă personalizată.

<html><head><title>Exemplul 6_12</title></head><body> <h1 align="center">Exemplul 6_12</h1> <hr> <h2>O lista de definitii speciala</h2> <dl>Program <dt><b>Luni</b> <dt><b>Marti</b> <dt><b>Miercuri</b> <dd><I>Ora 9.00.</I> Inscriere <dd><I>Ora 11.00.</I> Audieri <dd><I>Ora 13.30.</I> Raspunsuri </dl> <body><html>

<html><head><title>Exemplul 6_12</title></head><body> <h1 align="center">Exemplul 6_13</h1> <hr> <h2>O lista de definitii speciala</h2> <ul>Planete din Sistemul solar:<br> <img src="blue-ball.gif">Mercur<br> <img src="blue-ball.gif">Venus<br> <img src="blue-ball.gif">Neptun<br> </ul> <body><html>

INTERNET

LECŢIA 7. TABELE

43

Lecţia 7. Tabele

Aşa cum s-a putut constata până acum posibilităţile de aranjare a textului într-o pagina web sunt limitate. Tabelele ne permit să creăm o reţea rectangulară de domenii, fiecare domeniu având propriile setări pentru culoarea fondului, culoarea textului, aliniarea textului etc.

Un tabel simplu Pentru a insera un tabel folosim tag-urile corespondente: <table> şi </table>

("table" înseamnă tabel). Un tabel este format din rânduri. Pentru a insera un rând într-un tabel folosim tag-

urile: <tr> şi </tr> ("tr" vine de la "table row"=rând de tabel). Obs:

• Folosirea tag-ului de sfârşit </tr> este opţională. Un rând este format din mai multe celule ce conţin date. O celulă de date se

introduce folosind tag-ul <td> ("td" vine de la "table data"=date în tabel).

Exemplul 7_1. Un tabel simplu format din două linii şi trei coloane:

Un tabel cu chenar În mod implicit un tabel nu are chenar. Pentru a adăuga un chenar unui tabel se

utilizează un atribut tag-ului <table> numit "border". Acest atribut poate primi ca valoare orice număr întreg (inclusiv 0) şi reprezentă grosimea în pixeli a chenarului tabelului.

Obs: • Atributul "border" poate să nu fie urmat de o valoare, caz în care tabelul va avea un

chenar de grosime implicită egală cu 1 pixel. • O valoare egală cu "0" a grosimii chenarului semnifică absenţa chenarului; • Când are grosime nenulă chenarul unui tabel un are aspect tridimensional.

<html><head><title>Exemplul 7_1</title></head><body> <h1 align="center">Exemplul 7_1</h1> <h2>Un tabel simplu format din doua linii si trei coloane</h2> <table> <tr> <td>celula 11 <td>celula 12 <td>celula 13 <tr> <td>celula 21 <td>celula 22 <td>celula 23 </table> </body></html>

INTERNET

LECŢIA 7. TABELE

44

Exemplul 7_2. Un tabel cu chenar:

Alinierea tabelului în pagina web Pentru a alinia un tabel într-o pagină web se utilizează atributul "align" al tag-ului

<table> cu următoarele valori posibile: "left" (valoarea implicită), "center" şi "right". Alinierea unui tabel este importantă pentru textul ce înconjoară un tabel. Astfel:

• Dacă alinierea tabelului este la stânga (<table align="left">) atunci textul care urmează după punctul de inserare al tabelelui se va scurge pe lângă tabel pe partea dreaptă;

• Dacă alinierea tabelului este la dreapta (<table align="right">) atunci textul care urmează după punctul de inserare al tabelelui se va scurge pe lângă tabel pe partea stângă;

• Dacă alinierea tabelului este pe centru <table align="center">) atunci textul care urmează după punctul de inserare al tabelelui va apare pe toată lăţimea paginii imediat sub tabel.

Exemplul 7_3. Un tabel aliniat la dreapta:

<html><head><title>Exemplul 7_2</title></head><body> <h1 align="center">Exemplul 7_2</h1> <h2>Un tabel simplu format din doua linii si trei coloane</h2> <table border="5"> <tr><td>celula 11<td>celula 12<td>celula 13 <tr><td>celula 21<td>celula 22<td>celula 23 </table> </body></html>

<html><head><title>Exemplul 7_3</title></head><body> <h1 align="center">Exemplul 7_3</h1> <h2>Un tabel aliniat la dreapta</h2> Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. <table border align="right"> <tr><td>celula 11<td>celula 12<td> <tr><td>celula 21<td>celula 22<td> </table> Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. </body></html>

INTERNET

LECŢIA 7. TABELE

45

Temă: Copiaţi fişierul "e7_3.html" propus mai sus şi testaţi-l cu ajutorul unui browser. Schimbaţi apoi alinierea tabelului la centru şi apoi la stânga şi observati modificările care apar în pagina web.

Definirea culorilor de fond într-un tabel Culoarea de fond se poate seta cu ajutorul atributului "bgcolor" care poate fi ataşat

întregului tabel prin tag-ul <table>, unei linii prin tag-ul <tr> sau unei celule de date prin tag-ul <td>. Valorile pe care le poate primi atributul "bgcolor" sunt cele cunoscute pentru o culoare.

Obs: • Dacă în tabel sunt definite mai multe atribute "bgcolor" atunci ordinea prioritătii este

următoarea: <td>, <tr> şi <table> (cel mai puţin prioritar).

Exemplul 7_4. Un tabel colorat:

Obs: Culoarea textului din fiecare celulă poate fi setată cu ajutorul tag-ului: <font color="valoare">…</font>.

Dimensionarea celulelor unui tabel Distanţa dintre două celule vecine poate fi setată cu ajutorul atributului

"cellspacing" al tag-ului <table>. Obs:

• Valorile acestui atribut pot fi întregi pozitivi, inclusiv "0" şi reprezintă distanţa în pixeli dintre două celule vecine.

• Valoarea implicită a atributului "cellspacing" este "2".

Exemplul 7_5. Un tabel fără chenar de celule alipite

<html><head><title>Exemplul 7_4</title></head><body> <h1 align="center">Exemplul 7_4</h1> <h2>Un tabel colorat</h2> <table border="3" bgcolor="yellow"> <tr><td>galben 11 <td bgcolor="green">verde 12 <tr bgcolor="red"><td>rosu 21 <td bgcolor="cyan">cyan 22 </table> </body></html>

<html><head><title>Exemplul 7_5</title></head><body> <h1 align="center">Exemplul 7_5</h1> <h2>Un tabel fara chenar de celule alipite</h2> <table cellspacing="0"> <tr><td bgcolor="yellow" >galben 11<td bgcolor="green">verde 12 <tr><td bgcolor="red">rosu 21<td bgcolor="cyan">cyan 22 </table> </body></html>

INTERNET

LECŢIA 7. TABELE

46

Distanţa dintre marginea unei celule si conţinutul ei poate fi setată cu ajutorul

atributului "cellpadding" al tag-ului <table>. Obs:

• Valorile acestui atribut pot fi întregi pozitivi şi reprezintă distanţa în pixeli dintre marginea unei celule si conţinutul ei.

• Valoarea implicită a atributului "cellpadding" este "1".

Exemplul 7_6. Un tabel de celule mari

Dimensionarea unui tabel Dimensiunile unui tabel, lăţimea şi înălţimea pot fi setate exact prin intermediul a

două atribute "width" şi corespunzător "height" ale tag-ului <table>. Valorile acestor atribute pot fi:

• Numere întregi pozitive reprezentând lăţimea respectiv înălţimea în pixeli a tabelului; • Numere intregi între 1 şi 100 urmate de semnul "%" reprezentând fracţiunea din

lăţimea respectiv înălţimea totală a paginii.

Exemplul 7_7. Un tabel de 300 pixeli X 50%

Obs: • Dacă dimensiunile precizate de atribute sunt mai mari decât cele necesare afişării

tabelului atunci vor fi folosite aceste dimensiuni precizate; • Dacă dimensiunile precizate de atribute sunt mai mici decât cele necasare afişării

tabelului atunci tabelul va fi ajustat la dimensiunile necesare. În exemplul următor se utilizează un truc care ne permite afişarea într-o pagină web a unui text poziţionat în centrul paginii. Pentru a realiza acest lucru se declară un tabel mare cât întreaga pagină ce conţine o singură celulă. Textul din interiorul celulei este aliniat implicit pe verticală centrat şi explicit pe orizontală de asemenea centrat.

<html><head><title>Exemplul 7_6</title></head><body> <h1 align="center">Exemplul 7_6</h1> <h2>Un tabel de celule mari</h2> <table border cellpadding="20"> <tr><td>galben 11<td>verde 12 <tr><td>rosu 21<td>cyan 22 </table> </body></html>

<html><head><title>Exemplul 7_7</title></head><body> <h1 align="center">Exemplul 7_7</h1> <h2>Un tabel de 300 pixeli X 50%</h2> <table border width="300" height="50%"> <tr><td>celula 11<td>celula 12 <tr><td>celula 21<td>celula 22 </table> </body></html>

INTERNET

LECŢIA 7. TABELE

47

Exemplul 7_8. Un text centrat într-o pagină web.

Zona din jurul unui tabel Am văzut în exemplul 7_3 modul în care curge un text în jurul unui tabel aliniat

într-o pagină web. Distanţa dintre tabel şi celelalte elemente din pagina web poate fi setată cu ajutorul atributelor "hspace" şi "vspace" ale tag-ului <table>.

Obs: • Valoarea atributului "hspace" poate fi orice număr întreg pozitiv, inclusiv "0" şi

reprezintă distanţa pe orizontală dintre tabel şi celelalte elemente ale paginii web; • Valoarea atributului "vspace" poate fi orice număr întreg pozitiv, inclusiv "0" şi

reprezintă distanţa pe verticală dintre tabel şi celelalte elemente ale paginii web; • Aceste atribute funcţionează numai cu Communicator. Exemplul 7_9. Un tabel simplu aliniat la stânga înconjurat la distanţă de text:

<html><head><title>Exemplul 7_9</title></head><body> <h1 align="center">Exemplul 7_9</h1> <h2>Un tabel aliniat la dreapta inconjurat la distanta de text</h2> Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. Text inainte de tabel. <table border align="left" hspace="200" vspace="20"> <tr><td>celula 11<td>celula 12<td> <tr><td>celula 21<td>celula 22<td> </table> Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. Text dupa tabel. </body></html>

<html> <head> <title>Exemplul 7_8</title> </head> <body> <table width="100%" height="100%"> <tr> <td align=center> <h2>Text centrat.<h2> </table> </body> </html>

INTERNET

LECŢIA 7. TABELE

48

Titlul unui tabel Unui tabel i se poate ataşa un titlu cu ajutorului tag-ului <caption> (de la "table

caption"=titlu de tabel). Acest tag trebuie plasat în interiorul tag-urilor <table>…</table> dar nu în interiorul tag-urilor <tr> sau <td>.

Titlul unui tabel poate fi aliniat cu ajutorul atributului "align" al tag-ului <caption> care poate lua valorile:

• "bottom" (sub tabel); • "top" (deasupra tabelului); • "left"(la stânga tabelului); • "right" (la dreapta tabelului).

Exemplul 7_10. Un tabel cu titlu

Cap de tabel Un tabel poate avea celule cu semnificaţia de cap de tabel. Aceste celule sunt

introduse de tag-ul <th> ( de la "table header"=cap de tabel) în loc de <td>. Obs:

• Toate atributele care pot fi ataşate tag-ului <td> pot fi deasemenea ataşate tag-ului <th>;

• Conţinutul celulelor definite cu <th> sunt îngroşate (scrise cu bold) şi centrate.

Exemplul 7_11. Un tabel cu titlu şi cap de tabel

<html><head> <title>Exemplul 7_10</title> </head> <body> <h1 align="center">Exemplul 7_10</h1> <h2>Un tabel cu titlu</h2> <table border> <caption align="top">Fructe <tr><td>mure<td>zmeura<td>afine <tr><td>mere<td>pere<td>cirese </table> </body> </html>

<html><head><title>Exemplul 7_11</title></head><body> <h1 align="center">Exemplul 7_11</h1> <h2>Un tabel cu titlu si cap de tabel</h2> <table border> <caption align="bottom"> Bilantul in saptamana 11-15 mai <tr><th>Bilant\Zile <th>Luni<th>Marti<th>Miercuri <th>Joi<th>Vineri <tr><th>Intrari<td>1000<td>2000 td>3000 <td>4000<td>5000 <tr><th>Iesiri<td>100<td>200<td>300 <td>400<td>500 </table> </body></html>

INTERNET

LECŢIA 7. TABELE

49

Alinierea conţinutului unei celule Alinierea pe orizontală a conţinutului unei celule se face cu ajutorul atributului

"align" care poate lua valorile: • "left" (la stânga); • "center" (centrat); • ”right" (la dreapta); • "char" (alinierea se face în raport cu un caracter);

Obs: Valoarea implicită este "center" (centrat). Dacă alinierea este de tipul "char" atunci caracterul în raport cu care se face alinierea este setat de atributul "char" care primeşte ca valoare caracterul de aliniere. În mod implicit acest caracter este ".".

Alinierea pe verticală a conţinutului unei celule se face cu ajutorul atributului "valign" care poate lua valorile:

• "baseline" (la bază); • "bottom" (jos); • "middle" (la mijloc); • "top" (sus).

Obs: Valoarea implicită este "middle" (la mijloc). Aceste atribute pot fi ataşate atât tag-ului <tr> pentru a seta alinierea tuturor

celulelor unui rând cât şi tag-urilor <td> şi <th> pentru a seta alinierea într-o singură celulă.

Exemplul 7_12. Un tabel având continutul celulelor aliniate în diverse moduri

Dimensionarea exactă a celulelor unui tabel Dimensiunile unei celule de tip <td> sau de tip <th> pot fi dimensionate exact cu

ajutorul a două atribute ale acestor tag-uri "width" pentru lătime şi "height" pentru înălţime.

Valorile posibile ale acestor atribute sunt:

<html><head><title>Exemplul 7_12</title></head><body> <h1 align="center">Exemplul 7_12</h1> <h2>Un tabel avand continutul celulelor aliniate in diverse moduri</h2> <table border width="50%" height="50%"> <tr><td>aici<td>alinierea<td>este <td>centru<td>stanga (implicita) <tr align="right" valign="top"> <td>aici <td>alinierea<td>este <td>dreapta<td>sus <tr><td valign="top">sus <td valign="bottom">jos <td align="left">stanga <td align="right">dreapta <td align="right" valign="bottom">dreapta si jos </table></body></html>

INTERNET

LECŢIA 7. TABELE

50

• numere întregi pozitive (inclusiv "0") şi reprezintă dimensiunea în pixeli a lăţimii respectiv înălţimii unei celule;

• procente din lăţimea respectiv înălţimea tabelului.

Exemplul 7_13. Un tabel cu celule de 50X100 de pixeli

Obs:

• Dacă dimensiunile precizate de atribute sunt mai mari decât cele necesare afişării tabelului atunci vor fi folosite aceste dimensiuni precizate;

• Dacă dimensiunile precizate de atribute sunt mai mici decât cele necasare afişării tabelului atunci tabelul va fi ajustat la dimensiunile necesare.

În exemplul următor se crează cu ajutorul unui tabel având lăţimea 80% din laţimea paginii 3 coloane de text având lăţimile 25%, 50% respectiv 25% din lăţimea paginii. Exemplul 7_14. Un tabel cu coloane de text.

<html><head><title>Exemplul 7_13</title></head><body> <h1 align="center">Exemplul 7_13</h1> <h2>Un tabel cu celule de 50X100 de pixeli</h2> <table border> <tr><td width="50" height="100">celula 11<td width="50" height="100">cel 12 <tr><td width="50" height="100">cel 21<td width="50" height="100">cel 22 </table> </body></html>

<html><head><title>Exemplul 7_14</title></head><body> <center><table width="80%"> <tr><td width="25%" valign=top>Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana. <td width="50%" valign=top> Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. <td width="25%" valign=top> Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. </table></center> </body></html>

INTERNET

LECŢIA 7. TABELE

51

Tabele de forme oarecare Un tabel trebuie privit ca o reţea rectangulară de celule. Cu ajutorul a două

atribute ale tag-urilor <td>sau <th> o celulă se poate extinde peste celulele vecine. Astfel: • Extinderea unei celule peste celulele din dreapta ei se face cu ajutorul atributului

"colspan" a cărui valoare determină numărul de celule care se unifică; • Extinderea unei celule peste celulele de sub ea se face cu ajutorul atributului

"rowspan" a cărui valoare determină numărul de celule care se unifică; Obs:

• Sunt posibile extinderi simultane ale unei celule pe orizontală si pe verticală. În acest caz vor fi prezente în tag-urile <td>sau <th> ambele atribute "colspan" şi "rowspan";

• În definirea tabelului o celulă extinsă este introdusă printr-un singur tag <td> sau <th>.

Exemplul următor arată modul în care într-o reţea rectangulară de 4X4 celule se formează celule extinse (vezi şi figura alăturată). Exemplul 7_15. Un tabel cu celule extinse

Atributul "nowrap" Atributul "norap" aparţine elementelor <td> şi <th> şi interzice întreruperea unei linii de text. Astfel în tabel pot apare coloane având lăţimea oricât de mare.

Exemplul 7_16. Atributul "nowrap".

Celulele vide ale unui tabel Dacă un tabel are celule de date vide atunci aceste celule nu vor apărea în tabel nici măcar cu un chenar de delimitare. Pentru a afişa un chenar pentru celulele vide se utilizează următoarele trucuri:

• După <td> se pune caracterul " ";

<html><head><title>Exemplul 7_15</title></head><body> <h1 align="center">Exemplul 7_15</h1> <h2>Un tabel cu celule extinse</h2> <table border> <tr><td rowspan="3">c11<br>c21<br>c31 <td>c12<td colspan="2" rowspan="3"> c13, c14<br>c23, c24 <br>c33, c34 <tr><td>c22 <tr><td>c32 <tr><td>c41<td colspan="3">c42, c43, c44 </table> </body></html>

<html><head><title>Exemplul 7_16</title></head><body> <h1 align="center">Exemplul 7_16</h1> <h2>Un tabel cu celule de latime mare</h2> <table border> <tr><td>celula 11<td>celula 12 <tr><td nowrap>celula 21<td>celula 22 este foarte lata. Celula 22 este foarte lata. Celula 22 este foarte lata. </table> </body></html>

INTERNET

LECŢIA 7. TABELE

52

• După <td> se pune <br>. Obs: Caracterul " " (no break space) este caracterul pentru "spatiu". Un "spaţiu" introdus prin intermediul acestui caracter nu va fi ignorat de browser.

Exemplul 7_17. Un tabel cu celule vide.

Atribute "Internet Explorer" pentru tabele Următoarele atribute ale tag-ului <table> funcţionează cu Internet Explorer 4.0 dar nu funcţionează cu Netscape Communicator 4.5:

• "background" permite setarea unei imagini pentru fondul unui tabel. Primeşte ca valoare URL-ul imaginii folosite pentru fond.

• "bordercolor" permite setarea culorii pentru chenarul unui tabel; • "bordercolorlight" permite setarea culorii pentru chenarul 3D al unui tabel; • "bordercolordark" permite setarea culorii pentru chenarul 3D al unui tabel.

Exemplul 7_18. Atribute "Internet Explorer" pentru tabele.

Grupuri de coloane Blocul <colgroup>…</colgroup> permite setarea unui grup de coloane. Atributele acceptate de <colgroup> sunt:

• "span" determină numărul de coloane dintr-un grup; • "width" determină o lăţime unică pentru coloanele din grup; • "align" determină un tip unic de aliniere pentru coloanele din grup.

Exemplu:

<html> <head> <title>Exemplul 7_17</title> </head> <body> <h1 align="center">Exemplul 7_17</h1> <h2>Un tabel cu celule vide.</h2> <table border> <tr><td>c11<td>c12><td>c13 <tr><td> <td><td><br> </table> </body></html>

<html><head> <title>Exemplul 7_18</title> </head><body> <h1 align="center">Exemplul 7_18</h1> <h2>Atribute "Internet Explorer"</h2> <table border=5 background="aol_wl.gif" cellspacing=10 bordercolorlight=red bordercolordark=blue> <tr bgcolor=yellow><td>c11<td>c12<td>c13 <tr bgcolor=yellow><td> <td><td><br> </table> </body></html>

INTERNET

LECŢIA 7. TABELE

53

<colgroup span="3" width="100"></colgroup> Obs: Într-un bloc <colgroup> coloanele pot avea setări diferite dacă se utilizează elementul <col> care admite atributele:

• "span" identifică coloana din grup pentru care se face setarea. Dacă lipseşte atunci coloanele sunt setate în ordine;

• "width" determină o lăţime pentru coloana identificată prin "span"; • "align" determină o aliniere pentru coloana identificata prin "span".

Exemplul 7_19. Grupuri de coloane.

Atributele "frame" şi "rules" Atributul "frame" al tag-ului <table> permite specificarea părţilor din chenarul unui tabel care vor fi afişate. Valorile posibile ale acestui atribut sunt: "void", "above", "below", "hsides", "lhs", "rhs", "vsides", "box", "border". Atributul "rules" al tag-ului <table> permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt: "none", "groups", "rows", "cols", "all".

Exemplul 7_20. Atributele "frame" şi "rules".

Sub-blocurile unui tabel În specificaţiile HTML 4.0 conţinutul unui tabel poate fi împărţit în sub-blocuri prin elementele:

<html><head><title>Exemplul 7_19</title></head><body><center> <table width="400" cellspacing=10> <colgroup> <col width="100" align=right> <col width="100" align=center> <col width="200" align=right> </colgroup><tr> <td valign=top>Text in prima coloana. Text in prima coloana. Text in prima coloana. Text in prima coloana. <td valign=top> Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. Text in coloana a doua. <td valign=top> Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. Text in coloana a treia. </table></center></body></html>

<html><head><title>Exemplul 7_20</title></head><body> <center> <table width="400" frame=lhs rules=all cellspacing=10> <tr><td>c11<td>c12<td>c13 <tr><td>c21<td>c22<td>c23 </table> </center> </body></html>

INTERNET

LECŢIA 7. TABELE

54

• <thead><tr><td>…</thead> (un singur rând); • <tfoot><tr><td>…</tfoot> (un singur rând); • <tbody><tr>…<tbody> (oricâte rânduri).

Obs: În tr-un tabel există un singur sub-bloc de tipul <thead> şi un singur sub-bloc de tipul <tfoot> dar pot exista mai multe sub-blocuri de tip <tbody>.

INTERNET

LECŢIA 8. IMAGINI

55

Lecţia 8. Imagini

O facilitate extraordinară a limbajului HTML este posibilitatea includerii (încapsulării) unei imagini.

Tipuri de fişiere pentru imagini Imaginile sunt stocate în fişiere în mai multe formate. Formatele acceptate de

browser-e pentru fişierele imagine sunt: • GIF (Graphics Interchange Format) (au extensia ".gif"); • JPEG (Joint Photographic Experts Group) (au extensia ".jpeg" sau ".jpg"); • XPM (X PixMap) (au extensia ".xmp"); • XBM (X BitMap) (au extensia ".xbm"); • BMP (BitMap) (au extensia ".bmp") (Numai cu browser-ul Internet Explorer); • DIB (Device Independent Bitmap); • TIFF (Tagged Image File Format) (au extensia ".tif" sau ".tiff"); • PCX (PC Paintbrush); • PNG (Portable Network Graphics) (au extensia ".png"). Obs: Cele mai răspândite formate sunt GIF (8 biţi pentru o culoare, 256 de culori posibile) şi JPEG (24 de biţi pentru o culoare, 16.777.216 de culori posibile).

URL-ul unei imagini Uniform Resource Locator (URL) (în traducere Identificator Uniform al

Resursei) este un standard folosit în identificarea unică a unei resurse pe INTERNET. În lecţia 9 veţi învăţa în detaliu despre URL-uri.

Toate imaginile cu care vom lucra în această lecţie vor avea adresa (URL-ul) exprimată în funcţie de directorul în care se află documentul HTML care face referire la imagine. În Anexa "Căutarea fişierelor de imagine" este prezentat un algoritm pentru identificarea fişierelor de imagine aflate pe un sistem "Windows".

Prima pagină web care conţine o imagine Pentru a insera într-o pagină web o imagine se utilizează tag-ul <img> ("img"

vine de la "image"=imagine). Pentru a putea identifica imaginea care va fi inserată se utilizează un atribut al tag-ului <img> şi anume "src" ("src" vine de la "source"=sursă).

Valoarea acestui atribut este URL-ul imaginii. Obs: • Dacă imaginea se află în acelaşi director cu fişierul html care face referire la imagine

atunci URL-ul imaginii este format numai din numele imaginii inclusiv extensia. Exemplu: "nume.extensie" unde "nume" este numele fişierului imagine iar "extensie" este extensia fişierului imagine.

• Exemplele care urmează presupun că în fişierele imagine utilizate se află în directorul care este necesar (implicit în directorul curent de lucru).

INTERNET

LECŢIA 8. IMAGINI

56

Exemplul 8_1. Prima pagină web care conţine o imagine Obs: • Numiţi fişierul de mai sus "e8_1.html", salvaţi-l în directorul de lucru (de exemplu

"c:\html"); • Schimbaţi numele fişierului imagine (valoarea atributului "src") cu numele altui fişier

imagine disponibil pe calculatorul dumneavoastră şi plasat în directorul de lucru ("c:\html").

Adresarea relativă Să admitem că pe computerul ce stochează paginile html există următoarea

structură de directoare şi de fişiere: Dacă dorim să referim din fişierul "test.html" aflat în directorul "c:\html\a"

fişierele imagine aflate pe diverse directoare se utilizează în construcţia URL-ului aşa numita adresare relativă (adică faţă de directorul curent "c:\html\a") după cum se arată mai jos:

Obs: Directorul părinte al unui director curent se indică prin "..\" • "i2.gif" • "\aa\i3.gif" • "..\i2.gif" • "..\b\i4.gif" • "..\b\bb\i5.gif" • "..\..\i1.gif" Temă: Creaţi structura de directoare indicată în figura de mai sus după care copiaţi în fiecare director câte un fisier de tip imagine şi testaţi adresarea relativă după schema propusă mai înainte.

<html><head><title>Exemplul 8_1</title></head><body> <h1 align="center">Exemplul 8_1</h1> <h2>Prima pagina web care contine o imagine</h2> <img src="aol_sl.gif">Text dupa imagine. </body></html>

html (i2.gif0

a (i2.gif) (test.html)

b (i4.gif)

aa (i3.gif) bb (i5.gif)

c: (i1.gif)

INTERNET

LECŢIA 8. IMAGINI

57

Exemplul 8_2. Imagine referită prin adresare relativă

Obs: • Pentru ca exemplul de mai sus să funcţioneze corect salvaţi fişierul de mai sus ca

"e8_2.html" în directorul "c:\html\a" iar fişierul "cnn_sl.gif" (sau altul pe care îl doriţi) salvaţi-l în directorul "c:\html\b".

Chenarul unei imagini Dacă se doreşte ca imaginea să aibă un chenar în jurul ei atunci se va apela la

atributul "border" al tag-ului <img>. Valorile acestui atribut sun numere întregi pozitive.

Exemplul 8_3. Imagine cu chenar

Dimensionarea unei imagini O imagine are dimensiuni pe orizontală şi verticală stabilite în momentul creării

ei. Dacă nu este cerut altfel aceste dimensiuni sunt respectate în momentul afisării ei

în pagina web. Dimensiunile implicite ale unei imagini pot fi modificate prin intermediul

atributelor "width" şi "height" ale tag-ului <img>. Valorile posibile pe care le pot lua aceste atribute sunt: • numere intregi pozitive reprezentând numărul de pixeli; • numere de la 1 la 100 urmate de "%" reprezentând procente din lăţimea respectiv

înălţimea blocului părinte în care se află poziţionată imaginea (implicit pagina web).

Exemplul 8_4. Imagine de 200 de pixeli X 20%

<html><head><title>Exemplul 8_2</title></head><body> <h1 align="center">Exemplul 8_2</h1> <h2>Imagine referita prin adresare relativa</h2> <img src="..\b\cnn_sl.gif">Text dupa imagine. </body></html>

<html> <head> <title>Exemplul 8_3</title> </head><body> <h1 align="center">Exemplul 8_3</h1> <h2>Imagine cu chenar</h2> <img src="aol_wl.gif" border="5"> Text dupa imagine. </body></html>

<html><head> <title>Exemplul 8_4</title> </head><body> <h1 align="center">Exemplul 8_4</h1> <h2>Imagine de 200 de pixeli X 20%</h2> <img src="aol_sl.gif" width="200" height="20%"> </body></html>

INTERNET

LECŢIA 8. IMAGINI

58

Obs: Precizarea dimensiunilor spaţiului ocupat de o imagine într-o pagină web duce la creşterea vitezei de încărcare a paginii deoarece cunoscând dimensiunile imaginii browserul rezervă spaţiu în pagină şi continuă afişarea celorlalte elemente ale paginii. În paralel are loc încărcarea imaginii.

Alinierea unei imagini în pagina web Alinierea unei imagini în cadrul paginii web se poate face prin intermediului

atributului "align" al tag-ului <img> care poate lua următoarele valori: • "left" (alinierea la stânga; celelalte componente ale paginii "curg" pe partea dreaptă); • "right" (alinierea la dreapta; celelalte componente ale paginii "curg" pe partea stângă); • "top" (asemănător cu "texttop") (aliniere deasupra; partea de sus a imaginii se aliniază

cu partea de sus a textului ce precede imaginea); • "middle" (asemănător "absmiddle") (aliniare la mijloc; mijlocul imaginii se aliniază

cu linia de bază a textului ce precede imaginea); • "bottom" sau "baseline" (asemănător "absbottom") (aliniere la bază; partea de jos a

imaginii se aliniază cu linia de bază a textului).

Exemplul 8_5. Alinierea unei imagini pe verticală

Obs: • Dacă imaginea pe care o folosiţi este prea mică sau prea mare adăugaţi imaginii

atributele: width="20%" şi height="20%".

Alinierea textului în jurul unei imagini Atributele "hspace" şi "vspace" ale tag-ului <img> precizează distanţa în pixeli pe

orizontală respectiv pe verticală dintre imagine şi restul componentelor din pagină (de exemplu text).

Exemplul 8_6. Imagine aliniată la stânga înconjurată de text la distanţa de 50 de pixeli.

<html><head> <title>Exemplul 8_5</title> </head><body> <h1 align="center">Exemplul 8_5</h1> <h2>Alinierea unei imagini pe verticala</h2> Sus:<img src="aol_sl.gif" align="top"> La mijloc:<img src="aol_sl.gif" align="middle"> Jos:<img src="aol_sl.gif" align="bottom">Text dupa imagini. </body></html>

<html><head><title>Exemplul 8_6</title></head><body> <h1 align="center">Exemplul 8_6</h1> <h2>Imagine aliniata la stanga inconjurata de text la distanta de 50 de pixeli</h2> Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. <img src="aol_wl.gif" align="left" hspace="50" vspace="50"> Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. </body></html>

INTERNET

LECŢIA 8. IMAGINI

59

Obs: • "Text dupa imagine" nu urmează în pagina web imediat după "Text inainte de

imagine" deşi ar avea loc datorită tag-ului <br> care forţează trecerea la linie nouă. • Dacă imaginea pe care o folosiţi este prea mică sau prea mare adăugaţi imaginii

atributele: width="20%" şi height="20%"; • Pentru a elibera zona din stânga unei imagini (dreapta sau ambele părţi ale unei

imagini) utilizaţi tag-ul <br> cu atributul "clear" având valoarea "left" (respectiv "right" sau "all').

Elemente înlocuitoare pentru imagini Deseori mărimea unei imagini de înaltă rezoluţie (măsurată în kilo-octeţi) este

mare şi timpul de încarcare al paginii web în fereastra browser-ului creşte cu cât legătura dintre client şi server este mai lentă.

Pentru ca utilizatorul să înteleagă totuşi ceva din imagine (pâna când ea va fi încărcată în întregime) se apelează la două atribute ale tag-ului <img> care înlocuiesc imaginea pe perioada încărcării: • Atributul "alt" admite ca valoare un text care se va afişa în locul imaginii; • Atributul "lowsrc" admite ca valoare URL-ul unei imagini de joasă rezoluţie (de mică

dimensiune) încărcabilă imediat chiar şi pe legăturile slabe. Există aplicaţii de prelucrare de imagini care permit transformarea unei imagini într-o imagine asemănătoare de joasă rezoluţie şi de mărime mult mai mică decât imaginea originală.

Exemplul 8_7. Imagini de joasă rezoluţie şi texte înlocuitoare.

<html><head><title>Exemplul 8_7</title></head><body> <h1 align="center">Exemplul 8_7</h1> <h2>Imagini de joasa rezolutie si texte inlocuitoare</h2> <img src="aol_wl.gif" lowsrc= "aol_sl.gif" alt="America on Line"> </body></html>

INTERNET

LECŢIA 8. IMAGINI

60

Obs: • Dacă atributul "alt" este setat, atunci ori de câte ori mouse-ul se află pozitionat pe

suprafaţa imaginii, pe ecran apare într-un chenar textul ce constituie valoarea atributului (în cazul exemplului de mai sus va fi afişat "America on Line").

Imagini pentru fondul unei pagini web O imagine poate fi utilizată pentru a seta fondul unei pagini web.

Pentru a efectua acest lucru se foloseşte atributul "background" al tag-ului <body> având ca valoare URL-ul imaginii. Imaginea se multiplică pe orizontală şi pe verticală până se umple întregul ecran.

Exemplul 8_8. Pagină web cu imagine de fond. Obs: • Întrucât pagina din exemplul de mai sus nu încape într-un singur ecran va trebui să

utilizaţi bara de defilare verticală pentru a vizualiza întreaga pagină. • În timpul defilării textul şi imaginea de fond se deplasează împreună.

Pentru ca în timpul defilării unei pagini web foarte mari imaginea de fond să rămână fixă se utilizează atributul "bgproperties" al tag-ului <body> fixat la valoarea "fixed". Acest atribut funcţionează numai cu Internet Explorer.

Exemplul 8_9. Pagină web cu imagine de fond fixată.

<html><head><title>Exemplul 8_8</title></head> <body background="aol_wl.gif"> <h1 align="center">Exemplul 8_8</h1> <h2>Pagina web cu imagine de fond</h2> Start<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Sfarsit<br> </body></html>

<html><head><title>Exemplul 8_9</title></head> <body background="aol_wl.gif" bgproperties="fixed"> <h1 align="center">Exemplul 8_9</h1> <h2>Pagina web cu imagine de fond fixata</h2> Start<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Linie<br> Sfarsit<br> </body></html>

INTERNET

LECŢIA 8. IMAGINI

61

Un tabel de imagini Un tabel admite ca date în celulele tabelului imagini. Acestea se introduc

(eventual împreună cu text) după tag-urile <td> sau <th>.

Exemplul 8_10. Un tabel de imagini

Un tabel de tabele de imagini şi texte Exemplul următor ilustrează un tablou cu un rând şi două coloane.

Fiecare celulă a tabelului este formată din două rânduri şi o coloană. În rândul de deasupra se află o imagine iar în rândul de jos se află un text explicativ pentru imaginea de deasupra.

Exemplul 8_11. Un tabel de tabele de imagini şi texte

Imagini folosite ca link-uri Despre link-uri veţi învăţa în detaliu în lecţia următoare. Un link (o legătură) introduce în pagina web o zonă "activă". Efectuând un click cu butonul stâng al mouse-ului pe această zonă activă (în cazul nostru pe imagine) în browser se va încărca o altă pagină web. Pentru a utiliza imaginea "aol_sl.gif" drept link către pagina "p1.html" utilizaţi sintaxa: <a href="p1.html"><img src="aol_sl.gif"></a>.

<html><head><title>Exemplul 8_10</title></head><body> <h1 align="center">Exemplul 8_10</h1> <h2>Un tabel de imagini</h2> <table border> <tr><td><img src="aol_sl.gif"><td><img src="cnn_sl.gif"> <tr><td><img src="comic_sl.gif"><td><img src="news_sl.gif"> </table> </body></html>

<html><head><title>Exemplul 8_11</title></head><body> <h1 align="center">Exemplul 8_11</h1> <h2>Un tabel de tabele de imagini si texte</h2> <table border> <tr> <td> <table border> <tr><td><img src="aol_sl.gif"> <tr><td>America on Line Preview </table> <td> <table border> <tr><td><img src="cnn_sl.gif"> <tr><td>CNN Interactive </table> </table> </body></html>

INTERNET

LECŢIA 8. IMAGINI

62

Exemplul 8_12. Imagini folosite ca link-uri. Obs: În mod implicit imaginea utilizată pe post de zonă activă (link) este înconjurată de un chenar de culoarea unui link. Dacă setaţi atributul "border" al tag-ului <img> la valoarea "0" acest chenar va dispare.

Imagini în fişiere externe Deoarece imaginile necesită un timp mare de încărcare în browser deseori se preferă ca în pagina web să fie inserat numai un link către imagini lăsând utilizatorului posibilitatea de a încărca sau nu imaginea. În exemplul următor se arată cum se inserează un link (o legătură) către un fişier imagine folosindu-se sintaxa: <a href="aol_sl.gif">Efectuati click pentru a vedea imaginea</a>. Exemplul 8_13. Imagini în fişiere externe. Un truc foarte des utilizat de webmasteri este acela de a utiliza o imagine de rezoluţie scăzută pe post de link către aceeaşi imagine dar stocată într-un fişier cu o rezoluţie foarte bună. Utilizatorul vede în pagină imaginea de rezoluţie scăzută şi dacă această imagine prezintă interes pentru el atunci prin efectuarea unui click în browser se încarcă imaginea de rezoluţie înaltă. Exemplul 8_14. Imagini de diferite rezoluţii.

Alte atribute pentru elementul <img> Următoarele două atribute ale tag-ului <img> au utilizări mai reduse la crearea paginilor HTML:

<html><head><title>Exemplul 8_12</title></head><body> <h1 align="center">Exemplul 8_12</h1> <h2>Imagini folosite ca link-uri</h2> Text inainte de imagine <a href="p1.html"> <img src="aol_sl.gif"></a> Text dupa imagine </body></html>

<html><head><title>Exemplul 8_13</title></head><body> <h1 align="center">Exemplul 8_13</h1> <h2>Imagini in fisiere externe</h2> Text inainte de link. <a href="aol_sl.gif">Efectuati click pentru a vedea imaginea</a> Text dupa link. </body></html>

<html><head> <title>Exemplul 8_14</title> </head><body> <h1 align="center">Exemplul 8_14</h1> <h2>Imagini de diferite rezolutii</h2> Text inainte de imagine. <a href="i1.jpg"><img src="i2.jpg"></a> Text dupa imagine. </body></html>

INTERNET

LECŢIA 8. IMAGINI

63

• "suppress" admite valorile "true" şi "false" şi permite activarea respectiv dezactivarea încărcarii imaginii într-o pagină web;

• "longdesc" este un URL către o pagină web care oferă detalii despre imagine.

Facilităţi ale formatului GIF Formatul GIF89a a permite următoarele trei perfecţionări aduse fişierelor imagine: 1. Imagini întreţesute (interlaced images) sunt imaginile care apar integral în pagina web

dar pe măsură ce sunt încarcate claritatea imaginii creşte; 2. Imaginile transparente (transparent images) sunt imagini care nu au culoare de fond

încât ceea ce se află în spatele imaginilor devine parţial vizibil; 3. Imaginile animate (animated images) sunt fişiere imagine speciale care conţin o

succesiune de imagini care sunt afişate periodic in pagina web. Obs: Cele mai multe aplicaţii de prelucrare a imaginilor permit salvarea fişierelor imagine astfel încât facilităţile enumerate mai sus să fie exploatate.

Utilizări speciale ale imaginilor Imaginile pot fi utilizate pentru a obţine efecte deosebite într-o pagină web. Printre aceste utilizări speciale putem enumera: 1. Linii orizontale formate cu ajutorul imaginilor (eventual animate); 2. Simboluri speciale pentru itemii unei liste neordonate (vezi lecţia următoare).

INTERNET

LECŢIA 9. LINK-URI.

64

Lecţia 9. Link-uri

Interactivitatea unei pagini web Link-urile (legăturile) reprezintă partea cea mai importantă a unei pagini web. Ele

transformă un text obişnuit în "hipertext" sau "hipermedia", aspecte care permit trecerea rapidă de la o informaţie aflată pe un anumit server la altă informaţie aflată pe un alt server oriunde în lume.

Link-urile sunt "zone active" într-o pagină web, adică zone pe ecran sensibile la apăsarea butonului stâng al mouse-ului. Un click efectuat cu mouse-ul pe un link este interpretată ca o cerere către un anumit server de pe INTERNET de a expedia către computerul client o resursă către care link-ul respectiv punctează.

În felul acesta paginile web devin interactive (adică răspund la acţiuni iniţiate de utilizator).

Lucrurile stau în felul următor: a) În pagina html se inserează link-uri prin intermediul unui tag special <a> şi a unui

atribut "href" care ia ca valoare adresa (URL-ul) resursei solicitate. De exemplu <a href="www.netscape.com">.

b) În pagina web apar link-urile setate la punctul a) ca "zone active". Când mouse-ul se află deasupra unei zone active forma mouse-ului se schimbă automat într-o "mână";

c) Efectuând click pe o zona activă ce reprezintă un link pe pagina web, browser-ul trimite către serverul ce stochează noua resursă o cerere de a-i expedia respectiva resursă;

d) Serverul WWW (World Wide Web) ce stochează noua resursă primeşte cererea şi expediază către utilizator (computerul client) resursa solicitată. Dacă resursa solicitată este o nouă pagină web atunci serverul ţinta expediază un fişier ".html" împreună fişierele imagine, sunet, etc referite de aceast fişier;

e) Computerul client (care a expediat cererea) primeşte resursa solicitată şi o încarcă în browser;

f) Pagina veche este înlocuită de pagina nouă în acelaşi browser sau este lansată în execuţie o nouă instanţă a browser-ului care conţine noua pagină.

Link către o pagină aflată în acelaşi director Un link (o legătură) către o pagină aflată în acelaşi director se formează cu

ajutorului tag-ului <a> (de la "anchor"=ancoră). Pentru a preciza pagina către care punctează link-ul se utilizează un atribut al tag-

ului <a> numit "href" care ia ca valoare numele fişierului html aflat în acelasi director care va înlocui vechea pagină.

"Zona activă", adică zona în pagina web care devine sensibilă la apăsarea butonului stâng al mouse-ului, este formată din textul cuprins între tag-urile <a> şi </a>.

Obs: Prezenţa tag-ului de sfârşit </a> este obligatorie. Exemplul 9_1. Comutarea între două pagini. Acest exemplu admite că în acelaşi director (de exemplu în directorul de lucru "c:\html") se află create următoarele două fişiere html "p1.html" şi "p2.html":

INTERNET


65

Link către o pagină aflată pe acelaşi disc local Dacă pagina referită de link se află pe acelaşi disc local dar în directoare diferite

atunci pentru a preciza poziţia ei în structura de directoare se poate folosi adresarea relativă (vezi Lecţia 8, paragraful "Adresarea relativă").

Exemplul 9_2. Comutarea între două pagini aflate pe acelaşi disc local. Exemplul de mai jos presupune că "p3.html" se află în directorul "c:\html\a\" iar "p4.html" se află în directorul "c:\html\b\bb\".

Link către un site particular În exemplul următor se utilizează URL-ul "http://www.netscape.com" care

încarcă "prima pagină" ("Home Page") de pe site-ul firmei "Netscape Corporation". De regulă această pagină se numeşte "index.html" ("home.html" sau

"default.html") şi se află în "Root Directory" pe calculatorul "www" din domeniul "netscape.com".

Exemplul 9_3. Link către site-ul firmei "Netscape Communications Corporation".

<html><head><title>p1</title></head> <body> <h1>Pagina 1</h1> <hr> <a href="p2.html">Link catre Pagina 2 </a> </body></html>

<html><head><title>p2</title></head> <body> <h1>Pagina 2</h1> <hr> <a href="p1.html">Link catre Pagina 1 </a> </body></html>

<html><head><title>p3</title> </head><body> <h1>Pagina 3</h1><hr> <a href="../b/bb/p4.html">Link catre Pagina 2</a> </body></html>

<html><head><title>p4</title> </head><body> <h1>Pagina 4</h1><hr> <a href="../../a/p3.html">Link catre Pagina 1</a> </body></html>

<html><head> <title>Exemplul 9_3</title> </head><body> <h1>Link catre site-ul firmei "Netscape Communications Corporation" </h1><hr> <a href="http://www.netscape.com"> Netscape Corporation</a> </body></html>

INTERNET


66

Utilizarea unei imagini ca "zonă activă" Zona activă a unui link este setată între tag-urile <a> şi </a>. De regulă ea este

"un text" care apare subliniat şi de culoare albastră. În momentul în care mouse-ul se află deasupra zonei active forma mouse-ului se schimbă într-o "mână" care îndeamnă la apăsare.

Rolul de zonă activă poate fi jucat şi de o imagine dacă inserarea ei are loc între tag-urile <a> şi </a>.

Exemplul 9_4. Zona activă este o imagine: Pentru ca acest exemplu să funcţioneze trebuie:

• Fişierele "p.html" şi "aol_sl.gif" trebuie să existe în acelaşi director; • Fişierul "p.html" trebuie să fie scris corect din punct de vedere al limbajului

HTML. Obs:

• Pentru a reveni într-o pagină web anterioară apăsaţi butonul "Back" din bara de instrumente a browser-ului utilizat.

• Imaginea utilizată ca zonă activă este înconjurată de un chenar de aceeaşi culoare cu celelalte link-uri. Dacă imaginea are atributul "border" setat la valoarea "0" atunci chenarul în jurul imaginii dispare.

Ancore Într-o pagină web foarte lungă pot exista puncte de reper (ancore) către care să se

definească legături. O ancoră se defineşte dea semenea prin tag-ul <a>. Pentru a identifica ancora se

utilizează atributul "name" al tag-ului <a> care primeşte ca valoare un nume dat ancorei (de exemplu "ancora1").

Pentru a insera un link către ancora "ancora1" definită în aceeaşi pagină se utilizează tag-ul <a> având atributul "href" de valoare "#ancora1".

Exemplul 9_5. Link-uri către ancore definite în acelaşi document:

<html><head><title>Exemplul 9_4</title></head><body> <h1>Utilizarea unei imagini ca "zona activa"</h1><hr> <a href="p.html"> <img src="aol_sl.gif"></a> </body></html>

<html><head><title>Exemplul 9_5</title></head><body> <h1>Ancore definite in acelasi document</h1><hr> <a href="#ancora1">Link catre ancora nr. 1</a><br> <a href="#ancora2">Link catre ancora nr. 2</a><br> l0<br>l1<br>l2<br>l3<br>l4<br>l5<br>l6<br>l7<br>l8<br>l9<br>l10<br> l11<br> l12<br>l13<br>l14<br>l15<br>l16<br>l17<br>l18<br>l19<br> <a name="ancora1">Prima ancora<br> l20<br>l21<br>l22<br>l23<br>l24<br>l25<br>l26<br>l27<br>l28<br>l29<br> l30<br>l31<br>l32<br>l33<br>l34<br>l35<br>l36<br>l37<br>l38<br>l39<br> l40<br>l41<br>l42<br>l43<br>l44<br>l45<br>l46<br>l47<br>l48<br>l49<br> <a name="ancora2">A doua ancora<br> l50<br>l51<br>l52<br>l53<br>l54<br>l55<br>l56<br>l57<br>l58<br>l59<br> l60<br>l61<br>l62<br>l63<br>l64<br>l65<br>l66<br>l67<br>l68<br>l69<br> </body></html>

INTERNET


67

Pentru a introduce un link către o ancoră definită în alt document (altă pagină) aflat în acelaşi director atributul "href" primeşte o valoare de forma "nume_fisier.html#nume_ancora".

Exemplul 9_6. Link-uri către ancore aflate în alt document. Pentru a funcţiona corect următorul exemplu presupune că în directorul curent se află fişierul "e9_5.html" având conţinutul de la exemplul anterior.

Instanţe multiple pentru un browser La începerea unei sesiuni pe INTERNET, pe calculatorul client (al utilizatorului)

se lansează în execuţie o instanţă a browser-ului folosit, care încarcă pagina web solicitată.

Dacă în timpul sesiunii de lucru se efectuează un click către o pagină nouă atunci în mod implicit noua pagină o va înlocui pe cea precedentă folosindu-se aceeaşi instanţă (fereastră) a browser-ului.

Dacă dorim ca pagina nouă solicitată să fie încarcată într-o altă fereastră decât cea curentă atunci trebuie lansată în execuţie o nouă instantă a browser-ului care va conţine noua pagină. Acest lucru se realizează folosinduse atributul "target" al tag-ului <a> care primeşte ca valoare un nume (de exemplu "fereastra") pentru fereastra în care se va încărca noua pagină. Exemplul 9_7. Pagină nouă în fereastră nouă:

<html><head> <title>Exemplul 9_6</title> </head><body> <h1>Ancore definite in alt document</h1><hr> <a href="e10_5.html#ancora1">Link catre ancora nr. 1 din alt document </a><br> <a href="e10_5.html#ancora2">Link catre ancora nr. 2 din alt document </a><br> </body></html>

<html><head> <title>Exemplul 9_7</title> </head><body> <h1>Pagina noua in fereastra noua </h1><hr> <a href="p2.html" target="ferastra"> Link catre Pagina 2</a> </body></html>

INTERNET


68

Dacă mai multe link-uri folosesc aceaşi valoare pentru atributul "target" înseamnă că paginile referite de aceste link-uri se vor încărca în aceeaşi fereastră (vor utiliza aceeaşi instanţă a browser-ului).

Exemplul 9_8. Pagini noi în ferestre noi:

Obs: • Pentru a funcţiona, exemplul de mai sus presupune că în directorul curent există

fişierele "p2.html", "p3.html" şi "p4.html". • Pentru a vedea mai bine cum funcţionează exemplul de mai sus, evitaţi să folosiţi

pentru ferestre o dimensiune maximizată. Atributul "target" acceptă următoarele valori cu semnificaţie specială:

• "_blank" (încărcarea are loc într-o fereastră nouă anonimă); • "_parent" (încărcarea are loc în fereastra părinte); • "_self" (încărcarea are loc în aceeaşi fereastră); • "_top" (încărcarea are loc în fereastra "top" a frame-urilor curente).

Alegerea culorilor pentru link-uri În mod implicit se utilizează trei culori pentru link-uri:

• O culoare pentru link-urile nevizitate (nu s-a efectuat nici un click pe ele); • O culoare pentru link-urile de vizitate (s-a efectuat cel puţin un click pe ele); • O culoare pentru link-urile active (deasupra cărora se află mouse-ul la un moment

dat). Aceste culori pot fi setate cu ajutorul a trei atribute ale tag-ului <body>:

• "link" pentru link-urile nevizitate; • "vlink" pentru link-urile vizitate; • "alink" pentru link-urile active.

Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RGB (vezi ).

<html><head> <title>Exemplul 9_8</title> </head><body> <h1>Pagini noi in ferestre noi</h1><hr> <a href="p2.html" target="fereastra1"> Incarca Pagina 2 in Fereastra 1</a><br> <a href="p3.html" target="fereastra2"> Incarca Pagina 3 in Fereastra 2</a><br> <a href="p4.html" target="fereastra1"> incarca Pagina 4 in Fereastra 1</a> </body></html>

INTERNET


69

Exemplul 9_9. Setarea culorilor pentru link-uri:

Două link-uri de aur Exemplul de mai jos reprezintă o pagină web simplă ce conţine două link-uri

extrem de utile pentru creatorii de pagini html: • Link-ul "http://www.developer.netscape.com/docs/html" vă permite accesul la o

pagină excelentă cu documentaţie despre limbajul HTML. Pagina este găzduită de "Netscape Communications Corporation".

• Link-ul "http://www.w3.org/TR/REC-html40" vă permite accesarea documentaţiei de referinţă pentru limbajul HTML (HTML 4.0 Specification). Pagina este realizată de "World Wide Web Corporation".

Exemplul 9_10. Două link-uri de aur:

Link către un fişier HTML local Pentru a accesa un fişier HTML local (aflat pe computerul client pe care este

lansat în execuţie browser-ul) se utilizează serviciul "file://" (în locul protocolului "http://") împreună cu adresa absolută (calea completă către directorul ce conţine fişierul plus numele fişierului).

Exemplul 9_11. Link către un fişier local. Exemplul următor presupune că fişierul "p2.html" se află în directorul "c:\html\".

<html><head><title>Exemplul 9_10</title></head><body> <h1>Doua link-uri de aur</h1><hr> O documentatie excelenta despre limbajul HTML puteti gasi la:<br> <a href= "http://www.developer.netscape.com/docs/html"> Netscape Communications Corporation </a><br> <a href="http://www.w3.org/TR/REC-html40">W3 Corporation</a><br> </body></html>

<html><head><title>Exemplul 9_9</title></head> <body link="red" vlink="yellow" alink="blue"> <h1>Setarea culorilor pentru link-uri</h1><hr> <ul> In aceasta pagina culorile link-urilor sunt setate astfel: <li>rosu pentru link-uri nevizitate <li>galben pentru link-urile vizitate <li>albastru pentru link-urile active </ul> <a href="p2.html">Link catre Pagina 2 </a><br> <a href="p3.html"> Link catre Pagina 3 </a><br> <a href="p4.html"> Link catre Pagina 4 </a> </body></html>

INTERNET


70

Link către un server de fişiere Pentru conectarea la un server pe INTERNET specializat în transferul de fişiere

(servere FTP) se utilizează serviciul "ftp://" împreună cu adresa serverului FTP şi localizarea fişierului pe server.

FTP vine de la "File Transfer Protocol" (protocolul de transfer a fişierelor).

Exemplul 9_12. Link către un server de fişiere.

Utilizarea poştei electronice Într-o pagină web se pot afla link-uri care permit lansarea în execuţie a alicaţiei de

expediere a mesajelor electronice. Pentru aceasta se utilizează în construcţia URL-ului serviciul INTERNET "mailto:" urmat de o adresă e-mail validă. Exemplul 9_13. Expedierea de mesaje electronice.

Obs: Pentru ca exemplul anterior să funcţioneze trebuie ca: • Pe calculatorul utilizatorului să fie instalat o aplicaţie de expediere a mesajelor

electronice (de exemplu Internet Mail, Outlook Express pe calculatoare Windows, Pine pe calculatoare Unix, etc).

• Adresa de e-mail să fie o adresă validă; • Computerul utilizatorului să fie conectat la INTERNET.

<html><head> <title>Exemplul 9_11</title> </head><body> <h1>Link catre un fisier local</h1><hr> <a href="file://c:/html/p2.html"> Link catre Pagina 2 aflata pe discul local</a><br> </body></html>

<html><head><title>Exemplul 9_12</title></head><body> <h1>Link catre un server de fisiere</h1><hr> <a href="ftp://ftp.netscape.com" >Link catre serverul de fisiere al firmei "Netscape Communication Corporation"</a><br> </body></html>

<html><head><title>Exemplul 9_13</title></head><body> <h1>Expedierea de mesaje electronice</h1><hr> Opiniile legate de aceasta carte pot fi expediate efectuand click aici: <a href="mailto:[email protected]"> Mesaje catre autorul cartii.</a><br> </body></html>

INTERNET


71

Link-uri către fişiere oarecare Într-o pagină web pot apare link-uri către orice tipuri de fişiere aflate pe orice

servere de pe INTENET. Pentru aceasta în fişierul html se utilizează tag-ul <a> având valoarea atributului "href" egală cu URL-ul fişierului destinaţie (vezi detalii despre URL în anexa URL). Exemplul 9_14. Link-uri către fişiere oarecare.

Obs: Atunci când se efectuează click pe link-ul din exemplul de mai sus browser-ul deschide o căsuţă de dialog "File download" care vă permite: • să salvaţi pe discul local fişierul sau să lansaţi în execuţie aplicaţia capabilă să

interpreteze corect fişierele de tipul respectiv; • să optaţi pentru inhibarea căsuţei de dialog şi încărcarea directă a fişierelor (când

acest lucru este posibil) pentru restul sesiunii de lucru pe INTERNET.

Ancore definite prin atributul "id" Atributul "id" este un atribut universal adică poate fi ataşat oricărui element al unei pagini web. Acest atribut va înlocui complet atributul "name" care putea fi ataşat numai anumitor elemente. Atributul "id" primeşte ca valoare un "nume" (de exemplu "id1") care identifică în mod unic un element. Atributul "id" poate fi utilizat pe post de ancoră într-o pagină web conform sintaxei: <tag id="id1">…</tag> <a href="#id1">Link către elementul "id1"</a> unde "tag" poate fi orice element HTML. Exemplul 9_15. Ancore definite prin atributul "id".

<html><head> <title>Exemplul 9_14</title> </head><body> <h1>Link-uri catre fisiere oarecare</h1><hr> <a href="me.class" >Link catre fisierul "me.class"</a><br> </body></html>

<html><head> <title>Exemplul 9_15</title> </head><body> <h1>Link-uri definite prin atributul "id" </h1><hr> <a href="#id1">Link catre primul capitol</a><br> <a href="#id2">Link catre capitolul doi</a><br> Text introductiv.<br>Text introductiv.<br>Text introductiv.<br>Text introductiv.<br> <h2 id="id1">Primul capitol</h2>Text in primul capitol.<br>Text in primul capitol.<br>Text in primul capitol.<br>Text in primul capitol. <h2 id="id2">Al doilea capitol</h2> Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2.<br> Text in capitolul 2.<br>Text in capitolul 2.<br>Text in capitolul 2. </body></html>

INTERNET


72

URL-ul de bază Elementul "base" permite setarea unui director pe serverul de web faţă de care se vor exprima adresele resurselor referite de link-uri aflate într-o pagina web. Elementul <base> se plasează în blocul <head>…</head> şi acceptă atributul "href" setat la URL-ul directorului de bază faţă de care se va face adresarea relativă. În exemplul următor se defineşte un link către imaginea: "www.cnmv.ro/user1/imagini/im7". Exemplul 9_16. URL-ul de bază. Obs: Dacă tag-ul <base> lipseşte atunci valoarea lui implicită este URL-ul pagini curente.

Atributul "title" Atributul "title" aparţine tag-ului <a> şi comandă apariţia unei mici ferestre în pagina web când mouse-ul se află pe un link, fereastră în care este afişată valoarea dată acestui atribut. Acest atribut are astfel menirea de a furniza informaţii suplimentare despre semnificaţia unui link. Exemplul 9_17. Atributul "title".

<html> <head> <title>Exemplul 9_16</title> <base href="www.cnmv.ro/user1"> </head> <body> <h1>URL-ul de baz•</h1><hr> <a href="imagini/im7">O imagine</a> </body></html>

<html> <head> <title>Exemplul 9_17</title> </head> <body> <h1>Atributul "title"</h1><hr> <a href="capitolul1.html" title="Capitolul 1">Link catre primul capitol</a> </body></html>

INTERNET

LECŢIA 10. DOCUMENTAREA UNEI PAGINI WEB.

73

Lecţia 10. Documentarea unei pagini web

Meta-informaţiile sunt informaţiile despre "modul de organizare a informaţiilor". În cazul unei pagini web meta-informatiile vor furniza date despre modul în care a fost creată această pagină. Meta-informaţiile nu sunt vizibile într-o pagină web. Ele sunt conţinute în fişierul sursă ".html" şi sunt utilizate de serverele web aflate pe INTERNET, specializate în stocarea de "informaţii despre informaţiile" stocate pe diferite site-uri. Serverele specializate în stocarea de meta-informaţii oferă utilizatorilor motoare de căutare puternice care permit regăsirea informaţiilor (a adreselor la care aceste informaţii sunt stocate). Putem enumera ca exemple: "www.yahoo.com", "www.altavista.com", "www.excite.com", "www.lycos.com" etc.

Un element pentru meta-informaţii Meta-informaţiile adică informaţiile despre informaţiile conţinute într-o pagină web se introduc cu ajutorul unui element special <meta> plasat în interiorul blocului <head>…<head>. Acest element acceptă patru atribute a căror semnificaţie o vom furniza pe parcurs:

• "name"; • "http-equiv"; • "content"; • "scheme";

la care se poate adăuga un atribut universal (comun tuturor elementelor) şi anume: • "lang".

Primele trei atribute se folosesc în perechi "name/content" sau "http-equiv/content" celelalte două atribute (scheme şi lang) având caracter opţional.

Descrierea unei pagini web Pentru a face cunoscut motoarelor de căutare aflate pe INTERNET despre scopul pentru care a fost creată o pagină web putem insera un element <meta> având atributele:

• "name" setat la valoarea "description"; • "content" setat la un string ce conţine o descriere generală a paginii.

Exemplul 10_1. Descrierea unei pagini.

<html> <head> <title>Mihai Viteazul Home Page</title> <meta name="description" content="Colegiul National Mihai Viteazul din Bucuresti este liceu de prestigiu din Romania. Acest site prezinta informatii despre elevii, profesorii, oferta scolii, cursurile optionale, performantele si planurile de viitor ale noastre."> </head> <body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> </html>

INTERNET


74

Cuvintele cheie pentru o pagină web Cuvintele cheie sunt utilizate când se efectuează o regăsire a unei informaţii prin

intermediul unui motor de căutare. De aceea selectarea acestor cuvinte cheie trebuie făcută cu atenţie pentru ca informaţia să poată fi regăsită.

Cuvintele cheie oferă o altă metodă de descriere a informaţiilor conţinute de o pagină web. Pentru a preciza cuvintele cheie ale paginii web:

• atributul "name" va fi setat la "keywords"; • atributul "content" va primi ca valoare o listă de cuvinte cheie separate prin ",".

Exemplul 10_2. Cuvintele cheie.

Drepturile de autor Atributul "name" poate fi utilizat pentru a furniza informaţii legate de autorul paginii şi de Copyright (drepturile de autor).Exemplul următor ilustrază aceste lucruri:

Exemplul 10_3. Drepturile de autor.

Crearea şi expirarea paginii web Pentru a transmite serverelor specializate în regăsirea informaţiilor pe INTERNET date legate de data creării şi data reactualizării unei pagini web se utilizează atributul "http-equiv". Valoarea atributului "content" este în aceste cazuri o dată în formatul: "zzz, zz lll aaaa hh:mm:ss ttt" unde:

• "zzz" reprezintă primele trei litere ale zilei din săptămână (Mon, Tue, Wed, Thu, Fri, Sat sau Sun);

• "zz" reprezintă ziua din cadrul lunii (01, 02, …, 31); • "lll" reprezintă primele trei litere din numele lunii (Jan, Feb, Mar, Apr, May, Jun,

Jul, Aug, Sep, Oct, Nov sau Dec); • "aaaa" reprezintă anul exprimat cu 4 cifre (de exemplu 1999); • "hh:mm:ss' reprezintă ora, minutul şi secunda;

<html> <head> <title>Mihai Viteazul Home Page</title> <meta name="keywords" content="colegiu, Mihai, Viteazul, Bucuresti, liceu, prestigiu, Romania, elev, profesor, curriculum, optionale, olimpiade, matematica, cor"> </head> <body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> </html>

<html> <head> <title>Mihai Viteazul Home Page</title> <meta name="author" content="Tudor Popescu, IX A"> <meta name="copyright" content="cnmv.ro"> </head> <body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> </html>

INTERNET


75

• "ttt" reprezintă timpul utilizat (de exemplu GMT).

Exemplul 10_4. Crearea şi expirarea unei pagini web. Obs: Dacă data este furnizată într-un format ambiguu (de exemplu "03-07-1999") atunci sadăugaţi atributul "scheme" care precizează formatul utilizat pentru dată (de exemplu scheme="Month-Day-Year").

Persoana de contact Pentru a putea furniza informaţii despre persoana care se ocupă de administrarea site-ului utilzaţi atributul "http-equiv" ca în exemplul de mai jos. În aceste cazuri valoarea atributului "content" este o adresă e-mail eventual urmată în paranteze rotunde de un nume complet al persoanei.

Exemplul 10_5. Persoana de contact.

Tipul fişierului Pentru a preciza informaţii legate de tipul fişierului şi setul de caractere utilizate folosiţi atributul "http-equiv" ca mai jos:

Exemplul 10_6. Tipul fişierului.

<html> <head> <title>Mihai Viteazul Home Page</title> <meta http-equiv="creation-date" content=""> <meta http-equiv="expires" content==""> </head> <body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> </html>

<html> <head> <title>Mihai Viteazul, Bucuresti Home Page</title> <meta http-equiv="from" content="[email protected] (Teodoru Gugoiu)"> <meta http-equiv="reply-to" content=="[email protected] (Teodoru Gugoiu)"> </head> <body> <h1>Bine ati venit la Colegiul National Mihai Viteazul, Bucuresti!</h1><hr> </html>

<html> <head> <title>Mihai Viteazul Home Page</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-5"> </head> <body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> </html>

INTERNET


76

Limba utilizată Deoarece la regăsirea informaţilor cu ajutorul motoarelor de căutare se pot utiliza cuvinte cheie scrise în diferite limbi atunci se pot insera informaţii legate de limba utilizată cu ajutorul atributului universal (comun şi altor elemente) "lang":

Exemplul 10_7. Limba utilizată.

Reactualizarea paginii curente din browser O utilizare specială a atributului "http-equiv" este aceea de a seta reîncărcarea automată a browser-ului cu aceeaşi pagină (de exemplul pagina cu evoluţia cursurilor la o bursă) sau cu altă pagină. În acest fel se obţin facilităţi dinamice pentru un site web. Pentru a reîncărca aceeaşi pagină la un interval precizat de secunde folosiţi atributul "http-equiv" setat la valoarea "refresh" iar în atributul "content" puneţi numarul de secunde după care dorţi ca pagina să fie reactualizată:

Exemplul 10_7. Reîncărcarea automată a unei pagini. Dacă dorim ca după un număr de secunde o pagină să fie înlocuită de o altă pagină atunci în atributul "content" este precizat şi URL paginii noi ca în exemplul de mai jos: Exemplul 10_8. Schimbarea automată a unei pagini.

<html> <head> <title>Mihai Viteazul Home Page</title> <meta http-equiv="keywords" lang="en-us" content="college, Mihai, Viteazul, Bucharest, high school, prestige, Romania, student, teacher, curriculum, optional, olimpiade, mathematics"> <meta http-equiv="keywords" lang="ro" content="colegiu, Mihai, Viteazul, Bucuresti, liceu, prestigiu, Romania, elev, profesor, curriculum, optionale, olimpiade, matematica"> </head> <body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> </html>

<html><head><title>Mihai Viteazul Home Page</title> <meta http-equiv="refresh" content="5"> </head><body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> Aceasta pagina va fi reincarcata dupa 5 secunde! </html>

<html><head><title>Mihai Viteazul Home Page</title> <meta http-equiv="refresh" content="9; url='cuprins.html'"> </head><body> <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1><hr> Aceasta pagina va fi schimbata dupa 9 secunde cu pagina "cuprins.html"! </html>

INTERNET


77

Comentariile Comentariile sunt blocuri de text utile care studiază modul în care a fost scris un fişier sursă ".html". Comentariile sunt ignorate de către browser la încarcarea paginii. Pentru a insera un bloc de comentarii utilizaţi sintaxa: . Obs:

• Blocul de comentarii poate fi plasat oriunde este necesar în cadrul paginii ".html"; • Blocul de comentarii se poate extinde pe mai multe rânduri; • Nu sunt permise spaţii libere între "<!" şi "--" dar sunt permise spaţii libere între "--

" şi ">".

Exemplul 10_9. Comentariile.

<html><head>  <title>Mihai Viteazul Home Page </title></head><body>  <h1>Bine ati venit la Colegiul National Mihai Viteazul!</h1>  <hr> </html>

INTERNET

LECŢIA 11. SUNETE ŞI VIDEOCLIP-URI.

78

Lecţia 11. Sunete şi videoclip-uri

Formate pentru fişierele de sunet Sunetele pot fi stocate în fişiere în diverse formate. Unele dintre acestea sunt

recunoscute de browser-e şi deci pot fi inserate în paginile web. Formatele şi extensiile corespunzătoare pentru fişierele utilizabile în paginile web

sunt următoarele: • Formatul AU/µ-law cu extensia ".au"; • Formatul AIFF/AIFC cu extensiile posibile ".aiff" sau "aif"; • Formatul WAVE/WAV cu extensia ".wav"; • Formatul MPEG Audio cu extensia ".mpeg2" sau ".mp2"; • Formatul MIDI cu extensia ".mid" sau ".midi".

Link-uri către fişiere de sunet Un link către un fişier de sunet se realizează folosind tag-ul <a> destinat

legăturilor către orice tip de fişiere unde atributului "href" va avea valoarea egală cu URL-ul fişierului de sunet.

Exemplul 11_1. Link-uri către fişiere de sunet.

Obs: Pentru a funcţiona corect exemplul de mai sus trebuie: • înlocuite fişierele de sunet cu numele unor fişiere de sunet disponibile pe

calculatorul dumneavoastră (folosiţi utilitarul Find din Windows pentru a căuta fişiere cu o anumită extensie);

• calea către aceste fişiere să fie corectă (eventual copiaţi-le în directorul în care se află şi pagina html).

Formate pentru fişierele de videoclipuri Videoclipurile pot fi stocate în fişiere în diverse formate. Unele dintre acestea

sunt recunoscute de browser-e şi deci pot fi inserate în paginile web. Formatele şi extensiile corespunzătoare pentru fişierele utilizabile în paginile web

sunt următoarele: • Formatul MPEG cu extensiile posibile ".mpeg" sau ".mpg"; • Formatul QuickTime cu extensia ".mov"; • Formatul AVI cu extensia ".avi".

<html><head><title>Exemplul 11_1</title><head><body> <h1>Link-uri catre fisiere de sunet</h1><hr> <a href="spacemusic.au">Link catre fisierul "spacemusic.au"</a><br> <a href="The Microsoft Sound.wav">Link catre fisierul "The Microsoft Sound.wav"</a> </body></html>

INTERNET


79

Link-uri către fişiere de video-clipuri Un link către un fişier de video-clip se realizează folosind tag-ul <a> destinat

legăturilor către orice tip de fişiere unde atributului "href" va avea valoarea egală cu URL-ul fişierului de video-clip.

Exemplul 11_2. Link-uri către fişiere de video-clipuri.

Obs: Pentru a funcţiona corect exemplul de mai sus trebuie: • înlocuite fişierele de video-clip cu numele unor fişiere de video-clip disponibile pe

calculatorul dumneavoastră (folosiţi utilitarul Find din Windows pentru a căuta fişiere cu o anumită extensie);

• calea către aceste fişiere să fie corectă (eventual copiaţi-le în directorul în care se află şi pagina html);

• Pe calculatorul utilizatorului să fie instalată aplicaţia capabilă să intrepreteze corect fişierul de video-clip corespunzător.

Sunetul de fond pentru o pagină web Pentru ca vizitarea unei pagini web să fie însoţită de un sunet de fond browser-ul

Internet Explorer acceptă tag-ul <bgsound>. Fişierul care stochează sunetul este precizat printr-un atribut al tag-ului <bgsound> şi anume "src" (vine de la "source"=sursă).

Un al doilea atribut al tag-ului <bgsound> şi anume "loop" permite precizarea numărului de repetiţii care sunt executate până când sunetul de fond încetează.

Valorile posibile sunt: • "-1" sau "infinite" pentru ca sunetul de fond să se repete de un număr infinit de ori; • un numar întreg pozitiv pentru ca sunetul să se repete de un număr precizat de ori.

Exemplul 11_3. Sunetul de fond. Obs: Trebuie avut în vedere ca fişierele de sunet ataşate unei pagini web să aibă o dimensiune rezonabilă pentru a nu supraîncărca traficul pe conexiunea client-server.

<html><head><title>Exemplul 11_2</title><head><body> <h1>Link-uri catre fisiere de video-clipuri</h1><hr> <a href="t241170a.avi">Link catre fisierul "t241170a.avi"</a><br> <a href="t052060a.avi">Link catre fisierul "t052060a.avi"</a> </body></html>

<html><head><title>Exemplul 11_3</title><head><body> <h1>Pagina web cu un sunet de fond</h1><hr> <bgsound src="spacemusic.au" loop="-1"> </body></html>

INTERNET


80

Video-clipuri inline

Browser-ul Internet Explorer acceptă o extensie a tag-ului <img> pentru inserarea in-line într-o pagină web a video-clipurilor. Pentru aceasta se utilizează cinci atribute noi ale tag-ului <img>: 1. Atributul "dynsrc" (de la "dynamic source") primeşte ca valoare URL-ul fişierului

care contine video-clipul; 2. Atributul "loop" determină numărul de repetiţii ale video-clipului, valorile posibile

fiind: • "-1" sau "infinite" pentru ca video-clipul să se repete de un număr infinit de ori; • un numar întreg pozitiv pentru ca video-clipul să se repete de un număr precizat de

ori. 3. Atributul "start" permite precizarea momentului în care video-clipul va începe, luând

următoarele valori: • "fileopen" (video-clipul va începe când pagina web s-a încărcat în browser); • "mouseover" (video-clipul va începe când mouse-ul este trecut peste imaginea ce

reprezintă video-clipul). 4. Atributul "controls" (fără valori specifice); 5. Atributul "loopdelay" permite setarea în intervalului de timp (în număr de

milisecunde) între două reluări succesive ale video-clipului. Obs: Când nu se află în rulare video-clipul este afişat în pagina web ca o imagine care

poate fi: • Prima imagine din video-clip; • O imagine precizată prin atributul "src" al tag-ului <img>; • Un text precizat de atributul "alt" al tag-ului <img>.

Exemplul 11_4. Video-clip. Obs: Se pot utiliza şi alte atribute specifice tag-ului <img> ca de exemplu:

• "src" pentru specificarea unei imagini alternative;

• "alt" pentru specificarea unui text alternativ.

<html><head><title>Exemplul 11_4</title><head><body> <h1>Video-clip</h1><hr> Treceti mouse-ul pe deasupra imaginii de mai jos si video-clipul va rula de 2 ori.<br> <img dynsrc="Sample.mov" loop="2" start="mouseover" src="aol_sl.gif" alt="Quick Time" controls> </body></html>

INTERNET

LECŢIA 12. HĂRŢI DE IMAGINE

81

Lecţia 12. Hărţi de imagini

Folosirea unei imagini ca "hartă de imagini" Am văzut în lecţia 8, Exemplul 10_4 că o imagine poate fi utilizată ca "zonă

activă" adică sensibilă la apăsarea butonului stâng la mouse-ului. Pentru aceasta imaginea trebuie să fie inserată în documentul HTML între tag-urile <a> şi </a>.

Există însă posibilitatea creării hărţilor de imagini ("Image Map" în engleză) care permit ca diferite zone ale unei imagini să fie definite ca link-uri către diferite pagini web.

Crearea unei hărţi de imagini presupune două etape: 1. Definirea unei imagini ca "hartă de imagini". Pentru aceasta se foloseşte tag-ul <img>

însoţit de două atribute: • Atributul "src" care primeste ca valoare URL-ul imaginii folosite pe post de "hartă

de imagini"; • Atributul "usemap" a cărui valoare este de forma "#harta1" unde "harta1" numele

hărţii definit la punctul 2. Obs: Harta de imagini se poate afla şi într-o altă pagină web caz în care atributul "usemap" primeşte o valoare de forma:

• "nume_pagina.html#harta1"; • "www.cnmv.ro/harti.html/harta1".

2. Definirea hărţii. Definirea hărţii se face în interiorul unui bloc special delimitat de tag-urile <map> şi </map>. Un atribut obligatoriu al tag-ului <map> este "name" care primeşte ca valoare este un nume (numele hărţii) (de exemplu "harta1").

O hartă este formată din mai multe zone. Fiecare zonă se introduce cu ajutorul tag-ului <area>. Tag-ul <area> are trei atribute obligatorii:

• Atributul "shape" determină tipul de "zonă activă" şi poate lua numai trei valori posibile: a) "rect" pentru zone de formă dreptunghiulară; b) "circle" pentru zone de formă circulară; c) "poly" pentru zone de formă poligonală; d) "default" pentru restul imaginii care nu este acoperit de niciuna din zonele de

tipul precizat mai sus. • Atributul "coords" determină coordonatele zonei (vezi paragraful următor). • Atributul "href" primeşte ca valoare URL-ul paginii către care punctează link-ul

zonei respective. Obs: Dacă în locul unui atribut "href" apare nimic sau atributul "nohref" (fără valori suplimentare) atunci acea zonă nu punctează către nici un alt document HTML. Atributul <area> poate avea de asemenea şi atributul "target" care primeşte ca valoare numele unei instanţe a browser-ului în care va fi afişată pagina către care punctează link-ul zonei respective.

INTERNET


82

Coordonatele zonelor active Pentru determinarea coordonatelor unei figuri geometrice (dreptunghi, cerc sau poligon) se utilizează un sistem de coordonate rectangular având originea în colţul stânga-sus al imaginii utilizate ca hartă, axa OX orizontală şi orientată spre dreapta iar axa OY verticală şi orientată în jos (vezi figura alăturată). Unitatea de măsură este pixelul. Un dreptunghi este determinat de coordonatele vârfurilor stânga-sus (x1, y1) şi dreapta-jos (x2, y2) (vezi figura alaturată). Atributul "coords" primeşte atunci o valoare de forma "x1, y1, x2, y2". Exemplu: coords="100, 100, 200, 200". Un cerc este determinat de coordonatele centrului (x,y) şi de raza cercului (r) (vezi figura alăturată). Atributul "coords" primeşte atunci o valoare de forma "x, y, r). Exemplu: coords="400, 200, 100"

X

Y

X

Y

x1 x2

y1

y2

X

Y

x

y r

INTERNET


83

Un poligon este determinat prin succesiunea de coordonate ale vârfurilor (x1, y1), (x2, y2), (x3, y3) etc. Atributul "coords" primeşte ca o valoare de forma: "x1, y1, x2, y2, x3, y3, …". Exemplu: coords="100,300,200,300,400,400,100,400".

Utilizarea unei hărţi de imagini Admitem că avem creată imaginea din figura alăturată (vezi Anexa Hartă de imagini pentru un mod de construire). Această imagine este salvată pe disc în directorul curent de lucru sub numele de "harta de imagini.gif". Întrucât dimensiunile de afişare a imaginii vor fi setate la 600 X 500 pixeli, figurile geometrice vor avea coordonatele (vezi paragraful precedent):

• "100,100,200,200" pentru pătrat; • "400,200,100" pentru cerc; • "100,300,200,300,400,400,100,400" pentru

poligon.

Exemplul 12_1. Utilizarea unei hărţi de imagini.

Alte atribute ale elementului <area> Există încă două atribute ale ale tag-ului <area> şi anume:

• atributul "alt" care permite inserarea unei scurte descrieri a link-ului către care puncează zona activă respectivă (exemplu: alt="descrierea link-ului");

<html><head><title>Exemplul 12_1</title><head><body> <h1>O harta de imagini</h1> <img src="harta de imagini.gif" usemap="#harta1" width="600" height="500"> <map name="harta1"> <area shape="rect" coords="100,100,200,200" href="p2.html"> <area shape="circle" coords="400,200,100" href="p3.html"> <area shape="poly" coords="100,300,200,300,400,400,100, 400" href="p4.html"> </map> </body></html>

X

Y

(x1,y1) (x2,y2)

(x3,y3) (x4,y4)

200 400 600

100

100 300 500

200

300

400

500

INTERNET


84

• atributul universal (valabil şi pentru alte elemente) "title" care permite inserarea în pagina web a unei mici ferestre în care este descris link-ul. Afişarea acestei ferestre are loc atât timp cât mouse-ul se află deasupra zonei active.

Exemplul 12_2. Alte atribute ale elementului <area>.

Suprapunerea zonelor active Dacă două sau mai multe zone active se suprapun atunci are prioritate prima care apare definită în harta <map>…</map>. Exemplul de mai declară în blocul <map>…</map> două zone circulare concentrice dintre care zona de rază mai mică este inactivă. În felul acesta se crează o zonă de forma unei coroane circulare.

Exemplul 12_3. O zonă activă de forma unei coroane circulare.

<html><head><title>Exemplul 12_2</title><head><body> <h1>O harta de imagini</h1> <img src="harta de imagini.gif" usemap="#harta1" width="600" height="500"> <map name="harta1"> <area shape="rect" coords="100, 100, 200, 200" href="p2.html" alt="pagina 2" title="Link catre pagina 2"> <area shape="circle" coords="400, 200, 100" href="p3.html" alt="pagina 3" title="Link catre pagina 3"> <area shape="poly" coords="100, 300, 200, 300, 400, 400, 100, 400" href="p4.html" alt="pagina 4" title="Link catre pagina 4"> </map> </body></html>

<html> <head> <title>Exemplul 12_3</title> <head><body> <h1>O harta de imagini</h1> <img src="harta.gif" usemap="#harta1" width="600" height="500"> <map name="harta1"> <area shape="circle" coords="300,250,100" nohref> <area shape="circle" coords="300,250,200" href="p3.html"> <area shape="default" href="p1.html"> </map> </body></html>

INTERNET

LECŢIA 13. FORMULARE

85

Lecţia 13. Formulare

Interactivitatea Interactivitatea unei pagini web este definită ca posibilitatea ca un client

(utilizator) să comunice cu un server astfel încât utilizatorul să obţină informaţia de care are nevoie.

Limbajul HTML, fiind o formă particulară de realizare a HiperText-ului, oferă posibilitatea navigării între diversele surse de informaţii aflate pe INTERNET prin intermediul link-urilor.

A doua posibilitate de a realiza interactivitatea pentru o pagină web este oferită de formulare (în engleză "form").

Formulare Un formular este un ansamblu de "zone active" alcătuit din butoane de apăsat,

căsuţe de selecţie, câmpuri de editare, etc. O sesiune de lucru cu o pagină web ce conţine un formular cuprinde următoarele etape: 1. Utilizatorul completează formularul şi îl expediază unui server; 2. O aplicaţie dedicată pe server analizează formularul completat şi (dacă este necesar)

stochează datele într-o bază de date; 3. Serverul expediază (dacă este necesar) un răspuns utilizatorului.

Un formular este definit într-un bloc delimitat de tag-urile corespondente <form> şi </form>. Obs:

• Blocurile <form> nu pot fi imbricate; • Într-o pagină web pot fi create oricâte formulare.

Atribute esenţiale ale elementului <form> Există două atribute esenţiale ale elementului <form>: 1. Atributul "action" precizează ce se va întâmpla cu datele formularului odată ce

acestea ajung la destinaţie. De regulă valoarea atributului "action" este URL-ul unui script aflat pe un server WWW care primeşte datele formularului, efectuează o prelucrare a lor şi expediază către utilizator un răspuns. Exemplu: <form action="htttp://www.edu.ro/cgi-bin/nume_script.cgi">.

Scripturile pot fi scrise în limbajele Perl, C sau Unix shel. Crearea unui astfel de script depăşeşte nivelul acestei cărţi.

Obs: Valoarea atributului "action" poate fi de asemenea o adresă validă de e-mail caz în care datele formularului sunt expediate prin poştă electronică pe adresa specificată. În acest caz nu are loc o prelucrare automată a datelor din formular rămânând destinatarului responsabilitatea citirii şi interpretării corecte a datelor primite. Exemplu:

<form action="mailto:[email protected]"> 2. Atributul "method" precizează metoda utilizată de browser pentru expedierea datelor

formularului. Sunt posibile următoarele valori: • "get" (valoarea implicită). În acest caz datele din formular sunt adăugate la URL-ul

precizat de atributul "action".

INTERNET


86

• Nu sunt permise cantităţi mari de date (maxim 1 KO); • Datele expediate se vor găsi pe serverul destinaţie stocate în variabila de

mediu "QUERY_STRING". • Între URL şi date este pus "?". Datele sunt adăugate după sintaxa:

"nume_camp=valoare_camp". Între diferite seturi de date este pus "&". Exemplu:

"http://www.edu.ro/cgi-bin/nume_script.cgi?nume1=valoare1&nume2=valoare2" • "post". În acest caz datele sunt expediat separat. Sunt permise cantităţi mari de date.

(chiar de ordinul MO). Obs: Datele formularului se găsesc dispozitivul de intrare al serverului destinaţie iar numărul de octeţi transmişi se află în variabila de mediu "CONTENT_LENGTH.POST".

Expedierea unui formular vid prin poştă electronică Pentru ca un formular să fie funcţional trebuie să fie precizat ce se va întâmpla cu

el după completare şi expediere. Cel mai simplu mod de utilizare al unui formular este ca el să fie expediat prin

poştă electronică (e-mail). Pentru aceasta se foloseşte un atribut al al tag-ului <form> şi anume "action" care primeşte ca valoare "mailto:" concatenat cu o adresă validă de e-mail către care se va expedia formularul completat (de exemplu "[email protected]".). Exemplul 13_1. Un formular vid expediat prin e-mail.

Un formular cu un câmp de editare şi un buton de expediere Acest exemplu prezintă un formular ce conţine un câmp de editare şi un buton de

expediere a formularului prin e-mail. Majoritatea elementelor unui formular sunt definite cu ajutorul tag-ului <input>.

Pentru a preciza tipul elementului se foloseşte atributul "type" al tag-ului <input>. Pentru un câmp de editare acest atribut primeşte valoarea "text".

Alte atribute sunt importante pentru un element <input> şi anume: • Atributul "name" permite ataşarea unui nume fiecărui element al formularului; • Atributul "value" permite atribuirea unei valori iniţiale unui element al

formularului. Această valoare iniţială poate fi ulterior modificată de utilizator. La expedierea formularului se transmit către server perechi de forma

"nume=valoare" care cuprind numele elementului unui formular şi valoarea acestui element.

Un buton de expediere al unui formular se introduce cu ajutorul tag-ului <input> în care atributul "type" este setat la valoarea "submit". Acest element poate primi un nume

<html><head><title>Exemplul 13_1</title></head><body> <h1>Un formular vid expediat prin e-mail.</h1><hr> Formularul nu se vede întrucât nu contine nici un element. <form action="mailto:[email protected]" method="post"> </form> </body></html>

INTERNET


87

prin atributul "name". Pe buton apare scris "Submit Query" sau valoarea atributului "value" dacă această valoare este setată.

Exemplul 13_2. Un formular cu un câmp de editare şi un buton de expediere.

Obs: După completarea ca în figura de mai sus şi expedierea formularului către destinatar acesta va găsi în interiorul mesajului următorul conţinut: "numele=GUGOIU+TEODORU", caracterul "spaţiu" fiind reprezentat de "+".

Pentru elementul <input> de tipul câmp de editare (type="text") alte două atribute sunt pot fi utile:

• Atributul "size" specifică lăţimea câmpului de editare. Dacă valoarea tastată într-un câmp de editare depăseşte această lăţime atunci se execută automat un "scroll" al acestui câmp.

• Atributul "maxlength" specifică numărul maxim de caractere pe care le poate primi un câmp de editare. Caracterele tastate peste numărul maxim de caractere sunt ignorate. Exemplul 13_3. Un formular cu un câmp de editare particularizat. Obs:

• Dacă atributul "type" lipseşte într-un element <input> atunci câmpul respectiv este considerat implicit ca fiind de tip "text";

• Formularele cu un singur câmp (de tip text) nu au nevoie de un buton de expediere. Datele sunt expediate automat după completarea câmpului şi apăsarea tastei "ENTER";

• Într-un formular pot exista mai multe butoane de expediere având atributul "name" setat la valori diferite.

<html><head> <title>Exemplul 13_2</title> </head> <body> <h1>Un formular cu un camp de editare si un buton de expediere</h1><hr> <form action="mailto:[email protected]" method="post"> Numele:<input type="text" name="numele" value="Numele si prenumele"><br> <input type="submit" value="expediaza"> </form> </body></html>

<html><head><title>Exemplul 13_3</title></head><body> <h1>Un formular cu un camp de editare particularizat</h1><hr> Latimea campului de editare este de 10 caractere.<br> Numarul maxim de caractere admise este de 20.<br> <form method="post" action="mailto:[email protected]"> <input type="text" name="numele" value="Numele si prenumele" size="10" maxlength="20"><br> <input type="submit"> </form> </body></html>

INTERNET


88

Butonul Reset Dacă un element de tip <input> are atributul "type" setat la valoarea "reset" atunci

în formular se introduce un buton pe care scrie "Reset". La apăsarea acestui buton toate elementele din formular primesc valorile implicite (definite odată cu formularul) chiar dacă aceste valori au fost modificate de utilizator.

Un buton "Reset" poate primi un nume cu ajutorul atributului "name" şi o valoare printr-un atribut "value". Pe un buton "Reset" este scris textul "Reset" dacă atributul "value" lipseşte sau valoarea atributului "value" în caz contrar. Exemplul 13_4. Un formular cu un buton Reset.

Câmp de editare de tip "Password" Dacă se utilizează tag-ul <input> având atributul "type" setat la valoarea

"password" atunci în formular se introduce un element asemănător cu un câmp de editare obişnuit (introdus prin type="text"). Toate atributele de la un câmp de editare rămân valabile.

Singura deosebire constă în faptul că în câmpul de editare nu apar caracterele în clar ci apar numai caractere "*" care ascund de privirile altui utilizator aflat în apropiere valoarea introdusă într-un asemenea câmp.

La expedierea formularului însă se transmite în clar valoarea tastată într-un câmp de tip "password".

Exemplul 13_5. Un formular cu câmp password.

<html><head><title>Exemplul 13_4</title></head><body> <h1>Un formular cu un buton Reset</h1><hr> <form method="post" action="mailto:[email protected]"> Introduceti numele: <input type="text" name="nume" value="Numele"><br> Introduceti prenumele: <input type="text" name="prenume" value="Prenumele"><br> <input type="reset" value="sterge"> <input type="submit"> </form> </body></html>

<html><head> <title>Exemplul 13_5</title> </head><body> <h1>Un formular cu un camp password</h1><hr> <form method="post" action="mailto:[email protected]"> Nume:<input type="text" name="nume"><br> Prenume: <input type="text" name="prenume"><br> Password:<input type="password" name="parola"><br> <input type="reset" value="sterge"><br> <input type="submit" value="expediaza"> </form> </body></html>

INTERNET


89

Obs: La completarea formularului ca în figura de mai sus şi la completarea câmpului de tip "password" cu "mishu" destinatarul va primi un mesaj având următorul conţinut: "nume=Ionescu&prenume=Mihai+Valentin&parola=mishu"

Butoane radio Butoanele radio permit alegerea, la un moment dat, a unei singure variante dintre

mai multe variante posibile. Butoanele radio se introduc prin tag-ul <input> având atributul "type" setat la

valoarea "radio". Obs:

• Toate butoanele ce aparţin unei familii de butoane radio au acelaşi nume setat prin atributul "name".

• Atributul "value" primeşte ca valoare un text care va fi expediat server-ului împreună cu numele familiei de butoane.

• Atributul "checked" (fără alte valori) permite selecţia implicită a unui buton dintr-o familie de butoane radio. Cel mult un atribut "checked" poate apare pentru o aceeaşi familie de butoane radio.

Exemplul 13_6. Un formular cu butoane radio.

La expedierea formularului se va transmite una din perechile "sex=b" sau "sex=f" în funcţie de alegerea facută de utilizator.

Casete checkbox O casetă de tip validare (checkbox) permite selecţia sau deselecţia unei opţiuni.

Pentru inserarea unei casete de tip "checkbox" se utilizează tag-ul <input> cu atributul "type" setat la valoarea "checkbox".

Obs: • Fiecare casetă poate avea un nume definit prin atributul "name"; • Fiecare casetă poate avea valoarea implicită "selectat" definită prin atributul

"checked" (nu sunt necesare alte valori); • Fiecare casetă poate avea setat atributul "value" cu valoarea care va fi inclusă în

perechea "name=value" ce va fi expediată odată cu formularul. Dacă acest atribut lipseşte atunci se va expedia perechea "name=on". Casetele care sunt deselectate nu trimit către server perechi "name=value".

<html><head><title>Exemplul 13_6</title></head><body> <h1>Un formular cu butoane radio</h1><hr> <form method="post" action="mailto:[email protected]"> Alegeti sexul:<br> Barbatesc<input type="radio" name="sex" value="b"> Femeiesc<input type="radio" name="sex" value="f"><br> <input type="reset"> <input type="submit"> </form> </body></html>

INTERNET


90

Exemplul 13_7. Un formular cu casete checkbox.

Caseta "File" Conţinutul întreg al unui fişier poate fi pe post de valoare într-o pereche

"name=value" a unui formular. Pentru aceasta se inserează un element <input> într-un formular având ca

atributul "type" setat la "file" ("file" în engleză înseamnă fişier). Alte trei atribute sunt utile pentru un element de tip "file":

• Atributul "name" permite ataşarea unui nume. Acest nume va apare în perechea "name=value" expediată serverului;

• Atributul "value" primeşte ca valoare URL-ul fişierului care va fi expediat odată cu formularul. Această valoare poate fi atribuită direct atributului "value", poate fi tastată într-un câmp de editare ce apare odată cu formularul sau poate fi aleasă prin intermediul unei casete de tip "File Upload" sau "Choose File" care apare la apăsarea butonului "Browse…" din formular;

• Atributul "enctype" metoda utilizată la criptarea fişierului de expediat. Valoarea acestui atruibut este "multipart/form-data".

Exemplul 13_8. Un formular cu casetă file.

<html><head><title>Exemplul 13_7</title></head><body> <h1>Un formular cu casete checkbox</h1><hr> <form method="post" action="mailto:[email protected]"> Alegeti meniul:<br> Pizza <input type="checkbox" name="pizza" value="o portie"> Nectar <input type="checkbox" name="nectar" value="un pahar"> Bere <input type="checkbox" name="bere" value="o sticla"> Cafea <input type="checkbox" name="cafea" value="o ceasca"><br> <input type="reset"> <input type="submit"> </form> </body></html>

<html><head><title>Exemplul 13_8</title></head><body> <h1>Un formular cu caseta file</h1><hr> <form method="post" action="mailto:[email protected]"> Alegeti fisierul: <input type="file" name="fisier" value="c:\html\p2.html" enctype="multipart/form-data"><br> <input type="reset"> <input type="submit"> </form> </body></html>

INTERNET


91

Elementul "image" In Lecţia 12 am discutat despre hărţile de imagini. În acest paragraf vom afla

despre un alt mod de a utiliza o imagine pe post de hartă (un click pe diferite zone ale ei va determina diferite acţiuni).

Pentru aceasta utilizăm tag-ul <input> având atributul "type" setat la valoarea "image". Următoarele atribute sunt utile când utilizăm acest element într-un formular:

• Atributul "src" primeşte ca valoare URL-ul imaginii care va fi folosită pe post de hartă;

• Atributul "name" primeşte ca valoare un "nume" care va fi folosit la expedierea datelor către server;

• Atributul "align" este folosit pentru alinierea imaginii în cadrul paginii web. El primeşte aceleaşi valori şi cu aceleaşi semnificaţii cu cele utilizate la alinierea unei imagini.

Harta de imagini este de tip "server" şi funcţionează în felul următor: • Utilizatorul efectuează click într-o zonă anumită pe suprafaţa imaginii; • Imediat sunt trimise date către server-ul de pagini web la care suntem conecaţi.

Aceste date sunt de forma "nume.x=valoare_x" şi "nume.y=valoare_y" unde "nume" este valoarea atributului "name" iar "valoare_x" şi "valoare_y" reprezintă coordonatele în pixeli ale punctului în care s-a făcut click pe imagine faţă de colţul stânga-sus al imaginii.

• O aplicaţie dedicată pe server analizează aceste date şi în funcţie de coordinatele x şi y ale punctului în care utilizatorul a efectuat click pe imagine se încarcă diferite pagini web. Obs: Harta de imagini prezentată mai sus este de tip "server" deoarece deciziile

privind paginile care se vor încărca sunt luate de o aplicaţie aflată pe server. Exemplul 13_9. Un formular cu o harta de imagini de tip server.

Obs:

• În exemplul de mai sus lipsesc butoanele "Reset" şi "Submit Query" întrucât formularul cu date este expediat către server ori de câte ori utilizatorul efectuează click cu mouse-ul pe imagine. În acest fel o imagine poate fi folosită pe post de buton de expediere a formularului.

• Exemplul de mai sus este numai pe jumătate funcţional. La efectuarea unui click pe imagine, datele sunt cuprinse într-un e-mail şi expediate la adresa menţionată în formular. În realitate datele sunt expediate către server în alt format (nu prin e-mail), sunt analizate imediat de o aplicaţie aflată pe server (un script CGI) care

<html><head> <title>Exemplul 13_9</title> </head><body> <h1>Un formular cu o harta de imagini de tip server</h1><hr> <form method="post" action="mailto:[email protected]"> <input type="image" src="harta de imagine.gif"> </form> </body></html>

INTERNET


92

formulează şi trimite un răspuns utilizatorului. Configurarea serverului şi scrierea unei asemenea aplicaţii depăseşte nivelul acestei cărţi;

• O serie de atribute de la elementul <img> (ca de exemplu "align") sunt aplicabile şi la elementul <input image=…>.

Elementul "button" Într-un formular pot apare butoane. Când utilizatorul apasă un buton se

declanşează în execuţie o funcţie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcţii (acest lucru este posibil dacă se utilizează limbajele "JavaScript" sau "Java").

Pentru a insera un buton într-un formular se utilizează tag-ul <input> având atributul "type" setat la valoarea "button". Alte două atribute utile ale elementului "button" sunt:

• Atributul "name" permite ataşarea unui nume butonului; • Atributul "value" primeşte ca valoare textul care va fi afişat pe buton.

Exemplul 13_10. Un formular cu un buton de apăsat.

Obs: La apăsarea butonului din exemplul de mai sus nu se execută nimic întrucât

în pagina html nu există un script "JavaScript" care să trateze evenimentul de apăsare al butonului. Scrierea unei astfel de script depăseşte nivelul acestei cărţi.

Elementul "hidden" Elementul "hidden" este un câmp ascuns într-un formular în sensul că valoarea lui nu va fi afişată în pagina web. Elementul "hidden" este inserat în formular cu ajutorul tag-ului <input> al cărui atribut "type" primeşte valoarea "hidden". Un atribut esenţial al unui element de tip "hidden" este atributul "value". Valoarea acestui atribut poate fi setată la crearea elementului sau poate fi stabilită de un script JavaScript sau de un appplet Java. La expedierea formularului se transmite către server perechea "nume_camp_hidden=valoare" unde "nume_camp_hidden" este valoarea atribuită atributului "name" iar "valoare" este valoarea atributului "value".

Exemplu. Elementul hidden.

<html><head><title>Exemplul 13_10</title></head><body> <h1>Un formular cu un buton de apasat</h1><hr> <form action="mailto:[email protected]"> Acesta este un buton: <input type="button" name="butonul1" value="apasa aici"><br> </form> </body></html>

<html><head><title>Elementul hidden</title></head><body> <h1>Un formular cu un camp "hidden"</h1><hr> <form action="mailto:[email protected]"> <input type="hidden" name="secret" value="10000$"><br> </form> </body></html>

INTERNET


93

Lista de selecţie Lista de selecţie permite utilizatorului să aleagă unul sau mai multe elemente dintr-

o lista finită de elemente posibile. Lista de selecţie este inclusă în formular cu ajutorul tag-urilor corespondente

<select> şi </select>. O listă de selecţie poate avea setate următoarele atribute:

• Atributul "name" care ataşează un nume listei de selecţie (utilizat în perechile "name=value" care sunt expediate server-ului);

• Atributul "size" care precizează (printr-un număr întreg pozitiv, valoarea implicită fiind "1") câte elemente din listă sunt vizibile la un moment dat pe ecran (celelalte devenind vizibile prin acţiunea "scroll-bar-ului" ataşat automat listei). Obs: În mod implicit un singur element din listă poate fi selectat la un moment dat.

Pentru listele ce permit selecţii multiple vezi paragraful următor. Elementele unei liste de selecţie sunt incluse în listă cu ajutorul tag-ului <option>.

Două atribute ale tag-ului <option> se dovedesc utile: • Atributul "value" primeşte ca valoare un text care va fi expediat server-ului în

perechea "name=value". Dacă acest atribut lipseşte atunci către server va fi expediat textul ce urmează după <option>.

• Atributul "selected" (fără alte valori adiţionale) permite selectarea implicită a unui element al listei.

Exemplul 13_11. Un formular cu o listă de selecţie.

Lista de selecţie cu selecţii multiple În mod implicit o listă de selecţie permite selecţia unui singur element din listă la

un moment dat. La expedierea formularului o singură pereche "name=value" va fi expediată server-ului.

Există posibilitatea definirii unei liste de selecţie care să permită selectarea la un moment dat a mai multor elemente din listă.

O listă de selecţie ce permite selecţii multiple se crează întocmai ca o listă de selecţie obişnuită. În plus tag-ul <select> are un atribut "multiple" (fără alte valori).

<html><head><title>Exemplul 13_11</title></head><body> <h1>Un formular cu o lista de selectie</h1><hr> <form method="post" action="mailto:[email protected]"> Universitatea absolvita:<br> <select name="universitate" size="3"> <option value="B"> Universitatea din Bucuresti <option value ="CL" selected> Universitatea din Cluj <option value="TM"> Universitatea din Timisoara <option value="IS"> Universitatea din Iasi </select><br><br> <input type="reset"> <input type="submit"> </form> </body></html>

INTERNET


94

Când formularul este expediat către server pentru fiecare element al listei care este selectat se inserează câte o pereche "name=value" unde "name" este numele listei.

Exemplul 13_12. Un formular cu o listă de selecţie ce acceptă selecţii multiple.

Câmpul de editare multilinie Într-un formular pot fi incluse şi câmpuri de editare multilinie. Acest lucru se face

cu ajutorul tag-ului <textarea>.Pentru a particulariza un câmp de editare multilinie se folosesc următoarele atribute:

• Atributul "cols" specifică numărul de caractere care vor fi afişate într-o linie; • Atributul "rows" specifică numărul de linii care vor fi afişate simultan; • Atributul "name" permite ataşarea unui nume câmpului de editare multilinie; • Atributul "wrap" ("wrap" vine de la "word wrap"=despărţirea în silabe a unui

cuvânt) determină comportamentul câmpului de editare faţă de sfârşitul de linie. Acest atribut poate primi următoarele valori: a) "off". În acest caz are loc:

• ruperea cuvintelor la marginea dreaptă a editorului se produce numai când doreşte utilizatorul;

• includerea caracterului de sfârşit de linie în textul transmis server-ului odată cu formularul;

b) "hard". În acest caz are loc: • ruperea cuvintelor la marginea dreaptă a editorului; • includerea caracterului de sfârşit de linie în textul transmis server-ului

odată cu formularul; c) "soft". În acest caz are loc:

• ruperea cuvintelor la marginea dreaptă a editorului; • nu se include caracterului de sfârşit de linie în textul transmis server-

ului odată cu formularul;

<html><head><title>Exemplul 13_12</title></head><body> <h1>Un formular cu o lista de selectie ce accepta selectii multiple</h1><hr> <form action="mailto:[email protected]"> Limbi straine cunoscute:<br> <select name="limbi straine" size="4"> <option value="e" selected> Engleza <option value ="f">Franceza <option value="g">Germana <option value="s">Spaniola <option value="i">Italiana <option value="r">Rusa </select><br><br> <input type="reset"> <input type="submit"> </form> </body></html>

INTERNET


95

Exemplul 13_13. Un formular cu un câmp de editare multilinie.

Un formular complex În exemplul următor este prezentat un formular conţinând elemente prezentate mai înainte. Câmpurile formularului sunt incluse în celulele unui tabel pentru a obtine alinierea dorită.

<html><head><title>Exemplul 13_13</title></head><body> <h1>Un formular cu un câmp de editare multilinie</h1><hr> <form method="post" action="mailto:[email protected]"> <textarea name="text multilinie" cols="30" rows="5" wrap="off"> Prima linie din textul initial Adoua linie din textul initial </textarea> <input type="reset"> <input type="submit"> </form> </body></html>

<html><head><title>Exemplul 13_14</title></head><body> <h1>Un formular complex</h1><hr> <center><table bgcolor="yellow"><form method="post" action="mailto:[email protected]"> <caption align="top">MENIU</caption> <tr align=left><th>Numele:<td><input type="text" name="numele"> <tr align=left><th>Prenumele:<td><input type="text" name="prenumele"> <tr align=left><th>Telefonul:<td><input type="text" name="telefonul"> <tr align=left><th>Alegeti pizza:<td> <input type="checkbox" name="ciuperci">cu ciuperci <input type="checkbox" name="mexicana">mexicana <input type="checkbox" name="europeana">europeana <tr align=left><th>Alegeti sucul:<td> <input type="checkbox" name="fanta">fanta <input type="checkbox" name="pepsi">pepsi <input type="checkbox" name="nectar">nectar <tr align=left><th>Alegeti plata: <td> <ul style="background-color:lightblue;"> <li><input type="radio" name="plata">cash <li><input type="radio" name="plata">card </ul> <tr align=left><th>Comentarii:<td> <textarea name="comentarii" cols="30" rows="5" wrap="off"> Inserati aici aprecierile dumneavoastra legate de calitatea serviciilor noastre </textarea> <tr align=left valign=top><td><input type="reset" value="sterge"> <td><input type="submit" value="expediaza"> </form></table></center> </body></html>

INTERNET


96

Blocul "button" Un buton pentru lansarea în execuţie a unei acţiuni poate fi introdus într-un formular prin elementul <input> având atributul "type" setat la valoarea "button" aşa cum s-a văzut mai sus. Există o a doua modalitate de a introduce într-o pagină web un buton de apăsat şi anume prin intermediul blocului <button>…</button>. Un astfel de buton poate fi inserat într-un formular, în acest caz având acţiuni legate de acel formular sau poate fi inserat oriunde în pagină având acţiuni independente de formulare. Atributele posibile ale elemntului "button" sunt:

• "name" acordă elementului un nume; • "value" precizează textul care va fi afişat pe buton; • "type" precizează acţiunea ce se va executa la apăsarea butonului dacă acesta este

inclus într-un formular. Valorile posibile pentru acest atribut sunt: • "button"; • "submit"; • "reset".

Obs: În corpul blocului <button>…</button> se poate afla un text sau poate fi marcajul de inserare al unei imagini.

INTERNET


97

Exemplul 13_15. Blocul "button".

Observaţii finale 1. Elementul <form> poate avea un atribut "target" care primeşte ca valoare numele unei

ferestre a browser-ului în care va fi încărcat răspunsul trimis de server-ul WWW la expedierea unui formular.

2. Toate elementele cuprinse într-un formular pot avea un atribut "disabled" care permite dezactivarea respectivului element;

3. Toate elementele de tip "text" cuprinse într-un formular pot avea un atribut "readonly" care interzice modificarea conţinutului acelui element.

<html><head><title>Exemplul 13_15</title></head><body> <h1>Blocul "button"</h1><hr> Un buton simplu:<br> <button name="butonul1">Apasa aici </button><br> <div style="background-color:yellow;"> <form method="post" action="mailto:[email protected]"> Numele:<input type="text" name="numele"><br> Prenumele:<input type="text" name="prenumele"><br> <button name="butonul2" type="submit"> <img src="Image20.gif" width="100"> </button> </form></div> </body></html>

INTERNET

LECŢIA 14. FRAM-URI

98

Lecţia 14. Frame-uri

Frame-uri sau sub-ferestre Până în acest moment în fereastra browser-ului era încărcat un singur document

HTML. Frame-urile ne permit să definim în fereastra browser-ului sub-ferestre în care să fie încărcate documente HTML diferite.

Frame-urile sunt definite într-un fişier ".html" special în care blocul <body>…</body> este înlocuit de blocul <frameset>…</frameset>. În interiorul acestui bloc fiecare frame este introdus prin tag-ul <frame>. Un atribut obligatoriu al tag-ului <frame> este "src" care primeşte ca valoare URL-ul documentului HTML care va fi înărcat în acel frame.

Definirea frame-urilor se face din aproape în aproape prin împărţirea ferestrelor (şi a sub-ferestrelor) în linii şi coloane:

• Împărţirea unei ferestre într-un număr de sub-ferestre de tip "coloană" se face cu ajutorul atributului "cols" al tag-ului <frameset> ce descrie acea fereastră.

• Împărţirea unei ferestre într-un număr de sub-ferestre de tip "linie" se face cu ajutorul atributului "rows" al tag-ului <frameset> ce descrie acea fereastră.

• Valoarea atributelor "cols" şi "rows" este o listă de elemente (pentru fiecare sub-fereastră câte un element) separate prin virgulă care descriu modul în care se face împărţirea. Elementele listei pot fi: a) Număr întreg de pixeli; b) Procente din dimensiunea ferestrei (număr între 1 şi 99 terminat cu "%"); c) "n*" care înseamnă n părţi din spaţiul rămas posibil. Obs: Dacă mai multe elemente din listă sunt setate cu "*" atunci spaţiul rămas

disponibil pentru ele se va împărţi în mod egal. Exemplu 1: "200, *, 50%, *" înseamnă o împărţire în 4 sub-ferestre, prima fiind de

200 de pixeli, a treia fiind jumătate din spaţiul total disponibil, a doua şi a patra ocupând restul de spaţiu rămas disponibil în mod egal.

Exemplu 2: "200, 1*, 50%, 2*" înseamnă o împărţire în 4 sub-ferestre, prima fiind de 200 de pixeli, a treia fiind jumătate din spaţiul total disponibil, a doua şi a patra ocupând restul de spaţiu rămas disponibil care se împarte în trei părţi egale, a doua fereastră luând o parte iar a patra fereastră luând 2 părţi. Obs: O sub-fereastră poate fi un frame (folosinduse <frame>) în care se va încărca un document HTML sau poate fi împărţită la rândul ei în alte sub-ferestre (folosindu-se <frameset>).

Exemplul 14_1. O pagină web cu două frame-uri verticale egale.

Obs: Exemplul de mai sus presupune că în prealabil au fost create două fişiere ".html" numite "p1.html" şi "p2.html" şi că acestea se află în directorul curent de lucru.

<html><head><title>Exemplul 14_1</title></head> <frameset cols="*,*"> <frame src="p1.html"> <frame src="p2.html"> </frameset> </html>

INTERNET


99

În exemplul următor este creată o pagină web cu trei frame-uri orizontale. Al doilea frame are atributul "src" setat la URL-ul unei imagini.

Exemplul 14_2. O pagină web

cu trei frame-uri orizontale.

În exemplul următor este creată o matrice de 6 frame-uri (2 X 3). Pentru a realiza acest lucru se folosesc simultan cele două atribute "cols" şi "rows".

Exemplul 14_3. O matrice de 2 X 3 frame-uri. v

În exemplul următor este creată o pagină web având trei frame-uri mixte. Pentru a

o crea se procedează din aproape în aproape. Mai întâi pagina este împărţită în două sub-ferestre de tip "coloană" după care a două sub-fereastră este împărţită în două sub-ferestre de tip "linie".

Exemplul 14_4. O pagină web cu

trei frame-uri mixte.

<html> <head> <title>Exemplul 14_2</title> </head> <frameset rows="100,*,10%"> <frame src="p1.html"> <frame src="cnmv.jpg"> <frame src="p3.html"> </frameset> </html>

<html><head><title>Exemplul 14_4</title></head> <frameset cols="20%,*">

<frame src="p1.html"> <frameset rows="*,*">

<frame src="p2.html"> <frame src="p3.html">

</frameset> </frameset> </html>

<html> <head> <title>Exemplul 14_3</title> </head> <frameset rows="*,*" cols="*,*"> <frame src="p1.html"> <frame src="p2.html"> <frame src="p3.html"> <frame src="p4.html"> </frameset> </html>

INTERNET


100

În exemplul următor pagina web este construită cu ajutorul a două fişiere ".html" în care sunt configurate frame-urile:

Exemplul 14_5. O pagină web complexă.

Culori pentru chenarul frame-urilor Pentru a seta culoarea chenarului unui frame se utilizează atributul "bordercolor".

Acest atribut primeşte ca valoare un nume de culoare sau o culoare setată în conformitate cu modelul de culoare RGB. Atributul "bordercolor" poate fi ataşat atât tag-ului <frameset> pentru a seta culoarea tuturor chenarelor frame-urilor incluse sau tag-ului <frame> pentru a seta culoarea chenarului pentru un frame individual.

Exemplul 14_6. O pagină web cu trei frame-uri mixte având chenare colorate.

Dimensionarea chenarului unui frame Atributul "border" al tag-ului <frameset> permite setarea lăţimii chenarului

tuturor frame-urilor incluse la un număr dorit de pixeli. Obs:

• Valoarea implicită a atributului "border" este de 5 pixeli; • O valoarea de "0" pixeli va implica frame-uri fără chenar.

<html><head><title>Exemplul 14_6</title></head> <frameset cols="20%,*" bordercolor="red">


<frame src="p2.html" bordercolor="green">

<frame src="p3.html"> </frameset> </frameset> </html>

<html><head><title>Exemplul 14_5</title></head> <frameset cols="20%,*">

<frame src="p1.html"> <frame src="frame.html">

</frameset> </html>

<html><head><title>Fisierul "frame.html"</title></head> <frameset rows="*,*">


</frameset> </html>

INTERNET


101

Exemplul 14_7. Frame-uri cu chenare late. În exemplul următor se utilizează border="0" pentru a obţine frame-uri fără chenar.

Exemplul 14_8. Frame-uri fără chenare.

Chenare invizibile În mod implicit chenarul unui frame este afişat şi are un aspect tridimensional.

Afişarea chenarului unui frame poate fi inhibată dacă se utilizează atributul "frameborder" setat la valoarea "no". Acest atribut poate fi ataşat atât tag-ului <frameset> (inhibarea fiind valabilă pentru toate frame-urile incluse) cât şi tag-ului <frame> (inhibarea fiind valabilă numai pentru un singur frame). Obs: Valorile posibile ale atributului "frameborder" sunt:

• "yes" echivalent cu "1"; • "no" echivalent cu "0".

Exemplul 14_9. Frame-uri cu chenare invizibile.

<html><head><title>Exemplul 14_7</title></head> <frameset cols="20%,*" border="20">




<html><head><title>Exemplul 14_8</title></head> <frameset cols="20%,*" border="0">




<html><head><title>Exemplul 14_9</title></head> <frameset cols="20%,*" frameborder="no">




INTERNET


102

Bara de defilare Atributul "scrolling" al tag-ului <frame> este utilizat pentru a adăuga unui frame o

bară de defilare care permite navigarea în interiorul documentului afişat în interiorul frame-ului.

Valorile posibile sunt: • "yes", barele de defilare sunt adăugate întotdeauna; • "no", barele de defilare nu sunt utilizabile; • "auto", barele de defilare sunt vizibile atunci când este necesar.

Exemplul 14_10. Bara de defilare.

Poziţionarea documentului într-un frame Atributele "marginheight" şi "marginwidth" ale tag-ului <frame> permit setarea

distanţei în pixeli dintre conţinutul unui frame şi marginile verticale respectiv orizontale ale unui frame. Valorile posibile sunt:

• număr de pixeli; • procent din lăţimea respectic înălţimea frame-ului.

Exemplul 14_11. Poziţionarea documentului într-un frame.

Chenare fixe Atributul "noresize" al tag-ului <frame> (fără nici o valoare suplimentară) dacă este

prezent inhibă posibilitatea implicită a utilizatorului de a redimensiona frame-ul cu ajutorul mouse-ului.

<html><head><title>Exemplul 14_11</title></head> <frameset cols="*,*,*"> <frame src="p.html"> <frame src="p.html" marginheight=20> <frame src="p.html" marginwidth=20> </frameset> </html>

<html><head><title>Exemplul 14_10</title></head> <frameset cols="*,*,*"> <frame src="p.html" scrolling="yes" noresize> <frame src="p.html" scrolling="no" noresize> <frame src="p.html" scrolling="auto" noresize> </frameset> </html>

INTERNET


103

Browser-e vechi Pentru browser-e vechi care nu acceptă frame-uri există posibilitatea ca în pagina

web să apară un avertisment care să invite utilizatorul să instaleze o versiune mai modernă pentru browser.

Pentru aceasta se utilizează tag-ul <noframes> în interiorul blocului <frameset>.

Exemplul 14_12. Browser-e vechi.

Frame-uri in-line Un frame "in-line" se inserează într-o pagină web în mod asemănător cu o imagine. Pentru a insera un frame "in-line" utilizăm blocul <iframe>…</iframe>. Atributele acceptate de tag-ul <iframe> sunt în parte preluate de la tag-urile <frame> şi <frameset> ca:

• "src", "border", "frameborder", "bordercolor", "marginheight", "marginwidth", "scrolling", "name", "noresize";

sau sunt preluate de la tag-ul <img> ca: • "vspace", "hspace", "align", "width", "height".

Exemplul 14_13. Frame "in-line".

<html><head><title>Exemplul 14_12</title></head> <frameset cols="*,*">



</frameset> <noframes><body> <p>Aceasta pagina contine farme-uri. <p>Pentru o varianta fara frame-uri a acestei pagini vizitati: <a href="pff.html">Pagina fara frame</a> </body></frameset> </html>

<html><head><title>Exemplul 14_13</title></head><body> <a href="p1.html" target="ilf">Pagina 1</a><br> <a href="p1.html" target="ilf">Pagina 1</a><br> <a href="p1.html" target="ilf">Pagina 1</a> <center><iframe width="60%" border=2 bordercolor=red name="ilf" src="p.html"> Daca vedeti acest text inseamna ca browser-ul dumneavoastra nu suporta frame-uri "in-line". <a href='pffil.html">Pagina fara frame-uri in-line</a> </iframe></center></body></html>

INTERNET


104

Ţinte pentru link-uri În mod implicit la efectuarea unui click pe un link noua pagină (către care punctează link-ul) o înlocuieşte pe cea curentă în aceeaşi fereastră (acelasi frame). Acest comportament implicit poate fi modificat în două moduri:

• prin plasarea în blocul <head>…</head> al unui element <base> care precizează prin atributul "target" numele ferestrei (frame-ului) în care se vor încărca toate paginile noi referite de link-urile din pagina curenta conform sintaxei:

<base target="nume_fereastra/frame_de_baza"> • prin plasarea în tag-ul <a> a atributului "target" care precizează numele ferestrei

(frame-ului) în care se va încărca pagina nou referită de link conform sintaxei: <a href="link" target="nume_fereastra/frame">…</a> Obs: Dacă este prezent atât un atribut "target" în <base> cât şi un atribut "target" în <a> atunci cele precizate de atributul "target" din <a> sunt prioritare. Numele unui frame este setat prin atributul "name" al tag-ului <frame> conform sintaxei: <frame name="nume_frame">. În exemplul următor este prezentată o pagină web cu trei fram-uri. Toate link-urile din frame-ul 1 încarcă paginile în frame-ul 2. Toate link-urile din frame-ul 2 încarcă paginile în frame-ul 3.

Exemplul 14_14. Ţinte pentru link-uri.

<html><head> <title>cuprins.html</title> </head><body> <h3>Cuprins</h3> <a href="e1.html" target=exemple>1. Prima pagina</a><br> <a href="e2.html" target=exemple>2. Culori si fonturi</a><br> <a href="e3.html" target=exemple>3. Stilul caracterelor</a><br> </body></html>

<html><head> <title>e1.html</title> </head> <body> <h3>Exemplele lectiei 1</h3> <a href="t1_1.html" target=teorie>1. Prima pagina</a><br> <a href="t1_2.html" target=teorie>2. O pagina html standard</a><br> <a href="t1_3.html" target=teorie>3. Titlul unei pagini web</a><br> </body> </html>

<html><head><title>frameset.html</title> <frameset cols="25%, *"> <frameset rows="*, *"> <frame src="cuprins.html" name="cuprins"> <frame src="exemple.html" name="exemple"> </frameset> <frame src="teorie.html" name="teorie"> </frameset> </html>

INTERNET


105

Valori "magice" pentru atributul "target" Atributul "target" al tag-ului <frame> acceptă anumite valori predefinite de o valoare deosebită pentru creatorii de pagini web. Iată aceste valori şi semnificaţia lor specială (magică):

• "_self" (încărcarea noii pagini are loc în frame-ul curent); • "_blank" (încărcarea noii pagini are loc într-o fereastră nouă anonimă); • "_parent" (încărcarea noii pagini are loc în frame-ul părinte al frame-ului curent,

daca acesta există, altfel în fereastra browser-ului curent); • "_top" (încărcarea noii pagini are loc în fereastra browser-ului ce conţine frame-ul

curent).

Internet. mijloc de informare si comunicare

Documents

Transcript of Internet. mijloc de informare si comunicare