Curs HTML Ultimul

1
Curs HTML - ianuarie 2013

Prof. Mirela Irimia
Pagini Web - HTML
Pagini Web - HTML........................................................................................................................................ 1

1.
WWW ................................................................................................................................................ 3
2.
Pagini WEB ........................................................................................................................................ 3
3.
Editoare HTML .................................................................................................................................. 3
4.
Limbajul HTML - definire ................................................................................................................... 4
5.
Elementele unui document HTML .................................................................................................... 4
1. Structura unei pagini ......................................................................................................................... 5
2.
Tagul <HTML> ................................................................................................................................... 5
3.
Tagul <head> ..................................................................................................................................... 5

Elementul <title> ................................................................................................................................... 5
4.
Tagurile meta .................................................................................................................................... 6

Tagul Keyword....................................................................................................................................... 6
Tagul Description .................................................................................................................................. 6
5.
Tag-ul <body>.................................................................................................................................... 6
1.
Sintaxa elementelor HTML................................................................................................................ 7

Atribute HTML................................................................................................................................... 7
Exemple de atribute .......................................................................................................................... 7
6.
7.
Atributul bgcolor ................................................................................................................................... 8

Atributul align ....................................................................................................................................... 8
Atributele "class" si "id" ........................................................................................................................ 8
Atributul "name" ................................................................................................................................... 8
Atributul width si heigh......................................................................................................................... 9
8.
Text in HTML ..................................................................................................................................... 9

Tagurile antet (titluri ingrosate)............................................................................................................ 9

Prof. Mirela Irimia
Tagul <p> ............................................................................................................................................... 9
Tagul <br> ........................................................................................................................................... 10
Tagul <center> .................................................................................................................................... 10
Tagul <hr> ........................................................................................................................................... 10
Tagul <font> ........................................................................................................................................ 10
Caractere speciale ............................................................................................................................... 10
Comentarii HTML ................................................................................................................................ 10
Vizualizarea codului sursa ................................................................................................................... 11
9.
1.
Culori HTML..................................................................................................................................... 11
Fundal.............................................................................................................................................. 11
2.
Valori pentru culori ......................................................................................................................... 11
10.
11.
12.
13.
14.
15.
Imagini HTML .................................................................................................................................. 11

Linkuri HTML ................................................................................................................................... 12
Tabele in HTML ............................................................................................................................... 13
Liste HTML....................................................................................................................................... 14
Cadre HTML..................................................................................................................................... 14
Formulare HTML ............................................................................................................................. 15
Text ..................................................................................................................................................... 15
Buton radio: ........................................................................................................................................ 16
Checkbox: ............................................................................................................................................ 16
16.
3.
ANEXA 1 - Taguri (marcaje) in HTML............................................................................................... 16

Marcaje pentru liste ........................................................................................................................ 18
4.
Formatarea caracterelor ................................................................................................................. 18
5.
Marcaje pentru tabele .................................................................................................................... 19
6.
Adaugarea imaginilor ...................................................................................................................... 21
7.
Marcaje pentru formulare .............................................................................................................. 22
8.
Marcaje pentru cadre ..................................................................................................................... 23
9.
Caractere speciale ........................................................................................................................... 25
10.
Includerea scripturilor................................................................................................................. 25

