Sunteți pe pagina 1din 20

.pe scurt !

Structura documentului HTML



Limbajul HTML este compus din coduri speciale numite marcaje (tag-uri) care se insereaza intr-un
document text pentru a specifica modul de formatare a acestuia. Orice marcaj este inclus intre doua
paranteze unghiulare <nume_marcaj>, cu ajutorul careia browserul detecteaza si recunoaste acest simbol
drept marcaj.
De obicei marcajele sunt in perechi (ex: <p>...</p>). Primul element este marcajul de deschidere iar cel de-
al doilea este marcajul de inchidere, care are pus in fata numelui simbolul "/".
De mentionat ca exista si marcaje fara pereche, ca de exemplu marcajul <br>.

Structura unui document HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Pagina personala a lui Ion!</title>
</head>

<body>
................
</body>

</html>


Un document HTML este alcatuit din trei sectiuni:
<html> Prima linie contine versiunea documentului HTML. Pana nu demult lipsa acesteia nu
influenta in nici un mod afisarea paginii. Totusi, includerea ei este recomandata cel putin din doua
considerente:
1. Asa o cere standardul 4.0
2. Exista programe validatoare HTML, cu ajutorul careia se poate verifica corectitudinea
documentului. Pentru a analiza pagina web ele folosesc acea versiune pe care o ai indicata in
pagina.
<html> - Orice document html se incepe cu marcajul html
<head> - Cu acest marcaj se incepe cea de-a doua sectiune, care contine informatii ce nu se afiseaza
in browser, cu exceptia marcajului <title> in care se specifica titlul paginii web si apare ca titlul
ferestrei browser-ului.
Marcajul <head> contine informatii cu privire la cuvintele cheie, descrierea site-ului, inserare de
cod JavaScript in pagina, etc.
<body> - In interiorul acestui marcaj se afla tot continutul paginii web care va aparea in browser
(text, imagini,etc.).






Exemplu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemplu 1</title>
</head>
<body>
<h1>Titlul paginii</h1>
<h2>Un titlu mai mic</h2>
<h3>Un titlu si mai mic</h3>

<p>Ceva text, ceva text, ceva text....</p>
<p align="center">Paragraf aliniat la centru</p>
<p align="right">Paragraf aliniat la dreapta</p>
<br>

<b>caractere ingrosate</b>, de asemenia <strong>caractere ingrosate</strong><br>
<i>caractere inclinate</i>, de asemenia <em>caractere inclinate</em><br>

<u>caractere subliniate</u><br>
<s>caractere taiate</s><br>

<font color="red" size="5" face="arial"> Font Arial, culoare rosie, dimensiunea 5. </font><br>

<code>
Cod sursa:<br>
if(x==5){<br>
alert(x);<br>
}
</code>

</body>
</html>
Titlul paginii
Un titlu mai mic
Un titlu si mai mic
Ceva text, ceva text, ceva text....
Paragraf aliniat la centru
Paragraf aliniat la dreapta
caractere ingrosate, de asemenia caractere ingrosate
caractere inclinate, de asemenia caractere inclinate
caractere subliniate
caractere taiate
Font Arial, culoare rosie, dimensiunea 5.
Cod sursa:
if(x==5){
alert(x);
}
Text
Explicatii

Sa o luam de la inceputul sectiunii <body>:
Primul marcaj <h1>(si in continuare cele doua <h2>,<h3>) este folosit in general pentru evidentierea
titlurilor (h - headings). Dimensiunea fontului variaza in functie de numarul din dreptul numelui marcajului
.
Exista sase categorii de marcaj, de la <h1>...</h1> cu dimensiunea cea mai mare a fontului, pana la
<h6>...</h6> cu dimensiunea cea mai mica a fontului.

Marcajul <p>...</p> specifica un paragraf si are un atribut optional align ce specifica alinierea paragrafului,
la dreapta - right, la centru - center, sau la stanga - left. Aparitia textului in partea stanga este stabilita
implicit, deci nu este nevoie sa specifici asta.

Marcajul <br> inseamna rand nou. Atunci cand vrei ca o propozitie sa apara in rand nou, va trebui sa incluzi
acest marcaj, pentru ca altfel browser-ul nu va intelege si propozitia va aparea in acelasi rand. (<br> e ca si
cum ai apasa "Enter" in Word, de exemplu.)

