CENTAR ZA RAZVOJ I PRIMENU NAUKE, TEHNOLOGIJE I INFORMATIKE NOVI SAD

Osnove HTML-a i CSS-aSeminar za profesore informatike osnovne i srednjih kola Izrada prezentacija - Web prezentacije kao podrka nastavim i kolskim aktivnostima.Predava: Jovan Sandi

2008.

CNTI

Osnove HTML-a i CSS-aUVOD U HTML ................................................................... 2 HYPER JE SUPER! ............................................................ 2 TA TO BEE HTML? ........................................................... 2 ELEMENTI HTML-A ............................................................ 3 STRUKTURA HTML DOKUMENTA ............................................ 3 ATRIBUTI ELEMENATA HTML-A.............................................. 4 VAA PRVA PRAVA INTERNET STRANICA .................................... 5 O ADRESAMA .................................................................... 6 ADRESE I ZATO SU ONE BITNE... ............................................. 6 HYPERLINK (HIPER VEZA) ...................................................... 6 APSOLUTNI I RELATIVNI HIPRELINKOVI ...................................... 6 NASTAVAK SAGE O HTML-U............................................... 7 STRUKTURA HTML DOKUMENTA ............................................ 8 OBRADA TEKSTA ................................................................. 9 I DALJE TRAJE SAGA O HTML-U ........................................ 11 PRE NASTAVKA... .............................................................. 11 LISTE ............................................................................. 11 RAD SA SLIKAMA.... ........................................................... 12 LINKOVI .......................................................................... 13 DA, HTML SAGA NIJE GOTOVA......................................... 14 MAPIRANJE NA SLIKAMA... .................................................. 14 DODATNI ATRIBUTI BODY TAGA ............................................ 15 SPECIJALNI KARAKTERI ........................................................ 16 META TAGOVI .................................................................. 16 TABELE ........................................................................... 17 UPLOAD FAJLOVA... ......................................................... 18 UPLOAD FAJLOVA NA SERVER (FTP) ....................................... 18 IZBOR FTP SOFTVERA ......................................................... 18 POTREBNI FTP PARAMETRI .................................................. 19 UPOZNAJMO I TESTIRAJMO JEDAN FTP PROGRAM ..................... 19 CSS CASCADING STYLE SHEETS ...................................... 21 KASKADNI STILOVI ............................................................. 21 CSS SINTAKSA.................................................................. 22 CILJNI ELEMENTI ............................................................... 22 GDE MOE DA SE NALAZI CSS KOD ........................................ 23 REDOSLED SLAGANJA (PRIORITET) I INTERPRETACIJE STILOVA ........ 23 SVOJSTVA I VREDNOSTI ....................................................... 24 PONOVIMO NAUENO I NAUIMO NETO NOVO O CSS-U ............ 25 PONOVIMO SINTAKSU ........................................................ 26 VREDNOSTI ATRIBUTA STILOVA ............................................. 28 ESTE UPOTREBA STILOVA ................................................... 28 CSS BOX MODEL .............................................................. 29 CSS ZAKLJUNO ............................................................... 32

|2

Uvod u HTMLHYPER JE SUPER!Da biste bili uspean stvaralac Internet stranica morate dobro savladati Hyper Text Markup Language tj. HTML. HTML je jednostavan jezik za opis strukture i opis sadraja Internet dokumenata koji se prikazuju u Internet itaima (browser-ima). Postoje mnogi programi koji pojednostavljuju kreiranje HTML Internet strana (Macromedia Dreamweaver i Microsoft Front Page, recimo) ali potpuna kontrola nad izradom Internet dokumenta podrazumeva mnoge akcije i korekcije na najniem nivou, odnosno intervencije u samom HTML kodu. Zato je neophodno da savladate osnove HTML-a, ako elite da se upustite u avanturu izrade Internet stranica. Znanje HTML-a nije prednost, ve uslov da bi bili uspean kreator Internet prezentacija. U ovoj lekciji pronai ete samo osnovne i uvodne informacije o HTML-u, a u sledeim lekcijama i mnogo vie, o ovom jednostavnom a istovremeno monom alatu za izradu Internet stranica. Kad budemo familijarni sa HTML-om, upoznaemo se i sa osnovama kaskadnih stilova, monom alatkom za opis izgleda sadraja Internet dokumenata (Cascading Style Sheets) i sa gore pomenutim alatom Macromedia Dreamweaver-om.