Prof. Mirela Irimia
webografie .................................................................................................................................................. 26
1. WWW
WWW= World Wide Web , adesea numit Web. Web-ul este o retea de computere din
toata lumea. Toate computerele folosesc un standard de comunicare numit HTTP.
Browsere WEB
Browser-ele sunt programele care interpreteaza codul HTML. Acestea transforma codul
HTML intr-o pagina web care poate fi citita. Cele mai folosite browsere sunt:
- Internet Explorer
- FireFox
- Opera
- Chrome
- Safari
Un browser citeste absolut tot ceea ce este scris in documentul HTML, ca de exemplu un
paragraf, un titlu un tabel sau orice altceva. De fiecare data cand gaseste un tag il va trata ca
atare si il va reda.
2. Pagini WEB
Informatia Web este stocata in documente numite pagini html. Paginile html sunt fisiere
stocate in computere numite servere web. Computerele care citesc paginile html sunt numite
clienti web. Clientii web vad paginile cu ajutorul browser-ului web.
Toate paginile html contin instructiuni despre cum sa fie afisate. Browser-ul afiseaza
pagina citind aceste instructiuni. Cele mai obisnuite instructiuni de afisare sunt numite taguri
HTML (sau etichete).
Un website (pagina Web) poate sa fie doar o pagina sau un anumit numar de pagini.
Toate paginile trebuiesc sa fie legate intre ele. Pentru acest lucru se folosesc linkurile. Un tag de
link care duce catre alta pagina este urmatorul:
<a href="http://www.google.com">Link Google</a>
3. Editoare HTML
Paginile sau fisierele HTML pot fi create sau editate cu diferite editoare specializate in
formatul HTML si CSS. Un editot HTML genereaza automat cod html. Unele pot edita mai multe
limbaje de programare.
Editoarele HTML au anumite avantaje: vin cu mai multe template-uri, pentru un inceput
mai usor in crearea de documentelor; pot edita in mod grafic pagini sau intregi siteuri statice
fara sa trebuiasca sa cunosti cod HTML; anticipeaza codul pe care il scrii oferindu-ti o viteza mai
mare de programare, precum si vizualizarea anumitor proprietati in crearea documentelor.

Prof. Mirela Irimia
Lista celor mai folosite editoare HTML:

* NetBeans IDE este un editor gratuit foarte performant. Contine o multime de optiuni, avand si
suport pentru pluginuri prin care se pot mari abilitatile sale.
* Adobe Dreamweaver este un editor HTML comercial foarte bun, avand si modul grafic de
creare/editare fisiere.
*CoffeCup editor HTML gasit si in varianta free si foarte eficient;
* Notepad++ este un editor simplu, insa cunoaste o multime de limbaje de programare.
Acestuia ii lipseste modul de editare grafic. Are o interfata simpla dar foarte eficienta si rapida.
* PhpEdit este un editor comercial, insa cu foarte multe capabilitati.
* Microsoft FrontPage este un editor grafic HTML si este continut in suita Microsoft Office.
4. Limbajul HTML - definire

HTML este prescurtarea de la HyperText Markup Language si este un standard folosit in
toata lumea. Practic fisierul HTML-ul este un fisier text, unde prin folosirea tagurilor HTML
se pot afisa diferite informatii utilizatorului, precum texte, imagini, clipuri video si audio,
aplicatii flash, etc.
Paginile HTML pot fi stilizate (aplicare culori, dimensiuni, stiluri elementelor gen texte,
imagini, etc) cu ajutorul CSS-urilor. CSS-urile, prescurtare de la Cascading Style Sheets, este
un limbaj folosit strict pentru stilizarea paginilor.
Editarea fisierelor HTML se poate face cu diferite editoare, unele putand edita strict codul
html si css in format text, gen Notepad++ sau PHPEdit, iar altele, cum ar fi Microsoft
FrontPage sau Macromedia Dreamweaver pot edita si in format grafic WYSIWYG (What You
See Is What You Get = ceea ce vezi este ceea ce vei obtine).
Primele specificatii de baza ale Web-ului au fost HTML, HTTP si URL. HTML a fost dezvoltat
initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru
fizicienii care utilizeaza computere diferite sa schimbe intre ei informatie utilizind
Internetul. Erau prin urmare necesare citeva trasaturi : independenta de platforma,
posibilitati hypertext si structurarea documentelor.
Hipertext inseamna ca orice cuvint, fraza, imagine sau alt element al documentului vazut de
un utilizator ( client ) poate face referinta la un alt document, ceea ce usureaza mult
navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document.
sStructurarea riguroasa a documentelor permite convertirea acestora dintr-un format in
altul precum si interogarea unor baze de date formate din aceste documente.
Limbajul HTML nu tine cont de litere mari sau mici in cadrul tag-ului , astfel
incat <BODY> sau<body> sau chiar <BoDy> vor fi interpretate identic.
5. Elementele unui document HTML