Textul scris in interiorul marcajelor <b>...</b> va aparea in pagina web, ingrosat. De asemenia se poate
utiliza marcajul <strong>...</strong> petru acelasi rezultat.

<i>...</i>, sau <em>...</em> pentru caractere inclinate,
<u>...</u> pentru a sublinia un text,
<s>...</s> pentru a taia un text.

Marcajul <font>...</font>are trei atribute optionale: color(culoare), face(tip font), si size(marime font).

Tot ceea ce urmeaza in interiorul marcajului <code>...</code>, specifica un fragment de cod. Acesta apare
sub un font monospace, Courier New de obicei.





Exista trei tipuri de liste in HTML:
1. Liste de definitii
2. Liste neordonate
3. Liste ordonate
Liste de definitii:

Se creaza cu ajutorul marcajelor:
<dl>...</dl> - lista de definitii
<dt>...</dt> - termenul definit
<dd>...</dd> - definitia

<dl>
<dt><b>Ingrediente</b></dt>
<dd>100g zahar</dd>
<dd>50g faina</dd>
<dd>3 oua</dd>

<dt><b>Prepararea</b></dt>
<dd>Se dau la mixer</dd>
<dd>Se pun in cuptor pe 10 minute la 150 grade</dd>
</dl>
Liste

Rezultat:
Ingrediente
100g zahar
50g faina
3 oua
Prepararea
Se dau la mixer
Se pun in cuptor pe 10 minute la 150 grade


Liste neordonate:

Listele neordonate se obtin cu ajutorul marcajelor:
<ul>...</ul> - lista neordonata
<li>...</li> - elementul listei


<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Rezultat:
HTML
CSS
JavaScript

Liste ordonate:

Listele ordonate se definesc cu ajutorul marcajelor:
<ol>...</ol> - lista ordonata
<li>...</li> - elementul listei

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

Rezultat:
Liste ordonate:
1. HTML
2. CSS
3. JavaScript













Linkurile (legaturi) constitue un element fundamental in elaborarea unui site. In lipsa lor, site-ul s-ar forma
doar dintr-o pagina de dimensiuni foarte mari si aceasta ar duce la la o nestructure a sa.
Un link se defineste cu ajutorul marcajului <a>...</a> care trebuie sa includa atributul href continind calea
pana la fisierul destinatie.

Exista doua tipuri de linkuri: interne si externe.

Link intern este o legatura in interioul site-ului tau. Deci, daca ai un site in care ai definit linkul Servicii si
acesta duce catre o pagina din interiorul site-ului servicii.html, atunci codul va arata ca cel de mai jos:

<a href="servicii.html">Servicii<a>

Link extern este o legatura care duce spre un site extern. In cazul acesta, accesarea unei pagini servicii.html
de pe site-ul www.un_sait_oarecare.com se va efectua astfel:




Implicit, dupa accesarea linkului, pagina nou ceruta va fi afisata in fereastra curenta. In cazul cand doresti
ca pagina sa se deschida intr-o noua fereastra, marcajului <a> i se adauga atributul target=_blank.

<a href="http://www.un_sait_oarecare.com/servicii.html" target="_blank"> Servicii<a>

De mentionat ca legaturile pot fi si catre alte tipuri de fisiere: imagini, fisiere audio, fisiere video.











Imaginile in paginile web sunt foarte importante. Cu ajutorul lor site-ul prinde viata si capata atractivitate,
dar trebuie luat in consideratie si faptul ca excesul de imagini va duce la incarcarea greoaie a site-ului.

Inserarea unei imagini in pagina se face cu ajutorul marcajului <img> care are ca atribute:

src - fisierul imagine (src - source)
width - latimea imaginii
height - inaltimea imaginii
alt - valoarea acestuia este un text. Poate fi o descriere a imaginii sau paginii. Textul este afisat in browser
doar atunci cand imaginea nu s-a incarcat sau nu poate fi gasita.
border - chenar. Poate lua valorile 1 (cu chenar) sau 0 (fara chenar).
align - alinierea imaginii la dreapta - right, stanga - left, centru - center.
<a href="http://www.un_sait_oarecare.com/servicii.html">Servicii<a>
Linkuri
Imagini

Exemplu 1:
<img src="flowers.jpg" >



Exemplu 2:
<img src="flowers.jpg" align="right" border="1" alt="Frumusetea naturii" >
<p>Textul in partea stanga, imaginea in dreapta.</p>

Textul in partea stanga, imaginea in dreapta.










Imagini linkuri
O simpla imagine poate avea rol de link in cazul cand se include in interiorul marcajului <a>...</a>

Exemplu 1:
<a href="next_page.html">
<img src="flowers.jpg" border="0" alt="Frumusetea naturii" >
</a>







Cu ajutorul tabelelor informatia capata o claritate mai mare. Deasemenea, importanta tabelelor se remarca
si prin faptul ca acestea pot fi folosite la definirea structurii paginii (layout-ul), ex: headerul, meniul,
footerul, etc. Desi acum aceasta nu mai este o practica obisnuita (locul ei fiind luat de CSS), ramane totusi
ca o alternativa.
Un tabel este compus din randuri si coloane si se se defineste cu ajutorul marcajului <table>, continand in
sine definitiile randului - <tr> (tr - table row) si definitiile coloanei - <td> (td - table data).

In continuare vom crea un tabel cu doua randuri si trei coloane:

Exemplu:

<table>
<tr>
<td>Randul 1, celula 1</td>
<td>Randul 1, celula 2</td>
<td>Randul 1, celula 3</td>
</tr>
<tr>
<td>Randul 2, celula 1</td>
<td>Randul 2, celula 2</td>
<td>Randul 2, celula 3</td>
</tr>
</table>

Rezultat:
Randul 1, celula 1 Randul 1, celula 2 Randul 1, celula 3
Randul 2, celula 1 Randul 2, celula 2 Randul 2, celula 3


Pentru a reda forma tabelara, adica fiecare celula sa fie luata intr-un chenar, este necesar adaugarea
atributului border=1 .
<table border="1">

Rezultat:
Randul 1, celula 1 Randul 1, celula 2 Randul 1, celula 3
Randul 2, celula 1 Randul 2, celula 2 Randul 2, celula 3

Atributele tabelului:

align - alinirea tabelului, valori posibile: left,center,right.
valign - alinierea pe verticala, valori posibile:top (sus), middle (mijloc), bottom (jos).
width - latimea, se specifica in pixeli
height - inaltimea, se specifica in pixeli
bgcolor - culoarea de fundal
border - chenar. In cazul cand border=0, chenarul este invizibil.
cellpadding - distanta dintre marginile celulelor si continutul acestora
cellspacing - distanta dintre celulele unui tabel
Tabele
In afara de aceste atribute, exista inca doua atribute foarte importante ale marcajului <td>.

colspan - numarul de coloane pe care se intinde celula
rowspan - numarul de randuri pe care se intinde celula
Exemplu colspan:
<table border="1" align="center" width="200">
<tr>
<td colspan="2" bgcolor="orange"><b>Vechime in munca </b> </td>
</tr>
<tr>
<td>Ion Paladi</td>
<td width="30">5</td>
</tr>
<tr>
<td>Mihai Cretu</td>
<td>3</td>
</tr>
<tr>
<td>Anton Stolbetski</td>
<td>6</td>
</tr>
</table>

Rezultat:
Vechime in munca
Ion Paladi 5
Mihai Cretu 3
Anton Stolbetski 6

Datorita faptului ca am specificat in celula primului rand colspan="2", in rezultat celula se intinde pe
distanta celor doua celule.

Exemplu rowspan:
<table border="1" align="center" width="200">
<tr>
<td rowspan="3" bgcolor="orange"><b>Angati</b></td>
<td>Ion Paladi</td>
<td width="30">5</td>
</tr>
<tr>
<td>Mihai Cretu</td>
<td>3</td>
</tr>
<tr>
<td>Anton Stolbetski</td>
<td>6</td>
</tr>
</table>

Rezultat:
Angajati
Ion Paladi 5
Mihai Cretu 3
Anton Stolbetski 6

rowspan ia valoarea "3", doarece acum celula trebuie sa se intinda pe toata inaltimea celor trei celule.







1. Text
John


2. Password
*********


3. File


Campurile reprezinta controale care au menirea de a prelua de la utilizator date, care ulterior sa fie
prelucrate.

Definirea unui camp se face prin intermediului marcajului <input />:

<input type="text" name="email"/>

Atributul type determina tipul campului, si poate lua valorile: "text", "password" si "file", pentru definirea
unui camp de tip text, parola si respectiv fisier, asa dupa cum se vede in exemplele 1, 2 si 3 aratate mai sus.




Butoanele, ca si campurile sunt definite prin intermediul marcajului <input />
<input type="button" /> defineste un buton

Butonul Reset:
<input type="reset" /> defineste un buton de tip reset. El are menirea de a goli toate campurile unui
formular.

Pentru functionarea corecta, butonul reset trebuie sa fie inclus intr-un formular.
<form>
<input type="text"/>
<input type="reset" />
</form>

Reset


Butonul Submit:
<input type="submit" /> defineste un buton de tip submit. Butonul submit trebui sa fie inclus intr-un
formular pentru ca sa fie functional. El are menirea de a trimite toate datele dintr-un formular la server.

<form method="GET" action="http://w3schools.com/html/html_form_action.asp">

<input type="text" name="user"/>
<input type="submit" value="Submit"/>
</form>
Campuri (Text fields)
Butoane

Submit




Butoane radio
permit utilizatorului sa aleaga doar o singura optiune din cele disponibile. Pentru gruparea mai multor
radio butoane intr-o singura categorie, fiecare camp trebuie sa fie definit cu acelasi nume.

Exemplu:
<p>Tip transfer </p>

Western Union: <input type="radio" name="transfer"/>
PayPal: <input type="radio" name="transfer"/>
Check:<input type="radio" name="transfer"/>


<p>Valuta </p>

USD: <input type="radio" name="valuta"/>
EU: <input type="radio" name="valuta"/>

Tip transfer:
Western Union:
PayPal:
Check:
Valuta:
USD:
EU:


Buton radio selectat implicit (by default):

Pentru ca o optiune sa fie implicit selectata, trebuie sa se adauge atributul checked="yes" optiunii
respective:
<p>Tip transfer </p>

PayPal: <input type="radio" name="transfer"/>
Check:<input type="radio" name="transfer" checked="yes" />


Tip transfer:
PayPal:
Check:










Checkbox-urile, la fel ca si radio butoanele ofera utilizatorului posibilitatea de a alege o optiune din mai
multe variante.

Spre deosebire de radio butoane, unde este permisa alegerea doar a unei singure optiuni, checkbox-urile
permit alegerea simultana a mai multor optiuni.

Exemplu:
<p>Limbi cunoscute </p>

Romana: <input type="checkbox" name="limba" value="Romana"/>
Engleza: <input type="checkbox" name="limba" value="Engleza"/>
Germana: <input type="checkbox" name="limba" value="Germana"/>



Limbi cunoscute:
Romana:
Engleza:
Germana:


Checkbox-uri selectate implicit (by default):

La fel ca si pentru radio butoane, pentru bifarea implicita a checkbox-urilor, se va folosi atributul
checked="yes":
<p>Limbi cunoscute </p>

Romana: <input type="checkbox" checked="yes" name="limba" value="Romana"/>
Engleza: <input type="checkbox" name="limba" value="Engleza"/>
Germana: <input type="checkbox" name="limba" value="Germana"/>

Limbi cunoscute
Romana:
Engleza:
Germana:












Checkbox-uri




Un element de tip textarea defineste un control de text cu mai multe linii. Campurile de acest fel sunt
folosite de obicei pentru introducerea unor comentarii, scrierea unui mesaj sau in general atunci cand
utilizatorul are nevoie de mai mult spatiu de exprimare.

Definirea controlului are loc prin intermediul marcajelor <textarea> </textarea>

Dimensiunele controlului textarea se determina prin numarul de coloane si randuri specificate cu ajutorul
atributelor cols si respectiv rows

Exemplu:
<textarea rows="5" cols="20"> Hello World! </textarea>
<textarea rows="3" cols="40"> Hello World! </textarea>


Hello World!


Hello World!



Atributul "wrap"
Atributul "wrap" specifica felul in care va reactiona textul atunci cand acesta va atinge sfarsitul liniei. Exista
3 valori pe care le poate lua acest atribut:
1. soft - va plasa un enter la sfaritul fiecarei linii, dar nu va trimite la server caracterul enter (carriage
return)
2. hard - arata exact asa ca si "soft", insa spre deosebire de acesta, caracterul enter este trimis la
server.
3. off - textul este afisat si trimis la server exact asa cum este scris.

