Osnovni HTML tagovi


Tag za naslove <h1> do <h6>

Unutar ovih tagova se stavljaju nazivi naslova. Najveći (najglavniji) naslov se obeležava sa <h1>  dok se najmanji naslov obeležava sa <h6> tagom.

See the Pen
Naslovi u html-u
by Web programiranje (@chos)
on CodePen.


Paragraf  tag<p>

Ovaj tag se koristi da smestimo unutar njega obični tekst koji je standardne veličine i izgleda. Ovaj paragraf tag pre samog prikazivanja teksta obradi izgled teksta, tako što obriše sve prazne linije i prazna polja i pokuša da prikaže sve u jednom redu.

See the Pen
<p> tag
by Web programiranje (@chos)
on CodePen.

<br> tag

Videli smo da će <p> tag uvek pokušati da prikaže sve u jednom redu, te ako želimo da na odredjenom mestu “presečemo” tekst i  njegov ostatak prebacimo u sledeći red potrebno je koristi <br> tag.

See the Pen
<br> tag
by Web programiranje (@chos)
on CodePen.

Preformatiran tekst <pre>

Medjutim šta ako ne želimo da nam <p> tag oblikuje tekst, tj. šta ako baš želimo da zadržimo prazne linije ili polja i da prikažemo tekst baš onako kako smo ga napisali? Onda je neophodno da koristimo <pre> tag koji “zna” da je teks već sredjen (preformatiran) i ništa   dalje ne sredjuje. Pogledajte razliku u sledećem primeru:

See the Pen
<pre> tag
by Web programiranje (@chos)
on CodePen.

Tag za prikazivanje slika <img>

Ovaj tag obezbedjuje prostor za sliku u okviru stranice, i ovaj tag nema završni tag tj. ima samo početni. Kod ovog taga nije samo dovoljno da napišemo njegovo ime nego moramo da ubacimo još neke informacije uz ime. Te dodatne informacije se zovu atributi,  a <img> tag ima dva obavezna atributa:

  • src atribut (koji je zadužen za definisanje putanje slike)
  • alt atribut (ovaj atribut je zadužen za prikazivanje zamenskog teksta ukoliko browser iz nekog razloga nije našao sliku da je prikaže)

<img src="/putanja_slike_folder/naziv_slike.jpg" alt="tekst koji opisuje sliku">

See the Pen
<img> tag
by Web programiranje (@chos)
on CodePen.

Tag za prikazivanje  hyperlink-ova <a>

Ovaj tag se koristi za prikazivanje linkova i to:

  • hyperlink-a tj. klikabilnog sadržaja koji na klik otvara novu internet stranicu čija je adresa definisana u tag-u.
  • downloadlink-a tj. klikabilnog sadržaja koji odmah započinje download fajla na koji ukazuje link

Specifičnost ovoga taga je ponašanje miša, jer kada mišem stanemo preko <a> taga izgled kursora bi trebao da se promeni u takozvani poenter tip (šaka sa prstom).

“href” atribut

Jedini obavezujući atribut ovoga tag-a je adresa (referenca) gde bi link trebao da odvede korisnika (u slučaju hyperlinka) ili adresa sa koje bi trebao da se izvrši download (u slučaju download)  i on se zove href ="  "

See the Pen
<a> tag
by Web programiranje (@chos)
on CodePen.

Postoji više atributa koji mogu da se stave u sklopu <a> taga ali pored ovog ovog href ="  " obavezujućeg atributa, pomenućemo samo još jedan a to je target="  "

“target” atribut

Target atribut spefičnije definiše kako će se prikazati link

  • _self (link se otvara u istom tabu)
  • _blank (link se otvara u novome prozoru)

See the Pen
<a > tag + atribut target
by Web programiranje (@chos)
on CodePen.

Pored klikabilnog teksta koji odvodi na odredjenu internet adresu možemo staviti i da klik na sliku uradi isto, pogledajte primer:

See the Pen
<a> sa image
by Web programiranje (@chos)
on CodePen.

download atribut

Da bi omogućili download sa nekog link-a potrebno je u okviru <a> taga  samo dodati “download” atribut:

See the Pen
Untitled
by Web programiranje (@chos)
on CodePen.

Treba napomenuti da ovo ne radi baš u svim browserima !

<hr> tag

Ovaj tag se koristi da vizuelno razdvoji stranu na više celina tako što iscrtava horizontalnu liniju (horizontal rule)

See the Pen
<hr> tag
by Web programiranje (@chos)
on CodePen.

h