dwcc_06-4585214

Copyright © Link group

6. HTML i kreiranje dokumenata

U ovoj jedinici ćemo se podsetiti pravila HTML jezika i na koji način možemo kreirati dokuementa u Dremweaver alatu. Većinu pojmova u vezi osnova HTML jezika bi trabalo da poznajete iz kursa Uvod u HTML i CSS, ali nikako ne preskačite ovu jedinicu. HTML HTML (hyper text markup language) ima određenu sintaksu i pravila po kojima se kreira. Sam HTML se bazira na tagovima, u koje postavljamo sadržaj. Tagovi obuhvataju određeni sadržaj i shodno tome eksplicitno se označava početak i kraj jednog taga, dok je sadržaj između. Pogledajmo na primeru kako bi jedan tag izgledao:

Danas je utorak Ovo je p tag, odnosno tag koji koristimo da označimo paragraf teksta. Vidimo da smo pomoću otvorili tag, a pomoću zatvorili. Pravilo je da se tag zatvara na isti način kako je otvoren samo uz dodatak kose crte (slash). Između je tekst koji će biti vidljiv. Ukoliko bismo želeli da dodamo još jedan paragraf posle njega, imali bismo nešto poput sledećeg primera:

Danas je utorak Napolju je divan sunčan dan

Same tagove možemo postavljati u druge tagove. Na primer, prethodna dva paragrafa možemo postaviti unutar jednog div taga.

<div> Danas je utorak Napolju je divan sunčan dan </div>

Div tagove koristimo za grupisanje objekata u celine i radi lakšeg raspoređivanja elemenata vizuelno. U HTML jeziku je veoma važno da vodimo računa o preklapanju tagova. Kao i u matematici sa višestrukim zagradama, tako i ovde, unutrašnji tag mora biti prvo zatvoren, pa onda njegov okružujući tag. Na primer, ovo je deo koda sa ispravno napisanim tagovima:

Danas je utorak Dok sledeći primer nije:

Danas je utorak

Kao što uočavamo, u prvom primeru postoji p tag sa tekstom, a deo teksta je obuhvaćen strong tagom (koji je ekvivalent za bold). U drugom primeru smo načinili grešku jer smo zatvorili p tag, iako je očekivano da se prvo zatvori strong. Kada browser naiđe na ovakav problem, tj. nepravilan kod, pokušava da ga ipak prikaže, ali pretpostavljajući neke detalje i ispravljajući kod koliko može prilikom prikaza. Tada se mogu desiti razne nepredviđene situacije i verovatno različit prikaz u različitim browserima. Takođe, ne smemo zaboraviti da sve tagove koje smo otvorili i zatvorimo. Ukoliko su svi tagovi zatvoreni i nema ukrštanja tagova, onda smo kreirali pravilno strukturiran ili izbalansiran dokument. Postoje i takozvani samozatvarajući tagovi koji nemaju početak i kraj, kao malopre pomenuti tagovi, već odmah počinju i istovremeno se završavaju. Na primer, tag koji kreira line break u tekstu (poput Shift+Enter u Wordu) je , kao u sledećem primeru:

Napolju je divan sunčan dan U HTML-u je bilo dovoljno pisati ove tagove kao ili <img>, dok je u xHTML-u zbog strožih sintaksnih pravila potrebno pisati nešto drugačije: ili <img />. Takođe, HTML tagovi mogu imati određene atribute koji se postavljaju unutar početnog dela tega. Na primer:

<td width="100" height="40">...</td> U ovom primeru vidimo td tag (koji koristimo kao deo tabele) koji sadrži dva atributa - width i height.

<td width="100" height="40">...</td> Ukoliko bismo uklonili ta dva atributa, vidimo da se ovaj tag ne razlikuje od ostalih.

<td>...</td> Struktura HTML dokumenta Svaki HTML dokument počinje i završava se <html> tagom, koji se nekad naziva i koreni tag strane - root. Zatim postoje dve osnovne celine dokumenta, to su <head>, odnosno zaglavlje dokumenta i <body>, u kome se nalazi sav vidljiv sadržaj strane.


