Avizat, Aprob,

Funcționar de securitate Director

INTRODUCERE IN HTML

HTML e limbajul în care sunt scrise paginile web. Paginile web sunt fisiere cu
extensia .html sau .htm care rezida, de obicei, pe serverele de internet, dar care pot
rezida si pe calculatorul dumneavoastra.

HTML e acronimul de la HyperText Markup Language, care e numele unui limbaj de

marcare ce a înlocuit SGML-ul. A fost conceput în 1989 de Tim Berners-Lee (v.
foto) , licentiat la Oxford, pe atunci fizician la CERN. Fiind si expert în software,
Berners-Lee e acum director al World Wide WEb Consortium ( pe scurt, W3C ),
adica al organizatiei care coordoneaza dezvoltarea web-ului ( în principal, prin
impunerea de standarde pentru limbaje etc. ). HTML-ul a cunoscut o popularitate
rapidã, aproape toate paginile web fiind scrise în acest limbaj.

Fiind un limbaj de marcare, HTML nu utilizeaza instructiuni ( ca Pascal-ul sau C-ul )

ori comenzi ( ca Fox-ul ), ci etichete, acestea fiind numite si balize, elemente sau tag-
uri. Sintaxa oricarui tag este:

<TAG atribut1="val" atribut2="val">Text</TAG>

In unele cazuri, atributele pot lipsi. In altele, poate lipsi tag-ul de închidere: </TAG> O
pagina web poate contine:

 text
 imagini
 fisiere audio
 fisiere video

Paginile web se vizualizeazã în browsere, care sunt niste programe de vizitare. Cele
mai populare browsere sunt:
 Netscape Navigator, care a cunoscut mai multe versiuni, cele mai reusite fiind
4.75 si 4.76 care aveau, totusi, defectul ca nu suportau diacriticele. Acestora
le-a urmat versiunea 6.0 care suporta diacriticele.
 Microsoft Internet Explorer, care a ajuns la versiunea 6.2.

In 2001, a aparut browserul Opera, deocamdatã putin folosit. Unii folosesc Lynx care,
fiind un browser negrafic, nu recunoaste imaginile, ceea ce duce la o încarcare mult
mai rapida a textului. Informatii suplimentare despre browsere gasiti la adresa
[Link]

Orice browser prezinta, în partea de sus, o fereastra îngusta în care se tasteaza

adresa paginii web cautate. Un exemplu de adresa ar fi: [Link]
sau [Link]

Dupa tastarea adresei si apasarea tastei "Enter", browserul dvs. îi trimite serverului
[Link] cererea de a i se furniza o pagina web. In cazul a, serverul trimite
pagina sa proprie. In cazul b, trimite pagina [Link] a sitului dioan12 pe care îl
gazduieste gratuit. In cazul b, ar fi trimis fisierul [Link] si daca tastam doar:
[Link] deoarece, în mod implicit, la accesarea unui sit se
încarcã fisierul [Link]. ( Nota: Nestiind ce sistem de operare e instalat pe
serverul pe care intentioneaza sa faca upload-ul sitului propriu, unii webdesigneri
salveaza fisierul [Link] si ca [Link], [Link], [Link]. Dupa care fac
upload-ul tuturor acestor fisiere, urmând ca serverul sa furnizeze clientilor, la
accesarea sitului, unul dintre aceste 4 fisiere. Daca sunteti începator, nu va bateti
însa prea tare capul cu aceste chestiuni.)

Vom folosi, în paginile urmatoare, termenul de sit si nu cel de site, din urmatoarele
motive:

1. Etimonul sau este latinescul situs, care desemna un loc geografic.

2. Varianta sit e prima aparuta în limba româna. Figureaza, de exemplu, în
cartea "Omul sau natura?" de Edouard Bonnefous ( Editura Politica, Bucuresti,
1976, traducator Adrian Costa, ), iar în anii '80, era vehiculata în presa
culturala din România. Circulatia sa era, asadar, restrânsa la mediile cultivate,
în timp ce varianta site e folosita azi pe scara larga.

Intr-un fisier html, se pot include:

 programe în JavaScript
 scripturi CSS
 tag-uri care sa seteze parametrii unui applet ( program scris în Java si care
rezida pe retea )

Un fisier html se poate realiza:

 manual, scriind tag dupã tag în Notepad
 cu ajutorul editoarelor HTML precum Homesite, Adobe Golive, Microsoft
Frontpage '98 sau 2000, Macromedia Dreamweaver ( aplicatia cea mai
apreciata de profesionisti ), CoffeeCup HTML Editor , Netscape Composer
( recomandat doar începatorilor ), NoteTab Light sau 1st Page 2000 . Ultimile
trei sunt distribuite freeware ( gratuit ). Dealtfel, de pe siturile de download
puteti descãrca un mare numãr de editoare HTML, unele în regim freeware,
altele în regim shareware. Editoarele vã usureazã munca, dar nu vã învatã
HTML, asã cã e de dorit sã le evitati la începutul activitãtii dvs. de
webdesigner. Cum realizãm prima paginã web ?
 Alocati un director sitului pe care intentionati sã-l realizati.
 Click pe butonul Start, apoi pe Programs, Accessories, Noteped.
 Introduceti textul si etichetele.
 Salvati fisierul cu extensia .htm sau .html în directorul dedicat. Fisierul
va apãrea ca, sã zicem, [Link].
 Deschideti fisierul [Link] în Microsoft Internet Explorer. Pentru a
aduce modificari fisierului, executati click-dreapta pe suprafata acestuia
si veti obţine codul-sursa. Dupa modificarea fisierului, salvati-l.

Douã ultime observatii:

1. HTML-ul e independent de platformã.

2. HTML-ul nu e un limbaj case-sensitive, asa cã putem scrie la fel de
bine <BODY>, <body>, <BOdy> sau <boDy> etc., pentru ca în HTML
nu se face distinctia între literele mari si cele mici.

ANCORA
Este una dintre cele mai importante etichete. Produce legarea de altã paginã a
elementului încadrat.

Exemplul 1:

<a href="texte/[Link]" target="new" title="CV-ul meu"> Click aici !</a>

Intre primele douã ghilimele e datã calea pânã la documentul-tintã, în cazul nostru
fisierul [Link] din directorul texte. Acest fisier va fi deschis în fereastra numitã
"new". Aceastã fereastrã poate fi una deja existentã sau una creatã pe loc. Dacã
atributul target lipseste, fisierul [Link] va fi deschis în fereastra fisierului apelant,
adicã în locul paginii în care vã aflati. Atributul title produce aparitia unui dreptunghi
continând un text, atunci când mouse-ul trece peste un link. In cazul nostru, textul va
fi "CV-ul meu". Iatã link-ul: Click aici !

Exemplul 2:

<a href="[Link] Click aici !</a>

Aceastã secventã de cod produce aparitia urmãtorului link: Click aici! Prin click, vom
ajunge în situl cu adresa [Link] Se observã folosirea adresãrii absolute,
nu a celei relative, ca în exemplul de mai sus, unde tinta e o paginã din acelasi sit
web.

Exemplul 3:

<a name="sus">Orar</a>
Legarea paginilor web
Legarea paginilor web intre ele Legarea paginilor web intre ele Legarea paginilor web
intre ele Legarea paginilor web intre ele
Legaturi intre pagini
<a href="#sus">Link</a>
Prima si ultima linie vã ajutã sã navigati în interiorul unei pagini. Dacã pagina e
lungã, e bine sã punem lângã titlu o ancorã ( numita "sus" în exemplul 2 ), iar în
partea de jos un link cãtre titlu. Cu un click pe link, veti ajunge, fãrã scroll, în partea
de sus a paginii. Cuvântul "Link" poate fi înlocuit de o imagine sugestivã, cum ar fi o
sãgeatã.

Exemplul 4:

<H1 id="sus">Ancora</H1>
Ancora in HTML Ancora in HTML Ancora in HTML
ancora ancora ancora
<a href="sus">Link</a>
Aceastã secventã de cod realizeazã, ca si precedenta, navigarea în interiorul
aceleiasi pagini. Se observã cã ancora e introdusã în elementul <h1>.

Exemplul 5:

<a href="[Link] Ioan</a>

In acest fel, se realizeazã trimiterea unui e-mail la adresa precizatã: Daniela Ioan. Se
observã cã ancora nu e folositã aici pentru legarea unor pagini web între ele.

Exemplul 6:

<a href="[Link]
<img src="[Link]">
</a>
O imagine poate constitui un link. Imaginea poate fi un banner precum cel de mai jos,
o fotografie etc. Executând click pe aceastã imagine, ajungem în pagina web cu
adresa [Link] Atributele tag-ului <img> vor fi discutate în pagina
dedicatã acestui articol. Asadar, elementul <a> suportã urmãtoarele atribute:
 Atributul href indicã URL-ul fisierului ( adresa acestuia ). Adresa poate fi
absolutã sau relativã.
 Atributul type indicã tipul fisierului ( .html, audio, video etc. )
 Atributul title furnizeazã o scurtã descriere a fisierului.
 Atributul target precizeazã fereastra în care va fi încãrcat fisierul. Sunt curente
urmãtoarele notatii:
 o target="_blank" : fisierul se încarcã într-o nouã fereastrã, fãrã nume
o target="_self" : fisierul se încarcã în fereastra curentã
o target="_top" : fisierul se încarcã în întreaga fereastrã a navigatorului,
neîmpãrtitã în frames
o target="_parent": fisierul se încarcã în fereastra ce e pãrintele ferestrei
care contine link-ul

Cuvintele parent, top, self, blank sunt cuvinte rezervate.

 Atributul name marcheazã destinatia link-ului. Folosit, de obicei, pentru

navigarea în cadrul aceleiasi pagini.
 Atributul hreflang precizeazã limba în care e scris fisierul legat. Atribut putin
uzual.
 Atributul accesskey ia o valoare care este un caracter. Link-ul poate fi
accesat apãsând simultan tasta "Alt" si tasta corespunzãtoare caracterului
respectiv.
 Atributul style ajutã la realizarea unui control mai fin asupra link-ului, a cãrui
culoare poate fi setatã astfel. Evident, aceasta presupune folosirea CSS.

<HTML>,< HEAD>,< TITLE>§ <html>

Orice fisier începe cu eticheta <html> si se terminã cu eticheta </html>. Fisierul e
compus din:
1. header, inclus între etichetele <head> si </head>
2. corp, inclus între etichetele <body> si </body>

In linii mari, un fisier numit [Link] va arãta ca în dreptunghiul alãturat. Din toate
aceste linii de cod, browserul va afisa doar: Bla-bla-bla. Textul "Pagina lui Georgica"
nu va apãrea în paginã, ci în bara de titlu ( deasupra meniurilor ).

Exemplu:

<html>
<head><title>Pagina lui Georgica</title></head>
<body>
Bla-bla-bla
</body>
</html>

§ <title>
Dacã etichetele <title> si </title> sunt continute în head, între acestea se va trece
numele fisierului. Acest nume nu va fi afisat în fereastrã, ci deasupra barei de
meniuri. Dar title poate fi întâlnit nu numai ca tag propriu-zis, ci si ca atribut al unui
alt tag, asa cum puteti vedea mai jos.

Exemplu:

<a href="[Link]" title="Cuprinsul manualului de HTML">Link</a>

