Tutorial HTML - Atribute



Atributele sunt folosite pentru a personaliza tag-urile. Ce vreau sa spun? Ca la un moment dat vei vrea sa redimensionezi o imagine sau un tabel sau sa schimbi culoarea de fond. Toate acestea sunt posibile cu ajutorul atributelor.

Cele mai multe tag-uri au propriile lor atribute. Vom vorbi despre aceasta pe masura ce introducem in discutie un nou tag. Acum insa vom vorbi despre un set de atribute generice care se pot folosi cu majoritatea tag-urilor.

Atributele se introduc intre parantezele unghiulare (<>) ale tag-ului de deschidere.


Atributele "class" si "id" in HTML

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. Vom vorbi despre rolul acestora la momentul potrivit, atunci cand vom studia sintaxa si funcia lor in CSS.

Idea este ca atunci cand vrei sa stabilesti o clasa de tag-uri pentru a fi folosite mai tarziu ca ajutorul CSS, sa poti diferentia intre doua tag-uri identice dar cu atribute diferite. Priveste exempul alaturat.

<p id="italicsparagraph">Paragraph type 1, inclinat </p>

<p id="boldparagraph">Paragraph type 2, ingrosat </p>

Vizualizare

Paragraph type 1, inclinat

Paragraph type 2, ingrosat


HTML - Atributul "name"

"name" este ceva mai 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.

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

Vizualizare

Acest atribut (name) nu are nici un afect asupra redarii casutei de text, cu toate ca in background detine un rol foarte important.


HTML - Atributul "title"

Atributul title este folosit foarte putin fata de cat ar trebuii, el adauga un titlu (un pop-up) oricarui continut al unui element. Acest atribut nu ar trebui uitat. Poti denumi aproape orice si oricum doresti. Vizualizarea titlului apare atunci cand ne oprim co mausul cateva secunde deasupra contnutului.

<h2 title="Eu sunt un atribut title!">Un Titlu Oarecare</h2>

Vizualizare

Un Titlu Oarecare

 

Treci cu mausul peste titlul de mai sus ca sa vezi magia atributului "title". Acest atribut va oferi site-ului tau multa interactiune cu cei ce te vor vizita. Nu il trece cu vederea.


HTML - Atributul "align"

Daca vrei sa aliniezi in mod diferit anumite elemente ale pagini tale, atunci ai la dispozitie atributul align. Poti alinia la stanga (left), dreapta (right) sau la mijlocul (center) pagini aproape orice element. Prin default elementele se aliniaza la stanga, esceptand atuci cand se specifica o alta aliniere.

<h2 align="center">Titlu centrat </h2>

Vizualizare

Titlu centrat

Alete exemple:

<h2 align="left">Titlu aliniat la stanga </h2>
<h2 align="center">Titlu centrat </h2>
<h2 align="right">Titlu aliniat la dreapta </h2>

Vizualizare

Titlu aliniat la stanga

Titlu centrat

Titlu aliniat la dreapta


Valori standard pentru atribute

Multora dintere tag-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut, browser-ul o va face pentru tine. De exemplu un paragraf se va alinia singur la stanga, exceptand atunci cand specifici altfel; la fel si elementele unui tabel. Pe masura ce vei exersa vei intelege mai multe despre valorile default ale unor tag-uri


Atribute generice

Retine ca atributele sunt folosite pentru a personaliza elementele unei pagini web. Am alturat aici cateva dintre atributele cele mai comune, folosite in HTML:

Attribute Options Function
align right, left, center Aliniere orizontala
valign top, middle, bottom Aliniere verticala
bgcolor numeric, hexidecimal, sau valoare RGB Un background in spatele elementului
background URL O imagine in spatele elementului
id Definit de user Numeste un element care se va folosi cu CSS
class Definit de user Clasifica un element care se va folosi cu CSS
width Valoare numerica Specifica latimea unui tabel, imagine, sau casute de tabel.
height Valoare numerica Specifica inaltimea unui tabel, imagine, sau casute de tabel.
title Definit de user "Pop-up". Afiseaza un titlu pentru un element stabilit.

Tutorialul HTML anterior
Tutorialul HTML urmator



Comentarii


   Tirca

Nu prea stiu cum sa aflu URL-ul unei imagini din calculator!Poate cineva sa ma ajute?
01-Jul-2009 - 13:27


   catalin

Incearca sa fi mai exact si voi incerca un raspuns concludent...pana atunci bafta
02-Jul-2009 - 00:37


   adrian

salut m-am jucat si eu putin la un site, a iesit ceva, l-am pus si pe un host si as vrea sa introduc si eu COMENTARII in genul asta cum este aici.
Ma ajuta cineva?
25-Jul-2009 - 19:14


   catalin

daca te-ai jucat putin la un site, nu vei reusii sa injghebezi un script de comentarii. Te sfatuiesc sa cauti unul gata facut pe internet...sau sa inveti php. Pe www.etutoriale.ro gasesti un tutorial php destul de reusit. Nu vei invata cum sa faci un script de comentarii dar e un punct de pornire. Bafta
26-Jul-2009 - 13:41


   Alyn

scrie care este numele pozei...de exemplu "peisaj.jpg" sau peisaj.gif"...trebuie sa i una din aceste extensii...altfel browser-ul nu va recunoaste poza...
10-Aug-2009 - 18:40


   axell

Se pot pune mai multe atribute intr-un singur tag? De ex vreau sa pun si "center" si culoare si un background se poate?
16-Aug-2009 - 00:55


   catalin

Intr-un tag html se pot pune oricat de multe atribute vrei cu conditia sa nu se contrazica
16-Aug-2009 - 01:20


   iuba

Hello. Nu reusesc sa la atribute sa imi apara textul inclinat. Nu stiu exact unde gresesc, am facut ca in explicatiile date, insa nu imi iese. O idee ceva?
Ms
19-Aug-2009 - 12:56


   catalin

Exemplul oferit mai sus se foloseste cu css. In css trebuie sa stabilesti caracteristicile
clasei sau id-ului  respectiv. pentru text inclinat in html citeste capitolul "Tutorial HTML - Italic"
22-Aug-2009 - 13:50


   Mitza WebMaster

Si cei stiutori se incurca.Desi stiu HTML CSS si alte limbaje ma incurc la ceva:eu folosesc adobe dreamweaver ca sa scriu in html si acest program nu accepta "Space" dekt intre cuvinte.Dar eu vrau sa scriu ceva si ca sa bag efect de alineat trebuie bag un space inaintea cuvantutlui.deci nu este nici un tag pentru space?<br /> nu merge ca ma da pe randu urmator....
17-Nov-2009 - 22:08


   catalin

Iti recomand sa folosesti CSS pentru alinierea paragrafelor:

p {text-indent:50px}

Prima linie dintr-un paragraf va fi inaintata in rand 50px

Sau daca pur si simplu vrei sa folosesti spatii goale(non-breaking space)

&nbsp; sau &nbsp;

este acelasi lucru
Bafta

17-Nov-2009 - 23:52


   vlad

Am vrut sa bag atributul de aliniere la centru si jos. Aliniat la centru era de mai devreme, align="center", dar am bagat valign="bottom" si nimic. Ba mai mult, titlul mi s-a deplasat la stanga paginii. Codul bagat de mine este: <h2 title="Rezultat" align="center" valign="bottom"><i>Sfarsit!</i></h2>
05-Dec-2010 - 05:22


   george

am incercat si eu putin sa ma "joc" cu align si valign...m`am descurcat pana am incercat sa pun un "textfield" la mijloc, in centru deci am introdus acest cod: <input type="text" name="TextField"
align="center" valign="middle" />..spuneti` mi va rog unde am gresit:D
03-Jan-2011 - 12:24


   ramona

vreau sa aflu html unei pagini(poze) de pe hi5?...ma putetzi ajuta ??
19-Apr-2011 - 01:18


   gabriel

Vreau sa aliniez pe acelasi rand un continut la stanga si un cuvant la dreapta fara sa utilizez tabele.Cum pot sa fac?
03-Aug-2011 - 22:08

1    


Trimite un comentariu!

Nume *
E-mail *
Vreau sa fiu anuntat de urmatoarele mesaje la acest articol
Comentariu *

Security image