ta to bee HTML?Internet, kao svetsku mrea raunara, moete koristiti na vie naina. Jedan od najpopularnijih naina upotrebe je pregledanje Internet stranica, proces popularno nazvan surfovanje Internetom. Svaka Internet stranica je hipertekstualan (Hypertext) dokumenat. Hipertekst se sastoji od meusobno povezanih delova teksta (ili drugih objekata) tako da italac (korisnik) interaktivno odreuje redosled itanja (pregledanja). To praktino znai da dokumente na Internetu ne morate da itate sekvencijalno kao knjigu, ve se moete etati kroz dokumenat, ili dokumente po elji. Moda bi bila najbolja analogija sa knjigom koja sadri puno fusnota, gde italac kad naie na nepoznat termin oznaen fusnotom, on pree na prouavanje fusnote na dnu stranice ili u na kraju knjige (endnote, index pojmova), i po zavretku se vraa na mesto itanja gde se nalazi nepoznat termin, pa dalje nastavlja itanje redom, tj. sekvencijalno. Kad su u pitanju Internet dokumenti, sekvencijalno itanje uopte nije neophodno. Korisnik se kree kroz Internet dokumente koristei veze (linkove), pomou kojih skae na razliite delove dokumenta ili

posebne dokumente, u skladu sa svojim interesovanjima i potrebama. Kretanje kroz takve dokumente | 3 naziva se navigacija a ne itanje. Veze (eng. Links) se nazivaju jo i hipervezama (Hyperlinks). Ove veze ugraujemo u Internet dokumenat, pogaate, uz pomo HTML-a. Meusobno povezani dokumenti na Internet-u ne sadre samo tekstove ve i razliite sadraje kao to su slike, zvuci, animacije, video materijale, pa se Internet moe nazvati i hipermedijalnim sistemom. Sve ove medije i njihov meusoban odnos opisujemo i ugraujemo u Internet stranicu, opet uz pomo HTML-a. Dakle, osnovni jezik za kreiranje strukture i sadraja, kao i formatiranje sadraja stranica na Internetu jeste HTML. Pria o nastanku HTML-a stara je koliko i sam Internet. Sa razvojem Interneta razvijao se i HTML, a jedan od najveih krivaca za to je firma Netscape, koja je na samom poetku na svoju ruku uvodila nestandardna proirenja u HTML jezik. Naravno, ni ostali proizvoai browser-a nisu puno zaostajali za Netscape-om, pa je za taj period razvoja Interneta vezana i pria o takmienju proizvoaa browser-a u uvoenju nestandardnih proirenja u iste, poznata pod imenom Rat Browser-a. Da bi se izbegli dalji ratovi meu gigantima softverske industrije, proirenjima, standardima i novim verzijama HTML-a bavi se posebno zvanino telo zvano W3C komitet. Dakle, HTML je iv jezik koji se razvija! HTML nije programski jezik u onom smislu u kom su to C++ ili Visual Basic, jer ne sadri komande, tipove podataka, operatore, promenljive i sline stvari. HTML je vie jezik za opis Internet dokumenata. Pomou njega moete menjati boju i veliinu teksta, boju pozadine, umetnuti sliku i zvuk na Internet stranicu, ali ne moete izraunati koliko je 2+2. U svojoj sutini HTML dokumenat je obian tekstualni dokumenat sa ekstenzijom .htm ili .html, tako da se moe kreirati i u bilo kom od tekst editora, kao to su Notepad, WordPad, MS Word. Iako je izrada HTML stranica vrlo jednostavna, postoje pravila koja morate znati i potovati ih pri izradi HTML dokumenata. Svaki HTML dokument sastoji se od deklaracija, elemenata i atributa elemenata. O deklaracijama rei emo vie u nekoj od sledeih lekcija, a sada emo se posvetiti elementima i atributima.

