hackeri
Cultul Hackerilor 		Lista Forumurilor Pe Tematici
hackeri | Reguli | Inregistrare | Login

POZE HACKERI

Nu sunteti logat. 		Nou pe simpatie:
Cenusareasa
Femeie
24 ani
Bucuresti
cauta Barbat
28 - 61 ani
hackeri / n00bs / Html 4.01 Moderat de adi2088
Autor
Mesaj Pagini: 1
Adrian
Administrator

Inregistrat: acum 18 ani
Postari: 131
Notiuni de baza
HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web.
Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm. In marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>. browserul interpreteaza aceste etichete afisand rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari).
Pagina principala a unui domeniu este fisierul index.html. Aceasta pagina este setata a fi afisata automat la vizitarea unui domeniu.
De exemplu la vizitarea domeniului este afisata pagina
Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<eticheta atribut="valoare"> ... </eticheta>
Componenta unui document HTML este:
1. versiunea HTML a documentului
2. zona head cu etichetele <head> </head>
3. zona body cu etichetele <body> </body> sau <frameset> </frameset>
Versiunea HTML poate fi:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 TrANSItional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Toate paginile HTML incep si se termina cu etichetele <html> si </html>.
In interiorul acestor etichete gasim perechile <head>, </head> si <body>, </body>.
head contine titlul paginii intre etichetele <title> si </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu scripturi, fisiere de tip CSS sau favicon).
Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile motoarelor de cautare si au urmatorul format:
<META NAME="nume" CONTENT="continut">
Exemplu: link catre un fisier extern CSS:
<link rel="stylesheet" type="text/css" href="css.css">
body gazduieste practic toate etichetele afisate de browser pe ecran.
Exemplu: o pagina HTML cu titlul Exemplu iar continutul Continut pagina
<html>
<head>
<title>Titlu</title>
</head>
<body>
Continut pagina
</body>
</html>
Si in HTML poate fi introdus un comentariu, care bineinteles nu va fi afisat de browser:
<!-- Acesta este un comentariu in HTML -->




Tutorial complet HTML
De Catalin Drogoreanu | Publicat  14.03.2006 | Tutoriale | Vot:     

   
Formulare
Folosind formularele webdesignerul sau administratorul site-ului poate colecta diverse informatii de la vizitatori.
Cele mai importante atribute ale etichetei <form> sunt action si method.
action metioneaza adresa scriptului (aflat pe server) care va interpreta formularul. Aceste scripturi pot fi scrise in limbajele php sau Pearl.
method indica metoda folosita de browser pentru transmiterea formularului. Poate lua valorile get si post.
get - datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mici cantitati de date.
post - datele sunt trimise separat si sunt permise cantitati mari de date.
Exemplu: formular cu 2 campuri, buton Trimite si buton Sterge
HTML    Afisare
<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
<input type="submit" value="Trimite"><input type="reset" value="Sterge">
</form>     Nume:
Prenume:
 


Eticheta <input> poate avea atributele:
type - indica tipul datelor care vor fi introduse (text=text, submit=trimite, reset=sterge, password=parola, hidden=nu este vizibil, checkbox=caseta de validare, button=buton, radio=selectarea unui singur element dintr-un grup, file=fisier pentru upload)
name - numele asociat cimpului respectiv. Este folosit la prelucrarea datelor de catre scriptul mentionat in action
size - numarul de caractere vizibile din camp
maxlenght - numarul maxim de caractere introduse in camp
readonly - datele prezente in camp nu pot fi modificate
Exemplu: formular continand toate valorile atributului <input>
HTML    Afisare
<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" name="prenume"><br>
Telefon:<input type="text" name="telefon"><br>
Fax:<input type="text" name="fax"><br>
Email:<input type="text" name="email"><br>
Sexul: Masculin<input type="radio" name="sex" value="m"> Feminin<input type="radio" name="sex" value="f">
Studii: <select> <option value="scoala">Scoala profesionala <option value="liceu">Liceu <option value="facultate">Facultate </select>
Accesati internetul de la:
Serviciu<input type="checkbox" name="serv">
Acasa<input type="checkbox" name="acasa">
Internet cafe<input type="checkbox" name="cafe">
Fisier: <input type="file" name="file">
Observatii:<textarea name="obs" rows="5" cols="30"></textarea>
<input type="submit" value="Trimite"><input type="reset" value="Sterge">
</form>     Nume:
Prenume:
Telefon:
Fax:
Email: 
Sexul: Masculin  Feminin
Studii: 
Accesati Internetul de la:
Serviciu
Acasa
Internet cafe
Fisier:
Observatii:
 


Constructia select introduce un meniu derulant (lista de selectie) la care valorile sunt declarate prin option.
In campul textarea se poate introduce text si are atributele cols (numar de coloane) si rows (numar de randuri).





