HTML Osnove

Tag <span>

Span tag namenjen je formatiranju teksta unutar paragrafa, najcešće u situacijama kada želimo da neku reč posebno formatiramo u odnosu na ostatak paragrafa, povećamo njen font, promenimo joj boju, podvučemo je, itd.

Pravilna upotreba ovog taga je u kodu ispod.

<p>Ovo je prva recenica paragrafa. Zatim sledi <span>druga<span> recenica paragrafa. Iza nje sledi treca recenica paragrafa a iza nje jos jedna. Sve ove recenice deo su jednog te istog paragrafa.</p>

Na primeru iznad vidite da je reč druga na početku druge rečenice stavljena unutar <span> taga. Ovako napisana, neće izazvati nikakvu promenu kada pogledate u prozoru pretraživača, ali je ovo HTML način da se deo teksta unutar paragrafa odvoji, bez promene izgleda celog paragrafa i nad njim kasnije izvede neka promena u formatiranju.

Tag <h>

H tag kao takav ne postoji. Postoji šest varijacija ovog taga a svi su namenjeni formatiranju naslova. Postoje: <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. <h1> ima najveći font dok <h6> ima najmanji. Pored uloge kreiranja istaknutog teksta u vidu naslova, njegova uloga je i u tome sto pretraživači na njih obraćaju posebnu pažnju pri klasifikovanju strane. (rangiranju) h1 se posmatra kao glavni naslov strane dok se ostali posmatraju kao podnaslovi. Vrlo retko ćete u praksi koristiti h4,h5 i h6.

Ako napišemo jednostavan kod koji će sadržati naslov i paragraf, celokupan kod html dokumenta izgledaće ovako:

<!DOCTYPE html>

<html>

<head>

<title>Naslov dokumenta</title>

<meta charset=”UTF-8″>

</head>

<body>

<h1>Naslov</h1>

<p>Ovo je prva recenica paragrafa. Zatim sledi druga recenica paragrafa. Iza nje sledi treca recenica paragrafa a iza nje jos jedna. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. </p>

</body>

</html>

U pretraživaču to izgleda ovako:

13-h-tagovi-html-naslovi

Da li primećujete razliku u veličini fonta samog naslova i teksta unutar <p> taga? Pored toga, uočavate da iznad i ispod teksta <h1> taga imamo veće praznine. Ove praznine nazivaju se margine I o njima će biti reči kasnije

Radi kompletnosti, pogledaćemo kako izgledaju i ostali h tagovi uvršteni u html dokument. Kod jeprikazan ispod.

<!DOCTYPE html>

<html>

<head>

<title>Naslov dokumenta</title>

<meta charset=”UTF-8″>

</head>

<body>

<h1>Naslov H1</h1>

<h2>Naslov H2</h2>

<h3>Naslov H3</h3>

<h4>Naslov H4</h4>

<h5>Naslov H5</h5>

<h6>Naslov H6</h6>

<p>Ovo je prva recenica paragrafa. Zatim sledi druga recenica paragrafa. Iza nje sledi treca recenica paragrafa a iza nje jos jedna. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. Sve ove recenice deo su jednog te istog paragrafa. </p>

</body>

</html>

Onako kako se vidi u pretraživaču:

14-svi-h-tagovi-html

Ako bolje pogledate, videćete da je nakon prvog <h1> taga, svaki sledeći tekst sve manji, zaključno sa tagom <h6>. Primetićete takodje i da je veličina fonta <h5> i <h6> čak manja od onog unutar <p> elementa. Sve ovo i još mnogo drugih stvari moguće je fino podesiti korišćenjem CSS-a.

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