zavrsni rad - primena internet tehnologija u obrazovanju - tamara grozdic

Primena internret tehnologije u obrazovanju

Tema: Primena internet tehnologija u obrazovanjuAutor: Tamara Grozdi

Univerzitet u Novom SaduPedagoki fakultet Sombror

Primena internet tehnologija u obrazovanju-Zavrni rad-

Student: Tamara Grozdi 09/02/004Mentor:doc.dr. Dragan Lambi

Sombor, 2013.

Sadraj

1.Uvod42.Internet52.1Istorija interneta62.2Arpanet62.3Poetak interneta - Gopher62.4Savremeni internet72.5Pristup internetu93.Primena internet tehnologija u obrazovanju114.Web site124.1Istorija i pregledi124.2Statini web sajt134.3Dinamiki web sajt144.3.1Dinamiki kod prvi tip sajta144.3.2Dinamiki sadraj drugi tip sajta144.3.3Softver sistemi154.3.4Naziv154.4Web dizajn164.4.1Web dizajn i njegov poetak164.4.2Dizajn web stranica164.4.3Kraj prvih ratova pretraivaa174.4.4Tehnologije i alat174.4.5Tipografija184.4.6Izgled web stranice194.4.7Kvalitet koda194.4.8Vizuelni dizajn194.4.9Iskustvo pri dizajnu205.Izrada web sajta i njegova primena u obrazovanju215.1Pisanje HTML koda225.2Struktura235.2.1Head deo235.2.2Body deo235.3Liste255.3.1O listama265.3.2Numerisane liste275.3.3Neureene liste285.3.4Lista unutar liste295.4Formatiranje teksta345.5Boje385.6Linkovi415.7Slike465.8Tabele505.9Forme i elementi forme576.Zakljuak637.Literatura64

1. Uvod

U dananje vreme kada je tehnologija i internet u usponu, internet je postao opta potreba ljudi. Primena internet tehnologija u obrazovanju je postala svakodnevnica i potreba kako bi se steklo novo znanje i kako bi se to lake dolo do novih informacija.

Razvoj internet tehnologija i stalno inoviranje internet tehnologija uslovljava promene u metodama i oblicima nastavnog rada, kao i u organizaciji koja bi bila optimalna u eri masovne primene interneta i elektronskih izvora znanja. Mladi ljudi koji kod kue i van kole ive u tehnoloki bogatom okruenju i oekuju promene u obrazovanju u skladu sa imperativima obrazovanja za 21. vek. U tom smislu ve se polako u obrazovanje uvode multimedijalni sistemi, uenje na daljinu, virtuelne kole i druge tehnologije koje dovode do poveanja aktivnosti uenika, kvalitetnijeg vrednovanja znanja i napredovanja uenika u skladu sa individualnim sposobnostima i predznanjima.

Mnoge kole, fakulteti i druge obrazovne institucije, sve informacije vezane za njih kao i materijal za uenje postavljaju na svoje internet stranice i online uionice koje su gotovo svima dostupne. Jednostavno danas nepostoji pojedinac koji nema pristup internetu, pa su tako i informacije vezane za obrazovanje dostupne skoro svima.

U vremenu kad se sve odvija pomou raunara i interneta moemo videti da i sama tehnologija poiva na njemu i kada bi internet nesato nastao bi opti kolaps gde bi ljudi mnogo tee obavljali svoj posao i svakodnevni ivot. Internet je postao potreba i sastavni deo ivota mnogih ljudi. Prednosti interneta su te da on nudi svojim korisnicima mogunost da alju besplatno e-mailove, da ljudi etuju, da prenose i razmenjuju podatke, vre novane transakcije i ostalo. Internet nam je ubzao ivot i olakao nain da doemo do bilo kakvih informacija, pa tako i u oblasti obrazovanja. U svakom trenutku moemo preko nekih od svetskih poznatih web sajtova da saznamo na milione korisnih informacija, a da pritom ne platimo nita. ovek u svakom trenutku moe da pristupi svetskoj bazi podataka. Internet aurira svoje podatke svake sekunde, a pored toga pretraivanje samih podataka se izvrava u vremenu kraem od jedne sekunde. Internet se razvijao sa razvojem raunara, isto tako se sa razvojem interneta, poveao i broj korisnika globalne mree i naravno znatno se poveao i broj web stranica.U skladu sa temom, nastojau da objasnim primenu internet tehnologija i kolika je njihova upotreba i vanost u svakodnevnom ivotu kao i u obrazovanju. Objasniu ta je internet i koja je njegova primena u oblasti obrazovanja. zatim sam proces izrade web stranica i njihovo dizajniranje u jeziku HTML, kao i ta su web stranice i koji se alati primenjuju za njihovu izradu. Kao primer za izradu web stranica u jeziku HTML koristila sam sajt koji sam napravila u edukativne svrhe, i koji sam namenila buduim studentima Pedagokog fakulteta koji trebaju da polau prijemni ispit iz predmeta Informatika za upis na smer Dizajner medija u obrazovanju o emu e biti vie rei u radu.2. Internet

Internet je globalna svestka mrea koja je nastala 50-ih godina XX veka. Potreba za internetom nastaje za vreme drugog svetskog rata, jer je to bio savren nain komunikacije, posebno za vreme napada na neku zemlju. Prvi servis koji je postavljen na internet je bio e-mail servis, koji je omoguavao brzu razmenu informacija izmeu korisnika ma gde se oni nalazili. Razvojem raunara za kune upotrebe internet je postao komercijalan. Od tada se menjaju postojei servisi i dopunjuju novima koji korisnicima omoguuju razne opcije. Danas najkorieniji servis je WWW (World Wide Web - Svetska mrea) koju mnogi zamenjuju sa internetom, pri emu je esto zovu "net". World Wide Web predstavlja multimedijalni deo interneta koji slui za pronalaenje i transfer informacija, podataka, teksta, slika, zvuka, animacija i tako dalje i sve to bez dodatnog softvera koji korisnik mora da instalira na svom raunaru, dovoljno je samo da ima bilo koji pretraiva (Internet Explorer, Firefox. Chrom, Opera i sl.). WWW ini veliki broj prezentacija raznih institucija, sistema i pojedinaca koji se nalaze na razliitim lokacijama i domenima.

Internet kao pojam je svetski sistem umreenih raunarskih mrea koji je transformisao nain na koji funkcioniu komunikacioni sistemi.Danas, internet povezuje milijarde raunara irom sveta na jedan nehijerarhijski nain. Internet je proizvod spoja medija,raunaraitelekomunikacija. Meutim, internet nije samo proizvod tehnolokog napretka, nego takoe drutvenih i politikih procesa, ukljuujui naunu zajednicu, obrazovanje, politiku i vojsku. Od svojih korena kao jedno neindustrijsko i neposlovno okruenje vezano za naunu zajednicu, internet se vrlo brzo proirio na svet trgovine i poslovanja. Ipak, bilo je potrebno skoro 30 godina da se internet nametne kao tehnoloka inovacija koja konstantno transformie drutvo, obrazovanje i ekonomiju. Pojam internet znai interna konekcija izmeu vie raunara.

Internet je ubrzao proces globalizacije, ruei postojee dravne, nacionalne, kulturne, organizacione i politike granice i eliminiui prostorna i vremenska ogranienja. Internet je razliit od drugih informacionih i komunikacionih tehnologija zato to je svuda prisutan i otvorene je prirode, ima niske trokove pristupa i aplikacije koje su lake za upotrebu.

Kao rezultat, imamo posvedoen i bezprimeran nivo prihvatanja interneta od strane korisnika i raznih organizacionih, obrazovnih i biznis procesa i sistema, koji se kree eksponencionalnim progresom rasta. Internet je esto razmatran kao znaajan komunikacioni kanal, to mu obezbeuje znaajnu poziciju u kreiranju kompletne elektronske zajednice, koja je ve velika i rapidno raste, dajui nove mogunosti i platforme za rad. Uspeni igrai u novoj dimenziji su pojedinci i organizacije koje mogu brzo i kvalitetno prenositi informacije u svim aspektima njihovih aktivnosti.[footnoteRef:1] To je doprinelo da danas organizacije faktiki postoje i komuniciraju u dva sveta: fizikom svetu opipljivih resursa i materije, i u virtuelnom svetu na bazi softvera i informacija. Pojedinac je danas dobro obaveten o ponudama raznih informacija, mogunostima irom sveta uz niske trokove pretraivanja. U digitalnoj komunikaciji pravila igre zahtevaju brzinu, fleksibilnost i inovativnost. Povezivanje tehnologije i komunikacije je donelo promene vezane za potrebe, istraivanje, prilagoavanje korisnicima i nain razmene informacija, metode i obavljanje komunikacije. Korisnici oekuju informacije i kumunikaciju koji su specijalno njima prilagoeni, 24 sata dnevno, 7 dana u nedelji, 365 dana godinje. [1: Savremeno poslovanje i internet tehnologije: Vladan Pantovi, Slobodan Dini, Duan Starevi; Energoprojekt - InGraf, Beograd 2002. god.]

Istorija interneta

Internet nastaje sa razvojem raunarskih mrea posebno ARPANET-a koji je ustvari bio mrea sastavljena od vie raunarskih mrea. Da bi se osigurao rad interneta stvoren je protokol. Internet protokol poznat kao TCP/IP protokol (Transmissione controll protocol/ Internet protocol) nastaje 1982. godine. Ovaj protokol oznaava nastanak interneta, ali dalji razvoj interneta kasnih 80-ih i poetkom 90-ih god. dovodi do toga da se zamenjuje ARPANET i da se internet sve vie komercijalizuje i dovede do mere u kojoj postoji i danas. Sredinom 90-ih godina XX veka internet sve vie postaje sastavni deo ivota ljudi, i sve to zahvaljujui razvoju raznih servisa poput: e-mail servisa, trenutnog dopisivanja i naravno VoIP (Voice over Internet Protocol- Glas preko Internet protokola).

Arpanet

ARPANET je mrea koja je pretea interneta, ona je ostvarena prvi put izmeu Kalifornijskog univerziteta Los Aneles i Istraivakog centra Standford. Veza je uspostavljena u 22:30 29.Oktobra 1969. godine. Veza se odravala uporedo i telefonskom vezom i tada je poslato prvo slovo"L" koje je potvreno, drugo slovo je bilo "O" koje je takoe uspeno poslato ali kada su probali da poalju 3 slovo "G" sistem se sruio.Do 5.decembra 1969. godine mrea je dobila etvrti vor koji su inili jo dva univerziteta. I tako je mrea zapoela svoj nagli rast. Do 1981 god.. mrea se iri na 213 vorita. Posle Amerike internet dobijaju i Evropa, Afrika, a zatim Azija i Okeanija.

Poetak interneta - Gopher

Kako je internet naglo rastao od 80-ih do 90-ih god. XX veka, tako je i rasla potreba za nekim vidom organizacije podataka i njihovim upravljanjem. Prvi takvi pokuaji bili su: Gopher, WAIS i FTP Arhiva, ali nijedan od njih nije mogao da se nosi sa naglim rastom interneta i mnotvom vrsta podataka koji su se prenosili. Jedan od korisnikih interfejsa koji je obeavao u to vreme bio je i "HyperText". Ova tehnologija predstavlja mnotvo malih meusobno povezanih hiper tekstualnih sistema koji su napravljeni jo ranije, to su sistemi poput "HyperCard" (Hiper katrica) Apple-ovih raunara. Iako su delovi Gophera hiper linkovi oni nisu opisivani na taj nain, i ovo je bitna mana. Dok je radio u CERN-u Tim Berners je uspeo da napravi prvu mreu zasnovanu na hiper tekstu. Za svoj razvojWorld Wide Weba dobio je 2004. godine tehnoloku nagradu milenijuma. Posle nastanka WWW-a na red su doli pretraivai.I pre WWW-a internet se mogao pretraivati, i naravno ti pretraivaki sistemi poput Gophera su se i dalje zadrali na pojedinim serverima do 2006. godine ali u znatno manjoj meri nego to je sluaj sa serverima za web. Sa porastom web-a rasle su i stranice koje se nalaze na njemu, pa su zato stvorani novi pretraivai i novi web direktorijumi kako bi se sve te stranice mogle organizovati i pronalaziti na internetu. Prvi potpuni tekst pretraiva WebCrawler nastaje 1994. godine, pre ovog pretraivaa pretraivani su samo naslovi web stranica.Pretraivanje je omogueno sa mnogih ureaja kao to su mobilni ureaji. Ovo je mnogo bitan faktor u irenju i popularizaciji interneta i smatram da bi na njega trebalo obratiti posebnu panja i internet iskoristiti u jo veoj meri

