U ovoj lekciji našeg HTML tutorijala govorićemo o atributima koje koristimo u HTML elementima, mernim jedinicama koje koristimo u atributima, upoznaćemo kako da pozicioniramo elemente pomoću atributa align i šta se dešava kada podesimo međusobno kontradiktorne atribute.
HTML atributi
Atributi pružaju dodatne informacije o elementu ili oznaci, a istovremeno ih menjaju na neki način. Većina atributa ima neku vrednost. Ta vrednost menja atribut.
Možda Vam se u ovom trenutku to čini konfuzno, ali pogledajte naš primer. Izmenite svoju HTML datoteku na sledeći način:
<html>
<head>
<title>Moj sajt</title>
</head>
<body>
<!-- Poravnavamo naslov i pasus uz pomoć HTML atributa -->
<h1 align="center">Formatiranje teksta</h1>
<p align="right">Ovo je običan tekst.</p>
<p>Ovaj tekst je <b>podebljan</b>, a ovaj je <big>velik</big>.<p>
<p>Možda želite <i>zakošen tekst</i> ili <small>neki mali</small>?</p>
<p>Ili želite da budete <strong>jaki sa brojevima</strong>?</p>
<p>2<sup>2</sup> = 4</p>
<p>Ili želite da napišete <sub>tekst niže</sub> od <ins>ostatka</ins>?</p>
<p>A možda je najbolje sve <del>izbrisati</del>?</p>
</body>
</html>
U ovoko izmenjenom kodu našeg primera, vrednost "center" označava da sadržaj unutar h1 elementa (naslov) treba da bude centriran na stranici (na engleskom align znači poravnati, postaviti u položaj). Zatim smo, na isti način, sledeći paragraf poravnali na desnu (eng. right) stranu.
To izgleda ovako:
Mere koje koristimo u atributima
Kao primer, želimo da izmenimo našu web stranicu i da na njoj prikažemo horizontalnu liniju tako da ona zauzima širinu od 50 piksela.
Ovo se može uraditi korišćenjem atributa za širinu (na eng. width):
<html>
<head>
<title>Moj sajt</title>
</head>
<body>
<!-- Poravnavamo naslov i pasus uz pomoć HTML atributa -->
<h1 align="center">Formatiranje teksta</h1>
<p align="right">Ovo je običan tekst.</p>
<hr width="50px"/>
<p>Ovaj tekst je <b>podebljan</b>, a ovaj je <big>velik</big>.<p>
<p>Možda želite <i>zakošen tekst</i> ili <small>neki mali</small>?</p>
<p>Ili želite da budete <strong>jaki sa brojevima</strong>?</p>
<p>2<sup>2</sup> = 4</p>
<p>Ili želite da napišete <sub>tekst niže</sub> od <ins>ostatka</ins>?</p>
<p>A možda je najbolje sve <del>izbrisati</del>?</p>
</body>
</html>
Širinu elementa možemo definisati i korišćenjem procenata. Dodajmo još jednu horizontalnu liniju u naš primer:
<html>
<head>
<title>Moj sajt</title>
</head>
<body>
<!-- Poravnavamo naslov i pasus uz pomoć HTML atributa -->
<h1 align="center">Formatiranje teksta</h1>
<p align="right">Ovo je običan tekst.</p>
<hr width="50px"/>
<p>Ovaj tekst je <b>podebljan</b>, a ovaj je <big>velik</big>.<p>
<hr width="50%"/>
<p>Možda želite <i>zakošen tekst</i> ili <small>neki mali</small>?</p>
<p>Ili želite da budete <strong>jaki sa brojevima</strong>?</p>
<p>2<sup>2</sup> = 4</p>
<p>Ili želite da napišete <sub>tekst niže</sub> od <ins>ostatka</ins>?</p>
<p>A možda je najbolje sve <del>izbrisati</del>?</p>
</body>
</html>
Atribut pozicioniranja align
Atribut align se koristi da definišemo kako je element ili tekst poravnat tj. na koju stranu želimo da ga smestimo.
U našem primeru, menjamo jedan od pasusa da bude poravnat sa sredinom naše stranice, a dodajemo i još jednu liniju koja je poravnata udesno:
<html>
<head>
<title>Moj sajt</title>
</head>
<body>
<!-- Poravnavamo naslov i pasus uz pomoć HTML atributa -->
<h1 align="center">Formatiranje teksta</h1>
<p align="right">Ovo je običan tekst.</p>
<hr width="50px"/>
<p>Ovaj tekst je <b>podebljan</b>, a ovaj je <big>velik</big>.<p>
<hr width="50%"/>
<p align="center">Možda želite <i>zakošen tekst</i><br/>
<hr width="10%" align="right"/>ili <small>neki mali</small>?</p>
<p>Ili želite da budete <strong>jaki sa brojevima</strong>?</p>
<p>2<sup>2</sup> = 4</p>
<p>Ili želite da napišete <sub>tekst niže</sub> od <ins>ostatka</ins>?</p>
<p>A možda je najbolje sve <del>izbrisati</del>?</p>
</body>
</html>
Međusobno kontradiktorni atributi
Možda se pitate šta se dešava ako pokušate da primenite kontradiktorne atribute unutar istog elementa. Dakle, šta će pregledač prikazati ako element unutar nekog elementa ima atribut koji je suprotan od onoga koji je postavljen u elementu koji je iznad. Ili se pitate šta se desi kada istom elementu dodelimo oprečne atribute?
To možemo proveriti vrlo lako ako izmenimo naš primer i dodamo par linija HTML koda:
<html>
<head>
<title>Moj sajt</title>
</head>
<body>
<!-- Poravnavamo naslov i pasus uz pomoć HTML atributa -->
<h1 align="center">Formatiranje teksta</h1>
<p align="right">Ovo je običan tekst.</p>
<hr width="50px"/>
<p>Ovaj tekst je <b>podebljan</b>, a ovaj je <big>velik</big>.<p>
<hr width="50%"/>
<p align="center">Možda želite <i>zakošen tekst</i><br/>
<hr width="10%" align="right"/>ili <small>neki mali</small>?</p>
<p align="center">Ili želite da budete
<hr width="50%" align="left"/>
<strong>jaki sa brojevima</strong>?</p>
<p align="left" align="right">2<sup>2</sup> = 4</p>
<p>Ili želite da napišete <sub>tekst niže</sub> od <ins>ostatka</ins>?</p>
<p>A možda je najbolje sve <del>izbrisati</del>?</p>
</body>
</html>
Otvarranjem ove datoteke dobićete sledeći rezultat:
Uporedite ono što se nalazi u HTML kodu sa prikazanom stranicom. Mnogo toga možete zaključiti posmatranjem takvih stvari.
ksfdjgl
Pitanja:
- Koja je uloga atributa u HTML-u?
- oznake nemaju atribute
- atribut menja element
- atribut služi kao komentar unutar elementa
- Koje merne jedinice možemo da koristimo za atribut širine width?
- km i metri
- pikseli i procenti
- sve postojeće merne jedinice
- ne možemo da koristimo merne jedinice
- Koji atribut koristimo ako želimo da neki element prikažemo levo, centrirano ili desno?
- align
- location
- direction
- aligment
- Koji atribut koristimo ako želimo da pasus prikažemo na desnoj strani?
<p _____="right">
0 Коментари