Scribd
Încărcați
162 vizualizări

HTML Curs

Documentul prezintă diferite moduri de a accesa site-uri web, inclusiv prin intermediul browserelor web, dispozitive, servere web și cititoare de ecrane. De asemenea, explică structura paginilor web și elementele HTML de bază.

Încărcat de

rubics
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
162 vizualizări

HTML Curs

Documentul prezintă diferite moduri de a accesa site-uri web, inclusiv prin intermediul browserelor web, dispozitive, servere web și cititoare de ecrane. De asemenea, explică structura paginilor web și elementele HTML de bază.

Încărcat de

rubics
Drepturi de autor
© © All Rights Reserved
Formate disponibile
Descărcați ca PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 52

CURS HTML

Diferite moduri de a accesa Web-ul


BROWSERELE DISPOZITIVE
Site-urile web pot fi accesate prin Site-urile web pot fi accesate de pe un numar
intermediul unui software denumit browser tot mai mare de dispozitive: computere
web. desktop, laptopuri, tablete si telefoane mobile.
Exemple: Firefox, Internet Explorer, Safari, Este important ca atunci cand se dezvolta un
Chrome si Opera. site web, sa se tina cont ca:
Pentru a vizualiza o pagina web, utilizatorii • monitoarele pe care vor fi vizualizate au
fie introduc o adresa web in browser, fie
folosesc un link de pe alt site sau un diferite dimensiuni
bookmark. • viteza conexiunii poate fi mic sau mare.

SERVERELE WEB SCREEN READERS


Atunci cand se introduce o adresa web a Screen readers (cititoarele de ecrane) sunt
intr-un browser, cererea este trimisa prin programe care citesc utilizatorilor continutul
intermediul internetului catre un computer ecranului unui computer. Sunt de obicei
special cunoscut sub denumirea de server
web care gazduieste site-ul web. utilizate pentru pesoanele cu probleme de
vedere.
Serverele web sunt computere speciale
care sunt conectate in mod continuu la
Internet si care sunt optimizate sa trimita
pagini web utilizatorilor ca raspuns la
cererile efectuate.
Cum functioneaza Web-ul?
Atunci cand se viziteaza un site web, serverul web care
gazduieste site-ul poate fi oriunde in lume. Pentru a gasi
locatia serverului web, browserul se va conecta mai intai
la un server DNS (Domain Name System).
Exemplu: se presupune ca un utilizator din Anglia vrea sa
vizualizeze site-ul web al galeriei de arta Louvre din
Franta care este localizat la www.louvre.fr. Etape:
• Conectarea la web se realizeaza prin intermediul IPS
(Internet Service Provider). Utilizatorul introduce in
browser numele de domeniu sau adresa web a site-ului
pe care vrea sa-l viziteze, de ex. www.louvre.fr.

• Numarul unic returnat de serverul


• Computerul se conecteaza la reteaua de servere DNS catre computerul utilizatorului
DNS. Aceasta retea se comporta precum agendele permite browserului sa se conecteze
telefonice – comunica computerului utilizatorului adresa la serverul web care gazduieste siteul
IP asociata cu numele domeniului care se doreste a fi web pentru care a fost facuta
accesat. cererea.
Adresa IP este un numar format din 12 cifre, organizate
în patru grupuri de câte trei cifre, separate prin punct. • Serverul web trimite utilizatorului
pagina pentru care a fost facuta
Fiecare dizpozitiv conectat la web are o adresa IP unica cererea.
(este precum CNP-ul unei persoane).
PAGINI WEB

HTML
HyperText Markup Language - structura
paginii web si continutul acesteia

CSS
Cascade Style Sheets - design-ul paginii
web

JavaScript
Elemente avansate de interactiune
ISTORIC HTML
• HTML 2.0 – 1995
• HTML 3.2 – Ian 1997
• HTML 4.0 – Dec 1997
• HTML 4.01 – 1999
• HTML 5 – 2011

Deoarece au existat mai multe versiuni de HTML, fiecare pagina web ar trebui sa
inceapa cu o declaratie DOCTYPE pentru a comunica browserului ce versiune de
HTML este folosita de pagina web (desi browserele de obicei afiseaza pagina chiar
daca aceasta declaratie nu exista).