Savremeni internet

Poslednjih godina internet belei dramatian rast. Broj raunara se praktino duplira svake godine. Poev od 1999. godine rast je tako brz da se u proseku svake sekunde dodaje jedan novi raunar. Od 2006 godine rast iznosi 10 raunara u sekundi. U periodu od 1983.-2005. godine priblino polovina korisnika interneta je ostvarena u predhodnih 12-14 meseci. Kao to je ve spomenuto internet je postao opta potreba u svakodnevnom ivotu, jer se danas najveim delom komunikacija odvija upravo putem interneta. Internet nam nudi razne mogunosti i upravo to ini internet sve popularnijim. Interaktivni web sajtovi ine internet zanimljivim i na takvim sajtovima se u poslednjih par godina zasniva ceo internet. To su dinamiki web sajtovi koji nude manju ili veu interakciju sa posetiocima, prikupljaju podatke o posetiocima i njihovim interesovanjima, omoguavaju ili onemoguavaju pristup delovima sajta, odreenim kategorijama, zatim automatski alju obavetenja ili vesti posetiocima koji to ele, i omoguavaju pronalaenje i sortiranje podataka. Takvi sajtovi su recimo:Drutvene mree koje su sve popularnije (Facebook, Twiter, GooglePlus...). To su sajtovi koji nude komunikaciju sa ljudima irom sveta. Ovi sajtovi omoguavaju komunikaciju sa drugim korisnicima: postavljanje slika, video zapisa, statusa kao i komentarisanje njih samih i dr. U poslednje vreme drutvene mree kao to su Facebook i Google Plus, omoguili su korisnicima komunikaciju i putem video poziva. Informacioni sajtovi su web sajtovi koji pruaju informacije o razliitim temama. Najpoznatiji je svakakoWikipedia koji predstavlja najveu online enciklopediju. Ovaj web sajt je interaktivan jer omoguava posetiocima da piu svoja objanjenja.

Blogovi su web sajtovi namenjeni da podelite svoje miljenje sa drugima na internetu bez obzira na temu ili sadraj, da uestvujete u diskusijama sa drugim blogerima, postavljate slike ili komentare i dr. Do bloga na internetu mogue je doi i potpuno besplatno preko sajtova koji nude besplatno postavljanje bloga.

Forumi su vrlo slini blogovima, ali za razliku od bloga imaju unapred zadate oblasti o kojima se diskutuje unutar kojih se otvaraju pojedine teme, postavljaju pitanja i oekuje pomo u vidu odgovora. Postoje opti forumi na kojima se diskutuje o svim temama bez ogranienja.

Svakako postoje jo dve veoma bitne stvari koje je potrebno spomenuti kada je re o savremenom internetu, a to su File Sharing i Video Streaming.

File sharing (deljenje fajlova) je jedan od primera deljenja velikih koliina podataka na internetu. Raunarski fajlovi, kao dodaci, mogu biti poslati e-mailovima prijateljima, kolegama ili muterijama irom sveta. Oni mogu biti "okaeni" tj. erovani na web serverima ili FTP serverima kako bi njima korisnici mogli da pristupe i lako "skinu" eljene podatke. Mogu takoe biti na podeljenoj erovanoj lokaciji servera za trenutni pristup svih kolega, kao npr. u studentskom domu gde su svi raunari meusobno umreeni. Studenti mogu iz svojih soba da pristupe tuim raunarima i preuzmu fajlove, al to zavisi i od toga koji raunar je dozvolio erovanje fajlova i datoteka. Takoe danas zahvaljujui erovanju razmenjujemo, putem gore navedenih drutvenih mrea, slike, muziku, datoteke il fajlove sa prijateljima il poznanicima. aljemo jedni drugima linkove sa sajtova sa kojih moemo da preuzmemo muziku, slike, animacije, spotove, a koji su predhodno erovani na neki od servera. Jedna od prednosti jeste i plaanje preko interneta. Ova uloga je promenila nain trgovine irom sveta. Podaci koji se prenose preko interneta su najee potpuno ifrovani i maksimalno zatieni. Poreklo i ispravnost podataka se proverava pomou digitalnih potpisa ili MD5. Smatram da je erovanje podataka omoguilo da mnogo lake doemo do odreenih datoteka na internetu, zahvaljujui tome danas moemo sve da obavimo iz svoje fotelje, od plaanja rauna, naruivanja robe preko interneta, do presluavanja i preuzimanja raznih muzikih albuma, spotova kao i deljenja datoteka sa prijateljima..Video striming (eng. video streaming) omoguava gledanje video fajlova preko interneta. Video striming je jo jedna sjajna prednost i mogunost interneta. Video striming predstavlja trenutno deljenje digitalnih video fajlova preko interneta sa ciljem da zadovolji mnogobrojne korisnike. Mnoge radio i televizijske kue nude svojim korisnicima uivo preglanje audio i video materijala. Uz klasino pregledanje korisnici imaju mogunost premotavanja i zaustavljanja materijala koji je na strimu, kao i njegovo ponovno putanje. Ovo je dovelo do nastanka novih televizija i radio stanica koje nikada nisu prenosile podatke na klasan nain u etar, ve sve svoje programe i usluge nude preko interneta. Ovako je omogueno korisnicima da preko bilo kojeg ureaja koji ima internet pristup, prate omiljene stanice uivo preko interneta. Postoji mnogo tipova streaming-a od videa na zahtev koji je jedan od najpopularnijih multimedijalnih servisa danas, sve do podkastinga, gde je obino audio materijal "skinut" sa interneta i presluan na raunaru.Da bi se video strim raznih kvaliteta odrao moraju se omoguiti odreene brzine. Recimo za standarnu sliku potrebna je brzina od 1 Mb/s, za HD720 potrebano je 2,5 Mb/s, dok za maksimalnih 1080p je potrebno 4,5Mb/s.Web kamere su jeftino proirenje ovog fenomena. Iako web kamere omoguuju pune frejmove za tene prikaze, slika je obino smanjena ili usporena. Pomou kamera preko interneta se mogu posmatrati recimo ulice gradova kao npr. Beograda ili recimo brodovi u Panamskom kanalu. Ko eli moe da posmatra saobraaj irom metropola bilo gde u svetu. Sa privatnim web kamerama korsnicima je omogueno da se uju sa prijateljima bilo kad, bilo gde uz pristup internetu. Postoje i javni video-chat servisi koji nasumice povezuju korisnike irom sveta. Danas najpoznatiji video stream sajt je "YouTube" koji je osnovan 15. Februara 2005. god. a ve ima vie miliona korisnika.

Pristup internetu Nekadanji pristup putem Dial-up konekcije je zamenjen modernijim i brim pristupom putem zemaljskih-ianih veza (koaksijalnim kablovima, optikim kablovima), Wi-Fi vezom (beina tehnologija ), satelitskim vezama ili 3G/4G vezama za mobilne telefone. Pristup internetuje mogue ostvariti na vie naina. Svaki od tih naina kada se analiziraju: brzina prenosa, pouzdanost, raspoloivost i cena, imaju svoje prednosti i slabosti. Mogunosti: prekoklasine telefonske linije(Dial-up). Maksimalna brzina prenosa je 56kb/si pri tome jetelefonskalinija zauzeta,

prekoISDN-azauzimanjem jednog ili oba kanala od po 64kb/s, tj. 128kb/s. Telefoniranje je mogue pri emu se, u momentu telefoniranja,internetsaobraaj deava samo preko jednog kanala.

DSL tehnologija. Kod nas je za sada prisutnaADSLto je skraenica za asimetrina digitalna pretplatnika linija (AsymmetricalDigitalSubscriberLine). Brzina slanja podataka saserverapremapretplatniku(download) i slanje podataka od pretplatnika ka serveru (upload), nije ista tj. brzina prenosa podataka sa servera ka pretplatniku je nekoliko puta vea. Poto je prenos podataka van govornog opsega, telefonska linija je slobodna za obavljanje razgovora tj. telefoniranje. Brzine ( 2005 ) koje su na raspolaganju u Srbiji su od 256/64kb/spa sve do 2Mb/s. Postoje i novije generacije ADSL-a ali je neophodno dapretplatnikbude blie telefonskoj centrali, jer je brzina u funkciji od slabljenja. Sve vie se koriste posebnibakarni kabloviza ovu namenu.

Kablovski internetje usluga koju daju operatori kablovske televizije. U Srbiji brzine i cene kablovskog intenerneta su sline kao ADSL. Telefonska linija je slobodna jer se za prenos signala ne koristitelefonska paricave poseban koaksijalni/optiki kabl koji je za prenos TV signala.

Beinom tehnologijom Vaj-Faj(WiFi, Wireless Fidelity). Ova tehnologija je relativno malog dometa (cca 1500m) i razvijena je za aerodrome, kafie, restorane itd.

Beinom tehnologijiom Vaj-Maks (WiMAX, Worldvide Interproperabilityod Microwave Acces) se postie domet od 5 km do 15km u ruralnom podruju.

Mobilnim telefonom. Raunar se povezuje samobilnim telefonomkoji uestvuje u prenosu podataka. U Srbiji je ova usluga jo uvek sporija u odnosu na ostale prethodno pomenute naine prenosa, a i skuplja je.

Satelitski prenos. Vrsta prenosa prekosatelitaima vie: preko TV satelita, geostacionarnih satelita i satelita koji nisu geostacionarni. Pored visoke cene ove relativno novije tehnologije imaju i svojih dodatnih mana, npr. kanjenje signala kod geostacionarnih satelita.

3. Primena internet tehnologija u obrazovanju

Moderno doba i razvoj internet tehnologija zahtevaju promene u itavom drutvu, pa tako i u procesu obrazovanja. Uvoenjem internet tehnologija u obrazovanje prevazilaze se slabosti tradicionalnog obrazovanja. Savremena internet tehnologija i njeno postepeno uvoenje u nastavni proces potiskuje tredicionalni nain rada u kome su nastavnik i udbenik jedini izvori informacija. Ovim se znatno menja uloga nastavnika u nastavnom procesu. Nastavnik postaje organizator, savetnik, evaluator. Promena uloge nastavnika zahteva od njega nova znanja i sposobnosti u oblasti korienja novih tehnologija, a sve u cilju podizanja kvaliteta nastave.

Smatram da danas interent tehnologija ima vodeu ulogu kad je re o obrazovanju. Putem interneta i sadraja koji se nalazi na njemu imamo uvid u irok spektar informacija i samim tim dostupne su nam informacije iz svih oblasti to podstie konstantno uenje. Pored brojnih nedostataka tradicionalnog obrazovanja, njena pozitivna karakteristika je razvijanje individue u socijalnom okruenju, to nam informacione tehnologije ne pruaju. Meutim, pozitivna strana internet tehnologija je ta to se moe poboljati uenje svih uenika. Upotreba razliitih medija u nastavi moe informaciju uenicima da uini mnogo privlanojom. Jedna od osnovnih karakteristika savremenog obrazovanja u kojoj se upotrebljava internet tehnologija jeste mogunost aktivacije uenika i njihove samostalnosti u radu. Internet tehnologija omoguava ueniku da koristi vei broj izvora informacija i da samostalno istrauju i testiraju svoje hipoteze. Uenici vie nisu objekti u nastavi, sada su misaono aktivni i uestvuju u svom obrazovanju.

Internet tehnologija obezbedila je podrku obrazovanju i uinila je gradivo zanimljivo i svima dostupno. Ovu tehnologiju ne koriste samo nastavnici, ve i uenici i studenti. Savesnim i kompetentnim nastavnicima postalo je jasno da se racionalnom primenom raunara i njihovim povezivanjem na internet mreu znaajno doprinosi osavremenjavanju i podizanju kvaliteta nastave. Sa interneta se mogu koristiti posebno oblikovani i koncipirani sajtovi posveeni odreenoj naunoj oblasti ili nekoj tematskoj celini. Zahvlajujui alatima za pretragu interneta na raspolaganju su nam gigantski hipertekstovi koji su spremni da korisnicima istovremeno ponude slike, dokumenta, zvune zapise i animacije sa svih kontinenata, to dovodi do toga da primena internet tehnologija u obrazovanju obezbeuje: komunikaciju izmeu uenika obrazovnog procesa putem raunara, prezentaciju i usvajanje obrazovnih sadraja proveru znanja posredstvom raznih testova za samoproveravanje, upravljanje nastavom koje se odnosi na sreivanje i korienje razliitih administrativnih podataka o uenicima i obrazovnim programima, uoavanje obrazovnih sadraja za uenje na internetu i primenu materijala u obrazovanju.4. Web site