Cadre
Exemplele prezentate in capitolele anterioare incarcau o singura pagina HTML in fereastra browserului.
Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este ca perechea de etichete <body> </body> este inlocuita de <frameset> </frameset> iar in interiorul lor cadrele sunt delimitate de <frame> si </frame>.
Atributele etichetei frameset sunt:
cols imparte pagina in coloane si are valori exprimate in procente din dimensiunea ferestrei, numar de pixeli sau * adica spatiul ramas
rows imparte pagina in randuri cu aceleasi valori ca la cols
bordercolor culoarea tuturor chenarelor conform modelului #rrggbb
frameborder inhibarea afisarii chenarelor cu valorile yes sau no
Cadrele sunt introduse prin pereche de etichete <frame> </frame> care suporta atributele:
src fisierul sau adresa fisierului introdus
bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
noresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrul
scrolling adauga cadrului bare de defilare cu valorile yes no si auto
Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimea totala. Pagina de sus are chenarul rosu iar cea de jos are scroll.
<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frameset rows="20%,80%">
<frame src="exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>
Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimea totala, fara posibilitatea de redimensionare a cadrelor
<html>
<head>
<title>Exemplul 8_2</title>
</head>
<frameset cols="40%,60%">
<frame src="exemplu8_2_1.html">
<frame src="exemplu8_2_2.html" noresize>
</frameset>
</html>
Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini care se vor deschide in cadrul din stanga (se poate verifica functionarea atributului target al legaturii). Cadrul din stanga va avea scroll.
In situatia in care browserul folosit nu suporta pagini care contin cadre imaginea afisata va fi goala. Pentru a evita acest lucru vom introduce un mesaj incadrat de <body> si </body> intre etichetele <noframes> si </noframes> prin care informam vizitatorul ca foloseste un browser care nu suporta cadre.
<frameset cols = "30%, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.htm">
<frame src ="pag2.htm">
<frame src ="pag3.htm">
</frameset>
Cadre in-line
Sunt blocuri care se introduc in pagina prin perechea de etichete <iframe> si </iframe> si au atributele:
src fisierul sau adresa acestuia
height inaltimea cadrul
width latimea cadrul
frameborder grosimea bordurii (chenarului)
scrolling adauga bare de defilare cu valorile yes no si auto
align aliniaza cadrul (left, right, center, top, bottom, middle)
vspace distanta peste si sub cadru
hspace distanta in stanga si in dreapta de cadru
Exemplu: o pagina in care este gazduit un cadru in-line. Si aici se poate introduce un mesaj pentru browserele care nu suporta cadre in-line. Modul de afisare al exemplului poate diferi de la un browser la altul.
<html>
<head>
<title>Exemplul 8_4</title>
</head>
Mai jos este un cadru in-line cu urmatori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="pag.html" width="300" height="100" hspace="200" vspace="100" scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe>
</body>
</html>





Videoclipuri
Formatele de videoclipuri utilizate in paginile web sunt: MPEG (*.mpg sau *.mpeg), QuickTime (*.mov), AVI (*.avi).
In pagini putem introduce:
1. link-uri catre fisiere video
2. videoclipuri care care sa fie vizionate direct din pagina web
Exemplu: Varianta 1 este un simplu link catre un fisier video
HTML    Afisare
<a href="1.avi">fisier video</a>    fisier video

A doua varianta este acceptata doar de browserul internet Explorer care permite atribute speciale in eticheta <img>:
dynsrc - fisierul sursa video care va fi vizionat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi vizionat fisierul)
start - indica momentul in care fisierul va fi vizionat (fileopen=cand pagina a fost incarcata, mouseover=cand mose-ul este deasupra imaginii)
controls - afiseaza butoanele de control



Sunete
Cateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au).
In pagini putem introduce:
1. link-uri catre fisiere de sunet
2. sunete care care sa fie audiate direct din pagina web
3. sunet de fond (fundal sonor)

Exemplu: Varianta 1 este un simplu link catre un fisier de sunet
HTML    Afisare
<a href="1.mid">fisier sunet</a>    fisier sunet

A doua varianta mentionata se realizeaza folosind fisiere de tip flash, care pot contine si butoane de control de tip Play, Pause, Stop.
A treia varianta este acceptata doar de browserul internet Explorer si consta in inserarea in interiorul corpului paginii a etichetei: <bgsound> care poate avea atributele:
src - fisierul sursa de sunet care va fi audiat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi audiat fisierul)




Tabele
Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza organizarii marii majoritati a paginilor web (inclusiv cea de fata).
Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent &nbsp;.
Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>.
Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px, fiecare celula are o alta culoare de fond (bgcolor)
HTML    Afisare
<table border="1"> <tr><td width="80" bgcolor="red">rosu</td><td width="160" bgcolor="yellow">galben</td></tr> <tr><td bgcolor="white">alb</td><td bgcolor="green">verde</td></tr> </table>     rosu    galben
alb    verde

Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpaddind = distanta dintre marginea celului si continut
Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea
Exemplu: un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din randul 2 si rowspan pentru a uni celula 1 din randul 3 cu celula 1 din randul 4
HTML    Afisare
<table border="1"> <tr> <td bgcolor="white">R1 C1</td> <td bgcolor="yellow">R1 C2</td> <td bgcolor="white">R1 C3</td> <td bgcolor="yellow">R1 C4</td> </tr> <tr> <td colspan="2" bgcolor="red">R2 C1+C2</td> <td bgcolor="yellow">R2 C3</td> <td bgcolor="red">R2 C4</td> </tr> <tr> <td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td> <td bgcolor="yellow">R3 C2</td> <td bgcolor="white">R3 C3</td> <td bgcolor="yellow">R3 C4</td> </tr> <tr> <td bgcolor="red">R4 C2</td> <td bgcolor="yellow">R4 C3</td> <td bgcolor="red">R4 C4</td> </tr> </table>     R1 C1    R1 C2    R1 C3    R1 C4
R2 C1+C2    R2 C3    R2 C4
R3 C1 + R4 C1    R3 C2    R3 C3    R3 C4
    R4 C2    R4 C3    R4 C4

Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi perechea de etichete <th> si </th> in locul etichetelor <td> si </td>. Astfel continutul celulei va fi afisat ingrosat si aliniat pe mijloc.
Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele <th> si </th>
HTML    Afisare
<table border="1"> <tr> <th width="120">Titlul 1</th> <th width="120">Titlul 2lt;/th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>     Titlul 1    Titlul 2
1    2
3    4

Eticheta caption va adauga o linie text deasupra tabelului, centrata pe mijloc, deobicei folosita ca fiind un titlu al tabelului. caption se plaseaza obligatoriu imediat dupa tag-ul table dar inainte de prima eticheta tr.
Exemplu: un tabel cu 4 randuri si 2 coloane folosind eticheta caption
HTML    Afisare
<table border="1"> <caption>Necesar alimente</caption> <tr> <th width="120">Produse</th> <th width="120">Cantitatelt;/th> </tr> <tr> <td>Fructe</td> <td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td> </tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table>     Necesar alimente
Produse    Cantitate
Fructe    1 kg
Legume    5 kg
Carne    1,5 kg