HTML 5
<!DOCTYPE html>

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

Adaugati <!DOCTYPE html> in toate paginile web pe care urmeaza sa le creati!


Ce este un fisier HTML?
Un fisier HTML – fisier text cu extensia .htm sau .html
– sursa paginii Web (acest fisier este scris în limbajul HTML, pe care, la
afisare, browserul îl interpreteaza)

Codul HTML este realizat din caractere care se afla in interiorul parantezelor ascutite <>.
Acestea se numesc elemente HTML.

Elementele sunt compuse de obicei din 2 taguri:


• tag de deschidere
• tag de sfarsit (tagul de sfarsit are in plus un slash)

Intre tag-ul de inceput si tag-ul de sfarsit se afla continutul elementului :


<tag>(continut tag)</tag>

Elementele HTML comunica browserului cum sa foloseasca informatia dintre tagurile de


deshidere si de inchidere. HTML foloseste elemente HTML pentru a descrie structura
paginii.
Structura unei pagini HTML
<html>
<body> <head>
<title>Acesta este titlul paginii </title>
Orice se afla in interiorul acestui element este
</head>
afisat in interiorul ferestrei browserului. <body>
<h1>Acesta este corpul paginii</h1>
<head> <p>Orice este scris in interiorul lui body este
Inaintea elementului <body> se poate afla afisat in fereastra browserului.</p>
elementul <head>. Acesta contine informatii </body>
despre pagina (si nu informatii care sunt </html>
afisate in browser). De obicei in interiorul
unui element <head> se gaseste un element
<title>.

<title>
Continutul elementului <title> este afisat in
partea superioara a paginii, fie deasupra
spatiului in care se introduce URL-ul paginii
pe care vrem sa o vizitam sau pe tab-ul
pentru pagina respectiva
Atribute

• Specifica informatii aditionale despre continutul unui element


• Sunt intotdeauna mentionate in tag-ul de inceput al unui element
• Valorile atributelor sunt trecute intre ghilimele (align=“center”)
• Sunt de forma nume=“valoare”
• Atributele pe care le poate avea orice element HTML sunt:
o class – specifica una sau mai multe clase de stil pentru un element. O
clasa de stil este definita cu ajutorul CSS;
o id – identificator unic pentru fiecare element;
o style – defineste stilul CSS inline pentru un element;
o title – specifica informatie suplimentara despre un element (este
afisata ca tool tip).
Exemple de atribute HTML

<h1 id="myHeader">Hello World!</h1>

<table border="2" ></table>

<h4 title="Hello HTML!">Titled Heading Tag Example</h4>

<p style="font-family:Arial; color:#FF0000;">Text...</p>

<p class="numeClasa1" >Text…</p>

<a href=" http://www.google.com " target= " _blank>


Google</a>
Tag-ul <head>

• Are rolul de a descrie pagina web


• Informatiile prezentate in acest tag nu vor fi vizibile in pagina, cu
exceptia titlului ce va apare pe linia de titlu a browserului
• Tag-uri ce pot fi folosite in sectiunea head:

<title> (acest element este obligatoriu in interiorul tag-ului <head>)


<style>
<base>
<link>
<meta>
<script>
Tag-ul <head> - exemple
<head>
<title>HTML Reference</title>

<meta name="description" content=“Curs HTML">


<meta name="keywords" content="HTML,CSS,JavaScript">

<base href="http://www.w3schools.com/images/" target="_blank">

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>

<link rel="stylesheet" type="text/css" href=“style.css">

<script>
document.write("Hello World!");
</script>

<script type="text/javascript" src="myjsfile.js">


</head>
Comentarii HTML
• Sunt inserate in cod pentru a-l face mai usor de inteles
• Sunt ignorate de catre browser si nu sunt afisate
• Pot fi vizualizate in sursa paginii
• <!-- Acesta este un comentariu-->

Stiluri CSS
• Definesc stilul de afisare a elementelor in pagina
• Pot fi specificate in 3 moduri:
1.Stil css inline: <p style="color: #000ff00;">Text verde</p>

2.Utilizand tag-ul style: <style type="text/css"> body {background-


color:yellow;} </style>

3.Folosind un fisier extern: <link rel="stylesheet" type="text/css" href="