Web sajt je skup povezanih stranica sa odreenim sadrajem ( tekst, slike, animaije, video, audio...). Svaki sajt je hostovan na najmanje jedanom Web serveru, i dostupan je preko mree kao to je Internet ili privatnom lokalnom mreom preko internet adresi poznatoj kao Uniform Resource Locator (URL). Svi javno dostupni sajtovi zajedno predstavljaju World Wide Web (WWW).Web stranica je dokument, obino napisan u obliku istog teksta oblikovan uputstvima HyperText Markup Language (HTML). Web stranica moe da sadri elemente sa drugih web sajtova sa odgovarajuim naznakama sidra.Web stranicama se pristupa pomou Hipertekt Transfer Protocol-a (HTTP), koji moe opciono da ifruje (HTTP Secure HTTPS) i da obezbedi sigurnost i privatnost za korisnika interneta. Preko URL, koji se zove web adresa, se obino moe pristupiti sajtu. URL adrese stranica se organizuju u hijerarhiji, iako hiperlinkove izmeu njih predstavlja kao strukturu sajta, i itaoca usmerava na navigaciju sajta, koja obino ukljuuje poetnu stranicu sa najvie linkova ka web sadraju sajta, i dopunske o kontaktima i linkovima stranica.Neki sajtovi zahtevaju pretplatu za pristup nekim ili svim njihovim sadrajima. Primer sajtova sa pretplatom ukljuuje mnoge poslovne lokacije, delove informativnih sajtova, sajtova akademskih asopisa, gaming sajtova, sajtova sa deljenjem datoteka, oglasne table, sajtove drutvenih mrea, internet prezentacije koje pruaju u realnom vremenu podatke sa berzi, i prua razliite web sajtove drugih usluga (npr. web sajtovi koji nude skladitenja i / ili razmenu slika, datoteka i tako dalje).

Istorija i pregledi

Pre uvoenja HTML i HTTP, ostali protokoli kao to su File Transfer Protocol i Gopher protokol su se koristili za preuzimanje pojedinih datoteka sa servera. Ovi protokoli nude jednostavnu strukturu direktorijuma kroz koje se korisnik kree i odabira datoteke za preuzimanje. Dokumenti su najee predstavljeni kao obian tekst bez formatiranja datoteka, ili su kodirane u rei processorformats.Sajt po funkciji moe biti: lini sajt komercijalni sajt sajt Vlade sajt neprofitna organizacija To moe biti delo pojedinca, poslovno ili drugo delo, i obino posveeno nekoj odreenoj temi ili nameni. Svaki sajt moe da sadri hipervezu ka bilo kom drugom sajtu, tako da razlika izmeu pojedinih lokaliteta, kao to je doivljavano od strane korisnika, moe ponekad biti zamagljeno.Sajtovi su napisani ili konvertovani u dinamiki HTML (Hiper Tekt Markup Language). Web stranice se mogu prikazivati iz niza kompjuterski zasnovanih internet ureaja razliitih veliina, ukljuujui desktop raunare, laptop, PDA ureaja ili mobilnih telefona.Sajt je hostovan na kompjuterskom sistemu poznatom kao web server, koji se nazivaju HTTP serveri, a ovi uslovi se takoe odnose na softver koji radi na ovim sistemima. On preuzima i isporuuje web stranice kao odgovor na zahteve korisnika sajta. Apache je najee korien Web server softver (prema Netcraft statistici) i Microsoft-ov IIS takoe esto koristi.

Statini web sajt

Web stranice nekog sajta sauvane na serveru u formatu koji je poslat web pretraivau klijenta je statiki web sajt . To je pre svega stranica, kodirana u Hipertekt Markup Language (HTML). Jednostavne forme ili marketinki primeri sajtova, kao to su klasini sajtovi, na pet strana sajta ili broure, su esto statike web stranice, jer one predstavljaju unapred definisane statike informacije korisniku. To moe da ukljui informacije o kompaniji i njenim proizvodima i uslugama kroz tekst, fotografije, animacije, audio/video i interaktivne menije i navigaciju.Svim posetiocima statiki sajt prikazuje istu informaciju. Slino kada se deli tampana broura kupcima ili klijentima, statiki sajt, obezbeuje konzistentne, standardne podatke za dui vremenski period. Autor web sajta moe da ispravlja podatke povremeno, i to je proces ureivanjae teksta, fotografija i drugih sadraja, i ovakva obrada zahteva samo osnovno znanje web dizajna i softvera. to znai da posetioci nisu u stanju da kontroliu koje informacije primaju preko statikog sajta.Za editovanje (obradu ) koriste se etiri iroke kategorije softvera: Tekstualni editori, kao to su NotePad ili TektEdit, gde su sadraj i HTML oznake direktno obraene u okviru programa offline wysiwyg editori, kao to su Microsoft FrontPage i Adobe Dreamveaver, sa kojim se ureuje sajt pomou GUI interfejs i zavrni HTML je automatski generisana od strane urednika softvera wysiwyg editori koji stvaraju online medijsku prezentaciju kao web stranicu, Widgets, blogova i drugih dokumenata. ablonski zasnovani urednici, kao to su RapidWeaver i iWeb, koji omoguavaju korisnicima da brzo kreiraju i uploaduju stranice na web server, bez detaljnog znanja HTML-a.

Dinamiki web sajt

Dinamiki web sajt je onaj koji se menja ili prilagoava esto i automatski, na osnovu odreenih kriterijuma. Dinamiki sajtovi mogu imati dve vrste aktivnosti: dinamiki kod dinamiki sadrajDinamiki kod je nevidljiv, a dinamiki sadraj je vidljiv ili potpuno prikazan.

Dinamiki kod prvi tip sajta

Dinamiki kod se gradi koristei aktivni programski jezik umesto obinog, statkog HTML-a. Web stranice sa dinamikim kodom je prvi tip sajta.Sajt sa dinamikim kodom se odnosi na kod koji se koristi da se stvori jedna web stranica. Dinamiki generisana web strana je generisana u vie odreenih blokova koda, procedura ili rutina. Dinamiki generisana web stranica e preuzimati razne delove informacija iz baze podataka i spojiti ih zajedno prema unapred definisanom formatu, i zatim predstaviti eljene informacije itaocu sa web stranice. On stupa u interakciju sa korisnicima na razliite naine, ukljuujui kolaie koje prepoznaje itajui prethodnu istoriju korisnika, "Session" promenljive, sporedna promenljiva servera itd, ili koristei direktnu interakciju (obrazac elemenata, mi preskakanja, itd). Sajt moe da prikae trenutno stanje dijaloga izmeu korisnika, moe da prati promenu situacije, ili da prui informacije na neki nain personalizovanog zahteva pojedinanih korisnika.

Dinamiki sadraj drugi tip sajta

Dinamiki sadraj prikazan u obinom prikazu je drugi tip sajta. Sadraj se dinamiki prikazuje na osnovu odreenih kriterijuma, obino preuzimanje sadraja sauvanih u bazi podataka. Sajt sa dinamikim sadrajem odnosi se na to kako se njene poruke, tekst, slike i druge informacije prikazuju na web stranici, a posebno kako se njen sadraj menja u bilo kom trenutku.Sadraj web stranica varira na osnovu odreenih kriterijuma, bilo unapred definisanih pravila ili promenljivih vezanih za korisniki unos. Na primer, sajt sa bazom podataka od novinskih lanaka. Ovaj tip dinamikog sajta e automatski prikazati najnovije novinske lanke za svaki datum. Jo jedan primer dinamikog sadraja je kada sajt sa bazom podataka medijskih proizvoda omoguava korisniku, ulaz za pretragu i zahteve kljunih rei recimo Diznijeve bajke. U odgovoru, sadraj web stranice e spontano promeniti izgled, a zatim e se prikazati spisak Diznijevih bajki kao CD, DVD i knjige.

Softver sistemi

Postoji irok spektar softverskih sistema, kao to je ANSI C Servleti i JavaServer Pages (JSP), PHP, Perl, Pithon i Rubi programski jezici, ASP.NET, Active Server Pages (ASP), Iuma i ColdFusion (CFML) koji su dostupni za generisanje dinamikih sistema i dinamikih web sajtova. Sajtovi mogu da sadre sadraj koji preuzimaju iz jednog ili vie baza podataka ili korienjem XML baziranih tehnologija kao to su RSS.Statiki sadraj se moe generisati dinamiki ili periodino, ili ako se jave odreeni uslovi za regeneraciju (cached) kako bi se izbegao gubitak performansi.Plug-ins ( dodaci ) omoguuju da se proire karakteristike i sposobnosti web browsera da prikae aktivni sadraj ili ak kreira bogatije internet aplikacije. Primeri su plug-inova su Microsoft Silverlight, Adobe Flash, Adobe Shockvave ili apleti pisan u Javi. Dinamiki HTML takoe obezbeuje za korisnika interaktivnost u realnom vremenu, i element u okviru auriranja web stranice (tj. stranice ne moraju da se uitavaju ili reloaduju da izvri bilo kakve izmene), uglavnom korienjem Document Object Model (DOM) i JavaScript, podrki koje se ugrauju u veini modernih web pretraivaa.Za web programere i vlasnike web sajtova okretanje sajta u jedan od izvor prihoda je uobiajena praksa. Postoji nekoliko metoda za kreiranje web poslovanja koje spada u dve iroke kategorije, kao to je definisano ispod.Neki sajtovi ostvaruju prihod od prodaje reklamnog prostora na njihovom sajtu ili putem direktne prodaje ili mree za oglaavanje.

Naziv"Sajt" se najee upotrebljava u svakodnevnom govoru, ali "Web sajt" je takoe u irokoj upotrebi, mada sve vie opada i sve se manje koristi. Deo naune zajednice, i neki veliki izdavai knjiga kao i renici i dalje koriste "Web sajt", odraavajui poreklo termina pod pravim imenom World Wide Web. Takoe je dolo do sline rasprave o srodnim terminima kao to su web stranice, web serveri i web kamera. Ali svi i dalje preporuuju Web Site. Meu vodeim renicima i enciklopedijama, kanadski Oksfordski renik preferira "Web site", a Oksfordski engleski renik je promenio u "Web sajt" 2004. Wikipedija takodje koristi "Web sajt", ali Enciclopaedia Britannica (ukljuujui i Merriam-Vebster ) koristi "Web sajt".to se tie velikih preduzea Internet tehnologija i korporacija, Google koristi "Web sajt".Web dizajn

Web stranica je dokument koji je pogodan za World Wide Web i moe mu se pristupiti preko Web browser-a. Ova informacija je obino u HTML ili XHTML formatu, a moe da obezbedi navigaciju na druge web stranice preko hipertekst linkova. Web stranice mogu biti preuzete sa lokalnog raunara ili sa udaljenog web servera.Web server moe ograniiti pristup samo privatnoj mrei, npr. korporativnog intraneta, ili moe objaviti stranice na World Wide Webu. Web stranica se zahteva i preuzima od web servera koji koriste Hipertekt Transfer Protocol (HTTP).Web stranice mogu sadrati datoteke kao statiki tekst i drugi sadraj koji se nalazi u okviru sistema datoteka na web serveru (Statina web strana), ili mogu biti izgraene kao dinamike web stranice.

Web dizajn i njegov poetakTekstualni editori stranice mogu se posmatrati pomou jednostavne linije browsera. Pre nije bilo integrisanog pristupa grafikih elemenata dizajna kao to su slike ili zvukovi. Mozaik pregleda je razbio ovaj kalup. W3C je nastala u oktobru 1994, da vodi World Wide Web do svog punog potencijala. To je kasnije poznati Netscape Communications Netscape 0.9 pretraiva. Netscape je stvorio sopstvene HTML oznake bez tradicionalnog procesa standarda.Netscape 1.1 npr. daje komande za menjanje boja pozadine i formatiranje teksta sa tabelama na web stranicama. Tokom 1996 do 1999 su poeli ratovi browsera. U ratovima pregledaa bili su Microsoft i Netscape. Tokom ovog perioda bilo je mnogo novih tehnologija u oblasti, posebno Cascading Stile Sheets, JavaScript, i Dinamic HTML.

