	Biologie	Chimie	Didactica	Fizica	Geografie	Informatica
	Istorie	Literatura	Matematica	Psihologie

Informatica

Index » educatie » Informatica
» PROGRAMARE WEB

PROGRAMARE WEB

Lectia 1

LAN - Local Area Network

MAN - Metropolitan Area Network

WAN - Wide Area Network

Internet

IP - Internet Protocol

e-mail - Electronic mail

FTP - File Transfer Protocol

WWW - World Wide Web

Internetul trebuie vazut ca o colectie de informatii organizate in documente web, legate intre ele si stocate in calculatoare specializate ce poarta denumirea de servere WEB. O grupare de doc. WEB ce au aceeasi tematica formeaza un site. Site-urile WEB sunt adapostite de servere WEB, fiecare avand o adresa proprie.

Web-ul functioneaza pe tehnologia client-server.

Un calc. ce s.n. 'client' formeaza o cerere care este trimisa unui server, parcurge un mediu pana la server; serverul analizeaza cererea, o executa, formeaza raspunsul si il transmite inapoi catre client iar clientul receptioneaza raspunsul.

Pt. a comunica, calculatoarele din cadrul serv. WEB, folosesc acelasi set de reguli reunite sub numele de protocol HTTP (HyperText Transfer Protocol).

Hypertext = text imbogatit care pe langa textul propriu-zis contine etichete pt.formatarea textului si permite incapsularea altor tipuri de informatii (imagini, sunete, animatii, etc.).

Caracteristic Hypertextului sunt salturile rapide catre alte resurse, salturi care in mod curent sunt numite 'link-uri' sau legaturi.

Hypertextul este stocat in fisiere cu extensia .html sau .htm.

HTML = limbajul de programare al hypertextului.

(HyperText Mark-up Language)

HTML nu este un limbaj de programare, el constand intr-o serie de elemente folosite pt. formatarea unui doc. WEB. Permite inserarea de text, imagini, sunete, link-uri catre alte pagini dar si introducerea de aplicatii realizate in diverse limbaje de programare sau scriptare (Java Script, Java, VBasic Script, etc.).

Un fisier HTML este localizat in mod unic pe baza adresei sale. O adresa WEB apare sub denumirea de URL (Uniform Resource Locator) si este format din numele serviciului cu care va fi transferat acel fisier din adresa internet unde se afla calculatorul si numele fisierului care contine documentul propriu-zis.

Browser-ul WEB este un program ce permite navigarea pe internet. El este capabil sa afiseze continutul doc. WEB aflate la anumite adrese.

HTML este un limbaj independent de sistemul de operare, dezvoltat plecand de la SGML (Standard General Mark-up Language).

- Editarea fisierului HTML se poate realiza cu un editor de texte obisnuit gen Notepad sau cu un editor HTML specializat (FrontPage, HotSite, Macromedia Dreamweaver).

- Salvarea paginii WEB pe un server sau UpLoad-area fisierului html.

- Rezolvarea referintelor continute de document.

Limbajul HTML contine o serie de instructiuni de marcaje (tag-uri) ce nu sunt afisate de browser-ul WEB ci indica acestuia cum sa formateze informatia.

Marcajele sunt introduse de parantezele unghiulare "<" si ">".

Formatul general al unui tag este:

<nume_tag atribut1=valoare atribut2=valoare . . . . . . . .>

Ex: <font size=4 color=red>

De obicei, efectul unui tag este anulat de forma: </nume_tag>

Elementele Standard ale unui document HTML:

<html>

<head>

<title> Titlu

</title>

</head>

<body>

PRIMA PAGINA

</body>

</html>

Elementul "html" trebuie sa apara la inceputul documentului si informeaza browser-ul ca are de afisat un document in format HTML. La sfarsitul documentului trebuie sa apara forma de inchidere.

- head - apare la inceputul documentului html si eticheteza antetul sau partea introductiva.

- body - specifica corpul principal al documentului si include toate tag-urile ce descriu

documentul.

- title - introduce titlul documentului, care apare in bara de titlu a browser-ului (max 64 car.)

Comentariile pot fi introduse folosind constructia: <!-- . . . . . . . . . - ->

Marcajul break:

<br> realizeaza trecerea la o linie noua a textului.

Culori utilizate in HTML:

- o culoare poate fi data prin numele sau ori poate fi specificata prin constructia:

rrggbb -> r = red

g = green

b = blue

- se poate da o culoare in cifre hexa: #ff0000 = rosu

#00ff00 = verde

Fundalul unei pagini poate fi stabilit cu ajutorul atributului: <body bgcolor=culoare>

Culoarea textului:

Stiluri pentru blocuri de text:

<b></b> = Text Bold

<i></i> = Text Italic

<u></u> = Text Subliniat

<s></s> sau <strike></strike> = Text Taiat

<sup></sup> = Scriere la exponent (SuperScript)

<sub></sub> = Scriere indice (SubScript)

Scrierea cu caractere marite:

- pt. a scrie un text cu caractere mai mari cu o unitate decat cele curente, se foloseste marcajul

<big></big>.

- caractere micsorate cu o unitate:

- evidentiere blocuri text:

- scriere cu caractere monospatiate:

Stabilirea marginilor unei pagini WEB:

- pozitionarea continutului fata de marginile ferestrei se face cu atribute ale etichetei <body>:

- <body leftmargin="50" topmargin="50">

se poate da o valoare (nr. pozitiv intreg) reprezentand distanta in pixeli sau un procent din latimea respectiv inaltimea paginii.

OBS: toate valorile pt. atributele HTML se introduc cu ajutorul ghilimelelor.