Imagini
Folosind imagini pagina capata un plus de atractivitate dar puteti plati pretul unei incarcari greoaie daca dimensiunile imaginii sunt mari.
Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png).
Formatul gif este recomadat pentru realizarea butoanelor si a icoanelor iar jpg pentru fotografii.
Eticheta folosita pentru inserarea unei imagini in pagina este <img> si are urmatoarele atribute:
src = sursa, locul unde se afla imaginea
width = latimea imaginii
height = inaltimea imaginii
alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita
border = chenar (0 = lipsa bordura)
Dimensiunea imaginii afisate de browser este stabilita de argumentele width si height care pot fi diferite de dimensiunile imaginii originale, caz in care imaginea va fi redimensionata automat de catre browser.
Exemplu: o imagine cu latime 100px, inaltime 75px, alt=poza si border=0 si inca o data cu border=1
HTML    Afisare
<img src="poza.jpg" width="100" height="75" alt="poza" border="0">    

<img src="poza.jpg" width="100" height="75" alt="poza" border="1">    

Pentru a micsora timpul incarcarii complete a paginii exista programe care optimizeaza imaginile. Optimizarea consta in:
1. reducerea dimensiunii imaginii fara degradarea majora a calitatii
2. eliminarea informatiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt asociate automat de programele de grafica (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale.




Legaturi
3.1 Legaturi
Legatura (link-ul) este o eticheta foarte importanta in HTML deoarece confera utilizatorului posibilitatea navigarii de la o pagina la alta. Deobicei link-ul este subliniat iar atunci cind suntem deasupra lui cursorul isi schimba forma.
Link-ul este definit cu etichetele <a> si </a> si are atributele:
href - adresa fisierului destinatie
target - in ce fereastra se va deschide fisierul destinatie
title - mica descriere asociata legaturii afisata in momentul in care mouse-ul se afla deasupra legaturii
Adresa fisierului destinatie poate fi exprimata astfel:
nume fisier daca se afla in acelasi folder cu pagina curenta
adresa relativa daca se afla pe acelasi server sau disc, indicandu-se calea
adresa URL fiind adresa completa a paginii (de exemplu:)
Atributul target poate lua valorile:
_blank pagina va fi incarcata intr-o noua fereastra
_parent pagina va fi incarcata in fereastra parinte
_top pagina va fi incarcata in fereastra top a cadrului
_self pagina va fi incarcata in aceeasi fereastra
Exemplu: link catre pagina web Academia Online
HTML    Afisare
<a href="http://www.academiaonline.ro">Academia Online</a>    Academia Online

Putem insera un link catre o adresa de e-mail putand asocia si un subiect prestabilit
HTML    Afisare
<a href="mailto: ">Trimite e-mail</a>    Trimite e-mail

<a href='mailto: ?subject="subiect prestabilit"'>Trimite e-mail</a>    Trimite e-mail

Culoarea linkurilor poate fi modificata introducand in eticheta body urmatoarele atribute:
LINK legatura nevisitata (default albatru)
VLINK legatura visitata (default rosu)
ALINK legatura activa (nu prea se foloseste - default portocaliu)
3.2 Ancore
Se pot adauga puncte de reper (ancore) pentru o deplasare mai usoara in cazul unor pagini HTML lungi sau catre un loc anume aflat intr-o alta.
Ancora se defineste tot intre etichetele <a> si </a> dar cu atributul name. Pentru a face trimitere catre ancora se introduce un link cu atributul href avand ca valoare denumirea ancorei.
Exemplu:
Ancora    <a name="nume">Ancora</a>
Link catre ancora aflata in aceeasi pagina    <a href="#nume">Inapoi la ancora</a>
Link catre ancora aflata in alta pagina    <a href="pagina.html#nume">Inapoi la ancora din pagina.html</a>



Liste
Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate, ordonate si de definitii.
2.1 Liste neordonate
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.

Exemplu
HTML    Afisare
Exemple de fructe:
<ul>
<li>mere</li>
<li>pere</li>
<li>struguri</li>
</ul>     Exemple de fructe:
•    mere
•    pere
•    struguri
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square, circle si disc.

Exemplu
HTML    Afisare
Exemple de legume:
<ul>
<li type="square">rosii</li>
<li type="circle">cartofi</li>
<li type="disc">morcovi</li>
</ul>     Exemple de legume:
    rosii
o    cartofi
•    morcovii
2.2 Liste ordonate
Aceste liste sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>.

Exemplu
HTML    Afisare
Exemple de combustibili:
<ol>
<li>benzina</li>
<li>motorina</li>
<li>gaz lichefiat</li>
</ol>     Exemple de combustibili:
1.    benzina
2.    motorina
3.    gaz lichefiat
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default):

Exemplu
HTML    Afisare
Medii de stocare:
<ol>
<li type="I">HDD-ul</li>
<li type="I">discheta</li>
<li type="I">CD-ROM-ul</li>
</ol>     Medii de stocare:
I.    HDD-ul
II.    discheta
III.    CD-ROM-ul
2.3 Liste de definitii
Aceste liste sunt delimitate de etichetele <dl> si </dl>.
Termenii listei sunt delimitati de etichetele <dt> si </dt> iar definitiile termenilor de <dd> si </dd>.

Exemplu
HTML    Afisare
Legenda:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Mark-ul Language</dd>
<dt>IP</dt>
<dd>internet protocol</dd>
</dl>     Legenda:
HTML
Hyper Text Mark-ul Language
IP






