Škola Web programiranja: HTML i XHTML – 3.nastavak

NASLOV Jelena

U prethodnom broju obrađen je glavni dio HTML-a. Stoga u ovom broju pričamo o naprednijim opcijama, a i o XHTML-u, koji nam logično slijedi nakon HTML-a, a prije CSS-a koji će biti tema budućih nekoliko nastavaka.

HTML Doctype-ovi

Već na samo početku rekli smo da struktura HTML stranice mora biti sljedeća:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Međutim, da bi bili sigurni da će svaki browser pravilno prikazati vašu stranicu potrebno je da prije HTML taga upišete Doctype deklaraciju (DTD).

DTD daje informaciju browseru u kojoj verziji ste pisali vašu web stranu.

HTML verzija koju smo obrađivali je 4.01. Postoji i HTML 5, međutim samo mali dio njegovih naprednijih opcije u odnosu na HTML 4.01 je podržan od strane postojećih browser-a, pa nisam smatrala sada značajnim pisati o nečemu što ne možete odmah iskoristiti i uživati u rezultatima.

Vratimo se na DTD. Postoje tri deklaracije:

HTML 4.01 Strict

Deklariše sve HTML elemente i atribute osim nekih zastarelih i osim frejmova. Deklaracija izgleda ovako:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“
http://www.w3.org/TR/html4/strict.dtd“&gt;

HTML 4.01 Transitional

Deklariše sve HTML elemente i atribute izuzev frejmova.

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“
http://www.w3.org/TR/html4/loose.dtd“&gt;

Preporuka je korišćenje baš ove deklaracije (ukoliko radite u Dreamweaver-u ona vam se automatski i upisuje u praznu HTML stranicu, doduše za XHTML 1.0, ali o tome kasnije), jer su frejmovi nepraktični za korišćenje i neće biti podržani u budućim verzijama HTML-a.

HTML 4.01 Frameset

Deklariše sve HTML elemente, pa i frejmove.

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Frameset//EN“
http://www.w3.org/TR/html4/frameset.dtd“&gt;

Stilovi

O stilovima je već bilo riječi, ali malo da to proširimo. Postoje tri načina za unos stilova:

1. Vanjski, kada pozivamo neki drugi fajl u kome su opisani stilovi. Ovo je najbolji način, a koristićemo ga sa css fajlovima. HTML ga poziva tagom <link> koji smještamo u HEAD blok.

<link rel=“stylesheet“ type=“text/css“ href=“mojstil.css“ />

2. Unutar HTML bloka našeg fajla možemo ispisati stilove (u CSS-u) unutar tagova

<style type=“text/css“>…..</style>.

3. I unutar samih tagova na način o kome smo već pisali u prvom broju.

Npr.

<BODY style=“background-image:url(slika.jpg); background-repeat:no-repeat“>

HEAD blok

Da konačno vidimo koji se sve tagovi mogu naći u HEAD dijelu. Neke smo pominjali već.

1. <title></title> već pominjani naslov koji će se prikazati u naslovnoj liniji browser-a.

2. <base … /> određuje adresu za sve linkove na stranici. Nije često u upotrebi.

<base href=“mojastrana.html/slike“ />

3. <link … /> povezuje našu stranicu sa spoljnjim. Najčešće se baš koristi za povezivanje sa CSS fajlovima što smo maloprije pokazali.

4. <style></style> isto pominjan maloprije, služi za pisanje CSS koda za sve elemente unutar našeg fajla.

5. <meta></meta> Metapodaci su dodatni podaci o stranici koji nece biti prikazani, ali su jako korisni. Mogu da opisuju stranicu, sadrže ključne riječi, autora HTML stranice, preusmjeravaju na drugu stranicu, ponovno učitavaju stranicu nakon nekog vremena….

Neki pretraživači će koristiti opis i ključne riječi vaše stranice za njeno indeksiranje.

Primjer

Opis:

<meta name=“description“ content=“Prozor je elektronski časopis koji je pokrenut u okviru Microsoft projekta Partners in Learning“ />

Ključne riječi:

<meta name=“keywords“ content=“Crnogorski,Online,Casopis,Prozor,Partners in learning“ />

Ukoliko želimo da se pri otvaranju naše stranice , kroz par sekundi izvrši preusmjeravanje na neku drugu stranicu (u našem primjeru 5 sekundi) , to možemo uraditi ponovo pomoću metatag-a na sljedeći način:

<meta http-equiv=“Refresh“ content=“5;url= https://pilprozor.wordpress.com&#8220; />

Na sličan način možemo zadati da se naš web sajt ponovno učitava svakih 5 minuta.

<meta http-equiv=“Refresh“ content=“300;url= http://www.mojsajt.com&#8220; />

6. <script></script> služe najčešće za pisanje JavaScript-ova unutar fajla. Javascript je skriptni jezik za razvoj klijent-server Internet aplikacija. Javascript se uključuje u sadržaj HTML dokumenta i omogućava unapređenje HTML strana sa interesantnim efektima. U primjeru ćemo na stranici prije ostalog sadržaja ispisati današnji datum:

<script type=“text/javascript“>

document.write(„<p>“ + Date() + „</p>“);

</script>

7. <noscript> </noscript> služi kao alternativa ukoliko browser ne podržava skript koji je prethodno ispisan.

Npr.

<script type=“text/javascript“>

document.write(„<p>“ + Date() + „</p>“);

</script>

<noscript>Vas browser ne podrzava skript</noscript>

HTML entiteti