Rezultatul este urmãtorul: Link. Explicatia "Cuprinsul manualului de HTML" apare ca
tooltip, în browserul Internet Explorer, la trecerea mouse-ului peste link.

TAG-UL <BODY>

§ <body>

Tag-ul <body> nu poate lipsi din nici o paginã web.

Exemplul 1:

<body bgcolor="#C0C0C0" link="red" alink="blue" vlink="green" text="black">

Culoarea paginii va fi gri ( stabilitã prin bgcolor="#C0C0C0" ), link-urile vor fi rosii,
link-ul activ albastru iar link-urile vizitate verzi. Textul va fi afisat cu negru. De multe
ori , nu se precizeazã culoarea fundalului/textului/link-urilor, ceea ce conduce la
afisarea u nui fundal alb, a unor fonturi negre si a unor link-uri albastre. Aceasta e
setarea implicitã. Se observã cã orice culoare poate fi exprimatã atât printr-un
cuvânt, cât si printr-un set de 6 caractere precedate de diez ( # ).

Aceastã notatie se datoreazã existentei unui sistem bazat pe rosu, verde si albastru (
Red, Green, Blue ). Sistemul se numeste RGB. In acest sistem, fiecare componentã
are o valoare cuprinsã între 00 si FF. Impreunã, valorile celor trei componente
alcãtuiesc un sistem de 6 caractere. Tag-ul de sus poate fi scris si ca:

<body bgcolor="#C0C0C0" link="#FF0000" alink="#0000FF" vlink="#008000"

text="#000000">

Exemplul 2:

<body background="imag/[Link]">
Fundalul paginii e o imagine ( [Link] din directorul imag ).

Exemplul 3:
Dacã, în plus, dorim ca imaginea de fundal sã nu se deplaseze când navigãm de-a
lungul paginii, vom scrie:

<body background="imag/[Link]" bgproperties="fixed">

Exemplul 4:
Pentru a seta marginile de sus si de jos ale paginii la valorile de 5, respectiv 10 pixeli,
vom scrie:

<body topmargin="5" bottommargin="10">

Topmargin ne da distanta dintre partea de sus a paginii si partea de sus a ferestrei.
Bottommargin distanta dintre partea de jos a paginii si partea de jos a ferestrei.
Leftmargin ne da distanta dintre partea din stanga a paginii si partea din stanga a
ferestrei. In mod obisnuit, aceste atribute ale tagului <body> iau valori nule, astfel
încât textul si imaginile sã umple tot spatiul ferestrei. Pentru a va lamuri in privinta
acetor atribute, realizati o pagina web cu foarte mult text si dati diferite valori
atributelor discutate. Bineînteles, toate aceste caracteristici pot fi setate în cadrul
aceluiasi tag <body>:
<body background="." link="." alink="" vlink="." text="." bgproperties="."
topmargin="." bottommargin=".">
Intre ghilimele, se va trece valoarea fiecarui atribut.

FORMATAREA TEXTELOR
Exemplul 1:
<font face="Arial" size="7" color="steelblue">Font Font Font Font Font</font>

Atributul face ia o valoare care e numele fontului. Atributul size indicã mãrimea
corpului de literã si poate lua valori între 1 si 7, valoarea implicitã fiind 3. Atributul
color precizeazã culoarea [Link] culorilor poate fi gãsit la [Link].
Pentru ca un anumit tip de fonturi sã poatã fi afisat în paginã, trebuie ca acesta sã fi
fost instalat deja pe calculatorul vizitatorului. De aceea, desi webdesigner-ii produc
neîncetat noi tipuri de font, e de dorit sã folositi în paginile dvs. fonturile obisnuite
(Times New Roman, Arial, Courier, Impact ). Efectul secventei de cod de mai sus:
Font Font Font Font Font

Exemplul 2:

<font size=1>1</font>
<font size=2>2</font>
<font size=3>3</font>
<font size=4>4</font>
<font size=5>5</font>
<font size=6>6</font>
<font size=7>7</font>

Efectul este:

1234567

Exemplul 3:

<font face="Arial">Arial</font>
<font face="Impact">Impact</font>
<font face="Courier">Courier</font>
<font face="Comic Sans MS">Comic Sans MS</font>
Efectul este afisarea a diferite tipuri de fonturi: Arial, Impact, Courier, Comic Sans
MS. Acestea sunt fonturi comune, ce pot fi afisate de orice PC. Pe lângã acestea,
puteti gãsi pe web nenumãrate alte tipuri de font, gratuite sau nu. Se recomandã
prudentã fatã de acestea, deoarece vizitatorul va trebui mai întâi sã instaleze pe PC-
ul sãu noul font, abia apoi urmând afisarea paginii. Dacã pagina dvs. e foarte
interesantã, e posibil sã facã acest lucru. Dar nu e bine sã contati pe rãbdarea sa. O
clasificare a fonturilor in serifate, neserifate samd gasiti în aceastã paginã. In
general, se recomandã prudentã în folosirea atributului face.

Exemplul 4:

<font face="ABC,Impact,Arial" size="7" color="steelblue">Font</font>

Efect: Font.
Fontul ABC nu existã. L-am introdus însã din necesitãti de ordin didactic. In locul
sãu, puteti introduce orice alt nume de font. Dar pe lângã ABC, am precizat alte douã
nume de fonturi (Impact si Arial). De ce ? Cum pe masina dvs nu e instalat tipul ABC,
browser-ul va afisa textul cu Impact. Dacã nici acesta nu ar fi fost instalat, s-ar fi
recurs la al treilea tip de fonturi ( în cazul nostru, Arial ).

§ <H1>...<H6>
Aceste tag-uri seteazã mãrimea fonturilor. Tag-ul <H1> e cel mai mare, iar <H6> e
cel mai mic.

h1

h2

h3

h4
h5

h6

Caracterele cuprinse între <h1> ( sau <h2> etc ) si tag-ul corespunzãtor de închidere
vor apãrea îngrosate, iar textul ce urmeazã tag-ului de închidere va trece automat
douã rânduri mai jos. De aceea, aceste tag-uri sunt recomandate pentru titluri si
subtitluri.

§ <b>
Produce îngrosarea elementului încadrat de <b> si </b>.

§ <i>
Elementul încadrat de <i> si </i> va apãrea înclinat ( cu italice ).

§ <u>
Elementul încadrat de <u> si </u> va apãrea subliniat.

<Br>, <p>, <div>, <blockquote>,

§ <center>
Produce asezarea în centrul paginii a elementului încadrat.
Exemplu:
<center>Despre pescuit</center>
In browser, veti vedea cuvintele Despre pescuit, afisate în centrul paginii.

§ <br>
Provine din englezescul break si produce ruperea rândului si trecerea pe rândul
urmãtor.

§ <nobr>
Interzice trecerea pe rândul urmãtor.

§ <p>
Produce trecerea nu pe rândul urmãtor, ci pe cel care îi urmeazã acestuia.
Exemplu:

<p align=center>Acvarii cu pesti exotici din Caraibe. Gratis !</p>

In loc de left, putem avea right sau left. Valoarea implicitã este left. Efectul
secventei de cod de mai sus este:

Acvarii cu pesti exotici din Caraibe. Gratis !

§ <div>
Exemplul 1:
<div align=right> Acvarii cu pesti exotici<br>
Caraibe. Gratis ! Promotie !<br>
<img src="../imag/[Link]">
</div>
Acest container închide un întreg bloc de elemente cãrora le stabileste alinierea. Nu
se supun elementele a cãror aliniere e stabilitã în tag-urile lor proprii.

Aceastã secventã de cod produce efectul vizibil alãturi. Se observã alinierea la

dreapta atât a containerului, cât si a textului din container.
Valori posibile pentru atributul align: left (implicitã), center, right, justify. O setare mai
complexã a acestui container putem realiza folosind CSS.

Exemplul 2:
<div align=center>Gratuit, pesti exotici din Hawaii<br>
,Japonia,<br>
China, Thailanda, Filipine</div>
Efect:
Gratuit, pesti exotici din Hawaii
,Japonia,
China, Thailanda, Filipine

§ <blockquote>
Produce un avans mai mare în interiorul unei pagini decât <p>.
Exemplu:

Pesti exotici pesti exotici pesti exotici pesti exotici

<blockquote>
Amicus magis necessarius est quam ignis et aqua.
</blockquote>
Articole pentru pescuit pescuit pescuit pescuit

Efectul produs:
Pesti exotici pesti exotici pesti exotici pesti exotici

Amicus magis necessarius est quam ignis et aqua.

Articole pentru pescuit pescuit pescuit pescuit

Observatii:

 E necesara prezenta tag-ului de inchidere.

 Textul cuprins intre <blockquote> si </blockquote> e afisat pe un rand nou, in
stanga paginii. In jurul acestui text, apare un spatiu alb.
 E posibila folosirea mai multor elemente <blockquote> pentru a obtine un
avans mai pregnant in interiorul paginii.

LISTE
§<li>
Indicã un element dintr-o listã (ne)numerotatã.
Exemplu:
<li type="circle">
Acest tag suportã atributele:
 Atributul type: poate lua valorile disc, circle, square sau A, A, I, i, 1. Folosit
în listele nenumerotate.
 Atributul value: precizeazã valoarea numericã a elementului din listã
considerat. Folosit în listele numerotate.
§<ol>
Listã numerotatã (ordonata).
Exemplul 1:
<ol start="7">
Atributul start precizeazã valoarea de la care pleacã numerotarea elementelor din
listã.

§ <ul>
Listã nenumerotatã (neordonata).
Exemplul 1:
<ul type="disc">
<li>Cirese
<li>Visine
<li>Pepene
</ul>
Are loc afisarea urmãtoarei liste:
 Cirese
 Visine
 Pepene

Atributul type mai poate lua valorile disc sau circle.

Exemplul 2:

<ul type="disc">
<u>Fructe</u>
<li>Mere
<li>Pere
<li>Citrice
<ol>
<li>Lamai
<li>Mandarine
</ol>
</ul>
Aceastã secventã de cod produce încuibarea unei liste cu citrice în lista cu fructe:

Fructe
 Mere
 Pere
 Citrice
1. Lamai
2. Mandarine

LINIA ORIZONTALA
§ <hr>
Produce afisarea unei linii orizontale.

Exemplul 1:

<hr size="3" width="60%" align="center" noshade color="red">

Aceastã secventã de cod produce afisarea urmãtoarei linii:

 Atributul size precizeazã grosimea în pixeli a liniei.

 Atributul width precizeazã cât din lãtimea ferestrei va ocupa linia. Se poate
exprima procentual ( ca mai sus ) sau în pixeli.
  Atributul noshade lipseste linia de relief.
 Atributul color precizeazã culoarea liniei. Oricare dintre aceste atribute poate
lipsi.

Exemplul 2:

<hr size="100" color="black" width="5">

In browserul Internet Explorer si in alte browsere, aceasta secventa de cod produce
aparitia unei linii verticale. In realitate, aceasta e o linie orizontalã de grosime foarte
mare ( 100 pixeli ) si de lungime foarte micã ( 5 pixeli ). Altã posibilitate: pentru
realizarea unei linii verticale se preferã folosirea unui tabel în care o celulã cu
parametrul width foarte mic are un background colorat. Varianta optimã e însã a
treia: folosirea CSS pentru realizarea unei linii verticale.

SIMBOLURI
Diacritice
Codul Reprezentarea
&Agrave; &Aacute; &Acirc; À Á Â
&Atilde; &Auml; &Aring; Ã Ä Å
&AElig; , &Ccedil; , &ETH; , &Ntilde; Æ Ç Ð Ñ
&Ecirc; , &Euml; &Egrave; , É Ê Ë È É
&Igrave; , &Iacute; , &Icirc; , &Iuml; Ì Í Î Ï
&Ograve; , &Oacute; , &Ocirc; , &Ouml; Ò Ó Ô Ö
&Ugrave; , &Uacute; , &Ucirc; , &Uuml; Ù Ú Û Ü
&#462; &#acirc; &icirc; ǎ â î
&#355; &#351; ţ ş

Matematice
&frac14 &frac12 &frac34 1/2 , 1/3, 3 /4
&divide , &times; ÷ ×
&plusmn; sau &#177; ±
&lt , &gt <>
&le &ge ≤≥
&equiv; &ne; &asymp; ≡ ≠ ≈
&int; &part; ∫ ∂
&radic; √
&cap; ‰ ∩ ‰

TABELE
1) <table>
Tag-urile <table>,<td> si <tr> sunt singurele tag-uri indispensabile realizãrii unui
tabel. Orice tabel va incepe cu <table> si se va incheia cu </table>. Tag-ul <table>
suporta mai multe atribute.

Exemplu:
<table bgcolor="red" width="60%" border="5" bordercolor="blue" cellspacing="10"
cellpadding="5" align="right" height="20">
Efect: aparitia ( dupã completarea codului ) unui tabel cu fundalul rosu, cu un chenar
albastru având grosimea de 5 pixeli. Tabelul va fi plasat în dreapta paginii; distanta
dintre celule va fi de 10 pixeli, iar distanta dintre text si marginea celulei de 5 pixeli.
Inãltimea tabelului ar trebui sã fie de 20 de pixeli, dar browserele rareori tin seama de
atributul height.
 Atributul bgcolor a setat culoarea fundalului.
 Atributul width poate fi exprimat procentual ( ca mai sus ) sau in valoare
absoluta ( in pixeli ) si stabileste cat din latimea paginii va ocupa tabelul.
 Atributul border stabileste grosimea chenarului.
 Atributul bordercolor stabileste culoarea chenarului.
 Atributul cellspacing stabileste distanta dintre celule.
 Atributul cellpadding stabileste distanta dintre continutul unei celule si
marginea celulei.
 Atributul align produce alinierea tabelului la dreapta, la stanga sau in centrul
paginii.
 Atributul height stabileste inaltimea tabelului. In acest exemplu, ia valoarea de
10 pixeli, dar poate fi stabilit si in procente din inaltimea ferestrei.

2)<tr>
Orice linie din tabel va fi marcata prin <tr> la inceput si prin </tr> la sfarsit. O linie
poate contine una sau mai multe celule. Tabelele au acelasi numar de celule pe
fiecare linie/coloana. Nu sunt permise tabelele in forma de L, T etc. Pot exista insa
celule goale ( sau continand doar &nbsp; ).

3)<td>
Orice celula e delimitata de tag-urile <td> si </td>. Fiecare celula poate avea alta
culoare de fundal. O celula poate contine alt tabel care poate contine alt tabel etc.
Desigur, o celula poate contine atat text cat si imagini. In interiorul acestui tag, ca si
in interiorul tag-ului anterior, poate fi introdus atributul align, acesta putand lua
valorile left, right, center, middle, bottom. Acest atribut seteaza alinierea textului
din celula respectiva..

EXEMPLE DE TABELE
Exemplul1:
Sonerii polifonice free
<table border="5">
<tr>
<td>
telefon<br>mobil<br>gratuit gratuit gratuit gratuit
</td>
</tr>
</table>
Sonerii polifonice gratuite
Secventa de cod de mai sus produce afisarea tabelului de mai jos, care contine o
singura celula. Tabelul are acelasi fundal ca si pagina în care e inclus. Chenarul are
grosimea de 5 pixeli. Textul e aliniat la stanga, aceasta fiind setarea implicita.

Sonerii polifonice free

telefon
mobil
gratuit gratuit gratuit gratuit

Sonerii polifonice gratuite

Observatie: Tabelul nostru apare dupã textul "sonerii polifonice free". Tabelul e afisat
în mod automat pe rândul urmãtor, în stânga paginii, fãrã sã fie necesarã prezenta
unui <br>. Similar, textul ce urmeazã tabelului e afisat automat pe rândul urmãtor.

In interiorul tag-ului <table>, putem preciza dacã tabelul va apãrea în dreapta paginii
sau în centru. Scriind <table border="5" align=center> si lãsând neschimbat restul
secventei de cod, vom obtine:

Sonerii polifonice free

telefon
mobil
gratuit gratuit gratuit gratuit

Sonerii polifonice gratuite

Culoarea chenarului a fost stabilitã de browser. Dacã dorim sã stabilim noi culoarea
chenarului, vom folosi atributul bordercolor. Scriind <table border="5"
bordercolor="steelblue">, vom obtine:

Sonerii polifonice free

telefon
mobil
gratuit gratuit gratuit gratuit

Sonerii polifonice gratuite

Chenarul tabelului are grosimea de 5 pixeli si culoarea denumitã "steelblue" în codul

culorilor. Se observã cã si în jurul celulei de tabel apare, desi nu am intentionat acest
lucru, un chenar subtire, de aceeasi culoare. Dacã dorim aparitia unui chenar bicolor,
vom folosi atributele bordercolordark si bordercolorlight care iau drept valoare, ca
si bordercolor, numele unei culori (în englezã) sau codul hexazecimal
corespunzând culorii. Scriind <table border="5" bordercolorlight="steelblue"
bordercolordark="#000000">, vom obtine tabelul de mai jos. Se observã cã
bordercolordark si bordercolorlight afecteazã atât chenarul tabelului, cât si
chenarul celulei.

Sonerii polifonice free

telefon
mobil
gratuit gratuit gratuit gratuit

Sonerii polifonice gratuite

Exemplul 2:

<table bgcolor="blue" border="1" cellspacing="10">

<tr valign=bottom>
<td bgcolor="pink">CD</td>
 <td bgcolor="red">HDD</td>
</tr>
<tr valign=bottom>
<td bgcolor="gold">CD</td>
<td bgcolor="yellow">HDD</td>
</tr>
Aceastã secventã de cod produce aparitia unui tabel cu 4 celule, colorate diferit.
Aveti ocazia sã observati diferenta dintre fundalul tabelului (albastru) si fundalul
[Link]ã faptului cã am scris valign=bottom, textul va fi pozitionat în josul
fiecãrei celule.
CD HDD
CD HDD
Dacã, în exemplul de mai sus, modificã valoarea atributului cellspacing astfel încât
sã avem Cellspacing="2", tabelul va apãrea ca:
CD HDD
CD HDD

Dacã lãsãm cellspacing="10" si adãugãm cellpadding="20", vom observa

distantarea textului de marginile celulei cu 20 de pixeli:

CD HDD

CD HDD

Dacã, în plus fatã de modificarea anterioarã, scriem valign=top, vom observa cã

textul urcã în partea de sus a celulei. Urcarea are loc în mãsura în care e permisã de
setarea cellpadding="0", care împiedicã apropierea textului de marginea celulei la
mai putin de 20 de pixeli.

CD HDD

CD HDD

Tabelul poate avea o imagine drept fundal. Dacã, în exemplul discutat, stergem
bgcolor="blue" si scriem în loc background="[Link]", vom obtine tabelul
alãturat.

CD HDD

CD HDD

Imaginea poate servi drept fundal numai pentru celulã. Dacã lãsãm bgcolor="blue"
pentru tabel, iar pentru prima celulã scriem <td background="[Link]">, se
obtine tabelul alãturat.
 Despre tabele se pot scrie multe. Tabelul poate avea un fundal, celulele altul samd.
Pentru ca vizitatorul sã poatã citi fãrã probleme textul introdus în tabel, fundalul
celulelor trebuie sã fie nu o imagine, ci o culoare odihnitoare si aflatã în bun contrast
cu fontul.

CD HDD

CD HDD

Exemplul3:

<table>
<tr>
<td valign=top>
CD-uri ieftine
</td>
<td valign=middle>
CD-uri ieftine
</td>
<td valign=bottom>
CD-uri ieftine
</td>
</tr>
</table>
In acest tabel, textul fiecãrei celule e pozitionat altfel ( sus, la mijlocul celulei si
respectiv în josul acesteia).
CD-uri ieftine

CD-uri ieftine

CD-uri ieftine

Exemplul 4:

<table border="5" cellspacing="10">

<tr bordercolor="white">
<td bgcolor="gold">CD</td>
<td bgcolor="gold">HDD</td>
</tr>
<tr bordercolor="red">
<td bgcolor="gold">CD</td>
<td bgcolor="gold">HDD</td>
</tr>
Tabelul obtinut are culoarea paginii, în timp ce celulele sale au fundalul auriu.
Chenarul tabelului nu ne intereseazã, asa cã nu i-am stabilit culoarea. Am stabilit
însã, scriind <tr bordercolor="white">, cã toate celulele primului rând vor avea
chenar alb. Prin <tr bordercolor="red">, am stabilit cã toate celulele rândului
urmãtor au chenar rosu.
CD HDD
CD HDD
 Exemplul 5:

<table border="5" cellspacing="10">

<tr bordercolorlight="red" bordercolordark="blue">
<td bgcolor="gold">CD</td>
<td bgcolor="gold">HDD</td>
</tr>
<tr bordercolorlight="red" bordercolordark="blue">
<td bgcolor="gold">CD</td>
<td bgcolor="gold">HDD</td>
</tr>
Celulele fiecãrui rând au un chenar în douã culori ( rosu si albastru ).
CD HDD
CD HDD

Exemplul 6:

<table border="5" cellspacing="10">

<tr >
<td bordercolorlight="red" bordercolordark="blue" bgcolor="gold">CD</td>
<td bordercolor="white" bgcolor="gold">HDD</td>
</tr>
Acest tabel are doar douã celule, dispuse pe o linie. Prima celulã are chenarul în
douã culori ( rosu si albastru ) în timp ce a doua are chenar alb.
CD HDD

Concluzie: Putem stabili chenarul pentru întregul tabel sau pentru o linie sau pentru
câte o celulã. Chenarul poate fi monocolor sau bicolor.

<Tbody>, <Caption>, <Colgroup> etc

<th>
Intre etichetele <th> si </th> este cuprins header-ul tabelului.

Exemplu:

<table border="5" bordercolor="blue" bgcolor="fuchsia">

<tr> <th colspan="2" axis="Elevi">Clasa a XI-a E</th></tr>
<tr><td>Fete</td><td>Baieti</td></tr>
<tr><td>15</td><td>14</td></tr>
<table>
Atributul axis stabileste ca numele header-ului este "Elevi", nume ce poate fi pronuntat de un
sintetizator de voce pentru uzul unei persoane handicapate sau ocupate cu alte activitati.
Aceasta secventa de cod va produce afisarea urmatorului tabel:
Clase a XI-a E
Fete Baieti
15 14

<thead>
Grupeaza linii in header-ul unui tabel. E un container, asa ca se foloseste ( dar nu
obligatoriu ) eticheta de inchidere </thead>.
<tbody>
Grupeaza linii in corpul unui tabel. E un container care are obligatoriu eticheta de
inchidere.

