Saznajte

Utisci korisnika

Želeo bih da Vam se zahvalim na Vašoj brzoj pošiljci, sertifikatu i novom kursu, koji sam juče preuzeo putem Post-expresa. Još jedanput Vam se zahvaljujem na Vašoj profesionalnosti.…

"Slučajno sam na nekoj diskusiji Infostuda našla vaš link i prosto sam zapanjena, obradovana i neizmerno ponosna što i u SRBIJI možemo da se služimo e-learning opcijom usavršavanja."…

Kompletna lista utisaka

Online učionica

Ostale multimedijalne prezentacije>>>

Testiranje online

Odnosi s javnošću

Koliko znate PR?

Pogledajte još neke od testova

Ukoliko želite da Vas redovno obaveštavamo o novostima sa Link eLearning sajta prijavite se na našu newsletter listu.

Anketa

Kako ocenjujete svoje trenutno znanje engleskog jezika?

početni nivo
srednji nivo
napredni nivo
govorim engleski jezik kao maternji

Arhiva anketa

BAZA ZNANJA

Kurs: --- Adobe Dreamweaver CS5.5

Modul: Kontrola sajtova i kreiranje dokumenata

Autor: Vuk Ninić

Naziv jedinice: HTML i kreiranje dokumenata

Materijali vezani uz ovu lekciju:

- Test html i kreiranje dokumenata
- HTML i kreiranje dokumenata (PDF dokument)

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:

<p>Danas je utorak</p>

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:

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

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

<div>
  <p>Danas je utorak</p>
  <p>Napolju je divan sunčan dan</p>
</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:

<p>Danas je <strong>utorak</strong></p>

Dok sledeći primer nije:

<p>Danas je <strong>utorak</p></strong>

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:

<p>Napolju je divan<br />sunčan dan</p>

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 />. Pošto ćemo u kursu raditi sa xHTML-om, pratićemo ta pravila.

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.

Osnovna struktura HTML dokumenta

Da bismo demistifikovali HTML i pisanje koda, sada ćemo kreirati našu prvu stranicu u notepadu.

Otvorite Notepad (ili TextEdit ako radite na Mac-u) i unesite

<html>
   <body>
       Napolju je divan dan
   </body>
</html>

Snimite na desktopu kao html-strana.html. Obratite pažnju na to da ekstenzija bude .html, a ne kako je po defaultu .txt
Pokrenite taj fajl dvoklikom na njegovu ikonicu i otvoriće se Vaš podrazumevani browser. Prikaz bi trebalo da izgleda kao na sledećoj slici:

Prikaz naše prve strane u browseru

Kao što vidimo, prikazuje se rečenica koju smo uneli dok su sami HTML tagovi nevidljivi korisniku. Sada ćemo dodati još neke detalje. Unesite head tag koji će sadržati title tag, kao i br tag u okviru teksta, kao na primeru:

<html>
   <head>
	<title>Moja prva html strana</title>
   </head>
   <body>
	Napolju je<br />divan dan
   </body>
</html>

Prikaz naše prve strane sa određenim izmenama

Title tag koji se pojavljuje u okviru head taga služi za definisanje naziva (engl. Title) stranice i pojavljuje se u browseru. Br tag (break) koji smo dodali u tekstu je prelomio pomenuti tekst u dva reda.

Sada imamo neko osnovno poznavanje i razumevanje HTML dokumenata. Čak i kada otvorimo neku veoma komplikovanu stranu, možemo je raščlaniti na delove i prostiju strukturu kroz osnovno poznavanje pravila.

Više o samom HTML-u, kao i o osnovama CSS-a možete naći u kursu: Uvod u HTML i CSS.

Kreiranje nove html stranice

Document Type Declaration (Doctype)

Document Type Declaration 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

Kada kreiramo novi dokument u DW, postoji nekoliko mogućih izbora:

None - Nikada nećemo koristiti ovu opciju jer svaka stranica mora imati svoju DOCTYPE deklaraciju.
HTML 4.01 Transitional - Ova opciju biramo ukoliko ne želimo da koristimo xHTML.
HTML 4.01 Strict - Slično prethodnoj opciji, samo što su pravila za pisanje dosta stroža nego u transitional varijanti.
XHTML 1.0 Transitional - Ova opcija omogućava istu fleksibilnost kao HTML 4.01 Transitional sa dodatim striktnijim pravilima XML-a. Preporuka je da se ova opcija uvek koristi, barem dok HTML5 ne postane standard.
XHTML 1.0 Strict - Kao i kod HTML-a, strict varijanta xHTML-a donosi stroža pravila pisanja.
XHTML 1.1 - Ova opcija ne bi trebalo da se koristi na stranicama koje koriste text/html MIME type, što je trenutni standard za web servere.
XHTML Mobile 1.0 - Ovo je podskup XHTML Basic za mobilne uređaje, ali polako postaje izlišan sa pojavom HTML5.
HTML 5 - Omogućuje postavljanje deklaracije za nove HTML5 stranice. Ova opcija se pojavljuje prvi put u CS5.5 verziji, kao i u CS5 sa dodatkom za HTML5. Izvesno je da će postati novi standard u godinama koje dolaze.

Kreiranje dokumenata i njihova svojstva

Novi dokument u DW možemo kreirati tako što izaberemo File > New, ili putem ekrana dobrošlice. Takođe, prečica Ctrl+n poziva istu funkciju. U svakom slučaju, pošto izaberemo opciju za novi dokument sačekaće nas dijalog sa sledeće slike:

Dijalog za kreiranje novog dokumenta

A - U ovom delu možemo birati šta želimo da kreiramo. Zadržaćemo se na opciji Blank Page jer nam omogućava kreiranje nove prazne strane.

B - Ovaj region se menja dinamički u zavisnosti od toga šta smo izabrali u levom meniju, ali kod kreiranja nove prazne strane omogućava izbor više tipova strana. Iako su svi fajlovi koje DW kreira u osnovi tekst, pravilan izbor je veoma važan zbog osnovnih podešavanja i inicijalnog sadržaja strane, jer, kao što ćemo videti, iako kreiramo prazan novi dokument, on nikada nije apsolutno prazan. Izabraćemo za sada HTML, odnosno prvu opciju.

C - U ovoj grupi opcija, koja takođe zavisi od prethodne, nalazi se lista ponuđenih layout-ova koje DW može kreirati za nas, kao i prva opcija koja ne sadrži nikakvu strukturu. Ukoliko izaberemo prvu opciju na nama je da sami dodamo osnove elemente, dok će u slučaju izbora neke druge DW će postaviti osnove za nas. Samo ime opcije nam govori o kakvoj se strukturi radi.

Na primer, 2 column liquid, left sidebar, header and footer opcija će kreirati novi prazan dokument ali sa određenim regionima (centralni deo, sidebar, kao i zaglavlje i dno strane) pritom postavljajući CSS kod. Mi ćemo za sada izabrati <none> jer želimo da sami unesemo sve elemente.

D - U ovom delu možemo videti preview izabranog layouta iz prethodne stavke, kao i opis neposredno ispod.

E - Ova opcija nam nudi izbor doctype podešavanja strane.

F - Ukoliko smo izabrali neku od opcija za kreiranje strane koja iziskuje da DW unese određeni CSS kod u startu, ova opcija će biti aktivna. Tada možemo izabrati da li će taj CSS biti u istom HTML fajlu (Add to Head), da li ćemo kreirati novi CSS fajl (Create New File) ili možda želimo da dodamo u postojeći fajl (Link to Existing File). Kao što ćemo videti kasnije u toku kursa, CSS kod se može nalaziti u istom fajlu zajedno sa HTML-om ili može biti poseban, izdvojen fajl (fajlovi).

G - Ukoliko želimo, možemo u startu povezati postojeće CSS fajlove. Klikom na ikonicu lanca otvaramo dijalog u kome možemo izabrati CSS fajl za povezivanje (X), način povezivanja (Y) i tip CSS-a, odnosno za koji medijum je namenjen (Z).

Povezivanje postojećeg externog CSS fajla

H - Kada podesimo željena podešavanja, izabraćemo Create da kreiramo stranicu, odnosno Cancel da poništimo sve.

I - Ova opcija nam omogućuje da pristupimo default podešavanjima nove stranice. Više o tome u ovoj lekciji nešto niže.

