- OSNOVE -

Tehnologije za izradu Web stranica − HTML − CSS − JavaScript − PHP − ASP − MySQL − Adobe FLASH − AJAX

Šta je to HTML? − HTML je standardizovan jezik koji se koristi na Web-u. Koristi se za opisivanje formata Web stranice i njenih elemenata. − HTML jezik ne sadrži podatke, ved definiše način na koji se podaci prikazuju na Web stranicama.

− HTML je matični jezik Web pretraživača. − Razvijen je 1990. godine od strane naučnika Cern-a, pod vođstvom Tim Berners-Lee.

Primer: Google stranica

Izgled Google stranice u HTML jeziku

Alati za izradu Web stranica Grafički orijentisani HTML editori koji omogudavaju korisnicima kreiranje Web stranica bez potrebe poznavanja HTML –a i drugih Web-jezika:

• Microsoft – FrontPage – Exspression Web

• Macromedia – HomeSite – DreamWeaver

• Adobe – PageMill

• Open source – Quanta Plus – Mozilla Composer –…

HTML – START Alati koji su vam potrebni za izradu Web sajta u HTML jeziku: − Neki od Web browser-a (Microsoft Opera, Mozilla Firefox ...)

Internet Explorer,

− Jednostavan Text Editor (Notepad - iz Windows-a ili Notepad ++ koga možete preuzeti sa Interneta i instalirati na vaš računar).

Notepad - Start Meni/All Programs/Accessories ...