slika 6.1 Osnovna struktura HTML dokumenta Kreiranje prve stranice u Dreamweaveru Hajde sada da kreiramo našu prvu stranicu. Ukoliko već niste, kreirajte novi projekat u Dw (vratite se na prethodnu lekciju ako je potrebno podsećanje). Dajte sajtu proizvoljno ime i smestite u prazan root folder. Trebalo bi da vidite nešto slično slici ispod:

slika 6.2 - kreiran novi sajt


Sada možemo kreirati prvu HTML stranicu. Iz padajućeg menija izaberite File > New kako bi dobili New Document dijalog, koji vidimo na slici ispod.

slika 6.3 - New Document dijalog Za sada ćemo ostaviti podešavanja kakva jesu (proverite da li su podešavanja kao na slici 6.3) i izabraćemo Create. Dobijamo novu, praznu HTML stranicu. Ukoliko smo u design režimu rada, stranica deluje potpuno prazno, ali ako prebacimo na code prikaz, videćemo da je Dreamweaver već postavio osnovu strane:

slika 6.4 - Nova, prazna HTML strana kreirana u Dreamweaveru

Kao što vidimo na slici, Dw je kreirao obavezne tagove - <html>, <head> i <body>. Body, u kome smeštamo vidljiv deo stranice je prazan, i shodno tome, ne prikazuje se ništa u design (ili split) režimu rada. U head delu, koji nije direktno vidljiv u browseru, postavljen je meta tag za encoding koji nam je svakako potreban, kao i title tag stranice – naslov koji se prikazuje u tabu browsera. Pored njih, na početku, na prvom redu dokumenta je HTML5 doctype koji je postao default u novijim verzijama Dreamweavera. Svi ovi elementi su standardni na stranicama i zato smo ih dobili u startu, da ne bismo morali ručno da ih unosimo. Ono što treba imati na umu da stranica trenutno nije snimljena. Vidimo da na njenom tabu u document title baru, stoji Untitled-1. Izabraćemo File > Save iz padajućeg menija, kako bismo pozvali klasičan Save dijalog uz određene dodatke, specifične za Dw. Može se uneti željeno ime stranice, ali sada će to biti index.html jer početna stranica svakog sajta mora imati baš naziv index.html. Ostale stranice mogu biti proizvoljno imenovane (samo pratimo pravila oko specijalnih znakova i sl.), ali početna mora biti index.

slika 6.5 - Save dijalog Pre nego što izaberemo Save, moramo obratiti pažnju da stranicu snimimo u okviru root foldera sajta. Kao deo sajta, jasno nam je da stranica mora biti u njegovom root folderu. Ipak, može se desiti da stranicu snimite na desktopu, u root folderu drugog sajta, ili nekom trećem mestu, što će svakako stvoriti velike probleme. Da bismo to predupredili, možemo koristiti jednu veoma korisnu opciju ovde u save dijalogu - Site Root dugme, koje je i označeno na slici iznad. Pomoću njega, pre nego što snimimo,


možemo se vratiti direktno u root folder aktivnog sajta. Tako ćemo biti sigurni da smo stranicu snimili na pravom mestu. Ukoliko smo već u root folderu, na pravom mestu, klik na Site root dugme neće promeniti ništa. Pošto smo izabrali Save opciju, u Files panelu ćemo primetiti da se je pojavio naš novi fajl index.html

slika 6.6 - files panel - definisan sajt i index.html u njemu

Umesto korišćenja New Document dijaloga za kreiranje fajlova, možemo novi HTML fajl kreirati i direktno iz welcome ekrana (kao što smo videli ranije) ili uraditi desni klik unutar praznog polja files panela i iz menija koji se pojavi odabrati New File opciju.

slika 6.7 - kreiranje nove stranice kroz files panel

Ukoliko radimo na taj način, fajl neće biti prikazan, već direktno kreiran i Dw će očekivati da odmah unesemo naziv fajla.