atribut="valoarea"

Introducerea de spatiu: &nbsp.

Caracterizarea fonturilor:

Un font este caracterizat de o culoare, un stil, o marime si o grosime. Toate se stabilesc prin atribute ale elementului "font".

Pt. a scrie un fragment de text cu o anumita culoare se foloseste atributul "color" al marcajului "font".

Ex: <font color=red>

</font>

Familia fonturilor:

Textele pot fi scrise cu fonturi diferite ce pot fi grupate in 5 categorii generice:

1. Serif

2. Sans Serif

3. Coursive

4. Monospace

5. Fantasy

In plus, pot fi utilizate si alte fonturi specifice daca acestea sunt disponibile pe calculatorul client.

In general, se precizeaza o lista de fonturi despartita prin virgula in eventualitatea in care un font nu ar exista pe calculatorul client.

Marimea fontului:

Se stabileste folosind atributul "size". Valorile pot fi de la 1 la 7, dar se pot da si valori cum ar fi +1 sau -1 pentru a mari sau micsora marimea curenta a fontului.

Elementul "center" afiseaza centrat toate elementele cuprinse in interiorul sau.

Introducerea de linii orizontale:

<hr> (accepta mai multe atribute)

<hr align=left

center

right> = alinierea liniei;

<hr width="valoare"> = lungimea liniei in pixeli

<hr size="valoare"> = grosimea liniei in pixeli

<hr color="valoare"> = culoarea liniei

Indentarea unui bloc de text:

Pt ca un bloc de text sa fi indentat (marginea din stanga sa fie deplasata la o anumita distanta), acesta trebuie inclus in interiorul etichetelor <blockquote></bockquote>/

De cele mai multe ori, browser-ul lasa un spatiu suplimentar inainte si dupa o asemenea eticheta.

Blocurile <div> reprezinta modalitatea cea mai eficienta pt. delimitare si alinierea unui bloc de text. Alinierea unui bloc "<div>" se face cu atributul "align", atribut care accepta valorile: left, center, right.

Blocurile paragraf:

Realizeaza trecerea la o linie noua si, in plus fata de <br>, permite inserarea unui spatiu suplimentar inaintea blocului, alinierea textului si inserarea unui spatiu suplimentar dupa blocul respectiv.

Un bloc paragraf se introduce cu eticheta <p>.

Are forma de inchidere doar daca se doreste inserarea unui spariu dupa bloc sau atunci cand se foloseste impreuna cu atributul "align".

Blocuri de titlu

Se pot introduce folosind marcajele:

<h1>; <h2>; . . . .. <h6>.

Toate aceste etichete se refera la blocuri de text si trebuiesc insotite de o eticheta de inchidere similara. Toate accepta atributul "align".

<h1> = Titlul cu caracterele cele mai mici

<h6> Titlul cu caracterele cele mai mari.

Inainte de a afisa un titlu, browser-ul introduce un spatiu.

Pentru pastrarea caracteristicilor textului asa cum a fost introdus in codul sursa (pt. interpretarea corecta a spatiilor, tab-urilor, enter-urilor . ) se foloseste marcajul <pre</pre>. Acesta introduce un bloc de text preformatat.

Intr-un fisier HTML caracterele "<" si ">" incadreaza marcajele si atributele lor. Daca se doreste folosirea lor in interiorul unui document WEB sau afisarea unor marcaje fara a fi interpretate, putem folosi marcajul <xmp></xmp>.

LECTIA 2

Introducerea listelor in HTML.

Listele care pot fi introduse in documentele Web sunt:

- liste neordonate

- liste ordonate

- liste de definitii

Liste Neordonate.

Un bloc de text delimitat de etichetele <ul> si </ul>.

Fiecare element al listei este introdus cu ajutorul etichetei <li>.

Exemplu:

<ul> Componente PC

<li>MotherBoard

<li>CPU

<li>RAM

</ul>

O lista va fi indentata fata de restul paginii si fiecare element va incepe pe un rand nou.

Tagurile <ul> si <li> pot contine elementul "type" pentru stabilirea caracterului afisat in fata fiecarui element al listei. <ul type= . . . . . . . ..>

Valorile posibile pentru "type" sunt: circle, disc, square.

Listele neordonate pot fi scrise pe mai multe niveluri.(adica un fel de lista in lista).

Liste Ordonate.

Un bloc de text delimitat de <ol> si </ol>.

Fiecare element al listei este introdus de eticheta <li>.

In plus, fiecare element e numerotat.

Ex: <ol>

<li>Pascal

<li>C++

<li>Delphi

</ol>

Tagul <ol> accepta atributul "type" care stabileste caracterul folosit pentru ordonare.

Acesta poate lua valoarea: A, a, 1, i, I.

Tagul <ol> accepta si atributul "start" care stabileste valoarea initiala a secventei de ordonare. Valorile acestuia sunt numere intregi.

Ex: <ol type=A start=4>

Tagul <li> accepta atributul "value": Ex.: <li value=5>RAM

Liste de definitie

Sunt formate dintr-o succesiune de termeni, fiecare termen fiind urmat de definitia sa.

Intreaga lista de definitii se incadreaza in etichetele <dl> si </dl>.

Un termen al listei se introduce cu <dt> iar definitia se introduce cu <dd>, apare pe linie noua si este indentata.

Utilizarea tabelelor.

Tabelele permit crearea de retele dreptunghiulare de domenii. Fiecare domeniu poate avea propriile optiuni pentru crearea culorii de fond, a textului, a culorii textului.