Notepad ++ možete preuzeti sa Interneta i instalirati na vaš računar (http://notepad-plus-plus.org/download).

HTML osnove - 1 • HTML (HyperText Markup Language). • HTML datoteka se sastoji od tagova i tekstova. • Tagovi (oznake): − definišu strukturu i izgled dokumenta − otvarajudi tag: − zatvarajudi tag: − postoje i prazni tagovi: (pravilnije: ) XHTML (Extensible HyperText Mark-up Language) struktuiraniji način pisanja HTML.

HTML osnove - 2 Osim imena HTML elementa, tag čini i određeni broj atributa, čije su vrednosti uokvirene navodnicima:

Ime

Atribut

Vrednost atributa

Ime taga govori browser-u šta da uradi, a atribut kako da to uradi. Pri prikazivanju stranica browser-i se oslanjaju na informacije date u tagovima. Razlika između malih i velikih slova ne postoji: (title = Title = tiTLe)

Struktura HTML dokumenta - 1 Osnovna struktura HTML dokumenta: − html (dokument-stranica) − head (glava-zaglavlje) − body (telo)

head (glava-zaglavlje)

body (telo)

html (dokument-stranica)

Struktura HTML dokumenta - 2 Ispravno formatiran HTML dokument ograničen je sa tagovima:

- početak html dokumenta - kraj html dokumenta Unutar ove oznake se nalazi kompletan sadržaj strane, uključujudi i eventualne skriptove.

Struktura HTML dokumenta - 3 Zaglavlje stranice:

- početak zaglavlja - kraj zaglavlja Sadrži informacije koje su specifične za tu stranu.

Tag gde se upisuje naslov strane koji de biti prikazan u Web pretraživaču:

- početak naslova - kraj naslova

Struktura HTML dokumenta - 4 Telo stranice:

- početak tela - kraj tela U telu html stranice smešta se HMTL kod koji zapravo predstavlja "pravi" sadržaj strane.

Struktura HTML dokumenta -5 Minimalni HTML dokument:











Struktura HTML dokumenta - 6 Minimalni HTML dokument: Primer 1:

Ja volim Informatiku!

Primer 1: HTML dokument napišite u Notepad-u. Sačuvajte ga u nekom folderu, sa ekstenzijom .htm.

Otvorite prethodno sačuvan dokument u nekom Web browser-u:

Primer 1: Izgled stranice

Primer 2:

Naslov Tekst dokumenta.

Primer 2: Izgled stranice

Komentar Oblik:

Komentar počinje sekvencom znakova .

Obrada teksta - 1 Pasusi teksta se navode između tagova:

Pasus...



Svi tagovi počinju u novom redu. Iza završnog taga, prelazi se u novi red, sa dodatnim praznim prostorom između.

Ukoliko treba ubaciti praznu liniju bez dodavanja praznog prostora, koristi se tag
.

Obrada teksta - 2 U okviru početnog taga može se navesti atribut align, koji određuje horizontalno poravnanje paragrafa; vrednost ovog atributa može biti jedna od slededih: left, center, right i justify. Ukoliko se navede samo početni tag , podrazumeva se da je slededi element u novom redu.

Primer 3: Pasusi Pasusi Ovo je prvi pasus. Ovo je drugi pasus. Ovo je treci pasus sa praznim redom.
Ovo je pasus koji je desno poravnat. Ovo je pasus koji je centriran.

Primer 3: Izgled stranice

Obrada teksta -3 Naslovi se mogu istadi korišdenjem elemenata h1, h2, h3, h4, h5 i h6. Tag daje najvedu veličinu slova, a najmanju. Svaki od ovih elemenata počinje u novom redu, a browser-i dodaju još malo praznog mesta pre zaglavlja. U okviru zaglavlja se može navesti atribut align, koji određuje horizontalno poravnanje zaglavlja. Vrednost ovog atributa može biti jedna od slededih: left, center, right.

Primer 4: Tekst Veličina slova Ovo je veličina slova u zaglavlju H1 Ovo je veličina slova u zaglavlju H2 Ovo je veličina slova u zaglavlju H3 Ovo je veličina slova u zaglavlju H4 Ovo je veličina slova u zaglavlju H5 Ovo je veličina slova u zaglavlju H6

Primer 4: Izgled stranice

Obrada teksta - 4 Za grubo razdvajanje teksta linijom koristi se prazan tag . On dodaje jednu horizontalnu liniju ispred i iza koje postoji prazan red. Mogude je podesiti visinu korišdenjem atributa size=n (n je broj piksela), širinu pomodu atributa width=n i poravnanje pomodu atributa align (mogude vrednosti su left, right i center).

Primer 5: Linije Linije



Primer 5: Izgled stranice

Obrada teksta - 5 Tag služi za vede blokove citata. Obično se predstavlja kao blok teksta uvučen u odnosu na ostatak. Tag se koristi za krade citate i uglavnom ispisuje tekst italikom.

Koristi se za citate unutar teksta. Tag služi za kratke (manje od jednog reda) listinge (unutar teksta). Tag (preformatted) obezbeđuje prikaz teksta “onako kako je unet” (svi enteri, tab-ovi i razmaci se prikazuju kako su uneti).

Primer 6: Citati Enter the title of your HTML document here Ovo je tekst koji je levo poravnat. Ovo je veliki blok citata. Ovo je treći pasus, unutar kojeg će biti naveden citat. Ovo ćemo posmatrati kao citat.

Primer 6: Izgled stranice

Obrada teksta - 6 Ukoliko treba promeniti sam izgled teksta, koriste se slededi elementi: – - za podebljan tekst, – - za iskošen (italik) tekst, – - za podvučen tekst, – - daje vedi font za 1 od zadatog, – - daje manji font za 1 od zadatog, – - daje tekst koji treperi.

Obrada teksta - 7 Tag omogudava da se menja boja, veličina i vrsta fonta. Sav tekst između početnog i završnog taga bide prikazan sa specificiranim karakteristikama . Atributi u okviru početnog taga su: − face - naziv fonta, − color - menjanje boje (navodi se ime boje ili heksadecimalni broj koji predstavlja tu boju na RGB skali),

− size - menjanje veličine, − weight - debljina slova.

Primer 7: Tekst Karakteristike teksta Sledeći tekst će prikazati upotrebu atributa za menjanje karakteristika teksta: Ovo je podebljan tekst. Ovo je iskošen tekst. Ovo je podvučen tekst. Ovo su slova uobičajene veličine, a ovo su slova za jedan veća od uobičajenih. Ovo su slova uobičajene veličine, a ovo su slova za jedan manja od uobičajenih. Ovo je tekst crvene boje, font je Arial, slova su veličine 10. Ovo je tekst zelene boje, font je Times New Roman, slova su veličine 6.

Primer 7: Izgled stranice

Liste - 1 Liste su potrebne u tekstu kad nešto nabrajamo. Grafičke liste se prave upotrebom tagova i .

Primer 8: Liste 1 Liste1 Ovo je moja prva lista: text1 text2 text3

Liste - 2 Vrsta oznake bira se atributom type, taga , (primer: cirkle, square,...).

Primer 9: Liste 2 Liste1 Ovo je moja prva lista: text1 text2 text3

Liste - 3 Numeričke liste prave se upotrebom tagova i . Vrsta numeracije se bira atributom type, taga , (primer: 1, a, A, I...).

Primer 10: Liste 3 Liste1 Ovo je moja prva lista: text1 text2 text3

Liste - 4 Start numeracije bira se atributom start, taga , (primer: 5, 3, 11, 20...).

Primer 11: Liste 4 Liste1 Ovo je moja prva lista: text1 text2 text3

Slike - 1 Tag definiše sliku koja de se javiti u HTML dokumentu. Atribut src sadrži ime slike koja treba da se nađe u dokumentu, ili putanju do te slike. Atribut alt sadrži tekst koji je ispisan na mestu slike, ukoliko ona nije učitana iz nekog razloga.

Slike - 2 Dimenzije slike se zadaju preko atributa height i width. Slika može biti poravnata u odnosu na ostatak dokumenta, a željena vrednost se daje u artibutu align. Debljina ivice slike se zadaje u atributu border.

Primer 12: Slike Slike



Primer 12: Izgled stranice

Dodatni atributi body taga − − − −

Atribut bgcolor boji pozadinu stranice. Atribut link definiše boju linka. Atrigut vlink definiše boju posedenog linka. Atribut alink definiše boju aktivnog (selektovanog) linka. − Atribut background definiše putanju do pozadinske slike.

Primer 13: Boja pozadine i linkova Označavanje delova dokumenata Ovaj pasus obeležen je imenom “prvi”. Ovo je link na drugi deo.

Primer 13: Izgled stranice

Primer 14: Slika za pozadinu Pozadinska slika All of the base tables and views for the database's data dictionary are stored in the schema SYS. These base tables and views are critical for the operation of Oracle...

Primer 14: Izgled stranice

Linkovi (veze) - 1 − Linkovi na Web strani se prave pomodu oznake (a je skradeno od anchor - sidro). Atributi ove oznake su: href - (hyperlink reference) koji označava lokaciju na koju se preusmerava Web pretraživač kada korisnik klikne na link. Ne zaboravite "http://" za punu

adresu.

Primer 15: Link 1 Veza ka zvaničanom sajtu Gimnazije u Kuršumliji

Linkovi (veze) - 3 • Mogu se definisati veze unutara jedne stranice. • Sve što je potrebno je atribut id (identification) i simbol "#". • Id atribut markira element ka linku:

Naslov 1 • Sada je mogude kreirati link korišdenjem "#" u atributu veze. "#" mora da bude u paru sa id. Veza ka naslovu 1

Primer 16: Linkovi Linkovi2