Formatare text
In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru paragraf nou cu eticheta <p>.
<hr> introduce o linie linie orizontala si trecerea la un rand nou.
________________________________________
Folosind etichete adecvate textul poate fi formatat.
Spre exemplu fonturilor li se poate modifica: marimea, culoarea, forma (normal, bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sau verticala iar titlurile (header), de la 1 la 6, sunt diferite ca marime (1 cel mai mare iar 6 cel mai mic).
Etichetele <div> si </div> delimiteaza un bloc text in vederea formatarii. Unul din atributele blocului div este align care poate lua valorile:
center aliniere pe centru
left aliniere la stanga
right aliniere la dreapta
In situatia in care dorim ca textul introdus sa fie afisat exact asa cum a fost introdus (text preformatat) in fisierul sursa vom folosi pereche de etichete <pre> si </pre>.
Exemplu
HTML    Afisare
text normal    text normal
<b>text bold</b>    text bold
<i>text cursiv</i>    text cursiv
<u>text subliniat</u>    text subliniat
<del>text taiat</del>   
<sup>exponent</sup>    exponent
<sub>indice</sub>    indice
<tt>caractere monospatiate</tt>    caractere monospatiate
<cite>Citat</cite>    Citat
<em>evidentiat</em>    evidentiat
<code>text scris la tastatura</code>    text continand cod de computer
<kbd>text scris la tastatura</kbd>    text scris la tastatura
<samp>mostra de cod de computer</samp>    mostra de cod de computer
<strong>text ingrosat</strong>    text ingrosat
<big>mare</big>    mare
<small>mic</small>    mic
<font color="red">font rosu</font>    font rosu
<font face="Courier">font Courier</font>    font Courier
<font size="6">font size=6</font>    font size=6
<div align="center">text aliniat pe centru</div>    text aliniat pe centru
<div align="left">text aliniat la stanga</div>    text aliniat la stanga
<div align="right">text aliniat la dreapta</div>    text aliniat la dreapta
<h1>Titlu 1</h1>    Titlu 1
<h2>Titlu 2</h2>    Titlu 2
<h3>Titlu 3</h3>    Titlu 3
<h4>Titlu 4</h4>    Titlu 4
<h5>Titlu 5</h5>    Titlu 5
<h6>Titlu 6</h6>    Titlu 6





Harti de imagini
Hartile de imagini permit declararea unor zone din imagine ca legaturi catre alte pagini web si implica doua aspecte.
Imaginea este declarata ca fiind harta. Pentru aceasta eticheta <img> a imaginii are urmatoarele atribute:
src fisierul sau adresa fisierului imagine
usemap are valoarea de genul #nume care este folosit un interiorul etichetei <map> prezentate mai jos
Definirea hartii folosind perechea de etichete <map> si <map> cu atributul obligatoriu name, avand aceeasi valoare ca la usemap din img.
Zona sau zonele continute de harta sunt introduse prin eticheta <area> cu atributele obligatorii:
shape fiind forma ariei declarate cu valorile: rect=dreptunghiulara, circle=circulara, poly=poligonala, default=alte forme (diferite de cele anterioare)
coords coordonatele zonei
href adresa paginii destinatie a legaturii
Exemplu: o harta de imagini care contine 5 zone
<html>
<head>
<title>Exemplul 10</title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="pag1.html">
<area shape="rect" coords="20,90,120,140" href="pag2.html">
<area shape="circle" coords="200,80,30" href="pag3.html">
<area shape="circle" coords="200,80,60" href="pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="pag3.html">
</map>
</body>
</html>
pus acum 18 ani
   
bomby
Membru nou

Inregistrat: acum 16 ani
Postari: 4
Imi place articolu, cu toate ca cunosteam lucrurile astea , merita recitite :d
pus acum 16 ani
   
danny
Junior

Inregistrat: acum 13 ani
Postari: 12
ntroducere in HTML
Aparitia
HTML apare in anul 1989 la CERN(Centrul European de Cercetari Nucleare de la Geneva) iar dezvoltatorul initial este Tim Berners-Lee. Scopul acestuia a fost facilitarea accesului rapid la informatiile tehnice cuprinse in manualele de utilizare a calculatoarelor.

Ce este HTML?
HTML este prescutarea de la HyperTextMarkupLanguage, este un limbaj de marcare universal interpretat de browsere si se foloseste pentru elaborarea deferitor documente text cu linkuri si elemente multimedia - pagini web, prezentari, carti electronice.
Fisierele HTML sunt fisiere text. Datorita acesteia ele pot fi afisate si modificate pe orice calculator cu orice sistem de operare. Extensia unui fisier html este .htm sau .html.

HTML este limbaj de programare?
HTML nu este limbaj de programare. Sarcina lui este afisarea documentului html si pune la dispozitie diferite mijloace de formatare a textului. Deaceea, pentru ca paginile HTML sa execute ceva ca raspuns la actiunile utilizatorului, de exemplu sa afiseze un mesaj sau sa interschimbe niste imagini, se recurg la mijloace specializate care largesc posibilitatilie HTML-ului, cum ar fi limbajul de programare JavaScript.

Instrumente necesare
Pentru crearea paginilor HTML se poate utiliza orice editor text sau editor grafic.
Din categoria editoarelor text, cel mai simplu si la indemana este editorul notepad. Dupa scriera codului in notepad salvati fisierul cu extensia .html si in rezultat veti obtine o pagina web. Exista editoare text specializate care ofera mai multe avantaje, cum ar fi evidentierea tag-urilor limbajului, ceea ce e necesar pentru o mai buna lizibilitate a codului (de exemplu HTML Kit care este distribuit gratis).
Din categoria editoarele grafice fac parte Macromedia Dreamweaver, WebPageMaker. Sunt medii care nu cer cunostinte avansate de HTML. Mai mult, unele iti permit sa creezi pagini web fara sa ai ideie de limbajul HTML. Cu ajutorul acestor programe vei reusi sa creezi o pagina web intr-un timp rapid, insa editarea acesteia va deveni costisitoare din cauza ca aceste programe genereaza un cod lung, neoptimal si de multe ori greu de inteles.

Cat de greu se invata HTML?
Limbajul HTML este usor de invatat dar pentru aceasta este necesar sa exersezi cat mai mult, si cel mai important este sa scrii tu codul pentru fiecare exemplu in parte. Chiar daca unele exemple ti se par prea simple si te gandesti ca taparea lor ti-ar stoarce din timp, sfatul meu este sa le scrii pentru ca asa vei memora mai bine. Scriind chiar si lucruri simple de multe ori vei face greseli si in asa mod vei dobandi mai multa practica!



Structura documentului HTML
Limbajul HTML este compus din coduri speciale numite marcaje (sau 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, ex: <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>.
Ce inseamna si cum se utilizeaza marcajele <p>...</p>, <br> , vei afla in curand, dar pana atunci trebuie sa ai ideie despre structura unui document HTML!

Structura documentului HTML
Prezint in continuare structura unui document HTML alcatuit din partile lui principale care le voi explica mai jos:
<!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 se imparte in trei sectiuni:
•    Prima linie contine versiunea documentului HTML. Pana nu demult lispa 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 asa programe numite HTML validatoare, cu ajutorul careia se poate de verificat corectitudinea documentului. Pentru a analiza pagina web ele folosesc anume acea versiune 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 saitului, 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.).
Asta a fost o scurta introducere teoretica asupra structurii documentului HTML. Si de aici incolo, se incepe partea interesanta a cursului si anume studierea elementelor limbajului HTML! Sa incepem cu textul!



  Text in HTML
  In continuare ne vom referi la modalitatile de structurare si formatare a textului. Vom trece elementele de baza si cele mai des utilizate.
Pentru ca sa le memorezi mai bine pe fiecare in parte si sa deprinzi practici, nu va fi deajuns doar sa citesti, va trebuie sa scrii tu codul si sa vezi rezultatele cu ochiul tau in calculatorul tau. Cine stie, poate gresesc undeva, poate te mint chiar, deaceea va trebui sa tii sub control si verificare orice suflare de-a mea!
Incepem cu un exemplu care cuprinde cele mai utilizate marcaje:



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>
Daca ai scris totul corect atunci pagina ta va avea aceasi infatisare ca si aceasta.

Explicatii
Cum am mai spus, HTML se invata usor si sunt sigur ca daca ai scris exemplul si ai vizualizat pagina, deja poti intui destinatia catorva marcaje macar.
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). In dependenta de numarul din dreptul numelui marcajului, variaza dimensiunea fontului.
Exista sase categorii de acest 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.
Urmatoarele doua marcaje <p> au un atribut obtional 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, face, si size. Deci cu ajutorul acestui marcaj se poate specifica culoarea textului, fontul si dimensiunea acestuia.