Pentru a insera un tabel se folosesc etichetele <table> si </table>. Celulele unui tabel sunt structurate pe linii, care se introduc cu <tr>, iar liniile in celule, care se introduc cu <td>.

Crearea chenarelor

In mod prestabilit, un tabel nu are chenare. Acesta poate fi introdus cu eticheta "border" a tag-ului <table>.

Valoarea atributului e un nr. intreg ce specifica grosimea in pixeli a chenarelor.

Daca "border" nu e urmat de o valoare, automat grosimea e 1.

Daca "border" este 0 atunci chenarul nu exista.

Chenarul are aspect 3D.

Stabilirea culorii de fundal intr-un tabel se realizeaza cu atributul "bgcolor".

<table bgcolor . . ..

Acest atribut poate fi atasat elementelor:<table>,<tr>,<td>.

Alinierea tabelului intr-o pagina Web.

Se face cu atributul "align" al etichetei <table>.

Alinierea tabelului este importanta pentru restul textului care inconjoara tabelul.

Daca tabelul e aliniat la stg. Textul care urmeaza dupa punctul de inserare al tabelului va fi dispus in partea dreapta.

Daca tabelul este aliniat la dreapta, textul este la stanga.

Daca tabelul este centrat, textul dispus dupa pct. De inserare al tabelului apare pe toata latimea paginii imediat dupa tabel.

Culoarea textului dintr-o celula poate fi modificata astfel:

<td><font color= . . . >

"Text"

</font>

Dimensionarea celulelor unui tabel.

Distanta dintre 2 celule vecine se stabileste cu atributul "cellspacing" al tag-ului <table>.

<table cellspacing="nr. poz."> .

Valoarea prestabilita este 2.

Distanta dintre marginile unei celule si continutul sau se stabileste cu atributul "cellpadding" al tag-ului <table>. Valoarea prestabilita este 1.

Dimensionarea unui tabel.

Latimea si inaltimea unui tabel pot fi specificate prin "width" si "height" ale etichetei <table>. Valoarea acestor atribute poate fi un numar intreg sau procente din pagina.

OBS: Daca dimensiunile precizate sunt mai mici decat cele necesare afisarii tabelului, atunci acestea vor fi ajustate corespunzator.

Celulele vide ale unui tabel.

Daca un tabel are celule vide de date, acestea vor aparea fara un canal de delimitare.

Pentru a afisa chenarul se poate folosi <td>&nbsp sau <td><br>.

Alinierea pe orizontala a continutului unei celule se face cu ajutorul atributului "align" care poate lua valorile: left, right, center. Valoarea prestabilita este center.

Alinierea pe verticala se face cu atributul "valign", valorile posibile fiind: top, middle, bottom. Valoarea prestabilita este middle.

<td align= . .

Valign= . . . >

Titlul unui tabel.

Unui tabel i se poate asocia un titlu cu ajutorul etichetei <caption>.

Aceasta trebuie plasata in int. etichetei <table> dar nu in interiorul etichetelor <tr> sau <td>.

Titlul poate fi aliniat cu ajutorul atributului "align" al etichetei <caption>.

Valorile posibile sunt: bottom, top, right, left.

Un tabel poate avea celule cu semnificatia de cap de tabel; acestea se pot introduce cu eticheta <th> in locul etichetei <td>.

Continutul etichetei <th> este scris cu caractere bold si centrat.

Dimensionarea exacta a celulelor unui tabel se poate face cu ajutorul "width" si "height", atribute atasate etichetei <td>.

Daca dimensiunea precizata este mai mica, tabelul va fi ajustat.

Valorile acestor atribute pot fi numere intregi exprimate in pixeli sau procente.

Daca tabelul e privit ca o retea dreptunghiulara de celule, cu ajutorul atributelor "colspan" si "rowspan", o celula se poate extinde peste celulele vecine.

Sunt posibile extinderi si pe orizontala si pe verticala.

O celula extinsa e introdusa printr-o singura eticheta <td>.

Interactivitatea paginilor Web si crearea legaturilor.

Link-urile sunt zone active care transforma un text obisnuit in hypertext, ele permitand trecerea rapida de la un text la altul sau de la un document la altul.

Legaturile sunt sensibile la apasarea mouse-ului.

Link-urile se introduc cu eticheta <a> si cu atributul "href".

<a href=URL></a>, aceasta ia valoarea URL-ului solicitat.

Sintaxa completa este;

<a href=URL>

Text de legatura

</a>

unde URL= adresa Web.

Pentru a urca in directoare se foloseste notatia: "../../".

O legatura catre un site particular.

Se face cu urmatoarea notatie: <a href=https://www.microsoft.com>

Utilizarea postei electronice.

Intr-un document pot fi adaugate legaturi catre aplicatia de expediere a mesajelor electronice astfel:

<a href=mailto:eu@usa.net>

Pentru conectarea la un server specializat de transfer de fisierese utilizeaza urmatorul marcaj:

<a href=ftp://adresa>

Legaturi catre fisiere oarecare.

O pagina Web poate avea legaturi catre fisiere de tipuri diferite decat HTML. Pentru aceasta se foloseste eticheta <a> cu URL-ul fisierului respectiv.

Cand se va da click pe legatura aceea, browserul va afisa o caseta de dialog care va permite salvarea fisierului pe HDD sau vizualizarea sa.

LECTIA 3

Exercitiu:

www.microsoft.com

Site-ul Microsoft Corporation.

www.rol.ro

Site-ul Romania On-line.

www.chip.ro

Site-ul revistei Chip.

Rezolvare:

<dl><a href=https://www.microsoft.com>www.microsoft.com</a>

<dd>Site-ul Microsoft Corporation.

Legaturi in interiorul aceluiasi document.

