Despre atribute HTML » HTML pe intelesul tuturor


	Am uitat utilizatorul Am uitat parola

Cursuri online
Cursuri online gratuite

Tutoriale
Cum sa faci orice

Teste online
Testeaza-ti cunostintele

Revista
Aboneaza-te gratuit

Referate
Descarca referate

Jocuri
Jocuri educative

Inregistreaza-te
Intra in comunitate

eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 2

Despre atribute HTML

4257 afisari

In aceasta lectie vom invata despre atributele tag-urilor. Dar mai intai sa vedem ce sunt atributele.

Ce sunt atributele HTML?

Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv. Pentru a intelege mai bine notiunea de atribut sa vedem cateva exemple.

Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba, dar sa spunem ca vrem ca fondul paginii noastre sa fie portocaliu.

In acest caz vom folosi pentru atributul BGCOLOR codul culorii orange: #FF9900 (vei invata in lectia urmatoare mai multe despre culori):

Sa luam codul paginii web din lectia trecuta si sa-i aplicam tag-ului BODY atributul BGCOLOR. Vom obtine urmatorul rezultat: exemplu3.html

Acum sa ne ocupam de textul paginii noastre. Mesajul "Bine ai venit!" sa spunem, de exemplu, ca am vrea sa fie scris cu albastru in loc de negru, care este valoarea implicita si sa fie scris cu litere mai mari decat restul textului. Pentru a scrie astfel textul, vom folosi tag-ul FONT insotit de unele atribute astfel:

Bine ai venit!

Textul urmator "Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!", daca dorim doar sa aiba culoarea rosie, vom folosi numai atributul COLOR pentru tag-ul , restul proprietatilor fiind cele implicite:

Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!

Prin folosirea liniilor de cod de mai sus in cadrul codului nostru, pagina web initiala va arata astfel: exemplu4.html. Mai multe despre texte vom invata impreuna in lectia 4: Formatarea textului in HTML

Atunci cand vrem sa trasam o linie, folosim tag-ul <HR> care vine de la Horizontal Rule care inseamna linie orizontala. Daca nu ii asociem acestui tag nici un atribut atunci vom obtine o line orizontala cat latimea paginii web.

Daca vrem sa folosim propriile noastre proprietati pentru trasarea unei linii orizontale vom apela la atributele tag-ului <HR>. Aceste atribute sunt urmatoarele: ALIGN - pentru alinierea liniei, COLOR - pentru culoarea liniei, SIZE - pentru grosimea liniei si WIDTH - pentru lungimea liniei.

Pentru a trasa o linie rosie (COLOR="#FF0000"), cu o lungime de jumatate din valoarea implicita (WIDTH="50%") si putin mai groasa decat cea implicita (SIZE="5%") ce va fi aliniata in centrul paginii (ALIGN="center"), vom folosi urmatoarea linie de cod:

Acum sa folosim cele doua linii de mai sus in cadrul paginii noastre. Linia simpla o vom folosi la sfarsit, iar linia rosie o vom folosi dupa mesajul "Bine ai venit!". Noul cod HTML al paginii noastre va fi urmatorul:

<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">

Bine ai venit!
 
<HR COLOR="#FF0000" WIDTH="25%" SIZE="5%" ALIGN="left">
 

Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!

<HR>
</BODY>
</HTML>

Salveaza pagina cu ce nume vrei tu. Nu uita de extensia .html sau .htm. Pentru a vedea rezultatul click aici: exemplu5.html

Ne oprim aici cu exemplele de atribute, insa in lectiile urmatoare vor fi folosite atributele cele mai importante, astfel incat pana la sfarsitul cursului te vei familiariza cu toate acestea.

Nu uita ca pentru a intelege cat mai bine limbajul HTML trebuie sa scrii si tu codul fiecarui exemplu prezentat aici, sa salvezi pagina cu extensia .html sau .htm si sa verifici daca ai obtinut aceleasi rezultate.

Lista celor mai utilizate taguri HTML impreuna cu atributele lor

In tabelul urmator vor fi prezentate cele mai utilizate tag-uri impreuna cu cele mai importante atribute ale lor:

