Predavanje 3 - Mrezni informacijski servisi II -HTML



1. Uvod

HTML (eng. HyperText Markup Language) opisuje sadrzaj i strukturu dokumenata na WWW, ali ne i njegov vizualni oblik na strani korisnika. Sastoji se od:



Programi preglednici kao npr. web preglednik tumace (parsiraju) dokument te ga na taj nacin prikazuju korisniku.

Dakle, HTML je obican tekst (ASCII) dokument koji sadrzi tagove koji objasnjavaju web pregledniku kako da prikaze dani dokument: ukljucujuci tekst, slike, zvuk itd. Sam vizualni oblik moze biti razlicit ovisno o web pregledniku, a i korisnik i sam moze podesiti krajnji izgled dokumenta

HTML je formalna preporuka W3C (World Wide Web Consortium) za prikaz dokumenata u web pregledniku i svi vodeci web preglednici podrzavaju ovaj standard. Trenutno je HTML 4.0 zadnja specifikacija.



2. SGML



HTML temelji se na opcenitijem jeziku SGML (eng. Standard Generalized Markup Language).
SGML:



3. Struktura HTML dokumenta



Tag ili oznaka se specificira na ovaj nacin:


<NEKI_TAG> ...sadrzaj izmedju... </NEKI_TAG>

Vecina tagova dolazi u parovima, ali postoje i izuzetci kao sto cemo vidjeti nize.

Npr. ovaj tekst je masno odstampan specificira se sa

<b> ovaj tekst je masno odstampan </b>



Svaki HTML dokument sastoji se od dva dijela - zaglavlja i tijela(sadrzaj) dokumeta:



Primjer izvornog koda jednostavnog dokumenta:
<HTML>
<HEAD> 
<TITLE> Jednostavni dokument </TITLE>
</HEAD>
<BODY> 
Ovo je sadrzaj dokumenta.
</BODY>
</HTML> 


Dokument mozete vidjeti ovdje.



Za izradu HTML dokumenata treba nam:

  • bilo koji tekst editor npr. notepad, wordpad na Windowsima ili vi, xemacs, dtpad na UNIX-u. U tekts editor upisujemo HTML dokument (program) kao sto bi upisivali kod C programa
  • za izradu C programa nam jos treba program prevodioc koji prevodi izvorni kod upisan u tekst editor i kreira izvrsnu datoteku. Kod HTML koda nema postupka prevodjenja na strojni jezik i nema izvrsne datoteke. U oovm slucaju web preglednik tumaci (interpretira) sadrzaj HTML dokumenta i prikazuje je ga. Dakle treba nam web preglednik kao npr. Internet Explorer, Mozilla, ili Netscape. Kod testiranja web stranice koristite refresh button!



    Napomenimo da na ovaj nacin kreirani HTML dokumenti ne vide prazna mjesta tj. mjesta kreirana koristeci tipke "TAB" ili "ENTER"

    Danas postoji veci broj profesionalnih alata za izradu web stranica. Mi takve necemo proucavati.

    Postoji veci broj tagova koji specificiraju razne elemente u dokumentu. Za potpunu listu pogledajte reference za HTML iz literature za kolegij na sluzbenoj stranici kolegija. Mi cemo na predavanju i vjezbama objasniti samo dio. Ostale mozete sami prouciti bez teskoca.



    Detalji oko Strukture HTML dokumenta -ovdje cemo precizno napisati sve elemente HTML dokumenta (sada kada imamo ideju sto je HTML dokument):

    1. Elementi i tagovi. Elementi su strukture koje opisuju dijelove HTML dokumenta. Preciznije element HTML dokumenta ima tri dijela:
      • pocetni tag npr. <P> pocetak odlomka
      • sadrzaj -koji se opet moze sastojati od elemenata (rekurzivna definicija)
      • zavrsni tag npr. </P> kraj odlomka

      Napomene:

      • kapitalizacija kod pisanja tagova se ignorira npr. sva tri zapisa predstavljaju isti tag <hEAD>, <HeAd> ili <head>
      • elementi se ne smiju preklapati tj. ako jedan element pocinje unutar drugog mora i zavrsavati u njemu
      • neki tagovi poput onih koji odredjuju listu ne zahtjevaju zavrsni tag:
        <ul>
        <li> Prvi element liste
        <li> Drugi element liste
        </ul>
        
        Ovaj kod izgleda ovako:
        • Prvi element liste
        • Drugi element liste
      • neki tagovi nemaju zavrsni tag jer nemaju sadrzaja npr. <br> koji oznacava kraj linije ili <img> koji oznacava sliku

    2. Atributi. Upisuju se u pocetne tagove elemenata i specificiraju razna svojstva tog elementa. Opca forma jest
      ime_atributra="vrijednost_atributa"
      
      Navodnici mogu biti jednostruki ili dvostruki, a mogu se ispustiti u nekim slucajevima kao npr. ako se vrijednost atributa sastoji od velikih slova A-Z, malih slova a-z, brojki 0-9 te crte "-", tocke "." i jos nekih osnovnih karaktera. Imena atributa ne ovisi o kapitalizaciji, ali vrijednoti mogu!

      Primjeri:

      • za tag <img>, src specificira datoteku u kojoj se nalazi slika, a alt specificira tekst koji ce biti ispisan ako se slika ne moze loadati:
        <img src="slika.jpg" alt="Slika nije dostupna" >
        


      • za tag <body>, bgcolor specificira boju pozadine dokumenta:
        <body bgcolor=#ccccff >
        
        Boja se specificira na uobicajen nacin koristeci RGB shemu tj. omjer tri osnove boje svaka sa vrijednoscu od 0-255 u dekadskom sustavu ili od 0-ff u heksadecimalnom
        • R=red tj. crvena
        • G=green tj. zelena
        • B=blue tj. plava
        U nasem gornjem primjeru:
        R=cc
        G=cc
        B=ff
        
        Neka imena boja su predefinirana. Za detalje vidite HTML specifikacije.
    3. Specijalni karakteri. Kakrakteri pout < ili > imaju posebno znacenje i koriste se u definiciji tagova. U obicnom tekstu pisemo:

      • &lt; za <
      • &gt; za >
      • &amp; za &
      • &quot; za dvostruke navodnike " ako ih trebamo unutar atributa okruzenog dvostrukim navodnicima
      • mnogi jezici kao npr. hrvatski jezik zahtijevaju karaktere koji se ne nalaze u osnovnom skupu ASCII znakova (reprezentiranih jednim byte-om) za zapis imena, vec trebaju prosireni (2 byte-a) UNICODE skup znakova -tada se na karaktere moze referirati njihovim numerickom vrijednoscu izrazenom u decimalnom ili heksadecimalnom sustavu -web preglednici obicno preferiraju decimalni zapis!

        Potpune liste UNICODE karaktera u heksadecimalnom sustavu mozete naci ovdje http://www.unicode.org/charts/.

        Primjeri:

        Ć =&#262;
        ć =&#263;
        Č =&#268;
        č =&#269;
        Đ =&#272;
        đ =&#273;
        Ž =&#381;
        ž =&#382;
        Š =&#352;
        š =&#353;
        
      Obicno se tocka zarez ; moze ispustiti.
    4. Komentari. Komentari pocinju sa <--!, a za zavrsavaju sa -->

      <--!
      Ovo je komentar
      -->