Elementi HTML-aElementima formiramo strukturu i opisujemo izgled delova sadraja HTML dokumenata. Elementi mogu da se nalaze bilo gde u okviru HTML dokumenta. Svaki elemenat sastoji se iz tri dela: poetni tag, sadraj i zavrni tag. Tag je specijalna sekvenca znakova takozvani marker (Markup) koji je ograen znacima . Zavrni tag razlikujemo od poetnog po znaku / posle znaka i , osim sadraja taga . Sadraj taga je naslov HTML dokumenta koji e se pojaviti u naslovnoj liniji web browser-a.

BODY

Sve ono to vidimo u prozoru browser-a, tj. sadraj stranice i HTML elementi za formatiranje (opis) tog sadraja, nalazi se u telu dokumenta koje uokviruje tag. U HTML dokumentu sme da postoji samo jedan par tagova . Ovaj element specificira glavni sadraj dokumenta. Poetni tag ima atribute koji omoguavaju da se specificiraju karakteristike koje va\e na nivou dokumenta (boja pozadine ili slika, boja teksta, boja poseenih i neposeenih linkova, itd.)Komentar u HTML kodu

|4

Komentari u HTML kodu se navode u sledeem obliku:

Komentar poinje sekvencom znakova (izmeu ova dva znaka moe doi i razmak). Sve to se nalazi izmeu ove dve sekvence znakova Web browser e ignorisati. Ispod se nalazi jedan primer pravilno struktuiranog html dokumenta. [struktura.html-code] Naslov Tekst dokumenta.

U HTML-u ne postoji razlika izmeu malih i velikih slova za elemente u tagovima tako npr. , , i predstavljaju iste elemente. Preporuujemo da elemente HTML-a piete malim slovima. Takoe sve suvine znakove razmaka (space), tabulator i znake za novi red u Internet dokumentu Internet ita ignorie, ali njihovo postojanje utie na veliinu Internet dokumenata. Stoga preporuujemo da ih izbegavate, jer popularnost i poseenost Vaih stranica, osim izgleda i sadraja zavisi u velikoj meri i od brzine uitavanja istih. Neki elementi doputaju da se izuzme zavrni tag, na primer elemenat br. Elemenat br slui za prelom reda u HTML-u (kao kad pritisnete Shift+ENTER u programu za obradu teksta). Elemenat br ne zahteva zavrni tag u obliku . Jo jedan primer HTML elementa koji dozvoljava da se izuzme zavrni tag je img elemenat, namenjen ukljuivanju slika na Internet stranicu.

Atributi elemenata HTML-aElementi mogu da sadre atribute kojima se opisuju specifini parametri elementa kao to su duina, visina, lokacija objekta sa koje se elemenat uitava i slino. Atributi se uvek ukljuuju u poetni tag, nikako u zavrni. Atribut se sastoji iz kljua i njemu dodeljene vrednosti i to se zapisuje na sledei nain: Naziv_Atributa="Vrednost_Atributa". Vrednost atributa ukoliko postoji je ograniena dvostrukim ili jednostrukim navodnicima (uobiajeno je da se navode dvostruki kako bi u okviru njih mogli postaviti i jednostruke ako se ukae potreba za tim). Na primer, img elemenat poseduje src atribut koji obezbeuje lokaciju slike sa koje se slika uitava i atribut alt koji obezbeuje alternativni tekst koji e biti prikazan na mestu predvienom za prikazivanje slike ukoliko uitavanje slike na HTML stranicu ne uspe iz bilo kog razloga. Sintaksa img elementa je sledea:.

Na primer:

gde je "Slike\" lokacija slike, a SlikaLeviBaner.jpg je ime slike koja se uitava.

Poto je pitanje ispravnog navoenja lokacije objekata koje ukljuujete u HTML stranicu od sutinske | 5 vanosti za njeno ispravno funkcionisanje, rei emo neto vie o adresiranju. ta praktino znai izraz "\Slike\"? Znai da se fascikla Slike koja sadri sliku SlikaLeviBaner.jpg nalazi na istoj lokaciji (u istoj fascikli, na istom disku...) na kojoj se nalazi i HTML stranica u ijem kodu se nalazi gore pomenuti img tag. Pomenuti nain adresiranja zove se relativno adresiranje. Postoji i apsolutno adresiranje, odnosno navoenje pune adrese od korenskog direktorijuma, root-a. Recimo da se i fascikla Slike i HTML stranica koja sadri gornji img tag nalaze na C disku ili na sajtu cnti.info. Apsolutne adrese u src atributu imgtag-a bi u tom sluaju izgledale ovako