Pošto smo kliknuli na Create dugme, DW je kreirao novu stranicu. Sada je design prikaz prazan (jer smo izabrali blanko HTML bez osnovnog rasporeda), dok se u code prikazu pojavljuje određeni kôd:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Iako možda deluje konfuzno, ovo je potpuno prazna HTML stranica, sa samo unetim osnovnim parametrima. Sada ćemo rasčlaniti delove:

Ovaj deo koda definiše DTD i, kao što možemo videti, radi se o xHTML 1.0 transitional dokumentu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ovo je osnovni, root element HTML strane. To je HTML tag, koji sadrži atribut za XML namespace:

<html xmlns="http://www.w3.org/1999/xhtml">

Zatim sledi head deo u kome je trenutno postavljen meta tag koji nam određuje encoding dokumenta (u ovom slučaju UTF-8), kao i title tag, koji određuje naslov stranice:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

Zatim sledi body tag, koji je sada prazan i u njega ćemo unositi sam sadržaj:

<body>
</body>

I na kraju zatvaramo sam HTML tag, root tag dokumenta:

</html>

Postavljanje karakteristika novog dokumenta

Kao što smo pomenuli ranije u vezi sa kreiranjem novog dokumenta, možemo podesiti određena default podešavanja za nove dokumente. Klikom na preferences u dijalogu novog dokumenta ili izborom iz padajućih menija Edit > Preferences, a zatim New Document grupe, otvaramo pomenuta podešavanja.

New Document kategorija postavlja globalne karakteristike za sve web stranice koje se kreiraju u Dreamweaveru. Postoje sledeće opcije:

Default document - Ova opcija postavlja tip default dokumenta, omogućava izbor tipa dokumenta koji će biti kreiran kada koristimo prečicu sa tastature za novi dokument Ctrl+N. Da bi ovo funkcionisalo, moramo deselektovati opciju na dnu Show New Document dialog box on Control+N.
Default Extensions - Ovo se odnosi samo na HTML dokumenta. Možemo uneti .htm umesto default vrednosti .html, ali nikako ne savetujem da to radite. Ostavićemo .html.
Default Document Type (DTD) - Ova opcija postavlja default DOCTYPE deklaraciju za sve nove web stranice.
Default Encoding - Ova opcija omogućava izbor seta karaktera koji će se koristiti na svakoj stranici. Default podešavanje Dreamweavera je Unicode (UTF-8). Check box ispod ove opcije, ako je omogućen, kazuje Dreamweaveru da postojeće stranice koje nemaju specificiranu šemu karaktera prikaže u gore izabranom setu karaktera. Encoding je veoma bitan zbog naših slova (š,đ,ć...) koja se neće pravilno prikazati. Uvek ćemo postavljati UTF-8 jer podržava sve karaktere, unazad je kompatibilan za ASCII standardom i postao je standard na netu. Takođe, u zvaničnoj preporuci za HTML5 W3C sugeriše njegovu upotrebu¹.
Unicode Normalization Form - Ova opcija je obavezna samo ako je izabran Encoding UTF-8. Trebalo bi da bude podešena na C (Canonical Decomposition, followed by Canonical Composition) i Check boks koji sledi Include Unicode Signature (BOM) bi trebalo da je deselektovan.

Page Properties

Za svaku pojedinačnu HTML stranu možemo definisati osnove podešavanja. Pomoću padajućih menija Modify > Page Properties otvaramo Page Properties koji nam omogućava da podesimo osnovnu font familiju, boju pozadine, margine, stilove linkova i mnoge druge aspekte dizajna strane. Promene koje ovde vršimo tiču se cele strane i samo nje (ne utiču na druge strane sajta).

Postoji nekoliko kategorija koje se nalaze sa leve strane dijaloga. Klikom na njih, otvaramo njihova podešavanja.

Appearance (CSS), Link (CSS) i Headings (CSS) kategorije postavljaju formatiranje pomoću CSS opisa koje DW kreira za nas. Appearance (HTML) kategorija postavlja formatiranje pomoću HTML atributa i savetujem da to izbegavate. HTML bi trebalo koristiti za strukturu, a CSS za stilizaciju. Title/Encoding postavlja parametre u HTML-u, ali su to opcije koje ne možemo podešavati CSS-om i tiču se osnove strane.

Appearance (CSS) kategorija