Dizajn web stranica

Dizajn web stranica je pojam koji pokriva mnogo razliitih vetina i disciplina koje se koriste u proizvodnji i odravanju sajtova. Razliite oblasti web dizajna ukljuuju: web grafiki dizajn, dizajn interfejsa, autoring, ukljuujui standardizovani kod, korisniko iskustvo dizajn i optimizaciju sajta. esto mnogi pojedinci rade u timovima koji pokrivaju razliite aspekte procesa projektovanja, i ako neki dizajneri pokrivaju sve njih. Izraz web dizajn se obino koristi da opie proces dizajna koji se odnosi na prednji kraj (klijent strana) projektovanja sajta ali tu je takoe pokriven web development (web razvijanje ). Od web dizajnera se oekuje da ima svest o korisnosti, i oekuje se da budu u toku sa smernicama web pristupanosti.Iako web dizajn ima kratku istoriju, on moe biti povezan sa drugim oblastima kao to su grafiki dizajn. Meutim, web dizajn je takoe vien sa tehnolokog stanovita. Ona je postala veliki deo svakodnevnog ivota ljudi. Teko je zamisliti internet stranice bez animiranih internet grafika, razliitih stilova tipografije, porekla i muzike.

Kraj prvih ratova pretraivaa

Netscape Communicator 1998 god. objavio kod pod open source licencom, to omoguava da hiljade programera uestvuje u poboljanju softvera. Meutim, oni su odluili da se zaustave i pou od poetka. Standardi Web Projekta su formirani, a promovisan je browser koji je saglasan sa HTML i CSS standardima stvaranja. 2000 je bila velika godina za Microsoft Internet Exlorer je izdat za Mac, ovo je znaajan dogaaj zato to je bio prvi pretraiva koji u potpunosti jer podrava HTML 4.01 i CSS 1. To je takoe bio prvi pretraiva koji u potpunosti podrava PNG format slika . Tokom ovog vremenskog perioda Netscape je prodat AOL-u i to je zvanini poraz kompanije Netscape od Microsofta u ratu pretraivaa.

Tehnologije i alat

Tehnologije se koriste za kreiranje web sajtova ukljuuju standardizovane oznake koje mogu biti napisane runo ili generisani od strane WYSIWYG softvera za ureivanje. Vlasniki softver je baziran na plug-inovima koji zaobilaze browser verziju klijenta. To su esto WYSIWYG, ali sa opcijom korienja jezika za skriptovanje tog softvera. Alati optimizacije sajta (SEO) za web pretraivae se mogu koristiti za proveru ranka vaeg sajta na pretraivaima (Yahoo, Bing, Google..). Optimizacija web sajta je veoma bitna ukoliko elite da va sajt bude dobro pozicioniran na web pretraivaima.

Web dizajneri koriste niz razliitih alata u zavisnosti od toga u koji deo proizvodnog procesa su ukljueni. Ovi alati su aurirani vremenom po novijim standardima i verzijama softvera, ali su principi koji stoje iza njih ostaju iste. npr.:Web grafiki dizajneri koriste vektorske i rasterske grafike pakete za kreiranje web formatiranih slika ili dizajna prototipa ( PhotoShop, Coler Draw...). Takoe web dizajneri koriste razne razkiite programe za pravljenje web sajtova kao to su HTML editor, Adobe DreamVeawer, Adobe Flash, WordPress, Joomla...Ukratko u opisati kako oni funkcioniu:

HTML editor je kompjuterski program za kreiranje web stranica. Html stranice se mogu pisati sa bilo kog ureivaa teksta, ali specijalizovani HTML editori mogu ponuditi funkcionalnost i udobnost. Na primer, mnogi HTML editori rade ne samo sa HTML-om, ve i sa srodnim tehnologijama kao to su CSS, XML i Java Script. U HTML editorima se uglavnom kod pie runo, tagovi se piu jedan po jedan, to oduzima dosta vremena. U jednu ruku to se smatra za najveu manu, dok se sa druge strane tome pridaje dosta panje u smislu da su takvi sajtovi dobri sajtovi i da je svaki sajt smisleno uraen.

Adobe DreamWeaver je editor koji se koristi za izradu web stranica. Svako ko se bavio web dizajnom verovatno je upoznat sa veinom opcija koje nudi ovaj alat. DreamWeaver omoguava da se na laki nain napravi sajt, jer program sam u sebi sadi gotove kodove, nije potrebno svaki kod pojedinano kucati, dovoljno je samo da kliknete recimo na Insert Pictures i odaberete sliku, a program e sam da ispie kod koji je potreban kako bi vam slika bila prikazana na web stranici.

Adobe Flash se nekad zvao Macromedia Flash, ali nakon kupovine ovog alata od stane firme Adobe promenuto je ime. Flash sajt je u principu jedan jedini fajl. Da bi se on mogao itati potrebno je imati instaliranFlash player. Glavna mo flash sajta jestedinaminostweb stranicatj. muzika, pokreti itd. Veoma jeatraktivanza oko ilako se prodaje neupuenim direktorima firmi. Glavni nedostatak jeste da pretraivai ne mogu itati Flash pa je oteeno pozicioniranje na pretraivaima.

WordPress omoguava da napravite web sajtove i onlajn aplikacije. Mnogi aspekti, ukljuujui i lakou upotrebe i proirenja, uinili su WordPress najpopularnijim web alatom. To je najsavremenija platforma za linu izradu sajta, usredsreena na estetiku, web standarde i korisnost. WordPress funkcionise tako to nudi razne ekstenzije (teme za sajt, sat, kalendar...). Postoje razni sajtovi koji nude sve ovo sasvim besplatno, tako da vam poznavanje programskih jezika nije ni potrebno. Takoe po internetu se mogu nai razni tekstualni i video tutorijali o korienju WordPressa. Sve je vie sajtova na internetu koji su napravljeni u ovom alatu.

Joomla! je slobodni sistem za upravljanje sadrajem otvorenog koda koji je napisan u programskom jeziku PHP, za objavljivanje sadraja na webu i intranetu, uz korienje MySQL baze. Joomla! omoguava da napravite web sajtove i onlajn aplikacije ba kao i WordPress. U principu Joomlu! i WordPress su alati sa slinim funkcijama, sa tim da je Joomla! sporija i sa vie greaka od WordPess-a.

Tipografija

Obino uspean web sajt ima samo nekoliko tipografskih pisma koja su od slinog stila, umesto da koristite niz razliitih pisama. Poeljno je da sajt treba da koristi Sans Serif ili Serif font, a ne kombinacija ova dva. Tipografija na sajtovima mora biti oprezna sa iznosom pisama koje koriste, dobar dizajn e ukljuiti nekoliko slinih tipografska pisma, pre nego niz vie njih. Veina pretraivaa prepoznaje odreeni broj sigurnih fontova, to dizajneri uglavnom koriste kako bi izbegli komplikacije. Veina rasporeda na sajtu sadre razmake bele boje, da bi razbili tekst u stavovima, i treba da se izbegavaju centaralno poravnati tekstovi.

Izgled web stranice

Web stranice treba da budu dobro rasporeena kako bi se korisnici lake snalazili na sajtu. Takoe, za navigacione svrhe, izgled stranice samog sajta treba da ostane ista na svim stranama. Pri pravljenju sajtove, vano je uzeti u obzir irinu stranice, to je od vitalnog znaaja za poravnavanje objekata i po izgledu dizajna. Najpopularniji sajtovi obino imaju irinu blisku do 1024 piksela. Veina listova su takoe poravnate, da objekti izgledaju estetski prijatnim na veim ekranima.Fluidni raspored se razvio oko 2000. godine kao zamena za HTML tabele na bazi rasporeda, kao odbacivanje mrea zasnovanog na dizajnu i kao princip dizajna, ali su vrlo spori da budu usvojeni. Pretpostavka je da e itaoci imati ureaje razliitih ekrana ili Windows rezolucija, i razliitih veliina i da ne postoji nita to dizajner moe da uini da to promeni. Shodno tome, dizajn bi trebalo da bude razbijen u delove kojei se alju pretraivau a koja e biti ugraeni u ekran prozora pretraivaa, najbolje to mogu.

Kvalitet koda

Kada kreirate sajt, dobra praksa je da se on prilagodi standardima. Ovo ukljuuje greke u kodu, bolji raspored koda kao i pravljenje. To se obino radi preko opisa koji odreuje koji element radi. Sajt koji nije u skladu sa standardima je neupotrebljiv ili sklon grekama. Standardi se odnose na pravilan raspored strana za itanje, kao i uveravanje da su kodirani elementi na odgovarajui nain zatvoreni. Provera preko W3C se moe uraditi samo kada je napravljena ispravna DOCTYPE deklaracija, koja se koristi da naglasi greake u kodu. Sistem identifikuje greke i oblasti koje ne odgovaraju standardima web dizajna. Ove informacije mogu biti ispravljena od strane korisnika.

Vizuelni dizajn

Dobar vizuelni dizajn na sajtu identifikuje i radi za svoje ciljano trite. Ovo moe biti starosna grupa ili poseban deo kulture, i zato dizajner treba da razume trendove svoje publike. Dizajneri takoe treba da shvate tip sajta to projektuju, to znai poslovni sajtovi ne treba da budu osmiljeni kao socijalni sajt za primer. Dizajneri takoe treba da shvate vlasnika ili poslovni sajt to se predstavlja, da se uvere da su pozitivno prikazani. Estetika ili ukupni dizajn na sajtu ne treba da se sukobi sa sadrajem, ve da olakava korisniku samu kontrolu i da moe lako da pronae eljene informacije ili proizvode itd.Iskustvo pri dizajnu

Da bi korisnik mogao da razume sajt, on mora biti u stanju da shvati kako funkcionie sajt. Ovo utie na njihovo iskustvo. Korisnikovo iskustvo se odnosi na raspored jasnih instrukcija i etiketiranje na web sajtu. Korisniku mora biti jasno kako oni mogu da komuniciraju na sajtu. U odnosu na duu upotrebu, korisnici moraju da doivive korisnost tog sajta, ako elimo da nastave da ga koristite i da opet poeelele da posete taj sajt. Sa korisnicima koji su obueni za sajta koji koriste, ovaj uticaj se direktno odnosi na to kako oni doivljavaju sajtove, to podstie dalju upotrebu. Zato korisnici sa manje iskustva imaju manje verovatnoe da vide prednost ili korisnost nekih sajtova. Zbog toga, sajt mora biti napravljen tako da svima bude jasan, navigacija da se nalazi na svim stranama na istom mestu i da bude itka i jasna, sadraj da bude prilagoen uzrastu kome je namenjen i da stranice ne budu nabacane slikama, ve da sve bude jasno, vidljivo i itko.

5. Izrada web sajta i njegova primena u obrazovanju

U ovom poglavlju bie objanjeno na primerima kako se HTML primenjuje u obrazovanju. Na poetku rada u uvodu napomenuto je da je napravljen sajt za budue studente smera Dizajner medija u obrazovanju na Pedagokom fakultetu. Sajt se zove Upii lako i namenjen je za polaganje predmeta iz Informatike. Poto sam i ja bila u poziciji da polaem prijemni ispit iz predmeta Informatika znam kolike su muke nai potreban materijal za polaganje prijemog ispita. Upravo iz tog razloga odluila sam se za ovaj sajt. Naravno ovaj sajt osim to nuditi potrebno gradivo koje se nalazi na jednom mestu on ima jo prednost, a to su da je sasvim besplatan i samim time dostupan svim buduim studentima ovog smera, dovoljno je samo da imate izlaz na internet i neki od pretraivaa kako bi mu pristupili. Sajt Upii lako moete nai na adresi http://www.upisilako.freeiz.com. Sajt je pisan u HTML jeziku jer je on jedan od lakih jezika i brzo se ui, a pritom je i besplatan. HTML jezik ne zahteva veliku hardversku podrku, a njegovim korienjem se u isto vreme olakava razumevanje procesa web dizajna. U daljem tekstu nai e te detaljno objanjen svaki korak izrade web sajta po etapama.