Prof. Mirela Irimia
Documentele HTML sint definite prin taguri html (etichete sau elemente html). Un
element html reprezinta tot ce se afla intre inceputul unui tag si sfarsitul acestuia.
- Tag - reprezinta o comanda in cod HTML care indica modul in care va fi interpretata informatia
la care ea se refera . Comanda numita tag este inscrisa intre semnele <>.
- Element - este un tag complet, avand un <tag> de deschidere si unul de inchidere </tag>.
1. Structura unei pagini

O structura a unei pagini HTML :
<html>
<head>
<title></title>
</head>
<body>
<!- Comentarii diverse Continut html -->
</body>
</html>
2. Tagul <HTML>
Acest tag transmite browser-ului ca documentul respectiv este de fapt un document
HTML , dand astfel indicatii asupra modului in care vor fi interpretate diferite partitii ale
fisierului ASCII..
3. Tagul <head>
Elementul <head> este cel care urmeaza. Se afla intre html si body. "Head" nu are nici o
functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare.Tagul <head>
poate oferi browser-ului informatii foarte utile. Se pot insera aici printre altele coduri Javascript
sau CSS.
Elementul <title>
Tag-ul title se pune inauntrul celui de head. Ceea ce este scris intre cele doua tag-uri
title (<title> si </title>) va putea fi vizualizat ca si numele browser-ului, de obicei in partea din
stanga sus. Codul sursa:
<html>

Prof. Mirela Irimia
<head>
<title> Prima mea pagina web!</title>
</head>
</html>
Textul de mai sus introdus intr-un fisier Notepad si salvat cu extensia .html va fi deschis
cu ajutorul browser-ului. Titlul va fi vizualizat in partea din stanga sus, la marea majoritate a
browser-elor. Numele descriptive sunt cele mai usor de gasit ulterior.
<p>Exemplu un paragraf</p>
4. Tagurile meta
Tagurile metasunt folosite pentru a genera informatii aditionale motorului de cautare.
Aceste informatii nu vor fi vizibile unui vizitator decat daca acesta va selecta view "Source" din
meniul "View".
Tagul Keyword
Vor fi puse aici cele mai importante cuvinte cheie care pot face vizibil situl. Exemplu:
<head>
<meta name="keywords" content="tutoriale, html, resurse, webmasteri , tutorial web, " />
</head>
Tagul Description
In acest tag se va face o descriere a site-ului:
<head>
<meta name="description" content="Un website pentru cei dispusi sa invete HTML " />
</head>
5. Tag-ul <body>
Este cel care defineste inceperea continutului pagini propriu-zise (titluri, paragrafe,
fotografii, muzica si orice altceva). Tagul body incapsuleaza tot continutul paginii.
Este astfel structurat:
<body>Actioneaza ca o capsula asupra continutului.
<p>Paragraf</p>
<h2>Titlu (heading)</h2>
<b>Ingrosat (bold)</b>
<i>Inclinat (italic)</i>
</body>

Prof. Mirela Irimia
6. Sintaxa elementelor HTML

Un element HTML se deschide cu un inceput de tag si se inchide cu un sfarsit de tag.
Continutul unui tag HTML este tot ce se afla intre inceputul unui tag si sfarsitul acestuia. Unele
taguri HTML nu au continut. Elementele fara continut se inchid in acelasi tag. Majoritatea
elementelor HTML pot avea mai multe atribute.
Un element are trei parti: un tag de deschidere, continutul elementului si tag-ul de
inchidere.
- <p> - tag-ul pentru deschiderea unui paragraf.
- Continutul elementului - paragraful propriu-zis.
- </p> - tag-ul de inchidere.
In interiorul elementului html sunt incluse atributele. Sintaxa includerii acestora este:
<nume_tag nume_atribut=valoare>
- Atributul - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element
are mai multe atribute.
Toate paginile web vor avea cel putin elementele de baza: html, head, title si body.
Exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au
nevoie de un tag sau doua:
<openingtag>Continut</closingtag>
7. Atribute HTML
Atributele sunt folosite pentru a personaliza tag-urile ca de exemplu: redimensionarea
unei imagini sau a unui tabel sau schimbarea culorii de fond. Toate acestea sunt posibile cu
ajutorul atributelor.
Cele mai multe elemente-uri au propriile lor atribute.
Atributele se introduc intre parantezele unghiulare (<>) aleelementului. Atributele au
nume si o valoare.
De retinut ca:
-un tag (element) poate sa aiba oricate atribute;
-unele taguri suporta doar anumite atribute;
-atributele au valori standard;
-browserele vad atributele diferit, de exemplu Mozilla Firefox poate afisa pagina
diferit de IE sau de alte browsere.
1. Exemple de atribute