Podsećam, ukoliko kreiramo kroz files panel ili welcome ekran i tako preskačemo New Document dijalog, fajl će biti kreiran po default podešavanjima. New Document dijalog Sada ćemo razjasniti New Document dijalog box koji je prikazan na slici ispod.

slika 6.8 - New Document dijalog

U delu sa leve strane, označen sa A na slici, možemo izabrati da li želimo da kreiramo praznu stranu - Blank Page i to je opcija koju ćemo najčešće koristiti. Pored toga, možemo izabrati Fluid Grid Layout opciju kojom kreiramo osnovu za responsive stranicu, opciju Starter Templates koju koristimo ukoliko radimo sa jQuery Mobile i Site Templates, ukoliko želimo da koristimo sopstveni šablon sajta. Ukoliko smo ostavili blank page, u drugom delu (označen sa B na slici), možemo izabrati koji tip dokumenta želimo da kreiramo. Kao što vidite pojavljuju se razni tipovi fajlova, a nas trenutno zanimaju HTML i CSS stavke. Ukoliko se bavite php ili javascript kodiranjem npr, izabraćete prikladan tip fajla. Kod izbora HTML ili PHP stranica, aktivira se i treći deo (označen sa C na slici) u kome možemo odrediti da li želimo praznu stranicu ili da Dw postavi osnovu (layout) za nas.

Opcija <none> je default i ukoliko nju izaberemo, dobijamo stranicu kao u primeru ranije. Stranicu koja će sadržati samo osnovne tagove i doctype. U verziji CC Dreamweaver osim nje, nudi i dve takozvane starter page opcije: 2 column fixed, right sidebar, header i footer i 3 column fixed, header i footer. Ukoliko njih izaberemo, Dw će kreirati HTML stranicu, u njoj će uneti i sample sadržaj, kreiraće CSS opcije i tako dalje (slika 6.9). Starter stranice nisu uvek praktične, ali mogu biti korisne ako želimo da brzo kreiramo neki jednostavan sajt. Možemo promeniti CSS opise, prilagoditi boje, širine i sl, zameniti tekstove, linkove i sl. i tako dobiti gotov sajt veoma brzo. Osim toga, starter stranice su prepune komentara u kodu i čak i da ih ne koristimo u nekoj realnoj primeni, korisno je proći kroz kod i komentare, kako bismo shvatili kako je i šta kreirano. Ukoliko koristimo ove starter stranice, aktiviraće se i opcija označena sa E na slici. Pošto prilikom kreiranja layouta, Dreamweaver kreira i CSS opise, u ovoj opciji možemo izabrati da li će CSS biti u posebnom fajlu kao eksterni CSS fajl ili u head delu dokumenta. U New document dijalogu, možemo sa novom stranicom povezati i postojeći CSS fajl ukoliko to želimo (opcija označena sa D na slici) tako što izaberemo ikonicu lanca i podesimo eksterni fajl u dijalogu koji sledi. Takođe, možemo podesiti i Doctype, ukoliko ne želimo da bude osnovni podešen (opcija označena sa F na slici).

slika 6.9 - Starter page u Dreamweaveru Document Type Declaration (Doctype) Document Type Declaration, ili skraćeno Doctype, se upisuje na početku HTML dokumenta i postavlja Document Type Definition ili skraćeno DTD.