HTML (HyperText Markup Language) je veoma jednostavan jezik koji slui za prikazivanje sadaja na internetu. Ovaj jezik predstavlja standard za internet dokumente. Sa razvojem interneta dolo je do pojave nove vrste dokumenata - hipertekstova. To je ustvari tekst koji sadri veze ili linkove ka drugim dokumentima ili na samog sebe. Hipertekst je skup stranica u obliku datoteka, meusobno povezanih linkovima koji se nalaze unutar stranice. Na ove linkove se moe kliknuti. Za razliku od obinog teksta, koji se ita linearno (sleva na desno, odozgo nanie), hipertekst se ita pratei hiper-veze u tekstu, dakle, ne mora na linearan nain, ve moemo da pratimo veze na bilo koji deo stranice. Postoji vei broj jezika koji omoguavaju da se precizno opie izgled i sadraj jednog teksta.

Od posebnog znaaja su jezci: SGML (skr. od Standard General Markup Language), TeX i LaTeX (za matematike tekstove), PostScript (jezik laserskih tampaa), RTF (skr. od Rich Text Format), ...

Najznaajniji jezici za opis hiperteksta su: SGML, HTML (skr. od HyperText Markup Language), pojednostavljena verzija SGML-a, XHTML (skr. od Expandable HTML) i XML (skr. od Extensible Markup Language, "kompromis" izmeu preterane sloenosti SGML-a i jednostavnosti HTML-a; njegova standardizacija je u toku)

Vrste tagova koji se koriste u HTML jeziku su: prosti tagovi - za opisivanje jednostavnih elemenata logike strukture. Oblika su: sloeni tagovi - su zagrade oblika y kojima je opisan izgled dela teksta y. atributi - sloenih obeleja oblika: y koji pruaju dodatne informacije, obino o grafikom izgledu, dela teksta y

Pisanje HTML koda

Za pisanje HTML koda, predlaem da koristite najjednostavnije alate. Na primer NotePad (za Windows) ili TextEdit (za Mac) e biti sasvim dovoljni. Kad jednom shvatite osnovu HTML koda , moete da preete na naprednije alate, ili ak na komercijalne programe kao to su FrontPage, Dreamweaver, Fash... Ukoliko radite u NotePad-u ili TextEdit-oru obratite panju kad snimate web stranicu da je snimite u .html ili .htm formatu kako bi je pretraiva prepoznao i otvorio.

Ako ste otvorili neki od editora napiite na beloj povrini npr. Primena internet tehnologija u obrazovanju (slika 1).

(slika 1)

Zatim idite na opciju FileSave As i snimite kao test.html. U koliko ste stranicu snimili u navedeni format potrebno je startovati pretraiva (Internet Explorer, Chrom, Mozzilu,Operu...) . U meniju izabrati opciju FileOpen pri emu se otvara dijalog prozor Open i pritiskom na dugme Browse pronai html stranicu test.html . Nakon aktiviranja dugmeta OK, dobija se prozor koji predstavlja izgled HTML stranice u npr. Internet Exploreru.

HTML komande se piu u vidu tzv. TAG-ova. Jedan tag je ustvari komanda koja govori pretraivau ta i kako da uradi tj. na koji nain da prikae sadraj vae stranice. HTML tagovi su "case insensitive" tj. svejedno je da li ih piete malim ili velikim slovima. Tagovi se piu unutar oznaka "< >" Primer: -

Ovaj tag se nalazi na poetku svakog HTML dokumenta govori pretraivau da je fajl koji je upravo poeo da uitava HTML dokument i da kao takvog treba i da ga prikae. Na kraj HTML dokumenta se stavlja zavrni HTML tag: . Ovaj tag govori pretraivau da je to kraj HTML dokumenta. (slika 2)

(slika 2)

Veina tagova ima i poetni i zavrni tag. Zavrni tag se dobija dodavanjem znaka "/" i oznaava mesto na kom prestaje dejstvo poetnog taga.

Struktura

Minimalna struktura HTML dokumenta obuhvata tagove:.... - zagrade HTML teksta;... - zagrade zaglavlja, sadri meta-definicije HTML dokumenta;........ - zagrade za naziv HTML dokumenta i.... - zagrade teksta obeleenog dokumenta.

Head deoSvaki HTML dokument se sastoji od dva dela: 1. zaglavlja (engl. head) 2. tela (engl. body)

Zaglavlje se odvaja tagovima i , a telo dokumenta tagovima: i . Sve ono to se napie u zaglavlju dokumenta nee se prikazati u prozoru browsera ve obino slui samo da prui neke informacije o stranici.

Body deo

Sve ono to je napisano izmeu tagova i predstavlja telo dokumenta i pojavie se kao sadraj prezentacije u prozoru pretraivaa..Izgled proste stranice (slika 3):Upisi lakoOvde se pise tekst web sajta

(slika 3)

Komentar - je dodatna opcija koja omoguava da se obelei komentar u HTML obeleenom tekstu koji se nee videti u prikazivanju dokumenta.

Primer:

Header - to su naslovi (engl. headers) koji se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za naslov ima opti oblik: Naslov gde n uzima vrednosti od 1 do 6.

Odeljak (engl. division) opisuje se zagradama ... . Ovaj tag moe imati atribut za pozicioniranje ALIGN sa vrednostima CENTER, RIGHT ili LEFT.

Paragraf ili Pasus (engl. paragraph) obeleava se zagradama ... . Ukoliko u ravnom tekstu sledi pasus za pasusom, tag se moe izostaviti. Ovaj tag moe imati atribut za pozicioniranje ALIGN sa istim vrednostima kao tag .

Novi red (engl. break) obeleava se etiketom
. Ovo je prosti tag i ne postoji kraj taga .

Razdvojna linija (engl. rule) obeleava se etiketom sa opcionim atributom NOSHADE. Ovo je prosti tag i ne postoji kraj taga .

Primer:

size debljina linijePrimer 1. - Prosti program u HTML-u.

Upisi lako

Ovde se pise tekst web sajta

Primer 2. - Ispisivanje naslova razliitih veliina (slika 4)

Naslovi

Upisi lako H1 Upisi lako H2 Upisi lako H3 Upisi lako H4 Upisi lako H5 Upisi lako H6

(slika 4)

Liste u jeziku HTML su navoenje, tj. slue za pregledniji prikaz delova teksta, koji se ne mogu svesti na prethodno opisane elemente (pasus, odeljak, i sl).

Razlikuju se tri vrste lista:1. nenumerisane,2. numerisane i3. neureene liste.

Kod lista, grafiki izgled se ne odreuje automatski.

O listama

Numerisane liste se ubacuju pomou

taga, a nenumerisane liste pomocu

taga. Pojedine stavke liste se definisu pomou

taga (ovaj tag ne zahteva zavrni tag). Osnovna razlika izmeu ove dve vrste listi je ta to e u numerisanim listama ispred pojedinih stavki liste stajati redni brojevi, a u nenumerisanoj listi e stajati dugmad. Nenumerisane liste su liste sa kojima se nabrajaju stavke, bez navoenja rednog broja.

Primer: naslovi tagovi meta tagovi

Kod za prethodni primer je:

naslovi

tagovi

meta tagovi

Opta struktura za ovu vrstu lista je (ul unordered list). Da se promeni okruglo dugme moe se regulisati odgovarajuim atributom. Atribut je type koji moe uzimati vrednosti: circle - okruglo dugme disc - ispunjeno okruglo dugme square - kvadratno dugme

Datoteka 1 liste

Datoteka 2 liste

Primer sa kvadratima: naslovi tagovi metatagovi alt tagovia odgovarajui HTML kod je (Slika 5):

(slika 5)

Numerisane liste

To su liste sa navoenjem rednog broja. Opta struktura je (OL - ordered list):

Datoteka 1 liste

Datoteka 2 liste

Primer: - Numerisana lista (slika 6)

naslovi

tagovi

meta tagovi

alt tagovi

(slika 6)

Ako niste zadovoljni arapskim brojevima koje ovaj tag koristi po default-u, moete upotrebiti atribut type. Ovaj atribut moe imati sledee vrednosti: A - velika slova a - mala slova I - rimski brojevi i - mali rimski brojevi

Gornja lista sa velikim rimskim brojevima:I. nasloviII. tagoviIII. meta tagoviIV. alt tagovi

a odgovarajui HTML kod ( slika 7):

naslovi

tagovi

meta tagovi

alt tagovi

(slika 7)

Neureene liste

Ovaj oblik liste dobijamo pomou taga. Svaka stavka ovakve liste se sastoji iz dva dela: termina koji hoemo da definisemo i njegove definicije. Termini zapoinju tagom, a njihove definicije tagom. Termini se poravnavaju uz levu marginu, a njihove definicije se pojavljuju u novom redu i uvuene su za odreen broj mesta.

Opta stuktura je: datoteka 1 opis datoteke 1 datoteka 2 opis datoteke 2

Primer Neureena lista

Hardver:Opipljiv deo raunara.Softver:Deo raunara koji se ne moe opipati rukom.HTML kod za prethodni primer je (slika 8):

Hardver:Opipljivi deo racunara.Softver:Deo racunara koji se ne moze opipati rukom.

(slika 8)

Lista unutar liste

Unutar neke liste moe se definisati nova lista. Na primer (slika 9):

Prenos podataka putem kabla:

Modemi (dialup)

Iznajmljene linije

Frame relay

Ethernet umrezavanje

HomePNA

HomePlug

Bezicni prenos podataka:

Kratki domet - bluetooth

Srednji domet - IEEE 802.11

Dugi domet - Satelit i prenos podataka preko mobilnih telefona

(slika 9)

Primer 3. - Primer numerisane liste (slika 10)

Numerisane liste

Osnovne funkcije OS su:

upravljanje perifernim jedinicama

upravljanje memorijom

upravljanje procesorom kompjuterskog sistema

upravljanje podacima i programima

kontrola funkcije (ukljucujuci i otkrivanje i otklanjanje gresaka)

(slika 10)

Primer 4. Primer nenumerisane liste (slika 11)

Numerisane liste

Sistem za upravljanje bazama podataka treba da obezbedi osnovne funkcije:

Kreiranje baze podataka,

Ponovni pristup podacima,

Modifikaciju podataka,

Sortiranje podataka,

Kontrola pristupa podacima,

Formiranje izvetaja.

(slika 11)

Primer 5. - Primer numerisane liste ( Slika 12 )

Numerisana list:

naslovi

tagovi

meta tagovi

alt tagovi

Brojana list:

naslovi

tagovi

meta tagovi

alt tagovi

Brojana lista malih slova:

naslovi

tagovi

meta tagovi

alt tagovi

Spisak sa rimskim brojevima:

naslovi

tagovi

meta tagovi

alt tagovi

Spisak sa rimskim brojevima,mala slova:

naslovi

tagovi

meta tagovi

alt tagovi

(slika 12)Primer 6. Primer nenumerisane liste (slika 13)

(slika 13)

Primer 7: - Primer liste unutar liste (slika 14)

Lista unutar liste

kuciste

hardveri

maticna ploca

procesor

softver

(slika 14)Primer 8: - Primer neureene liste (slika 15)

Na osnovu broja programa koji mogu biti istovremeno u memoriji operativni sistemi se dele na:

Monoprogramski operativni sistemi omogucavaju da racunar u memoriji drzi i izvrsava samo jedan program. Primer monoprogramskog operativnog sistema je MS DOS. Multiprogramski operativni sistemi omogucavaju da se u centralnoj memoriji racunara nalazi vise programa istovremeno, od kojih se samo jedan izvrsava u jednom trenutku.

(slika 15)

Formatiranje teksta

Po default-u stranice je poravnat uz levu stranu. Ako se eli da naslov, ili bilo koji drugi element stranice, bude centriran, treba ga staviti izmedju tagova i . Izvravanjem sledeeg koda: OVO JE CENTRIRAN TEKST . dobija se sledei rezultat:

OVO JE CENTRIRAN TEKST