odnosno

Prednost relativnog adresiranja je u tome to Vi bez bojazni moete premetati HTML stranicu i fasciklu Slike gde god elite, sve e funkcionisati sjajno dok god su stranica i fascikla Slike na istoj lokaciji. Ako koristite apsolutne adrese, tada pri svakom premetanju morate menjati direktno u HTML kodu sve adrese. To je u redu ako uitavate samo jednu sliku na stranicu, ali ta ako ih je vie? Iako programi kao Dreamweaver, to emo videti kasnije, imaju rutinu koja e pokuati da Vas spase greke ako premetate fajlove koji su linkovani (slike u naem primeru) i da zameni stare nevaee linkove novima, greke su uvek mogue. Povedite rauna o tome gde smetate slike i sline objekte koje ukljuujete u HTML kod, jer se vrlo lako moe desiti da se isti objekti ne prikau ispravno na HTML stranici ako ste neto zabrljali sa adresama. O adresama bie opet rei u nekom od sledeih tekstova, kad budemo govorili o postavljanju Internet prezentacije na Web server.

Vaa prva prava Internet stranicaPre nego preemo na izradu same HTML stranice, potrebno je da napomenemo da je svrha ovog primera da ukae na jednostavnost izrade stranica uz pomo HTML-a. Radiemo u lokalu, na Vaem raunaru tako da emo koristiti apsolutne adrese u ovom primeru. Napravimo nekoliko fascikli u koje emo smestiti stranicu i sve objekte koju emo ugraditi u nju. Na C disku napravite novu fasciklu i dajte joj ime Radna. U fascikli Radna napravite novu fasciklu Slike. Pronaite jednu lepu sliku na Vaem disku i iskopirajte je u fasciklu Slike, pa je zatim preimenujte u SlikaLeviBaner. U naem primeru slika je tipa jpg, ali Vi ne morate slediti na primer, moete iskoristiti sliku bilo kog tipa, recimo png ili gif . Naravno, tada morate i svuda gde se u HTML kodu pojavljuje ime SlikaLeviBaner.jpg zameniti ga sa SlikaLeviBaner.png ili SlikaLeviBaner.gif, u zavisnosti od tipa slike koju ste iskopirali. Vreme je da konano napravimo Vau prvu pravu Internet stranicu. Svi programeri i informatiari sigurno su u ivotu nebrojeno puta napravili aplikaciju Zdravo svete poinjui da ue neki programski jezik, pa zato bismo mi bili izuzetak? Dakle, napraviemo Internet stranicu na kojoj pie 'Zdravo HTML svete!'. Otvorite novi Notepad dokumenat i ukucajte u njemu: [zdravosvete.html-code] Moja prva Internet stranica Zdravo HTML svete!

Pri snimanju dajte ime dokumentu, recimo zdravosvete.html, i smestite ga u fasciklu Radna. Pokrenite ovu stranicu dvoklikom na ikonicu dokumenta zdravosvete.html. Uoite da ova stranica ima naslov Moja prva Internet stranica zahvaljujui tagu title koji se smeta u okviru head taga.

Kao to je ve jednom napomenuto body tag sadri atribute za kontrolu i format prikaza koji se odnose na | 6 telo dokumenta. Jedan od njih je bgcolor - pomou koga se navodimo boju pozadine. Boju zadajete kao heksadecimalan broj prema RGB (RedGreenBlue - CrvenaZelenaPlava) kolornoj emi, kojoj prethodi znak #. Prva dva heksadecimalna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu (npr. Crvena boja je #FF0000, Bela #FFFFFF, crna #000000,...).

O adresamaAdrese i zato su one bitne...Adrese su od velike vanosti za ispravno funkcionisanje Web-a. Ako imate neispravnu adresu, da li ete stii na eljeno odredite? Verovatno ne. Zato emo adresama na samom poetku obratiti punu panju. Napominjemo jo jednom da problemi sa adresama ine 80% problema sa kojima ete se susretati u svom radu sa Web-om. Pretpostavljamo da kao nastavnici informatike posedujete odreena znanja o adresama.