fisierul.css" >
Elemente HTML pentru formatarea
textului
Implicit, textul din interiorul elementului <body> …</body> este afi at cu parametrii
prestabili i ai browserului.

Tag-uri care modifica stilul textului:


• i (italic) - <i></i>
• b (bold) - <b></b>
• big – textul va fi afi at cu un font mai mare decât cel curent - <big></big>
• small – textul va fi afi at cu un font mai mare decât cel curent - <small></small>
• strike (barat) – textul va fi afi at cu stilul de text t iat cu o linie -
<strike></strike>
• u (subliniat) - <u></u>
• sub (indice) - <sub></sub>
• sup (exponent) - <sup></sup>

Stilurile de text pot fi imbricate (mai multe stiluri pot fi suprapuse simultan pe acelasi
element)
<i><b> Text inclinat si ingrosat </b></i>
Elemente HTML pentru afisarea
textului
Sunt utilizate pentru a preciza o destina ie specific pentru un anumit bloc de text.
Exemple:
• Paragraf (p): - permite împartirea unui text mai lung în paragrafe
• Titluri (h1, h2, h3, h4, h5 i h6): h1 – fontul cel mai mare i mai îngro at
• Elemente de citat (blockquote i q) : pentru introducerea unor citate lungi
blockquote – afi at începând cu rând nou ; î i indenteaz con inutul
q – destinat citatelor inline
• Linii orizontale (hr): utilizate pentru a separa diferite sec iuni ale unei pagini web;
• Elemente de grupare (div i span)
• Bloc de text preformatat (pre)

În HTML exist 2 tipuri de elemente:


• Elemente bloc - sunt afi ate începând cu un rând nou (de ex. <div>, <p> , <h1>, <ul> ,
<li>, <hr/>)
• Elemente inline - sunt afi ate pe acela i rând (de ex. <a>, <b>, <en> , <img>) ca si
elemente invecinate.
Headings
<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>

HTML are 6 nivele de headinguri:


• <h1> trebuie folosit pentru cel mai important titlu;
• <h2> este utilizat pentru titlurile capitolelor;
• <h3> este utilizat pentru titlurile subcapitolelor, etc.

Sunt importante pentru SEO (search engine optimization) – motoarele de cautare folosesc titlurile
pentru indexarea structurii si a continutului paginilor web.

Trebuie folosite doar pentru titluri si nu pentru a afisa un text mai mare.
Imagini
In HTML, imaginile sunt inserate folosind elementul <img>.
Elementul imagine are doar tag de inceput, nu are continut si nici tag de sfarsit.

Poate avea urmatoarele atribute:


src – specifica browserului unde se gaseste imaginea.
alt – furnizeaza o descriere text a imaginii in cazul in care imaginea nu poate fi vizualizat .
title – furnizeaza informatii suplimentare despre imagine.
– browserele vor afisa continutul acestui atribut ca ‘tooltip’
height – specifica inaltimea imaginii in pixeli;
width – specifica latimea imaginii in pixeli.

<img src=“images/smiley.gif" alt="Smiley face" title="Smiley face“ height=“160”


weight=“210” />
Iframes
Sunt folosite pentru a afisa o pagina web in interiorul altei pagini web

<iframe src="URL"></iframe>

Pentru tag-ul <iframe> se pot specifica urmatoarele atribute: width, height, src,
frameborder, scrolling, name, id, etc.

<iframe
src="http://maps.google.co.uk/maps?q=moma+new+york&amp;output=embed">
width="450"
height="350"
frameborder="0"
scrolling="no">
</iframe>
Tipuri de liste
O list este o secven de articole. Într-o pagin web pot fi inserate mai multe tipuri de liste:
• liste neordonate (f o ordine specific )
• liste ordonate
• liste de defini ii

List neordonat :
• este inserat cu blocul <ul>…</ul>
• pentru a insera un articol în list se utilizeaz elementul <li> .
• atributului type al elementului <ul> i se poate asocia una din urm toarele valori: disc (valoare
prestabilit ), circle, square.

<h3>An unordered list:</h3>