Prof. Mirela Irimia
Atributul bgcolor
La tagul body putem sa adaugam atributul bgcolor cu valoarea yellow sub forma:
<html>
<head>
<title></title>
</head>
<body bgcolor="yellow">
</body>
</html>
Atributul bgcolor schimba fundalul unei pagini. Poate lua ca valoare orice culoare in
limba engleza.
Atributul align
Atributul align pozitioneaza un element. Ex: <h1 align="center"> - pune un text antet pe
centru
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center"></h1>
</body>
</html>
Valori pentru atributul align:
align="center" - aliniaza in centru
align="left" - aliniaza la stanga
align="right" - aliniaza la dreapta
<h2 align="left">Titlu aliniat la stanga </h2>
<h2 align="center">Titlu centrat </h2>
<h2 align="right">Titlu aliniat la dreapta </h2>
Atributele "class" si "id"
Atributele class si id sunt foarte asemanatoare. Ele nu au un rol direct in formatarea

elementelor si mai degraba sunt utile in spatele scenei cu ajutorul CSS.
Acestea sunt utile pentru a creea o clasa de tag-uri si a fi folosite mai tarziu cu ajutorul
CSS. Introducerea acestor atribute face posibila diferentierea a doua tag-uri identice dar cu
atribute diferite.
<p id="italicsparagraph">Paragraph type 1, inclinat </p>
<p id="boldparagraph">Paragraph type 2, ingrosat </p>
Atributul "name"
"name" este ceva diferit fata de "id" si "class". Punand un nume unui element, acesta devine o
variabila de script pentru Javascript, ASP si PHP. Cel mai des este intalnit in formulare si alte
campuri de text interactive.

Prof. Mirela Irimia
<input type="text" name="TextField" />

Atributul width si heigh
Width=valoare specifica latimea unui table sau celule a acestuia;

Heigh=valoare specifica inaltimea unui table sau celule.
8. Text in HTML
Textul se poate introduce si fara taguri. Dar daca dorim sa avem un text de o anumita
forma atunci in bagam in taguri ca si cele de mai jos:
<font> </font> -intre ele se pune textul (acest tag nu va schimba deloc forma textului)
<b> </b> -defineste test ingrosat sau- <ingrosat> </ingrosat>
<big> </big> -defineste test mare;
<em> </em> -defineste test accentuat;
<i> </i> -defineste test italic;
Tagurile antet (titluri ingrosate)
<h1> </h1> -defineste un antet de cea mai mare marime;

<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> -defineste antetul de cea mai mica marime;
Tagul <p>
Acest tag-ul comanda trecerea la un alt paragraf in cadrul paginii ; mai exact tag-ul
comanda trecerea la linie noua si lasarea unei linii libere . Mai trebuie mentionat ca folosirea in
serie a tag-ului <p> <p> <p> nu va duce la lasarea libera a trei linii, browser-ul va interpreta tagurile ca pe unul singur . Folosit sub aceasta forma, tag-ul nu necesita si complementarul de
inchidere .
In cazul folosirii unor atribute ale tag-ului va apare si necesitatea utilizarii tag-ului
complementar de inchidere </p>.
In cadrul tag-ului <p> se pot folosi atribute pentru alinierea textului la stanga (
pozitionarea default ) , la dreapta sau central . De exemplu :
<p align="right">Acest text va fi aliniat la dreapta.</p>
10

Prof. Mirela Irimia
Tagul <br>
Forteaza o rupere de linie oriunde este asezat . Poate fi folosit pentru a lasa un rand
liber . El este nepereche , neavand nevoie de tag de inchidere .
Tagul <center>
Tagurile <center> si </center> centreza textul dintre ele la nivel de linie .