Ukoliko se posebno ne naglasi kojim fontom se eli da bude ispisan tekst na stranici, pretraiva e koristiti default font (a to je obino Times New Roman). Rad sa fontovima u okviru HTML stranice se obavlja pomou taga. Ovaj tag moe imati sledee atribute: face, size i color. Atributom face definiemo tip fonta kojim se eli da tekst bude ispisan. Na jednoj stranici se moe koristiti i vie razliitih fontova. Mora se vodititi rauna da korisnik koji uitava stranicu mora imati instaliran font koji je naveden na svom raunaru. U suprotnom njegov pretraiva e prikazati tekst u default fontu. Zato ne treba koristiti neke egzotine fontove, ve treba upotrebljavati samo iroko rasprostranjene fontove.

Ako elite da stranica bude ispisana na primer "Comic Sans MS" fontom onda treba navesti sledei kod: Ovde napiete va tekst. i dobija se rezultat: Ovde napiete va tekst.

Ako se koriste neki fontovi koji se retko koriste onda bi bilo dobro navesti i nekoliko alternativnih fontova, jedan za drugim, odvojenih zarezom. Ako posetilac stranice na svom raunaru nema instaliran prvi font sa liste, on e ga prikazati u sledeem sa liste, i tako dalje.

Evo primera nekoliko popularnih fontova koji se mogu koristiti na svojim stranicama: Verdana Arial Courier Bedrock Times New Roman Comic Sans MS

Kod je sledei:

Verdana
Arial
Courier
Bedrock
Times New Roman
Comic Sans MS

Pored naina ispisivanja teksta, u okviru stranice moe se upravljati i veliinom slova. Za ove potrebe koristi se size atribut unutar font taga. HTML razlikuje 7 veliina slova koje nose vrednosti od 1 do 7. Podrazumevana veliina je 3. Razmera slova je data: size 1, size 2, size 3, size 4, size 5, size 6, size 7.

Poslednja osobina koja se moe menjati je boja slova u okviru HTML stranice. Za te potrebe koristi se atribut color font taga. Za ovaj atribut vai isto pravilo kao i kod definisanja boja tagom. Dakle, ako se eli dobiti sledei tekst ispisan crvenom bojom: Ovde ide va tekst.

Pomou sledeeg dela koda: Ovde ide vas tekst.

Pored taga HTML poseduje jo mogunosti za obradu teksta. U HTML dokumentima postoji mogunost pisanja podebljanim (bold ili strong) slovima i kurzivom (italic), kao i mogunost podvlaenja (underline) i precrtavanja (strike) teksta. Sledea tabela prikazuje odgovarajue tagove kao i rezultate njihove primene:

bold boldstrong strongitalic italicstrike strike

Osim toga mogu se pisati i slova u indeksu ili eksponentu. Indeks se dodaje pomou taga a eksponent pomou taga . Sledea tabela prikazuje primer njihove primene:H2O H2O 2=4 22=4

Tekst se u pretraivau automatski lomi na kraju reda. Da bi se postiglo da neki deo teksta bude u jednom redu, koristimo sledei deo koda ovde ide va tekst koji se nee prelomiti na kraju reda . Ukoliko je tekst prevelik da stane u jedan red u okviru ekrana, na dnu prozora e se pojaviti horizontalni "scrollbar" i korisnik e morati da skroluje da bi ga proitao. Zato treba biti obazriv sa korienjem ovog taga. Ukoliko se eli da se red prelomi, ali na tano odreenom mestu, to se moe postii korienjem taga. Ovaj tag ne zahteva zavrni tag. Za razliku od
taga koji e obavezno prelomiti red, ovaj tag e prelomiti red samo ako je to neophodno tj. ako je tekst pre njega predugaak da bi stao u jedan red. Ovaj tag takoe omoguava da se prelomi neka dugaka re na kraju reda.

Kada se koristi bilo koji tekst editor prelazak u novi red se postie pritiskom na taster ENTER (ili RETURN), ali ako se isti princip koristi i pri pisanju HTML stranice nee se dobiti isti rezultat. Naime, da bi pretraiva prikazao novi red, to se mora eksplicitno navesti odgovarajuim tagom. Tag za prelazak u novi red je
tag. On ne zahteva odgovarajui zavrni tag.

Prelazak u novi pasus se postie tagom. On ima isto dejstvo kao i prethodni tag sa tom razlikom to e napraviti mali razmak izmeu redova. Na kraju pasusa se moe staviti i njegov zavrni tag, ali veina pretraivaa ga ne zahteva, tako da se slobodno moe i izostaviti. Tekst se, ako se nita ne navede, poravnava uz levu marginu. Centriranje pasusa ili poravnanje pasusa uz desnu marginu se postie align atributom. Align atribut moe imati tri vrednosti: 1. left,2. center,3. right.

Kod koji prikazuje gornji primer je:left center right

Dakle, odgovarajui tagovi za svako od navedenih poravnanja treba da izgledaju ovako:

Ako se eli da se prelazak na neku novu celinu jo vie naglasi koristi se horizontalna linija pomou sledeeg taga:

Liniju se povlai pomou taga. Ovaj tag crta tanku sivu liniju preko cele stranice. I ovaj tag moe sadrati odgovarajue atribute kojima moete regulisati izgled linije. Ako se ne eli da linija bude zasenena, ve potpuno crna potrebno je koristiti atribut noshade. Ako se eli promeniti dimenzije linije, koriste se sledea dva atributa: size i width. Atributom size odredjuje se debljina linije u pikselima, a atributom width odredjuje se duina linije ili u pikselima ili u procentima irine stranice. Ovaj tag takoe moe sadrati align atribut kome se moe dodeliti ista vrednosti kao i za pasus. Boja linije se moe regulisati pomou color atributa na ve opisani nain.

Na primer, ako se eli da se nacrta nezasenena crvena linija koja e biti centrirana i ija e debljina iznositi 6 piksela a protezae se preko 50% irine stranice, potrebno je izvriti sledei kod:

U tekst editorima dugme "TAB" slui za (engl. indent) prikazivanje odredjenog broja praznih mesta. Ali pri pisanju HTML koda iako se u samopm kodu prikazuje dejstvo taba, pri prikazivanju stranice to e biti bez ikakvog efekta. I u HTML dokumentu se moe napraviti prazno mesto pomou oznake &nbsp. Ova oznaka ostavlja jedno prazno mesto. Ako se eli pet praznih mesta jednostavno se napie pet ovakvih oznaka jednu za drugom odvojenih takom-zarezom: &nbsp. Pored ove oznake mogu se koristiti i sledee (u tabeli prva kolona oznaava HTML oznaku, a druga rezultat koji se dobija u okviru HTML strane): < > & &

Primer 2: - Rad sa prelomom linije (slika 16)

Rad sa prelomom linije Skrolujte me desno, skroz desno do ivice,dok ja uz put izlistavam na koje vi traite od mene, i koji su dostupni samo onima koji skroluju i skroluju....

(slika 16)

Boje

Pozadina i tekst na HTML stranama mogu biti u razliitim bojama, jer HTML podrava itav spektar boja. To se postie pomou atributa u okviru taga. Atributi se ubacuju u poetni tag i slue da detaljnije opiu dati tag.

Boja pozadine se odreuje atributom bgcolor koji je deo taga. Posle svakog atributa se stavlja znak jednakosti koji slui za dodelu vrednosti datom atributu, a vrednost atributa se obavezno stavlja izmeu znakova navoda.

Boje se mogu definisati na dva naina: preko predefinisanog engleskog naziva boje (npr. "yellow" za utu boju) ili preko heksadecimalne RGB vrednosti ispred koje obavezno treba staviti simbol #(npr.#ffff00).

Znai, boje se mogu odrediti sa RGB palete. Vrednost atributa boje ima opti oblik "#cczzpp" gde su cc, zz i pp redom heksadecimalne vrednosti za intenzitet crvene, zelene i plave boje.

Svaka od ovih vrednosti moe biti broj izmeu 0 i 255 (u dekadnom brojnom sistemu) ili izmeu 0 i FF (u heksadecimalnom brojnom sistemu). Boje se mogu odrediti navoenjemnaziva boje na engleskom umesto kombinacijom heksadecimalnih cifara prema tabeli koju je data na strani SGIR (skr.od Service General Informatique et reseaux, Universite Rene Descartes, Paris). U sluaju da se prilikom navoenja taga BODY izostave opisani atributi, navigator im dodeljuje predefinisane vrednosti.Na primer, ako se eli da se promeni boja pozadine u utu tada tag treba da glasi: ili Oba primera koda e dati isti rezultat.

Pored pozadine, moe se menjati i boja teksta, pomou text atributa. Na primer, ako se na prethodno definisanoj stranici dodaju zelena slova treba napisati sledei kod:

Takoe, tokom izvravanja stranice osnovna boja slova, opisana atributom TEXT se moe promeniti pomou atributa COLOR taga .

Pozadina ne mora da bude samo u jednoj boji. Vrlo esto se mogu sresti efektne prezentacije koje u pozadini imaju razliite slike. Ove slike su elektronskom obliku u JPEG ili GIF formatu. eljenu sliku treba prvo smesti na odreeno mesto u okviru prezentacije. Najjednostavnije reenje je da se nalazi u istom direktorijumu gde se nalazi i prezentacija. Pozadina u obliku slike se definie pomou odgovarajueg atributa u body tagu. Atribut se u ovom sluaju zove background i nema nikakve slinosti sa atributom bgcolor koji definie samo boju pozadine. Na primer, ako se eli da se kao pozadina stavi slika "upisilako.jpg" tada e body tagizgledati:

Moete primetiti da postoje i background i bgcolor tag, i to ne sluajno. Mnogi ljudi sa sporijim modemima prilikom surfovanja internetom iskljuuju u svojim pretraivaima automatsko uitavanje garfike. To znai da se nee uitati pozadina koja je definisana u toj stranici. Problem nastaje u sluajevima kada je tekstu dodeljena neka svetla boja, a pretraiva ne uita pozadinu, ve i pozadina ostane bela. Bleda (ili bela) slova na beloj pozadini se jednostavno nee videti. Zbog toga uvek dodelite i neku boju vaoj pozadini tako da u gore opisanoj situaciji vaa slova i dalje budu itljiva. U prethodnom delu teksta je naglaeno da je HTML nastao zbog potrebe da se opie dokument u formi hiperteksta. Ono to je uslovilo njegovu veliku popularnost jesu linkovi.

Linkovi u HTML dokumentu omoguavaju da se jednim klikom mia promeni navigacija i otvori neka druga stranica. Kad dovedete kursor mia iznad linka desie se dve stvari: pokaziva mia e se pretvoriti u ruku sa ispruenim prstom (to simbolino govori da tu moete da kliknete), a sam link e promeniti boju, obino u crvenu, ako se drugaije ne definie. Osim toga boja linkova koji su ve poseeni bie drugaija od ostalih linkova. Na taj nain korisnik jednostavno prepoznaje koje stranice je ve posetio, a koje nije.

Boje linkova se mogu definisati pomou tri atributa: Link - definie poetnu boju linka u okviru stranice Vlink - definie boju linka u okviru stranice koji je poseen, Alink - definie boju linka u okviru stranice koji je aktivanPrimer: - Definisanje boje linkova u plavo, poseenih linkova u ljubiasto, a aktivnih linkova u crveno se obavlja na sledei nain:

Ako navedeni atributi nisu korieni stranica prikazuje default vrednosti. U Internet Exploreru pozadina je po defaultu bela, tekst crn, linkovi plavi, poseeni linkovi maslinasto-zeleni, a aktivni linkovi crveni.

Primer 1: Boje pozadine i slova (slika 17)

Boje pozadine i slova Ovaj naslov je crven zbog atributa TEXT

a ovaj naslov je plav zbog etikete FONT

(slika 17)

Primer 2: Boje atributa u tagu body ( Slika 18 )

Atributi u etiketi BODY

Ako zelis da polozis ispit iz informatike klikniovde
Namenjeno je prvenstveno buducim dizajnerima medija u obrazovanju.

Boja za atribut LINK

Boja za atribut VLINK

Boja za atribut ALINK

(slika 18)

Linkovi

Pojam linka je povezan sa pojmom hiper veze (eng. HyperLink). Hiper veza predstavlja mogunost da se itanje teksta iz vora 1 nastavi u voru 2. Ovakva hiper-veza se enkodira pomou posebnog taga anchor koji povezuje fragment teksta u voru 1 sa adresom vora 2. Opti izgled taga za anchor je oblika ... .