<tfoot>
Grupeaza linii intr-un footer. E un container, ca si precedentele etichete.

<caption>
Acest tag produce afisarea unui text deasupra tabelului sau sub tabel.

Exemplu:

<caption>Productie</caption>
<caption align=bottom>Fructe</caption>
<tr><td>Mere</td><td>Pere</td></tr>
<tr><td>150 kg</td><td>140 kg</td></tr>
<table>
Aceasta secventa de cod va produce afisarea urmatorului tabel, in care sunt
prezente doua elemente header. In IE 5.5, primul va aparea deasupra tabelului si al
doilea ( cel în a cǎrui eticheta am precizat: align=bottom ) sub tabel. In Netscape
Navigator 4.75, ambele elemente header vor aparea deasupra tabelului.
Productie
Pere
Mere
140 kg 150 kg
Fructe

Evident, poate lipsi oricare dintre elementele caption.

<colgroup>
Intr-un tabel, coloanele pot avea latimi diferite, iar textul poate fi aliniat in mod diferit.
Tag-ul discutat acum realizeaza asemenea performante.

Exemplu:

<colgroup width="20px" align=left span=3>

Primele 3 coloane au latimea de 20 pixeli si alinierea textului se face la stanga.
Atributul span ia o valoare egala cu numarul coloanelor implicate.

Observatie: Dupã cum ati observat, tabelele de mai sus au fost folosite pentru
dispunerea datelor. Totusi, in pagina web, tabelul are un rol important: rolul de
machetã a paginii. Mai exact, informatia oricãrei pagini web e dispusã într-un tabel
invizibil, pe mai multe coloane, tabel ce joacã rol de machetã. Puteti studia detaliat
acest lucru intrând pe diverse pagini web si citindu-le sursele. Fac exceptie, de putin
timp, paginile care folosesc div-uri pentru dispunerea informatii.

ATRIBUTELE COLSPAN SI ROWSPAN

Fie un tabel cu 4 celule, dispuse pe doua randuri:
1 2
 3 4
E posibil sa unim doua celule intre ele, lasandu-le neschimbate pe celelalte. Pentru
aceasta, se utilizeaza atributul colspan al tag-ului <td> sau, în functie de caz,
atributul rowspan. Acestea iau valori numerice mai mari sau egale cu 2.

Exemplul 1:

<table>
<tr><td colspan="2">1 + 2</td></tr>
<tr><td 3> </td><td> 4 </td></tr>
</table>
Vom uni celulele 1 si 2 intr-o singura celula, de lungimea intregului rand. Aceasta se
face definind o celula ce se intinde pe lungimea a doua coloane: <td colspan="2">.
1+2
3 4

Exemplul 2:

<table>
<tr><td> 1> </td><td> 2 </td></tr>
<tr><td colspan="2">3 + 4</td></tr>
</table>
1 2
3+4

Pe randul de jos, apare o singura celula care, deoarece colspan="2", se intinde pe

lungimea a doua coloane.

Exemplul 3:

<table>
<tr><td rowspan="2">1 + 3</td><td>2</td> </tr>
<tr><td> 4 </td></tr>
</table>
Pe prima linie, apare mai intai o celula de inaltimea a doua randuri, introdusa prin <td
rowspan="2">. Pe acelasi rand, urmeaza o celula obisnuita, dupa care inchidem
primul rand. Pe al doilea rand, exista o singura celula ( 4 ), introdusa in mod obisnuit
si care e afisata de browser in singurul loc posibil, adica sub 2.
2
1+3
4

Exemplul 4:

<table>
<tr><td>1</td><td rowspan="2">2+4</td></tr>
<tr><td>3</td>
</table>
Primul rand incepe cu o celula obisnuita, urmata de o celula intinsa pe inaltimea a
doua coloane ( td rowspan="2" ). Inchidem randul. Pe randul urmator, apare o celula
obisnuita, afisata in singurul loc posibil, adica sub 1.
1
2+4
3
Fie un tabel cu 3 randuri si 3 coloane. Celulele sunt numerotate de la 1 la 9.

1 2 3
4 5 6
7 8 9

Exemplul 5:

<tr>
<td colspan="3">4+5+6</td>
</tr>
Daca dorim ca pe un rand sa apara o singura celula, intinsa pe latimea a trei
coloane, scriem codul de mai sus pentru randul respectiv. Celelalte doua randuri vor
fi create in stilul obisnuit.
1 2 3
4+5+6
7 8 9

Se observa unirea celulelor 4, 5 si 6. Daca dorim insa sa unim numai celulele 4 si 5,

vom scrie, pentru randul respectiv:

Exemplul 6:

<tr>
<td colspan="2">4+5</td><td>6</td>
</tr>
Se va obtine urmatorul tabel:
1 2 3
4+5 6
7 8 9

Exemplul 7:

<tr>
<td>4</td><td colspan="2">5+6</td>
</tr>
Pe randul al doilea, va fi afisata o celula obisnuita, urmata de o celula dubla ( intinsa
pe doua coloane ).
1 2 3
4 5+6
7 8 9

Exemplul 8:

<table>
<tr>
<td rowspan="3">1+4+7</td> <td>2</td><td>3</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
 <tr>
<td>8</td><td>9</td>
</tr>
</table>
Primul rand incepe cu o celula ce are inaltimea a trei randuri si continua cu doua
celule normale ( 2 si 3 ). Al doilea rand contine doua celule obisnuite ( 5 si 6), ca si al
treilea rand ( 8 si 9 ).
2 3
1+4+7 5 6
8 9

Exemplul 9:

<table>
<tr>
<td colspan="2">1+2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td rowspan="2">6+9</td> </tr>
<tr>
<td>7</td><td>8</td>
</tr>
</table>
Iatã un tabel complex, în a cãrui realizare am folosit atât atributul colspan, cât si
rowspan. Prima linie contine o celulã dublã, urmatã de o celulã obisnuitã. A doua
linie începe cu douã celule obisnuite, iar a treia se întinde pe înãtimea a douã rânduri
( deoarece rowspan="2" ). A treia linie contine doar douã celule de tabel ( 7 si 8 ) ce
nu pot fi afisate decât sub celulele 4 si 5. Acesta este modul în care se pot realiza
tabele complexe.
1+2 3
4 5
6+9
7 8

Exemplul 10:
Atributele colspan si rowspan pot apãrea si simultan în cadrul aceluiasi tag <td>. Mai
jos, avem un tabel în care prima celulã se întinde pe spatiul a douã coloane si a douã
linii. Celula a fost introdusã pe prima linie prin

<td colspan="2" rowspan="2">

Pe prima linie, a mai fost introdusã o celulã (3). Pe a doua, altã celulã (6), iar pe a
treia linie apar trei celule.
3
1+2+4+5
6
7 8 9

Dimensiunile celulelor de mai sus au fost stabilite de browser-ul dvs. Dacã dorim sã
le stabilim lãtimea, putem face acest lucru cu ajutorul atributelor width si height,
introduse în cadrul tag-ului <td>. De exemplu, pentru linia de jos putem scrie

<tr>
<td width="20%">7</td><td width="30%">8</td><td>9</td>
</tr>
Efect:
3
1+2+4+5
 7 8 9

FRAMES ( CADRE)
In webdesign, diavolul se numeste frames. Webdesignerii recomandã, în quasi-
unanimitate, sã nu vã gânditi la asa ceva; în cãsuta dvs. postalã de pe Yahoo vi se
oferã posibilitatea de a le evita, iar în formularea problemei IP0004, redactorii de la
PC Magazine precizeazã conditia principalã: "mai ales, fãrã a folosi frames".

Dacã încã; nu v-ati speriat si vreti sã stiti despre ce e vorba, uitati-vã cu atentie la
pagina [Link] si veti vedea cã prezintã douã pãrti: partea de sus ( care nu
se schimbã ), si partea de jos. Acestea sunt cele douã frames ( =cadre ) ce
alcãtuiesc pagina web a firmei Northdragon

Impãrtirea pe frames a paginii web se face în fisierul [Link] care, de obicei, nu

contine si informatii de alt gen.

Avantajele folosirii cadrelor:

o cadrele usureazã navigarea prin pagini

o usureazã operatiunile de actualizare si de întretinere a sitului
o încãrcarea continutului e mai rapidã, deoarece partea fixã se încarcã doar la
început, nu la fiecare click
o informatia importantã ( o reclamã sau adresã de contact etc.) poate fi pastrata
tot timpul sub ochii vizitatorului

Dezavantaje:

 Paginile cu frames prezinta adesea aspecte diferite în navigatoare diferite

si la rezolutii diferite
 Se reduce spatiul de afisare.
 Indexarea sitului de cãtre unele ( nu prea multe ) motoare de cãutare e
anevoioasã. Dupã indexare, surferii ce ajung în situl dvs folosind un motor de
cãutare vor ajunge, de fapt, într-unul din fisierele componente ale paginii
principale, eveniment generator de disconfort pentru surfer, din multiple
motive ( design-ul, lipsa link-urilor etc ). O solutie a fost furnizata de dl.
Emanuel Baruch, cu urmatorul rezultat: “cand cineva deschide o astfel de
pagina, browser-ul o va reincarca incluzand-o in frameset-ul din care trebuie
sa faca parte. Acest script este o combinatie JavaScript-PHP, asadar va
functiona doar pe serverele care ofera aceasta facilitate”. Puteti gasi codul
necesar in articolul “Seturi de cadre (frameset-uri) avansate cu Javascript si
PHP” publicat de dl. Emanuel Baruch in revista “PC Magazine” nr. 1 din 2003,
pag. 96 sau la adresa [Link]/pcmag5-1/[Link]
 Bookmarking-ul ( trecerea pagini la Favorites ) e dificil.

Intrebare: Intr-un sit cu 3, 4 sau mai multe cadre, e posibil sã modificãm simultan
douã dintre cadre ? Rãspunsul a fost gãsit tot de cãtre dl. Emanuel Baruch si publicat
sub titlul "To frame or not to frame?" în revista "PC Magazine" din ianuarie 2002., la
pagina 100. Solutia presupune folosirea JavaScript.

§<frameset>
Acest tag divide fereastra în subspaţii dreptunghiulare numite cadre (=frames). Tag-
ul <frameset> urmeazǎ tag-ului </head> şi înlocuieşte tag-ul <body>. Atribute:
  Atributul rows precizeazǎ spaţiul ce va fi ocupat de fiecare rând. Se exprimǎ
în pixeli sau în procente. Varianta procentelor e cea recomandabilǎ, deoarece
monitoarele au dimensiuni diferite.
 Atributul cols precizeazǎ spaţiul ce va fi ocupat de fiecare coloanǎ. Similar
atributului rows.

§<frame>
Acest tag defineşte fiecare cadru. Are urmǎtoarele atribute:

 Atributul name - precizeazǎ numele cadrului curent.

 Atributul src are ca valoare un URL. Acesta poate aparţine unui fişier HTML,
unui fişier video, unei imagini ( .gif, .jpg etc ) sau unui alt obiect. Totuşi,
ultimele 3 variante nu sunt recomandabile. Pentru ca fişierul video etc. sǎ fie
accesibil persoanelor cu handicap şi sǎ fie mai bine indexat de motoarele de
cǎutare, e de dorit sǎ fie introdus într-un fişier html. Acesta va constitui
conţinutul cadrului.
 Atributul longdesc are drept valoare URL-ul unde se aflǎ descrierea detaliatǎ