Tagul <hr>
<hr>( horizontal rule ) este un tag foarte folosit in cadrul paginilor web . Comanda duce
la trasarea unei linii orizontale de-a lungul paginii . Acest tag poate primi mai multe atribute ce
pot configura pozitia, culoarea, dimensiunea liniei .
Tagul <font>
Cu acest element, <FONT>, puteti modifica aspectul textului, cum sunt tipul fontului folosit,
marimea si culoarea textului.
Marimea textului poate fi modificata cu elementulul FONT si atributul SIZE. Atributul SIZE
poate lua valorile numerice de la 1 la 7 si pe langa acestea poate folosi, ca valoare relativa, semnele
"+" sau. Textul normal (daca nu este specificat acest atribut) are valoarea 3.
Exemplu :
<font size="+2">Doua
mrimi mai mare</font>
Tipul fontului poate fi modificat cu elementul FONT si atributul FACE. Exemplu :

<font face="Arial Black">Acesta este tipul de font Arial Black</font>
Culoarea textului poate fi modificata cu elementul FONT si atributul COLOR. Exemplu :
<font color="#00dd00">Acest text are culoarea verde</font>
Caractere speciale
-este folosit ca spatiu

Unul dintre cele mai folosite caractere speciale pentru HTML este spatiul ! In cazul in
care in textul pe care dorim sa-l publicam in pagina noastra lasam un numar de 5
spatii intre doua cuvinte browser-ul va afisa doar un singur spatiuintre ele . Pentru a
putea afisa mai multe spatii trebuie introdus caracterul special :
© -copyright-
® -marca inregistrata-
Comentarii HTML
Comentariile in HTML au acelasi rol ca in orice limbaj de programare. Ele sunt folosite
pentru a pune o descriere unei sectiuni din cod, pentru a explica ce face acea sectiunea. Multi
programatori le folosesc pentru a comenta un intreg fragment de cod. De exemplu avem o
11

Prof. Mirela Irimia
sectiune cod care nu ne mai foloseste, dar nici nu vrem sa o stergem, pentru ca este posibil sa o
folosim in viitor sau in cazul in care ne razgandim.
-cu acest tag se scrie un comentariu in html. Comentariul
este ignorat de browser.
Vizualizarea codului sursa
Pentru a vedea html source code se apasa right click pe o pagina web si se selecteaza "page
source".
9. Culori HTML
1. Fundal
Tagul <body> are doua atribute unde puteti specifica fundalurile. Acestea
pot fi o culoare sau o imagine.
Atributul bgcolor seteaza fundalul drept o culoare.
<body bgcolor="#FFFFFF">
Atributul background seteaza fundalul drept o imagine.
<body background="fundal.jpg">
2. Valori pentru culori

Cateva culori:
Color
10.
Cod Color
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Imagini HTML
Cu HTML se pot afisa imagini intr-un document. In HTML, imaginile se definesc cu tagul
<img>. Tagul <img> nu are tag de inchidere. Pentru a afisa o imagine pe o pagina, se foloseste