<textarea rows="4" cols="15" wrap="soft" > Hello World! </textarea>
<textarea rows="4" cols="15" wrap="hard" > Hello World! </textarea>
<textarea rows="4" cols="15" wrap="off"> Hello World! </textarea>
Soft Hard Off
va plasa un ent

arata exact asa

Textul este afis






TextArea
Readonly si Disabled
1. readonly - poate lua valorile "yes" sau "no". Cu ajutorul acestui atribut se specifica daca
continutul campului de text va putea fi sau nu modicat.
2. disabled - atributul disabled este asemanator lui readonly, nu permite modificarea textului, insa
spre deosebire de acesta, textul va fi afisat in gri. In asa fel utilizatorul va percepe vizual ca acel
camp nu poate fi modificat.
De mentionat ca textul dintr-un textarea definit cu "readonly" poate fi selectat cu mouse-ul si ulterior
copiat, pe cand "disabled" nu ofera aceasta posibilitate.
<textarea rows="4" cols="15" readonly="yes" > Hello World! </textarea>
<textarea rows="4" cols="15" disabled="yes" > Hello World! </textarea>
disabled readonly
Hello World!

Hello World!









Este utilizat pentru crearea listelor drop-down . Cu ajutorul tagului <option> din interiorul elementului
<select> se definesc optiunile disponibile in lista.

Exemplu:
Limba materna:
<select>
<option>Romana</option>
<option>Engleza</option>
<option>Franceza</option>
</select>

Limba materna:
Romana



Implicit meniul va afisa primul element din lista. Pentru a afisa un alt element decat cel implicit, se va
specifica atributul selected="yes" optiunii care dorim sa fie afisata prima in lista.

Limba materna:
<select>
<option>Romana</option>
<option selected="yes">Engleza</option>
<option>Franceza</option>
</select>

Limba materna:
Engleza


Select
Atributul "size"

Implicit doar un singur element din lista este vizibil, insa acest lucru se poate schimba cu ajutorul
atributului size adaugat marcajului <select>

Limba materna:
<select size="3">
<option>Romana</option>
<option>Engleza</option>
<option>Franceza</option>
</select>

Limba materna:
Romana
Engleza
Franceza



Selectare multipla

Implicit se permite selectarea unui singur element din lista, insa este posibil ca mai mult de un element din
lista sa poata fi selectat.
Pentru aceasta se va specifica atributul multiple="yes"

Limba materna:
<select size="3" multiple="yes">
<option>Romana</option>
<option>Engleza</option>
<option>Franceza</option>
</select>

Limba materna:
Romana
Engleza
Franceza


CTRL + click pe un element din lista - pentru a testa selectarea multipla.
























Reprezinta o modalitate de comunicare intre utilizatori si server. Pentru prelucrarea lor, sunt folosite
diferite scripturi server-side: PHP, Perl.

Un formular se defineste cu ajutorul marcajului <form>, iar in interiorul acestuia se gasesc diferite campuri
de introducere a datelor. Campurile unui formular destinate pentru introducerea datelor se definesc prin
intermediul marcajului <input>.

Exemplu
<form action="mailto:AdresaTa@email.com" method="POST">
Numele:<br>
<input type="text" name="name"><br>
Email:<br>
<input type="text" name="email"><br>
Mesajul:<br>
<textarea cols="30" rows="5"></textarea><br>
<input type="submit" name="submit" value="Trimite">
<input type="reset" name="reset" value="Reseteaza">
</form>

Rezultat:
Numele:

Email:

Mesajul:

Trimite Reseteaza


Pentru transmiterea informatiilor catre server se utilizeaza una din cele doua metode:
metoda get - informatiile din formular sunt vizibile in URL
metoda post- informatiile din formular nu sunt vizibile in URL
Atributul action are ca valoare URL-ul careia ii vor fi transmise informatiile din formular, pentru prelucrare.