Intr-o pagina Web foarte lunga, pot exista puncte de reper catre care se definesc legaturi. Punctele de reper se definesc prin eticheta <a> si pentru identificare se foloseste atributul "name".

</a>

Pentru a insera o legatura la un anumit punct de reper, se foloseste eticheta <a> cu atributul "href" a carui forma este: <a href=#legatura1>Du-te la legatura1 </a>.

(de facut o agenda)

Legaturi la sectiuni aflate in alte documente.

</a>

</a>

1.html 2.html

Deschiderea unor documente Web in ferestre noi de browser.

Daca dorim ca o pagina sa fie incarcata in alta fereastra decat cea curenta, trebuie lansata in executie o noua instanta a unui browser. Pentru aceasta se foloseste atributul "target" al etichetei </a>.

Acesta primeste ca valoare un nume, atribuit ferestrei in care se va incarca noul fisier.

Daca mai multe legaturi folosesc aceeasi valoare pentru atributul "target", atunci paginile referite de acesta se vor incarca in aceeasi fereastra.

Atributul "target" accepta valoarea "_blank" ce deschide o fereastra noua anonima.

Link in fereastra 1.

Link in fereastra 2.

Link in fereastra 1.

Alegerea culorii pentru legaturi.

In mod prestabilit, se utilizeaza 3 culori pentru legaturi.

Legaturi nevizitate - "link"

Legaturi vizitate - "vlink"

Legaturi active - "alink"

Aceste atribute apartin etichetei <body>.

Introducerea sunetelor in paginile Web.

Sunetele pot fi stocate in fisiere de diverse formate. In paginile Web, se folosesc fisiere de sunet cu extensiile: *.au; *.wav; *.mid. Putem stabili un sunet de fond pentru o pagina Web folosind tag-ul <bgsound> care accepta atributul "src=fisier sunet". In plus, poate fi folosit atributul "loop=repetari" (numar). Valoarea -1 a atributului determiona repetari infinite ale fisierului de sunet.

Introducerea imaginilor in cadrul unei pagini Web.

Cele mai folosite formate de imagini sunt formatele *.gif; *.jpg si *.jpeg.

(formatul *.gif accepta doar 256 culori).

O imagine poate fi introdusa cu atributul <img src="fisier imagine">.

Adresarea relativa se foloseste pentru accesarea unor imagini aflate intr-o structura de directoare.

Ex: <img src="nume director"/"nume fisier imagine"

<img src=../"fisier imagine"

Chenarul unei imagini.

Putem adauga un chenar unei imagini folosind atributul "border" al etichetei <img>. Valorile acestuia sunt numere intregi pozitive.

Dimensionarea unei imagini.

O imagine are anumite dimensiuni pe orizontala si pe verticala stabilite in momentul crearii ei. Daca nu se cere altfel, acestea sunt respectate in momentul afisarii paginii. Putem specifica alte valori decat cele prestabilite folosind atributele "width" si "height" ale etichetei <img>. Valorile acestora pot fi numere intregi pozitive sau procente din dimensiunea ferestrei.

Alinierea unei imagini in pagina Web.

Se poate face prin intermediul atributului "align" al etichetei <img>.

Valorile posibile sunt: left, right, top (partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea), middle, bottom.

Precizarea dimensiunii spatiului ocupat de o imagine duce la cresterea vitezei de incarcare a paginii. In acest fel, browserul rezerva spatiul in pagina si continua afisarea celorlalte elemente. In paralel are loc si incarcarea imaginii.

Elemente inlocuitoare pentru imagini.

Atributul "alt" admite ca valoare un text care va fi afisat atunci cand imaginea nu poate fi incarcata sau daca incarcarea s-a terminat cu succes, atunci cand pozitionez mouse-ul pe imagine.

Pentru a stabili ca fundal al paginii o imagine se foloseste atributul "background" al elementului <body>. Acesta primeste ca valoare adresa URL a imaginii. Imaginea va fi multiplicata pe orizontala si pe verticala pana va umple intreg ecranul. Atunci cand se utilizeaza bara de scroll, imaginea de fundal si textul se deplaseaza impreuna. Pentru ca fondul sa ramana fix, se poate folosi atributul "bgproperties" al elementului <body> setat pe valoarea "fixed".

Imagini folosite ca legaturi.

O imagine poate fi folosita pe post de zona activa daca este introdusa in interiorul marcajelor <a> si </a>.

In mod prestabilit, imaginea folosita ca legatura va fi inconjurata de un chenar. Pentru ca acest chenar sa nu existe, se seteaza atributul "border" pe valoarea 0.

Imagini in fisiere externe.

Deoarece necesita un timp mare de incarcare, deseori este preferata inserarea unei legaturi catre imagini lasand utilizatorului posibilitatea de a le incarca.De cele mai multe ori se afiseaza imagini la dimensiuni mici si se seteaza ca zona activa, ca legatura spre aceeasi imagine ce va fi afisata la dimensiuni reale.

Tabele de imagini.

In general, pentru a aranja imaginile in cadrul unui document Web, acesta se construieste pa baza unor tabele, in fiecare celula putand aparea elementul <img>.

Documentarea unei pagini Web.

Meta - informatiile sun informatii despre modul de organizare al paginii.

Meta - informatiile nu sunt vizibile in cadrul paginii, ele fiind utilizate de serverele Web specializate, servere de genul motoarelor de cautare.

Meta - informatiile se introduc in cadrul sectiunii <head> cu ajutorul elementului <meta>.

Acest element are 4 atribute: name, http-equiv, content si scheme.

