OSNOVE HTML-a
I DEO
Šta je HTML?
HyperText Markup Language ili skraćeno HTML
je jezik koji koristimo za izradu web stranica (website). Važno je
napomenuti da HTML nije programski jezik, već prosti tekstualni fajl
koji oznakama (tagovima) govori našim Internet
pregledačima (web browser-ima) kako da prikažu dokument. Samim tim, da
bi naučili i koristili HTML ne morate biti programer. Svaki HTML
dokument mora imati .htm ili .html ekstenziju.
Evo primera kako izgleda jedan najprostiji HTML document
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 | <title>Osnovni HTML dokument</title> |
Alati za izradu i pregled HTML dokumenta
Pošto je HTML običan tekstualni fajl, za njegovu izradu je dovoljan običan tekst editor koji
dolazi uz operativni sistem (Notepad uz Windows, TextEdit uz MacOS).
Iako tekst editori kao Notepad i TextEdit “završavaju posao”, oni su
ograničeni, tj. nemaju mogućnosti kao neki napredniji programi koji su
namenjeni za tu svrhu.
Pored tekst editora potreban vam je Internet pregledač (browser). Kao i tekst editor, browser takodje dolazi uz operativni sistem. Na Windows operativnom sistemu to je Microsoft Internet Explorer dok je na Macintosh-u to Apple Safari.
I ovde takođe imate mogućnost izbora između različitih programa pa evo
liste nekoliko popularnih browsera. Svi browseri su besplatni i slobodni
za preuzimanje.
HTML tagovi
Došli smo do važnog dela ovog tutorijala, a to su tagovi. Tagovi su ključne reči u HTML dokumentu i označavaju se zagradama “<” i “>”. Svaki tag mora početi sa <...> i završiti se sa </...>. U ovakvoj formi vam je sigurno nejasno o čemu se radi pa ću uzeti neki od tagova, naslov dokumenta npr.
Dakle, svaki tag počinje sa <tag> i završava se sa </tag>.
Tagovi su „case insensitive“, što znači da je nevažno da li ih pišete
velikim ili malim slovima. Dobra praksa je da tagove pišete malim
slovima jer većina web dizajnera, ako ne i svi koriste mala slova.
HTML elementi
Tagovi zajedno sa sadržajem čine HTML element. Dakle, sve od početnog taga pa do završenog taga je HTML element. Uzmimo tag paragrafa npr.
1 | <p>Ovo je tekst paragrafa</p> |
Postoje i tzv. prazni elementi, tj. elementi koji nemaju sadržaj i mogu se zatvoriti već u početnom tagu. Na primer, neki od praznih elemenata su: <br/>, <hr/>, <img/> i mnogi drugi.
HTML atributi
Atributi se mogu definisati unutar početnog taga koji će
predstavljati neke dodatne informacije za sadržaj unutar taga. Najčešće
se atribut definiše kao ime=”vrednost”. Na sledećem primeru ću definisati klasu za paragraf tag.
1 | <p class=”paragraf”>Neki tekst</p> |
Ne mora da vas buni trenutno šta je klasa i čemu ona služi, ovde je
fokus na atribut. Kao što rekoh, atribut najčeće dolazi u obliku ime=”vrednost”. U našem slučaju ime atributa je class dok je vrednost atributa paragraf. Takođe, elementi mogu imati i više definisanih atributa.
Struktura HTML dokumenta
Minimalna struktura HTML dokumenta obuhvata sledeće:
- <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
- <html></html>
- <head></head>
- <title></title>
- <body></body>
Na DOCTYPE-u se neću mnogo zadržavati. DOCTYPE
je deklaracija koja definiše u kojoj verziji je dokument napisan. Ne
treba da vas buni šta sve ovde piše, ali ako želite da saznate više,
posetite http://www.w3schools.com/tags/tag_doctype.asp
Svaki HTML dokument mora početi <html> i završiti se </html>.
Takođe, unutar HTML mora postojati dva dela: zaglavlje (head) i telo
(body) dokumenta. Zaglavlje služi za pružanje nekih informacija o
dokumentu i neće biti prikazano u browser-u, dok sve što se nalazi u
telu dokumenta, biće prikazano u web browser-u. Takodje, u zaglavlju
mora postojati naslov dokumenta (title).
Sada ću na primeru pokazati kako se pravi prosta HTML stranica i kako možete videti izvorni kôd (source code) bilo kog sajta. Za potrebe ovog primera koristiću Notepad++ i Mozilla Firefox.
- Otvorite Notepad i ukucajte sledeće:
Napomena
Pre nego što nastavim dalje sa kôdom, hteo bih da napomenem da
praktikujete da zatvarate tagove odmah po otvaranju, u slučaju da
zaboravite kasnije da zatvorite. U nekim programima se tagovi automatski
zatvaraju (Aptana), ali neki to ne podržavaju.
- Unutar <html> </html> ukucajte sledeće:
3 | <title>Pocetna strana</title> |
Ovim smo napravili prostu web stranicu. Sada sačuvajte fajl kako bi mogli da ga pregledamo. Idite na File > Save As… i za ime stavite index.html.
- Pokrenite neki od browser-a i otvorite fajl koji ste napravili. Idite na File > Open File… i pronadjite vaš fajl.
Kao što možete primetiti, sadržaj <title></title> taga se prikazuje u samom vrhu browser-a i pokazuje naziv stranice.
Sve što se nalazi između <body></body> taga biće prikazano u browseru:
Ukoliko odete na View > Page Source (skraćenica CTRL + U) videćete kôd koji smo prethodno uneli u fajl. To bi trebalo da izgleda ovako:
Ovim su prikazane neke najosnovnije stvari koje morate da savladate
ako želite da nastavite sa učenjem HTML jezika a kasnije i pravljenjem
web stranica.
Нема коментара:
Постави коментар