Prof. Mirela Irimia
atributul src. Src inseamna "sursa". Valoarea acestui atribut este adresa imaginii afisata in
pagina. URL-ul este locatia unde imaginea este stocata.
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center"></h1>
<img src="adresa_imagine" alt="">
</body>
</html>
Atributul alt indica ce se afla in locul imaginii daca browser-ul nu poate incarca imagini.
11.
Linkuri HTML
HTML foloseste un hiperlink pentru a se lega de alt document web. HTML foloseste
tagul ancora sau <a> pentru a crea un link catre alt document . O ancora poate duce catre orice
resursa de pe Web: o pagina HTML, o imagine, un fisier sunet, un film etc .
<a href="url"> Textul ce va fi afisat </a>
text ce va fi afisat
Cu atributul target, puteti indica unde sa se deschida documentul catre care se face link-ul.
Linia de mai jos va deschide documentul intr-o noua fereastra de browser:
<a href= "url" target= "_self" > Textul ce va fi afisat </a >
target= "_self" Incarca noul document in aceeasi fereastra cu ancora (implicit).
target= "_parent" Incarca noul document in cadrul cadrul de baza .
target= "_top" Incarca noul document in intreaga fereastra de browser.
target= "_blank" Incarca noul document intr-o fereastra noua.
Se poate combina tag-ul imagine cu cel de ancora si se poate pune un link pe imagine. Se poate
creea astfel un buton.
<a href= "url" target= "_self" ><img src=""> </a >
Ancora:
<a name= "Paragrafele"> Paragrafele </a>(se pune unde este sectiunea pt a marca sectiunea
cu paragrafe
Mail link:
<a href= "mailto:lucian0308@yahoo.com" >Send Mail <a >
12
13

Prof. Mirela Irimia
12.
Tabele in HTML
Cu HTML se pot crea tabele. Tabelele se definesc cu tagul <table>. Un tabel este divizat
in randuri (cu ajutorul tagului <tr>) si fiecare rand este impartit in celule de date (cu ajutorul
tagului <td>). Td inseamna "table data" si este continutul unei celule de date. O celula de date
poate contine text, imagini, liste, paragrafe, formulare, linii orizontale, tabele etc.
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>randul 1, celula 1 </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
randul 1, celula 1
randul 1, celula 2
randul 2, celula 1
randul 2, celula 2
Daca border="0" tabelul va exista dar va avea border-ul invizibil. Si cu cat nr border-ului va
creste border-ul va fi mai ingrosat.
<table>Defineste un tabel.
<th>Defineste o celula cap de tabel.
<tr>Defineste un rand de tabel.
<td>Defineste o celula din tabel.
<captation>Defineste un camp asociat tabelului pentru introducerea unei explicatii.
<colgroup>Defineste grupuri de coloane ale tabelului.
<col>Defineste valorile atributului pentru una sau mai multe coloane dintr-un tabel.
<thead>Defineste un cap de tabel care nu se va derula.
<tbody>Defineste corpul unui tabel care se desfasoara in interiorul unui cap de tabel
fixat si subsolul tabelului.
<tfoot>Defineste un subsol de tabel care nu se va derula.

Prof. Mirela Irimia
13.
Liste HTML
Html suporta liste neordonate si ordonate.

Exemplu de lista neordonata:
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>element1 </li>
<li>element2 </li>
</ul>
</body>
</html>
Prin <ul type=""> semnul din fata poate fi modificat.
<ul type="disc"> , <ul type="circle"> , <ul type="square">
Exemplu de lista ordonata:
<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>element1 </li>
<li>element2 </li>
</ol>
</body>
</html>
Initial in fata va aparea 1. , 2. .Prin:
type"A" se va schimba in A. , B. , C. ,etc.
type"a" se va schimba in a. , b. , c. ,etc.
type"I" se va schimba in I. , II. , III. ,etc.
type"i" se va schimba in i. , ii. , iii. ,etc.
14.
Cadre HTML
14

Prof. Mirela Irimia
Cu ajutorul cadrelor, se poat afisa mai multe pagini web in aceeasi fereastra de browser.
Fiecare document HTML poarta numele de cadru (frame) si fiecare cadru este independent de
celelalte.
<html>
<head>
<title></title>
</head>
<body>
<frameset cols="30%,70%">
<frame src="pagina1 name="left">
<frame src="pagina2 name="right">
</frameset>
</body>
</html>
<frameset> Defineste un set de cadre.

<frame> Defineste o sub-fereastra (un cadru).
<noframes> Defineste o sectiune noframei.
<iframe> Defineste o sub-fereastra inline.
15.
Formulare HTML
Formularele HTML sunt folosite pentru a selecta diferite moduri de introducere a

datelor de catre utilizator.
<form name="input" action="html.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
Se pot introduce informatii sub forma de:
campuri text
meniuri ce se pot derula
butoane radio
casute de validare, etc.
Un formular se defineste cu tagul <form>.
Text
<form>
Nume: <input type="text" name="nume">
<br>
Prenume: <input type="text" name="prenume">
</form>
15
16

Prof. Mirela Irimia
Buton radio:
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
Checkbox:
<form>
Am un caine:
<input type="checkbox" name="animal" value="caine">
<br>
Am o pisica:
<input type="checkbox" name="animal" value="pisica">
</form>
16.
ANEXA 1 - Taguri (marcaje) in HTML
TAG
EXPLICATIE TAG
<HTML>
</HTML>
Defineste un fisier in format

Web
Atribute
specifice
EXPLICATIE ATRIBUT
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
<HEAD> </HEAD> Antetul documentului

<TITLE> </TITLE>
Tilul documentului
<BODY> </BODY>
Corpul paginii HTML
17

Prof. Mirela Irimia
<P>
Paragraf
<Hn> <Hn>
Nivel de subtitlu al
documentului (n = 1-6)
<FONT> </FONT>
Specifica atribute ale textului incadrat
<BR>
Linie noua
<PRE> </PRE>
Informatie preformatata

Comenatriu HTML
<CENTER>
</CENTER>
Centreaza materialul in pagina
<HR>
Rigla orizontala
ALINK=culoare
Culoarea legaturiilor pe
durata clicului exacutat de
utilizator
BACKGROUND =
url
Imaginea de fond pentru

pagina
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
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)
18

