Documente Academic
Documente Profesional
Documente Cultură
CUPRINS:
Un document pe Web este mult mai usor de schimbat dect daca ar fi pe hrtie. Si e mult mai
ieftin! Nu aveti nevoie de hrtie, cerneala si alte minuni ale tehnologiei tiparului. Sunteti
responsabil de pagina Web a unei firme care produce rulmenti? Are adresa www.rulmenti.ro?
Seful v-a rugat (...) sa schimbati pagina despre produsul MegaRulment, pentru ca n loc de
varianta cu zece bile, acum se produce cu unsprezece bile? (poate spera sa va strice sfrsitul
de saptamna). Nici o problema! Trebuie doar sa schimbati o singura cifra ntr-un fisier pe
serverul firmei cinci minute si oricine va viziteaza pagina va citi informatiile corecte
despre MegaRulment. Mii de pagini Web se nasc si mor n fiecare minut, sa nu mai
vorbim de cele care numai se modifica. Aceasta caracteristica dinamica a Web-ului face ca
informatiile sa fie proaspete, n consecinta valoroase.
Fisierul HTML trebuie sa aiba extensia .htm sau .html. Din moment ce este un fisier text, se
poate edita cu orice editor de text, de exemplu Notepad din Windows.
Exemplu
Exercitiu: porniti Notepad. Scrieti urmatorul text:
<html>
<head>
<title>Pagina mea</title>
</head>
<body>
Aceasta este pagina mea
</body>
</html>
Salvati fisierul cu numele pagina.htm. Porniti browserul de Web. n meniul File, dati
Open sau Open Page. n fereastra de dialog care apare, selectati Browse sau
Choose File. Gasiti fisierul dvs., pagina.htm, selectati-o si dati Open. Ar trebui sa
vedeti o adresa cu fisierul dvs. n fereastra de dialog, de exemplu C:\Temp\pagina.htm.
Dati OK, si browserul ar trebui sa afiseze pagina pe care ati creat-o.
Salvati acelasi fisier, dar cu numele pagina (fara extensie). ncercati sa-l ncarcati si sa-l
vizualizati din nou.
Limbajul HTML se bazeaza pe tag-uri. Acestea sunt comenzile, sau instructiunile pe care un
browser le interpreteaza, ca sa poata afisa corect pagina. Exemplu de tag: <body> (fara
ghilimele, desigur). Semnul < (mai mic) si > se numesc paranteze unghiulare.
Majoritatea tagurilor se folosesc in perechi; fiecare pereche are un tag de deschidere, (sau de
nceput), si unul de nchidere (de sfrsit). Tag-urile si textul dintre doua taguri se numeste
element HTML, iar textul dintre tag-ul de nceput si cel de sfrsit formeaza continutul
elementului. Exemplul de mai sus (<body>) este tag-ul de deschidere pentru elementul
body; observati tag-ul de nchidere pentru acest element, </body>. Tag-urile de nchidere
au caracterul / n plus fata de cele de deschidere. Scopul celor doua taguri <body> si
</body> este sa specifice browserului ca elementul dintre ele este corpul paginii.
Tag-urile se pot scrie cu litere mici sau mari, adica <head> e la fel de valabil ca
<HEAD>. Totusi, ncercati sa folositi tag-uri cu litere mici, deoarece W3C recomanda
folosirea literelor mici pentru tag-uri. Mai mult, generatia urmatoare de standard HTML,
standardul XHTML cere tag-uri cu litere mici.
Exercitiu: gasiti alte elemente HTML n fisierul pagina.htm de mai sus.
Analiza exemplului
Orice fisier HTML ncepe cu tag-ul <html> si se termina cu </html>, adica nsasi pagina
este un element HTML, de tip html.
Un fisier (sau pagina) HTML are doua parti: antetul (elementul head) si corpul (elementul
body) paginii.
Antetul paginii
Ceea ce apare n partea de antet (head) nu este afisat de catre browser n pagina, ci da doar
informatii despre pagina respectiva. Observati n pagina-exemplu elementul title. Textul
continut ntre cele doua tag-uri <title> si </title> va apare ca titlul ferestrei browserului,
adica titlul paginii respective. Din acest motiv, nu este bine ca titlul unei pagini sa fie lung,
pentru ca browserul afiseaza n antetul ferestrei o singura linie de text; daca linia este prea
lunga, se afiseaza doar ce ncape, de la nceputul titlului. Un alt motiv logic pentru titluri
scurte este ca nimeni nu se oboseste sa citeasca un titlu lung si complicat, mai bine se uita la
alta pagina, ceea ce nseamna ca ati pierdut clientul. Fiecare pagina Web are titlu, chiar daca
este o subpagina a sitului respectiv. Folositi titluri scurte si sugestive.
Exercitiu: schimbati titlul paginii create, n Prima Pagina Web Design. Vizualizati.
Observatie: nu este nevoie sa reporniti browserul de fiecare data cnd schimbati pagina,
dar trebuie sa dati Refresh sau Reload; browserul nu stie ca dvs. ati schimbat pagina de
Web, astfel ca nu va actualiza pagina afisata, doar daca i spuneti explicit sa o faca. Apasnd
butonul Refresh sau Reload, l fortati sa interpreteze din nou fisierul HTML modificat.
Corpul paginii
Corpul (body) paginii este cea afisata de browser. n pagina-exemplu din aceasta lucrare,
corpul paginii contine doar text fara formatare (Aceasta este pagina mea).
Exercitiu: adaugati tag-urile <i> si </i> naintea si dupa textul din corpul paginii.
Vizualizati.
n mod normal, se impune sa folositi aceste tag-uri, adica sa separati explicit antetul de
corpul paginii. Se impune si nchiderea tag-urilor (cu tag de nchidere), odata deschise. Totusi,
browserele ncerc sa interpreteze si sa afiseze corect chiar si fisiere HTML corupte sau
incorecte sintactic. Unii se folosesc de asta si scriu numai minimul de cod ct sa fie destul
pentru interpretarea corecta.
Exercitiu: editati din nou fisierul pagina.htm.
Stergeti tag-ul de nchidere </html>. Vizualizati.
Stergeti si tag-ul </body>. Vizualizati. Stergeti si <body>. Vizualizati din nou.
Stergeti si <html> si <head>. Vizualizati. Stergeti </head> si vizualizati din
nou.
Stergeti si <title>. Vizualizati, apoi refaceti <title>, si stergeti </title>.
Vizualizati. Ei, nici chiar asa...browserul nu mai poate decide care este titlul.
Acest lucru este foarte rau! Totdeauna scrieti civilizat si complet un fisier HTML. Este
adevarat ca browserele fac totul ca sa afiseze ca lumea pagina, dar noile standarde HTML
impun folosirea exacta a tag-urilor, chiar pentru a reduce lucrul browserului si pentru a forta
programarea ordonata si fisiere usor mentenabile.
Atributele tag-urilor
Tag-urile pot avea atribute. De exemplu, puteti instrui browserul sa afiseze pagina dvs. pe un
fun dal albastru, specificnd un atribut n tag-ul de nceput al elementului <body>, astfel:
<body bgcolor=blue>, atributul bgcolor fiind prescurtarea de la background color.
Exercitiu: refaceti tag-ul <body>, si modificati-l: <body bgcolor=blue>.
Atributele apar totdeauna n pereche: numeatribut=valoareatribut.
Valoarea unui atribut apare totdeauna ntre ghilimele. De obicei, se folosesc ghilimele duble
(), dar se pot folosi si ghilimele simple (), de exemplu cnd valoarea contine si ghilimele
duble, de exemplu: nume=Ion Ticnitu Orosteaga.
Ca regula generala, orice text evidentiat trebuie sa fie scurt, frazele sa fie scurte (daca nu este
vorba de beletristica, desigur); nu scrieti propozitii care sa contina doar litere mari, pentru ca
sunt obositoare de citit; folositi ct mai putine varietati de fonturi, culori si floricele acestea
pot face un document colorat si viu, dar si greu de parcurs si de nteles. Daca doriti sa
comunicati informatie cititorului, si nu sa-l impresionati cu talentele dvs. de utilizare a
editorului de text, construiti un document folosind putine elemente de stil, dar cu pricepere.
Din pacate, una dintre scopurile oricarui produs (fie si pagina de Web) este ca cel care l
foloseste sa nu observe munca depusa pentru realizarea acestui produs.
Exercitiu: porniti AceHTML sau alt editor de HTML, si creati structura de baza pentru un
fisier HTML (tag-urile pt. html, antetul si corpul paginii). Apoi scrieti urmatorul text n
corpul paginii, si vizualizati n browser:
<h1>Subtitlu de nivel 1</h1><h2>Subtitlu de nivel 2</h2>
<h3>Subtitlu de nivel 3</h3>
<h4>Subtitlu de nivel 4</h4>
<h5> Subtitlu de nivel 5 </h5>
<h6>Subtitlu de nivel 6</h6>
Observati efectele spatiilor multiple din sursa HTML, precum si efectele liniilor vide.
Exercitiu: adaugati n textul de mai sus, dupa tag-ul de nchidere a subtitlului de nivel 3,
textul test. Vizualizati.
Observati ca n HTML, apare automat o linie vida nainte si dupa un subtitlu. Acest
lucru se poate vedea, de fapt, si din prima linie din exemplul de mai sus.
Exercitiu: n exemplul de mai sus, schimbati <h3>Subtitlu de
<h3><h1>Subtitlu de nivel 3</h1></h3>. Observati efectul.
nivel 3</h3> n
Daca unele tag-uri ale unui element sunt n contradictie cu alte taguri ale aceluiasi element,
ultimele (adica perechea cea mai interna) vor fi luate n considerare. Oricum, ultimul
exemplu de mai sus este eronat.
Nu folositi tag-uri de subtitlu pentru a evidentia cuvinte sau expresii n document, altele dect
subtitluri, pentru ca nu acesta le este scopul. Exista alte tag-uri pentru asa ceva. S-ar putea ca
n browserul dvs., pagina sa arate bine, dar alte browsere sa afiseze subtitlurile ntr-un alt
mod, sau chiar sa le numeroteze. Pe de alta parte, unele programe de cautare pe Internet
extrag subtitlurile de pe paginile Web, n scopul generarii unor rapoarte despre continutul
paginii. Daca folositi tag-urile de subtitluri n alte scopuri, aceste rapoarte vor fi eronate.
Tag-urile de subtitluri pot avea atribute, de exemplu <h1 align=left>Textul</h1>.
Exercitiu: modificati exemplul de la nceputul acestei lucrari astfel nct subtitlul de nivel 4
sa apara n dreapta paginii. Vizualizati.
Lasati subtitlul sa apara n dreapta, si configurati-i si atributul title, cu valoarea Un
exemplu de subtitlu de nivel 4. Vizualizati. Duceti mouse-ul deasupra subtitlului de nivel 4,
si lasati-l acolo. Observati efectul acestui atribut.
Paragrafe
O metoda eleganta si conforma standardului pentru scrierea paragrafelor n HTML este
folosirea tag-urilor dedicate. Aceste tag-uri sunt de forma <p>Un paragraf</p>.
Exercitiu: scrieti doua paragrafe (Primul paragraf si Al doilea paragraf) folosind
aceste tag-uri. Vizualizati.
Observati: ca si n cazul subtitlurilor, se adauga automat o linie vida naintea si dupa
paragraf.
Exercitiu: stergeti tag-urile de nchidere a paragrafelor din exemplul de mai sus.
Vizualizati.
Desi este valabila, folosirea tag-ului de deschidere de paragraf fara cel de nchidere este
contraindicata, pentru ca standardele noi de HTML nu vor permite acest lucru. De asemenea,
prin folosirea tag-ului de nchidere a paragrafului, se vede clar unde se termina acesta.
Si paragrafele pot avea atribute, aceleasi ca si subtitlurile.
Exercitiu: formatati paragrafele dvs. sa fie aliniate n centrul paginii.
Nu folositi tag-urile de paragraf pentru inserarea unor linii noi n document, pentru ca unele
browsere le-ar putea interpreta diferit. Folositi pentru acest scop tag-ul de linie noua, descrisa
mai jos.
Linie noua
Ati observat ca degeaba introduceti linii vide n sursa HTML, ele vor apare ca un singur
spatiu. Pentru a intra pe linie noua n HTML, aveti nevoie de un tag special, <br>.
Exercitiu: puneti tag-ul <br> ntre Primul si paragraf din exemplul de mai sus.
Vizualizati.
Comentarii n HTML
Un program bun are 40% comentarii n sursa. Din moment ce si HTML este un limbaj de
programare, este bine sa punem comentarii n codul sursa. Daca sursa HTML este complexa,
comentariile vor fi de nepretuit daca vrem sa schimbam ceva. Acest lucru este adevarat mai
ales n cazul scripturilor.
Comentariile nu sunt afisate de catre browser. Un comentariu arata astfel:
<!-- Trebuie sa elimin bancurile din partea asta de cod -->
Observati ca avem de-a face cu un tag mai special, fara pereche de nchidere; observati si
semnul exclamarii de la nceputul comentariului, si lipsa lui la sfrsit. Perechile de liniute de
la nceput si de la sfrsit fac parte din tag, nu din textul comentariului.
Bara orizontala
O foarte simpla metoda de a separa vizual partile dintr-un document HTML este folosirea
unei bare orizontale. Folositi tag-ul <hr> (de la horizontal rule). Poate avea si atribute, ca
width (latimea pe orizontala), n puncte sau procente, alinierea (align centrat implicit),
size pentru grosime (n puncte implicit este 2) sau noshade.
Exercitiu: inserati dupa primul paragraf din exemplul de sus o bara orizontala de latime
de 50% din pagina, de zece puncte grosime, aliniat la dreapta pe pagina. Vizualizati.
Schimbati marimea ferestrei browserului. Observati latimea orizontala a liniei.
Adaugati si atributul noshade (fara valoare). Vizualizati. Adaugati atributul title cu
valoarea Linie orizontala.
Observatie: atributul title se poate folosi la multe tag-uri.
Tabelul 1 tag-uri de baza
TAG DE NCEPUT
NN
IE
W3C
SCOP
<html>
<body>
<h1> la <h6>
<p>
<br>
<hr>
<!-->
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.0
3.2
3.2
3.2
3.2
3.2
3.2
3.2
Document HTML
Corpul documentului
Subtitluri de la 1 la 6
Paragraf
Linie noua
Bara orizontala
Comentariu n codul sursa
NN Netscape Navigator
IE Internet Explorer
W3C Consortiul WWW
NN
IE
W3C
<!-->
<!doctype>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame>
<frameset>
<h1> la <h6>
<head>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
Comentariu.
3.0
3.0
Tipul documentului.
Ancora.
3.2
3.2
3.0
3.0
Prescurtare.
3.2
4.0
Acronim.
4.0
4.0
4.0
4.0
4.0
3.0
3.0
3.2
Text ngrosat.
3.0
3.0
3.2
3.0
3.0
3.2
5.0
4.0
Adresa.
Depasit. Folositi <object>.
3.0
3.0
3.2
Citat lung.
3.0
3.0
3.2
Corpul paginii.
3.0
3.0
3.2
Linie noua.
3.0
3.0
3.2
4.0
4.0
3.0
3.0
3.2
Citat.
3.0
3.0
3.2
Text de calculator.
3.0
3.0
3.2
3.0
4.0
3.0
4.0
3.0
3.2
Text sters.
4.0
4.0
3.0
3.2
Descriere de definitie.
3.0
3.0
3.0
3.2
Lista de definitie.
3.0
3.0
3.2
Termen de definitie.
3.0
3.0
3.2
Text evidentiat.
3.0
3.0
3.2
4.0
4.0
Fieldset.
Depasit. Folositi styles.
Formular.
3.0
3.0
3.2
Subfereastra (frame).
3.0
3.0
4.0
Set de frame-uri.
3.0
3.0
4.0
3.0
3.0
3.2
Antetul.
3.0
3.0
3.2
Linie orizontala.
3.0
3.0
3.2
Document html.
3.0
3.0
3.2
Text italic.
3.0
3.0
3.2
3.0
4.0
3.0
3.0
3.2
Zona de introducere.
3.0
3.0
3.2
4.0
4.0
Text inserat.
<isindex>
<kbd>
<label>
<legend>
<li>
<link>
<listing>
<map>
<menu>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<plaintext>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>
3.0
Eticheta .
Titlu n fieldset.
3.0
3.2
4.0
4.0
4.0
4.0
Element de lista.
3.0
3.0
3.2
Referinta la o resursa .
4.0
3.0
3.2
3.0
3.0
3.2
Informatie meta.
3.0
3.0
3.2
3.0
3.0
4.0
3.0
3.0
4.0
3.0
4.0
3.0
3.2
Obiect nglobat.
Lista ordonata.
3.0
Grup de optiuni.
6.0
3.0
3.0
3.2
Paragraf.
3.0
3.0
3.2
3.0
3.0
3.2
3.0
3.0
3.0
4.0
4.0
4.0
3.0
3.0
3.2
Script.
3.0
3.0
3.2
Lista selectabila.
3.0
3.0
3.2
Text mic.
3.0
3.0
3.2
4.0
3.0
4.0
Text ngrosat.
3.0
3.0
3.2
Definitie de stil.
4.0
3.0
3.2
Indice.
3.0
3.0
3.2
Indice superior.
3.0
3.0
3.2
Tabel.
3.0
3.0
3.2
4.0
4.0
Corp de tabel.
Celula de tabel.
3.0
3.0
3.0
Zona de text.
3.0
3.0
3.2
4.0
4.0
3.0
3.2
3.0
4.0
4.0
Titlul documentului.
3.0
3.0
3.2
Linie de tabel.
3.0
3.0
3.2
Text telex.
3.0
3.0
3.2
Lista neordonata.
3.0
3.0
3.2
Variabila.
3.0
3.0
3.2
<xmp>
NN Netscape Navigator
IE Internet Explorer
W3C Consortiul WWW
SCOP
Text ngrosat.
Text cu caractere mari.
Text evidentiat.
Text italic.
Text cu caractere mici.
Text mai evidentiat dect <em>.
Indice inferior (subscript).
Indice superior (superscript).
Text inserat.
Text sters.
Text taiat. Depasit. Folositi <del>.
Text taiat. Depasit. Folositi <del>.
Text subliniat. Depasit. Folositi styles.
TAG
<code>
<kbd>
SCOP
Cod sursa de program.
Text de introdus (ex. Tastati <kbd>dir</kbd>).
<samp>
<tt>
<var>
<pre>
<listing>
<plaintext>
<xmp>
SCOP
<abbr>
<acronym>
<address>
<bdo>
<blockquote>
<q>
<cite>
<dfn>
Prescurtare.
Acronim.
Adresa.
Directia textului.
Citat lung (long quotation).
Citat scurt (short quotation).
Citat (citation).
Termen de definitie (care a fost definit sau urmeaza a fi definit).
Exercitii: ncercati toate tag-urile de mai sus. ncercati <bdo> cu atributul dir cu
valoarea RTL.
Tag-urile de formatare pot fi imbricate.
Exercitiu: scrieti un text care sa fie si ngrosat, si italic.
Tag-ul pentru textul preformatat (<pre>) este mai special. El permite copierea unui text
din alta sursa (scrisoare, document Word etc.) direct n sursa HTML; se pastreaza sfrsitul de
linie si liniile vide.
Exercitiu: introduceti textul de mai jos:
<pre>
Acesta este un text preformatat.
Observati ca se pastreaza sfarsitul de linie, si
chiar si spatiile aditionale.
</pre>
La textul preformatat:
se pastreaza spatiile albe (adica spatiile inserate n sursa cu tasta spatiu, si liniile vide);
se folosesc caractere cu latime egala;
nu se continua pe o linie noua liniile prea lungi;
Entitati
Solutia este sa folosim un cod special pentru acest caracter. n loc de caracterul <, scriem n
sursa HTML <, sau <. Aceasta metoda se foloseste si pentru caractere ce se pot
introduce greu de pe o tastatura obisnuita (cum ar fi, de exemplu, caracterul ).
Exercitiu: creati un fisier HTML; scrieti n corpul paginii textul < (fara ghilimele).
Vizualizati. nlocuiti cu < (fara ghilimele). Vizualizati din nou. nlocuiti cu
<. Vizualizati.
n primul caz, sirul < este o entitate caracter HTML. Ea are trei parti: caracterul
ampersand (&) care spune ca urmeaza un cod de entitate, numele entitatii (lt, care vine de la
less than mai putin), si punct-virgula (;) care spune ca s-a terminat entitatea. Pentru alte
entitati, se schimba doar numele entitatii, caracterele ampersand si punct-virgula ramn.
n cazul al doilea, se foloseste codul numeric zecimal al entitatii. Astfel, entitatea are patru
parti: caracterul ampersand (&), caracterul diez (#) care spune ca urmeaza un cod numeric de
entitate, codul numeric al entitatii (60) si punct-virgula de nchidere. Codul numeric
corespunde cu codul caracterului din setul extins ISO-Latin-1 (ISO 8859-1).
n al treilea caz, codul numeric al entitatii se specifica hexazecimal, nu zecimal. Entitatea are
astfel cinci parti: ampersand (&), diez (#), caracterul x care spune ca codul numeric ce
urmeaza este n hexazecimal, codul numeric n hexazecimal (3C) si punct-virgula de
ncheiere. Codul hexazecimal este exact codul numeric zecimal, transcris n hexazecimal.
Din pacate, nu toate browserele suporta toate numele de entitati. n schimb, codurile
numerice sunt bine suportate, n schimb sunt mai greu de retinut dect numele entitatii.
Atentie: n cazul entitatilor caracter, se face deosebire ntre literele mari si mici.
Exercitiu: introduceti n sursa HTML textul: Ââ, fara ghilimele. Vizualizati.
O entitate caracter mai speciala este spatiul nedivizibil (nonbreaking space), care arata
astfel: . Spatiile suplimentare din sursa HTML nu se afiseaza n pagina, dar daca
folositi spatiul nedivizibil, acesta va fi afisat ca si spatiu, chiar daca apar mai multe spatii
consecutive de acest gen. O alta caracteristica a acestui spatiu este ca, fiind nedivizibil,
cuvntul dinaintea si dupa el se afiseaza obligatoriu pe aceeasi linie, adica nu se despart pe
doua linii consecutive. Exemplul clasic pentru utilitatea acestei entitati este Coca Cola,
unde cele doua cuvinte care formeaza numele produsului trebuie sa fie pe aceeasi linie, deci
se pune ntre ele un spatiu nedivizibil.
Exercitiu: scrieti n HTML: Iarna este crncena., cu spatiu nedivizibil ntre cuvinte, si
folosind numele, si codul zecimal pentru , respectiv a.
Tabelul 1 Entitatile caracter cele mai folosite
COD ZECIMAL
DESCRIERE
CARACTER
Spatiu nedivizibil
Mai mic dect
<
Mai mare dect >
Ampersand
&
Ghilimele
Apostrof
Sectiune
Copyright
Marca nregistrata
Multiplicare
mpartire
Euro
NUME
 
<
>
&
"
'
§ §
© ©
®
®
× ×
÷ ÷
€ €
<
>
&
"
REZULTAT
"
&
<
>
DESCRIERE
Ghilimele
Ampersand
Mai mic dect
Mai mare dect
NUME ENTITATE
"
&
<
>
NUMAR ENTITATE
"
&
<
>
Valuta
¤
¤
Cent
¢
¢
Lira sterlina
£
£
Yen
¥
¥
Sectiune
§
§
Spatiu special
¨
¨
Copyright
©
©
Negare
¬
¬
Legatura invizibila (soft hyphen) ­
­
Marca nregistrata
®
®
Linie spatiu
¯
¯
Unghi
°
°
Plus-minus
±
±
Indice superior 2
²
²
Indice superior 3
³
³
Apostrof inversat
´
´
Micro
µ
µ
Paragraf
¶
¶
Punct central
·
·
Virgula speciala
¸
¸
Indice superior 1
¹
¹
Fractie 1/4
¼
¼
Fractie 1/2
½
½
Fractie 3/4
¾
¾
Multiplicare
×
×
mpartire
÷
÷
NUME ENTITATE
À
Á
Â
Ã
Ä
Å
Æ
NUMAR ENTITATE
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
?
?
NUME ENTITATE
Œ
œ
Š
š
Ÿ
ˆ
˜
 
NUMAR ENTITATE
Œ
œ
Š
š
Ÿ
ˆ
˜
 
 
 
 
 
‌
‌
‍
‎
‏
–
—
‘
’
‚
“
”
„
†
‡
‰
&lsa‹
›
€
‍
‎
‏
–
—
‘
’
‚
“
”
„
†
‡
‰
‹
›
€
™
Tag-ul ancora
Pentru a realiza legaturi, folosim tag-ul ancora.
Exemplu: <a href=http://www.ccicj.ro>Camera de comert, industrie si agricultura
Cluj</a>
n exemplul de mai sus, am creat o legatura spre site-ul www.ccicj.ro. n pagina, nu apare
adresa site-ului, ci textul dintre tagul ancora de deschidere si de nchidere, Camera de
comert, industrie si agricultura Cluj. Daca n pagina afisata dam clic pe acest text, se va
ncarca si se va afisa pagina de pe www.ccicj.ro.
De obicei, browserul afiseaza evidentiat textul activ: l subliniaza, l afiseaza cu caractere
ngrosate etc.
<a href="file://c:\temp\2.html">2</a>
</body>
</html>
2.html:
<html>
<head>
<title>2</title>
</head>
<body>
<a href="file://c:\temp\1.html">1</a>
</body>
</html>
Mutati cele doua fisiere n subdirectorul c:\temp\. Vizualizati 1.html cu browser-ul; dati clic pe 2 din
pagina. Observati titlul paginii. Dati clic pe 1. Ce se ntmpla?
Din ambele fisiere, stergeti textul file://. Vizualizati. Acum stergeti si calea completa din ambele fisiere,
lasnd numai 1.html si, respectiv, 2.html. Vizualizati.
Observatie: daca o cale spre un fisier ncepe cu c:, d: etc. sau / sau \, calea se numeste absoluta.
Daca nu ncepe cu una din acestea, ci cu numele unui subdirector sau numele unui fisier, calea se numeste
relativa. De obicei, se folosesc cai relative n legaturi, pentru portabilitate: daca va mutati toata structura de
fisiere HTML n alt subdirector, legaturile s-ar putea sa se rupa (sa devina invalide) n cazul cailor absolute.
Dar daca aveti legaturi cu cai relative, subdirectoarele locale cor fi tot acolo, deoarece ati mutat toata
structura.
doua lucruri:
1. mai nti, trebuie sa dati un nume, un fel de eticheta, subcapitolului respectiv (puteti sa dati nume si altor
elemente, nu numai subtitluri); aceasta eticheta se specifica n fisier acolo, unde ncepe textul subcapitolului
respectiv;
2.
Acest element este la nceputul capitolului, undeva n pagina. Textul etichetat (Incepe Capitolul I) nu este
evidentiat n nici un fel n pagina.
Acum, puteti sa creati o legatura la acest element.
Exemplu: <a href=#cap1>Sare la Capitolul I</a>
Observati forma adresei pentru salt: #cap1. Se foloseste un caracter diez (#), si numele etichetei (cap1).
Cnd utilizatorul da clic pe Sare la Capitolul I, browserul afiseaza pagina ncepnd cu Incepe Capitolul I.
Exercitiu: modificati fisierul 2.html: adaugati tag-uri <br>, mai multe linii vide dect ncap pe pagina, sau
copiati un text lung n fisierul HTML, ntre tag-uri <pre> (ca sa aven o pagina ce se poate derula n sus si n
jos). Creati pe la sfrsitul paginii o eticheta, cu numele test, si textul afisat Eticheta de test . Salvati.
Vizualizati.
Modificati acum fisierul 1.html: adaugati legatura:
<a href=2.html#test>Sare la eticheta din pagina 2</a>
Vizualizati fisierul. Dati clic pe textul activ Sare la eticheta din pagina 2.
Puteti crea legaturi la locuri dintr-o pagina (etichetate) chiar din alte pagini. n exemplul de mai sus, din pagina
1 ati accesat eticheta test din pagina 2. Observati forma adresei: 2.html#test; se specifica numele
fisierului, diez, si numele etichetei. Puteti accesa etichete din pagini de pe alte site-uri, de exemplu accesnd
www.ccicj.ro/index.html#afaceri (desigur, trebuie ca eticheta respectiva sa existe n pagina index.html de pe
www.ccicj.ro).
Atributul target
Cu atributul target al tag-ului ancora, puteti specifica unde sa se deschida noua pagina. De exemplu, daca
doriti sa deschideti pagina ntr-o fereastra noua de browser, folositi target=_blank.
Exercitiu: modificati legatura la Pro TV a.. pagina Pro TV sa se deschida ntr-o fereastra noua de browser.
Tabelul 1 valori predefinite ale atributului target
VALOARE
_blank
_self
_parent
_top
07. Frame-uri
Generalitati
Ati construit o pagina Web. Frumoasa, aratoasa. Contine si niste legaturi spre alte pagini.
Ce ar fi sa afisam mai multe pagini Web deodata, pe acelasi ecran, n acelasi browser? Frameurile ne permit acest lucru.
Cnd lucram cu frame-uri, fiecare document se numeste un frame. Un frame este independent
de celalalt, poate fi oriunde pe Internet, trebuie sa stim doar adresa paginii.
Atributul target
Atributul target se foloseste n cazul legaturilor (link-urilor), cum am mai vazut. Puteti
specifica de exemplu, pentru o legatura, ca pagina sa se deschida ntr-o fereastra noua. Mai
mult, puteti specifica numele ferestrei n care sa se afiseze noua pagina, de exemplu
target=fereastra_tv. Daca fereastra cu numele respectiv nu exista, se va deschide o noua
fereastra n care se va afisa pagina ceruta, si se va atribui noii ferestre numele cu care s-a
deschis (fereastra_tv, n cazul nostru). Daca fereastra cu acel nume exista deja, i se va
nlocui continutul cu noua pagina.
Exercitiu: vizualizati urmatoarea pagina:
<html>
<head>
<title>
Pagina de comanda
</title>
</head>
<body>
<h3>
Universitate:
</h3>
<!-- Se deschide o noua fereastra numita "Universitate", cu pagina UTCN. -->
<a href="http://www.utcluj.ro" target="Universitate">Universitatea Tehnica ClujNapoca</a><br>
<!-- Se inlocuieste pagina UTCN cu pagina UBB, tot in fereastra "Universitate". ->
<a href="http://www.ubbcluj.ro" target="Universitate">Universitatea BabesBolyai</a>
</body>
</html>
Exercitiu: creati un fisier HTML, care sa contina doua legaturi, una la www.protv.ro,
cealalta la www.antena1.ro. Faceti n asa fel, nct daca se da clic pe o legatura din cele
doua, pagina de la ProTV sau de la Antena 1 (n functie de legatura selectata de
utilizator) sa se ncarce n aceeasi fereastra secundara (fereastra cu pagina care contine
cele doua legaturi sa ramna intacta). Asta nseamna ca veti avea pe ecran maximum
doua ferestre de browser: una cu pagina dvs. cu cele doua legaturi, si una cu pagina
unui post de televiziune.
Tag-ul base
Se poate ntmpla sa doriti ca toate paginile spre care aveti legaturi din pagina dvs. sa se
deschida n aceeasi fereastra secundara. Asta ar nsemna sa includeti atributul target n
fiecare tag ancora, ceea ce ia mult timp.
Cu tag-ul base, puteti specifica fereastra scop (target) pentru noile pagini ce se vor
deschide din aceasta pagina. Tag-ul base se pune n antetul paginii de Web (n partea
head), si nu are pereche de nchidere.
Exemplu: vizualizati urmatoarea pagina:
<html>
<head>
<title>
Fereastra parinte
</title>
<!-- Fereastra scop implicita. -->
<base target="prima_fereastra">
</head>
<body>
<h3>
Fereastra parinte
</h3>
<p>
<!-- Se deschide in prima_fereastra. -->
<a href="http://www.protv.ro">Deschide "Prima_Fereastra".</a><br>
<a href="http://www.antena1.ro" target="a_doua_fereastra">Deschide
"A_Doua_Fereastra".</a>
</p>
<p>
<!-- Nu este nevoie de target, se deschide implicit in prima_fereastra. -->
Tag-ul frameset
Tag-ul <frameset> (si perechea lui de nchidere) nlocuieste corpul unei pagini de Web,
adica partea body. Aceste doua parti se exclud mutual, deoarece o pagina care contine
frameset specifica ce alte pagini se vor afisa simultan n browser, aceste pagini avnd
fiecare corp separat. Nu se pun nici un fel de date (text, legaturi, imagini etc.) n afara tag-ului
<frameset>. Puteti imbrica mai multe seturi de frame-uri.
Tag-ul frame
Tag-ul <frame> arata documentul (pagina) care formeaza partea respectiva a paginii noastre
multi-frame. Sursa se specifica prin atributul src. Observati ca tag-ul <frame> nu are
pereche de nchidere (deoarece nu s-ar pune nimic ntre cele doua).
Exercitiu: vizualizati urmatoarea pagina:
<html>
<head>
<title>
Pagina TV
</title>
</head>
<frameset cols="60%,*">
<frame src="http://www.protv.ro">
<frame src="http://www.antena1.ro">
</frameset>
</html>
Schimbati sa se afiseze cele doua frame-uri nu pe doua coloane, ci pe doua linii, cel de
sus de 30% din naltimea paginii, iar cel de jos, ct ramne.
Atributul noresize
Acest atribut mpiedica utilizatorul sa modifice dimensiunea frame-ului.
Exercitiu: ncercati acest atribut la frame-urile din exemplul de mai sus.
Tabelul 1 alte atribute ale tag-ului frame
ATRIBUT
name
src
frameborder
marginwidth
marginheight
noresize
scrolling
DESCRIERE
Numele frame-ului.
Adresa paginii care va fi afisata n frame.
1 deseneaza un chenar frame-ului, 0 nu deseneaza (dar poate apare chenarul unui frame
nvecinat).
Marginea din stnga si din dreapta ale frame-ului, n pixeli.
Marginea de sus si de jos ale frame-ului, n pixeli.
Fara valoare, mpiedica utilizatorul sa modifice marimea frame-ului.
auto, implicit, afiseaza bare de scroll orizontale si verticale, daca e nevoie. yes si no
forteaza afisarea, respectiv mpiedica afisarea barelor de scroll, chiar daca nu este nevoie
sau, dimpotriva, este nevoie de ele.
Tag-ul noframes
Nu toate browserele suporta frame-uri, de aceea se include si tag-ul <noframes> (cu pereche
de nchidere), n interiorul <frameset> principal. Daca pagina este ncarcata ntr-un browser
care nu suporta frame-uri, se afiseaza continutul blocului <noframes>.
Exercitiu: vizualizati urmatoarea pagina:
<html>
<head>
<title>
Pagina TV
</title>
</head>
<frameset cols="*,*">
<frame src="http://www.protv.ro">
<frame src="http://www.antena1.ro">
<noframes>
<body>
<a href="http://www.protv.ro">Pro TV</a> <br>
<a href="http://www.antena1.ro">Antena 1</a>
</body>
</noframes>
</frameset>
</html>
Ce se afiseaza cnd pagina este ncarcata ntr-un browser care nu cunoaste frame-uri?
Imbricarea frame-urilor
Seturile de frame-uri se pot si imbrica, adica n locul unui <frame>, puteti avea o pereche
<frameset> </frameset>, cu unul sau mai multe frame-uri sau seturi de frame-uri.
Exercitiu: n locul frame-ului de jos din exemplul anterior, puneti un nou set de 40%/60% pe
doua coloane, cu Antena 1 si TVR (www.tvr.ro), adica acum veti avea pe ecran ProTV sus
ntr-o linie, iar jos Antena 1 si TVR, pe doua coloane.
Observati ca mpartirea 40%-60% se aplica doar n partea de jos, adica numai pentru
<frameset> interior primului <frameset>. Primul frame (ProTV) are aceeasi prioritate ca si
setul de frame-uri de lnga el.
Exercitiu: schimbati atributul <frameset>-ului Antena1/TVR, sa fie pe doua linii, nu doua
coloane.
Din moment ce un <frameset> poate fi mpartit sau pe coloane (cu cols), sau pe linii (cu
rows), dar nu simultan pe coloane si linii, daca doriti o mpartire mixa, trebuie sa folositi mai
multe seturi de frame-uri.
Sugestie: prima data schitati pe hrtie structura paginii. Daca aveti un frame care se ntinde
pe o linie pe toata latimea paginii, primul <frameset> (cel extern) trebuie sa fie cu rows.
Daca aveti un frame care se ntinde pe o coloana, pe roata naltimea paginii, ncepeti cu
cols.
Puteti da nume frame-urilor prin atributul name, si sa folositi aceste nume la atributul
target.
navigare.html:
<html>
<head>
<title>
Navigare
</title>
<base target="_corp">
</head>
<body>
<a href="http://www.protv.ro">Pro TV</a><br>
<a href="http://www.antena1.ro">Antena 1</a><br>
</body>
</html>
Exercitiu: creati alte doua fisiere HTML; modificati exemplul de mai sus, sa puteti naviga
pe aceste doua pagini noi, n loc de Pro TV si Antena 1.
Puteti iesi din <frameset> specificnd la o legatura target=_top. _top este un nume
predefinit, ncarca pagina referita de legatura n toata fereastra, adica veti avea o singura
pagina n fereastra, fara frame-uri.
Exercitiu: adaugati linia urmatoare n navigare.html, dupa primele doua legaturi, apoi
vizualizati:
<a href="http://www.utcluj.ro" target="_top">Iesire</a>
Probleme cu frame-uri
n cazul unui document cu frame-uri, daca dati clic pe o legatura dintr-un frame, noua pagina
se va ncarca tot n acelasi frame (daca frame-urile sunt independente). Asta nu ar fi o
problema, dar daca dati acum Back n browser, probabil ca browserul va merge napoi pe
pagina dinaintea documentului cu frame-uri, si nu la documentul la frame-ul anterior.
Frame-urile pot crea probleme si la cautarea unui text n pagina, deoarece browserul nu stie n
care frame sa caute; similar, pot fi problemele cu comenzile care se bazeaza pe combinatii de
taste.
Programele de cautare pe Internet nu salveaza datele despre continutul unui frame, deoarece
de obicei, un frame are sens n cadrul grupului cu mai multe frame-uri din care face parte. De
obicei, aceste motoare de cautare salveaza date despre continutul elementului <noframes>
dintr-o pagina cu frame-uri.
08. Tabele
Tabelele sunt foarte utile n HTML, mai ales pentru ca se pot folosi la structurarea paginii n
mai multe zone, lucru care nu prea are legatura cu tabele. Pe de alta parte, datele tehnice,
rezultatele unei cercetari, o lista de preturi, toate arata bine sub forma de tabel; tabelul ofera
informatia concentrat si bine organizat.
Un tabel n HTML ncepe cu tag-ul <table> si se ncheie cu </table>. Tabelul este mpartit n
linii (table row), fiecare linie fiind ntre tag-urile <tr> si </tr>; la rndul lor, liniile se mpart
n celule, fiecare celula de date (table data) ntre tag-urile <td> si </td>. O celula de tabel
poate contine text, imagini, liste, paragrafe, alte tabele etc.
Exercitiu: scrieti urmatorul text n corpul unei pagini de Web:
<table>
<tr>
<td>celula 1/1</td>
<td>celula 1/2</td>
</tr>
<tr>
<td>celula 2/1</td>
<td>celula 2/2</td>
</tr>
</table>
Vizualizati.
Tag-ul <table> poate avea o multime de atribute, de exemplu atributul border specifica
grosimea chenarului, n pixeli. Daca dati doar border fara valoare, tabelul se va afisa cu
chenar implicit de 1.
Exercitiu: schimbati grosimea chenarului n 5. Vizualizati.
Exercitiu: experimentati si celelalte atribute ale tag-ului table.
Tabelul poate avea un titlu, care se afiseaza deasupra lui. Titlul se specifica ntre tag-urile
<caption> si </caption>. Tag-ul <caption> poate avea si el atribute, cel mai folosit fiind
align, cu valoarea bottom. Align poate lua patru valori, left, right, top, bottom.
Internet Explorer mai specifica atributul valign cu valorile top sau bottom, ca sa puteti
combina alinierea orizontala cu cea verticala.
Exercitiu: dati titlul Primul tabel tabelului dvs. de mai sus; faceti ca titlul sa se afiseze
sub tabel, n partea stnga (sugestie: folositi si tag-ul <div> pentru a doua aliniere a titlului).
n afara de celulele de date (<td>), o linie de tabel poate contine si celule de antet (table
heading). Celula de antet ncepe cu <th> si se ncheie cu </th>. Celulele de tip antet sunt de
fapt tot celule de tabel ca si cele de date, cu diferenta ca textul continut n ele se afiseaza
evidentiat (de obicei ngrosat).
Exercitiu: modificati exemplul de mai sus, sa arate astfel:
<table border=1>
<tr>
<th>Linia 1</th>
<td>celula 1/1</td>
<td>celula 1/2</td>
</tr>
<tr>
<th>Linia 2</th>
<td>celula 2/1</td>
<td>celula 2/2</td>
</tr>
</table>
Observati antetul liniilor.
Atentie: totdeauna verificati ca numarul celulelor dintr-o linie de tabel sa coincida, altfel
coloanele tabelului vor apare eronat.
Daca doriti anteturi de coloane, si nu de linii, faceti ca prima linie de tabel sa contina numai
celule antet (<th>), celulele continnd antetele coloanelor ce vor urma n urmatoarele linii ale
tabelului.
Daca aveti o celula goala ntr-un colt al tabelului, este mai bine sa scrieti n el un spatiu
nedivizibil.
NN
3.0
3.0
3.0
3.0
3.0
IE
3.0
3.0
3.0
3.0
3.0
3.0
W3C
3.2
3.2
3.2
3.0
3.2
4.0
SCOP
Tabel.
Antet.
Linie de tabel.
Celula de date.
Titlu de tabel.
Grup de coloane de tabel.
<col>
3.0
4.0
<thead>
4.0
4.0
<tbody>
4.0
4.0
<tfoot>
4.0
4.0
09. Liste
n HTML, puteti crea diferite tipuri de liste, n functie de necesitati. Elementele listei au, de
obicei, un tab n fata, si o bulina sau un numar, sau alt caracter n functie de browserul care le
afiseaza.
O lista poate contine text, paragrafe, linii vide, imagini, legaturi, alte liste etc.
Liste neordonate
De obicei , elementele unei liste neordonate apar cu o bulina n fata. Fiind neordonate,
elementele nu sunt numerotate.
Lista neordonata ncepe cu tag-ul <ul> (de la unordered list) si se termina cu tag-ul pereche,
</ul>.
Elementele listei sunt nconjurate de tag-urile <li> si </li>, de la list item.
Exercitiu: creati un fisier HTML, si introduceti urmatorul text n corpul paginii:
<ul>
<li>Paine</li>
<li>Lapte</li>
<li>Mamaliga</li>
<li>Icre negre</li>
</ul>
Vizualizati pagina. Inserati o lista neordonata n locul elementului Paine; aceasta lista
imbricata sa aiba elementele: o legatura spre site-ul Pro TV, un paragraf si un cuvnt scris
cu text ngrosat (bold).
O lista neordonata poate avea atribute, cea mai des folosita fiind cea care specifica tipul
bulinei dinaintea elementului. Acesta este atributul type. Acelasi atribut se poate folosi si n
cazul elementului.
Exercitiu: la tag-ul <ul> din lista de mai sus, dati atributul type cu valoarea square.
Vizualizati. Observati organizarea elementelor listei n pagina afisata.
Liste ordonate
Listele ordonate sunt similare celor neordonate, cu deosebirea ca la afisare, elementele sunt
numerotate. Tag-ul de nceput este <ol>, iar cel de sfrsit, </ol>. Elementele de lista se
specifica tot cu <li>.
Exercitiu: modificati lista de mai sus, sa fie ordonata. Observati cum se afiseaza.
Si n cazul listelor ordonate, putem alege cum sa se faca numerotarea elementelor, cu
atributul type, doar ca aici, atributul poate lua alte valori, de exemplu a (pentru
numerotare cu litere mici). Avem si atributul start, care specifica de unde se ncepe
numaratoarea. Start se specifica cu numar arab, chiar daca numerotarea este cu litere.
Exercitiu: fortati numerotarea n lista de mai sus cu litere mari, ncepnd cu C; afisati.
Liste de definitie
Lista de definitie este un caz particular de lista. Elementele unei astfel de liste sunt perechi
termen+definitie. O lista de definitie ncepe cu tag-ul <dl> si se termina cu perechea acestui
tag, </dl>.
Termenul ncepe cu tag-ul <dt> si se termina cu </dt>. Dupa fiecare termen, urmeaza
definitia lui, care ncepe cu tag-ul <dd> si se ncheie cu </dd>. Puteti pune text, paragrafe,
linii vide, imagini, legaturi, alte liste etc. ntre tag-urile de definitie (<dd> si </dd>).
Exercitiu: introduceti urmatorul text ntr-un fisiere HTML, n corpul paginii:
<dl>
<dt>Paine</dt>
<dd>Produs din faina de grau</dd>
<dt>Mamaliga</dt>
<dd>Produs din faina de malai</dd>
</dl>
Vizualizati. Puneti o legatura spre o pagina Web n locul termenului Paine. Vizualizati.
Exercitiu: ncercati sa creati o lista de definitie cu mai multe definitii pentru acelasi termen,
apoi cu o singura definitie pentru mai multi termeni.
Exercitiu: creati o lista imbricata: cel principal sa fie de tip ordonat, cel intern neordonat.
Exercitiu: ncercati atributul compact la toate cele trei tipuri de lista (se include n tag-ul
de nceput de lista).
Exercitiu: ncercati si celelalte tipuri de liste (din tabel).
Tabelul 1 Lista tag-urilor de tip lista
TAG DE START
<ol>
<ul>
<li>
<dl>
<dt>
<dd>
<dir>
NN
3.0
3.0
3.0
3.0
3.0
3.0
<menu>
IE
3.0
3.0
3.0
3.0
3.0
3.0
W3C
3.2
3.2
3.2
3.2
3.2
3.2
SCOP
Lista ordonata.
Lista neordonata.
Element de lista.
Lista de definitie.
Termen de definitie.
Descrierea unui termen de definitie.
Depasit. Folositi <ul>.
Depasit. Folositi <ul>.
10. Formulare
Generalitati
Pna acum, am vazut cum puteti crea pagini Web pe care utilizatorii sa le vizualizeze. nsa
aceasta metoda este unidirectionala, utilizatorii nu va pot trimite comentarii, propuneri sau
date despre ei nsisi, eventual printr-un e-mail. Ideal ar fi sa va poata trimite opiniile lor, date
personale (pentru statistici), preferintele lor direct din pagina, sa nu mai fie nevoie de pornirea
programului pentru e-mail.
Formularele Web va permit acest lucru: utilizatorii pot introduce text sau pot face selectii
dintr-o lista direct pe pagina, si pot trimite aceste date napoi serverului, care apoi le
proceseaza.
Aceasta tehnica se bazeaza pe doua lucruri: pagina Web care afiseaza formularul virtual n
browserul clientului, si programul (scriptul) de pe server, care proceseaza datele din
formularul completat si trimis de client, prin intermediul browserului sau. n aceasta lucrare
vom vorbi de partea de formular, mai exact, cum putem crea un astfel de formular ntr-un
fisier HTML. Despre scripturile (programele) de pe server vom vorbi mai trziu.
La trimiterea datelor formularului napoi la server, toate datele sunt trimise n perechi
nume=valoare.
Tag-ul form
Tag-ul input
n interiorul blocului <form>, trebuie sa inseram cteva elemente care sa fie afisate pe pagina.
Aceste elemente se specifica cu tag-ul <input>, fara pereche de nchidere.
Exercitiu: creati si vizualizati urmatorul fisier:
<html>
<head>
<title>
Pagina test formulare
</title>
</head>
<body>
<form method="post" action="http://www.serverulmeu.ro/cgi-bin/scriptulmeu">
<input type="text" name="textuldetrimis" value=test>
</form>
</body>
</html>
Pentru fiecare element <input>, trebuie sa specificam atributele type si name. Atributul
type specifica daca elementul grafic respectiv este zona de introducere text, buton, buton
radio sau altceva. Atributul name specifica numele elementului respectiv, deoarece datele
formularului, trimise napoi la server, sunt compuse din perechi nume=valoare, cum am
amintit la nceput. n cazul exemplului de mai sus, se afiseaza o casuta de introducere text
(type=text); datele se memoreaza si vor fi trimise sub forma textuldetrimis=test,
textuldetrimis fiind numele casutei de introducere text, iar test fiind textul concret din
acea casuta. Daca utilizatorul tasteaza alt text n respectiva casuta, textuldetrimis va lua alta
valoare, respectiv noul text introdus de utilizator.
Butonul Submit
Ca sa trimitem serverului datele dintr-un formular, avem nevoie de un element <input> de tip
submit. Cnd se apasa acest buton, browserul aduna datele din formularul curent (din care
face parte si butonul) si le trimite serverului.
Daca formularul contine doar o zona de introducere text, tastnd Enter transmite datele
serevrului, si nu mai este nevoie de butonul Submit. Totusi, utilizatorii vor cauta acest buton
pe pagina, astfel ca este indicat sa puneti un buton Submit n fiecare formular.
Exercitiu: adaugati urmatoarea linie n fisierul-exemplu de mai sus, dupa elementul
<input> de tip text:
<input type=submit value=Trimite>
Butoane radio
Butoanele radio se folosesc de obicei n grup, ceea ce nseamna ca avem mai multe butoane
radio, cu valori diferite si nume identice; utilizatorul poate selecta doar unul dintre ele
(celelalte se deselecteaza automat).
Exercitiu: introduceti urmatoarele elemente n formularul de mai sus:
<ol>
<li><input type=radio name=marca value=Ericsson>Ericsson</li>
<li><input type=radio name=marca value=Nokia>Nokia</li>
<li><input type=radio name=marca value=Alcatel>Alcatel</li>
</ol>
Observati ca toate butoanele radio de mai sus au acelasi nume. La trimitere, se ia numele
butonului si valoarea celui care este selectat. Mai observati ca sunt puse n lista, ceea ce nu
este obligatoriu, dar creeaza un efect estetic.
Este bine ca unul din butoanele din grup sa fie selectat implicit. Puteti specifica asta folosind
atributul checked, fara valoare, la unul din butoane.
Exercitiu: faceti ca marca Nokia sa fie selectata implicit n exemplul de mai sus.
Puteti crea mai multe grupuri de butoane radio n acelasi formular, dar numele grupurilor sa
fie diferit.
Exercitiu: creati nca un grup de butoane radio n exemplu.
Butoane de selectie
Aceste butoane sunt de tip checkbox. Numai acele butoane+valori vor fi trimise, care sunt
selectate. Puteti forta si aici ca un buton sa fie selectat implicit, cu atributul checked.
Exercitiu: schimbati butoanele radio din exemplul anterior n butoane de selectie de tip
checkbox.
Imagini
Se pot folosi si imagini n formulare. Cnd dati clic pe o imagine, se transmit serverului
coordonatele de pe imagine unde ati dat clic, mpreuna cu celelalte date din formular. De
obicei, coordonatele nu se proceseaza, imaginile dintr-un formular folosindu-se la trimiterea
datelor, n loc de buton Submit.
Sintaxa este:
<input type=image src=buton.gif name=butonul>
Liste de selectie
Puteti avea si liste de selectie ntr-un formular. Acestea se specifica prin tag-ul <select> si
perechea sa de nchidere, iar n interiorul blocului de selectie, specificati optiunile cu
<option> si perechea.
Exercitiu: introduceti n exemplul anterior:
<select name="marca">
<option>Alcatel</option>
<option>Nokia</option>
<option>Ericsson</option>
</select>
Valoarea trimisa este textul afisat, sau specificat cu value. Puteti forta ca nu prima, ci alta
optiune sa fie selectata implicit, cu atributul selected la o optiune. Puteti forta si
posibilitatea selectarii mai multor optiuni, specificnd atributul multiple n <select>. Puteti
avea, de asemenea, atributul size (pe verticala).
Exercitiu: ncercati atributul size, de exemplu 4.
Zone de text
Zonele de text sunt zone multi-linie unde puteti introduce text. Se specifica prin tag-ul
<textarea> si perechea, cu atributele name, rows si cols (adica numele, numarul liniilor
s numarul coloanelor)
Exercitiu: n exemplul anterior, creati o zona de introducere text, de latime 20 si naltime
10.
Zone ascunse
n formulare, putem avea si zone ascunse, care nu se afiseaza pe pagina.
Ele au urmatoarea sintaxa:
<input type=hidden name=numecaine value=Rex>
Care este folosul, daca tot nu se afiseaza si utilizatorul nu poate introduce date n aceste
zone ascunse?
Sa presupunem, de exemplu, ca avem un formular afisat. Introducem datele, apoi apasam pe
Submit. Browserul trimite serverului datele introduse n formular (perechile
nume=valoare); scriptul de pe server le proceseaza, si genereaza o alta pagina Web cu un alt
formular. Acest nou formular este trimis napoi utilizatorului, care l completeaza si l trimite
napoi serverului. Al doilea script de pe server proceseaza datele din al doilea formular, dar se
bazeaza att pe datele din acest al doilea formular, ct si pe rezultatele primului script. Asta
nseamna ca primul script trebuie sa transmita cumva rezultatele sale celui de-al doilea script.
Poate face acest lucru scriind un fisier temporar pe harddiscul serverului, iar al doilea script
sa-l citeasca de pe harddisc la primirea celui de-al doilea formular. Totusi, acest lucru ncarca
mult serverul, mai ales daca apar mai multe formulare simultan.
Solutia este simpla: primul script genereaza al doilea formular si pune rezultatul procesarii
primului ntr-un element ascuns din formular. Al doilea script, cnd primeste al doilea
formular, ia datele din acest formular, inclusiv rezultatul primei procesari, din elementul
ascuns.
Upload de fisiere
Acest element de formular este relativ nou, putine browsere stiu sa-l foloseasca. Cu ajutorul
acestui element, puteti trimite fisiere ntregi pe server, direct din pagina Web.
Exercitiu: introduceti urmatorul formular ntr-o pagina si vizualizati.
<form method=post enctype=multipart/form-data
action=http://www.serverulmeu/cgi-bin/scriptulmeu>
Trimite fisierul: <input name=fisierul type=file>
<input type=submit value=Trimite fisierul>
</form>
Elementele multimedia de pe paginile Web sunt fisiere separate de fisierul HTML ce contine
textul si marcajele (tag-urile) pentru pagina. Se face referire la aceste elemente multimedia n
cadrul fisierului HTML. Asta nseamna ca n momentul cnd browserul ncarca fisierul
HTML, un tag special din acesta i spune care fisier multimedia sa-l aduca de pe server si
unde sa-l afiseze pe pagina (daca fisierul respectiv contine informatie vizuala).
Imagini
Imaginile sunt pe departe cele mai raspndite elemente multimedia
La fel cum un fisier HTML are extensia .html sau .htm, si fisierele imagine au extensiile
lor, n functie de format (cum sunt codificate punctele si atributele lor n interiorul fisierului).
Cele mai raspndite formate de imagine sunt GIF (cu extensia .gif) si JPEG (cu extensia
.jpeg sau .jpg), dar si formatul PNG se raspndeste rapid, mai ales pentru ca ofera aceeasi
calitate ca GIF, dar la marime mai redusa a fisierului imagine.
Observatie: fisierele GIF codifica imaginea cu maxim 256 culori, JPEG pe 16 milioane
culori sau 256 nuante de gri. Fisierele GIF sunt adecvate desenelor si reclamelor
desenate pe calculator, iar JPEG-urile sunt cea mai buna solutie pentru fotografii.
Putem vorbi de imagini inline si imagini externe. Imaginile inline sunt n linie, adica apar
pe pagina Web mpreuna cu textul; daca le includeti n mijlocul unei propozitii din fisierul
HTML, ele vor aparea n mijlocul propozitiei n pagina. Imaginile pot fi inserate n mijlocul
oricarui text de afisat (text clar, paragrafe, subtitluri etc.). n continuare vom vorbi despre
imagini inline, cele externe vor fi discutate mai trziu.
Atributul src
Includerea unei imagini n pagina este simpla, trebuie doar sa folositi tag-ul <img>.
Exemplu: <img src=imagine.gif>
Observati atributul src, care specifica sursa fisierului imagine. Ca si n cazul legaturilor spre
alte fisiere HTML locale, si aici puteti folosi calea absoluta sau relativa spre fisierul imagine,
de exemplu src=imagini/im1.gif, sau puteti folosi o imagine chiar de pe alt server,
specificnd, de exemplu, src=http://enyedi.home.ro/images/Mirri3_small.JPG.
Exercitiu: creati urmatorul fisier HTML:
<html>
<head>
<title>
Pagina cu imagine
</title>
</head>
<body>
<img src="http://enyedi.home.ro/images/Mirri3_small.JPG">
</body>
</html>
Atributul alt
Acest atribut este foarte util n cazul browserelor care nu afiseaza imagini (nu pot sau afisarea
imaginilor a fost dezactivata). n acest caz, textul specificat de valoarea lui alt va fi afisat n
locul imaginii (alt vine de la alternate, adica o alternativa la imagine). De obicei, textul
alternativ se pune ntre paranteze drepte (n interiorul ghilimelelor), dar acesta este doar un
obicei; astfel, ntr-un browser n mod text, utilizatorul vede imediat care sunt imaginile (apar
texte ntre paranteze drepte n locul lor). Este bine ca textul alternativ sa contina functia
imaginii, si nu descrierea ei.
Exercitiu: adaugati un text alternativ pentru imaginea din exemplul anterior.
Eventual, puteti introduce un text ASCII Art ca si text alternativ, punnd tot tag-ul <img>
ntre <pre> si </pre>, ca sa se pastreze formatarea.
Atributul align
Atributul align specifica pozitia orizontala a imaginii pe pagina, sau n functie de textul n
care este inserat. Valorile standard sunt top, middle, bottom, left sau right. Primele
trei (top, middle si bottom) se raporteaza la textul n care este inserata imaginea, iar
left si right pozitioneaza imaginea n pagina, pe orizontala, textul din dreapta (stnga)
imaginii ocopnd spatiul disponibil de lnga imagine.
Daca doriti sa centrati imaginea pe orizontala n pagina, puneti tot tag-ul <img> ntr-un alt
bloc, de exemplu <p align=center><img src=imaginea.gif></p>.
Exercitiu: ncercati atributul align cu valorile de mai sus. Observati fiecare atribut
cum aliniaza imaginea.
Atributul border
Acest atribut deseneaza un chenar de grosime specificata (n pixeli) n jurul imaginii. Puteti
chiar forta disparitia chenarului (cu border=0), de exemplu n cazul imaginilor care sunt si
legaturi.
Atentie: aveti grija cnd fortati chenarul la zero, deoarece este singura indicatie ca
imaginea este o legatura activa!
Exercitiu: setati chenarul la 5 pixeli pentru imaginea din exemplul de mai sus.
Imagini ca legaturi
Putem folosi o imagine pe post de legatura la o alta pagina? Sigur! Este simplu: trebuie doar
sa punem toata entitatea imagine ntr-un bloc ancora.
Exemplu:
<a href=http://www.serverulmeu.com><img src=serverulmeu.gif></a>
Exercitiu: faceti imaginea din primul exemplu (de la nceputul lucrarii) legatura la adresa
http://enyedi.home.ro/images/mirri3.jpg. Vizualizati. Fortati disparitia chenarului.
Schimbati acum adresa legaturii n http://www.protv.ro. Vizualizati. Dati clic pe imagine,
sa verificati legatura.
Puteti adauga si text mpreuna cu imaginea, n interiorul ancorei, ca text explicativ si
legatura spre aceeasi pagina.
Exercitiu: scrieti Dati clic pentru imaginea mare. n interiorul ancorei, dupa imagine.
Vizualizati.
Imagini externe
Versiunea mare a imaginii din exemplul anterior este o imagine externa
(http://enyedi.home.ro/images/mirri3.jpg). De ce? Pentru ca nu este afisata mpreuna cu
celelalte elemente de pe pagina, ci numai la cererea explicita a utilizatorului (cnd acesta da
clic pe imaginea mica afisata n pagina). Observati ca n momentul cnd este activat (cititorul
da clic pe versiunea mai mica), browserul ncarca si afiseaza versiunea mare a imaginii, fara
ca aceasta sa fie continuta explicit ntr-o pagina Web (browserul afiseaza imaginea, fara sa fie
nevoie de un fisier HTML).
De obicei, n pagina se afiseaza o versiune mai mica a imaginii, pentru ca ncarcarea si
afisarea paginii sa nu dureze prea mult. Daca utilizatorul doreste vizualizarea imaginii mai
detaliate, poate sa ncarce versiunea mai mare a imaginii.
Culori
Pe lnga imagini, puteti colora si alte elemente dintr-o pagina Web, de exemplu text sau
fundalul paginii.
Orice culoare se compune din diferite procentaje ale culorilor de baza rosu, verde si albastru
(RGB Red, Green, Blue).
n trei feluri puteti specifica culori:
folosind numele culorii (red, de exemplu, adica rosu);
cu combinatia valorii zecimale a celor trei culori de baza, fiecare lund o valoare ntreaga
de la zero la 255, de exemplu rgb(255,0,0), care este tot rosu (verdele si albastrul sunt
zero); observati sintaxa (rgb(codrosu,codverde,codalbastru));
cu combinatia valorii hexazecimale a celor trei culori de baza, fiecare lund o valoare de la
zero la FFhexa, de exemplu #FF0000 este tot rosu, deoarece FF (pentru rosu) hexazecimal
este 255 zecimal, iar 00 este zero si n zecimal; observati sintaxa
(#codhexarosucodhexaverdecodhexaalbastru). Culorile specificate n hexazecimal sunt
recunoscute de toate browserele.
Tabelul 1 culorile cu nume
NUME CULOARE VALOARE RGB N HEXA
Black
#000000
Silver
#C0C0C0
Gray
#808080
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#00FFFF
Imagine fundal
Puteti specifica un fisier imagine ca fundal pentru pagina dvs. Trebuie doar sa folositi
atributul background n tag-ul <body>. Valoarea acestui atribut trebuie sa fie calea spre un
fisier local sau o adresa url, similar ca pentru atributul src din tag-ul <img>. Daca imaginea
este mai mica dect pagina, ea va fi repetata (ca si tiled wallpaper n Windows).
Exercitiu: specificati pentru exemplul anterior o imagine de fundal.
Caracteristic lui Internet Explorer este atributul bgproperties n tag-ul <body>. Acest
atribut creeaza efectul fundalului static, deasupra caruia se misca pagina (cnd este derulat).
Tag-ul <embed>
Acest tag este caracteristic browserului Internet Explorer; cu ajutorul acestui tag, puteti
ngloba un element multimedia (audio sau video) n pagina.
Exemplu:
<embed src="c:/Temp/c04.mid" autostart="true" hidden="true" loop="0">
Exemplul de mai sus nglobeaza fisierul c04.mid (fisier audio de tip MIDI) n pagina, fara ca
acesta sa afecteze vizual pagina (atributul hidden); muzica va porni automat la ncarcarea
paginii (atributul autostart). Piesa se va repeta de 0 ori (atributul loop).
Exercitiu: schimbati valoarea atributului hidden, ca sa apara si butoane de control
pentru audio.
Tag-ul <bgsound>
Cu acest tag (propriu lui Internet Explorer), puteti specifica un fundal sonor pentru pagina
dvs. Folositi o piesa de fundal scurta, si fara sa repetati, ca sa nu distrageti atentia cititorului.
Exemplu: <bgsound
src="c:/Temp/Download/c04.mid">
Video nglobat
Tot n Internet Explorer, puteti include elemente video n pagina.
Exemplu: <img
Acest exemplu afiseaza imaginea filmul.gif n alte browsere, dar n Internet Explorer, se
porneste fisierul video filmul.avi.
Tag-ul <marquee>
Si acest tag este propriu lui Internet Explorer. El afiseaza un text care se plimba pe
orizontala n pagina.
Exercitiu: vizualizati tag-ul de mai jos:
<marquee>Test</marquee>
Tag-ul <blink>
Acest tag este propriu lui Netscape Navigator.
Exercitiu: ncercati tag-ul urmator n Netscape:
<blink>Test</blink>
Sfaturi practice
Pastrati echilibrul dintre elementele multimedia mari, colorate, pline de viata, atractive si
marimea paginii. Degeaba aveti o pagina colorata (de pus n vitrina), daca se ncarca lent.
Utilizatorii vor naviga pe alta pagina nainte ca browserul lor sa ncarce complet pagina dvs.
Folositi imagini inline de marime mica, sub 20K. Puteti reduce marimea unui fisier imagine
reducnd marimea imaginii, reducnd numarul culorilor (pna la alb-negru, eventual).
12. Fonturi
Puteti schimba nfatisarea unei bucati de text, folosind tag-ul <font> (si perechea ei de
nchidere). Cu acest tag, se pot specifica unele atribute ale textului, de exemplu culoarea, tipul
caracterelor, marimea etc. Acest tag nu poate contine alte tag-uri de nivel bloc (ca paragraf
sau tabel).
Exercitiu: scrieti urmatoarea bucata de cod n fisierul dvs. HTML, apoi vizualizati:
Text normal.<font face="arial,times" color="#0099ff" size="10">Text de
test.</font>Text normal.
Pentru atributul face, am specificat doua tipuri de caractere, separate prin virgula. Daca pe
sistemul unde se vizualizeaza pagina nu exista primul tip de caractere, textul se va afisa
folosind urmatorul din lista (times, n cazul nostru).
Marimea caracterelor se poate specifica absolut (n cazul nostru, 10), sau relativ, de
exemplu, size=+4 mareste caracterele cu 4.
Culorile se pot specifica cum s-a descris n lucrarea Multimedia pe Web.
Stiluri
Pna acum, daca aveati mai multe fisiere HTML pe un site (interconectate prin legaturi,
evident), trebuia sa specificati n fiecare fisier detaliile privind culoarea textului, a fundalului
etc.
Consortiul WWW a introdus si recomanda folosirea stilurilor. Acestea nu sunt altceva dect
gruparea la un loc a caracteristicilor cum ar fi culoarea textului, fundalul etc., adica proprietati
ale paginii, altele dect informatia n sine (adica textul, legaturile, elementele multimedia
etc.).
Puteti folosi stilurile n trei variante:
1. n fisiere externe de tip CSS (Cascading Style Sheets); n acest caz, n fiecare fisier
HTML pentru care doriti sa aplicati aceste elemente de stil, trebuie sa includeti o legatura spre
fisierul CSS cu stiluri;
2. n antetul unui fisier HTML (stiluri interne); n acest caz, elementele de stil se vor aplica
doar acelei pagini de Web, pe care o codifica fisierul HTML respectiv;
3. Inline, adica n interiorul corpului unui fisier HTML; n acest caz, puteti schimba
elementele de stil ale unui bloc de text, sau chiar a mai multe blocuri, n acelasi fisier (la fel
cum puteti schimba si fontul de mai multe ori, n acelasi document).
Stiluri externe
Un fisier extern cu stiluri este alegerea optima n cazul n care avem mai multe fisiere HTML
care trebuie sa adopte acelasi stil, adica aceeasi imagine de fundal, aceleasi culori pentru text
etc. Daca dorim sa schimbam ceva n aceste caracteristici, trebuie sa schimbam doar n
fisierul cu stiluri.
Exercitiu: creati urmatoarele doua fisiere (test.html si test.css) n acelasi subdirector,
apoi vizualizati test.html:
test.html:
<html>
<head>
<title>
Pagina cu definitii externe de stil.
</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
Acest text este pentru test. Va rugam nu cititi.
</body>
</html>
test.css:
body
{
background-color: maroon;
color: aqua;
font-family: 'comic sans ms', arial;
font-size: larger;
font-style: oblique;
text-decoration: overline
}
Observati ca n antetul fisierului HTML, exista un tag <link>. Acest tag specifica o legatura
spre un alt fisier, de tip text/css; acest fisier contine detalii privind elementele de stil cu care
sa se afiseze pagina respectiva. Daca avem mai multe fisiere HTML pe acelasi site, putem
impune un stil, o tema (theme) comuna tuturor paginilor de pe site, adaugnd o legatura
ca mai sus n antetul fiecarui fisier HTML. Daca vrem sa schimbam ceva detalii de stil, este
destul sa modificam n fisierul extern care contine definitiile de stil, n cazul nostru test.css.
Mai observati ca numele fontului comic sans ms este ntre apostrofuri, deoarece are spatii n
nume. Functioneaza la fel de bine si cu ghilimele n loc de apostrofuri.
Stiluri interne
Stilurile interne au aceeasi sintaxa ca si cele externe, cu diferenta ca nu se pun n fisier
separat, ci n antetul fisierului HTML la care se refera. Se considera prioritare definitiile de
stil specificate cel mai recent.
Definitiile interne se pun n antetul fisierului HTML, toate ntr-un bloc ntre doua acolade si
tag-uri <style> si </style>.
Exercitiu: modificati fisierul test.html de mai sus, adaugnd blocul urmator dupa tagul <link>:
<style>
body {background-color: red; font-size: 30;}
</style>
Stiluri inline
Puteti aplica o definitie de stil unui singur element, de exemplu unui paragraf. n acest caz,
se introduc codurile de stil direct n tag-ul elementului respectiv.
Exercitiu: creati un paragraf nou n exemplul anterior, astfel:
<p style="color: yellow; font-size: 10">Acesta este un paragraf diferit.</p>
Antetul si meta
Antetul unui fisier HTML nu trebuie sa contina nici un text de afisat. Toata informatia de
afisat trebuie pusa n corpul fisierului. Totusi, browserele sunt destepte si ncearca sa
interpreteze informatiile din antet.
Exercitiu: scrieti un text oarecare n antet (ntre tag-urile <head> si </head>). Vizualizati.
Aceasta este o tehnica gresita de a scrie HTML!
Puteti avea elemente meta n antetul fisierului HTML. Aceste elemente meta sunt
informatii aditionale despre pagina, metainformatii; nu sunt afisate pe pagina.
De exemplu, puteti avea un element care contine o scurta descriere a paginii, pentru eventuale
aparitii n listele unor servere de cautare. Tot n acelasi scop, puteti introduce cuvinte-cheie ca
element meta.
Exemplu: puteti avea un element descriptiv si cuvinte-cheie n antetul paginii:
<meta name="description" content="Details about MegaRulment and other similar
products">
<meta name="keywords" content="MegaRulment, rulment, bile, otel, frecare redusa,
economic">
URL
URL, sau Universal Resource Locator este adresa unui document pe World Wide Web.
Formatul general al unui url este:
protocol://loginulmeu:parolamea@site.subdomeniu.domeniu:port/cale/numefisier
Protocol este numele protocolului prin care se poate ajunge la document.
Tabelul 1 Protocoale WWW
NUME
PROTOCOL
file
ftp
http
gopher
news
telnet
wais
mailto
LA CE SE REFERA
Un fisier pe calculatorul local.
Un fisier pe un server FTP (File Transfer Protocol).
Un fisier hipertext pe un server de Web (HyperText Transfer
Protocol)
Un fisier pe un server gopher.
Un grup de stiri Usenet.
Conexiune Telnet.
Un fisier pe un server WAIS.
Deschide un document e-mail nou spre adresa specificata.
Exercitiu: creati o legatura spre serverul FTP ftp.utcluj.ro, apoi o legatura care sa
deschida un nou e-mail spre enyedi@home.ro.
Loginulmeu:parolamea@ sunt necesare n cazul n care pentru a intra pe site, este nevoie
de login si parola aferenta. De obicei nu este cazul.
Site.subdomeniu.domeniu este ceva de genul tucows.dnttm.ro. Este numele propriu
serverului.
:portul este ca si un conector pe server, un numar care specifica serviciul cerut. De
exemplu, protocolul HTTP (pentru HTML) poate fi accesat pe portul 80 al unui server. De
obicei, numarul portului nu se specifica n adresa, doar daca serviciul respectiv este pe alt port
dect cel standard (de exemplu, daca serviciul HTTP nu este pe portul 80 al serverului
respectiv, ci pe portul 3000) . Serviciul FTP ruleaza (de obicei) pe portul 21 al unui server
(daca acest serviciu este instalat si pornit pe server).
Cale/numefisier arata calea exacta spre fisierul cerut. Pentru protocolul HTTP, daca nu se
specifica un fisier HTML, se considera implicit fisierul index.html de pe server (unele
servere considera default.html ca implicit).
13. Scripturi
Generalitati
Scripturile sunt mici programe nglobate n fisierul HTML. Un script este de fapt un text mai
special, o parte din textul din fisierul HTML. Cnd browserul ncarca fisierul HTML si
afiseaza pagina, n acelasi timp interpreteaza scriptul (sau scripturile) din pagina, si le
executa.
Scripturile dintr-o pagina de Web pot modifica dinamic pagina (de exemplu, sa schimbe
marimea fontului) la aparitia unor evenimente (de exemplu, un clic al mouse-ului), pot
verifica daca datele dintr-un formular sunt corecte etc.
Ca sa puneti un script n pagina HTML, puneti textul care constituie scriptul ntre tag-uri
<script> si </script>. Puteti folosi tag-urile aditionale <noscript> si </noscript> pentru
browsere care nu stiu sa lucreze cu scripturi.
JavaScript
JavaScript este un limbaj de script, adica un limbaj de programare simplificat. Se numeste
JavaScript pentru ca sintaxa acestui limbaj seamana foarte mult cu cea a limbajului de
programare Java. JavaScript este gratuit, si browserele majore (IE, Netscape) stiu sa proceseze
scripturile de acest tip dintr-o pagina care le contine.
</title>
</head>
<body>
<script type="text/javascript">
document.write("Avem text pe pagina!")
</script>
</body>
</html>
Observati ca tag-ul <script> are atributul type, care specifica tipul scriptului (exista si alte
tipuri, n afara de JavaScript). Acest script are o singura comanda, care scrie Avem text pe
pagina! pe pagina Web. Daca scrieti mai multe comenzi pe aceeasi linie, trebuie sa puneti ;
(punct-virgula) ntre comenzi.
Exercitiu: modificati scriptul, ca mai jos; explicati.
document.write("<i>"+"Avem text pe pagina!"+"<\/i>")
Punnd scriptul n tag-ul de comentariu, browserele care nu stiu JavaScript nu vor afisa pe
pagina textul scriptului (sursa scriptului). Browserele care stiu JavaScript vor procesa scriptul,
chiar daca e n comentariu. Sirul //, comentariu n JavaScript, spune browserului sa nu
proceseze linia -->. Nu putem pune la nceput //<!--, pentru ca un browser care nu stie
JavaScript ar afisa //.
Salvati si acest fisier, sub numele test.html, n directorul unde ati salvat extern,js. Vizualizati
test.html.
Cu atributul src al tag-ului <script>, puteti specifica un fisier cu scriptul care sa fie
executat.
Variabile
Ca n orice limbaj de programare, puteti avea variabile n JavaScript. n exemplul urmator,
se defineste variabila textul, si se si initializeaza cu valoarea Textul interesant. n numele
variabilelor JavaScript, se face diferenta ntre literele mici si mari, adica textul este alta
variabila dect Textul. Similara este situatia si pentru functii si obiecte.
Exercitiu: creati si vizualizati urmatoarea pagina:
<html>
<head>
<title>
Pagina cu JavaScript
</title>
</head>
<body>
<script type="text/javascript">
<!-var textul = "Textul interesant"
document.write("<i>"+textul+"<\/i>")
//-->
</script>
</body>
</html>
Functii
Exemplu: creati si vizualizati urmatoarea pagina:
<html>
<head>
<title>
Pagina cu JavaScript
</title>
</head>
<body>
<script type="text/javascript">
<!-var textul = "Textul interesant"
document.write("<i>"+textul+"<\/i>")
alert(textul)
//-->
</script>
</body>
</html>
Executie conditionata
Exercitiu: introduceti urmatoarea bucata de script n scriptul dvs., apoi vizualizati:
if (navigator.appName.indexOf("Internet Explorer")!=-1)
{
alert("Este Internet Explorer!")
}
else
{
alert("Nu este Internet Explorer!")
}
Aceasta bucata de cod afiseaza o casuta de alerta, cu textul n functie de tipul browserului n
care este afisata pagina. Conditia pentru IF: se cauta textul Internet Explorer n numele
aplicatiei browser (navigator). Daca acest text nu apare n numele browserului, functia
indexOf returneaza -1. Conditia pentru IF este adevarata doar daca aceasta functie NU
returneaza -1 (operatorul != nseamna diferit). n acest caz, se executa comenzile din
blocul IF. Cnd conditia este falsa, se executa comenzile din blocul else.
Aveti si alte comenzi pentru conditionare n JavaScript, cum ar fi switch sau operatorul
conditional ?.
Bucle
Exercitiu: creati si vizualizati pagina cu urmatorul continut:
<html>
<head>
<title>
Pagina cu bucle
</title>
<script type="text/javascript">
</script>
</head>
<body>
<script type="text/javascript">
<!-for (i=0; i<20; i++)
{
document.write("valoarea lui i: "+i+"<br>")
}
//-->
</script>
</body>
</html>
Exemplul de mai sus scrie n document valorile lui i, repetnd acest lucru pna cnd i
ajunge la 19.
Puteti folosi si bucle while sau do...while n JavaScript.
Exemplul de mai sus prezinta o bucata de cod JavaScript inline, adica fara tag-urile <script>
si </script>. La evenimentul onclick, adica n momentul cnd se da clic pe buton, se
apeleaza functia open (din grupul de functii window), cu parametrii aferenti. Aceasta
functie face ca la apasarea pe buton, sa se ncarce pagina ProTV n fereastra cu numele intern
fereastra_noua.
Mai multe informatii si exemple puteti gasi la adresa
http://www.w3schools.com/js/default.asp, precum si multe alte exemple la
http://javascript.internet.com.
VBScript
Cum JavaScript seamana cu limbajul Java, asa si VBScript seamana cu limbajul Visual Basic,
inventie Microsoft. Din acest motiv, VBScript functioneaza numai cu browserul Internet
Explorer, care este tot un produs Microsoft.
VBScript seamana oarecum cu JavaScript.
Exercitiu: creati si vizualizati pagina cu continutul de mai jos:
<html>
<head>
<title>
Pagina cu bucle
</title>
</head>
<body>
<script type="text/vbscript">
<!-document.write("valoarea lui i: ")
//-->
</script>
</body>
</html>
Scripturile VBScript se pot pune n antet, n corp sau n fisier extern, ca si cele JavaScript. n
VBScript, avem subrutine si functii. Subrutinele nu returneaza nimic, functiile, da. Numele
unor functii difera fata de perechea lor din JavaScript, altele sunt similare; apar si functii noi.
Exercitiu: creati si vizualizati pagina cu continutul de mai jos:
<html>
<head>
<title>
Pagina cu bucle
</title>
</head>
<body>
<script type="text/vbscript">
<!-msgbox ("Casuta VBScript!")
//-->
</script>
</body>
</html>
DHTML
DHTML vine de la Dynamic HTML, si se refera la pagini dinamice, adica pagini de Web a
caror continut se schimba dinamic.
Nu exista un limbaj DHTML; el este un concept, un mix ntre HTML, JavaScript si stiluri
CSS. El se bazeaza pe DOM (Document Object Model), o teorie care descrie structura
obiectuala a paginii de Web si evenimentele care pot apare.
Exercitiu: creati si vizualizati pagina cu continutul de mai jos:
<html>
<head>
<title>
Pagina dinamica
</title>
</head>
<body>
<!-- Paragraf cu identificatorul "paragraf_de_test" -->
<p id="paragraf_de_test">
Acesta este un paragraf de test.
</p>
<!-- Un script explicit -->
<script language="JavaScript" type="text/javascript">
paragraf_de_test.style.color="red"
</script>
<form>
<!-- JavaScript inline, direct in tag -->
<!-- Alinierea -->
<input type="button" value="Aliniaza stanga"
onclick="paragraf_de_test.style.textAlign='left'">
<input type="button" value="Aliniaza dreapta"
onclick="paragraf_de_test.style.textAlign='right'"><br>
<!-- Culoarea -->
<input type="button" value="Culoare albastra"
onclick="paragraf_de_test.style.color='blue'">
<input type="button" value="Culoare rosie"
onclick="paragraf_de_test.style.color='red'">
<input type="button" value="Culoare alba"
onclick="paragraf_de_test.style.color='white'">
</form>
</body>
</html>
De la http://javascript.internet.com/time-date/mouse-trail-clock.html
Clic aici sa incarcati pagina locala cu scriptul.
De la http://javascript.internet.com/math-related/basic.html
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original:
http://ncgoddess.com/script.html -->
<script language="JavaScript">
dCol='000000';//date colour.
fCol='000000';//face colour.
sCol='000000';//seconds colour.
mCol='000000';//minutes colour.
hCol='000000';//hours colour.
ClockHeight=40;
ClockWidth=40;
ClockFromMouseY=0;
ClockFromMouseX=100;
d=new
Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY
");
m=new
Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SE
PTEMBER","OCTOBER","NOVEMBER","DECEMBER");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < 2000) year=year+1900;
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 10 11 12';
font='Arial';
size=1;
speed=0.6;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
if (ie){
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';textalign:center">'+props2+D[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';textalign:center">'+props+Face[i]+'</B></font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours"
style="position:absolute;width:16px;height:16px;font-family:Arial;fontsize:16px;color:'+hCol+';text-align:center;fontweight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes"
style="position:absolute;width:16px;height:16px;font-family:Arial;fontsize:16px;color:'+mCol+';text-align:center;fontweight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds"
style="position:absolute;width:16px;height:16px;font-family:Arial;fontsize:16px;color:'+sCol+';text-align:center;fontweight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1.57 + Math.PI * secs/30;
mins = time.getMinutes();
min = -1.57 + Math.PI * mins/30;
hr = time.getHours();
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] +
ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',20);
}
if (ns||ie)window.onload=Delay;
</script>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
months[11] = "November";
months[12] = "December";
var dateObj = new Date(document.lastModified)
var wday = days[dateObj.getDay() + 1]
var lmonth = months[dateObj.getMonth() + 1]
var date = dateObj.getDate()
var fyear = dateObj.getYear()
if (fyear < 2000)
fyear = fyear + 1900
document.write("Page last updated " + wday + ", " + lmonth + " " + date + ",
" + fyear + ".")
// End -->
</script>
<br>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=949278;
var sc_invisible=1;
var sc_partition=7;
var sc_security="41485ccc";
</script>
<script type="text/javascript" language="javascript"
src="http://www.statcounter.com/counter/frames.js"></script><noscript><a
href="http://www.statcounter.com/" target="_blank"><img
src="http://c8.statcounter.com/counter.php?sc_project=949278&java=0&
;security=41485ccc&invisible=1" alt="unique visitor counter"
border="0"></a> </noscript>
<!-- End of StatCounter Code -->
<br>
</div>
</body>
<!-- #EndTemplate --></html>
14. Appleturi
Scripturile ofera o interfata usor de programat, mai ales ca pur si simplu se scriu n fisierul
HTML, fara a fi nevoie de compilare sau preprocesare a scriptului.
Totusi, scripturile au unele limitari; din aceasta cauza, pentru lucruri mai complexe, se
creeaza programe, bazate pe Java, un limbaj de programare puternic. Sintaxa este
asemanatoare cu cea a lui JavaScript; de fapt, JavaScript a mprumutat sintaxa de la limbajul
Java.
Programele Java se scriu n format text, salvndu-se cu extensia .java. Apoi, se proceseaza
cu ajutorul unui program special, numit compilator. Din acest procedeu, rezulta programele
Java compilate, care sunt de fapt fisiere cu extensia .class.
Programele Java care apar pe pagini de Web se numesc applet.
Pentru ca browserul sa ncarce appletul n pagina, se scrie n fisierul HTML un tag care
specifica ce applet si cu ce parametri sa se ncarce.
Exemplu: bucata de cod de mai jos instruieste browserul sa includa pe pagina appletul:
<applet code="appletulmeu.class" codebase="http://www.serverulmeu.com/appleturi"
alt="Animatie Java" width=480 height=84>
<param name="viteza" value="100">
<img src="animatie.gif" alt="Animatie" width=100 height=100>
</applet>
Flash
Macromedia Flash este un limbaj de programare specific Web-ului. Ca si applet-urile,
fisierele .swf pot fi afisate pe pagini Web, facndu-se referire la ele din fisiere HTML.
Acest limbaj este foarte puternic, putndu-se face, printre altele, animatii atractive, cu fisiere
Flash mai mici ca un applet. Statistic, firma Macromedia sustine ca 95% din browserele
instalate stiu sa interpreteze Flash.
Din fericire, programul Macromedia Flash ne permite sa cream aceste module Flash cu
ajutorul unor dialoguri. De fapt, n asta consta puterea si popularitatea lui Flash posibilitatea
de creare a unor animatii, fara cunostinte de programare.
Macromedia Flash contine lectii extinse despre ce si cum se poate crea n Flash. Puteti chiar
genera o pagina de test pentru modulul Flash pe care l-ati creat.
Cnd ati creat o animatie, de exemplu, puteti sa o exportati din Flash, sa zicem sub numele
test.swf. Dupa aceea, puteti crea un fisier HTML care include:
<object width="400" height="300">
<param name="movie" value="test.swf">
n exemplul de mai sus, tag-ul <object> este recunoscut de Internet Explorer, dar nu este
recunoscut de Netscape. De aceea folosim si tag-ul <embed> (pentru Netscape).
Puteti publica un fisier HTML continnd modulul Flash, direct din Flash. Macromedia
Flash va genera un fisier HTML care include si tag-urile necesare includerii modulului Flash
n pagina. Mai mult, include si legaturi alternative spre interpretorul Flash de pe situl
Macromedia, daca browserul care afiseaza pagina nu stie Flash.
15. CGI
CGI (Common Gateway Interface) este un mecanism prin care clientii (browserele) pot
trimite informatii napoi la server, si serverul poate trimite e-mail clientului cu datele cerute.
De obicei, CGI se foloseste pentru procesarea datelor dintr-un formular trimis de browser, si
se specifica n atributul action al unui formular.
Datele din formular sunt trimise la server la apasarea butonului Submit, sub forma unui sir
de caractere: numescript?numevar1=valoarevar1&numevar2=valoarevar2.
n exemplul de mai sus, se trimite serverului numele scriptului CGI care trebuie executat
(specificat n atributul action al formularului), mpreuna cu numele variabilelor si valorile
lor din formular. Scriptul de pe server le primeste si le proceseaza, apoi trimite un mail
utilizatorului cu rezultatele. n esenta, scriptul CGI trebuie sa faca trei lucruri:
sa interpreteze sirul primit ca parametru, si sa scoata din el variabilele si valorile lor
(daca este vorba de datele dintr-un formular);
sa proceseze aceste date;
sa trimita e-mail la o adresa anume, cu datele rezultate din urma procesarii, eventual sa
genereze o pagina de Web.
Scripturile CGI de pe un server se tin, de obicei, n subdirectorul cgi-bin. Majoritatea
scripturilor CGI la ora actuala de pe Internet sunt scrise n limbajul Perl, dar exista scripturi
CGI si n C, Java (servlets) si alte limbaje. Desigur, serverul de Web trebuie sa ofere suport
pentru CGI.
Puteti gasi multe scripturi CGI si documentatie la adresele http://www.cgiextremes.com,
http://www.cgiscriptcenter.com, http://www.cgi-resources.com si altele.
SSI
Serverul poate genera dinamic, din zbor, fisiere HTML pe care sa le trimita clientului spre
afisare, n functie de datele trimise/cerute de client. Acest lucru se poate realiza cu SSI
(Server-Side Includes). SSI este un limbaj prin care se poate crea dinamic continutul paginii
de Web trimis la client. Nu toate serverele de Web ofera suport pentru SSI.
De exemplu, pentru a include un antet la fiecare pagina afisata de browser, puteti scrie n
fisierul HTML, n corp, la nceput:
Exemplu:
<pre>
<!--#include file="antet.txt" -->
</pre>
Observati sintaxa comenzii SSI: <!--#include file=antet.txt -->. Cnd un client cere
aceasta pagina, serverul proceseaza comanda si trimite clientului fisierul HTML, dar n locul
acestui comentariu (inclusiv < si >), fisierul HTML va contine textul din antet.txt.
Comenzile SSI sunt invizibile la client, deoarece clientul (browserul) primeste doar rezultatul
procesarii acestor comenzi.
Exemplu:
<!--#flastmod file="index.html" -->
Exemplul de mai sus va include n pagina data ultimei modificari ale fisierului index.html.
Serverul, nainte de trimiterea fisierului HTML spre client, se uita la data ultimei modificari
ale fisierului pe harddisc, si include aceasta data n locul comentariilor. O varianta la
exemplul de mai sus, pentru includerea datei ultimei modificari a fisierului n care este
comanda SSI (fisierul curent):
<!--#echo var="LAST_MODIFIED" -->
Exista si alte comenzi SSI, puteti sa Fisierele HTML care contin si comenzi SSI au de obicei
extensia .shtml; n acest fel, serverul nu trebuie sa proceseze toate fisierele HTML pe care
le trimite, doar cele cu aceasta extensie speciala.
Gasiti o introducere scurta de SSI la
ASP
ASP Active Server Pages seamana cu SSI, ca idee, dar este mult mai complex. Este
caracteristic serverelor de Web produse de Microsoft. Ca si JavaScript si VBScript, si ASP
nseamna scripturi. Diferenta este ca n timp ce scripturile pe partea de client sunt trimise
clientului (de obicei nglobate n HTML), si acesta le proceseaza local, ASP este procesat de
catre server, si numai rezultatele sunt incluse si trimise clientului n fisierul HTML. Fisierele
de pe server care contin cod ASP au de obicei extensia .asp, tocmai pentru a usura munca
serverului, ca acesta sa nu proceseze degeaba toate fisierele care trebuie sa le trimita. Putem
folosi mai multe limbaje de script pentru ASP. Nu toate serverele suporta ASP.
Exemplu:
<html>
<body>
<%
response.write("Text de test.")
%>
</body>
</html>
Exemplul de mai sus este n VBScript (limbajul implicit pentru ASP). La cererea acestei
pagini de catre un client, serverul nlocuieste tag-ul <% %> si ce contine el cu textul Text de
test. Observati felul cum sunt introduse comenzile ASP n sursa HTML ntre <% si
%>. Clientul va primi:
<html>
<body>
Text de test.
</body>
</html>
Exemplul de mai sus face acelasi lucru ca si cel anterior, dar este scris n JavaScript. La
nceputul fisierului, se specifica javascript ca limbajul implicit pentru acest fisier. Daca
lucram cu JavaScript, acesta face diferenta ntre literele mari si mici, nu ca VBScript. Se pot
folosi si alte limbaje de script, dar trebuie instalate interpretoarele aferente pe server (pe client
nu este nevoie, deoarece acesta primeste doar rezultatul).
PHP
PHP original Personal HomePage, apoi i s-a lipit si eticheta de preprocesor de hipertext.
Este un limbaj asemanator C-ului, si se utilizeaza similar ASP-ului. Este dezvoltare Apache si
complet gratuit. Exista interpretoare de PHP pentru multe servere de Web, chiar si pentru
servere produse de Microsoft.
De regula, fisierele HTML care contin cod PHP au extensia .php, sau variante (.php3,
.php4, dupa versiunea de PHP), ca serverul sa le poata deosebi de fisierele HTML inactive
(fara cod de program care trebuie procesat de server).
Exemplu:
<html>
<body>
<?php
echo "Text de test.<br>";
?>
</body>
</html>
Exemplul de mai sus scrie n fisierul HTML Text de test, apoi <br>. Observati modul
introducerii comenzii PHP n sursa HTML, ntre <?php si ?>. Se poate omite php.
Exemplul urmator va prezinta un formular dintr-o pagina de web, si pagina PHP care este
accesata la apasarea butonului Submit:
Formularul din pagina HTML:
<form action="raspuns.php" method="post">
Valoarea de trimis <input type="text" name="val">
<input type="submit">
</form>
Pagina raspuns.php:
<html>
<head>
<title>Pagina de raspuns</title>
</head>
<body>
Servere de Web
Serverele de Web sunt programe care ruleaza pe un calculator, asculta pentru si servesc
cererile clientilor. Cererile clientilor nseamna ca un browser de pe un calculator din Internet
se conecteaza la calculatorul pe care ruleaza serverul de Web, si i cere un fisier HTML.
Serverul ia fisierul de pe harddisc, eventual l proceseaza, si l trimite clientului, care apoi l
proceseaza si l afiseaza. Fisierul HTML implicit este de obicei index.html; de obicei, cnd
va conectati la un site, de exemplu http://www.ccicj.ro, serverul de acolo trimite implicit
fisierul index.html.
Astfel de programe exista n mai multe variante, chiar si gratuite, pe Internet. Unele sunt
mai simple, altele mai complexe; unele suporta SSI, ASP si/sau PHP, altele nu. Unele sunt
mai configurabile, altele mai putin.
Un server de Web gratuit pentru Windows 95/98 si Windows NT 4 este PWS, Personal Web
Server. Acesta este inclus n pachetul de instalare Windows 98, n subdirectorul PWS din
pachet. Pentru Windows 95 si Windows NT 4, puteti sa aduceti pachetul Windows NT 4
Option
Pack
de
pe
situl
Microsoft
(http://www.microsoft.com/msdownload/ntoptionpack/askwiz.asp), si sa instalati PWS din el.
PWS stie sa lucreze cu pagini ASP si SSI.
IIS Internet Information Server este serverul de Web standard pentru Windows 2000, sau
se poate instala separat pentru Windows NT Server 4.0. Este foarte puternic si configurabil,
cu suport ASP si SSI nglobat.
Un alt server performant, gratuit si standard nescris pentru serverele Linux este Apache.
Puteti sa-l aduceti (chiar si codul sursa al serverului) de la http://www.apache.org. Apache are
si versiune Win32 pentru Windows 9x, NT sau 2K. Este rapid, si suporta SSI, precum si PHP.
Problema cu un server de Web propriu este ca serverul si calculatorul pe care ruleaza,
precum si legatura la Internet trebuie sa fie activa 24/7, adica tot timpul, zi si noapte. O
solutie mai ieftina ar fi sa va plasati fisierele HTML care compun situl, pe un server dedicat,
comercial sau gratuit.
Sunt cteva IPP-uri (Internet Presence Provider) comerciale, cum ar fi Dynamic Network
Technologies (http://www.dnt.ro sau http://www.dntcj.ro), Romanian Data Soft
(http://www.rds.ro), Astral Telecom (fost Codec, http://www.astral.ro), Logicnet
(http://www.logicnet.ro), XNet (http://www.xnet.ro) si altele. Puteti afla serviciile oferite,
conditiile si preturile acestor firme de pe siturile lor. Vizitati si pagina Asociatiei Nationala a
Furnizorilor de Servicii Internet din Romnia (http://www.anisp.ro).
Gratuite sunt si mai multe, unele dintre cele mai cunoscute internationale fiind Geocities
(http://www.geocities.com) si Homestead (http://www.homestead.com).
Situri romnesti care gazduiesc gratuit paginile dvs. de HTML ar fi Home.ro
(http://www.home.ro),
Problema cu siturile gratuite este ca ele pun publicitate nedorita pe pagina dvs. trebuie sa
traiasca si ele din ceva.
( http://193.226.6.120/Szilard/Teaching/CursInternet/Curs1/cautare.html )