Nume tag	Nume atribut	Valoare atribut	Detalii
<A>			Ancora
	href	URL	Adresa catre care vrem sa fie legatura
	target	_blank _self _parent _top	Fereastra in care se va face afisarea
<B>			Text bold
<BODY>			Cuprinsul documentului
	background	adresa imaginii	Imaginea de fond
	bgcolor	cod culoare nume culoare	Culoarea fondului
	leftmargin	procent din latimea paginii numar de pixeli	Distanta dintre marginea din stanga a ferestrei browserului si marginea din stanga a paginii
	topmargin	procent din inaltimea paginii numar de pixeli	Distanta dintre marginea de sus a ferestrei browserului si marginea de sus a paginii
	text	cod culoare nume culoare	Culoarea textului
	alink	cod culoare nume culoare	Culoarea legaturilor active (atunci cand mouse-ul se afla deasupra lor)
	link	cod culoare nume culoare	Culoarea legaturilor nevizitate (nu s-a efectuat nici un click pe ele)
	vlink	cod culoare nume culoare	Culoarea legaturilor vizitate (s-a efectuat cel putin un click pe ele)
<BR>			Sfarsitul randului
<CENTER>			Afisarea in centrul paginii
<FONT>			Fontul textului
	color	cod culoare nume culoare	Culoarea fontului
	face	nume font	Tipul fontului
	size	un numar de la 1 la 7	Marimea fontului
<FORM>			Formular interactiv
	action	URL	Adresa scriptului care prelucreaza datele din cadrul formularului
	method	GET POST	Metoda de prelucrare a datelor formularului
<FRAME>			Cadru (fereastra)
	frameborder	1 sau 0	Cadrul are sau nu are chenar
	marginheight	numar de pixeli	Spatiu deasupra si sub un cadru
	marginwidth	numar de pixeli	Spatiu la stanga si la dreapta unui cadru
	src	URL	Sursa cadrului
<FRAMESET>			Multime de ferestre
	cols	procent din latimea paginii numar de pixeli	numarul si marimea relativa a coloanelor
	rows	procent din inaltimea paginii numar de pixeli	numarul si marimea relativa a randurilor
H1, H2, H3, H4, H5, H6			Titluri in cadrul documentului
	align	left center right justify	Alinierea titlului
<HEAD>			Antetul documentului
<HR>			Linie orizontala
	align	left center right	Alinierea orizontala a liniei
	color	cod culoare nume culoare	Culoarea liniei
	size	numar de pixeli	Inaltimea liniei
	width	procent din latimea paginii numar de pixeli	Latimea liniei
<HTML>			Document HTML
<I>			Text italic
<IMG>			Adaugarea unei imagini
	align	left right top middle bottom	Alinierea imaginii in pagina: left (stanga) sau right (dreapta) Alinierea elementelor din jurul imaginii: top (sus), middle (mijloc), bottom (jos)
	alt	text	Text ce va fi afisat in locul imaginii, in cazul in care, aceasta nu este afisata
	border	numar de pixeli	Marimea chenarului din jurul imaginii
	height	procent numar de pixeli	Inaltimea imaginii
	hspace	numar de pixeli	Spatiu pe orizontala in jurul imaginii
	src	URL	Adresa imaginii
	vspace	numar de pixeli	Spatiu pe verticala in jurul imaginii
	width	procent numar de pixeli	Latimea imaginii
<INPUT>			Element al formularului
	maxlength	numar	Numar maxim de caractere
	name	date de tip caracter	Numele elementului formularului
	size	numar	Marimea elementului formularului
	src	URL	Adresa pentru o imagine
	type	text password checkbox radio submit reset file hidden image button	Tip input
	value	date de tip caracter	Valoare input
<LI>			Element al unei liste
<META>			Metainformatii
	content	text	Descrie valoarea atributului name
	name	author	Autor
		description	Descriere
		keywords	Cuvinte cheie
<OL>			Lista ordonata
	start	numar	Cu ce valoare incepe numerotarea
	type	A, a, I, i, 1	Tipul numerotarii: A, a, I, i, 1 (implicit)