Sintaksa ovog taga podrazumeva da se u voru 1 opiu: fizika pozicija u tom voru sa koje se prelazi na tekst u voru 2 i fizika lokacija na kojoj se nalazi tekst u voru 2.

Ove dve pozicije se nazivaju, redom, polazni i dolazni vor. Polazni vor oznaava u tekstu onu poziciju sa koje se prelazi na neki drugi tekst i kodira se pomou atributa href: pozicija u voru 1 sa koje se prelazi na vor 2 .

Navigator obino interpretira polazni vor u HTML dokumentu kao fragment teksta na koji se moe "kliknuti", grafiki istaknut podvlaenjem i drugom bojom slova od boje slova samog teksta.

Dolazni vor je ili adresa neke datoteke ili tag koja obeleava deo teksta. Definie se pomou atributa NAME: tekst u voru 2 na koji se prelazi iz vora 1 . Atribut NAME nije obavezan. Ukoliko se on izostavi, navigator se pozicionira na poetak dokumenta u voru 2, a inae na naznaenu poziciju. Adresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od engl. Uniform Resource Locator), koji omoguava da se precizno imenuje adresa vora 2, ma gde on bio fiziki lociran. U opisivanju adrese koja upuuje na vor 2 razlikujemo vie sluajeva u zavisnosti od toga koliki je deo URL-a poznat u tom trenutku. Linkovi koji se mogu definisati u okviru jednog HTML dokumenta mogu se podeliti na tri vrste.

Prvu vrstu bi inili linkovi sa kojima se moe pristupiti nekom drugom delu iste te stranice u kojoj se link i nalazi. Primer moe biti da se na kraju stranice napravi link koji korisnika koji ga aktivira vraa na vrh stranice. U polaznom tekstu se navodi tag (polazni vor): tekst na koji se moe "kliknuti" u dolaznom tekstu se navodi tag (dolazni vor): dolazni tekst

Za definisanje svih ovih linkova zajedniko je da se dobijaju istim parom tagova: i . Za prvu vrstu linkova moramo prvo da napravimo oznaku na nekom mestu u dokumentu na koje elimo da preemo kad kliknemo na odgovarajui link. Oznaka se dobija stavljanjem atributa name u tag.

Primer: . Izmeu poetnog i zavrnog taga moe stajati bilo koji element prezentacije (tekst, slika), a ne mora stajati nijedan element, kao to je sluaj u prethodnom primeru. Ovaj tag ne proizvodi nikakav vidljiv efekat u HTML dokumentu, on deluje u pozadini dokumenta i slui pretraivau da se lake orijentie. Da bi se definisalo mesto odakle se eli nastaviti sa pregledom mora se navesti atribut href u tagu. Neka se prethodni primer nalazi u okviru stranice upisilako.html tada treba navesti: Odavde se odlazi na kraj stranice

Sada kada korisnik klikne miem na link " Odavde se odlazi na kraj stranice" odlazi se na de stranice koji je definisan imenom kraj.

Drugu vrstu bi inili linkovi do neke druge stranice u okviru iste te prezentacije. Primer mogu biti linkovi za kretanje napred i nazad kroz prezentaciju. Aktiviranjem druge vrste linkova naputa se tekua stranica i dalje izvravanje se nastavlja na nekoj drugoj stranici tekue prezentacije. To se postie definisanjem taga sa atributom href i nazivom HTML fajla do kojeg se eli da se napravi veza.

Na primer ako se eli da se napravi veza do procesori.html treba napisati: Veza do stranice procesori.html

Kada se miem klikne na tekst "Veza do stranice procesori.html" u pretraivau e se prikazati stranica procesori.html. Link odvodi na vrh stranice ija se adresa nalazi u okviru href atributa. Ako bi smo eleli da nas link odvede do nekog odreenog mesta u toj stranici onda bismo na to mesto prvo morali postaviti oznaku sa name atributom kao to je uraeno u prethodnom sluaju. Ukoliko se fajl do kojeg vodi link nalazi u nekom drugom folderu, tada kao vrednost href atributa mora se postaviti celokupna putanja koji vodi do tog fajla (npr. c:\Tamy\Desktop\UpisiLako\proesori.html). Znai ako je pozicija vora 2 u nekom dokumentu izvan onog dokumenta koji sadri vor 1, ali se obe nalaze na istom serveru, onda se adresiranje vri navoenjem relevantnog dela puta koji je potreban da bi se iz vora 1 definisao put do vora 2. Na primer, www.upisilako.freeiz.com je ime servera na kome se nalaze oba hipertekstuelna vora. Neka su direktorijumi organizovani kao na donjoj slici i neka X sadri datoteke a i b, Y datoteku c, a Z datoteku d. Tada pod apsolutnom adresom datoteke c podrazumevamo adresu http://www.pef.so.ac.rs/X/Y/c. Apsolutnom adresom je odreen jednoznano URL datoteke c. Ali unutar jednog servera se mogu definisati i relativne adrese datoteka.

Na primer: Za tekst u datoteci a, adresa datoteke b je b; adresa datoteke c je Y/c; adresa datoteke d je Y/Z/d;

Za tekst u datoteci c, adresa datoteke a je ../a (simbol .. oznaava neposredno nadreeni direktorijum); adresa datoteke d je Z/d;

Za tekst u datoteci d, adresa datoteke a je ../../a; adresa datoteke c je ../c;

Treu vrstu bi inili linkovi do stranice u nekoj sasvim drugoj prezentaciji koja moe biti postavljena na raunaru koji se nalazi na nekom sasvim drugom serveru. Da bi se pristupilo toj prezentaciji potrebno je navesti celu web adresu te prezentacije. Opti oblik adrese koja se pojavljuje kao vrednost HREF atributa je scheme://server.domen [:port]/putanja/ imeDokumenta.

Na primer ako se u okviru prezentacije eli uspostaviti veza sa Pedagokim fakultetom u Somboru, ija adresa je www.pef.uns.ac.rs, tada se navodi kod: Pedagoki fakultet

Na stranici e se prikazati tekst "Pedagoki fakultet" i ako se miem klikne na njega u pretraivau e se pojaviti poetna stranica prezentacije Pedagokog fakulteta.

Pored odlaska na neku drugu stranicu linkovi se mogu iskoristiti i za pisanje nove e-mail poruke pomou default programa za elektronsku potu - najvie korieni su Outlook Express ili Netscape Messenger. Pri generisanju nove poruke, ve e biti upisana eljena adresa, a korisniku preostaje samo da otkuca tekst poruke i da je poalje.

Da bi se poslala poruka na mail adresu [email protected] potrebno je u okviru stranice navesti sledei tekst: Posaljite e-mail poruku!

Primer 1: Referisanje unutar jedne datoteke (slika 19)

Primer unutrasnjeg referisanja Osnovi programiranja

Web i jezik HTML ;

O Autoru

Internet

Web i jezik HTML ................
................................
................................
................ Osnovni algoritmi ................
................................
................................
................ Uvod u C ................
................

(slika 19)

Primer 2: Referisanje izmeu datoteka na istom serveru (slika 20)

Dokument A Ovo je datoteka procesori.html iz koje se poziva datoteka procesori.html u istom direktorijumu. Poziv datoteke upisilako.html

Dokument B Ovo je datoteka procesori.html iz koje se poziva datoteka procesori.html u istom direktorijumu.

Poziv datoteke procesori.html

(slika 20)

Slike

Slika koja se prikazuje u okviru HTML stranice moe da se prikae pomou proizvoljnog grafikog formata. Ipak najee se koriste formati JPEG (ili JPG) i GIF. Razlog je veliina slike kao dokumenta i tekoe pri uitavanju. Ova dva formata koriste efikasne metode kompresije i na taj nain se poveavaju perfomanse aplikacije.

U JPEG formatu se uvaju kvalitetnije slike, jer ovaj format podrava 16 miliona boja, a fajlovi su efikasno kompresovani, tako da se slike relativno brzo uitavaju. Sa druge strane GIF format ima samo 256 boja, ali on ima tu prednost da mu se moe zadati transparentnost i da se moe animirati.

U okviru HTML stranice slika se prikazuje pomou taga. Ovaj tag mora imati bar jedan atribut. To je src atribut koji definie naziv, i eventualno lokaciju, grafikog fajla koji elimo da prikaemo u okviru svoje prezentacije. Pri opisu lokacije dokumenta najjednostavniji sluaj je da se dokument slike nalazi u istom direktorijumu gde i HTML stranica. Tada je dovoljno da kao vrednost src atributa postaviti samo naziv odgovarajueg dokumenta.

Tag IMG moe imati razliite atribute koji omoguavaju da se precizno opiu poloaj,dimenzije i odnos slike prema drugim delovima stranice.

Ti atributi su: Atribut za poravnavanje slike u odnosu na margine ALIGN, moe imati vrednosti: za vertikalno poravnavanje: TOP, MIDDLE, BOTTOM za horizontalno poravnjavanje: LEFT, CENTER, RIGHT Atributi za dimenzionisanje slike su WIDTH (irina) i HEIGHT (visina). Atributi koji opisuju poloaj slike su HSPACE i VSPACE Atribut koji opisuje irinu okvira slike BORDER Atribut koji umesto slike daje naziv slike ALT

Ako se nijedan od atributa ne navede slike su poravnate sa tekstom na donju ivicu. Poloaj slike u odnosu na tekst stranice se moe definisati ubacivanjem align atributa u tagu.

Vrednosti ovog atributa i odgovarajue efekte mogu se videti iz sledeih primera:

left - postavlja sliku uz levu marginu:

Odgovarajui tag glasi:

right - postavlja sliku uz desnu marginu:

top - poravnava sliku sa vrhom slova u tekuoj liniji:

bottom - poravnava sliku sa donjom ivicom slova:

middle - postavlja sliku tako je donja ivica slova na sredini slike:

absmiddle - postavlja sliku tako da se sredina slike i sredina slova poklapaju:

Da bi se slika prikazala na sredini stranice potrebno je koristiti tag center.

Da bi se promenila originalna veliina slike, eljena veliina se moe definisati pomou dva atributa: height i width. Vrednost irine i visine stranice se moe zadati ili u pikselima ili u procentima. Da bi slika zauzimala 50% irine prozora i 30% visine prozora HTML stranice, potrebno je napisati sledei kod:

Ako se definie samo height ili samo width atribut, druga dimenzija e biti uveana srazmerno sa definisana tako da e proprocije slika ostati iste. Prazan prostor izmeu slike i okolnog teksta, ili nekih drugih elemenata stranice, moe se definisati pomou dva atributa: hspace i vspace. Vrednost ova dva atributa se zadaje u pikselima.

U okviru stranice moe se definisati i debljina granice pomou atributa border ija sevrednost zadaje u pikselima. Da bi se definisala debljina okvira 5 piksela potrebno je napisati sledei tag:

Slika u HTML dokumentu moe predstavljati i polazni vor u hiper vezi. Dolazna adresa se tada navodi kao kod hiper veze, a umesto teksta koji se moe aktivirati navodi se tag IMG.

Opti oblik je: "tag IMG za eljenu sliku"

Primer:

Sada slika procesor.jpg predstavlja link ka stranici procesori.html. Kada se kikne miem na sliku u pretraivau se otvara slika procesori.html. Takoe pretraiva e automatski uramiti sliku koja predstavlja link sa ramom one boje koja je definisana za link i vlink atributima u okviru taga. Da bi se dobila slika bez takvog okvira treba definisati border="0" u okviru taga. Postoji jo jedan koristan atribut taga. To je alt atribut. Ovaj atribut e u sluaju da pretraiva korisnika stranice iz bilo kog razloga ne uita sliku, na onom mestu gde bi trebalo da stoji slika prikazae tekst koja se napie kao vrednost ovog atributa. Ovo moe biti korisno naroito ako je slika postavljena kao link, jer e onda i u sluaju neuitavanja slike korisnik znati gde vodi taj link.

Primer korienja ovog atributa je:

Ukoliko browser korisnika ne uita sliku upisilako.png korisniku e se na definisanom mestu pojaviti tekst "Upisi lako".Primer 1: - Primer upotrebe slike u okviru HTML stranice (slika 22)

Slika u okviru HTML-a Ovako izgleda slika kad se postavi na web stranicu

(slika 22)

Primer 2: - Primer slike i linka (slika 23)

Dobrodosli! Hvala! Dobrodosli na sajt upisi lako!.

(slika 23)

Tabele

