rgim21

Izrada web prezentacija

Web prezentacija

● Na narednim časovima ćemo se pozabaviti izradom web prezentacija.

● Pre nego što to uradimo naučićemo nekoliko bitnih stvari o tome kako sve funkcioniše.

Kako funkcioniše www ?

● Kratak odgovor bi bio : veoma komplikovano i uz stalni napor velikog broja ljudi.

● Malo detaljniji odgovor bi bio sledeći:– Na računarima na internetu kojima pristupaju

korisnici postoji program koji se naziva web server.

– Web server na zahtev nekog korisnika može proslediti web stranicu ako ona postoji u okviru dokumenata koje on opslužuje.

– Dokument poslat sa web servera se formatira i prikazuje u web pretraživaču korisnika.


Internetpretraživač

Zahtev

Korisnik

Odgovor

Veb server


● Web server može samo da prosleđuje web strane koje poseduje u okviru dokumenata koje opslužuje i nema mogućnosti da menja njihov sadržaj.

● Zato se ovakve web stranice nazivaju statične.


● Jedini način da web server servira stranice koje mogu menjati sadržaj jeste da ispod sebe poseduje još neku aplikaciju koja će mu to omogućiti.

● Takve aplikacije se nazivaju aplikacioni serveri i koriste se da proslede sadržaj web stranice web serveru koji ih onda prosleđuje svojim korisnicima.

● Takve web stranice se nazivaju dinamičke.

Šta je to http, html,...

● HTTP je skraćenica od HyperText Transfer Protocol. To je mrežni protokol kojim se isporučuju HTML dokumenta, tj. Web stranice.

● HTML je skraćenica od HyperText Markup Language. To je opisni jezik kojim se opisuju elementi na web stranicama i njihovo formatiranje i prikaz u web pretraživačima.

HTML

● Kao što je rečeno ovo je opisni jezik i njegova struktura je dosta labava.

● Najbitnija osobina je da se određeni delovi web stranice koji se nalaze između dva opisna elementa drugačije prikazuju u odnosu na ostale delove.

● Opisni elementi se nazivaju tagovi.<tag> neki element </tag>

HTML

● Postoje različiti tipovi tagova:– Koji opisuju dokument i njegov sadržaj

– Koji opisuju prikaz elementa na renderovanoj stranici

– Koji opisuju kako treba prikazati neki drugi sadržaj

– Koji opisuju akcije korisnika

HTML

● Kako u stvari izgleda realni HTML dokument?● Odgovor je:

Običan tekstualni dokument koji prati određenu strukturu i koji se renderuje u internet pretraživaču.

● Ako mi ne verujete možemo da proverimo!

HTML

● Otvorite vašu omiljenu internet stranicu i pogledajte kako ona u stvari izgleda.

● Ja ću pokazati primer za našu školu:

1.Otvorite internet pretraživač.

2.Otvorite sajt naše škole.

3.Desnim klikom na prazan deo strane pozovite priručni meni i izaberite opciju “View source”.

4.Prikazaće vam se kako stvarno izgleda ta stranica u vidu teksta koji nije renderovan kao u pretraživaču.

HTML

● Sada ide kratko objašnjenje kako sve to radi!● Tag koji počinje sa <!DOCTYPE html PUBLIC...

objašnjava kakav je to dokument.● Kao što svaka verzija nekog programa ima svoj

fajl i verziju u kojoj čuva podatke, tako postoje i različiti internet standardi za stranice.(HTML 3.2, HTML 4.0, HTML 5, XHTML 1.0, ...)

HTML

● Nakon toga čitava stranica prati sledeću šemu:

<HTML> Početak dokumenta

</HTML> Kraj dokumenta

<HEAD> Ovo je zaglavlje koje opisuje dokument </HEAD>

<BODY> Ovo je deo koji će se prikazati korisniku </BODY>

HTML

● Između tagova <HEAD> i </HEAD>, imamo dodatne tagove koji opisuju dokument.

● Postoje razni tagovi koje možemo smestiti ovde i svaki ima neku svoju funkciju, ali mi nemamo toliko vremena da o tome raspravljamo pa ćemo obratiti pažnju samo na neke.

HTML

● <TITLE> i </TITLE> su tagovi koji određuju šta će pisati na naslovnoj liniji korisnikovog pretraživača.(To je ona traka na vrhu prozora ...)

● Takođe to je tekst koji će se prikazati i na jezičku (tabu) korisnikovog pretraživača, ako to program podržava.

● Sve u svemu olakšava korisniku da lakše pronađe baš vašu stranicu u gomili drugih koje je otvorio.

HTML

● Tag <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> opisuje sadržaj dokumenta kao tekstualni i određuje kojim kodnim rasporedom ga treba prikazati.