Prof. Mirela Irimia
<A> </A>
Marcaj de tip ancora
COLOR=x
Culoarea riglei
orizontale(numai pentru IE)
HREF=url
Referinta hipertext
HREF=#nume
Referinta catre o ancora

interna
Name=nume
Definitia unei ancore intern
3. Marcaje pentru liste
TAG
EXPLICATIE TAG
<DD>
Descriere definitie
<DL>
</DL>
Lista de tip definitie
<DT>
Termen de definitie
<LI>
Element de lista
<OL
Lista ordonata (numerotata)
Lista neordonata
(marcata)
<UL
ATRIBUT
SPECIFIC
EXPLICATIE ATRIBUT
TYPE=tip
Tipul numerotarii. Valori posibile: A, a, I, i,

1
START=x
Numarul de inceput al listei ordonate
TYPE=forma
Forma marcajului. Valori posibile: circle,

square, disc.
4. Formatarea caracterelor
TAG
EXPLICATIE
<B> </B>
Afiseaza text cu caractere aldine
<I> </I>
Afiseaza text cu caractere cursive
<U> </U>
Afiseaza text subliniat
ATRIBUTE
19

Prof. Mirela Irimia
<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
Specifica dimensiunea implicita a fontului din

pagina
SIZE = n>
5. Marcaje pentru tabele
TAG
<TABLE> </TABLE>
Tabel HTML
EXPLICATIE TAG
ATRIBUT SPECIFIC
EXPLICATIE ATRIBUT
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
Cea mai inchisa culoare
20

Prof. Mirela Irimia
<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
<TD </TD>
Celula de date a tabelului
= 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
BGCOLOR=culoare
Specifica culoarea de
fond pentru intreaga
linie
ALIGN=aliniere
Alinierea celulelor de
pe linia curenta (left,
center, right)
BGCOLOR=culoare
Specifica culoarea de
fond pentru celula de
21

Prof. Mirela Irimia
date
6. Adaugarea imaginilor
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
22

Prof. Mirela Irimia
TAG
EXPLICATIE
Marcajul de
<IMG introducere a
imaginilor
ATRIBUT
EXPLICATIE ATRIBUT
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)
7. Marcaje pentru formulare
TAG
EXPLICATIE ATRIBUT SPECIFIC
EXPLICATIE ATRIBUT
Programul CGI de pe serverul

care receptioneaza datele
<FORM> </FORM>
Formular HTML activ
ACTION=url
METHOD=metoda
Modul in care datele sunt transmise

serverului(GET sau POST)
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
<INPUT
Camp de text sau alte date
de intrare
23

Prof. Mirela Irimia
<SELECT> </SELECT>
Grup de casete de validare
<OPTION
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
NAME=nume
SIZE=x
Numarul de articole de meniu care se

afiseaza odata (prestabilit=1)
MULTIPLE=x
Permite selectia unor articole de meniu

multiple
Alegerea
VALUE=valoare
particulara
intr-un
domeniu
<SELECT>
NAME=nume
<TEXTAREA>
</TEXTAREA>
ROWS=x
Camp de intare de tip text
COLS=x
pe linii multiple
<FIELDSET>
</FIELDSET>
Valoarea rezultanta a acestei selectii din

meniu

Numarul de linii al casetei de text
Numarul de coloane (caractere) pe linie
al casetei de text
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
8. Marcaje pentru cadre
24