Descrierea unei pagini o putem realiza cu ajutorul atributului "name" setat pe valoarea "description" si atributul "content=text ce descrie pagina".

Cuvintele cheie sunt utilizate pentru a regasi prin intermediul motoarelor de cautare pagina respectiva.

Pentru a preciza cuvintele cheie, atributul "name" primeste valoarea "keywords" iar atributul "content" va primi ca valoare cuvintele cheie despartite prin virgula.

Autorul unei pagini Web poate fi inregistrat setand atributul "name" pe valoarea "autor" iar la "content" numele autorului.

Informatiile de copyright se pot introduce setand "name" pe valoarea "copyright" si "content" va primi ca valoare informatiile propriu-zise.

Reactualizarea automata a paginii.

Se poate realiza folosind atributul "http-equiv" cu valoarea "refresh" iar atributului "content" i se atribuie un numar de secunde.

Schimbarea automata a paginii.

Folosind "http-equiv" cu valoarea "refresh", putem determina incarcarea automata a unei alte pagini daca atributul "content" va primi o valoare de genul: "3; url='x.html'" unde 3 reprezinta numarul de secunde dupa care se incarca pagina precizata.

LECTIA 4

Harti de imagini.

Pentru o imagine pot fi definite zone active. Acestea vor functiona ca legaturi catre alte documente Web.

Crearea unei harti de imagini presupune 2 etape:

- se defineste o imagine ca fiind harta de imagini. Pentru asta, se foloseste eticheta <img> insotita de 2 atribute: "src" si "usemap" a carui valoare este de forma #"nume harta" unde "nume harta" este cel definit in a 2-a etapa.

O harta de imagini poate fi definita si intr-un fisier extern si atunci atributul primeste valoarea: "numefisier.html#numeharta".

- a 2-a etapa presupune definirea hartii. Aceasta are loc intr-un bloc delimitat de etichetele <map>. Un atribut obligatoriu pentru <map> este "name='numeharta'".