Tabela je i u HTML-u dvodimenzionalna matrica iji se elementi nazivaju elije (engl. cell). elija moe sadravati raznovrsne informacije: brojeve, tekst, boje, liste, hiper-veze, slike, itd. Tabela se sastavlja tako to se opisuju redom njene vrste ili redovi (engl. row) i sadraj svake elije u redu. Tabela se opisuje uz pomo sloenog taga TABLE koji moe sadravati vie atributa: BORDER - opisuje irinu spoljanjeg okvira tabele; CELLSPACING - opisuje irinu linije koja razdvaja dve elije; CELLPADDING - opisuje prostor oko sadraja elije; WIDTH - opisuje ukupnu irinu tabele.

Nadnaslov tabele se moe zadati tagom CAPTION koja se ispisuje iznad tabele i moe imati atribut ALIGN: za vertikalno poravnavanje: top, middle, bottom za horizontalno poravnavanje: left, center, right

Svaki red u tabeli se opisuje izmeu tagova i (engl. table row). I tag TR moe imati atribute: za horizontalno poravnjavanje, atribut ALIGN sa vrednostima: left. center, right za vertikalno poravnavanje, atribut VALIGN sa vrednostima: top, middle, bottom

Pojedinana elija se opisuje izmeu tagova i . Tag TD, pored atributa ALIGN i VALIGN, moe imati i atribute: za horizontalno spajanje elija: ROWSPAN (spaja elije iste vrste) i za vertikalno spajanje elija: COLSPAN (spaja elije iste kolone).

Tag ima ista svojstva kao tag s tom razlikom to obezbeuje da sadraj elije bude automatski centriran i boldovan. Tabela ne mora da sadri tag, ali mora da sadri bar jedan tag, u koji se smeta sadraj tabele.

Opta struktura jedne tabele je sledea (slika 24):

naslov tabele prva elija headera poslednja elija headera prva elija prvog reda poslednja elija prvog reda prva elija poslednjeg reda poslednja elija poslednjeg reda

(slika 23)

Treba naglasiti da ako se tekstu van tabele upotrebom taga dodeli neki font razliit od default fonta, u Internet Exploreru e se ovaj tag odnositi i na tekst u elijama tabele. U Netscape Navigatoru e tekst u tabeli biti prikazan u default fontu. Da bi i Netscape Navigator tekst u tabeli prikazao u eljenom fontu treba u svaku eliju posebno da se ubaci tag. Ako se u kodu tabele ne navede odreeni atribut tabele nemaju graninu liniju, border. Da bi se dodelila tabeli granina linija odgovarajue debljine, u tag se stavlja atribut border, a vrednost debljine linije se zadaje u pikselima. Sledei primer pokazuje upotrebu atributa border:

Prezime : Ime : Profesija :Grozdi Tamara Student

Kod kojim se dobija prethodni primer (slika 24):

Prezime : Ime : Profesija : Grozdi Tamara Student

(slika 24)

Osnovna razlika izmeu teksta koji se nalazi izmeu i tagova je u tome to je tekst u prvom sluaju boldovan i centriran unutar elije, a u drugom sluaju tekst nije podebljan i poravnat je uz levu ivicu elije. Ivica tabele se priljubljuje uz sadraj elija maksimalno koliko je mogue. irina kolona je odreena prvom elijom u svakoj koloni. Naravno, ovim se ne iscrpljuje mogunost formatiranja tabela. U tu svrhu se koriste razni atributi. Treba napomenuti da tabela uopte ne mora da bude uniformno formatirana, tj. da se svakoj eliji moe dodeliti neko drugo svojstvo pomou atributa koji se defniu unutar tagova.

Da bi tabela imala odgovarajue dimenzije koriste se atributi height i width. Vrednost ovih atributa se kao i kod taga moe zadati ili u pikselima ili u procentima veliine prozora HTML browsera. Preporuuje se drugi nain definicije, jer onda izgled stranice ne zavisi od rezolucije ekrana. Sledei primer predstavlja tabelu sa irinom od 80% i visinom od 30%:


Odgovarajuci HTML kod je (slika 25):

Prezima: Ime : Profesija: Grozdi Tamara Student

(slika 25)

Da bi kolone bile jednake irine trebalo bi u odgovarajue ili tagove ubaciti atribute width sa eljenom irinom. U sluaju tabele iz prethodnih primera to znai da treba u svaki tag definisati atribut width sa vrednou 33%. Tako, na primer, se moe realizovati tabela koja e se protezati preko cele irine stranice, a svaka kolona e zauzimati tano treinu irine tabele:Prezime : Ime : Profesija :Grozdi Tamara Student

HTML kod je (slika 26):

Prezime : Ime : Profesija : Grozdi Tamara Student

(slika 26)

Dva atributa koja imaju veliku primenu su i cellpadding i cellspacing. Pomou cellpadding atributa definie se rastojanje izmeu sadraja elije i njene granine linije. Vrednost ovog atributa se zadaje u pikselima, ako se ne navede nijedna vrednost podrazumeva se da je 1 piksel. Pomou cellspacing atributa se moe odrediti rastojanje izmeu pojedinih elija tabele, tj. debljina linije izmeu elija. Vrednost ovog atributa se zadaje, takoe, u pikselima ako se ne navede nijedna vrednost podrazumeva se da je 1 piksel. Ako se u prethodnoj tabeli definie vrednost cellpadding atributa od 30 piksela, a vrednost cellspacing atributa od 10 piksela dobija se sledea tabelu (slika 27):


Prezime :Ime :Profesija : Grozdi Tamara Student

(slika 27)HTML doputa mogunost da se pojedine elije tabele proteu du vie redova ili kolona tabele. Ovakav efekat se moe postii pomou atributa colspan i rowspan, koji se ubacuju u ili tag one elije koja se eli posebno da formatira. Vrednost ovih atributa se zadaje brojem kolona ili redova tabele du kojih treba da se prostire data elija. U sledeem primeru je prikazana upotreba ovih atributa:

Procesori :

AMD Sempro 145 Intel Celeron 6465 AMD Athlon II X2 AMD A-4-3300podnoje AMD AM3 Intel 1155 AMD FM2 AMD FM1tip proces. AMD Sempro Intel Celeron AMD Ahtlon II AMD A-series APUbr. jezgara 1 1 2 2tehnika izrade 45nm 32nm 32nm 32nmvidi

HTML kod je (slika 28):

ProcesoriAMD Sempro 145INTEL Celeron 6465AMD Athlon II X2AMD A-4-3300vidipodnozjeAMD AM3Intel 1155AMD FM2AMD FM2Tip procesoraAMD SemproIntel CeleronAMD Athlon IIAMD A-series APUbr. jezgara1122tehnika izrade45 nm32 nm32 nm 32 nm

(slika 28 )

Primer 1: Boje u tabeli (slika 29)

Igranje sa bojama

(slika 29)Forme i elementi forme

Forma doputa da se uspostavi komunikacija izmeu korisnika i servera: korisnik popunjava formu i alje je ka serveru. Polazei od podataka iz forme vri se odgovarajua obrada na serveru, a o rezultatima korisnik nekad bude obaveten. Obavetavanje se ostvaruje tako to server generie dokument u HTML-u koristei se informacijama iz formi i vraa korisniku na elektronski nain. Osnovna razlika izmeu razgledanja neke strane i formi se ogleda u tome to je za "obinu" hpertekstuelnu stranu dovoljno "kliknuti" na hiper vezu sa adresom x da bi se prelo sa tekueg na dokument na adresi x dok se kod formi uspostavlja veza sa adresom x nekog programa na serveru.

Preko formi mogu se realizovati razliite aplikacije kao to su: upiti nad bazama podataka ili na pretraivaima; identifikacija pristupa odreenom servisu servera; elektronska trgovina (prijem narudbine i regulisanje naina plaanja); obavetavanje o promenljivim podacima (npr. vreme polaska aviona odreenog datuma, i sl.)

Forma se implementira preko taga iji je opti oblik: ...

Tag sadri dva atributa: atribut ACTION koji sadri adresu (URL) programa na serveru; atribut METHOD kojim je opisana metoda prenosa argumenata programa. Ovaj atribut moe imati vrednosti GET ili POST. ee se koristi metoda POST. Metoda GET ima ogranien broj parametara: mora vaiti da je duina URL + duina parametara < 1KB

Primer HTML koda pomou koga se definie forma je:. . .

Kada se pozove akcije sa navedene forme sa servera e se pozvati stranica upisilako.html, i to pomou post metoda. U okviru taga mogu se navesti i drugi tagovi koji opisuju, na primer, izgled polja za unos podataka u formu, izgled polja za potvrdu, i sl. Tagovi se ne mogu postavljati jedan u drugi. Zajedniki atributi razliitih tagova u okviru forme su name, kojim se definie ime promenljive preko koje e biti izvrena dodela vrednosti, i value, koja predstavlja ili izabranu vrednost u formi ili tekst koji e biti prikazan.

Mogue je upotrebljavati sledee tagove u okviru forme:

: za unos podataka sa atributom TYPE koji opisuje prirodu podataka koji se unose. Vrednosti ovog atributa mogu biti:

SUBMIT - opisuje dugme ijim se pritiskom odailje sadraj popunjeneforme ka serveru:

RESET, koje postavlja sve vrednosti na form-u na predefinisane vrednosti:

CHECKBOX, koje predstavlja polja ija vrednost moe (ali ne mora) bitiizabrana:

Koje programske jezike poznajete?

Paskal CC++Java

RADIO, koje doputa da se izabere tano jedan od izabranih vrednosti:< input type="radio">>Imate li vlastiti raunar?DANE

TEXT, FILE ili PASSWORD, koje oznaavaju da e podatak biti karakterstika niska koju unosi korisnik. Za atribute TEXT i FILE, niska je vidljiva dok se za atributPASSWORD "maskira" predefinisanom vrednou:

HIDDEN, koje definie nevidljivo ulazno polje ija e vrednost biti poslata sadrugim vrednostima iz forma kada se ovaj poalje ka serveru kao, na primer,sledei forma:

Tag i : polje opisuje izbor izmeu moguih vrednosti navedenih u okviru taga . Tag sa atributom SELECTED se uzima kao predefinisana vrednost. Tag se realizuje kao padajui meni sa vrednostima zadatim u okviru taga . Atributi uz tag su:

SIZE kojim je opisan broj elementa u opcija koje e biti prikazane;

MULTIPLE kojim se omoguava izbor viestruke opcija.

Primer za opisani tag je:Oznaite iz koje ste drave:

Tag prikazuje tekst u odvojenom tekst prozoru sa scrollbarovima. Dimenzije prozora su odreene atributima (broj redova teksta) i (broj kolona). Atribut name dodeljuje simboliko ime podruju u kome se nalazi tekst.

Opti oblik ovog taga je

... neki tekst ...

Primer 1: - Primer osnovne upotrebe formi kod HTML jezika (slika 30)

PrijavaUnesite svoj e-mail Unesite korisnicko ime

(slika 30)

Primer 2: - Osnovni elementi forme (slika 31)

Posalji komentar Posaljite svoj komentar Ime Prezime e-mail Vas komentar:

(slika 31)

Primer 3: - Forma za rezervaciju (slika 32)

Prijavni formular za upis Popunite formular Ime Prezime

Prijavljujete se za koji smer? Dizajner medija u obrazovanju
Bibliotekar
Ucitelj
Vaspitac

Da li ste strani dravljanin? Da
Ne

Polazete u kom roku? Prvom
Drugom
Adresa: Grad: Drzava:

Srbija Madjarska Bosna i Hercegovina

Telefon: e-mail

(slika 32)6. Zakljuak

U radu sam nastojala da objasnim ulogu internet tehologija u obrazovanju i kako se piu stranice pomou programskog jezika HTML, kao i nain na koji se on primenjuje u izradi web stranica. Prikazani su osnovni kodovi HTML jezika i priloene su slike kako stranica izgleda kada se snimi u html formatu. Nakon ovog rada trebalo bi da se stekne osnovno znanje za opti i praktian rad. Takoe u radu se moe nauiti neto vie o internetu i njegovoj istoriji, internet protokolima i web sajtovima. Svaka osoba koja koristi interent trebala bi da ima odreena predznanja vezana za internet servise, internet protokole

zavrsni rad - primena internet tehnologija u obrazovanju - tamara grozdic

Documents