Tot ceea ce urmeaza in interiorul marcajului <code>...</code>, specifica un fragment de cod. Acesta apare sub un font monospace, Courier New de obicei.
In linii generale atat am avut a spune cu privire la structurarea si formatarea textului. Insa, tot aici, a mai ramas un subpunct foarte important. Ceva ce ai intalnit des pe mai multe saituri si in curand vei avea nevoie si tu. E vorba despre liste!

Liste in HTML
  Exista trei tipuri de liste in HTML:
1.    Liste de definitii
2.    Liste neordonate
3.    Liste ordonate
Liste de definitii:
Listele 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>

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 capata 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

Atat despre liste!
De obicei un sait este alcatuit din mai multe pagini si fiecare pagina contine legaturi (linkuri) catre celelalte pagini din interiorul saitului sau catre pagini externe.
Cum se realizeaza aceste legaturi este tocmai subiectul ce il vom discuta in continuare!
Linkuri in HTML
  Linkurile (sau referintele) constitue un element fundamental in elaborarea unui sait. In lipsa lor, saitul s-ar forma doar dintr-o pagina de dimensiuni foarte mari si aceasta ar duce la la o nestructure a saitului.

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 legaturi: interne si externe.
Legatura interna este o legatura in interioul saitului tau. Deci, daca ai un sait in care ai definit linkul Servicii si acesta duce catre o pagina din interiorul saitului servicii.html, atunci codul va arata ca cel de mai jos:
Link intern

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

Legatura externa este o legatura care duce spre un sait extern. In cazul acesta, accesarea unei pagini servicii.html de pe saitul se va efectua astfel:

Link extern

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

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>
Vezi rezultatul exemplului aici!

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

Un sait format doar din text nu pare prea atractiv. Iar pentru ai da atractie saitului se pot utiliza imaginile! Subiectul urmator: inserarea imaginilor in pagina!
Imagini in HTML
  Imaginile in paginile web sunt foarte importante. Cu ajutorul lor saitul prinde viata si capata atractivitate dar trebuie luat in consideratie si faptul ca excesul de imagini va duce la incarcarea greoaie a saitului.

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 inca nu sa 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.

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

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

De mentionat faptul ca marcajul <img> nu este un marcaj cu pereche. Adaugarea la sfarstit a marcajului de genul </img> va fi inutila.


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>
Vezi rezultatul aici

Atat despre imagini. Ne adancim si mai mult in HTML incepand a studia tabelele, un subiect foarte important din limbajul HTML.
Tabele in HTML
  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 in zilele noastrea aceasta numai este o practica obisnuita (locul ei fiind luat de CSS), totusi ramane 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:
Cele mai uzuale:
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

In afara de aceste atribute, exista inca doua atribute foarte importante ale marcajului <td>.
Acestea sunt:
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.
Sa analizam un exemplu cu rowspan


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:
Angati    Ion Paladi    5
    Mihai Cretu    3
    Anton Stolbetski    6

rowspan i-a valoarea "3", doarece acum celula trebuie sa se intinda pe toata inaltimea celor trei celule.
Atat am avut a spune cu privire la tabelele din HTML. Acestea sunt notiunile de baza insa cel mai des folosite!

Am vazut o multime de saituri in care autorii acestora, pentru a mentine contact cu vizitatorii lor, aveau intro pagina niste campuri in care se cerea sa se introduca email-ul, numele si mesajul propus spre expediere, dupa care trebuia sa apesi un buton si mesajul era trimis la destinatar.
Cum se realizeaza aceasta? Se realizeaza cu ajutorul formularelor!
  Campuri (Text fields)
  1. Text 

2. Password 

3. File

Campurile reprezinta niste 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.
Butoane
  Butoanele, ca si campurile sunt definite prin intermediul marcajului <input />
Buton:
<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>

 

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>

 
Formulare in HTML
  Formularele reprezinta o modalitate de comunicare intre utilizatori si server. Pentru prelucrarea lor, sunt folosite diferite scripturi server-side, ex.: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: " 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:

 

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 (*).
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.
Marcaje HTML
Marcaje 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 paginii
TEXT=culoare    Culoarea textului pe paginii
LINK=culoare    Culoarea legaturiilor nevizitate din paginii
VLINK=culoare    Culoarea legaturiilor vizitate din paginii
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