<P>			Paragraf
	align	left center right justify	Alinierea paragrafului
<SELECT>			Lista de selectii
	multiple		Permite selectia mai multor elemente
	name	date de tip caracter	Numele listei de selectii
	size	numar	Numarul de elemente ale listei
<STRONG>			Text evidentiat
<SUB>			Text indice
<SUP>			Text exponent
<TABLE>			Tabel
	align	left center right	Alinierea tabelului
	background	URL	Imaginea de fond pentru tabel
	bgcolor	cod culoare nume culoare	Culoarea fondului pentru tabel
	border	procent numar de pixeli	Chenarul tabelului
	bordercolor	cod culoare nume culoare	Culoarea chenarului
	cellpadding	numar de pixeli	Spatiu intre continutul celulelor tabelului si marginile lor
	cellspacing	numar de pixeli	Spatiu intre celulele tabelului
	cols	numar	Numarul de coloane ale unui tabel
	hspace	numar de pixeli	Spatiu pe orizontala in jurul tabelului
	vspace	numar de pixeli	Spatiu pe verticala in jurul tabelului
	width	procent numar de pixeli	Latimea tabelului
<TD>			Celula de tabel
	align	left center right	Alinierea continutului celulei pe orizontala
	background	URL	Imaginea de fond pentru celula
	bgcolor	cod culoare nume culoare	Culoarea fondului pentru celula
	colspan	numar	Numarul de coloane pe care se intinde celula
	height	numar de pixeli	Inaltimea celulei
	rowspan	numar	Numarul de linii pe care se intinde celula
	valign	top middle bottom	Alinierea continutului celulei pe verticala
	width	numar de pixeli	Latimea celulei
<TEXTAREA>			Camp de editare multilinie
	cols	numar	Numarul de coloane
	name	date de tip caracter	Numele campului de editare multilinie
	rows	numar	Numarul de randuri
<TITLE>			Titlu document
<TR>			Rand tabel
	align	left center right	Alinierea continutului celulelor pe orizontala
	bgcolor	cod culoare nume culoare	Culoarea fondului pentru tot randul
	valign	top middle bottom	Alinierea continutului celulelor pe verticala
<U>			Text subliniat
<UL>			Lista neordonata
	type	circle disc square	Forma marcajului

« Structura unui document HTML

Despre culori HTML »