<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
Liste ordonate
• lista este inserat cu blocul <ol>…</ol>. Pentru a insera articole în list utiliz m elementul <li>;
• atributul type al elementului <ol> poate primi una din urm toarele valori:
o 1 (pentru cifre arabe: 1, 2, 3 etc; valoarea prestabilit ),
o a (pentru litere mici: a,b,c etc.),
o A (pentru litere mari: A, B, C, etc.),
o i (pentru cifre romane scrise cu litere mici: i, ii,iii, iv, v, etc. ),
o I (pentru cifre romane scrise cu litere mari: I, II, III, IV, V, etc.).
• atributul start al elementului <ol> prime te ca valoare numai numere întregi pozitive i reprezint
pozi ia de start a elementelor listei.

<h3>An ordered list:</h3>


<ol>
<li>The first list item</li>
<li>The second list item</li>
<li>The third list item</li>
</ol>
List de defini ii
• const dintr-o serie (secven ) de termeni precum i descrierile (defin iile)
acestora;

• este inserat cu blocul <dl>…</dl>. Pentru a insera articole în list utiliz m


eticheta <dt> pentru a specifica termenul definit i eticheta <dd> pentru a sprecifica
descrierea (defini ia) termenului;

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Gruparea textului si a elementelor
intr-un bloc
<div id="header">
Elementul <div> permite gruparea unui set <img src="images/logo.jpg" alt=“Party" />
de elemente intr-un container/bloc.
<ul>
De exemplu, se poate crea un element <li><a href="index.html">Home</a></li>
<div> care sa contina toate elementele <li><a
pentru headerul unui site (logo-ul si href="biography.html">Biography</a></li>
navigarea).
<li><a href="works.html">Works</a></li>
Intr-un browser, continutul elementului <li><a href="contact.html">Contact</a></li>
<div> va incepe pe un rand nou. </ul>
</div><!-- end of header -->
De asemenea se pot folosi atributele id si
class ale elementului <div> pentru a defini
o regula CSS prin care sa se stabileasca cat
spatiu ar trebui sa ocupe elementul <div>
pe ecran.
Gruparea textului si a elementelor
inline
<!DOCTYPE html>
<html>
<span> <head>
Elementul <span> este utilizat cand se <style>
doreste schimbarea stilului unei sectiuni .gallery {
de text dintr-un paragraf (de ex pentru text-transform: uppercase;
colorarea unei parti de text) color: #045FB4;
}
</style>
Cel mai important motiv pentru care
elementul <span> este folosit este ca prin </head>
intermediul unei reguli CSS putem <body>
controla modul in care continutul <p>Anish Kapoor won the Turner Prize in 1991
and
elementului <span> este afisat.
exhibited at the <span class="gallery">Tate
Modern</span> gallery in London in
Folosit fara o regula CSS, elementul 2003.</p>
<span> nu conduce la nicio modificare </body>
vizuala. </html>

REZULTAT:
TABELE
Un tabel prezinta informatii intr-un format grid. Tabele se pot folosi in foarte multe situatii, de
exemplu: pentru prezentarea rapoartelor financiare, a orarelor programelor TV sau a
rezultatelor sportive.
Structura de baza a tabelelor
<table>
<table>
• un element <table>…</table> este utilizat pentru a crea un
tabel. <tr>
• continutul unui tabel este adaugat apoi rand cu rand. <td>15</td>
<td>15</td>
<td>30</td>
<tr> (table row) </tr>
• inceputul unui rand este indicat prin intermediul tag-ului <tr>
deschis <tr> ; <td>45</td>
• acest tag este urmat apoi de unul sau mai multe elemente <td>60</td>
<td> …</td> (cate unul pentru fiecare celula a randului); <td>45</td>
• la finalul randului se utilizeaza tag-ul de inchidere </tr>. </tr>
</table>

<td> (table data) REZULTAT:


• fiecare celula a tabelului este reprezentata printr-un 15 15 30
element <td>…</td> ; 45 60 45
• la finalul celulei se utilizeaza un tag de inchidere </td> tag.
Antetul tabelului
<th> (table heading)
• utilizat precum elementul <td> <table>
<tr>
• dar scopul lui este de a reprezenta <th></th>
antetul pentru o coloana sau pentru un rand <th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
Daca o celula nu are continut, atunci trebuie <tr>
folosit un element <td> sau <th> pentru a <th scope="row">Tickets sold:</th>
<td>120</td>
semnala prezenta unei celule goale. <td>135</td>
</tr>
<tr>
Atributul scope al elementului <th> poate fi <th scope="row">Total sales:</th>
folosit pentru a indica daca antetul este <td>$600</td>
<td>$675</td>
pentru o coloana sau pentru un rand. </tr>
</table>
Celule care se intind pe mai multe coloane
<table>
Cateodata se doreste ca intrarile intr-un tabel sa <tr>
se intinda pe una sau mai multe coloane. <th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
Atributul colspan poate fi utilizat cu elementele <th>12am</th>
<td> sau <th> si indica pe cate coloane se </tr>
<tr>
intinde celula respectiva. <th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
Celule care se intind pe mai multe randuri
<table>
Cateodata se doreste ca celulele dintr-un tabel sa <tr>
se intinda pe unul sau mai multe randuri. <th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
Atributul rowspan poate fi utilizat cu elementele </tr>
<td> sau <th> si indica pe cate randuri se intinde <tr>
celula respectiva. <th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
<table>
<table>

Tabele LUNGI <thead>


<tr>
<th>Date</th>
<th>Income</th>
Exista 3 elemente care permit definirea structurii unui <th>Expenditure</th>
tabel. </tr>
Prin intermediul acestor elemente tabelele sunt </thead>
accesibile si pentru cei cu probleme de vedere iar cele 3 <tbody>
<tr>
sectiuni pot fi stilizate intr-o maniera diferita.
<th>1st January</th>
<td>250</td>
<thead> <td>36</td>
Antetul tabelului </tr>
<tr>
<th>2nd January</th>
<tbody> <td>285</td>
Corpul tabelului <td>48</td>
</tr>
</tbody>
<tfoot>
<tfoot>
Footerul tabelului. <tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
Linkuri
Leg turile (Linkuri) sunt elementele dintr-o pagin web care fac posibil navigarea între resursele
Internet. Totu i leg turile permit accesul doar la resurse Internet statice, predefinite.

O legatur HTML are dou p rti:


• Adresa paginii sau, în general, a resursei care va fi înc rcat în momentul select rii leg turii;
• Textul activ, care va fi afi at pe ecran, si care, selectat, va determina înc rcarea paginii de la
adresa pe care o specific legatura.

Forma cea mai simpl a unei astfel de directive este:


<a href=”URL-adresa paginii asociate”> Cuvinte care se pot selecta </a>

<a href="http://www.w3schools.com">Visit W3Schools.com!</a>


<a href=“index.html" >Home<a>
<p><a href="#top">Top of page</a></p>
<a href="http://www.google.com" target=“_blank”>Google<a>
<a href="mailto:[email protected]">Email Jon</a>
Linkuri catre o parte specifica a aceleiasi
pagini
Initial trebuie sa se determine care sunt punctele
(elementele HTML) catre care trebuie sa se faca <h1 id="top">Film-Making Terms</h1>
legatura.
<a href="#arc_shot">Arc Shot</a><br />
<a href="#interlude">Interlude</a><br />
Legatura se va realiza prin intermediul valorii
atributului id (acest atribut poate fi utilizat pentru <h2 id="arc_shot">Arc Shot</h2>
orice element HTML). <p>A shot in which the subject is
photographed by an encircling or moving
camera</p>
Valoarea este asociata atributului href a
elementului <a>, diferenta este ca valoarea
atributului href incepe cu simbolul #. <h2 id="interlude">Interlude</h2>
<p> A brief, intervening film scene or
sequence, not specifically tied to the plot,
In exemplul alaturat: that appears within a film </p>
<a href=“#top”> face legatura la elementul <h1>
din partea superioara a paginii al carui atribut id <p><a href="#top">Top</a></p>
are valoarea “top”.
FORMULARE
• Traditional, termenul ‘formular’ se refera la un document printat care contine
spatii in care se pot completa diferite informatii.

• HTML imprumuta conceptul de formular pentru a face referire la diferite elemente


care permit colectarea informatiilor de la diferiti vizitatori ai unui site.