Prof. Mirela Irimia
TAG
EXPLICATIE
<FRAMESET> </FRAMESET>
Definirea redactarii paginii
ATRIBUT
EXPLICATIE ATRIBUT
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
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
25

Prof. Mirela Irimia
<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
9. Caractere speciale
&
& 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)
10.Includerea scripturilor
TAG
EXPLICATIE TAG
ATRIBUT
EXPLICATIE ATRIBUT
<STYLE>
</STYLE>
Specifica informatii
referitoare modelul de
TYPE=val
Tipul modelului de stiluri. De

regula "text/css"
26

Prof. Mirela Irimia
stiluri
LANGUAGE=limbaj Limbajul utilizat
<SCRIPT> </SCRIPT>
Include un script de regula Javascript, in
pagina Web
EVENT=eveniment Eveniment care declanseaza

executia unor scripturi specifice
FOR=numeobiect
webografie
http://www.tutorialehtml.com/htmlt/atribute.php
http://www.lucian0308.com/tutorial-html/
Numele obiectului din pagina

asupra caruia actioneaza scriptul

Curs HTML Ultimul

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML Ultimul

Încărcat de

Drepturi de autor:

Formate disponibile

1

Curs HTML - ianuarie 2013

Pagini Web - HTML

Pagini Web - HTML........................................................................................................................................ 1

Tagul <HTML> ................................................................................................................................... 5

Tagul <head> ..................................................................................................................................... 5

Tagurile meta .................................................................................................................................... 6

Sintaxa elementelor HTML................................................................................................................ 7

Atributul bgcolor ................................................................................................................................... 8

Text in HTML ..................................................................................................................................... 9

Curs HTML - ianuarie 2013

Valori pentru culori ......................................................................................................................... 11

Imagini HTML .................................................................................................................................. 11

ANEXA 1 - Taguri (marcaje) in HTML............................................................................................... 16

Formatarea caracterelor ................................................................................................................. 18

Marcaje pentru tabele .................................................................................................................... 19

Adaugarea imaginilor ...................................................................................................................... 21

Marcaje pentru formulare .............................................................................................................. 22

Marcaje pentru cadre ..................................................................................................................... 23

Caractere speciale ........................................................................................................................... 25

Curs HTML - ianuarie 2013

Curs HTML - ianuarie 2013

Lista celor mai folosite editoare HTML:

4. Limbajul HTML - definire

5. Elementele unui document HTML

Curs HTML - ianuarie 2013

1. Structura unei pagini

Curs HTML - ianuarie 2013

Curs HTML - ianuarie 2013

6. Sintaxa elementelor HTML

Curs HTML - ianuarie 2013

Atributele class si id sunt foarte asemanatoare. Ele nu au un rol direct in formatarea

Curs HTML - ianuarie 2013

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

Width=valoare specifica latimea unui table sau celule a acestuia;

<h1> </h1> -defineste un antet de cea mai mare marime;

Curs HTML - ianuarie 2013

Tagurile <center> si </center> centreza textul dintre ele la nivel de linie .

mrimi mai mare</font>

Tipul fontului poate fi modificat cu elementul FONT si atributul FACE. Exemplu :

&nbsp; -este folosit ca spatiu

Curs HTML - ianuarie 2013

2. Valori pentru culori

Curs HTML - ianuarie 2013

Curs HTML - ianuarie 2013

Curs HTML - ianuarie 2013

Html suporta liste neordonate si ordonate.

Curs HTML - ianuarie 2013

<frameset> Defineste un set de cadre.

Formularele HTML sunt folosite pentru a selecta diferite moduri de introducere a

Curs HTML - ianuarie 2013

ANEXA 1 - Taguri (marcaje) in HTML

Defineste un fisier in format

Culoarea de fond a paginii

Culoarea textului pe paginii

Culoarea legaturiilor vizitate

<HEAD> </HEAD> Antetul documentului

Curs HTML - ianuarie 2013

Centreaza materialul in pagina

Imaginea de fond pentru

Dimensiunea textului este 1-7

Specifica fontul: a, daca este

Culoarea textului: fie un

Inaltimea riglei in pixeli

-este folosit ca spatiu