Hyperlink (Hiper veza)Neformalna definicija Hyperlink-a: hyperlink je referenca ili navigacioni elemenat u dokumentu ka drugoj sekciji istog ili drugog dokumenta koji moe biti na istom ili drugom domenu. esto hyperlink skraujemo na link. Hypertext (u znaenju vie od teksta) je oblik teksta koji egzistira na Web-u koji je funkcionalno bogatiji od obinog tekstualnog dokumenta jer omoguava korisniku da istrauje druge Hiper tekstove, odnosno Web stranice povezanih sa prvom stranicom specifinim reima ili slikama. Veza izmeu prve stranice i drugih se ostvaruje upravo hiperlinkovima definisanim na specifinim reima, slikama,... Hiperlink nije nita drugo do adresa zapisana u odreenom obliku. Kada kreiramo hiperlink, odredite ove adrese je zapisano u konkretnom formatu, koji se jo skraeno naziva URL (Uniform Resource Locator). URL sadri u sebi adresu web servera (lista poddomena sve do internet domena najvieg nivoa), putanju do stranice (fajla) i sam naziv fajla (web stranice). URL takoe identifikuje protokol koji upravlja datim tipom resursa (fajlova), kao to su HTTP ili FTP. Na primer, posmatrajmo adresu http://www.cnti.info/forumi/phpBBInf/Index.php http:// je oznaka Hyper Text Transfer Protocol-a www.cnti.info je adresa servera, www je poddomen domena cnti, a oba su poddomeni domena info /forumi/phpBBInf/ je putanja do fajla (web stranice) Index.php je ime fajla (web stranice)

Apsolutni i relativni hiprelinkoviHiperlinkove moemo razvrstati na relativne i apsolutne. Apsolutni hiperlinkovi (URL-ovi) sadre potpune adrese, ukljuujui tip protokola, naziv web servera, putanju do fajla i naziv fajla. Relativnom URL-u nedostaje jedan ili vie delova potpune adrese. Nedostajui delovi adrese se formiraju u odnosu na tekuu stranicu na kojoj se nalazi sam URL. Na primer, ukoliko nedostaju tip protokola i web server, web ita e iskoristiti, protokol i naziv domena sa trenutne stranice. http://www.cnti.info/forumi/phpBBInf/index.php je apsolutna adresa /forumi/phpBBInf/index.php je primer relativne adresa u odnosu na neku tekuu stranicu Uobiajena je praksa da se unutar stranica na Web-u koriste relativni URL-ovi koji sadre samo deliminu putanju i naziv fajla. Koncentriimo se samo na adrese. Uzmimo da postoji sledea hijerarhija fascikli na naem serveru www.cnti.info, odnosno u korenskom direktorijumu www.

Recimo da u fascikli Docs postoji dokumenat Index.htm. Recimo da u fascikli jpg postoji slika logo.jpg. Ako se obraate apsolutnom adresom slici logo.jpg ona glasi ovako http://www.cnti.info/Primer/Slike/jpg/logo.jpg . Ovakvom adresom moemo se obratiti dokumentu

logo.jpg sa bilo koje stranice na Web-u. Ako se obraate dokumentu Index.htm koji se nalazi u fascikli Docs apsolutnom adresom ona e glasiti ovako http://www.cnti.info/Primer/Docs/index.htm . Dakle, kad koristite apsolutne adrese one uvek navode punu putanju od korenske fascikle do ciljnog fajla. U sluaju Web-a korenska fascikla se zamenjuje prvo oznakom protokola http:// a zatim i imenom web servera/domenom www.cnti.info i na nju se dodaje putanja do fajla sa imenom fajla na kraju. Kada apsolutno adresiranje nije dobro? Ako premestite sajt na novi server svuda u svim dokumentima treba promeniti prvi deo (domenski deo) adrese. Na primer ako selite www.cnti.co.yu na adresu www.cnti.info onda je neophodno svuda u apsolutnim linkovima na svim stranicama morate zameniti ove dve vrednosti. Ovo se relativno lako radi sa programima poput dreamweaver-a, ali ne dajte se zavarati u pitanju je posao koji nije naivan i vrlo lako se moe pogreiti. Druga potencijalno problematina osobina asolutnih adresa je njihova duina koja raste sa uslonjavanjem hijerarhije i to je adresa dua lake je pogreiti odnosno tee je baratati njome. Ako elimo da referenciramo sliku logo.jpg na stranici index.htm to moemo da uradimo referenciranjem apsolutne i relativne adrese. Videli smo da apsolutna adresa u sebe ukljuuje punu putanju do fajla http://www.cnti.info/Primer/Slike/jpg/logo.jpg. Na bilo kojem fajlu u okviru cnti.info domena pa i na celom Web-u da upotrebite u HTML kodu ovu adresu slika logo.jpg bie ispravno referencirana. Ukoliko fajlove sajta premestimo na neki drugi server, recimo www.cnti.co.rs gornji link nee raditi sve dok ga ne zamenimo ispravnim (http://www.cnti.co.rs/Primer/Slike/jpg/logo.jpg).Kako se pravi relativna adresa?

