HTML Osnove

HTML blok i inline tagovi

Tagovi koje smo pominjali do sada bili su podeljeni po nameni. Kako se budemo bližili kraju HTML obuke, sve će nas više zanimati stilizovanje unetih slika i teksta. U tom cilju potrebno je pojasniti šta su to block a šta inline elementi.

Ono što je izuzetno važno, kasnije, kada budemo radili formatiranje (stilizovanje elemenata) je činjenica da inline elementi ne mogu imati širinu i visinu. Njih je moguće staviti unutar block elemenata ili ih transformisati u blok element i na taj način upravljati njihovim dimenzijama.

Neki od block tagova koje smo obradjivali su <h1> do <h6>, <p>, <table>, <div>, itd.

Sa druge strane, inline tagovi koje smo pominjali: <span>, <img>, <a>, itd.

Blok elementi su elementi koji podrazumevano zauzimaju celu širinu web strane (prozora pretraživača) tako da elementi navedeni u html dokumentu posle njih počinju u novom redu.

Inline elementi su elementi koji se ne završavaju na kraju reda već je odmah nakon završetka njihovog sadržaja moguće dodati novi inline element. Iz tog razloga, moguće je u jednom redu imati više inline elemenata. Takodje, moguće je inline elemente grupisati unutar blok elemenata.

Svaki od elemenata na web strani ima neke podrazumevane parametre za prikaz. Tako i block elementi (h1-h6,p,itd.) podrazumevano zauzimaju kompletno raspoloživu širinu prozora pretraživača (tačnije elementa “roditelja”), nezavisno od toga da li je njihov sadržaj manji od dužine reda koji se može prikazati u prozoru pretraživača ili ne.

Nasurot njima, inline elementi (span, a, img) po širini zauzimaju samo onoliko prostora koliko im je neophodno za prikaz sadržaja koji se nalazi u okviru njih. Ukoliko je njihov sadržaj veći od širine prozora pretraživača, delovaće da se ponašaju kao block elementi, iako to nisu.

Da bi razumeli, pogledaćemo primere za neke od pomenutih elemenata.

Ovde je zbog lakšeg razumevanja korišćen CSS atribut za boju pozadine kako bi jasnije videli granice elemenata.

Pravilo je da inline elementi mogu biti sadržani unutar block elemenata, dok obrnuto ne važi!

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Pozicioniranje elemenata kreiranjem DIV-ova</title>

<style>

body{color:white;font-size:120%;}

h1{background-color:red;}

p{background-color:pink;}

span{background-color:grey;}

</style>

</head>

<body>

<h1>Naslov kreiran koriscenjem h1 taga</h1>

<p>Paragraf kreiran koriscenjem block elementa p.</p>

<p>Paragraf unutar koga se nalazi <span>span tekstualni inline element</span> koji zauzima samo neophodan prostor.</p>

<p>Paragraf koji sadrzi sliku kao inline element.<img src=”kafe1.jpg” Kao sto se moze videti slika ce zauzeti samo neophodan prostor ali ce ujedno definisati visinu block elementa unutar koga se nalazi.</p>

<span>Span tag, kao inline element, zauzima samo neophodan prostor.</span>

</body>

</html>

Ovaj primer, prikazan u prozoru pretraživača, izgleda kao na slici ispod.

39-html-block-i-inline-elementi

Kao što vidimo, u prvom redu nalazi se block element (h1) koji je zauzeo kompletno raspoloživu širinu prozora pretraživača iako je njegov sadržaj dosta kraći.

Ispod njega, prikazan je block element p koji takodje, nezavisno od sadržaja, zauzima celokupnu širinu.

U trećem redu nalazi se block element (p) unutar koga se nalazi span (inline element) sa pozadinskom sivom bojom. Vidi se da, obzirom da zauzima samo minimalno potreban prostor za prikaz sadržaja, ne remeti izgled block taga p unutar koga se nalazi. Ovo je primer pravila da se inline elementi mogu nalaziti u okviru block elemenata.

U sledećem redu, primer je identičan, s razlikom što je umesto span taga, u p tag umetnuta slika (img tag). Razlika je u tome što zbog visine slike, ceo tag izgleda viši kako bi uključio celokupnu visinu slike.

U poslednjem redu vidimo inline tag koji zauzima samo neophodnu širinu za prikaz sadržaja koji se u okviru njega nalazi.

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