HTML - Atributi

Šta su atributi?

Atributi definišu dodatne karakteristike ili svojstva elementa kao što su širina i visina slike. Atributi su uvijek navedeni u početnom tagu (ili početnoj oznaci) i obično se sastoje od parova imena-vrijednosti poput name = "value". Vrijednosti atributa uvijek se trebaju nalaziti u navodnicima. Takođe su određeni elementi potrebni za neke atribute. Na primjer, oznaka <img> mora da sadrži atribute src i alt. Pogledajmo nekoliko primjera upotrebe atributa: 

<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="Miloš Mihaljica">
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Korištenje HTML atributa</title>
</head>
<body>
    <p><img src="/examples/images/smiley.png" width="30" height="30" alt="Smiley"></p>
    <p><a href="https://www.google.com/" title="Search Engine" target="_blank">Google</a></p>
    <p><abbr title="Hyper Text Markup Language">HTML</abbr></p>
    <p><input type="text" value="Miloš Mihaljica"></p>
</body>
</html>

U gornjem primjeru src unutar oznake <img> je atribut, a put slike je njegova vrijednost. Slično tome, href unutar <a> oznake je atribut, a link je vrijednost i tako dalje.

U HTML5 postoji nekoliko atributa koji se ne sastoje od parova ime / vrijednost, već se sastoje samo od imena. Takvi se atributi nazivaju boolovim atributima. Primjeri nekih najčešće korištenih boolovih atributa su: checked, disabled, readonly, required, itd. 

<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Tekst samo za čitanje" readonly>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Korištenje HTML Boolean atributa</title>
</head>
<body>
    <p><input type="email" required></p>
    <p><input type="submit" value="Submit" disabled></p>
    <p><input type="checkbox" checked></p>
    <p><input type="text" value="Tekst samo za čitanje" readonly></p>
</body>
</html>

O svim tim elementima detaljno ćete saznati u narednim lekcijama.


Atributi opšte namjene

Postoje neki atributi, kao što su: id, title, class, style itd. koje možete koristiti na većini HTML elemenata. Sljedeći dio opisuje njihovu upotrebu.


#id atributi

Atribut id koristi se za davanje jedinstvenog imena ili identifikatora elementu unutar dokumenta. To olakšava odabir elementa pomoću CSS-a ili JavaScript-a. 

<input type="text" id="firstName">
<div id="container">Neki sadržaj</div>
<p id="infoText">Ovo je paragraf.</p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML id atributi</title>
    <style>
        #firstName{
            border: 1px solid red;
        }
        #container{
            background: #ccc;
        }
        #infoText{
            color: blue;
        }
    </style>
</head>
<body>
    <p><input type="text" id="firstName"></p>
    <div id="container">Neki sadržaj</div>
    <p id="infoText">Ovo je paragraf.</p>
</body>
</html>

.class atributi

Kao i id atribut, atribut class se takođe koristi za identifikovanje elemenata. Ali za razliku od id-a, atribut class ne mora biti jedinstven u dokumentu. To znači da možete primijeniti istu klasu na više elemenata u dokumentu, kao što je prikazano u sljedećem primjeru: 

<input type="text" class="highlight">
<div class="box highlight">Neki sadržaj</div>
<p class="highlight">Ovo je paragraf.</p>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML class atribut</title>
    <style>
        .box{
            padding: 20px;
            border: 1px solid grey;
        }
        .highlight{
            background: yellow;
        }
    </style>
</head>
<body>
    <p><input type="text" class="highlight"></p>
    <div class="box highlight">Neki sadržaj</div>
    <p class="highlight">Ovo je paragraf.</p>
</body>
</html>

Atributi naslova (title)

Atribut title se koristi za pružanje savjetodavnog teksta o elementu ili njegovom sadržaju. Isprobajte sledeći primjer da biste shvatili kako to zapravo funkcioniše. 

<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Klikni da uvećaš sliku">
    <img src="images/kites-thumb.jpg" alt="kites">
</a>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML title atribut</title>
</head>
<body>
    <p><abbr title="World Wide Web Consortium">W3C</abbr><p>
    <a href="images/kites.jpg" title="Klikni da uvećaš sliku">
    <img src="images/kites-thumb.jpg" alt="kites">
    </a>
    <p><strong>Napomena:</strong> Postavite pokazivač miša preko teksta i slike da vidite kako funkcioniše.</p>
</body>
</html>

Atribut stila (style)

Atribut style vam omogućava da odredite CSS pravila stilizovanja kao što su: boja, font, veličina itd. direktno unutar elementa. Pogledajmo primjer da vidimo kako to funkcionira: 

<p style="color: blue;">Ovo je paragraf.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Neki sadržaj</div>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML style atribut</title>
</head>
<body>
    <p style="color: blue;">Ovo je paragraf.</p>
    <p><img src="/examples/images/sky.jpg" style="width: 300px;" alt="Cloudy Sky"></p>
    <div style="border: 1px solid red;">Neki sadržaj</div>
</body>
</html>

Atributi o kojima smo gore raspravljali takođe se nazivaju i globalni atributi. Za više globalnih atributa, pogledajte naredne lekcije koje se nalaze na kursu HTML5.