Campurile unui formular sunt definite cu ajutorul marcajului <input> care poate lua urmatoarele atribute:
type - tipul campului. Poate lua urmatoarele valori:
o button - definirea unui buton
o checkbox - casute de bifat. Prin intermediul lor utilizatorul poate selecta (bifa) mai multe variante
de raspuns simultan.
o file - permite utilizatorului sa selecteze un fisier din calculatorul sau. (ex. un fisier care se doreste
a fi incarcat pe server).
o hidden - acest camp nu va aparea in formular, va fi invizibil.
o submit - informatiile din formular sunt trimise spre prelucrare la URL-ul indicat in action.
o password - acest camp se foloseste la introducerea parolei. Din motive de securitate se
inlocuieste fiecare caracter tastat cu un asterix (*).
Formulare
o radio - reprezinta un set de elemente cu un singur nume, din care se poate selecta doar unul.
o text - camp in care utilizatorul poate introduce text.
o reset - buton la apasarea careia se goleste formularul.
name - numele elementului
value - valoarea atributului elementului
size - lungimea campului de tip text sau password
maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text sau password
disabled - dezactivarea unui element.























TAGURI HTML
De baza
<HTML> </HTML> Defineste un fisier in format Web
<HEAD> </HEAD> Antetul documentului
<TITLE> </TITLE> Tilul documentului
<BODY> </BODY> Corpul paginii HTML
BGCOLOR = culoare Culoarea de fond a pagini
TEXT=culoare Culoarea textului pe pagini
LINK=culoare Culoarea legaturiilor nevizitate din pagini
VLINK=culoare Culoarea legaturiilor vizitate din pagini
ALINK=culoare
Culoarea legaturiilor pe durata clicului exacutat
de utilizator
BACKGROUND = url Imaginea de fond pentru pagina
<P> Paragraf
<FONT> </FONT> Specifica atribute ale textului incadrat
SIZE=n Dimensiunea textului este 1-7
FACE="a,b" Specifica fontul: a, daca este disponibil, sau b
COLOR=s
Culoarea textului: fie un nume de culoare , fie o
valoare RGB
<BR> Linie noua
<PRE> </PRE> Informatie preformatata
<!-- --> Comenatriu HTML
<CENTER> </CENTER> Centreaza materialul in pagina
<HR> Rigla orizontala
SIZE=x Inaltimea riglei in pixeli
WIDTH=x Latimea riglei in pixeli sau in procente
NOSHADE
Dezactiveaza afisarea umbrei pentru rigla
orizontala
ALIGN=x
Alinierea riglei orizontala in pagina (left, center,
right)
COLOR=x Culoarea riglei orizontale(numai pentru IE)
<A> </A> Marcaj de tip ancora
HREF=url Referinta hipertext
HREF=#nume Referinta catre o ancora interna
Name=nume Definitia unei ancore interne



Pentru liste
<DD> Descriere definitie(definition description)
<DL> </DL> Lista de tip definitie(definition list)
<DT> Termen de definitie(definition term )
<LI> Element de lista
<OL> Lista ordonata (numerotata)
TYPE=tip Tipul numerotarii. Valori posibile: A, a, I, i, 1
START=x Numarul de inceput al listei ordonate
<UL> Lista neordonata (marcata)
TYPE=forma Forma marcajului. Valori posibile: circle, square, disc.


Formatarea caracterelor
<B> </B> Afiseaza text ingrosat(bold)
<I> </I> Afiseaza text inclinat(italic)
<U> </U> Afiseaza text subliniat
<TT> </TT> Text cu font monospatiu
<CITE> </CITE> Citare bibliogarfica
<CODE> </CODE> Listing de program
<EM> </EM> Stil logic de evidentiere
<KBD> </KBD> Text de la tastatura
<STRONG> </STRONG> Evidentiere puternica(idem <B>)
<VAR> </VAR> Program sau variabila
<BASEFONT SIZE = n>
Specifica dimensiunea implicita a fontului din
pagina



