Documente Academic
Documente Profesional
Documente Cultură
Primii pasi
Orice document HTML incepe cu notatia <html> si se termina cu
notatia </html>. Aceste "chestii" se numesc in literatura de specialitate "TAGuri".Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara
deschisa "<" si se termina cu o paranteza unghiulara inchisa ">".
Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa
pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in
timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:
-sectiunea de antet <head>...</head> si - corpul
documentului <body>...</body>. Blocul <body>...</body> cuprinde continutul
propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra browser-ului.
O eticheta poate fi scris atat cu litere mici, cat si cu litere mari.
Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce apar
intre etichete sunt ignorate de catre browser.
Deci un prim document HTML ar fi ceva de genul asta:
<html>
<head> </head>
<body>
</body>
</html>
Asa arata primul document HTML. Copiati-l folosind Copy/Paste intr-un fisier nou
si salvati-l ca PRIM.HTM sau PRIM.HTML. Apoi porniti Netscape Navigator sau
Internet Explorer, dati CTRL-O si introduceti calea spre fisier. Dati OK si ... nimic.
Sa nu disperam ... vom adauga primele elemente la pagina noastra. In primul
rand, titlul unei pagini se obtine inserand in sectiunea <head>...</head> a
urmatoarei linii:
<title>Aceasta
<body>
paginii</title>
Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si "
CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un
bloc <pre>...</pre>.
<html>
<head>
<title>bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
Acest lucru se face prin intermediul atributului text al etichetei <body> dupa
sintaxa<body text=culoare>. In urmatorul exemplu textul are culorea rosie.
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
O eticheta poate avea mai multe atribute.De exemplu , o eticheta cu trei atribute
arata astfel: <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 =
valoare3>. Urmatorul exemplu prezinta o pagina cu fondul de culoare albastra si
textul de culoare galbena.
<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
unde:
numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; (1 pentru fontul cel mai mic si 7
pentru fontul cel mai mare);
culoare - este o culoare precizata prin nume sau printr-o constructie RGB;
font - poate fi un font generic ca " serif ", " san serif ", " cursive ", "
monospace ", "fantasy " sau un font specific instalat pe calculatorului
clientului, ca " Times New Roman ", " Helvetica " sau " Arial ".Se accepta
ca valoare si o lista de fonturi separate prin virgula, de exemplu:
" Times New Roman, serif,monospace ".
Domeniul de valabilitate al caracteristicelor precizate de aceasta eticheta se
intinde de la locul in care apare eticheta pana la sfarsitul paginii sau pana la
urmataorea eticheta<basefont>.
Daca acest atribut lipseste atunci textul din pagina Web are atribute prestabilite
sau atribute precizate de browserul utilizat.
Atributele prestabilite sunt: size = 3, color = black, si style = " Times New Roman
".
Pozitionarea continutului paginii Web fata de marginile ferestrei browserului se
poate face cu ajutorul a doua atribute ale etichetei <body>:
leftmargin
topmargin
<html>
<head>
<title>Configurarea textului si stabilirea marginii </title>
</head>
<body leftmargin="100" topmargin="50">
Textul are atribute implicite. <br><basefont style="Arial" color="blue" size="6">
Textul este scris cu fontul "Arial", culoare albastru si marime 6. </body>
</html>
mare<big> si mai
<html>
<head>
<title>Blocuri
</head>
<body>
ingrosat si
3. Fonturi
Un font este caracterizat de urmatoarele atribute:
culoare (stabilita prin atributul color);
Familia fontului
Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de
caractere). Exista cinci familii generice de fonturi care sunt de regula disponibile
pe toate calculatoarele utilizatorilor: serif, sans serif, cursive, monospace si
fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei.
Pot fi introduse mai multe fonturi separate prin virgula.
<font face="Arial, serif, monospace">
<title> Culoarea
</head>
<body>
si familia fontului</title>
Marimea fontului
Penrtu a stabili marimea unui font se utilizeaza atributul size al etichetei. Valorile
acestui atribut pot fi:
1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);
+1, +2, etc. pentru a mari dimensiunea fontului cu 1, 2, etc. fata de
valoarea curenta;
-1, -2, etc. pentru a micsora dimensiunea fontului cu 1, 2, etc. fata de
valoarea curenta.
Marimea unui font poate fi stabilita exact cu ajutorul atributului point-size. Valorile
acceptate de acest atribut pot fi orice numere naturale pozitive.Numarul astfel
precizat reprezinta marimea fontului in puncte tipografice.
Acest atribut functioneaza numai cu Netscape Communicator.
<html>
<head>
<title> Marimea
</head>
<body>
fontului</title>
Communicator).</font> <br>
<font point-size="50">Fonturi de marime 50 pt (numai cu Netcape
Communicator).</font>
</body>
</html>
vezi acest exemplu
fontului</title>
4. Blocuri de text
Aceste etichete nu se refera la particularitatiile caracterelor ce compun textul, ci
la functiile pe care le poate avea un bloc de text in cadrul paginii Web.
Toate aceste etichete produc automat trecerea la un rand nou si adaugarea unui
spatiu suplimentar.
Inserarea unei adrese
Daca intr-o pagina web trebuie inclusa o adresa ,atunci putem utiliza facilitatile
oferite de o eticheta dedicata: <address>...</address>.
<html>
<head>
<title> Adresa</title>
</head>
<body>
</body>
</html>
vezi acest exemplu
Pentru ca un bloc de text sa fie indentat ( marginea din stanga a textului sa fie
deplasata la dreapta la o anumita distanta fata de marginea paginii ), acesta
trebuie inclus intre etichetele <blockquote>...</blockquote>.
<html>
<head>
<title> Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaza este indentat:<blockquote> Aceste etichete nu se refera la
Blocul preformatat
Ora/Ziua
8:00
9:00
Luni
Marti
Miercuri
Romana Matematica
Sport
Geografie
Istorie
Fizica </pre>
</body>
</html>
vezi acest exemplu
Blocuri paragraf
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua si permite:
inserarea unui spatiu suplimentar inainte de blocul paragraf;
inserarea unui spatiu suplimentar dupa blocul paragraf, daca se foloseste
delimitatorul </p> (acesta fiind optional);
alinierea textului cu ajutorul atributului align, avand valorile posibile " left ",
" center " sau " right ".
<html>
<head>
<title> Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Lini generata de un paragraf (implicit paragraful este aliniat la stanga).
<p align="right"> Paragraf aliniat la dreapta.Paragraf aliniat la
dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta. Paragraf aliniat la
dreapta.Paragraf aliniat la dreapta.Paragraf aliniat la dreapta.
<p align="center"> Paragraf aliniat in centru.Paragraf aliniat in centru.Paragraf
aliniat in centru.Paragraf aliniat in centru. Paragraf aliniat in centru.Paragraf
aliniat in centru.Paragraf aliniat in centru.
</body>
</html>
vezi acest exemplu
Blocuri de titlu
Linii orizontale
Intr-o pagina Web pot fi inserate linii orizontale.acest lucru se face cu ajutorul
etichetei<hr>. Pentru a configura o linie orizontala se utilizeaza urmatorele
atribute ale etichetei<hr>:
align permite alinierea liniei orizontala. Valorile posibile sunt " left " ,"
center " si " right ";
Urmeaza o linie aliniata in centru , de latime 50%, grosime 5 pixeli , fara umbra.
<hr align="center" width="50%" size="5" noshade> Urmeaza o linie aliniata
la dreapta , de latime 150 de pixeli, grosime 12 pixeli , de culoare rosie.
<hr align="right" width=150 size=12 color="red">
</body>
</html>
vezi acest exemplu
Blocuri <center>
Blocuri <nobr>
linie. O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.
O singura linie.O singura linie.O singura linie.O singura linie.O singura linie.
</nobr>
</body>
</html>
vezi acest exemplu
Blocuri <div>
</div>
<div align="center">
5. Imagini
Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de
browsere pentru fisierele imagine sunt:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
XPM (X PixMap) cu extensia .xmp;
XBM (X BitMap) cu extensia .xbm;
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai raspandite formate sunt GIF(8biti pentru o culoare, 256 culori posibile)
si JPEG (24biti pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini
imagine, atunci adresa URL a imaginii este formata numai din numele imaginii,
inclusiv extensia.
<html>
<head><title> O pagina cu imagine</title></head> <body> O pagina care
contine o imagine
<img src="w3.gif"> Text dupa imagine.
</body>
</html>
vezi acest exemplu
imagine.
</body>
</html>
vezi acest exemplu
Alinierea unei imagini se poate face prin intermediul atributului align care poate
lua urmatorele valori:
" left " - aliniere la stanga; celelalte componente sunt dispuse pe in partea
dreapta;
" right " - aliniere la dreapta; celelalte componente sunt dispuse pe in
partea stanga;
" top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de
sus a textului ce precede imaginea;
" middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a
textului ce precede imaginea.
" bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de
baza a textului.
<html>
<head><title> Alinierea unei imagini</title></head> <body> Alinieri:
<br> Pe verticala:
<img src="w3.gif" align="top">
La mijloc: <img src="w3.gif" align="center">
Jos: <img src="w3.gif" align="bottom"> Text dupa imagine.
</body>
</html>
vezi acest exemplu
O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop
se foloseste atributul background al etichetei <body>, avand ca valoare adresa
URL a imaginii.
Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.
<html> <head><title> Pagina cu imagine de fond</title></head> <body
background="w3.gif">
1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>
vezi acest exemplu
Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.
Printre aceste utilizari speciale putem enumera:
1. Linii orizontale formate cu ajutorul imaginilor .
2. Simboluri speciale pentru elementele unei liste neordonate ( vezi ).
6. Legaturi
Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web.
Ele transforma un text obisnuit in hipertext sau hiperlegatura, care premite
trecerea rapida de la o informatie aflata pe un anumit server la alta informatie
memorata pe un alt server aflat oriunde in lume.
Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran sensibile
la apasarea butonului stang al mouse-ului.
O legatura catre o pagina aflata in acelasi director
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 2 </h3>
<a href="leg_ex1.html">
Link catre pagina 1 </a>
</body>
</html>
vezi acest exemplu
Daca pagina referita se afla pe acelasi disc local, dar intr-un alt director atunci
pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea
relativa.
<html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local</title>
</head>
<body>
<h3>Pagina 3 </h3>
<a href="../exemple/list/listex_11.html">
Link catre o pagina cu liste </a>
</body>
</html>
vezi acest exemplu
Ancore
Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc
legaturi.
O ancora se defineste de asemenea prin eticheta <a>. Pentru a defini ancora se
utilizeaza atributul name care primeste ca valoare un nume atribuit ancorei (de
exemplu "leg1").
Pentru a insera o legatura catre "leg1" definita in aceeasi pagina se utilizeaza
eticheta<a> avand atributul href de valoare "#leg1".
Pentru a introduce o legatura catre o ancora definita in alt document (alta pagina)
Atributul id este un atribut universal ,adica poate fi atasat oricarui element al unei
pagini Web.
Acest atribut va inlocui complet atributul name, care putea fi atasat numai
anumitor elemente.
Atributul id primeste ca valoare un nume (de exemplu "id1") care identifica in
mod unic un element.
Atributul id poate fi utilizat pe post de ancora intr-o pagina Web conform sintaxei:
<eticheta id = "id1"> ... </eticheta>
<a href = "#id1" >Link catre elementul "id1" </a>
o culoare pentru legaturile vizitate (s-a efectuat cel putin un clic pe ele)
o culoare pentru legaturile active (deasupra carora se afla mouse-ul la un
moment dat).
Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>:
o link pentru legaturile nevizitate;
o vlink pentru legaturile vizitate;
o alink pentru legaturile active.
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau
conform standardului RGB.
<html>
<head>
<title> Culori pentru lagaturi</title>
</head>
<body link="blue" vlink="green" alink="red">
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, verde
pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3>
<a href=leg_ex1.html>
Link catre pagina 1 <br>
<a href=leg_ex2.html>
Link catre pagina 2 <br>
<a href=leg_ex8.html>
Link catre pagina 11 </a>
</body>
</html>
vezi acest exemplu
Intr-o pagina Web se poate afla legaturi care permit lansarea in executie a
aplicatiei de expediere a mesajelor electronice.
Pentru aceasta se utilizeaza in constructia adresei URL serviciul
Internet mailto: urmat de o adresa e-mail valida.
Pentru ca exemplul urmator sa functioneze trebuie ca:
pe calculator sa fie instalat o aplicatie de expediere a mesajelor
electrionice (Outlook Express pe calc. Windows , Pine pe calc. Unix);
O pagina Web poate contine legaturi catre orice tip de fisiere aflate pe orice
servere din Internet. Pentru aceasta se utilizeaza eticheta <a> avand valoarea
atributului href egala cu adresa URL a fisierului destinatie.
Atunci cand se efectueaza clic pe legatura din exemplul urmator browserul se
deschide o caseta de dialog - File download - care va permite:
sa salvati pe discul local fisierul
sa lansati in executie aplicatia capabila sa interpreteze corect fisierele de
tipul respectiv
<html>
<head>
<title> Legaturi catre fisiere oarecare</title>
</head>
<body>
<h3>Legaturi catre fisiere oarecare</h3><br>
<a href="fisier.zip">
Atributul title
Atributul title apartine etichetei <a> si comanda aparitia unei mici ferestre in
pagina Web cand mouse-ul se afla pe o legatura, fereastra in care este afisata
7. Liste
Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este
un set de definitii, referinte sau indexuri. Glosarele sunt exemple clasice in acest
sens; cuvintele sunt listate in ordine alfabetica, urmate de definitii ale termenilor
respectivi. In HTML, intreaga sectiune a unui glosar va fi gestoinata printr-o lista
de definitii, care este inclusa intr-o pereche de marcaje de lista de
definitii: <dl>...</dl> (de la "definition list" = lista de definitii).
Observatii:
- Un termen al listei este initiat de eticheta <dt> (de la
"definition term" = termen definit);
- Definitia unui termen este initiata de eticheta <dd> (de
la "definition description" = descrierea definitiei);
- Definitia unui termen incepe pe o linie noua si este
indentata;
<html>
<head><title>listex_1</title></head>
<body><h1 align="center">O lista de definitii</h1><hr>
<dl>
</dl>
</body>
</html>
Tag-urile <ul> si <li> pot avea un atribut type care stabileste caracterul afisat in
fata fiecarui element al listei. Valorile posibile al acestui atribut sunt:
o "circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);
"square" (patrat)
Listele neordonate pot fi imbricate pe mai multe niveluri
<html>
<head><title>listex_3</title></head>
<body><h1 align="center">O lista neordonata
de liste neordonate</h1><hr>
</ul>
</ul>
Tag-urile <ol> si <li> pot avea un atribut type care stabileste tipul de caractere
utilizate pentru ordonarea listei.Valorile posibile sunt:
" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );
" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
" I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari );
" i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici );
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - optiune
prestabilita );
Urmatorul exemplu este o lista ordonata cu cifre romane
<html>
<head><title>listex_5</title></head>
<body><h1 align="center">O lista ordonata
cu cifre romane</h1><hr>
<ol type="I">Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple<li>Aqua
</ol>
</body>
</html>
Tag-ul <ol> poate avea un atribut start care stabileste valoarea initiala a
secventei de ordonare.Valoarea acestui atribut trebuie sa fie un numar intreg
pozitiv.
Urmatorul exemplu este o lista ordonata cu litere mari, incepand de la valoarea
C.
<html>
<head><title>listex_6</title></head>
<body><h1 align="center">O lista ordonata
C</h1><hr>
Tag-ul <li> poate avea un atribut value care satileste valoare pentru elementul
respectiv al listei. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv
(vezi urmatorul exemplu).
<html>
<head><title>listex_7</title></head>
<body><h1 align="center">O lista ordonata
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate, ca in exemplul
urmator.
<html>
<head><title>listex_8</title></head>
<body><h1 align="center">O lista ordonata
neordonate</h1><hr>
de liste ordonate si
Daca intr-o lista, in loc de elementele acesteia introduse prin <li>, se insereaza
un bloc de text, aceasta va fi indentat ( intocmai ca elementele unei liste).
<html>
<head><title>listex_9</title></head>
<body><h1>Un bloc de text indentat</h1><hr>
</ol>
</body>
</html>
speciala</h1><hr>
8. Tabele
Tabelele ne permit sa cream o retea dreptunghiulara de domenii, fiecare
domeniu avand propriile optiuni pentru culoarea fondului, culoarea textului,
alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele
corespondente <table>...</table>. Un tabel este format din randuri. Pentru a
insera un rand intr-un tabel se folosesc etichetele<tr>...</tr> ( de la " table row "=
rand de tabel ).Folosirea etichetei de sfarsit </tr> este optionala.
Un rand este format din mai multe celule ce contin date.
O celula de date se introduce cu eticheta <td>..</td>.
<html>
<head><title>tabelex_1</title></head>
<body><h1 align=center>Un tabel simplu format
<table>
<tr> <td>cell 11</td> <td>cell 11</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
<tr> <td>cell 31</td> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td>cell 42</td></tr>
</table>
</body>
</html>
In mod prestabilit, un tabel nu are chenar. pentru a adauga un chenar unui tabel,
se utilizeaza un atribut al etichetei <tabel> numit border.
Acest atribut poate primi ca valoare orice numar intreg ( inclusiv 0 ) si reprezinta
grosimea in pixeli a chenarului tabelului.
Daca atributul border nu este urmata de o valoare atunci tabelul va avea o
grosime prestabilita egala cu 1 pixel, o valoare egala cu 0 a grosimii semnifica
absenta chenarului.
Cand atributul border are o valoare nenula chenarul unui tabel are un aspect
tridimensional.
<html>
<head><title>tabelex_2</title></head>
<body><h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border="4">
<tr> <td>cell 11</td> <td>cell 11</td></tr>
<tr> <td>cell 21</td> <td>cell 22</td></tr>
<tr> <td>cell 31</td> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td>cell 42</td></tr>
</table>
</body>
</html>
Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa tabel.Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel. Text dupa
tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel. Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa
tabel.Text dupa tabel.
</body>
</html>
colorat</h1><hr>
In exemplul urmator se utilizeaza un truc care permite afisarea intr-o pagina Web
a unui text pozitionat in centrul paginii.
<html>
<head><title>tabelex_8</title></head>
<body><h1 align=center>Un text centrat
<table width="100%" height="100%">
<tr> <td align="center">
<h2>Text centrat.</h2>
</table>
</body>
</html>
intr-o pagina</h1>
<html>
<head><title>tabelex_9</title></head>
<body><h1 align=center>Un tabel cu titlu</h1>
<table border="0"><caption align="top">Masini
<tr><td>Mercedes </td><td>Citroen </td><td>Jaguar </td></tr>
<tr><td>BMW </td><td>Volvo </td><td>Renault </td></tr>
</table>
</body>
</html>
Un tabel poate avea celule cu semnificatia de cap de tabel. Aceste celule sunt
introduse de eticheta <th> ( de la " tabel header " = cap de tabel ) in loc de <td>.
Toate atribute care pot fi atasate etichetei <td> pot fi de asemenea atasate
etichetei<th>. Continutul celulelor definite cu <th> este scris cu caractere aldine
si centrat.
<html>
<head><title>tabelex_10</title></head>
<body><h1 align=center>Un tabel cu titlu si cap de tabel</h1>
<table border="0"><caption align="bottom">Preturile masinii
<tr><th>Pret</th>
<th>Citroen</th>
<th>Jaguar</th>
<th>BMW</th>
<th>Volvo</th></tr>
<tr><th>In dolari</th>
<td>5000</td>
<td>100000</td>
<td>50000</td>
<td>80000</td></tr>
<tr><th>In lei</th>
<td>15000</td>
<td>300000</td>
<td>150000</td>
<td>240000</td></tr>
</table>
</body>
</html>
Dimensiunea unei celule de tip <td> sau de tip <th> pot fi stabilite exact cu
ajutorul a doua atribute ale acestor etichete: width pentru latime si height pentru
inaltime.
Valorile posibile ale acestor atribute sunt:
numere intregi pozitive ( inclusiv 0 ) reprezentand dimensiunea in pixeli a
latimii, respectiv a inaltimii unei celule;
procente din latimea , respectiv inaltimea tabelului.
<html>
<head><title>tabelex_12</title></head>
<body><h1 align=center>Un tabel cu celule de 100x150 de pixeli</h1><hr>
<table border="0">
<tr> <td width="100" height="150">cell 11</td> <td width="100" height="150">cell
11</td></tr>
<tr> <td width="100" height="150">cell 21</td> <td width="100" height="150">cell
22</td></tr>
</table>
</body>
</html>
<html>
<head><title>tabelex_13</title></head>
<body><h1 align=center>Un tabel simplu
cu chenar</h1><hr>
<table border="0">
<tr> <td rowspan="3">cell 11</td><br>cell 21<br>cell 31</td><td>cell 12</td><td
colspan="2" rowspan="3">cell 13 ,cell 14</td><br>cell 23, cell 24<br>cell 33, cell
34</td></tr>
<tr> <td>cell 22</td></tr>
<tr> <td>cell 32</td></tr>
<tr> <td>cell 41</td> <td colspan="3">cell 42,cell 43,cell 44</td></tr>
</table>
</body>
</html>
de latime mare</h1><hr>
<table border="0">
<tr> <td>cell 11</td> <td>cell 12</td></tr>
<tr> <td nowrap>cell 21</td> <td>cell 22 este
foaret lata.</td></tr>
</table>
</body>
</html>
daca un tabel are celule vide, atunci aceste celule vor aparea in tabel fara un
chenar de delimitare.
In scopul de a afisa un chenar pentru celule vide se utilizeaza urmatoarele
trucuri:
dupa <td> se pune ;
dupa <td> se pune <br>.
Caracterul ( no break space ) este de fapt caracterul spatiu.Un spatiu
introdus prin im\ntermediul acestui caracter nu va fi ignorat de browser.
<html>
<head><title>tabelex_15</title></head>
<body><h1 align=center>Un tabel cu celule
vide</h1><hr>
<table border="0">
<tr> <td>cell 11<td> <td>cell 12</td><td>cell
<tr> <td> </td> <td></td></tr>
</table>
</body>
</html>
13</td></tr>
background
bordercolor
bordercolorlight
bordercolordark
<html>
<head><title>tabelex_16</title></head>
<body><h1 align=center>Atribute "Internet Explorer"</h1><hr>
<table border="5" background="../../images/cauta.gif" cellspacing=15
bordercolor="maroon" bordercolodark="red">
<tr bgcolor="yellow"> <td>cell 11</td> <td>cell 12</td><td>cell 13</td></tr>
<tr bgcolor="yellow"> <td> </td><td></td> <td></td></tr>
</table>
</body>
</html>
span
width
align
span
width
align
<html>
<head><title>tabelex_17</title></head>
<body><h1 align=center>Grupuri de coloane</h1><hr>
<table width="400" cellspacing=10>
<colgroup> <col width="100" align=right> <col width="100" align=center> <col
width="200" align=right> </colgroup>
<tr> <td valign=top>Text in prima coloana.Text in prima coloana.Text in prima
coloana. Text in prima coloana.</td> <td valign=top>Text in coloana doua.Text
coloana doua.Text in coloana doua.Text in coloana doua.</td> <td
valign=top>Text in coloana a treia.Text in coloana a treia.Text in coloana a
treia.Text in coloana a treia.</td></tr>
</table>
</body>
</html>
in
Atributul frame al etichetei <table> permite specificarea partilor din chenarul unui
tabel care vor fi afisate.
Valorile posibile ale acestui atribut sunt:
void - elimina toate muchiile exterioare ale tabelului;
above - afiseaza o muchie in partea superioara a cadrului tabelului;
below - afiseaza o muchie in partea inferioara a cadrului tabelului;
si rules</h1>
In specificatiile HTML 4.0, continutul unui tabel poate fi impartit in subblocuri prin
elementele:
<thead><tr><td>...</thead> ( un singur rand );
<tfoot><tr><td>...</tfoot> ( un singur rand );
<tbody><tr><td>...</tbody> ( oricate randuri );
Intr-un tabel exista un singur subbloc de tipul <thead> si un singur subbloc de
tipul<tfoot>, dar pot exista mai multe subblocuri de tip <tbody>.
9. Ferestre in HTML
Ferestrele sau (cadrele) ne permit sa definim in fereastra browserului subferstre
in care sa fie incarcate documente HTML diferite.
Ferestrele sunt definite intr-un fisier HTML special , in care
blocul <body>...</body>este inlocuit de blocul <frameset>...</frameset>.
In interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>.
Un atribut obligatoriu al etichetei <frame> este src, care primeste ca valoare
adresa URL a documentului HTML care va fi incarcat in acel frame. Definirea
cadrelor se face prin impartirea ferstrelor (si a subferestrelor) in linii si coloane:
impartirea unei ferstre intr-un numar de subferestre de tip coloana se face
cu ajutorul atributului cols al etichetei <frameset> ce descrie acea
fereastra;
impartirae unei ferestre intr-un numar de subferestre de tip linie se face cu
ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastra;
valoare atributelor cols si rows este o lista de elmente separate prin virgula ,
care descriu modul in care se face impartirea.
Elementele listei pot fi:
1. un numar intreg de pixeli;
2. procente din dimensiunea ferestrei (numar intre 1 si 99 terminat cu
%);
3. n* care inseamna n parti din spatiul ramas;
<html>
<head><title>ferex_3</title></head>
<frameset rows="*,*" cols="*,*">
<frame src="p1.html">
<frame src="p2.html">
<frame src="p3.html">
<frame src="p4.html">
</frameset>
</html>
Atributul scrolling al etichetei <frame> este utilizat pentru a adauga unui cadru o
bara de derulare care permite navigarea in interiorul documentului afisat in
interiorul cadrului.
Valorile posibile sunt:
"yes" - barele de derulare sunt adaugate intotdeauna;
"no"
Atributul noresize al etichetei <frame> (fara nici o valoare suplimentara) daca este
prezent, inhiba posibilitatea prestabilita a utilizatorului de a redimensiona cadrul
cu ajutorul mouse-ului.
Pozitionarea documentului intr-un cadru
Cadre interne
In acest caz, am specificat ca doresc o fereastra de cadru intern care are 40%din
inaltimea si 50% din latimea paginii curente.
Atributele aceptate de eticheta <iframe> sunt in parte preluate de la
etichetele<frame> si <frameset>,cum ar
fi: src,border,frameborder,bordercolor,marginheight, marginwidth,scrolling,name,noresize;
sau de la eticheta <img> vspace,hspace,align,width,height;
<html>
<head><title>ferex_8</title> </head>
<body>
<a href="p1.html" target="icad">
Fisierul1</a><br> <a href="p2.html" target="icad">
Fisierul2</a><br> <a href="p3.html" target="icad">
Fisierul3</a><br> <a href="p.html" target="icad">
Home</a><br> <center><iframe width="60%" height="50%" border=2 bordercolor=red
name="icad" src="p.html"> Daca vedeti acest text inseamna ca browserul
In mod prestabilit, la efectuarea unui clic pe o legatura noua pagina (catre care
indica legatura) o inlocuieste pe cea curenta in aceeasi fereastra (acelasi acdru).
Acest comportament se poate schimba in doua moduri:
prin plasarea in blocul <head>...</head> a unui element <base> care
precizeaza,prin atributul target numele ferestrei (cadrului) in care se vor
incarca toate paginile noi referite de legaturile din pagina curenta conform
sintaxei:
<base target="nume_ferastra/frame_de_baza">
Observatie:
- daca este prezent atat un atribut target in <base> cat si
un atribut target in <a>, atunci cele precizate de
atributul target din <a> sunt prioritare.
Numele unui cadru este stabilit prin atributul name al etichetei <frame> conform
sintaxei: <farme name="nume_frame">
In exemplul urmator este prezentata o pagina Web cu doua cadre.Toate
legaturile din cadrul 1 incarca paginile in cadrul 2.
<html>
<head><title>ferex_9_frames</title></head>
<frameset cols="20%,*">
<frame src="left.html" name="left">
<frame src="p.html" name="main">
</frameset>
</html>
<html>
<head><title>ferex_9_left</title> </head>
<body>
<a href="p1.html" target="main">
Fisierul1</a><br> <a href="p2.html" target="main">
Fisierul2</a><br> <a href="p3.html" target="main">
Fisierul3</a><br><br> <a href="p1.html" target="_blank">
Fis1 intr-o fereastra noua</a><br><br> <a href="p1.html" target="_self">
Fis1 in fereastra curenta</a><br><br> <a href="p.html" target="main">
Home</a><br>
</body>
</html>
"_parent" (incarcarea noii pagini are loc in cadrul parinte al cadrului curent
daca acesta exista, altfel are loc in fereastra browserului curent);
"_top" (incarcarea noii pagini are loc in fereastra browserului ce contine
cadrul curent);
10. Formulare
Un formular este un ansamblu de zone active alcatuit din butoane ,casete de
selectie,campuri de editare etc.
Formularele va asigura construirea unori pagini Web care permit utilizatorilor sa
introduca efectiv informatii si sa le transmita serverului.Formularele pot varia de
la o simpla caseta de text ,pentru introducerea unui sir de caractere pe post de
cheie de cautare - element caracteristic tuturor motoarelor de cautaredin Web pana la o structura complexa ,cu multiple sectiuni ,care ofera facilitati puternice
de transmisie a datelor. O sesiune cu o pagina web ce contine un formular
cuprinde urmatoarele etape:
1. Utilizatorul completeaza formularul si il expedieaza unui server.
2. O aplicatie dedicata de pe server analizeaza formularul completat si (daca
este necesar) stocheaza datele intr-o baza de date.
3. Daca este necesar serverul expedieaza un raspuns utilizatorului.
Un formular este definit intr-un bloc delimitat de etichetele
corespondente <form> si</form>.
Atribute esentiale ale elementului <form>
get (valoarea implicita).In acest caz ,datele din formular sunt adaugate la
adresa URL precizata de atributul action;
- nu sunt permise cantitati mari de date (maxim 1 Kb)
- intre adresa URL si date este inserat un "?".
Datele sunt adaugate conform sintaxei: nume_camp = valoare_camp.
Intre diferite seturi de date este introdus un "&".
Exemplu: "http://www.yahoo.com/cgi-bin/nume_fis.cgi?nume1 =
valoare1&nume2 = valoare2";
post In acest caz datele sunt expediate separat. Sunt permise cantitati
mari de date (ordinul MB)
Pentru ca un formular sa fie functional, trebuie precizat ce se va intampla cu el
dupa completarea si expediere.
Cel mai simplu mod de utilizare a unui formular este expedierea acestuia prin
posta electronica (e-mail).
Pentru aceasta se foloseste un atribut al etichetei <form> si anume action care
primeste ca valoare " mailto: " concatenat cu o adresa valida de e-mail catre care
se va expedia formularul completat.
Un formular cu un camp de editare si un buton de expediere
Pentru elementul <input> de tipul camp de editare (type = "text") , alte doua
atribute pot fi utile:
atributul size specifica latimea campului de editare depaseste aceasta
latime ,atunci se executa automat o derulare acestui camp;
atributul maxlength specifica numarul maxim de caractere pe care le
poate primi un camp de editare; caracterele tastate peste numarul maxim
sunt ignorate.
Observatii:
- daca atributul type lipseste intr-un element <input> ,
atunci campul respectiv este considerat in mod prestabilit
ca fiind de tip "text".
- formularele cu un singur camp (de tip text) nu au nevoie
de un buton de expediere, datele sunt expediate automat dupa
completarea si apasarea tastei ENTER.
Butonul Reset
Butoane radio
Butoanele radio permit alegerea ,la un moment dat , aunei singure variante din
mai multe posibile. Butoanele radio se introduc prin eticheta <input> cu
atributul type avand valoarea "radio".
<html>
<head><title>formex_4</title></head>
<body><h1>Un formular cu butoane radio</h1>
<hr>
<form action="mailto:xxxxx@xxx.com" method="post">
Alegeti sexul:<input type="radio" name="sex" value="b"><br>
Femeiesc:<input type="radio" name="sex" value="f"><br>
<input type="reset"> <input type="submit"> </form></body>
</html>
vezi acest exemplu
Casete de fisiere
Intr-o pereche "name = value" a unui formular se poate folosi intregul continut al
unui fisier pe post de valoare.
Pentru aceasta se insereaza un element <input> intr-un formular , cu
Liste de selectie
O lista de selectie permite utilizatorului sa aleaga unul sau mai multe elemente
dintr-o lista finita. Lista de selectie este inclusa in formular cu ajutorul etichetelor
corespondente <select>si </select>.
O lista de selectie poate avea urmatoarele atribute:
atributul name, care ataseaza listei un nume (utilizat in perechile
"name=value" expediat serverului);
atributul size, care precizeaza (printr-un numar intreg pozitiv , valoarea
prestabilita fiind 1) cate elemente din lista sunt vizibile la un moment dat pe
ecran (celelalte devenind vizibile prin actionarea barei de derulare atasate
automat listei).
Elementele unei liste de selectie sunt incluse in lista cu ajutorul
etichetei <option>.
din Cluj
<option value="UNBM" selected> Universitatea de Nord Baia Mare
<option value="UTT"> Universitatea Technica din Timisoara
<option value="UTB"> Universitatea Technica din Brasov
</select><br><br>
<input type="reset"> <input type="submit">
</form></body>
</html>
vezi acest exemplu
Daca atributul size este egal cu 1 atunci lista de selectie arata asa.
Lista de selectie cu selectii multiple
Un formular complex
pizza:
<td><input type="checkbox" name="ciuperci">cu ciuperci
<input type="checkbox" name="mexicana">mexicana <input
type="checkbox" name="europeana">europeana
<tr align=left><th>Alegeti plata:<td>
<ul style="background-color:lightblue;"> <li><input type="radio"
name="plata">cash <li><input type="radio" name="plata">card </ul> <tr
align=left><th>Comentarii:
Butoane
11. Stiluri
Stilurile pun la dispozitia creatorilor de site-uri noi posibilitati de personalizare a
paginilor Web. Un stil reprezinta un mod de a scrie un bloc de text ( adica
anumite valori pentru font, marime culoare, aliniere, distante fata de margini etc).
Exista doua modalitati de a defini un stil:
sintaxa CSS (Cascading Style Sheets);
sintaxa Javascript.
Cascading Style Sheets inseamna "foi in stilul cascada".
Stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite. De exemplu:
<style>
h1 {text-align:center; color:red;}
</style>
Toate titlurile care apar in fgisier ca fiind de marime 1 vor fi de culoare rosie si
centrate.
Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente (de ex. "h1",
"h2", si "p") atunci se utilizeaza o lista acestor elemente, separate prin virgula:
<style>
h1, h2, p {text-align:center; color:red;}
</style>
Clase de stiluri
Aceste stiluri permit definirea unui stil general si folosirea lui oriunde este
necesar. Exemplu:
Definim o clasa de stiluri "ac" (albastru si centrat) in interiorul
blocului <style>...</style>, aflat la randul lui in blocul <head>...</head>:
<style>
all.ac {text-align:center; color:blue;}
</style>
- "all" aflat in fata clasei de stiluri "ac" indica faptul ca aceasta clasa este
aplicabila tuturor blocurilor de text, atunci cand acest lucru este necesar.
La utilizarea clasei de stiluri in cadrul unui element se foloseste
atributul class avand ca valoare numele clasei de stil. Acesta este un atribut
universal adica este aplicabila tuturor elementelor. Observatii:
In interiorul unui bloc <style>...</style>, comentariile
sunt blocuri delimitate de /* si */ ( ca in C, C++, Java si
Javascript).
Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente
ale documentului (de exemplu "p") atunci in consturctia va aparea acest element
( de exemplu "p.rc").
<html>
<head><title>clasa de stiluri dedicata</title>
<style> p.ac {text-align:center; color:blue;} </style>
</head>
<body> <p>Acesta este un paragraf normal
<br> <p class=ac>Acesta este un paragraf albastru si centrat
</body>
</html>
vezi acest exemplu
Iata deci cum va arata (doar pentru IE 4.x sau mai mare):
Legatura
Nu este, insa singurul exemplu, in continuare aveti toate codurile pentru formele
de cursor pe care le puteti folosi:
auto
crosshair
creeaza o cruce
default
e-resize
sageata Est-Vest
hand
mana
help
semnul intrebarii
move
n-resize
sageata sud-nord
ne-resize
nw-resize
pointer
mana
s-resize
se-resize
sw-resize
text
w-resize
sageata Est-Vest
wait
clepsidra
12. Javascript
Scriptul este incadrat de marcajele <script>...</script> si totul este inglobat intrun comentariu astfel incat programele de navigare care nu interpreteaza
Javascript nu sunt derutate de scriptul in sine.
Multe evenimente pot fi gestionate cu Javascript.
Evenimen
t
Handler de
eveniment
blur
click
change
onChange
focus
onFocus
load
onLoad
mouseover utilizatorul deplaseaza indicatorul mouseului deasupra unei legaturi sau a unei
onBlur
onMouseover
ancore
select
onSelect
submit
onSubmit
unload
onUnload
<HTML> </HTML>
<HEAD> </HEAD>
Antetul documentului
TEXT=culoare
LINK=culoare
VLINK=culoare
ALINK=culoare
BACKGROUND = url
<P>
Paragraf
<Hn> <Hn>
<FONT> </FONT>
SIZE=n
FACE="a,b"
COLOR=s
<BR>
Linie noua
<PRE> </PRE>
Informatie preformatata
<!-- -->
Comenatriu HTML
<CENTER>
</CENTER>
<HR>
Rigla orizontala
SIZE=x
WIDTH=x
NOSHADE
ALIGN=x
COLOR=x
<A> </A>
HREF=url
Referinta hipertext
HREF=#nume
Name=nume
<DD>
Descriere definitie
<DL>
</DL>
<DT>
Termen de definitie
<LI>
Element de lista
<OL
TYPE=tip
START=x
<UL
TYPE=forma
Formatarea caracterelor
<B> </B>
<I> </I>
<U> </U>
<TT> </TT>
<CITE> </CITE>
Citare bibliogarfica
<CODE> </CODE>
Listing de program
<EM> </EM>
<KBD> </KBD>
Text de la tastatura
<STRONG>
</STRONG>
<VAR> </VAR>
<FRAMESET>
</FRAMESET>
COLS=x
ROWS=x
BORDER=x
FRAMEBORDER =x
FRAMESPACING =x
<FRAME>
SRC=url
NAME=nume
SCROLLING=scrl
FRAMEBORDER=x
MARGINHEIGHT=x
MARGINWIDTH=x
<NOFRAMES>
</NOFRAMES>
<IFRAME>
SRC=url
Sursa cadrului
NAME=s
HEIGHT=x
WIDTH=x
<TABLE> </TABLE>
Tabel HTML
BORDER=x
Chenarul tabelului
CELLPADDING=x
CELLSPACING=x
WIDTH=x
FRAME=valoare
RULES=valoare
BORDERCOLORDARK
= culoare
ALIGN=left
ALIGN=right
HSPACE=x
VSPACE=x
tabelului
COLS=x
<COLGROUP>
</COLGROUP>
<COL WIDTH=x>
<THEAD> </THEAD>
<BODY> </TBODY>
<TR </TR>
Linie de tabel
BGCOLOR=culoare
ALIGN=aliniere
<TD </TD>
BGCOLOR=culoare
COLSPAN=x
ROWSPAN=x
ALIGN=aliniere
VALIGN=aliniere
BACKGROUND=url
NOWRAP
ALIGN=baseline
ALIGN=caracter
ALIGN=justify
Adaugarea imaginilor
<IMG
SRC=url
ALT=text
ALIGN=alinier
e
HEIGHT=x
WIDTH=x
Latimea imaginii
BORDER=x
HSPACE=x
VSPACE=x
<FORM>
</FORM>
ACTION=url
METHOD=metoda
<INPUT
TYPE=optiune
posibile: text,password,checkbox,hidden,file,
radio,submit,reset,image.
NAME=nume
VALUE=valoare
CHECKED=optiune
SIZE=x
SIZE=x
<SELECT>
</SELECT>
NAME=nume
SIZE=x
MULTIPLE=x
<OPTION
VALUE=valoare
<TEXTAREA>
</TEXTAREA>
NAME=nume
ROWS=x
COLS=x
<FIELDSET>
</FIELDSET>
<LEGEND>
</LEGEND>
ALIGN=s
TABINDEX=x
DISABLED
READONLY
Carcatere speciale
&
& ampersand
tilda
<
>
simbolul de copyright
n mic cu tilda
HTML avansat
<STYLE> </STYLE>
TYPE=val
<SCRIPT>
</SCRIPT>
LANGUAGE=limbaj
Limbajul utilizat
EVENT=eveniment
FOR=numeobiect