WEBnSTUDY.com
HTML

Blok i inline HTML elementi

Sada ćemo naučiti da postoje dva glavna načina prikazivanja elemenata. To su blok i inline elementi.

Blokovi odvajaju delove dokumenta. Uobičajeno se ređaju jedan ispod drugog i imaju maksimalnu moguću širinu koju im dozvoljava kontejnerski element. Primeri ovih elemenata su naslovi i pasusi.

Inline elementi "teku sa tekstom". Nemaju širinu, već zavise od teksta koji obuhvataju - tako mogu biti prikazani i u više linija. Primeri su naglašen ili specifičan tekst.

Uobičajeno su blokovi uvek nadređeni inline elementima, ali to nije pravilo.

Posebni slučajevi

Postoje i elementi koji se ne mogu svrstati ni u jednu od ove dve kategorije, ili bolje da kažemo - imaju karakteristike oba tipa prikaza. Takvi elementi su inline-blokovi.

Inline-blokovi takođe "teku sa tekstom", odnosno, ne ređaju se jedni ispod drugih, već jedan pored drugog. Međutim, oni imaju definisanu širinu i ne mogu se prelomiti u više redova. Zamislite inline-blok kao jedno veliko slovo unutar teksta. Najbolji primer ovakvog elementa je slika.

Naravno ima još specifičnih slučajeva (npr. tabele i ćelije unutar njih), ali ćemo o njima pričati kada dođe vreme.

Pogledajte sada primere ovih tipova elemenata.

Blok i inline tip prikaza

Pogledajmo prvo primer blokova.U primeru imamo naslov, zatim pasus i par generičkih blokova.


	<h1 style="background-color:#feb;">Naslov</h1>
	<p style="background-color:#cff;">Pasus sa tekstom</p>
	<div style="background-color:#fcf;">Treći blok</div>
	<div style="background-color:#dfd;">
		Četvrti blok - ovde ćemo dodati malo više teksta da bismo videli kako to izgleda. 
		Tekst unutar blokova se naravno može prelamati u više redova.
	</div>
	<div style="background-color:#ddf;">Peti blok</div>
	

Ovde smo obojili pozadinu kako biste videli da ovi elementi imaju maksimalnu širinu koju mogu, i da se ređaju jedni ispod drugih. Ne zaboravite, širina je maksimalna samo ako se putem CSS pravila ne zada drugačije. Ako vas čude beli razmaci među blokovima - to su margine koje su podrazumevane za naslove i pasuse. Naravno, sve se to može kontrolisati pomoću CSS-a.

p1

Pogledajmo sada kako izgledaju inline elementi, i to naglašen i specifičan tekst.


	<div>
        Ovde će takođe biti <i style="background-color:#feb;">malo više teksta</i> da bismo
        videli ponašanje inline elemenata. 
        <b style="background-color:#cff;">Ovi elementi se mogu prelamati u više redova</b>.
        Zato im je nemoguće odrediti širinu.
	</div>
	

I ovde smo obojili elemente kako bi bilo lakše da ih primetite.

p2

Evo sada nečega posebnog. Inline blokovi


	<div>
		Ovde će takođe biti malo više teksta da bismo videli ponašanje inline elemenata. 
		<div style="display:inline-block; background-color:#cfd;">
		    Ovi elementi se ne mogu prelamati<br />u više redova, ali tekst unutar njih može!
		</div>
		Ponašaju se kao jedno 
		<div style="display:inline-block; background-color:#fcd;">
		    veliko<br />slovo 
		</div>
		unutar teksta, a moguće im je podesiti tačno određenu širinu.
	</div>
	

Obratite pažnju - DIV element inače nema ovakvo ponašanje, ali smo ovde promenili njegov izgled. Ako vas zanima kako se menja tip prikaza elementa, u delu sajta koji se bavi CSS-om, potražite atribut display. Takođe smo obojili element, kako bismo bolje videli šta se dešava.

p3
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.