30 comentarii

	GabysTh 27 iulie 2011, 13:14	1
	Salut! Cum pot face si eu rost de acest tabel?
		3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	lucian.iordache 27 iulie 2011, 14:28	2
	@GabysTh: Salut! Nu am inteles intrebarea. Tabelul il ai in aceasta lectie (poti salva pagina aceasta la favorite sau o poti printa - din browser).
		-3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	alin_001 29 iulie 2011, 13:33	3
	Salut.Dupa ce am salvat fisierul cum il pot modifica? Ca nu mai pot scrie nimic in pagina respectiva.
		-2 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	lucian.iordache 29 iulie 2011, 13:54	4
	@alin_001: Salut! Ca sa modifici fisierul .html trebuie sa il deschizi cu un editor text, cu Notepad de exemplu. Click dreapta pe fisier si alege Open Width > Notepad (faci in Notepad modificarile pe care le vrei, apoi salvezi din nou fisierul cu extensia .html peste fisierul existent)
		5 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	petruta cristea 24 august 2011, 15:52	5
	Foarte tare cursul felicitari :)
		3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 20 septembrie 2011, 11:38	6
	@petruta cristea: Multumesc. Ma bucur ca iti este util
		3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	francisca 05 septembrie 2011, 12:09	7
	imi place acest curs.
		3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 20 septembrie 2011, 11:39	8
	@francisca: Multumesc :) Sper sa te ajute
		3 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Allecsella 19 septembrie 2011, 20:36	9
	Multumesc, ma ajuti mult !
		2 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 20 septembrie 2011, 11:40	10
	@Allecsella: Buna, ma bucur ca iti este de ajutor. Multumesc si eu ca urmaresti eCursuri.ro si cursul meu :)
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	claudia03 06 octombrie 2011, 19:31	11
	Este un curs util...eu usnt studenta la informatica economica si in liceu nu am facut deloc informatica....si ca sa imi fie mai usor la facultate ma ajut de site-ul vostru.Imi pare rau ca nu l-am descoperit mai repede...acum sunt in anul 3
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 15 octombrie 2011, 04:15	12
	@claudia03: Buna Claudia, ma bucur sa aflu ca iti este util cursul :)
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	claudia03 16 octombrie 2011, 14:07	13
	r fi bine daca ati mai adauga cateva cursuri de programare...!!!...:D
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	cipriangh 21 octombrie 2011, 19:56	14
	prea tare cursul.felicitari luciane
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	corny 14 noiembrie 2011, 22:49	15
	foarte bun acest curs...imi place si sper sa pot invata,ca nimeni nu iti arata nimic.
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Ilie@@ 18 noiembrie 2011, 19:46	16
	as vrea sa intreb cum sa controlez marimea unei imagini in html?
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Boowman 26 noiembrie 2011, 22:56	17
	@Ilie@@: Uite un exemplu. Are marimea 5 Typul Scrisului Arial culoare Rosie. Poti schimba culoare si marimea.
		2 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Boowman 26 noiembrie 2011, 22:58	18
	Scuze pentru ce am scris , nu am stiut ca daca scriu in html o sa imi apare rezultatul . La inceput nu am mai pus < ca sa nu imi afiseze rezultatul din nou. font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color.
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 13 decembrie 2011, 23:34	19
	@Boowman: Nu e nici o problema. E foarte bine sa folosesti cat mai mult codurile, ca sa te obisnuiesti cu ele.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 13 decembrie 2011, 23:35	20
	@Boowman: Prin ambele comentarii ale tale, sunt sigur ca Ilie a inteles f bine.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Boowman 26 noiembrie 2011, 23:14	21
	Eu am o intrebare cum adaug o lectie la favorit ?
		-1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 13 decembrie 2011, 23:36	22
	@Boowman: Este pe lista de TO DO, inca nu am ajuns la acest punct, dar va fi posibil in curand sa salvezi materialele care ti-au placut.
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Ilie@@ 30 noiembrie 2011, 22:52	23
	Boowman- stiu cum se face la text, dar la IMAGINI? thx in prealabil...
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	alexgrecov 13 decembrie 2011, 09:50	24
	Salut, Daca pana acum nu m-am incumetat sa invat html, cu ajutorul acestui curs vad ca este chiar destul de usor si de inteles. Pe cand si un curs de Css? Merci.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	alexgrecov 13 decembrie 2011, 11:05	25
	am vrut sa spun pe cÂ un curs CSS? :)
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 13 decembrie 2011, 23:36	26
	@alexgrecov: Sper ca in viitorul apropiat sa fie timp si pentru un astfel de curs.
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	yo_mara 06 ianuarie 2012, 15:07	27
	Buna, linia rosie imediat dupa mesajul 'bine ai venit' nu arata la fel ca a ta, este mai subtire si este undeva pe la centru. de ce?? unde anume am gresit??
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 06 ianuarie 2012, 21:15	28
	@yo_mara: Verifica mai intai daca ai folosit aceleasi atribute ca si in exemplul din cadrul lectiei (pentru tagul HR)
		1 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	agache_ionela 15 ianuarie 2012, 13:28	29
	Buna. Am si eu o intrebare. Dupa ce am salvat , altcineva de pe alt calculator poate intra pe pagina respectiva sa faca modificari?
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!

	Lucian.Iordache 16 ianuarie 2012, 11:04	30
	@agache_ionela: 1. daca paginile sunt doar pe calculatorul tau, nu are cum; 2. daca paginile sunt publicate undeva online (pe un site, blog etc), poate intra si altcineva de la alt calculator sa faca modificari, daca stie userul si parola site-ului / blogului.
		0 Raspunde Ai votat deja acest comentariu!Multumim pentru votul tau!