O harta e formata din mai multe zone, fiecare zona fiind introdusa cu ajutorul etichetei <area>. Aceasta are 3 atribute obligatorii: shape (determina tipul de zona activa si poate lua una din valorile: rect(dreptunghi), circle(cerc) sau poly(poligon)); coords(specifica coordonatele zonei); href(specifica URL-ul activat de zona respectiva.

Coordonatele zonelor active.

Un dreptunghi este determinat de coordonatele (x1, y1) ale punctului din stanga sus si (x2, y2) ale punctului din dreapta jos. Atributul coords va primi ca valoare o expresie de forma: coords="x1, y1, x2, y2".

Un cerc este determinat de coordonatele x, y ale centrului cercului si de raza r. Atributul coords va primi o valoare de forma: coords="x, y, r".

Un poligon este determinat prin succesiunea de coordonate ale varfurilor: coords="x1, y1, x2, y2, x3, y3, etc.".

<body>

</map>

</body>

Atributul "alt" al etichetei <area> permite inserarea unei scurte descrieri a legaturii. Atributul "title" este un atribut universal si poate fi folosit si in cazul elementului <area>.

Pozitionand mouse-ul pe o harta definita activa, pe ecran va fi afisat un mic dreptunghi de culoare galbena ce contine valoarea atributului "title". (se foloseste ori "alt" ori "title"; nu amandoua odata).

Definirea cadrelor intr-un fisier Web.

Frame-uri (cadre).

In fereastra unui browser pot fi incarcate la un moment dat mai multe documente Web. Pentru aceasta trebuie sa definim mai multe sub-ferestre (frame-uri). Ele sunt definite in fisier nou care, in locul etichetelor <body> foloseste blocul <frameset> </frameset>.

In interiorul acestui bloc, fiecare cadru este introdus folosind eticheta <frame>. Un atribut obligatoriu pentru <frame> este "src", valoarea acestuia precizand ce fisier se va incarca in cadrul respectiv.

Impartirea unei ferestre in cadre se face din aproape in aproape.

Frame-urile pot fi de tip "coloana" si sunt create cu ajutorul atributului "cols" al elementului <frameset> sau de tip "linie" fiind create cu ajutorul atributului "rows" al elementului <frameset>.

Valorile atributelor "cols" si "rows" sunt liste de elemente despartite prin virgula, fiecare element specificand dimensiunea unui cadru.

Dimensiunile pot fi exprimate in pixeli sau in procente.

</frameset>

</frameset>

</frameset>

</frameset>

Culori pentru chenarele cadrelor.

Pentru a stabili culoarea cadrului se foloseste atributul "bordercolor" al marcajului <frameset>.

Dimensiunea unui chenar al cadrului se poate specifica prin atributul "border" a carui valoare prestabilita este de 5 pixeli. Folosind "border=0" se va obtine un cadru fara chenar.

In mod prestabilit este afisat si are aspect 3D. Folosind atributul "frameborder" se poate dezactiva chenarul unui cadru. Acest atribut accepta valorile "yes" sau "no".

Atributul "scrolling" al etichetei <frame> este folosit pentru a adauga unui cadru o bara de derulare. Valorile posibile sunt: yes, no si auto.

Atributele "marginwidth" si "marginheight" ale elementului <frame> permit stabilirea distantelor dintre continutul unui cadru si marginile sale.

Atributul "noresize", fara nici o valoare suplimentara, daca este prezent, inhiba posibilitatea de redimensionare cu mouse-ul a unui cadru.

Pentru browserele vechi, care nu accepta frame-uri, exista posibilitatea ca in pagina Web sa apara un avertisment. Pentru aceasta se utilizeaza eticheta <noframes> in interiorul etichetei <frameset>.

<body>

</body>

</frameset>

Cadre INLINE.

Un astfel de cadru se insereaza intr-o pagina Web in mod asemanator cu o imagine.

Un cadru INLINE este introdus cu ajutorul etichetei <iframe></iframe>. Atributele acestei etichete sunt in mare parte mostenite de la "frame" sau de la "img".

Accepta atributul SRC, border si in plus, align, width, height.

Elementele ce apar in interiorul marcajului <iframe> sunt afisate cand browserul nu suporta cadre INLINE.

Deschiderea documentelor dintr-un cadru in altul.

Pentru a putea deschide un document Web intr-un cadru anume, acesta trebuie identificat printr-un nume. Astfel, marcajul <frame src=" . ." name=".."> utilizeaza atributul "name" pentru specificarea numelui cadrului. Acest nume va fi utilizat ca valoare a atributului "target" pentru legatura catre fisierul dorit.

Primul cadru: <frame src="url fisier" name=c2>

- - - - - - - - - - - - - - - - - - - - - - - - - - - -

<a href="x.html" target=c2>Legatura 1</a>

Ex:

</frameset>

</frameset>

</html>

Link1 si Link2 se deschid in INLINE.

Poze cu link-uri.

Cadru INLINE

Se realizeaza cu "meta" si a incarca "iframe" in care se deschid la marime naturala pozele

urm. pagina de sus.

LECTIA 5

Fiecare legatura incarca in partea de jos un fisier:

Legatura 1: tabel

Legatura 2: glosar: -frame

- link

- URL

Legatura 3: imagine.

Formulare.

Formularele permit colectarea unei informatii de la utilizator. Acestea pot fi transmise spre un server unde, cu ajutorul unor scripturi specializate pot fi gestionate.

Un formular poate cuprinde mai multe elemente iar pentru introducerea sa se utilizeaza elementul <form></form>.

Elementul <form> accepta 2 atribute: "action" si "method".

"action"=" . . . .." specifica ce se va intampla cu datele formularului odata ce acestea ajung la destinatie. De obicei valoarea lui "action" este o adresa a unui fisier script care va gestiona aceste date.

Valoarea atributului "action" poate fi si o adresa valida de e-mail, caz in care datele vor fi expediate folosind serviciul de posta electronica.

Atributul "method" precizeaza metoda prin care vor fi transmise datele. Valorile ce pot fi folosite sunt "get" si "post".

Cand este folosita valoarea "get", datele din formular sunt adaugate la adresa URL specificata la "action".

Prin metoda "post" datele sunt expediate separat, fiind permise cantitati mai mari de date.

OBS: Formularele nu pot fi imbricate. Adica nu se poate deschide un formular

in altul.

Elementele formularelor.

Introducerea unui camp de text.

<input type="text" name=" . .."

value=" . ."

size=" . ."

maxlength=" . .">

name = specifica numele campului respectiv, nume ce va fi folosit pentru o

identificare ulterioara a datelor.

value = specifica valoarea predefinita a campului.

size = specifica dimensiunea casutei de text, valoarea fiind un nr. de

caractere.

maxlength = defineste dimensiunea maxima a sirului de caractere ce poate fi

introdus. Caracterele tastate peste dimensiunea maxima sunt

ignorate.

Datele introduse intr-un formular pot fi expediate cu ajutorul unui buton de "submit". Un astfel de buton se introduce cu constructia:

La un moment dat, datele introduse de utilizator pot fi sterse daca se utilizeaza un buton de "reset", astfel:

Apasarea acestui buton face ca toate elementele din formular sa primeasca valorile prestabilite.

Campul Password.

Un element de tip parola este asemanator cu elementul de tip text avand aceleasi atribute, cu deosebirea ca datele introduse aici sunt afisate explicit, in locul lor aparand asterix (*).

<input type="password" value=" . ."

Name=" . ."

Size=" . ."

Maxlength=" . .">

Trimiterea unui formular prin e-mail.

<form action=mailto:eu@xnet.ro>

</form>

OBS: Elementele unui formular pot fi aranjate foarte usor cu ajutorul tabelelor.

Introducerea butoanelor radio.

Permit selectarea unei singure optiuni la un moment dat.

Sunt create in cadrul unor familii de butoane radio.

<input type="radio" name=" . ."

Value=" . ."

Checked>

Casete de validare.

Sunt elemente ce permit selectarea mai multor optiuni. Pentru introducerea unui astfel de element se foloseste:

<input type="checkbox" name=" . ."

Value=" . ."

Checked>

Nume:

Casete de fisiere.

Atunci cand suntem nevoiti sa lucram cu nume de fisiere se poate folosi urmatoarea resursa:

<input type="file" name=" . ."

Value=" . .">

In interiorul documentului va fi automat inserat un camp de text si un buton "browse". Acesta deschide o fereastra de dialog ce va permite selectaea unui fisier din structura de fisiere si directoare.

Liste de selectie (ascunse).

O lista de selectie permite utilizatorului sa aleaga un element dintr-o lista finita. O astfel de lista se introduce cu ajutorul etichetelor corespondente:

<select name=" . ." Size=" . .">

</select>

Valoarea atributului "size" este un numar pozitiv care precizeaza cate elemente ale listei sunt vizibile la un moment dat. Valoarea prestabilita este 1.

Elementele unei liste se introduc cu elementul "option" care poate primi atributele "name" si "selected".

Atributul "selected" permite selectarea prestabilita a unui element al listei. Se foloseste fara alte valori.

Campul de editare multilinie.

Un astfel de camp este un camp care permite introducerea unor texte intr-o regiune mai mare. Un astfel de camp se introduce cu elementul:

<textarea name=" . ." Rows=" . ." Cols=" . .">

</textarea>

Atributul "rows" specifica numarul de linii pe care se intinde campul iar "cols", numarul de caractere ce vor fi afisate de o linie.

Textul ce apare pana la forma de inchidere va fi afisat in cadrul campului de text.

Introducerea butoanelor intr-un formular.

Pot fi introduse butoane a caror actiune sa fie definita de programator cu ajutorul unor limbaje de scriptare.

<input type="button" name=" . ." Value=" . .">

Valoarea setata va fi afisata in cadrul butonului.

Cea de-a 2-a modalitate pentru introducerea butoanelor este:

<button></button>.

In interiorul acestora se poate afla un text sau un marcaj pentru introducerea unei imagini.

Stiluri.

Stilurile pun la dispozitie posibilitati de personalizare a paginilor Web.

Permit definirea caracteristicilor unor elemente HTML. Un stil reprezinta o modalitate de scriere a unui bloc de text. Anumite valori pentru fond, marime, culoare, aliniere, distante fata de margini, etc.

Exista 2 posibilitati de definire a unui stil:

1. in sintaxa CSS (Cascading Style Sheet).

2. in sintaxa JavaScript.

Pentru utilizarea unui stil trebuie realizate 2 etape:

1. definirea stilului.

2. specificarea domeniului de validitate a stilului.

Un stil poate fi definit in mai multe moduri:

1. Stiluri dedicate.

Acestea se definesc utilizand eticheta <style> inclusa in cadrul sectiunii <head>.

Intr-un bloc <style> se definesc reguli.

O regula este alcatuita dintr-un selector si descriere.

<style>

selector

Ex: <style>

H1 unde h1 este elementul HTML iar ce este intre acolade este descrierea.

Selectorul defineste domeniul de utilizare al stilului. Descrierea defineste stilul prin constructie, de genul: "atribut:valoare".

Clase de stiluri.

Permit definirea unui stil si folosirea lui acolo unde este nevoie.

Fiecare clasa de stiluri primeste un nume iar pentru utilizarea uneia dintre ele se foloseste notatia:

Class="clasa"

Ex: <p class=rosu> adica elementul <p> va avea caracteristicile definite in clasa "rosu".

<head>

<style>

.rosu

.verde

</style>

</head>

<body>

<p class=rosu>Text

<h2 class=verde>Titlu

<h1 class=rosu>Titlu

</body>

Stiluri indentificate.

Toate elementele HTML accepta atributul ID.

Acest atribut are rolul de a identifica in mod unic un element in cadrul unui document.

<style>

</style>

<body>

<p id=x>Paragraf

</body>

Stiluri definite INLINE.

Putem defini un anumit stil in momentul introducerii unui element HTML in pagina. Pentru aceasta se foloseste atributul "style", valoarea acestuia fiind descrierea stilului, valoare ce apare introdusa in ghilimele:

Stiluri definite in fisiere externe.

Intreg continutul etichetelor "style" poate fi transferat in interiorul unui fisier. Fisierul se salveaza cu extensia ".css". Pentru a utiliza un anumit stil definit intr-un fisier extern, se utilizeaza elementul <link> cu atributele:

Rel="stylesheet" href="x.css" type="text/css".

Atributul "rel" primeste ca valoare "stylesheet", "href" primeste ca valoare adresa URL a fisierului de stiluri iar "type" se seteaza cu valoarea "text/css".

Pseudo-clase.

Se definesc pentru personalizarea legaturilor. Ele apar in blocul <style> sau intr-un fisier extern conform sintaxei:

a: link

b: active

c: visited

Pseudo-clasele definite astfel sunt aplicabile tuturor legaturilor din cadrul documentului. Le putem diferentia folosind clase in constructia:

a: link.class1 iar in momentul utilizarii vom folosi atributul class:

<a class=class1 href= . . . . >.

Acelasi lucru este valabil pentru folosirea stilurilor indentificate in constructia:

a: link#id1

LECTIA 6

Link 1: formular cu butoane radio cu checkbox si cu casuta de text.

Link 2: O casuta de selectare si butoane cu imagini.

Pentru browserele vechi se foloseste:

<style>

<!-

.as

-->

</style>

Configurarea fonturilor cu ajutorul stilurilor.

Pentru definirea marimii fonturilor:

U.M.

Font-size: Xu.m. unde u.m. reprezinta unitatea de masura.

Valori absolute pentru marimea fonturilor:

xx-small

x-small

small

medium

large

x-large

xx-large

Stabilirea tipului fontului.

Se face cu "font-family:" . . . .."

Pe fiecare calculator exista 5 familii: Sans, SansSerif, Monospace, Coursive, Fantasy.

Pentru introducerea unor siluri pentru blocuri de text se foloseste, in modul cel mai uzual, eticheta:

<div class= . . .></div> sau <div id= . . .></div>.

Eticheta nu afecteaza pozitionarea blocului de text in pagina.

Stilul unui font se poate defini folosind eticheta "font-style":normal sau italic.

Grosimea fontului se poate stabili cu ajutorul atributului "font-weight":bold, bolder, lighter, normal sau valori numerice cuprinse intre 100 si 900 unde 100 corespunde fontului cel mai subtire iar 900 fontului cel mai gros.

Culoarea unui font poate fi schimbata cu ajutorul atributului "color", atribut ce poate primi un nume de culoare sau poate primi un apel al functiei RGB (color:rgb(r,g,b)) .

Culoarea fontului unui text se defineste cu ajutorul atributului "background-color:culoare".

Definim 3 stiluri:

CAPITOL

SUBCAPITOL

TEXT

<style>

.capitol

.subcapitol

.text

Exemplu de folosire:

Titlu scris in stilul "capitol".

</div>

Stabilirea unei imagini ca fundal pentru text.

Se foloseste atributul "background-image" care primeste ca valoare un apel al functiei URL. Aceasta functie are ca argument adresa URL a imaginii folosite.

Background-image:URL("numefisierimagine")

Atributul "background-repeat" precizeaza modul de repetitie al imaginii de fundal. Daca valoarea acestuia este "repeat" atunci imaginea va fi repetata si pe orizontala si pe verticala. Pentru "norepeat", imaginea va fi afisata o singura data. Pentru "repeat-x" sau "repeat-y", imaginea va fi repetata pe axa "X" sau pe axa "Y".

Background-repeat:norepeat

Repeat-x

Repeat-y

Repeat

Atributul "background-attachement" precizeaza comportarea imaginii fata de text. Valorile posibile pot fi "scroll" sau "fixed". Pentru valoarea "scroll" imaginea se va misca impreuna cu textul iar pentru valoarea "fixed" imaginea va fi fixa iar textul se va misca.

Alinierea textului.

"text-align"

Valori posibile: left, right, center, justify.

Indentarea unui text.

Se poate face folosind atributul "text-indent" care poate primi ca valoare un numar sau procente din latimea paginii.

Aspectul unui text.

Poate fi stabilit cu ajutorul atributului "text-decoration" ce poate primi ca valori: underline, line-through, overline.

Transformarea unui text.

Pagina cu stiluri se apeleaza astfel:

href="x.css"

type="text/css">

"x.css"

Pagina de definire a stilurilor

Consta in afisarea textului respectiv cu caractere de diverse marimi si se pot stabili cu atributul "text-transform" unde valorile posibile sunt: capitalize, lowercase, uppercase, none.

Configurarea blocurilor de text cu ajutorul stilurilor.

Un bloc de text este format din continut, distanta de la continut la chenar, dimensiunile chenarului si margini.

Marginile unui bloc.

Sunt date de distantele dintre chenarele a 2 blocuri vecine.

Putem stabili marginile cu urmatoarele atribute: "margin-left", "margin-right", "margin-top", "margin-bottom".

Putem folosi atributul "margin" simplu, el putand primi 1, 2 sau mai multe valori separate prin spatiu, reprezentand dimensiunile marginilor in ordinea: sus, dreapta, jos, stanga.

Valorile posibile ale acestor atribute sunt numere intregi urmate de o unitate de masura sau procente din latimea sau inaltimea paginii.

Distanta dintre continut si chenar.

Se poate stabili cu ajutorul atributului "padding" care poate lua valorile: "padding-left", "padding-right", "padding-top", "padding-bottom" sau simplu "padding".

Latimea chenarelor.

Poate fi definita cu atributele "border-top-width", "border-left-width", "border-right-width", "border-bottom-width" sau simplu "border-width".

Valorile posibile sunt numere intregi urmate de o unitate de masura.

Stilul chenarelor.

Poate fi definit cu atributul "border-style" ce poate avea valorile: "none", "dotted", "solid", "dashed", "double", "inset", "outset", "groove" si "ridge".

Culoarea chenarelor.

Se poate stabili folosind "border-color" (culoare in hexa sau RGB).

Dimensiunile continutului blocului.

Se stabilesc cu atributele "width" si "height", valorile prestabilite fiind "auto". Se pot exprima in numere intregi urmate de o unitate de masura sau procente.

Daca inaltimea blocului este prea mica, aceasta va fi ajustata corespunzator.

Atunci cand se introduce o imagine, pentru a-I pastra aspectul, cel putin una din dimensiuni trebuie sa aibe valoarea "auto".

Alinierea blocului.

In cadrul unei pagini, alinierea blocului se poate face cu atributul "float". Valorile posibile sunt: "left", "right", "none".

Definirea straturilor.

Un strat este un bloc de elemente HTML.

Intr-o pagina Web se pot defini oricat de multe straturi se doreste, acestea fiind amplasate cu exactitate in pagina. Pot fi transparente sau opace, se pot suprapune, fiecare poate avea o dimensiune exacta.

Straturile se definesc in interiorul marcajului <style>.

Pozitia unui strat.

Se stabileste cu atributul "position" care poate avea valorile: "absolute"sau "relative".

O pozitionare "absoluta" plaseaza stratul in functie de coltul din stanga sus al ferestrei vazut ca punctul de coordonate (0,0).

Pozitia stratului este determinata de atributele: "top" si "left". Valorile acestora putand fii numere intregi urmate de o unitate de masura sau procente.

Atributul "top" stabileste distanta dintre marginea superioara si bloc iar "left" stabileste distanta dintre marginea stanga si bloc.

Dimensiunile unui strat.

Se stabilesc cu atributele "width" si "height", valorile lor fiind numere intregi sau procente din pagina.

<style>

#strat1

</style>

<h1>Titlu in stratul 1</h1>

</div>

Obtinerea efectului de umbra.

Se face utilizand 2 straturi. Unul cu scris normal iar al doilea cu scris putin mai deschis si deplasat in orice directie cu cateva unitati de masura.

Animarea unui text.

Se poate face cu elementul <marquee></marquee>.

Poate avea atributele: "direction=left, right, up, down"; "behavior=slide, alternate, scroll"; "width=lungime"; "height=inaltime"; "bgcolor=culoare de fond"; "scrolldelay=nr. de ms. Intre aparitii"; "scrollamount=nr. de pixeli intre 2 aparitii succesive".