a conţinutului cadrului. Rar folosit.
 Atributul frameborder poate lua valoarea 1 ( cea implicitǎ ) sau 0. Dacǎ luǎm
frameborder="0", cadrul nu va avea margine. In caz contrar, va avea.
 Atributul noresize nu ia valori. Prezenţa sa în cadrul tag-ului discutat nu e
recomandabilǎ, deoarece face ca vizitatorul sǎ nu-şi poatǎ regla dimansiunile
cadrelor dupǎ gust.
 Atributul scroll poate lua una dintre valorile: yes|no|auto. Folosindu-l, putem
determina apariţia/dispariţia barei de scroll a cadrului.
 Atributele marginwidth, marginheight seteazǎ distanţa dintre text şi
marginea cadrului.

§<noframe>
Unele browsere nu suportǎ cadrele. Acestora li se adreseazǎ un mesaj cuprins între
tag-urile <noframes> şi </noframes>. Mesajul e vizibil numai când cadrele nu sunt
afişate. Totuşi, browserele moderne nu au aceastǎ problemǎ.

EXEMPLE DE FRAMES
Exemplul 1:
Impǎrţirea pe verticalǎ a unei pagini în douǎ cadre numite stanga şi dreapta se face
astfel:
<html>
<head><title>[Link]</title></head>
<frameset cols="20%,*">
<frame name="stanga" src="[Link]" noresize scrolling='auto'>
<frame name="dreapta" src="[Link]" noresize scrolling='auto'>
</frameset>
</html>
 Tag-ul <frameset cols="20%,*"> precizeazǎ cǎ pagina se împarte în doua
coloane. Prima coloanǎ urmeazǎ sǎ ocupe 20% din suprafaţa monitorului, iar
a doua restul. In loc de procent, putem pune dimensiunea pe orizontalǎ a
ferestrei (în pixeli ), dar acest lucru nu e recomandabil, deoarece pagina dvs.
va fi vizualizatǎ la rezoluţii diferite.
 Tag-ul urmǎtor se referǎ la fereastra care poartǎ numele sugestiv de "stanga"
şi în care va fi afişat fişierul [Link]. Aceastǎ fereastrǎ nu poate fi
redimensionatǎ, lucru stabilit prin atributul noresize. Dacǎ acesta lipseşte,
fereastra poate fi redimensionatǎ. Pentru bara de scroll, s-a preferat valoarea
auto. Alte valori posibile sunt yes şi no.
  Tag-ul care urmeazǎ se referǎ la fereastra din dreapta, numitǎ "dreapta". In
aceastǎ fereastrǎ va fi încǎrcat fişierul [Link]. Gândiţi-vǎ la ferestrele din
componenţa paginii ca la douǎ farfurii goale numite "stanga" şi "dreapta", în
care urmeazǎ sǎ se punǎ fişierul [Link], respectiv [Link].
 Executaţi click-dreapta pe suprafaţa ferestrei din stânga, apoi "View source".
Veţi obţine astfel sursa fişierului [Link]. Se observǎ cǎ, în interiorul fiecǎrui
link, existǎ atributul target, cǎruia i s-a atribuit valoarea "dreapta". Aceasta
indicǎ faptul cǎ fişierul-ţintǎ va fi încǎrcat în partea din dreapta a paginii, aşa
cum e normal. Dacǎ acest atribut lipseşte, fişierul-ţintǎ va fi încǎrcat în
fereastra-apelantǎ ( "stanga" ), ceea ce nu e de dorit.

Exemplul 2:

<html>
<head><title>[Link]</title></head>
<frameset rows="10%,80%,*">
<frame name="sus" src="[Link]" noresize scrolling='no'>
<frame name="centru" src="[Link]" noresize scrolling='auto'>
<frame name="jos" src="[Link]" noresize scrolling='no'>
<noframes>
Despre cadre (frames) in HTML
</noframes>
</frameset>
</html>
Aceastǎ secvenţǎ de cod împarte pagina în trei ferestre orizontale, numite "sus",
"centru" si "jos". La încǎrcarea fişierului [Link], în aceste trei ferestre vor fi
încǎrcate fişierele x,y şi z. Ferestrele de sus şi de jos nu vor avea bara de scroll, iar
cea de la mijloc va avea numai dacǎ este cazul. Browserele care nu suportǎ cadre
vor afişa doar:

Despre cadre (frames)in HTML

Exemplul 3:

<html>
<head><title>[Link]</title></head>
<frameset rows="100,*,40">
<frame name="sus" src="[Link]" noresize scrolling='no'>
<frameset cols="50,*">
<frame name="stanga" src="[Link]" scrolling='no'>
<frame name="dreapta" src="[Link]" scrolling='auto'>
</frameset>
<frame name="jos" src="[Link]" noresize scrolling='no'>
</frameset>
</html>
 Fereastra de sus are dimensiunea de 100 pixeli şi se numeste "sus". In
aceastǎ fereastrǎ, va fi afişat fişierul [Link].
 Fereastra de jos are dimensiunea de 40 pixeli, se numeşte "jos" şi va conţine
fişierul [Link].
 Fereastra de la mijloc e împarţitǎ în alte doua ferestre, care poartǎ numele de
"stanga" şi "dreapta".

Prima va ocupa 50 de pixeli din dimensiunea pe orizontalǎ a paginii, iar cealaltǎ

restul; vor afişa conţinutul fişierelor [Link] şi [Link]. Nici o fereastrǎ nu prezintǎ bara
de scroll, cu excepţia ferestrei "dreapta".

Desigur, acest exemplu nu e uzual şi nu recomandǎm folosirea sa. Primul exemplu,

în schimb, se întâlneşte frecvent. Dacǎ nu vreţi sǎ vǎ bateţi capul cu codul necesar
frame-urilor, intraţi în [Link] şi daţi drept cuvinte de cǎutare frames
maker download. Veţi gǎsi, cu siguranţǎ, un progrǎmel care creeazǎ frames simple.
iatã adresele câtorva editoare online:

 Web-page Tools
 Draac
 HTMLBasix

IFRAME
Un cadru poate fi introdus în interiorul unei pagini obişnuite, folosind tag-ul <iframe>.
Acest tag e suportat doar de Internet Explorer.

Exemplul 1:

<iframe src="[Link]" width="30%" height="40" align=center> </iframe>

Rezultatul este urmǎtorul:

Noua fereatrǎ are în.lţimea de 140 de pixeli şi va ocupa 30% din lǎţimea elementului
în care se aflã (în cazul nostru, o celulã a unui tabel invizibil). In interiorul ferestrei, va
apǎrea conţinutul fişierului [Link]. Avantajul folosirii acestui tag e faptul cǎ permite
afişarea conţinutului unui fişier extern, dimensiunea în kB a paginii principale
rǎmânând redusǎ

Exemplul 2:

<iframe src="[Link]" width="200" height="40" align=right frameborder="0"

scrolling="auto" marginwidth="10" marginheight="20"> <!--Pentru browserele ce nu
suportǎ tag-ul <iframe>:-->
Bine aţi venit în pagina mea !
Votaţi-ne în [Link] !
</iframe>

Bine ati venit în pagina mea !

Votati-ne în [Link] !

Efectul se poate vedea alǎturi. Acelaşi fişier e afişat în dreapta, într-o fereastrǎ înaltǎ
de 400 pixeli şi latǎ de 200. Textul e afişat la 10, respectiv 20 pixeli de marginile
ferestrei (pe orizontalǎ, respectiv pe verticalǎ ). Folosind Netscape Navigator, vaţi
vedea doar mesajele:

Bine aţi venit în pagina mea !

Votaţi-ne în [Link] !

Atributele tag-ului <iframe>:

 Atributul src precizeazǎ adresa paginii ce va fi încǎrcatǎ î fereastra astfel

definitǎ.
 Atributele width şi height definesc lǎrgimea şi înǎlţimea ferestrei. exprimate
în pixeli. Atributul width se poate exprima şi în procente.
 Atributul name precizeazǎ numele ferestrei deschise astfel.
 Atributul longdesc ia o valoare care e URL-ul paginii unde gǎsiţi o descriere
mai lungǎ a conţinutului ferestrei.
  Atributul frameborder poate lua douǎ valori: 0 şi 1. Valoarea 1 e valoarea
implicitǎ; în acest caz, fereastra va avea margine.
 Atributul align poate lua una dintre valorile: top|middle|bottom|left|right. In
acest fel, se stabileşte poziţia noii ferestre.
 Atributul scrolling poate lua una dintre valorile: yes|no|auto. Scriind
scrolling=auto, fereastra va avea bara de scroll doar dacǎ va fi necesar.
 Atributele marginwidth şi marginheight iau valori numerice care exprimǎ
distanţa ( în pixeli ) dintre textul din noua fereastrǎ şi marginile acesteia.

Observaţii:

 O asemenea fereastrǎ poate fi realizatǎ şi folosind CSS. Diferente:

a) In fereatra realizatǎ folosind CSS e afişat un text scris în fişerul HTML
curent. In fereatra realizatǎ folosind <iframe>, e afişat un fişier HTML extern,
soluţie mai avantajoasǎ din punctul de vedere al dimensiunii în KB.
b) Netscape Navigator nu afişeazǎ textul din fereatra realizatǎ cu <iframe> şi
afişeazǎ necorespunzǎtor textul din fereastra realizatǎ folosind CSS.
 Tag-ul <iframe> are multe în comun cu tag-ul <object>. Acesta din urmǎ e
însǎ suportat mai mult decât <iframe> de browsere şi e inclus şi în HTML 4.0
Strict.
 In fisierul afisat cu <iframe>, serverul-gazdã introduce bannere, ca si în pagina
principalã. Practic, în pagina pe care o aveti sub ochi, se aflã 3 rânduri de
bannere. De aceea, tag-ul <iframe> e recomandat numai în siturile cu
webhosting-ul plãtit.

IMAGINI DIN PAGINA WEB

1. In paginile web pot fi introduse doar imagini cu extensia .gif, .jpg, .bmp
sau .png. Bmp-urile nu sunt recomandabile datoritã dimensiunii mari (în KB) a
fisierelor. Cu cât un fisier e mai mare, cu atât vizitatorul paginii îl încarcã mai
greu.
2. In cartea sa "Adobe Photoshop 5. Ghid practic", Carla Rose face o comparatie între
dimensiunile fisierelor, dupã ce a salvat acelasi fisier în format .bmp, .jpg, .pdf etc.
Comparatia e exprimatã în tabelul urmãtor:
Format Dimensiunea fisierului
.bmp 891 K
.jpg (calitate înaltã) 344 K
.jpg (calitate redusã) 60 K
.png (întretesut) 837 K
.png (neîntretesut) 495 K
3.

4. Imaginea poate fi:

a) O fotografie ce a fost scanatã si, eventual, prelucratã într-un program de
graficã precum Paint Shop Pro, Adobe Photoshop, Adobe Illustrator
b) O creatie originalã, realizatã într-un program de graficã
5. Cele mai populare formate pentru imagini sunt .gif si .jpg. Primele folosesc
numai 256 culori, pot fi animate si pot avea un fundal transparent, ceea ce le
face usor de plasat în paginã. In imaginile .jpg pot apãrea 16 milioane de
culori, dar nu pot fi animate si nu pot avea fundal transparent. Spre deosebire
de gifuri, jpg-urile sunt comprimate, ceea ce înseamnã cã au, de obicei, un
volum mai mic decât giful care înfãtiseazã aceeasi imagine.
6. Imaginile se pot împãrti în:
o Imagini statice
 o Imagini animate (=gifuri animate). Un gif animat e alcãtuit din mai multe
imagini statice care se succed ãntr-o anumitã ordine. Se poate realiza
cu usurintã într-un program de animatie precum Animation Shop,
produs de firma Jasc si difuzat shareware, împreunã cu Paint Shop
Pro, pe CD-urile revistelor CHIP, PC Magazine, PC World.
7. Un caz particular de imagini îl reprezintã bannerele, care fac reclamã unui
produs si pe care le puteti vedea, de obicei, în partea de sus a paginilor web.
Se realizeazã tot în Animation Shop, cu Banner Wizard.
8. Imaginile 3D nu fac obiectul studiului nostru, dar nu ni se pare inutil sã
precizãm ca se pot realizea în VRML (Virtual Reality Modelling Language ),
precum si în alte limbaje. Vizualizarea imaginilor 3D se face cu browsere
speciale sau cu browserele obisnuite, cãrora li s-a adãugat un plug-in ( de
obicei, Cortona ).
Imagini 3D puteti realiza folosind 3D Studio Max, Caligari Truespace,
Rhino, Maya, Bryce, LightWave, Kashmir. Ultimul este distribuit gratuit pe
net, într-o arhivã de doar 3,8 MB, iar Maya ( 130 MB ) poate fi cãpãtat la un
pret minor, asa cum puteti constata vizitând pagina producãtorului.

Tag-ul necesar lucrului cu imagini este <img>. Tinând cont cã o imagine poate
constitui un link ( sau un ansamblu de link-uri ), vom trata aici si tag-uril map si area.

§ <img>
Dorim sã introducem imagini în situl nostru ? Acest tag produce afisarea unei imagini
în pagina web curentã.
Exemplu:

<img src="imag/[Link]" alt="Andreea Marin si Andreea Esca" width="500"

height="350" border="0" align="center">
 Atributul src precizeazã adresa relativã a fisierului ce va fi încã[Link]
[Link] se afla in directorul imag.
 Atributul alt se adreseazã browserelor negrafice precum Lynx, care în locul
imaginii vor afisa textul: Andreea Marin si Andreea Esca. Acest atribut este
suportat si de browserul Internet Explorer, textul apãrând ca un tooltip la
trecerea cursorului peste imagine.
 Atributul align pozitioneazã imaginea în document si poate lua valorile left
sau [Link] implicitã este left, ceea ce înseamnã cã <img src="[Link]"
align="left"> e totuna cu <img src="[Link]">. Pentru a pozitiona o imagine în
centrul paginii web, apelati la oricare dintre aceste trei metode:
o includeti imaginea într-un tabel pozitionat în centrul paginii
o includeti imaginea într-un element <div>, folosind codul de mai jos:

<div align=center>
<img src="imag/[Link]">
</div>

o includeti imaginea într-un element <p>, folosind codul de mai jos:

<p align=center>
<img src="imag/[Link]">
</p>

 Atributul border precizeazã grosimea în pixeli a chenarului imaginii.

 Atributele width si height iau valori ce exprimã lungimea, respectiv înãltimea
imaginii. Pentru a le afla, deschideti fisierul în Irfanview sau ACDSee ( care
sunt cele mai bune viewere ) si cititi dimensiunile imaginii în pixeli. Le puteti
 afla si deschizand imaginea în browser, dând click-dreapta, apoi selectand
"Properties".In cadrul tag-ului discutat, le puteti trece pe acestea sau
(sub)multipli ai acestora. Dacã aceste atribute nu sunt precizate, imaginea se
încarcã având dimensiunile proprii, dar aceasta presupune schimbarea
aspectului paginii si acest lucru poate fi suparator pentru utilizator. Practic,
atributele width si height nu trebuie sa lipseasca atunci cand folosim imagini.
 Atributele vspace si hspace precizeazã intervalul liber ( în pixeli ) lãsat între
imagine si text pe verticalã, respectiv pe orizontalã. Acest atribut e extrem de
util si atunci când pagina contine mai multe imagini, asa cum puteti vedea în
pagina cu fundaluri.

FISIERELE AUDIO
Fişierele audio sunt, în linii mari, de douǎ tipuri:
 Fişier de tip "formǎ de undǎ"
Aceste fişiere stocheazǎ forma semnalului audio. Acesta e digitizat pentru a
permite stocarea şi prelucrarea sa pe calculator.
 Fişier de tip MIDI ( = Musical Instrument Digital Interface )
Aceste fişiere au extensia .mid sau .midi. Nu descriu forma de undǎ, ci conţin
instrucţiunile necesare generǎrii notelor. Notele sunt interpretate de un
sintetizator care, executându-le, produce muzicǎ. Deoarece sunt extrem de
comprimate, fişierele MIDI ocupǎ un volum mic.

Fişierele sonore pot cuprinde voce, secvenţe instrumentale sau mixǎri ale acestora.
Se pot crea în popularele programe FruittyLoops şi Foundry Sound Forge, ultimul
fiind difuzat şi pe CD-urile CHIP.

Redarea fişierului audio este realizatǎ de o aplicaţie numitǎ player, cel mai cunoscut
player de sub Windows fiind Winamp.
Pentru a asculta un fişier audio de pe net, existǎ douǎ posibilitǎţi:
a) Descǎrcarea de pe internet a fişierului şi ascultarea ulterioarǎ a acestuia. Extensia
fişierului poate fi .mp3 ( un format foarte popular, dar de volum mare ), .wav, .wma
etc.
b) Ascultarea fişierului în timp ce se încarcǎ, acest lucru fiind posibil când extensia
fisierului este .asf, .rm sau .ra. Asemenea fişiere gǎsiţi la adresa [Link].

§ <bgsound>
Acest tag produce includerea în pagina curentǎ a unui fişier sonor.
Exemplu:

<bgsound src="sunete/[Link]" loop="-1">

 Prin atributul src, se specificǎ adresa relativǎ a fişierului [Link], aflat în
directorul "sunete".
 Atributul loop precizeazǎ de câte ori se reia clipul. Valoarea -1 produce
redarea la infinit a fişierului audio.

Pentru ca muzica sǎ înceapǎ în momentul încǎrcǎrii complete a fişierului şi sǎ se

audǎ o singurǎ datǎ, vom scrie:

<bgsound src="sunete/[Link]">

§ <embed>
Acest tag poate produce includerea în paginǎ atât a unui fişier sonor, cât şi a altui
obiect.
Exemplu:

<embed src="sunete/[Link]" width="200" height="300" align="left" vspace="20"

hspace="20" border="5">
Atributele prezente în acest tag au aceeaşi semnificaţie ca în cazul tag-ului <img>.

§ <noembed>
Acest tag se adreseazǎ browserelor care nu pot reda obiectul introdus cu <embed>
şi cǎrora li se furnizeazǎ o explicaţie. Acest tag aminteşte de atributul alt prezent în
cadrul tag-ului <img>.
Exemplu:

<noembed>Fisier sonor cu extensia .wav</noembed>

Notã: Vã plac Nino d'Angelo si Leonard Cohen si vreti sã le oferiti si altora mp3 -urile
lor ? Mai gânditi-vã...In primul rând, e ilegal. In al doilea rand, multi surferi îsi pun un
CD cu muzicã înainte de a intra pe net. Când acestia ajung în pagina dvs, vor auzi
melodia dvs. in locul muzicii dorite. Evident, acest lucru e de naturã sã-i deranjeze pe
[Link] plus, fisierul sonor are un anumit numãr de KB care se adaugã octetilor
paginii propriu-zise, încetinind navigarea. Morala fabulei: renuntati la fisierele sonore.

METATAG-URI
Cele mai multe motoare de cãutare folosesc programe-robot ( = spideri ) pentru
indexarea paginilor web. Aceste programe-robot citesc metatag-urile din paginile dvs.
web. In functie de acestea, vor trece situl dvs. într-o categorie sau în alta, unde va fi
gãsit de utilizatorii respectivului motor de cãutare. Scriind cu atentie continutul
metatag-urilor, puteti ajunge în categoria doritã, în care sã fiti gãsit usor.

Metatag-urile sunt elemente HTML ce furnizeazã descrierea sitului, numele autorului,

cuvintele-cheie etc. Se scriu între etichetele <head> si </head>. De obicei, dupã
</title>.

In scrierea metatag-urilor, e utilã respectarea urmãtoarelor reguli, formulate de cãtre

webdesigneri cu experientã:

 dati prioritate cuvintelor cheie

 nu repetati cuvinte
 fiti concisi

Prezenta metatag-urilor keywords şi description e absolut obligatorie dacã doriti ca

situl dvs. sã fie indexat. Prezenta celorlalte metatag-uri e facultativã. Inregistrarea
sitului dvs. la motoarele de cãutare presupune:
1. Sã asteptati venirea programului-robot sau
2. Sã vã înregistrati singuri situl la motoarele de cãutare sau
3. Sã apelati la unele firme care înregistreazã situri

Nu existã o listã standard a metatag-urilor, ceea ce face ca multi autori sã-si permitã
sã defineascã metatag-urile ce le sunt necesare.

§ <description>
Exemplu:

<META NAME="Description" CONTENT="Leonard Cohen - biografie, discografie,

mp3-uri">
In cadrul acestui tag, veti furniza o descriere a sitului dvs. Acest tag e deosebit de
important deoarece, când apelati la motoarele de cãutare, e afisat dupã titlu. De
obicei, sunt afisate primele 20 de cuvinte din continutul metatag-ului. Acest continut
nu trebuie sã depãseascã 200 de caractere.

§ <keywords>
Exemplu:

<META NAME="keywords" CONTENT="Leonard

Cohen,download,muzica,mp3,gratis,free">
Sã presupunem cã ati realizat un sit dedicat cântãretului Leonard Cohen si cã acesta
a fost vizitat deja de programul-robot al unui motor de cãutare. Când un utilizator al
acelui motor de cãutare va introduce cuvântul de cãutare Cohen, printre zecile de
link-uri oferite ca rãspuns va fi si unul spre situl dvs. La fel, dacã introduceti cuvântul
de cãutare mp3. Sau o combinatie a acestora: Cohen mp3. Asadar, acest tag
produce enumerarea sitului dvs. la anumite cuvinte-cheie. E bine ca acestea sã fie
cât mai bine alese, adicã sã exprime cât mai exact continutul sitului.

§ <abstract>
Exemplu:

<META NAME="Abstract" CONTENT="Muzica lui Leonard Cohen">

Prezintã o abstractie sau un rezumat scurt al tag-ului DESCRIPTION. Nu e larg
suportat.

PRINCIPALELE METATAG-URI
§ author
Exemplu:
<META NAME="Author" CONTENT="Daniela Ioan">
Acest metatag indicã numele autorului paginii web curente. Nu e un tag larg suportat.

§ copyright
Exemplu:

<META NAME="Copyright" CONTENT="Acest manual poate fi copiat si listat dar nu