Neki karakteri su u HTML rezervisani, pa se za ispis takvih koriste entitetska imena ili brojevi.

Primjer su znakovi za manje „<“ i veće „>“ koje browser može da zamijeni sa tagovima, pa ih stoga zapisujemo pomoću entitetskih imena &lt; i &gt;, odnosno entitetskih brojeva < i >

Uopšteno, entitetska imena su oblika &entitetsko_ime;, a entiteksi brojevi oblika &#entitetski_broj;

Entitetska imena se lakše pamte, ali ih pojedini browseri ne prepoznaju, pa je sigurnija upotreba entitetskih brojeva.

Česta upotreba entitetskog imena je kod upisivanja praznog mjesta (blank, space). Ukoliko u html kodu želite da imate povezano više space-ova, koliko god puta ih ukucali, browser će ih tumačiti kao da ste kucali samo jedan. Stoga, umjesto kucanja space-ova, upisujemo entitetsko ime &nbsp; (non-breaking space).

Listu najčešćih entitetskih imena pogledajte ovdje, zajedno sa zamjenama za naša slova, ukoliko ih browser pogrešno tumači:

tabela za prosli broj

Ovim završavamo priču o HTML-u.

Ipak, ovo nije kraj priče o web programiranju za ovaj broj, već ćemo u nastavku da se upoznamo sa XHML-om.

XHTML

XHTML predstavlja čistiju i strožiju verziju HTML-a. Naime, mi smo pravila XHTML-a već sva obradili obrađujući redom elemente HTML-a, ali HTML dozvoljava i da se odstupa od pravila, a prikaz web stranice će biti isti. XHTML koji će uskoro postati standard, ne toleriše greške. O kojim se to najčešćim greškama radi vidjećemo u nastavku.

1. XHTML elementi moraju biti pravilno ugniježdeni

Ovo smo već spominjali i u prvom broju.

<b><i></b></i>    preklopljeni tagovi…. loše
<b><i></i></b>    ugnežđeni tagovi….
dobro

HTML toleriše i kad se napišu preklopljeni tagovi, a XHTML ne, znači trebamo se navikavati da pišemo samo ugniježdene.

2. XHTML elementi moraju uvijek biti zatvoreni

Ovo nam nije nikakva novina, tako smo i do sad govorili, jedino HTML toleriše ako nekad ne zatvorimo listu <li> ili paragraf <p> ili … Nekad to primjetimo, jer prikaz stranice bude drugačiji od onog što smo željeli, a nekada i ne. Uglavnom, XHTML ovo ne toleriše.

3. I prazni elementi moraju uvijek biti zatvoreni

Misli se na elemente poput <br /> , <hr />, <img />, …

Pa i kad smo njih obrađivali upravo smo ih prikazivali zatvorenim kao što su i gore napisani. Međutim i da smo pisali <br>, <hr> i <img>, HTML bi to „progutao“ bez problema, a XHTML neće.

5. Imena XHTML tagova i atributa uvijek se moraju pisati malim slovima!!!!

Znači, kad smo govorili da je osnovna struktura za HTML:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Prema pravilima XHTML-a ovo bi bilo pogrešno i trebalo bi izgledati:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

U HTML-u je bilo svejedno da li nešto pišemo velikim ili malim slovima, u XHTML-u nije. Tu nam se lako prilagoditi, odsad sve pišimo malim slovima.

6. Vrijednosti atributa uvijek moraju biti unutar navodnika

Tako smo i dosad radili, ali HTML možda ne bi pogrešno radio i da smo pisali bez navodnika.

Primjer:

<table border="1"> ... pravilno
<table border=1> ... nepravilno

7. Zabranjeno je minimizovanje atributa

Misli se na atribute u formama poput checked, selected, …

Uvijek ih moramo pisati na način: checked=“checked“, selected=“selected“, … , uostalom tako smo ih i do sad u ovoj školi web programiranja pisali.

<select name="predmeti">
    <option value="m">Matematika</option>
    <option value="e">Engleski jezik</option>
    <option value="b">Biologija</option>
    <option value="f" selected="selected">Filozofija</option>
  </select> ... pravilno
<select name="predmeti">
    <option value="m">Matematika</option>
    <option value="e">Engleski jezik</option>
    <option value="b">Biologija</option>
    <option value="f" selected>Filozofija</option>
  </select> ... nepravilno

8. Obavezna Doctype deklaracija

Postoje tri Doctype deklaracije, sa istim značenjima kao i kod HTML-a, samo što se umjesto HTML 4.01, u deklaracijama upisuje XHTML 1.0.

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“&gt;

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Frameset//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“&gt;

Struktura XHTML fajla

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Da biste provjerili da li je vaš, ili neki drugi, sajt urađen bez greške po XHTML standardu, možete to provjeriti OVDJE. Unesite web adresu sajta i prikazaće vam se sve eventualne greške u njegovom kodu.

Sada znamo i XHTML. Ustvari je jednak HTML-u, samo se svih pravila moramo držati, nijedna greška nam neće biti tolerisana.

Od sljedećeg broja krećemo sa definisanjem izgleda web stranica uz pomoć CSS-a.

Ovaj unos je objavljen pod Sedmi broj i označen sa , . Zabeležite stalnu vezu.

2 reagovanja na Škola Web programiranja: HTML i XHTML – 3.nastavak

  1. Povratni ping: Sedmi broj | Prozor

  2. Povratni ping: Izašao novi broj časopisa PROZOR | Rankov blog

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s