● Kodni raspored određuje da li će korisnik koji govori nekim drugim jezikom i čiji je računar podešen za drugi kodni raspored videti ispravno tekst ili samo neke nerazumljive simbole.

● Za naša pisma (ćirilica i latinica) najbolje je izabrati UNICODE (utf-8 ili utf-16).

HTML

● U okviru tagova <body> i </body> se nalaze tekst i putanje do slika i/ili drugih tipova podataka, koje treba prikazati na stranici.

● Željeni elementi na stranici su okruženi tagovima, koji opisuju na koji način ih treba prikazati.

● To je najlakše objasniti na primeru.

HTML

<!DOCTYPE html> <html> <head> <title>primer</title> <meta charset="utf-8"/> </head> <body> <h1>zaglavlje 1</h1> <h2>zaglavlje 2</h2> <h3>zaglavlje 3</h3> <h4>zaglavlje 4</h4> <p>paragraf</p> <b>podebljana slova</b><br/> <i>iskrivljena slova</i><br/> <u>linija ispod slova</u> </body> </html>

1. Otvorite notepad na vašem računaru i otkucajte tekst sa desne strane.

2. Kada žavršite snimite dokument kao “primer.html” sa kodnim rasporedom utf-8.

3. Otvorite ga u nekom internet pretraživaču.

HTML editor

● Kao što vidite za kreiranje html dokumenata dovoljno je da imate samo tekst editor.

● Naravno takve stranice bi se sastojale samo od teksta i tabela.

● Pa kako možemo kreirati internet stranice koje sadrže i slike, video i druge elemente koje ih čine potpunim?

● I to je moguće učiniti u tekst editoru, ali nam treba malo više znanja o html-u.

HTML editor

● Učenje html-a zahteva određeno vreme, a koje mi na žalost zbog ograničenog broja časova nemamo.

● Zato prepuštamo da sami nastavite tamo gde smo mi stali, a mi ćemo probati nešto drugačije.

● Na našu sreću postoje i programi koji nam olakšavaju kreiranje html dokumenata bez preteranog učenja html jezika.

HTML editor

● Citat sa vikipedije:WYSIWYG je skraćenica od engleskih reči What You See Is What You Get (bukvalan prevod na srpski: Šta Vidiš To Ćeš i Da Dobiješ).Izraz se koristi u računarstvu da bi se opisao sistem u kome se sadržaj (tekst i grafika) tokom uređivanja/pisanja prikazuju u formi sličnoj kao ona koja će biti kada se dobije krajnji rezultat u štampi ili drugom konačnom prikazu.

HTML editor

● Word procesori:– AbiWord

– Microsoft Word

– LibreOffice Writer

– OpenOffice.org Writer

● WYSIWYG editors:– Adobe Dreamweaver

– Amaya

– BlueGriffon

– KompoZer

– Microsoft Visual Web Developer Express

– Microsoft Publisher

– SeaMonkey Composer

HTML editor

● Ne očekujte čuda od ovih programa, jer za svaki složeniji oblik neke stranice ipak će se morati koristiti i neki tekst editor.

● Šta više neki od njih imaju i integrisan tekst editor za takve slučajeve.

HTML editor

● Na časovima će biti korišćen besplatni program SeaMonkey, koji je ujedno:

– Web-browser,

– E-mail klijent,

– newsgroup i feed klijent,

– IRC klijent,

– I naravno HTML editor.

HTML editor

● Nakon pokretanja programa pokrenemo html editor.

HTML editor

● Radno okruženje html editora.

HTML editor

● Kako se radi u ovom editoru ?● Slično kao i u ostalim tekst procesorima tipa

Word ili Writer.● Probaćemo da naučimo osnove rada na primeru

koji smo već radili u običnom tekst editoru.

HTML editor

● Najpre treba dati naslov (title) našoj stranici.● To se radi tako što iz menija “Format”

izaberemo stavku “Page titles i properties”.

HTML editor

● Na radnoj površini otkucajte tekst “zaglavlje 1” i selektujte ga, a zatim zadajte da bude “heading 1”.

HTML editor

● Probajte da uradite ostalo sami:

HTML editor

● Šta rade ikona na paleti alatki?

Menja bojuslova/pozadine

Markiratekst

Uvećava iumanjuje

slova

Podebljana,iskošena,

podvučena,slova

Poravnanjeteksta

Pomeratekstulevo,

udesno

Liste,nabrajanje

Uređujeprikaz

objekata

Poravnanjeteksta

Umetanjeputanjedo slike

Uvećava iumanjuje

slovaUmetanje

tabele

Umetanjehorizontalne

linije

Umetanjelinka

Kreirasekciju

Me a stilǌteksta

VEŽBA

rgim21

Documents