si comercializat">
In cadrul acestui tag, vã precizati drepturile de proprietate intelectualã asupra
respectivei pagini web.

§ content-language
Exemplu:

<META HTTP-EQUIV="Content-Language" CONTENT="EN">

Metatag-ul indicã limba în care e scris situl. In exemplul de mai sus, e indicat faptul
cã situl e scris în englezã. In cazul unui sit scris în francezã sau italianã, am fi folosit
FR, respectiv IT.

§ reply-to
Exemplu:
<META HTTP-EQUIV="reply-to" CONTENT="danielaioan2000@[Link] (Daniela
Ioan)">
Acest metatag precizeazã adresa de e-mail la care poate scrie vizitatorul paginii.

§ expires
Exemplul 1:

<META NAME="Expires" CONTENT="sambata,12 ianuarie 2002 16:21:00 GMT">

Acest metatag indicã data când documentul îsi pierde valabilitatea. In acel moment,
motoarele de cãutare sterg automat, din baza lor de date, informatiile despre pagina
respectivã. Pe de altã parte, acest tag îi cere browserului sã nu salveze pagina în
memoria sa cache.

Exemplul 2:

<META NAME="Expires" SCHEME="Month-Day-Year" CONTENT="01-05-2002

16:21:00 GMT">
Atributul scheme precizeazã formatul valorii trecute în content. Il ajutã pe utilizator
sã realizaze cã e vorba de data de 5 ianuarie 2002 si nu de 1 mai 2002. In general.
scheme precizeazã formatul valorii trecute în content.

§ distribution
Exemplu:

<META NAME="Distribution" CONTENT="Global">

Atributul content poate lua 3 valori:
 Global, când pagina e menitã distribuirii în masã, pentru toti utilizatorii
 Local, când pagina e menitã distribuirii în masã
 IU (=Internal Use), când pagina e menitã uzului intern, nu celui public

§ <content-script-type>

Exemplul 1:

<META NAME="Content-Script-Type" CONTENT="text/javascript">

Aceastã secventã de cod aratã cã limbajul folosit la client e JavaScript. Dacã în loc
de JavaScript am avea CSS, am scrie CONTENT="text/css".

§ refresh
Exemplu:

<META NAME="Refresh"
CONTENT="6;URL=[Link]
Acest metatag serveste redirectionãrii. Dacã inserati într-o pagina secventa de cod
de mai sus, dupǎ 6 secunde, vizitatorul va fi redirectionat cãtre pagina cu adresa
[Link] .

Aceasta înseamnã cã pagina care contine tag-ul de mai sus e o paginã "bridge"
(="punte"). Paginile de acest fel nu sunt agreate de motoarele de cãutare, a cãror
bazã de date o încarcã inutil. Nu toate browserele suportã acest metatag, de aceea
trebuie folosit doar când e cazul ( de exemplu, când un sit web s-a mutat la altã
adresã ). Acelasi efect poate fi obtinut folosind un program în JavaScript.

§ revisit
Exemplu:

<META NAME="Revisit-After" CONTENT="1 day">

Unele situri ( cum ar fi cele ale ziarelor sau siturile ce afiseazã cursul valutar ) îsi
schimbã periodic continutul. Prin urmare, programele-robot trebuie sã le reviziteze
periodic pentru a indexa informatia nouã. In sprijinul acestora vine metatag-ul revisit,
care le indicã dupã cât timp sã revinã.

§ robots
Exemplul 1:

<META NAME="Robots" CONTENT="index, follow">

Acest metatag le precizeazã robotilor ce pagini pot fi indexate/urmãrite/ignorate.
Atributul CONTENT poate lua valorile:
 index
 noindex
 follow
 nofollow

Exemplul 2:

<META NAME="Robots" CONTENT="all">

Valoarea all echivaleazã cu index, follow. Prin urmare, exemplul 2 echivaleazã cu
exemplul 1 . Valoarea all este valoarea implicitã.

Exemplul 3:

<META NAME="Robots" CONTENT="none">

Valoarea none echivaleazã cu noindex, nofollow.

§ Googlebot
Exemplul 1:

<META NAME="Googlebot" CONTENT="noarchive">

Googlebot e numele spider-ului folosit de motorul de cãutare Google. De ce s-a
introdus acest metatag, nu foarte util ? Serverul care vã gãzduieste situl poate cãdea
la un moment dat. Chiar atunci, mai multi utilizatori pot cãuta situl în Google. Pentru
a le satisface cererile, Google pãstreazã paginile sitului dvs. într-o memorie cache.
Pentru a avea acces la aceasta, utilizatorul nu trebuie decât sã execute un click pe
"Cached", link ce apare în fiecare paginã cu rezultate. Astfel, informatia din situl dvs.
e livratã non-stop utilizatorilor. Dezavantaj: în cache-ul lui Google se poate pãstra o
versiune mai veche a paginii dvs.
Pentru ca situl dvs. sã nu fie pãstrat în cache-ul lui Google, inserati metatag-ul de
mai sus. Pentru ca situl dvs. sã nu fie pãstrat în cache-ul niciunui motor de cãutare,
inserati în pagina dvs. codul de mai jos ( exemplul nr. 2 ), care reprezintã
generalizrea celui discutat:
Exemplul 2:

<META NAME="robots" CONTENT="noarchive">

Evident, folosirea acestor metatg-uri e nejustificatã în cazul siturilor al cãror continut
e împrospãtat rar. Informatii suplimentare despre roboti gãsiti la adresa
[Link].

TAG-URILE APPLET SI OBJECT

Java este un limbaj de programare orientat pe obiecte şi independent de platformǎ.
Este un limbaj case-sensitive. A fost creat de firma Sun şi distribuit gratuit. Dacǎ
sunteţi interesat de programarea în acest limbaj, veţi gǎsi Java Developer's Kit la
adresa [Link] şi pe CD-urile revistelor de informaticǎ.

Folosind Java, puteţi realiza applet-uri. Acestea sunt animaţii complexe, integrând
uneori sunete şi secvenţe video. De cele mai multe ori, sunt concepute astfel încât
utilizatorul sǎ aibǎ posibilitatea de a acţiona cu mouse-ul asupra applet-urilor.

Applet-urile pot fi vizualizate în browsere. Pentru integrarea acestora în paginile dvs.

web, trebuie sǎ folosiţi etichetele descrise mai jos.

§ <applet>
Exemplu:

<html><title>Salut</title>
<applet code="[Link]" width="100" height="50" align=left>
</applet>
</html>
Secvenţa de cod de mai sus produce rularea applet-ului [Link] într-o fereastrǎ
aflatǎ în stânga şi având lungimea de 100 pixeli şi cu înǎlţimea de 50 pixeli. Fişierul
[Link] conţine codul de maşinǎ virtualǎ al applet-ului. Acest cod va fi executat
de browserul dvs.
Atribute:
 Atributul code precizeazǎ numele fişierului .class folosit.
 Atributul codebase precizeazǎ calea cǎtre fişierul .class.
 Atributele width şi height dau lungimea şi înǎlţimea applet-ului, în pixeli sau
în procente.
 Atributul alt furnizeazǎ un text explicativ browserelor în care applet-ul nu
poate rula.
 Atributul align precizeazǎ poziţia applet-ului în paginǎ. Poate lua una dintre
urmǎtoarele valori: top, middle, bottom, left, right.
 Atributele hspace şi vspace dau dimensiunile pe orizontalǎ, respectiv pe
verticalǎ ale chenarului ce va apǎrea în jurul applet-ului.
 Atributul archive are ca valoare o listǎ de adrese relative sau absolute.
Acestea sunt adresele unor fişiere arhivate ( având extensia .jar ) pe care
browserul le poate descǎrca simultan, scurtând astfel durata download-ului.

Deşi HTML 4.0 Strict a exclus tag-ul <applet> în favoarea tag-ului <object>,
browserele actuale îl recunosc în continuare.

§ <object>
In HTML 4.0, tag-urile <img>, <applet>, <embed> şi <bgsound> au fost înlocuite de
tag-ul <object>. Totuşi, browserele actuale continuǎ sǎ le recunoascǎ şi pe primele
patru.
Tag-ul <object> e inclus în body şi permite introducerea în paginile web a imaginilor,
applet-urilor, sunetelor, fişierelor VRML.
Exemplu:

<object data="[Link]" type="video/quicktime" title="Secvente de la majorat"

width="200" height="180" standby="Nu disperati, pana la urma se va incarca"
declare align="top">
<param name=pluginspage value="[Link]
<param name=autoplay value=true>
<a href="fis/[Link]">Secvente de la majorat</a>
</object>
In acest fel, se introduce in paginǎ fişierul video [Link], într-o zonǎ cu lungimea de
200 pixeli şi cu înǎlţimea de 180 pixeli, aflatǎ în partea de sus a paginii. Pânǎ la
încǎrcarea acestui fişier video, se va afişa mesajul "Nu disperaţi, pânǎ la urmǎ se va
încǎrca". Unele browsere nu încarcǎ imagini video, iar utilizatorilor acestora li se
oferǎ accesul la fişierul [Link] din directorul fis, care prezintǎ un conţinut
alternativ.

Atributele suportate de tag-ul <object> sunt:

 Atributul data: precizeazǎ URL-ul fişerului introdus.

 Atributele width şi height stabilesc lungimea şi înǎlţimea zonei de afişare a
applet-ului.
 Atributul type: precizeazǎ tipul obiectului, acesta putând fi imagine, clip video,
applet, sunet.
 Atributul standby: precizeazǎ textul ce va afişat în timpul încǎrcǎrii applet-ului.
 Atributul declare: nu ia valori. Prezenţa sa în interiorul tag-ului <object> are ca
efect faptul cǎ declaraţia obiectului nu va fi instanţiatǎ imediat, ci mai târziu,
dupǎ click-ul utilizatorului pe un link sau pe un buton.
 Atributul align: stabileşte poziţia obiectului în paginǎ. Poate lua una dintre
urmǎtoarele valori: top, middle, bottom, left, right.
 Atributul border a fost exclus din HTML 4.0 . In variantele anterioare ale
acestui limbaj, preciza grosimea chenarului. Evident, lua o valoare numericǎ,
în pixeli.
 Atributele hspace şi vspace au fost excluse din HTML 4.0 . Precizau spaţiul
lǎsat liber în jurul obiectului, pe orizontalǎ, respectiv pe verticalǎ. Luau valori
numerice, exprimate în pixeli.

TAG –UL PARAM

Acest tag serveşte definirii parametrilor applet-ului introdus in pagina web.

Exemplul 1:

<html><title>Salut</title>
<APPLET CODE="[Link]" WIDTH=100 HEIGHT=100>
<PARAM NAME=img1 VALUE="/images/[Link]">
<PARAM NAME=img1 VALUE="/images/[Link]">
<PARAM NAME=img2 VALUE="/images/[Link]">
>IMG SRC="[Link]" ALT="" WIDTH=100 HEIGHT=100>
</APPLET>
Applet-ul realizeazǎ animaţia imaginilor [Link], [Link] şi [Link] din directorul images.
Browserelor care nu suportǎ Java li se furnizeazǎ imaginea [Link].

Exemplul 2:

<applet archive="[Link]" code="[Link]" width="356" height="376">

