Suradnik:Tamala

HTML je programski jezik koji se koristi za kreiranje dokumenata na World Wide Web-u. HTML se koristi za stvaranje hipertekstualnih datoteka (datoteka koje sadržavaju linkove).

HTML (HyperText Markup Language) je veoma jednostavan jezik čije osnove svatko može savladati za par dana, a kasnije je sve stvar prakse. Ovaj priručnik pokriva osnove HTML-a koje su dovoljne da se naprave sasvim zadovoljavajuće Web stranice. Kad savladamo osnove HTML-a možemo prijeći na proučavanje nekog naprednijeg tečaja HTML-a ili upoznavanje JavaScripta koji će doprinijeti da naša stranica malo živne. Kada "surfamo" Internetom i naiđemo na neku zanimljivu stranicu , a ne znamo kako je napravljena, njen izvorni HTML kod možemo pogledati ako u liniji menija odaberemo: View -> Source (ili View -> Page Source u Netscape Navigatoru). Ovo je najbolji način da naučimo neke nove stvari.

Sve što nam je potrebno da bi napravili jednu Web stranice praktično već imamo na računalu. To je prije svega jedan najobičniji tekst editor kao što je Notepad. Notepad potražimo u Start meniju pod Programs->Accessories. Slijedeća stvar koja nam je neophodna je Web Browser. I njega sigurno imamo jer čitamo ove tekstove. Bilo da imamo Internet Explorer ili Nescape Navigator poželjno je da nabavimo i onaj drugi browser kako bi izgled naših Web stranica provjerili u oba. To je neophodno iz tog razloga što različiti browseri različito tumače neke HTML tagove tako da su obično potrebne neke male korekcije kako bi naše Web stranice imale zadovoljavajući izgled u oba browsera. Na kraju bilo bi poželjno da imamo i neki program za obradu grafike (Corel Draw i Corel Photo Paint) da bi mogli kreirati i pregledati grafičke datoteke koje ćemo ugraditi u naše Web stranice. Inače na Internetu možemo pronaći mnogo Web grafike koju možemo slobodno da download-ujemo (usnimimo na hard disk na našem računalu) i ugrađujemo u naše Web stranice.

HTML komande se pišu u vidu tzv. tag - ova. Jedan tag je u komanda koja govori našem browseru što i kako napraviti tj. na koji način prikazati sadržaj naših stranice. HTML tagovi su "case insensitive" tj. svejedno je da li ih pišemo malim ili velikim slovima. Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr: <html>. Ovaj tag se nalazi na početku svakog HTML dokumenta i on govori našem browseru da je datoteka koju je upravo počeo učitavati baš HTML dokument i da kao takvog treba i prikazati. Na kraj HTML dokumenta se stavlja završni HTML tag:</html>. Ovaj tag govori browseru da je to kraj našeg HTML dokumenta. Većina tagova ima i početni i završni tag. Završni tag se dobiva dodavanjem znaka "/" i označava mjesto na kojem prestaje djelovanje početnog taga. Postoje i tagovi kod kojih ne moramo stavljati završni tag kao sto je recimo tag
koji služi za prelazak u novi red (o ovom tagu ćemo govoriti kasnije u dijelu o formatiranju teksta).

Svaki HTML dokument se sastoji od dva dijela: zaglavlja (engl. head) i tijela (engl. body). Zaglavlje se odvaja tagovima <head> i </head>, a tijelo dokumenta tagovima: <body> i </body>. Sve ono što napišemo u zaglavlju dokumenta neće se prikazati u prozoru browsera već obično služi samo da pruži neke informacije o našoj stranici.

Tako ćemo u okviru našeg zaglavlja svakako staviti tagove: <title> i </title> između kojih ćemo staviti naslov naše stranice. To nije naslov koji će se pojaviti u tijelu naše stranice već onaj naslov koji se pojavljuje u naslovnoj liniji browsera. Pogledajmo naslovnu liniju našeg browsera - ispred imena browsera vidjećemo da piše: "Uvod u HTML". To je zato što smo u zaglavlju ovog dokumenta napisli:

S druge strane sve ono što napišemo između tagova <body> i </body> predstavljat će tijelo našeg dokumenta i pojavit će se kao sadržaj naše web stranice u prozoru browsera (kao što je tekst koji upravo čitamo).

Dakle, svaki HTML dokument mora imati slijedeću strukturu:

<html> <head> <title>Ovdje stavimo naziv naše Web stranice</title> </head> <body> Ovdje unesimo sve ono što želimo da se vidi u stranici </body> </html>

Sad je vrijeme da napravimo prvu web stranicu. Otvorimo novi dokument u Notepad-u i upišimo gornju strukturu HTML dokumenta u kojem ćemo staviti naslov po želji (npr. naše osobno ime), a između body tagova stavimo neki tekst (npr. "Moj prva Web stranica"):

<html> <head> <title>Milan</title> </head> <body>

Moj prva Web stranica

</body> </html>

Sad snimimo ovaj dokument. U File - Save as dijalog prozoru prvo odaberemo folder u kojem ćemo usnimiti naš Web stranicu. U polje File name upišimo ime naše prve stranice, a kao ekstenziju otkucajmo .htm ili .html (npr. "prva.htm"). U padajućoj listi Save as type odaberimo All Files. Stisnite OK i naš prvi Home page je spreman da ga otvorimo u našem web browseru. Ako smo sve ispravno napravili u naslovnici našeg web browsera bi trebalo stajati: Milan, a u prozoru browsera bi trebali vidjeti tekst: Moja prva Web stranica U prethodnom primjeru dobiti smo tekst ispisan crnim slovima na bijeloj pozadini. Međutim, kao što vrlo dobro znamo, na Web stranicama se pozadina i tekst mogu pojaviti u čitavom spektru boja. Da bi to postigli potrebno je dodati još neka objašnjenja u okviru našeg <body> taga. Dodatna objašnjenja HTML taga nazivaju se atributi. Atributi se unose u početni tag i služe da detaljnije opišu dati tag. Na primjer, ako želimo promijeniti boju pozadine u žutu tada ćemo unutar <body> taga dodati:

ili:

što daje isti krajnji efekat.

Dakle, vidimo da se boja pozadine određuje bgcolor atributom koji je dio <body> taga. Poslije svakog atributa se stavlja znak jednakosti koji služi za dodijelu vrijednosti datom atributu, a vrijednost atributa se obvezno stavlja između znakova navoda. Što se tiče označavanja boja, iz gornjeg primjera vidimo da se boje mogu definirati na dva načina: ili preko naziva boje (npr."yellow"), ili preko heksadecimalne RGB vrijednosti ispred koje obvezno treba staviti simbol # (npr. #ffff00). Možda će browser prikazati željenu boju i bez ovog simbola ali ga za svaki slučaj stavimo jer ga neki browseri striktno zahtijevaju.

Kod kreiranja Web stranica možemo se koristiti tablicom boja sa njihovim nazivima i heksadecimalnim kodom. Boje su poredane po abecednom redu, a kad nam se neka boja dopadne kopirajmo (copy) njen kod (rrggbb vrijednost) na našu Web stranicu.

Boja teksta se odredjuje text atributom. Ako želimo da naša stranica ima zelena slova na žutoj pozadini stavićemo:

Ono što HTML čini izuzetnim, i što je uvjetovalo njegovu veliku popularnost jesu tzv. linkovi. Linkovi u HTML dokumentu su one riječi koje se pojavljuju u drugoj boji i podvučene su radi lakšeg uočavanja, a omogućavaju vam da se jednim klikom miša nađemo na nekom sasvim drugom sajtu koji se može nalaziti i na drugom kraju svijeta. Kad dovedemo pokazivač miša iznad linka desiće se dvije stvari: pokazivač miša će se pretvoriti u ruku sa ispruženim prstom (što simbolično govori da tu možete kliknuti), a sam link će promijeniti boju (obično u crvenu, ako drugačije ne definiramo). Osim toga boja linkova koje smo već posjetili biće drugačija od ostalih linkova, kako bi imali orijentaciju što smo već vidjeli, a što nam još ostaje da posjetimo. Boje linkova se mogu definirati pomoću tri atributa: link, vlink i alink. Na primjer, ako želimo da na našim Web stranicama linkovi budu plavi, posjećeni linkovi ljubičasti, a aktivni linkovi crveni stavimo:

Sve ove atribute možemo i izostaviti ako želimo da browser koristi vrijednosti koje su definirane po default-u. U Internet Exploreru pozadina je po default-u bijela, tekst crn, linkovi plavi, posjećeni linkovi maslinasto-zeleni, a aktivni linkovi crveni. Ako nam se sviđa ova shema boja, nemojmo ništa mijenjati. Međutim, šta ako nismo zadovoljni jednobojnom pozadinom, vec želimo imati bogato ukrašenu pozadinu kakve često srećemo na Web stranicama. U tom slučaju moramo staviti kao pozadinu neku sliku u JPEG ili GIF formatu. Ovo su obično male sličice koje se brzo učitavaju i "tajluju" (redaju poput pločica , eng. tile). Ove pozadine (eng. background) možemo pronaći u raznim kolekcijama WEB grafike širom Interneta, a možemo i "usnimiti" pozadinu sa Web stranica koja nam se dopadne. To se postiže na slijedeći način: kada na nekoj stranici ugledamo pozadinu koja nam se dopada i poželite je sačuvati na svom hard disku, kliknemo desnom tipkom miša na bilo koji dio pozadine te stranice i iz priručnog menija koji se pojavi odaberemo opciju Save Background As. Odaberemo folder u kojem ćemo čuvati odabrane pozadine i dajmo toj pozadini odgovarajuće ime (npr. pozadina1.jpg ili pozadina2.gif)

Kada ste odabrali pozadinu koju želimo staviti na našu Web stranicu, prvi korak je da taj fajl prekopiramo u folder u kom se nalazi i naša prezentacija. Slika i HTML dokument ne moraju obvezno biti u istom folderu ali tako je jednostavnije.) Sad još samo preostaje da u našem HTML dokumentu tj. njegovom body tagu upišemo odgovarajuci atribut. Atribut se u ovom slučaju zove background i bilo bi poželjno da ga ne pomiješate sa atributom bgcolor koji definira samo boju pozadine. Na primjjer, ako želimo da kao pozadinu stavite sliku "pozadina1.jpg" tada će body tag izgledati ovako:

Kao što vidimo ubacili smo i background i bgcolor tag, i to ne slučajno. O čemu se radi? Pa mnogi ljudi sa sporijim modemima prilikom surfovanja Internetom isključuju u svojim browserima automatsko učitavanje grafike. To znaci da se neće učitati ni pozadina koju ste vi dodijelili toj stranici. Problem nastaje u slučajevima kada smo tekstu dodijelili neku svijetlu (ili bijelu boju), a browser ne učita pozadinu, već i pozadina ostane bijela. Blijeda (ili bijela) slova na bijeloj pozadini se jednostavno neće vidjeti. Zbog toga uvek dodijelimo i neku bojuj pozadini tako da u gore opisanoj situaciji slova i dalje budu čitljiva.