|7

Probleme apsolutnih adresa zaobilazimo upotrebom relativnih adresa. Relativna adresa se pravi tako to navodimo putanju od tekueg fajla sa kojeg referenciramo do prvog zajednikog pretka sa fajlom na koji se referenciramo, a zatim navodimo putanju od zajednikog pretka do fajla na koji se referenciramo. U naem primeru, da bi referencirali sa Index.htm dokumenat logo.jpg ispravna relativna adresa bi bila sledea ../Slike/jpg/logo.jpg. Podsetimo da je u fascikli Docs dokumenat Index.htm, a u fascikli jpg slika logo.jpg. Dakle, sekvenca znakova ../ ima znaenje nivo vie, i ve na tom nivou u naem primeru smo stigli do prvog zajednikog pretka naa dva fajla (fascikla Primer): onog koji referencira (Index.htm) i onog na koji se referencira (logo.jpg). Zamislite da se fiziki kreete kroz hijerarhiju: izlazimo iz fascikle Docs i nalazimo se u fascikli Primer. Odatle prosto putujemo do dokumenta logo.jpg kroz fasciklu Slike i fasciklu jpg. Prednost relativnog adresiranja je u tome to moete premetati fasciklu Primer sa njenim sadrajem koliko god hoete, gornji relativni link e ispravno raditi dokle god se ne narui postojea hijerarhija. Napominjemo ovde da ak i prosto preimenovanje fascikle jpg naruava konzistentnost svih adresa koje se referenciraju na sadraj fascikle jpg pre njenog preimenovanja. Jednostavno reeno, nemojte menjati imena fascikli nakon to ste se linkovali na njihov sadraj. Ovo pravilo vai iz apsolutne i za relativne adrese ravnopravno. Ovde postoji i izuzetak, kad je u pitanju domen, sve kombinacije su dozvoljene. Na primer, www.cnti.info i www.cnti.INFO i www.CNTI.info su iste adrese. Uoite, ponovo napominjemo, da u nastavku putanje nakon domena nije svejedno da li su mala ili velika slova. Da bi adresa bila ispravna moraju se identino navesti imena fascikli u putanji do odredinog fajla. U tom smislu adrese ../Slike/jpg/logo.jpg ../Slike/Jpg/logo.jpg nikako nisu iste, i na to treba obratiti panju od samog starta. Ovakve greke su jako teko uoljive, sa adresama treba baratati oprezno.

Nastavak sage o HTML-uPodsetimo se i proirimo svoja znanja: HTML -je skraeno od Hyper Text Markup Language. HTML dokument je obina tekstualna datoteka sa tekstom i tagovima. HTML je case insensitive, ne pravi

se razlika izmeu malih i velikih slova u HTML elementima (BODY = Body = body). Preporuka je da | 8 koristimo mala slova. Sadraj dokumenta opisujemo tagovima, odn tagove koristimo da definiemo izgled dokumenta. Svaki tag ima otvarajui tag: . Veina ih ima i zatvarajui tag: . Oni tagovi koji nemaju zatvarajui elementa zovu se prazni tagovi. Prazan tag izgleda ovako: a sree se i u obliku . Potonji zapis je praktiniji. Da rezimiramo, tag je specijalni tekst tkz. "markup"-marker koji je ograen sa "". A zavrni tag ukljuuje i znak "/" posle znaka "