Marcaje pentru liste
<DD>    Descriere definitie
<DL> </DL>    Lista de tip definitie
<DT>    Termen de definitie
<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 cu caractere aldine
<I> </I>    Afiseaza text cu caractere cursive
<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 logica puternica
<VAR> </VAR>    Program sau variabila
<BASEFONT SIZE = n>    Specifica dimensiunea implicita a fontului din pagina

Marcaje 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

Marcaje 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


              Limbajul HTML
________________________________________
13. Tag-uri

Marcaje 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 paginii
TEXT=culoare    Culoarea textului pe paginii
LINK=culoare    Culoarea legaturiilor nevizitate din paginii
VLINK=culoare    Culoarea legaturiilor vizitate din paginii
ALINK=culoare    Culoarea legaturiilor pe durata clicului exacutat de utilizator
BACKGROUND = url    Imaginea de fond pentru pagina
<P>    Paragraf
<Hn> <Hn>    Nivel de subtitlu al documentului (n = 1-6)
<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

Marcaje pentru liste
<DD>    Descriere definitie
<DL> </DL>    Lista de tip definitie
<DT>    Termen de definitie
<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 cu caractere aldine
<I> </I>    Afiseaza text cu caractere cursive
<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 logica puternica
<VAR> </VAR>    Program sau variabila
<BASEFONT SIZE = n>    Specifica dimensiunea implicita a fontului din pagina

