Odmah u vatru: Lekcija 1 – HTML uvod

Html tutorijal: da pređemo odmah na stvar.

Nakon ove lekcije umećeš da napraviš strukturu svog prvog sajta u vidu html tagova. Ujedno se na identičan način postavlja i struktura većine sajtova, a izgledaće ovako:

Za ostvarivanje ovog cilja koristićemo html tag DIV koji se pri kodiranju piše <div></div>.

Otvori svoj omiljeni editor. Ukoliko ga još uvek nisi odabrao/la, otvori notepad i unesi code koji se nalazi ispod, a zatim ćemo analizirati dobijeni rezultat:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div style="width:960px;">
    <div style="border:1px solid blue; height:40px; margin-bottom:10px;">
        Header
    </div>

    <div style="height:600px; margin-bottom:10px;">
        <div style="border:1px solid green; height:600px; float:left; width:710px;">
            Leva kolona
        </div>

        <div style=" border:1px solid darkRed; height:600px; float:right; width:210px;">
            Desna kolona
        </div>
    </div>

    <div style="border:1px solid red; height:20px;">
        Footer
    </div>
</div>

Zatim taj fajl sačuvaj pod imenom index.html negde gde ćeš ga lako naći i pokreni. Jako je bitno da ekstenzija bude .html inače nećeš moći da vidiš rezultat.

Ukoliko si ispratio/la sve korake, rezultat koji vidiš trebao bi da bude identičan kao sa zadatog primera.

Hajde sada da pogledamo code i šta smo tačno uradili kako bismo postigli taj rezultat. Seti se da smo pomenuli da ćemo koristiti html tag DIV. Tag div, kao i njemu slični tagovi, sa kojima ćeš uskoro imati prilike da se sretneš i da ih “opipaš”, sastoje se iz dva dela: početni<div> i završni</div> deo, između kojeg se nalazi sadržaj.

1
2
3

<div>
    Sadržaj
</div>

Tako da u našem slučaju imamo jedan glavni div, koji predstavlja kontejner i kojem smo precizirali širinu da bude 960px, a zatim u njega postavili ostale elemente sa stilovima koji ih definišu.

Sada ću ukratko opisati nekoliko osnovnih stilova, čemu služe i kako se pišu, a zatim, kako biste lakše zapamtili ovu lekciju, imaćete  zadatak.

Ukratko, stilovi definišu HTML elemente, odnosno tagove dajući im dimenzije, borduru, razmak izmedju elemenata, razmak izmedju jednog elementa i sadržaja unutar istoga itd. Da bismo dodali stilove unutar nekog taga, potrebno ih je pisati unutar navodnika parametra style=”". Svi parametri koji se dodaju nekom tagu, kao sto je div, pisu se unutar pocetka tog taga<div>. Dakle:

1

<div>

Svaki element može imati više stilova, kao što smo to videli u našem primeru iznad. Da bismo to mogli da uradimo, svaki stil na svom kraju potrebno je da ima znak ;

1

<div style="border: 1px solid red; height: 20px;">

Stilovi koje smo mi u ovoj lekciji koristili su sledeći:

• width – definiše širinu elementa i piše se: width:100px; gde je 100px primer vrednosti širine u pikselima
• height - definiše visinu elementa i piše se: height:100px; gde je 100px primer vrednosti visine u pikselima
• border – ovaj stil željenom elementu daje borduru i piše se: border:1px solid red; gde je 1px debljina linije, solid tip linije (moze biti solid, dotted, dashed itd.), a red… ^_^ boja bordure
• margin – predstavlja razmak između elemenata. Piše se: margin-right:10px; gde right predstavlja stranu elementa koja će dobiti zadati razmak, a može biti margin-top, margin-right, margin-bottom, margin-right
• float – float u kratkim crtama “lepi” jedan element za drugi po horizontali. Postoje float:left; i float:right;
  Primer:
  Ukoliko bismo npr. postavili 2 div elementa, dakle <div>sadržaj</div> i još jedan element <div>sadržaj</div> i prvom ili oboma dali parametar float:left; prvi element bi bio zalepljen za levu ivicu, a drugi za njega. Moguće je koristiti i njegovu drugu opciju - float:right; i u tom slučaju, element sa stilom float:right; bio bi zalepljen za desnu ivicu.
  Za sada, elemente koje postaviš da float-uju, obavezno postavi u div koji će imati definisanu visinu. Za ovu situaciju postoji i elegantnije resenje do kojeg ćemo doći uskoro.

Ovo je ukratko opis stilova koje smo koristili u ovoj lekciji, a sada probaj da napraviš sledećih par layout-a.

Zadatak lekcije 1:

Pokušaj da uvežbaš odnos HTML elemenata i njihovo pozicioniranje. Estetika u ovom trenutku nije bitna.

Ukoliko naidješ na problem ili se sadržaj ne ponaša kako ti želiš, prodji kroz primer HTML code-a sa početka ove lekcije ponovo i probaj da sam da rešiš problem – najefikasniji način.
U svakom slučaju ukoliko zastaneš, ne oklevaj da pošalješ poruku sa opisom svog problema ispod u sekciji sa komentarima.

Srećno!

Nastavi na Lekciju br. 2: HTML tagovi - tipovi html tagova, najčešće korišćeni i kako se pišu