• Cel mai cunoscut formular de pe web este probabil casuta de cautare care sta in
mijlocul paginii Google. Exemple de situatii in care se folosesc formulare:
inregistrarea pe un site, cumparaturi online, autentificare pentru contul de mail,
etc..
Elementele formularului
INSERARE TEXT:
Camp text: folosit pentru o Elementul ascuns: similar cu Textarea: folosit pentru mai
singura linie de text (adrese de campul text dar caracterele nu multe linii de text, cum ar fi
email, nume). sunt afisate. mesajele si comentariile.

LUAREA DE DECIZII:
Butoane radio: userul trebuie Casete de validare (checkboxes): Lista de selectie: userul trebuie
sa selecteze o singura user-ul poate selecta sau deselecta sa aleaga o optiune dintr-o lista
optiune. una sau mai multe optiuni. de optiuni.

TRIMITEREA FORMULARELOR:
Butonul de trimitere: folosit pentru Butonul imagine: similar cu Incarcarea unui fisier:
a trimite datele din formular catre butonul de trimitere dar permite permite utilizatorilor sa
alta pagina web. utilizarea unei imagini. incarce fisiere (de ex.
imagini) intr-un site.
Cum functioneaza formularele?
Un formular consta din mai multe
elemente, fiecare colectand cate o
informatie. Serverul trebuie sa stie de la
ce element al formularului primeste
informatia respectiva.

De aceea browserul trimite informatia


catre server folosind perechi
nume/valoare.
In exemplul de mai sus, utilizatorul
completeaza username-ul si selecteaza
cantaretul de Jazz favorit.
Urmatoarele perechi name/value sunt
trimise catre server:
username = Ivy si
vote=Herbie
Elementul camp de text
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" />
</p>
</form>

REZULTAT:

Elementul <input> este utilizat pentru a crea diferite elemente ale formularului. Valoarea atributului
type determina ce fel de element va fi creat.

type=“text” – se creeaza o intrare cu o singura linie de text.


name – fiecare element al formularului trebuie sa aiba atributul ‘name’. Valoarea acestui atribut
identifica elementul formularului si este trimisa la server impreuna cu informatia introdusa de user.
maxlength – limiteaza numarul de caractere pe care userul le poate introduce intr-un camp de text
size – este indicat ca atributul ‘size’ sa nu fie folosit in noile formulare. A fost folosit in versiuni mai vechi
de formulare pentru a indica lungimea casutei campului de text (adica numarul de caractere vizibile -
pot fi introduse mai multe).
Elementul parola
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" />
</p>
<p>Password:
<input type="password“ name="password" size="15" maxlength="30" />
</p>
</form>

REZULTAT:

type=“password” – daca atributul type are valoarea ‘password’ atunci se creeaza o intrare cu o singura
linie de text si caracterele sunt ascunse.
De asemenea se pot folosi si atributele name, size si maxlength.
Textarea
<form action="http://www.example.com/login.php">
<p> What do you think of this gig?</p>
<textarea name="comments" cols="20" rows="4"> Enter your comments… </textarea>
</form>

REZULTAT

Elementul <textarea> este folosit pentru mai multe linii de text. Spre deosebire de alte elemente de
intrare, acest element nu este un element gol ci este compus dintr-un tag de deschidere si unul de
inchidere.

Atributul cols specifica numarul de caractere afisate intr-o linie iar atributul rows numarul de linii
afisate simultan. Se recomanda ca in locul acestor atribute sa se utilizeze CSS pentru a controla
inaltimea si latimea elementului <textarea>.
Butoane radio
<form action="http://www.example.com/profile.php">
<p>Please select your favorite genre: <br />
<input type="radio" name="genre" value="rock" checked="checked" /> Rock
<input type="radio" name="genre" value="pop" /> Pop
<input type="radio" name="genre" value="jazz" />Jazz
</p>
</form>

REZULTAT:

<input type=“radio”> – permite user-ului sa selecteze o singura optiune.