DTD možemo posmatrati kao gramatiku HTML dokumenta. Na početku deklarišemo koji ćemo DTD, odnosno skup pravila koristiti. Ukoliko se pridržavamo tih pravila i ako je naša stranica usklađena sa njima i nema grešaka u kodu, možemo reći da je naš dokument validan. Validnost dokumenta možemo proveriti na sajtu W3C koji je kreiran sa tom namenom (http://validator.w3.org/). Kada na toj adresi unesemo URL link do sajta ili uploadujemo stranu/deo strane, validator proverava greške u kodu (nezatvorene tagove, nedostajuće atribute i sl.) ali i proverava da li je usklađen sa DTD-om koji smo postavili. W3C Validator možete koristiti kada završiti sajt ili prilikom rada na njemu, ali možete validirati i druge sajtove.

slika 6.10 - W3C validator Kada kreiramo novi dokument u DW, postoji nekoliko mogućih izbora:

• HTML 4.01 Transitional - Ova opciju biramo ukoliko ne želimo da koristimo HTML5, ni xHTML. Koristimo samo ukoliko dorađujemo neki stari sajt koji je kreiran u ovom standardu.

• HTML 4.01 Strict - Slično prethodnoj opciji, samo što su pravila za pisanje dosta stroža nego u transitional varijanti.

• HTML 5 - Omogućuje postavljanje deklaracije za novi HTML5 standard. U verziji CC je ovo default vrednost i treba je koristiti.

• XHTML 1.0 Transitional - Ova opcija omogućava istu fleksibilnost kao HTML 4.01 Transitional sa dodatim striktnijim pravilima XML-a. Najpopularnije opcija i dalje na webu. Većina sajtova je kreirana u njoj iako poloako gubi primat zbog HTML5.

• XHTML 1.0 Strict - Kao i kod HTML-a, strict varijanta xHTML-a donosi stroža pravila pisanja.

• XHTML 1.1 - Novija varijanta xHTML standarda koja nikad nije zaživela u realnoj primeni.

• XHTML Mobile 1.0 - Slično kao prethodna varijanta, samo osmišljena sa mobilnom primenom na umu. Nikad nije zaživela u većoj meri.

Podešavanja kreiranja nove stranice Ukoliko želimo, možemo prilagoditi ranije pomenute podrazumevane vrednosti prilikom kreiranja novih fajlova.


Do tih podešavanja možemo doći kroz New Document dijalog, ukoliko u njemu izaberemo opciju Preferences… ili putem padajućeg menija Edit > Preferences…, a zatim izaberemo New Document grupu.

slika 6.11 - Podešavanja novog dokumenta U ovim podešavanjima nalazimo sledeće:

• Default document - Postavljamo koji će tip dokumenta biti kreiran ukoliko preskačemo New Document dijalog. U startu je HTML i preporučujem da tako i ostavite. Sa druge strane, ukoliko stalno radite u npr php dokumentima, možete shodno tome i postaviti php ili neki drugi.

• Default extension - Podešavamo ekstenziju dokumenta iz prethodne stavke. Što se tiče HTML fajlova možete uneti bilo html, bilo htm.

• Default Document Type (DTD) - Postavljamo default doctype.

• Default encoding - Postavlja default encoding. Preporuka je da se ostavi Unicode (UTF-8) zbog podrške za sve svetske jezike. Menjajte samo ako imate potrebe za time i znate šta radite. Checkbox ispod ove opcije određuje da će svi dokumenti koji nemaju dat encoding biti tretirani po ovom podešavanju.

• Unicode Normalization Form - Opcija kojom možemo izabrati tip Unicode normalizacije. Nema potrebe za izmenama ovog polja. Za više informacija pogledajte: http://www.w3.org/International/questions/qa-html-css-normalization

• Show New Document dialog box on Control+N - Ukoliko je štiklirano, prečica ctrl+n poziva dijalog za kreiranje nove strane. U suprotnom, odmah kreira stranu po default podešavanju.

Pitanje: Dreamweaver CC kao default HTML dokument kreira:

● HTML5 ● xHTML1 ● xHTML1.1 ● xHHL 5

Sažetak HTML (hyper text markup language) ima određenu sintaksu i pravila po kojima se kreira. Svaki HTML dokument počinje i završava se <html> tagom, koji se nekad naziva i koreni tag strane – root. Zatim postoje dve osnovne celine dokumenta, to su <head>, odnosno zaglavlje dokumenta i <body>, u kome se nalazi sav vidljiv sadržaj strane. Novi dokument kreiramo kroz New Document dijalog, a možemo novi HTML fajl kreirati i direktno iz welcome ekrana. Document Type Declaration, ili skraćeno Doctype, se upisuje na početku HTML dokumenta i postavlja gramatiku HTML dokumenta.

dwcc_06-4585214

Documents