Page Font – Izbor fonta, odnosno font familije koja će biti upotrebljena. Možemo uneti jedan font ili više njih. Prikazuje se prvi dostupan.
Size – Definiše veličinu teksta. Ukoliko se odlučimo za brojčanu vrednost potrebno je da iz padajućeg menija izaberemo tip jedinice.
Text Color - Postavlja boju teksta. Klikom na kvadrat pozivamo vizuelni izbor boja.
Background Color – Postavlja boju pozadine. Klikom na kvadrat pozivamo vizuelni izbor boja.
Background Image – Postavlja sliku za pozadinu. Možemo ručno uneti putanju do slike ili klikom na browse locirati sliku kroz dijalog.
Repeat – Definiše kako se pozadinska slika iz prethodne stavke prikazuje na strani:
- No-repeat – prikazuje sliku samo jednom.
- Repeat – ponavlja sliku horizontalno i vertikalno u beskonačnost, odnosno onoliko puta koliko prostora ima.
- Repeat x – ponavlja sliku horizontalno.
- Repeat y – ponavlja sliku vertikalno.
Left, Right, Top i Bottom Margin – Postavlja margine cele stranice.

Appearance (CSS) kategorija Page Properties dijaloga

Appearance (HTML) kategorija

Podešavanja u ovoj kategoriji su ostatak od ranijih vremena, kada se sva stilizacija vršila kroz HTML. Funkcije su date informativno jer se ne preporučuje njihovo korišćenje.

Background Image – Postavlja sliku za pozadinu. Slično ranije pomenutom podešavanju, ali ne putem CSS-a, već kroz HTML atribut. Slika se ponavlja u obe ose.
Background - Postavlja boju pozadine.
Text - Postavlja boju teksta.
Link – Postavlja boju linkova.
Visited Links – Postavlja boju posećenih, korišćenih linkova.
Active Links – Postavlja boju aktivnih linkova.
Left i top margina – Postavlja margine levo i gore.
Margin width i height – Postavlja širinu i visinu margina. Praktično se sukobljava sa prethodnim.

Appearance (HTML) kategorija Page Properties dijaloga

Links (CSS) kategorija

Link Font – Definiše font familiju za linkove na strani.
Size – Definiše veličinu linkova (teksta linkova)
Link Color – Postavlja boju linkova.
Visited Links - Postavlja boju posećenih, korišćenih linkova.
Rollover Links – Postavlja boju linkova kada se mišem pređe preko njih.
Active Links – Postavlja boju aktivnih linkova.
Underline Style – Podešavanja linije ispod teksta linka. Po default podešavanjima svi linkovi imaju donju liniju (underline). Ukoliko su linkovi definisani kroz eksterni CSS npr, stajaće “don’t change” kao default. Podešavanja mogu biti:
- Always underline – Linija će biti vidljiva uvek.
- Never underline – Linija neće biti vidljiva nikad.
- Show underline only on rollover – Linija će se prikazati samo kad se miše pređe preko linka, u suprotnom se ne vidi.
- Hide underline on rollover – Linija će nestati kad se miše pređe preko linka, u suprotnom se uvek vidi.

O ovim detaljima ćemo se vratiti u nekoj od narednih lekcija.

Links (CSS) kategorija Page Properties dijaloga

Headings (CSS) kategorija

Heading Font - Definiše font familiju za naslove na strani. Default opcija ostavlja isti font kao na strani.
Heading 1 do Heading 6 – Definiše veličinu teksta i njihove boje za svih šest mogućih nivoa naslova.

Headings (CSS) kategorija Page Properties dijaloga

Title/Encoding kategorija

Ova kategorija podešava opcije o kojima smo govorili ranije u ovoj lekciji. Možemo naknadno promeniti Document Type (DTD), Encoding i slično. Pored toga, prva opcija je Title u kojoj definišemo naslov tekuće strane.

Title/Encoding kategorija Page Properties dijaloga

Tracing image kategorija

Tracing Image – Ovom funkcijom možemo postaviti sliku u pozadini kako bi nam pomogla u precrtavanju dizajna strane sa nje. Ne pojavljuje se kada se strana prikaže u browseru.
Transparency – Određuje vidljivost slike iz prethodne stavke. Od kompletno nevidljive, providne, do kompletno vidljive.

Tracing image kategorija Page Properties dijaloga

¹ http://www.w3.org/TR/html5/semantics.html#charset

Smatrate da je ova lekcija korisna? Preporučite je.

Broj preporuka:1