cursuri cursuri cursuri cursuri cursuri cursuri
cursuri
cursuri
cursuri
Cursuri    Tutoriale    Teste    Referate    Jocuri
 
 
cursuri Am uitat utilizatorul cursuri Am uitat parola
cursuri online Cursuri online
Cursuri online gratuite
cursuri online Tutoriale
Cum sa faci orice
cursuri online Teste online
Testeaza-ti cunostintele
cursuri online Revista
Aboneaza-te gratuit
cursuri online Referate
Descarca referate
cursuri online Jocuri
Jocuri educative
cursuri online Inregistreaza-te
Intra in comunitate
eCursuri » Cursuri online » Tehnologia informatiei » HTML pe intelesul tuturor » Lectia 2
Despre atribute HTML
12284 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):
<BODY BGCOLOR="#FF9900">

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:
<FONT COLOR="#0000FF" SIZE="6">
Bine ai venit!
</FONT><BR>

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 <FONT>, restul proprietatilor fiind cele implicite:
<FONT COLOR="#FF0000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!
</FONT>

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:
<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%" ALIGN="center">

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">
<FONT COLOR="#0000FF" SIZE="6">
Bine ai venit!
</FONT><BR>
<HR COLOR="#FF0000" WIDTH="25%" SIZE="5%" ALIGN="left">
<BR>
<FONT COLOR="#FF0000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!
</FONT>
<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 »
37 comentarii
GabysTh 27 iulie 2011, 13:14 1
Salut! Cum pot face si eu rost de acest tabel?
  -1    Raspunde
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).
  -1    Raspunde
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.
  -5    Raspunde
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)
  4    Raspunde
petruta cristea 24 august 2011, 15:52 5
Foarte tare cursul felicitari :)
  3    Raspunde
Lucian.Iordache 20 septembrie 2011, 11:38 6
@petruta cristea: Multumesc. Ma bucur ca iti este util
  2    Raspunde
francisca 05 septembrie 2011, 12:09 7
imi place acest curs.
  4    Raspunde
Lucian.Iordache 20 septembrie 2011, 11:39 8
@francisca: Multumesc :) Sper sa te ajute
  0    Raspunde
Allecsella 19 septembrie 2011, 20:36 9
Multumesc, ma ajuti mult !
  1    Raspunde
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 :)
  -1    Raspunde
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
  0    Raspunde
Lucian.Iordache 15 octombrie 2011, 04:15 12
@claudia03: Buna Claudia, ma bucur sa aflu ca iti este util cursul :)
  0    Raspunde
claudia03 16 octombrie 2011, 14:07 13
r fi bine daca ati mai adauga cateva cursuri de programare...!!!...:D
  3    Raspunde
cipriangh 21 octombrie 2011, 19:56 14
prea tare cursul.felicitari luciane
  3    Raspunde
corny 14 noiembrie 2011, 22:49 15
foarte bun acest curs...imi place si sper sa pot invata,ca nimeni nu iti arata nimic.
  2    Raspunde
Ilie@@ 18 noiembrie 2011, 19:46 16
as vrea sa intreb cum sa controlez marimea unei imagini in html?
  4    Raspunde
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
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.
  0    Raspunde
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.
  -1    Raspunde
Lucian.Iordache 13 decembrie 2011, 23:35 20
@Boowman: Prin ambele comentarii ale tale, sunt sigur ca Ilie a inteles f bine.
  -1    Raspunde
Boowman 26 noiembrie 2011, 23:14 21
Eu am o intrebare cum adaug o lectie la favorit ?
  -1    Raspunde
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.
  0    Raspunde
Ilie@@ 30 noiembrie 2011, 22:52 23
Boowman- stiu cum se face la text, dar la IMAGINI?
thx in prealabil...
  -1    Raspunde
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.
  -1    Raspunde
alexgrecov 13 decembrie 2011, 11:05 25
am vrut sa spun pe c un curs CSS? :)
  -1    Raspunde
Lucian.Iordache 13 decembrie 2011, 23:36 26
@alexgrecov: Sper ca in viitorul apropiat sa fie timp si pentru un astfel de curs.
  0    Raspunde
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??
  0    Raspunde
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)
  0    Raspunde
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?
  -1    Raspunde
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.
  -1    Raspunde
Raul 22 februarie 2012, 13:46 31
Am inceput de foarte putin timp acest curs si este extraordianar de interesant.Felicitari!
  -1    Raspunde
valahu12 28 februarie 2012, 17:17 32
mai am o intrebare.....
cum as putea rula un fisier ".vbs" intr-o pagina html?
eu am incercat cu ""

si pentru buton am incercat sa folosesc simplu


doar ca nu vrea sa ruleze...
mai exista si alta metoda?
  0    Raspunde
mihai.mitroi 06 martie 2012, 14:02 33
@valahu12: <HTML>
<HEAD>
<TITLE>Test Button Events</TITLE>
</HEAD>
<BODY>
<FORM NAME="Form1">
<INPUT TYPE="Button" NAME="Button1" VALUE="Click">
<SCRIPT FOR="Button1" EVENT="onClick" LANGUAGE="VBScript">
MsgBox "Button Pressed!"
</SCRIPT>
</FORM>
</BODY>
</HTML>
  0    Raspunde
valahu12 06 martie 2012, 22:03 34
@mihai.mitroi: multumesc, la inceput nu rula, dar mi-am dat seama ca browserul nu ii permitea accesul, il considera un atac asupra pc-ului:))
  -1    Raspunde
lacouleur 05 aprilie 2012, 16:30 35
Salut

cum fac sa pun textul de exemplu asa?

El era: frumos
destept
serios
  -1    Raspunde
lacouleur 05 aprilie 2012, 16:31 36
nu a iesit bine
adica dupa 2 puncte frumos destept serios sa fie unul sub altul??

va rog repede
  -2    Raspunde
Lucian.Iordache 05 aprilie 2012, 16:52 37
@lacouleur: Foloseste tagul BR acolo unde vrei sa fie sfarsitul randului. Pe viitor te rog sa citesti lectia sau lectiile si apoi sa intrebi.
  1    Raspunde
Adauga comentariu

Pentru a adauga comentarii trebuie sa fii membru eCursuri.ro

Intra in contul tau sau inregistreaza-te GRATUIT (dreapta sus)
Publicitate
Cuprinsul cursului
1. Structura unui document HTML
2. Despre atribute HTML
3. Despre culori HTML
4. Formatarea textului in HTML
5. Adaugarea imaginilor in paginile HTML
6. Crearea legaturilor in HTML
7. Crearea listelor in HTML
8. Tabele in HTML
9. Folosirea cadrelor intr-o pagina web
10. Crearea formularelor folosind HTML
11. Realizarea unui site in HTML
Cursuri noi Top cursuri
Curs de legislatie rutiera
7 lectii online
Excel prin exemple
10 lectii online
Windows XP prin exemple
10 lectii online
Infiintarea unei firme
6 lectii online
Gramatica limbii engleze
27 lectii online
Introducere in e-Business
25 lectii online
Curs de Machiaj
13 lectii online
Curs de Fashion
17 lectii online
Curs de Barman
10 lectii online
HTML pe intelesul tuturor
11 lectii online
cursuri
Copyright © 2005-2011 - eCursuri.ro - toate drepturile rezervate - E-mail: contact@ecursuri.ro