<param name=credits value="Applet by Fabio Ciucci ([Link])">
<param name=image1 value="[Link]">
<param name=image2 value="[Link]">
<param name=image3 value="[Link]">
<param name=image4 value="[Link]">
<param name=link1 value="[Link]
<param name=link2 value="NO">
<param name=link3 value="[Link]
<param name=link4 value="NO">
<param name=statusmsg1 value="Atelierul-scoala">
<param name=statusmsg2 value="Laboratorul de locomotive">
<param name=statusmsg3 value="Sala de sport">
<param name=statusmsg4 value="Biblioteca">
<param name=speed value="5">
<param name=pause value="300">
<param name=flipcurve value="6">
<param name=backr value="64">
<param name=backg value="96">
<param name=backb value="160">
Sorry, your browser doesn't support Java.
</applet>
Codul de mai sus poate fi gǎsit în pagina [Link]/applet/[Link].
Se observǎ cǎ applet-ul realizeazǎ o animaţie sofisticatǎ, folosind patru imagini:
[Link], [Link], [Link], [Link]. Prima şi a treia constituie link-uri cǎtre situl
firmei [Link], unde lucreazǎ Fabio Ciucci, autorul applet-urilor.
 Parametrul speed poate lua valori între 1 şi 255, care seteazǎ viteza "valului"
pe care îl vedeţi în applet.
 Parametrul pause ia o valoare exprimatǎ în milisecunde, care reprezintǎ
intervalul de timp dintre douǎ "valuri".
 Parametrul flipcurve seteazǎ amplitudinea "valului".
 Parametrul statusmsg1 ia o valoare care e un şir de caractere. Acest şir de
caractere va fi afişat în statusbar.
 Componentele RGB ale imaginii pot fi setate prin intermediul parametrilor
backb, backg, backr.

Se observǎ cǎ mesajul alternativ "Sorry, your browser doesn't support Java" apare în
codul-sursǎ dupǎ parametri şi înainte de eticheta </applet>.

Observatie: E grozav dacǎ ştiţi Java şi vǎ realizaţi propriile applet-uri, dar e mai
comod sǎ utilizaţi applet-urile scrise de alţii, dupǎ ce le-aţi adaptat necesitǎţilor dvs.
Printre aplicaţiile cu ajutorul cǎrora puteţi insera applet-uri în paginile dvs. web , se
numǎrǎ:

 Anfy 3D 1.4
Aceastǎ aplicaţie poate fi folositǎ cu mare uşurinţǎ de cǎtre cei lipsiţi de
cunoştinţe de Java. Vǎ oferǎ un set de 40 de applet-uri şi un program numit
"Anfy Wizard", ce ruleazǎ sub Windows. Applet-urile sunt grupate astfel:
1. Banner/Slideshow
2. Fractal/A-Life
3. Image Effects
4. 3D applets
5. Navigational menus
6. Others

Parametrii applet-urilor pot fi configuraţi dupǎ cum doriţi, folosind "Anfy

Wizard". Se pot adǎuga şi efecte sonore. Fişierele .class trebuie copiate în
acelaşi director cu fişierele .html, .gif şi .jpg. Upload-ul acestui director poate fi
fǎcut numai folosind FTP în modul binar, nu şi în modul ASCII. Altfel, applet-
urile nu vor apǎrea şi veţi primi mesaj de eroare.
Observaţie: Aceastǎ aplicaţie a fost distribuitǎ, în regim freeware, pe CD-urile
revistelor de informaticǎ. Regimul freeware se referǎ numai la siturile
 necomerciale.

 build-IT
Produs complex al firmei Adobe, destinat utilizatorilor avansaţi. Pentru citirea
tutorial-ului, trebuie sǎ dispuneţi de Adobe Acrobat. Distribuit freeware pe CD-
urile revistelor de informaticǎ.

INCHEIERE
Ca orice alt limbaj, HTML a cunoscut mai multe versiuni, cea mai recentǎ fiind
versiunea 4.0.

Parcurgând paginile anterioare, aţi observat, desigur, redundanţa unor etichete.

Etichetele <s> şi <strike> produc acelaşi efect, adicǎ apariţia unei linii orizontale
peste textul încadrat. Etichetele <b> şi <strong> produc îngroşarea textului, iar <i> şi
<cite> afişarea cu italice.

Acest exces de etichete şi atitudinea diferitǎ faţǎ de frames se aflǎ la originea

scindǎrii limbajului HTML 4.0 în trei variante, care existǎ concomitent:

 HTML 4.0 Strict

Nu acceptǎ frames şi nu include elementele basefont, center, font, s, strike, u,
applet, dir, isindex, menu. Primelor şase li se preferǎ elementele CSS, iar
urmǎtoarelor li se preferǎ elementele object, ul, input, ul.
Aceastǎ variantǎ de HTML este cea recomandatǎ de consorţiul W3C.
Folosind-o, veţi realiza pagini web care nu vor avea nevoie de recondiţionare
mai mult timp decât cele scrise în alte variante de HTML.
Un document scris în HTML 4.0 Strict va avea în codul sursǎ, înaintea
etichetei <html>, urmǎtoarea linie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"[Link]

 HTML 4.0 Transitional

Conţine toate elementele din HTML 4.0 Strict, plus unele atribute ( cum ar fi
atributul "target" al tag-ului <a href=" "> ) şi elementele decǎzute. Faptul cǎ un
document e scris în aceastǎ variantǎ a HTML-ului se declarǎ astfel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"[Link]

 HTML 4.0 Frameset

E o variantǎ a lui HTML 4.0 Transitional pentru documentele ce folosesc
frames. Documentele scrise în aceastǎ variantǎ de HTML se declarǎ astfel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

"[Link] /div>

Nu ni se pare inutil sǎ precizǎm cǎ browserele actuale recunosc şi unele dintre

versiunile anterioare ale HTML-ului.
HTML nu e singurul limbaj de marcare folosit pe web. Pe lângǎ HTML, existǎ şi XML
(eXtensible Markup Language ), precum şi XHTML (eXtensible Hypertext Markup
Language ). Acesta din urmǎ este considerat de unii autori "un document XML cu
vocabular HTML" ( vezi "Cine se teme de X ?" de Molly E. Holzschlag în
"PCMagazine" din octombrie 2001 ). Practic, XHTML foloseşte tot etichetele HTML,
dar într-un mod mai riguros: toate elementele nevide au etichete de închidere,
etichetele se scriu numai cu minuscule, ghilimelele sunt obligatorii etc.

Sperǎm cǎ acest manual v-a fost de folos. O ultimǎ recomandare: dacǎ vreţi o
diplomǎ care sǎ vǎ certifice cunoştinţele, vizitaţi [Link]. Acest sit
organizeazǎ examene online, unele gratuite, altele contra unei sume modice.
Examenul poate avea loc în orice moment al zilei ( sau al nopţii ) doriţi.

Alte situri cu acelaşi profil:

 [Link]
 [Link]

Dacã acest manual nu v-a trezit pofta de a vã lucra singur pagina personalã, puteti
recurge la un template gratuit. Ii puteti face download-ul de la una dintre urmãtoarele
adrese:
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]
 [Link]

Templates la un pret modic: [Link]

Protocolul pentru transfer de fişiere (în engleză File Transfer Protocol, abreviat FTP) este
un protocol (set de reguli) utilizat pentru accesul la fişiere aflate pe servere din reţele de
calculatoare particulare sau din Internet. FTP este utilizat începând de prin anul 1985 şi
actualmente este foarte răspândit. Numeroase servere de FTP din toată lumea permit să se
facă o conectare la ele de oriunde din Internet, şi ca fişierele plasate pe ele să fie apoi
transferate (încărcate sau descărcate). Webul nu aduce aici mari schimbări, ajută doar ca
obţinerea fişierelor să se realizeze mai uşor, având o interfaţă mai prietenoasă decât aplicaţiile
(programele) de FTP. Pe viitor probabil că aplicaţiile de FTP vor dispare, deoarece nu există
nici un avantaj pentru o organizaţie să aibă un server de FTP în loc de un server HTTP, care
poate să facă tot ce face un server de FTP[necesită citare], şi chiar mult mai multe (desigur mai
există şi argumente legate de eficienţă). Este posibil să se acceseze un fişier local prin URL-ul
său, ca şi la o pagină de Web, fie utilizând protocolul "file" (fişier), fie pur şi simplu utilizând
calea şi numele fişierului. Această abordare este similară utilizării protocolului FTP, dar nu
necesită existenţa unui server. Desigur funcţionează numai pentru fişiere locale.

Generalităţi/Definiţii

Internetul atrage mulţi utilizatori pentru că le oferă posibilitatea de a consulta o varietate de

programe, documentaţii, ştiri şi alte tipuri de resurse. Pentru a intra în posesia fişierelor ce
conţin informaţiile, toţi aceşti utilizatori folosesc programe bazate pe protocolul FTP,
responsabile de transportul celor mai mari cantităţi de date pe reţea. File Transfer Protocol
(FTP) este serviciul care dă posibilitatea utilizatorilor de a transfera fişiere de la un calculator
aflat în Internet, care se numeşte remote host, pe calculatorul local.
FTP este cea mai folosită metodă pentru transferul fişierelor, indiferent de tipul şi dimensiunea
acestora, de la un computer la altul, prin intermediul Internetului.

Cum funcţionează?
 FTP se foloseşte atunci când:
1. se transferă (upload ) pentru prima dată fişierele unui sit la o gazdă web:
- dacă vreţi să transferaţi fişiere din calculatorul dvs. pe server trebuie să faceţi
upload, selectând bine-nţeles directorul în care se găsesc fişierele. Fişierele sunt apoi
copiate dintr-un director în altul. Procedura este asemănătoare cu copierea unor
fişiere dintr-un director în altul, pe un calculator.
2. se înlocuieşte un fişier sau o imagine.
3. se încarcă (download ) fişiere de pe un alt computer:
- dacă vă interesează anumite fişiere de pe serverul gazdă puteţi alege opţiunea
download pentru a le putea transfera într-un anumit director de pe calculatorul propriu.
4. se permite accesul unei alte persoane pentru a încărca un fişier dintr-un anumit site.

FTP transferă fişiere text sau binar între un server şi un client FTP.
Pentru a transfera un fişier de la un server FTP sau remote host, e nevoie de un program
numit client FTP. Acestea sunt de două tipuri: cu interfaţă grafică, sub Windows, OS2 etc.,
sau în mod text, cu linie de comandă, sub DOS, Unix etc. Utilizatorii FTP cu interfaţă grafică
uşurează munca, toate operaţiile decurgând analog cu cele folosite pentru transferul de fişiere
pe acelaşi calculator, dintr-un director în altul.
Exemple:

Utilizatorii în mod text folosesc comenzi standard, gen DOS. După ce se realizează
conectarea la serverul dorit cu comanda open nume_server (ex: open [Link]), serverul va
răspunde cu un mesaj de identificare ce conţine denumirea şi tipul sistemului de operare pe
care rulează. Apoi serverul cere utilizatorului să introducă un nume de utilizator (user) şi o
parolă. Dacă serverul este unul public va permite accesul folosind ca nume de utilizator
anonymous iar ca parolă adresa de poştă electronică. În continuare se vor folosi comenzi
asemănătoare cu cele DOS sau Unix, depinzând de sistemul de operare al serverului. Pentru
a afla detalii legate de o comandă, se tastează în cadrul aplicaţiei FTP help şi apoi help
comanda, unde comanda este comanda despre care se doresc informaţii.