Lekcija broj 2: HTML tagovi – tipovi html tagova, najčešće korišćeni i kako se pišu

 HTML  Add comments
Apr 292012
 

Pri kodiranju koriste se html tagovi (eng. html tags) i stilovi koji ih definišu. U većini slučajeva koristi se svega nekoliko tagova i nekoliko stilova za postizanje raznovrsnih rezultata. Dakle nije neophodno da poznaješ apsolutno sve tagove i stilove kako bi napravio sajt i završio posao! U prethodnoj lekciji imao/la si prilike da koristiš html tag div i video/la si šta je potrebno da bi se postavio okvir sajta i elementi unutar istog. Sada ćemo proći kroz osnovne tagove i njihovu osnovnu podelu.

Osnovni html tagovi:

  • div – koristi se za postavljanje strukture sajta 
    1

    <div>Struktura sajta</div>
  • span – u principu univerzalni kontejner, ali pretežno služi za stilizaciju teksta 
    1

    <span>Sadržaj sajta</span>
  • p – paragraf tag – isključivo se koristi kao kontejner za tekst 
    1

    <p>Sadržaj sajta</p>
  • a – link tag – služi za povezivanje stranica unutar sajta ili linkovanje ka sadržajima na drugim sajtovima 
    1

    <a href="http://www.google.com">Tekst koji je link i koji vodi na google.com</a>
  • b – bold tag – služi za stilizaciju teksta 
    1

    <b>ovaj tekst je okružen bold tagom</b>
  • i – italic tag – takodje služi za stilizaciju teksta 
    1

    <i>ovaj tekst je okružen italic tagom</i>
  • img – ovaj tag služi za prikazivanje željene slike u browser-u, odnosno na sajtu 
    1

    <img src="url(putanja/do-slike.jpg)" alt="Kratki opis slike" />
  • br – break tag – ovaj tag služi za “lomljenje teksta” , odnosno pravljenje novog reda u tekstu
    npr.
    kao
    u
    ovom
    primeru

    1

    <br />
Obavezni tagovi:
  • Doctype - tag koji definiše tip dokumenta, u ovom slučaju taj tip dokumenta je HTML. Piše se na samom početku dokumenta u sledećoj formi: 
    1

    <!DOCTYPE html>
  • html - u ovom tagu se nalazi apsolutno sve što postoji na jednom sajtu i sledi odmah nakon Doctype taga. 
    1

    <html></html>
  • head - head tag služi za definisanje parametara strane i uključivanje eksternih CSS file-ova i java skripti 
    1

    <head></head>
  • body - unutar body taga se nalazi sam code koji definiše strukturu i sadržaj sajta, kao i svi ostali tagovi, između ostalog i html tagovi koji su navedeni na početku ove lekcije 
    1

    <body></body>

Primer:

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Naslov ove stranice</title>
    </head>

    <body>
    </body>
</html>

Dakle, za pravilno iskodiranu stranu neophodni su, između ostalog, iznad navedeni tagovi.

Jedan od jako korisnih elemenata koji se inače nalazi u elementu svakog sajta jeste tag koji uključuje eksterni CSS fajl. 

1

<link href="global.css" type="text/css" rel="stylesheet" />

CSS (cascading style sheet) je osmišljen sa namerom da olakša kodiranje i optimizuje stilove primenjene na HTML tagove, koji čine strukturu svakog sajta.

Ispod možeš videti kako taj tag izgleda unutar standardne HTML stranice, kao i gde treba da se nalaze tagovi koji čine strukturu sajta (div, p, span, a…)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>Naslov ove stranice</title>

        <link href="global.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <!-- glavni kontejner sa ID-jem "wrapper" -->
        <div id="wrapper">
            <!-- kontejner sadržaja sa vrha sajta sa ID-jem "header", unutar koga će se naći LOGO i navigacija -->
            <div id="header">
                <!-- IMG - image tag koji će prikazati Logo -->
                <img src="url(slika.jpg)" alt="Naziv sajta" />

                <!-- kontejner za "meni" - navigaciju sajta sa ID-jem "nav" (skraćeno od navigation) -->
                <ul id="nav">
                    <li>
                        <a href="nav1.html">nav 1</a>
                    </li>
                    <li>
                        <a href="nav2.html">nav 2</a>
                    </li>
                    <li>
                        <a href="nav3.html">nav 3</a>
                    </li>
                </ul>
            </div>

            <!-- kontejner središnjeg dela sajta sa ID-jem "body" -->
            <div id="body">
                Slike i tekst
            </div>

            <!-- kontejner sadržaja sa dna sajta sa ID-jem "footer" -->
            <div id="footer">
                npr. ponovljena navigacija, copyright, godina itd ...
            </div>
        </div>
    </body>
</html>

Ispod možeš videti jedan neobavezan, ali jako koristan tag – komentar, i piše se na sledeći način:

1
2
3

<!-- Komentar -->

<!-- Dakle ovako se piše komentar unutar HTML-a i koristi se radi preglednosti i urednijeg vođenja code-a, što u slučaju projekata od 10+ stranica ume da bude jako korisno. Inače je odlična praksa za bilo koji projekat -->

 

Nastavi na Lekciju br. 3: U narednoj lekciji videćeš više o tome šta je CSS file i kako se koristi, šta su klase, a šta ID-jevi i kako se pišu.

 
-
 

Vrati se na Lekciju br. 1: Uvod u kodiranje