name – atributul name este trimis la server impreuna cu valoarea optiunii selectate de user.
Cand un user are posibilitatea sa aleaga dintre mai multe optiuni pentru a raspunde la o
intrebare, valoarea atributului name trebuie sa fie aceeasi pentru toate acele butoane radio.
value – atributul value indica valoarea trimisa la server pentru optiunea selectata.
checked – Atributul checked poate fi utilizat pentru a indica ce valoare este selectata implicit
cand pagina este incarcata. Valoarea acestui atribut este ‘checked’.
Casete de validare (checkboxes)
<form action="http://www.example.com/profile.php">
<p>Please select your favorite music service(s): <br />
<input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes
<input type="checkbox" name="service" value="lastfm" /> Last.fm
<input type="checkbox" name="service" value="spotify" /> Spotify
</p>
</form>

REZULTAT:

<input type=“checkbox”> – permite user-ului sa selecteze (si deselecteze) una sau mai multe optiuni

name – atributul name este trimis la server impreuna cu valorile optiunilor selectate de user.
– valoarea atributului name trebuie sa fie aceeasi pentru toate acele butoane checkbox.
value – atributul value indica valoarea trimisa la server pentru optiunea bifata.
checked – Atributul checked poate fi utilizat pentru a indica valoare bifata implicit atunci cand pagina
este incarcata. Valoarea acestui atribut este ‘checked’.
Lista de selectie
<form action="http://www.example.com/profile.php"> REZULTAT:
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>

Lista de selectie <select>…</select> permite user-ului sa aleaga unul sau mai multe elemente
dintr-o lista finita. Aceasta contine doua sau mai multe elemente <option>.

Atributele posibile pentru elementul <select>:


name – ataseaza listei un nume (utilizat in perechile name=value expediate serverului).
size – precizeaza (printr-un numar intreg pozitiv, valoarea prestabilita fiind 1) cate elemente din
lista sunt vizibile la un moment dat pe ecran.
multiple – permite userului sa selecteze mai multe optiuni din lista. Valoarea acestui atribut este
‘multiple’.
Lista de selectie
<option>
Acest element este utilizat pentru a specifica optiunile care pot fi selectate de user. Cuvintele
dintre tagul de deschidere <option> si tag-ul de inchidere </option> vor fi afisate userului.

value – elementul <option> utilizeaza atributul value pentru a indica valoarea trimisa la server
impreuna cu numele listei de selectie, daca aceasta optiune este selectata.

selected – atributul ‘selected’ poate fi folosit pentru a indica optiunea selectata implicit in
momentul in care pagina este incarcata. Valoarea acestui atribut este ‘selected’. Daca acest
atribut nu este folosit, atunci prima optiune va fi afisata cand pagina este incarcata. De asemenea
daca userul nu selecteaza nicio optiune atunci prima optiune va fi trimisa la server.
Incarcarea unui fisier
<form action="http://www.example.com/upload.php" method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>

REZULTAT:

<input> - pentru a se permite userilor sa incarce un fisier (de exemplu o imagine, un film video
mp3 sau un document PDF) se foloseste elementul <input> cu atributul type="file“.

type=“file” – creeaza un buton browse. Cand userul apasa pe acest buton o fereastra se va
deschide, permitand astfel sa selecteze un fisier local care sa fie incarcat pe site-ul web .

Cand permitem userilor sa incarce fisiere, atributul method al formularului trebuie sa aiba
valoarea POST (nu putem trimite fisiere folosind metoda HTTP GET).
Butonul Submit
<form action="http://www.example.com/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe" value="Subscribe" />
</form>

REZULTAT:

<input>
type=“submit” - butonul submit este utilizat pentru a trimite un formular la server.
name – se poate utiliza atributul ‘name’ dar nu este necesar
value – atributul ‘value’ este utilizat pentru a controla textul afisat pe buton.

Browserele vor afisa butonul submit in diferite moduri. Se poate folosi CSS pentru a controla
modul in care este afisat sau se poate folosi o imagine pentru buton
Butonul Imagine
<form action="http://www.example.com/subscribe.php">
<p>eSubscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="images/subscribe.jpg" width="100" height="20" />
</form>

REZULTAT:

<input>
type=”image” – daca se doreste utilizarea unei imagini pentru butonul de submit.

Butonul <button>
<form action="http://www.example.com/add.php">
<button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button>
</form>

REZULTAT:

<button>
Elementul <button> a fost introdus pentru a acorda userilor un control mai mare asupra modului in care
butoanele sunt afisate cat si pentru a permite altor elemente sa apara in interiorul butonului.
Etichetarea elementelor formularului
<label>
Fiecare element al formularului trebuie sa aiba propriul <label> (astfel formularul este accesibil si
pentru cei cu probleme de vedere).

Elementul <label> poate fi utilizat in doua moduri:


• poate sa cuprinda atat descrierea text cat si elementul formularului
• poate fi definit separat de elementul formularului. In acest caz atributul for specifica elementul
formularului cu care eticheta este corelata.

<form action="http://www.example.org/profile.php">
<label>Age: <input type="text" name="age" /></label> <br/ >
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
</form>

for
• atributul for specifica asupra carui element al formularului se aplica eticheta.
• valoarea atributului for este identica cu valoarea atributului id a elementului formularului
pentru care eticheta este creata.
Gruparea elementelor formularului
<form action="http://www.example.org/profile.php">
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>Telephone:<br />
<input type="text" name="telephone" /></label>
</fieldset>
</form>

<fieldset>
• diferite elemente ale formularului pot fi grupate prin intermediul unui element <fieldset>.
• Se utilizeaza mai ales la formularele lungi.

<legend>
• elementul <legend> poate fi plasat imediat dupa tagul de deschidere <fieldset>
• contine un titlu care ajuta la identificarea scopului grupului de elemente ale formularului.
HTML 5 – validarea formularelor
Frecvent, formularele pe paginile web afiseaza userilor mesaje daca un element al formularului
nu a fost completat corect. Acesta actiune este cunoscuta sub denumirea de validare a
formularelor.

Traditional, validarea formularelor este realizata prin intermediul JavaScript. Incepand cu HTML 5
o parte din actiunile de validare se realizeaza la nivel de browser.

Prin validare se garanteaza faptul ca informatiile din formular care ajung la server pot fi
interpretate de acesta

Avantajele realizarii validarii pe partea de client:


- se reduce volumul de munca pe partea serverului
- permite userilor sa observe mai rapid daca datele introduse nu sunt corecte (in comparatie
cu validarea efectuata pe partea de server).
Validarea elementelor formularului
<form action="http://www.example.com/login/" method="post">
<label for="username">Username:</label>
<input type="text" name="username" required="required" /></title><br />
<label for="password">Password:</label>
<input type="password" name="password" required="required" />
<input type="submit" value="Submit" />
</form>

REZULTAT:

Un exemplu de validare a formularelor cu HTML 5 este atributul required, care poate fi utilizat
pentru orice element al formularului pe care userul trebuie sa-l completeze
Validarea intrarilor de tip data
<form action="http://www.example.com/bookings/" method="post">
<label for="username">Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>

REZULTAT
(in Chrome):

Multe formulare trebuie sa colecteze informatii precum date calendaristice, adrese de email si
URL-uri. In mod traditional aceste informatii se introduc in campuri de text.
HTML 5 introduce noi elemente pentru formulare pentru a standardiza modul in care unele
informatii sunt colectate. Browserele care nu recunosc aceste elemente le vor trata ca pe o
singura linie de text.

type=“date” – se foloseste in cazul in care userul trebuie sa selecteze o data calendaristica.


Validarea adreselor de email
HTML 5 a introdus elemente care permit vizitatorilor sa specifice adrese de email si URL-
uri. Browserele care nu suporta aceste elemente le vor trata ca pe simple campuri de text.

type=“email” – in cazul in care userul trebuie sa introduca o adresa de email. Browserele


care suporta validarea HTML5 vor verifica daca userul a introdus o adresa
de email valida.

<form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" required="required"/>
<input type="submit" value="Submit" />
</form>

(REZULTAT in Google Chrome)


Validarea URL-urilor
type=“url” – in cazul in care userul trebuie sa introduca o adresa web. Browserele
care suporta validarea HTML5 vor verifica daca userul a introdus un URL valid.

<form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
<input type="url" name="website" required="required"/>
<input type="submit" value="Submit" />
</form>

(REZULTAT in Google Chrome)


HTML 5
RESURSE

• http://www.w3.org/html/
• http://www.w3schools.com/html/
• http://www.tutorialehtml.com/
• http://ro.wikipedia.org/wiki/HTML5
• http://html5games.com/

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