Pentru tabele
<TABLE> </TABLE> Tabel HTML
BORDER=x Chenarul tabelului
CELLPADDING=x
Spatiul suplimentar in cadrul celulelor
tabelului
CELLSPACING=x Spatiul suplimentar intre celulele tabelului
WIDTH=x Latimea impusa tabelului
FRAME=valoare Ajustarea fina a tabelului
RULES=valoare Ajustarea fina a riglelor tabelului
BORDERCOLOR = culoare Specifica culoarea chenarului tabelului
BORDERCOLORLIGHT =
culoare
Cea mai deschisa culoare din cele doua culori
specificate
BORDERCOLORDARK =
culoare
Cea mai inchisa culoare din cele doua culori
specificate
ALIGN=left
Aliniaza tabelul la marginea din stanga a
paginii, iar textul curge in partea dreapta
ALIGN=right
Aliniaza tabelul la marginea din dreapta a
paginii, iar textul curge in partea stanga
HSPACE=x
Spatiu suplimetar pe orizontala in jurul
tabelului
VSPACE=x
Spatiu suplimetar pe verticala in jurul
tabelului
COLS=x Specifica numarul de coloane ale unui tabel
<COLGROUP>
</COLGROUP>
Defineste un set de definitii de coloane cu
ajutorul marcajului <col>
<COL WIDTH=x>
Defineste latimea unei coloane exprimata in
pixeli
<THEAD> </THEAD> Defineste titlul tabelului
<BODY> </TBODY> Defineste corpul tabelului
<TR </TR> Linie de tabel
BGCOLOR=culoare
Specifica culoarea de fond pentru intreaga
linie
ALIGN=aliniere
Alinierea celulelor de pe linia curenta (left,
center, right)
<TD </TD> Celula de date a tabelului/font>
BGCOLOR=culoare
Specifica culoarea de fond pentru celula de
date
COLSPAN=x
Numarul de coloane pe care se intinde celula
curenta de date
ROWSPAN=x
Numarul de linii pe care se intinde celula
curenta de date
ALIGN=aliniere
Alinierea materialului din cadrul celulei de
date.Valori posibile: (left, right, center)
VALIGN=aliniere
Alinierea pe verticala a materialului din cadrul
celulei de date.Valori posibile: (top, bottom,
middle)
BACKGROUND=url
Specifica imaginea de fond pentru celula
tabelului
NOWRAP
Nu permite despartirea textului pe linii in
cadrul unei celule
ALIGN=baseline
Aliniaza celule de date cu linia de baza a
textului adiacent
ALIGN=caracter
Aliniaza o coloana fata de un anumit carcater
(caracterul prestabilit este ".")
ALIGN=justify
Aliniaza atat marginea din stanga cat si
marginea din dreapta a unui text



Pentru formulare
<FORM> </FORM> Formular HTML activ
ACTION=url
Programul CGI de pe serverul care receptioneaza
datele
METHOD=metoda
Modul in care datele sunt transmise serverului(GET
sau POST)
<INPUT Camp de text sau alte date de intrare
TYPE=optiune
Tipul campului de intrare <INPUT>. Valori posibile:
text,password,checkbox,hidden,file,
radio,submit,reset,image.
NAME=nume Numele simbolic al valorii campului
VALUE=valoare Continutul prestabilit al campului de text
CHECKED= optiune Buton/caseta marcata in mod prestabilit
SIZE=x Numarul de caractere al unui camp de text
SIZE=x Numarul maxim de caractere acceptate
<SELECT> </SELECT> Grup de casete de validare
NAME=nume Numele simbolic al valorii campului
SIZE=x
Numarul de articole de meniu care se afiseaza odata
(prestabilit=1)
MULTIPLE=x Permite selectia unor articole de meniu multiple
<OPTION Alegerea particulara intr-un domeniu <SELECT>
VALUE=valoare Valoarea rezultanta a acestei selectii din meniu
<TEXTAREA>
</TEXTAREA>
Camp de intare de tip text pe linii multiple
NAME=nume Numele simbolic al valorii campului
ROWS=x Numarul de linii al casetei de text
COLS=x
Numarul de coloane (caractere) pe linie al casetei de
text
<FIELDSET>
</FIELDSET>
Imparte formularul in parti logice
<LEGEND>
</LEGEND>
Numele asociat setului de campuri (fieldset)
ALIGN=s
Specifica alinierea legendei (explicatiei) afisate
(top,bottom,left,right)
TABINDEX=x
Specifica ordinea elementelor atunci cand
utilizatorul apasa tasta Tab
ACCESKEY=c
Specifica tasta care asigura comanda rapida de la
tastatura asociata unui anumit element
DISABLED Elementul este inactiv, dar este afisat pe ecran
READONLY Elementul este afisat pe ecran dar nu poate fi editat

S-ar putea să vă placă și