Marcaje pentru cadre
<FRAMESET> </FRAMESET>    Definirea redactarii paginii
COLS=x    Numarul si marimea relativa a coloanelor
ROWS=x    Numarul si marimea relativa a liniilor
BORDER=x    Specifica starea "on" (activa) sau "off" (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = x    Specifica marimea chenarului
FRAMESPACING = x    Marimea spatiului dintre doua cadre adiacente
<FRAME>    Definitia unui anumit cadru
SRC=url    URL-ul sursa pentru cadru
NAME=nume    Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a>
SCROLLING=scrl    Defineste optiunea barei de derulare.Valori posibile: on(activa), off(inactiva), auto (automat)
FRAMEBORDER=x    Marimea chenarului din jurul cadrului
MARGINHEIGHT=x    Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru
MARGINWIDTH=x    Spatiu suplimetar la stanga si la dreapta unui anumit cadru
<NOFRAMES> </NOFRAMES>    Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru
<IFRAME>    Cadru intern (numai pentru (IE)
SRC=url    Sursa cadrului
NAME=s    Numele ferestrei (util pentru TARGET)
HEIGHT=x    Inaltimea cadrului inglobat
WIDTH=x    Latimea cadrului inglobat

Marcaje 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

Adaugarea imaginilor
<IMG    Marcajul de introducere a imaginilor
SRC=url    Sursa fisierului grafic
ALT=text    Textul alternativ de afisat, daca este necesar
ALIGN=aliniere    Alinierea imaginii in pagina. Valori posibile: top (sus), middle(in mijloc), bottom (jos), left (in stanga), right (la dreapta)
HEIGHT=x    Inaltimea imaginii (in pixeli)
WIDTH=x    Latimea imaginii
BORDER=x    Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura
HSPACE=x    Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli)
VSPACE=x    Spatiul suplimentar pe verticala din jurul imaginii (in pixeli)

Marcaje 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

Carcatere speciale
&    &amp; ampersand
˜    tilda
<    mai mic (less than)
>    mai mare (greater than)
©    simbolul de copyright
®    simbolul pentru marca inregistrata
á    a mic cu accent ascutit (acute)
â    a mic cu accent circiumflex
ñ    n mic cu tilda
ø    o mic barat (slash)

HTML avansat
<STYLE> </STYLE>    Specifica informatii referitoare modelul de stiluri
TYPE=val    Tipul modelului de stiluri. De regula "text/css"
<SCRIPT> </SCRIPT>    Include un script de regula Javascript, in pagina Web
LANGUAGE=limbaj    Limbajul utilizat
EVENT=eveniment    Eveniment care declanseaza executia unor scripturi specifice
FOR=numeobiect    Numele obiectului din pagina asupra caruia actioneaza scriptul



Radio butoane
Radio butoanele 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-uri
  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: 
 
TextArea
  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>






TextArea - 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




  TextArea - Readonly si Disabled
1.    readonly - acest atribut poate lua valorile "yes" sau "no". Cu ajutorul acestui atribut se specifica daca continutul campului de text va putea sau nu, fi modicat.
2.    disabled - atributul disabled este asemanator lui readonly, deasemenea nu permite modificarea textului, insa spre deosebire de acesta, textul va fi afisat in gri. In asa fel utilizatorul va percepe vizual ca campul respectiv nu poate fi modificat.
De mentionat ca textul dintr-un textarea definit cu "readonly" putea 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



Select
  Tagul <select> este utilizat pentru crearea listelor (drop-down lists). 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: 


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: 


Select - atributul "size"
Implicit doar 1 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:



Select - selectare multipla
Implicit se permite selectarea unui singur element din lista, insa este posibil ca mai multe de 1 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:


CTRL + click pe un element din lista - pentru a testa selectarea multipla.
Formulare in HTML
  Formularele reprezinta o modalitate de comunicare intre utilizatori si server. Pentru prelucrarea lor, sunt folosite diferite scripturi server-side, ex.: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: " 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:

 

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 (*).
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.
Introducere in HTML5
  HTML5 este o imbunatatire semnificativa a versiunii HTML 4.1 si tinde sa devina noul standard pentru HTML, XHTML si HTML DOM. Desi HTML5 este inca in progres si nu este oficial suportat, majoritatea browserelor moderne continua sa adauge elemente noi din HTML5.

Ce este nou in HTML5
Unele din cele mai interesante caracteristici noi in HTML5:
•    Au fost introduse tag-uri noi asa ca <article>, <footer>, <header>, <nav>, <section>
•    Controale noi pentru formulare asa ca calendar, date, time, email, url, search
•    Elementul <canvas> pentru desenare
•    Suport pentru redarea fisierelor audio si video
•    Suport pentru stocare offline de date (offline storage)


Lista de elemente noi
Tag-ul    Descrierea
<article>    marcheaza un articol
<aside>    marcheaza un continut aparte fata de continutul paginii, dar care are legatura cu el.
<audio>    marcheaza introducerea de continut audio
<canvas>    marcheaza introducerea de continut grafic
<command>    marcheaza un buton de comanda
<datalist>    marcheaza un meniu drop-down
<details>    marcheaza detaliile unui element
<dialog>    marcheaza un dialog, o conversatie
<embed>    marcheaza continut interactiv extern sau introducerea unui plugin
<figure>    marcheaza un grup de elemente care au legatura unul cu celalalt si care pot fi considerate in pagina, continut de sine statator.
<footer>    marcheaza sectiunea footer a pagini
<header>    marcheaza sectiunea header a pagini
<hgroup>    marcheaza o sectiune a pagini
<keygen>    marcheaza un cod generat automat intr-un formular
<mark>    marcheaza text evidentiat
<meter>    marcheaza valoarea unei unitati de masura cunoscute
<nav>    marcheaza o bara de navigare cu linkuri
<output>    marcheaza diferite tipuri de rezultate ale unui script oarecare.
<progress>    marcheaza o bara de progres fie ea grafica sau numerica
<rp>    defineste continut care va fi afisat in cazul in care browser-ul nu supotra tag-ul ruby
<rt>    defineste o regula sau o explicatie pentru tagul ruby
<ruby>    folosit impreuna cu caracterele asiatice
<section>    marcheaza o sectiune oarecare (header, footer, bara de navigare, capitole sau orice alta sectiune)
<source>    marcheaza sursa fisierului multimedia
<time>    marcheaza ora / data
<video>    marcheaza introducerea unui video



Atribute noi pentru tag-ul Input
Tag-ul    Descrierea
tel    Valoare de tip numar de telefon
search    Valoare de tip camp de cautare
url    Valoare de tip URL. (link)
email    Valoare de tip adresa de email.
datetime    Valoarea este de tip data sau timp
date    Valoarea este de tip data
month    Valoarea reprezinta una din lunile anului
week    Valoarea reprezinta una din saptamanile zilelor.
time    Valoarea este de tip timp
datetime-local    Valorea este de tip date/time local
number    Valoarea este un numar
range    Valoarea este un numar dintr-un interval dat
color    Valoarea este o culoare in hexazecimal. Ex: #FF8800
placeholder    Specifica un indiciu care descrie valoarea preconizata a unui camp.


Exemplu:
<form>
URL:
<input type="url" />
<input type="submit" value="Submit" />
</form>

URL: 
//incearca sa introduci o adresa web invalida si click Submit.
Canvas
  <canvas> este un element nou in HTML care poate fi utilizat pentru desene grafice folosind limbajul JavaScript. Un canvas este reprezentat de o arie dreptunghiulara, pe care ai posibilitatea de a controla fiecare pixel din el.

Cu ajutorul elementului canvas se pot construi diferite grafice, diagrame si animatii.

Utlizarea in sine a elementului canvas este usoara, insa sunt necesare careva cunostinte de JavaScript.



Instrumente puse la dispozitie
Instrumente de desenare
•    Dreptunghiuri
•    Cercuri
•    Linii si trasee (paths)
•    Curbe Bezier

Efecte
•    Efecte de umplere sau de desenare a conturului unei suprafete (fills and strokes)
•    Umbre (shadows)
•    Gradient liniar si radial
•    Transparenta

Transformare
•    Scalare
•    Rotatie
•    Translare


Crearea unui element canvas
<canvas id="myCanvas" width="200" height="100">
Ne pare rau, browser-ul dvs. nu suporta elementul canvas
</canvas>


Desenarea cu JavaScript
Asa cum am spus mai sus, elementul canvas nu are posibilitatea de a desena, ci toata desenarea trebuie facuta cu ajutorul limbajului JavaScript.
<script type="text/javascript">
var c=document.getElementById("myCanvas";
var cxt=c.getContext("2d";
cxt.fillStyle="#17BF2D";
cxt.fillRect(10,15,150,75);
</script>

Ne pare rau, browser-ul dvs. nu suporta elementul canvas

Gaseste canvasul dupa id
var c=document.getElementById("myCanvas";

Creaza contextul de desenare
var cxt=c.getContext("2d";

Specifica culoarea de desenare, verde
cxt.fillStyle="#17BF2D";

Deseneaza dreptungiul la pozitia x=10 si y=15, cu lungimea de 150 si latimea de 75 pixeli.
cxt.fillRect(10,15,150,75);
  Text
Exista 2 functii pentru desenarea textului: fillText si strokeText. Prima functie deseneaza forma textului, sau textul in sine, cu culoarea specificata de atributul fillStyle, pe cand a doua deseneaza doar conturul textului utilizand culoarea specificata cu ajutorul atributului strokeStyle.
Ambele functii au 3 parametri: textul care va fi afisat si coordonatele x si y. Mai exista si un parametru optional, al 4-lea, care specifica lungimea maxima a textului.

Mai jos este aratat un exemplu simplu utilizant cele 2 functii si atribute.
<script type="text/javascript">
cxt.font = '40px arial';
cxt.fillStyle = '#0008FF';
cxt.fillText ('Hello world!', 10, 50);
cxt.strokeStyle ="#E01B4C";
cxt.strokeText('Hello world!', 10, 100);
</script>

Rezultat:
Ne pare rau, browser-ul dvs. nu suporta elementul canvas



Umbre (shadows)
Exista 4 proprietati care permit lucrul cu umbrele:
•    shadowColor - culoarea umbrei
•    shadowBlur - stabileste cantitatea de estompare a umbrei, in pixeli. Cu cat mai mica este valoarea, cu atat mai clare sunt umbrele.
•    shadowOffsetX si shadowOffsetY - stabileste offset-ul umbrei, sau cu alte cuvine, pozitia umbrei fata de obiect, deasemenia in pixeli.

<script type="text/javascript">
cxt.font = '40px arial';
cxt.shadowColor='#F018EC';
cxt.shadowBlur = 5;
cxt.shadowOffsetX = 1;
cxt.shadowOffsetY = 1;
cxt.fillStyle = '#fff';
cxt.fillText ('Hello world!', 10, 50);
</script>

Rezultat:
Ne pare rau, browser-ul dvs. nu suporta elementul canvas


Demo
Canvas impreuna cu JavaScript pot face lucruri destul de interesante. Cu aproximativ 2 ani in urma (2010), cand am elaborat teza mea de licenta, am facut ceva care a implicat din belsug si canvas-ul din HTML5. Despre aceasta vorbesc in pagina Proiect in HTML5
Audio
HTML5 prevede o modalitate standard de a include audio in paginile web, cu elementului <audio>. Elementul audio poate reda fisiere de sunet, sau un flux audio.

Video formate suportate
Format    IE 9    Firefox 3.5    Opera 10.5    Chrome 3.0    Safari 3.0
Ogg Vorbis    No    Yes    Yes    Yes    No
MP3    Yes    No    No    Yes    Yes
Waw    No    Yes    Yes    Yes    Yes

Exemplu
<audio src="ring.ogg" controls="controls">
Browserul dvs nu suporta elementul video.
</video>

Exemplul de mai sus utilizeaza un fisier Ogg, si va lucra doar in Firefox, Opera si Chrome.

Pentru ca fisierul sa poata fi redat si in Internet Explorer si Safari, trebuie de specificat un fisier audio de tip MP3. Cu ajutorul elementului <source> se poate specifica mai multe surse. Browser-ul va utiliza primul format recunoscut.
<audio src="ring.ogg" controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Browserul dvs. nu suporta elementul <audio>.
</video>


Atributele elementului <audio>
Attribute    Value    Description
autoplay    autoplay    Daca este setat, atunci audio se porneste singur.
controls    controls    Daca este setat, atunci controalele player-ului vor fi afisate, asa ca butonoanele Play, Pause
loop    loop    Daca este setat, audio va incepe din nou de fiecare data dupa ce s-a terminat.
preload    preload    Daca este prezent, audio va fi incarcat la incarcarea paginii si va fi gata de rulare. Se ignoreaza daca "autoplay" este setat.
src    url    URL-ul audio
Video
Pana in ziua de azi majoritatea fisierelor video sunt redate cu ajutorul unui plugin, asa ca flash. Cu toate acestea, nu toate browserele au aceleasi plugin-uri.
HTML5 prevede o modalitate standard de a include video in paginile web, prin intermediul elementului <video>


Video formate suportate
Pana la moment exista 3 video formate suportate de elementul <video>:
Format    IE    Firefox    Opera    Chrome    Safari
Ogg    No    3.5+    10.5+    5.0+    No
MPEG 4    9.0+    No    No    5.0+    3.0+
WebM    No    4.0+    10.6+    6.0+    No

•    Ogg - Fisiere Ogg cu Theora video codec si Vorbis audio codec
•    MPEG4 - Fisiere MPEG 4 cu H.264 video codec si AAC audio codec
•    WebM - Fisiere WebM cu VP8 video codec si Vorbis audio codec

Exemplu
<video src="nature.ogg" controls="controls">
Browserul dvs nu suporta elementul video.
</video>

Browserul dvs nu suporta elementul video.

In exemplul de mai sus este utilizat un fisier ogg care va putea fi redat in Firefox, Opera si Chrome. In cazul in care browser-ul nu suporta tag-ul video, se va afisa mesajul din interiorul tagurilor <video> ... </video>: "Browserul dvs nu suporta elementul video"

Atributele elementului <video>
Attribute    Value    Description
audio    muted    Definirea starii implicite pentru coloana sonora (audio). In prezent doar "muted" (dezactivat) este permisa.
autoplay    autoplay    Daca este setat, atunci video se porneste singur.
controls    controls    Daca este setat, atunci controalele player-ului vor fi afisate, asa ca buton Play, Pause
height    pixels    Seteaza intaltimea player-ului.
width    pixels    Seteaza latimea player-ului.
loop    loop    Daca este setat, video va incepe din nou de fiecare data dupa ce s-a terminat.
poster    url    Specifica URL-ul unei imagini reprezentand video.
preload    preload    Daca este prezent, video va fi incarcat la incarcarea paginii si va fi gata de rulare. Se ignoreaza daca "autoplay" este setat.
src    url    URL-ul video.
Proiect in HTML5: Mini-PAINT
  Canvas in combinatie cu JavaScript pot face lucruri destul de interesante. Aproximativ cu 2 ani in urma, cand am elaborat teza de licenta, am utilizat din belsug canvas-ul.

In linii generale, era vorba despre o aplicatie web care permitea sa personalizezi un tricou.
Adica: site-ul in sine era un magazin online de tricouri, putea-i sa alegi un tricou simplu si cu ajutorul unei interfete grafice, putea-i sa-l personalizezi adaugand text, imagini, si alte elemente grafice pe tricou.
Ideia aplicatiei era ca tu sa-ti personalizezi online tricoul dupa bunul tau plac, dupa care puteai sa-l comanzi.

Sincer sa fiu, aplicatia nu prea i-a uimit pe profesori. Mai mult - am primit o nota slaba, sau cel putin mai joasa decat asteptarile mele. Insa, dincolo de frustrari si de supararea pe care o aveam, eram multumit in sinea mea. Da! Eram multumit pentru ca am utilizat si invatat niste lucruri care intr-adevar imi erau interesante. Eram multumit pentru ca m-am ocupat exact cu ceea ce imi placea sa ma ocup cel mai mult (oportunitati mai rar intalnite pe parcursul studentiei
Mai tarziu, s-a dovedid ca anume aceasta este ceea ce conteaza cel mai mult.

OK. Ceea ce vreau sa prezint in continuare este o frantura din teza de licenta, substantial modificata, adaptata si adusa la conditiile unei aplicatii simple de desenare, elaborata cu ajutorul elementului Canvas si JavaScript. Aplicatia are urmatoarele instrumente de desenare: linie, creion, cerc, dreptunghi, text, si posibilitatea de a seta proprietatile acestora.

Mini-Paint >>
...........................



Sper ca am fost destul de explicit

Modificat de danny (acum 13 ani)
pus acum 13 ani
   
Pagini: 1  

Mergi la