HTML Osnove

DIV tag

DIV tag je specijalna vrsta taga. On nema semantičko značenje poput p, h1 ili img taga već predstavlja kontejner u koji se smešta sadržaj koji smo pominjali: tekst, slike, video, više sekcija teksta ili slika.

On služi kao omotač odredjenog sadržaja i služi da taj sadržaj kao celinu pozicionira na web strani.

Kako bi ovo pojasnili pogledaćemo primer gde NEMAMO primenjene div tagove.

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<title>Poravnanje teksta</title>

</head>

<body>

<h1>Naslov celine 1</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

<h1>Naslov celine 2</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

<h1>Naslov celine 3</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

<h1>Naslov celine 4</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

</body>

</html>

Ovaj kod u pretraživaču izgleda kao

27-div-tag-u-pretrazivacu-html

Ako bi sada oko svake celine (pod celinom podrazumevamo naslov i pridružene paragrafe) primenili div tagove, dobili bi celine nad kojima možemo da vršimo različite manipulacije u smislu pozicioniranja, dimenzionisanja, dodele pozadinskih boja, itd. Tada bi kod mogao da izgleda ovako (za sad ne obraćajte pažnju na css koji se nalazi u okviru head sekcije dokumenta)

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<title>Poravnanje teksta</title>

<style>

div#prvi{font-size:22px; width:400px; float:left;background-color:green;color:white;padding:20px;margin-right:20px;}

div#drugi{font-size:14px; width:300px; float:left;background-color:red;color:grey;padding:20px;margin-right:30px;}

div#treci{font-size:18px; width:260px; float:left;background-color:magenta;color:yellow;padding:30px;margin-right:10px;}

div#cetvrti{font-size:12px; width:400px; float:right;background-color:yellow;color:black;padding:15px;}

</style>

</head>

<body>

<div id=”prvi”>

<h1>Naslov celine 1</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

</div>

<div id=”drugi”>

<h1>Naslov celine 2</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

</div>

<div id=”treci”>

<h1>Naslov celine 3</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

</div>

<div id=”cetvrti”>

<h1>Naslov celine 4</h1>

<p>Постоји много верзија и варијација Lorem Ipsum пасуса, али већина је претрпела некакву промену, било да је то додавање неког хумора или насумична респодела речи која на крају не изгледа уверљиво. Ако планирате да користите пасусе Lorem Ipsum модела, требало би да будете сигурни да се у средини текста не крије нека сакривена или срамотна порука. Сви Lorem Ipsum генератори који се могу наћи на Интернету су направљени да понављају предходно дефинисане делове, што чини овај генератор првим правим на Интернету. Он користи речник од 200 латинских речи које су комбиноване са подоста шаблона реченица како би генерисао Lorem Ipsum који изгледа уверљиво. То значи да овде генерисани Lorem Ipsum не садржи понављање, нема убачен хумор или неке неочекиване речи и тако даље.</p>

</div>

</body>

</html>

a prikaz u pretraživaču

28-poredjani-div-html-tagovi

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn