Iz dana u dan internet je sve popularniji kod nas, ljudi postaju svesni njegovog značaja, samim tim se javlja interesovanje za rad na pomenutom, i mnogo je onih koji bi želeli da nauče kako se prave web sajtovi. Počinjemo sa novom serijom tutorijala, i to ovaj put od samih osnova kreiranja web stranice.
U uvodnom tekstu proći ćemo kroz osnovna objašnjenja i pojmove HTML-a.
Šta je HTML?
HTML (HyperText Markup Language) je osnovni jezik koji služi za definisanje web stranica i čine ga elementi, koji se obeležavaju tagovima (oznakama), i sadržaj. HTML nije programski jezik.
HTML dokumentima se pristupa pomoću browser-a kao što su Mozilla Firefox, Google Chrome, Safari, itd.
Za kreiranje HTML dokumenta je dovoljan bilo koji tekst editor kao na primer Notepad, ali je preporučljivo koristiti neki napredniji program (Notepad++, Dreamweaver, NetBeans, Coda, itd.)
Tagovi
HTML tagovi predstavljaju određene delove dokumenta, drugim rečima, njegove elemente. Pišu se u okviru < > zagrada (npr.
) i obično dolaze u paru kao otvarajući i zatvarajući tag, odnosno svaki tag mora biti zatvoren istim tagom sa dodatkom kose crte unutar zagrada ().
1
2
3
4
|
< html > < body >
|
Takođe postoje i samozatvarajući tagovi, kojima nije potrebno stavljati zatvarajući tag, već se zatvaraju sami dodavanjem kose crte na njihovom kraju (npr. ).
1
|
< img src = "/images/slika-html.jpg" border = "0" alt = "Uvod u HTML" /> |
Otvarajući i zatvarajući tagovi u sebi mogu da sadrže druge elemente ili sadržaj, dok samozatvarajući tagovi to ne mogu, i definišu se atributima.
Komentari se pišu u okviru oznaka:
1
|
|
U ovom tutorijalu ću navesti neke od bitnih HTML tagova. Lista je, naravno, mnogo duža, ali je lakše učiti tagove kroz praksu, tako da ću u narednom tutorijalu preći na konkretan rad.
Osnovni tagovi
- html - Kreira HTML dokument
- head - Deo u kojem se nalaze naslov stranice i ostale informacije koje nisu vidljive na samoj stranici
- body - Glavni deo stranice, koji je vidljiv korisniku
- h1, h2, h3, h4, h5, h6 - Tagovi za definisanje naslova, od najvećeg do najmanjeg
- p - Paragraf teksta
- div - Deli stranicu na različite sekcije/blokove
- br - Pravi red razmaka u tekstualnom bloku
- hr - Kreira horizontalnu liniju koja se najčešće koristi za vizuelno razdvajanje delova sadržaja
- blockquote - Koristi se za citiranje teksta, sa atributom za navođenje autora
Head tagovi
- title - Definiše naslov stranice
- meta - Sadrži osnovne informacije o stranici (ključne reči, opis i sl.)
- link - Povezuje stranicu sa drugim dokumentima (CSS fajl, fav ikonica)
- script - Sadrži (ili povezuje sa fajlom koji sadrži) skripte koje se izvršavaju na klijentskoj strani
- style - Sadrži stilove koji opisuju izgled HTML elemenata
Liste
- ol - Uređena lista (lista sadrži numeričko ili alfabetsko obeležavanje elemenata liste)
- ul - Neuređena lista (obeležavanje elemenata liste se vrši simbolima kao što je tačka, kvadratić...)
- li - Element liste
Tagovi za formatiranje teksta
- a - Definiše link
- strong ili b - Definiše podebljan tekst
- em ili i - Definiše iskošen tekst
- u - Definiše podvučen tekst
- span - Kreira umetnuti (inline) kontejner teksta
- sub - Definiše potpisan tekst
- sup - Definiše natpisan tekst
Elementi forme
- form - Definiše formu, koja sadrži ulazne elemente i kontrole
- fieldset - Grupiše elemente forme
- legend - Definiše naslov elemenata grupisanih u fieldset
- button - Definiše dugme (klikabilni element)
- input - Definiše ulazni element u koji se unose informacije (tekst, email, šifra...)
- textarea - Višelinijski ulazni element za unos teksta (npr. za unos komentara)
- select - Lista za selektovanje stavki (jedne ili više)
- option - Definiše stavku unutar select liste
- label - Služi za opis elementa forme (npr. naziv pored email polja)
Tagovi slika i medija
- img - Definiše umetnutu (inline) sliku
- applet - Ubacuje Java aplikaciju u dokument
- object - Definiše kontejner višestruke namene za učitavanje medija u dokument
- param - Definiše parametre za applet ili object
- map - Definiše mapu
Elementi tabela
Tabele su se ranije koristile za pravljenje strukture same stranice, što je odavno prevaziđeno i nije validno prema standardima HTML-a, ali se tabele još uvek koriste za tabelarni prikaz nekog teksta (lager-liste i sl.).
- table - Definiše blok tabelarnog prikaza, odnosno tabelu
- tbody - Služi za logično grupisanje elemenata koji pripadaju glavnom delu (body) tabele
- thead - Služi za logično grupisanje elemenata koji pripadaju zaglavlju (header) tabele
- th - Definiše ćeliju zaglavlja (header-a) tabele
- tr - Definiše red u okviru tabele
- td - Definiše običnu ćeliju u okviru tabele
- caption - Definiše naslov tabele
- col - Definiše kolonu u okviru tabele
- colgroup - Definiše grupu kolona u okviru tabele
- tfoot - Služi za logično grupisanje elemenata koji pripadaju donjem delu (footer) tabele
Atributi
Tagovi mogu imati atribute, koji im dodeljuju dodatne vrednosti. Atribut se uvek piše u prvom delu, odnosno nakon što je tag otvoren. Atributi su sastavljeni iz dva dela - naziv="vrednost".
Lista nekoliko bitnih atributa:
- id - Jedinstveni identifikator elementa
- class - Dodeljuje elementu jednu ili više podklasa
- title - Definiše naziv elementa
- alt - Služi za definisanje alternativnog teksta (npr. ako se slika ne učita prikaže se alt)
- href - Definiše sa kojim dokumentom je link povezan
- src - Određuje izvor slike, tj. putanju do nje
- style - Definiše umetnute (inline) stilove elementa
HTML nije dovoljan za kreiranje kompletnog web sajta i danas je neraskidivo vezan za CSS.