Kreiranje web strana
This presentation is the property of its rightful owner.
Sponsored Links
1 / 53

Kreiranje web strana PowerPoint PPT Presentation


  • 59 Views
  • Uploaded on
  • Presentation posted in: General

Kreiranje web strana. Milo š Stevanović 01 / 1129. -Uvod u kreiranje-.

Download Presentation

Kreiranje web strana

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Kreiranje web strana

Kreiranje web strana

Miloš Stevanović 01/1129


Uvod u kreiranje

-Uvod u kreiranje-

  • Kreiranjesloženijih Web prezentacija, kao npr. za elektronsku trgovinu, biće efikasnije ako u njemu učestvuje više stručnjaka iz različitih oblasti (programiranja, baza podataka, grafičke obrade, audio-video obrade, upravljanje serverom).

  • To nikako ne znači da pojedinac ne može sam da napravi odlične Web prezentacije.


Kreiranje web strana

  • Postoji nekoliko tipova aplikacija za kreiranje Web stranica:

    1. Tekstualni editori

    2. HTML editori

    3. Grafički editori (WYIWYG)


Kreiranje web strana

  • Tekstualni editori su jednostavne aplikacije za obradu teksta kao što su WordPad ili Notepad.Oni dolaze besplatno uz instalaciju Windows-a i sasvimsu dovoljni za kreiranje Web strana pomoću HTML-a.

  • HTML editoriomogućavaju više od običnih tekstualnih editora: razlikovanje HTML-a od sadržaja,bolju podršku za dodatke kao što su JavaScript ili CGI skriptove i podršku za FTP (protokol za prenos datoteka sa računara na server).

  • Grafički editori su najpopularniji programi koji omogućavaju kako početnicimatako i ekspertima da kreiraju Web strane. Sadrže mogućnosti prethodna dva editora uz dodatnu podršku za kreiranje strana pomoću miša kao i podršku za pregled stranica u Web čitaču.


Uvod u html

-Uvod u HTML-

  • HTML (HyperText Markup Language) nije zaista programski jezik u onom smislu u kom su to Java ili Visual Basic, on je više sintaksni jezik za formatiranje dokumenata.

  • To je jezik za opis dokumenata i njihovih međusobnih veza koji se prikazuju u Web čitačima odn. jezik koji govori Web čitaču kako da prikaže sadržaj dokumenta.


Kreiranje web strana

  • HTML je u tekstualnom formatu pa se može kreirati u bilo kom od tekst editora.

  • Poseduje ekstenziju .htm ili .html.

  • Postoje mnogi programi koji automatski generišu HTML kod dok korisnik radiu grafičkom okruženju

  • Međutim, potpuna kontrola nad Web stranama podrzumeva korišćenjeHTML-a na najnižem nivou.


Kreiranje web strana

  • HTML komande se pišu u vidu TAG-ova. Jedan tag je komanda koja govori Webčitaču na koji nacin da prikaze sadržaj stranice.

  • Tagovi se pišu unutar oznaka “<“i“>” npr. <html> (početak HTML dokumenta)

  • Većina tagova ima početni i završni tag. Završni tag se dobija dodavanjem znaka “/” i označava mesto na kojem prestaje dejstvo početnog taga npr. </html> (kraj HTML dokumenta).

  • Postoje tagovi kod kojih ne mora da se stavlja završni tag npr. tag <br> koji sluzi za prelazak u novi red.


Kreiranje web strana

  • Svaki HTML dokument se sastoji iz dva dela:

    1. zaglavlja (engl. head) i

    2. tela (engl. body).

  • Zaglavlje se odvaja tagovima:

    <head>

    </head>

    a telo dokumenta tagovima:

    <body>

    </body>


Kreiranje web strana

  • Sve što se napiše u zaglavlju dokumenta neće se prikazati u prozoru Web čitača već obično služi samo da pruži neke informacije o stranici.

  • U okviru zaglavlja treba staviti tagove:

    <title>

    </title>

    izmedju kojih sestavlja naslov stranicekoji se pojavljuje u naslovnoj liniji čitača.


Kreiranje web strana

  • Sve što se napišeizmeđu tagova

    <body>

    </body>

    predstavljaće telo dokumenta i pojaviće se kao sadržaj prezentacije uWeb čitaču.


Kreiranje web strana

  • Znači, svaki HTML dokument mora da ima sledeci "kostur":

    <html>

    <head>

    <title>

    Naziv prezentacije

    </title>

    </head>

    <body>

    Tekst prezentacije

    </body>

    </html>


Kreiranje web strana

  • Dodatna objašnjenja bilo kog HTML taga nazivaju se atributi. Atributi se ubacuju u početni tag i služe da detaljnije opišu dati tag.

  • Npr. boja pozadine se određuje atributom bgcolor koji je deo <body> taga.

  • Boje se mogu definisati na dva nacina: ili preko heksadecimalne RGB vrednosti ili preko predefinisanog naziva boje (npr."yellow"),

    <body bgcolor="#ffff00"> ili

    <body bgcolor=“yellow">


Kreiranje web strana

  • Takođe, u HTML dokumentima postoji mogućnost pisanja teksta na sledeće načine:

    podebljano<b>Tekst</b>

    iskošeno<i>Tekst</i>

    podvučeno<u>Tekst</u>

    precrtano<strike>Tekst</strike>


Kreiranje web strana

  • Osim toga mogu se pisati i slova u indeksu ili eksponentu.

  • Indeks se dodaje pomocu taga <sub>

    npr. se piše:

    H<sub>2</sub>O

  • Eksponent se dodaje pomocu taga <sup>

    npr. se piše:

    2<sup>2</sup>=4


Specijalni karakteri

Specijalni karakteri

  • Samo pojedini karakteri imaju svoju slovnu oznaku dok se ostali dobijaju navođenjem broja karaktera tj. njegovog koda.

  • Npr. znak manje “<“ se ne može koristiti pri unosu sadržaja pošto se taj znak koristi za tagove, već se za njegovo dobijanje u HTML dokument unosi “&lt;”

  • Entiteti imaju sledeću sintaksu: 

    &naziv_entiteta; 

    &#decimalna_vrednost; 

    &#xheksadecimalna_vrednost;


Kreiranje web strana

U HTML kodu na mestu gde treba da stoji neko naše slovo treba ubaciti sledeće ASCII kodove tj. simbole:

  • &#268; za naše veliko Č 

  • &#269; za naše malo č 

  • &#262; za naše veliko Ć 

  • &#263; za naše malo ć 

  • &#352; za naše veliko Š 

  • &#353; za naše malo š 

  • &#272; za naše veliko Đ 

  • &#273; za naše malo đ 

  • Ž za naše veliko Ž 

  • ž za naše malo ž 


Kreiranje web strana

  • Daleko jednostavniji način za korišćenje naših slova je kada se HTML dokument snimi u UTF-8 formatu tj. kada se u zaglavlju HTML dokumenta (u okviru head tagova) unese sledeće:

    <meta content="text/html; charset=utf-8" http-equiv=content-type>


Linkovi u html u

Linkovi u HTML-u

  • Najvažnija osobina HTML dokumenta je ta da se oni mogu međusobno povezati (tj. da jedan ukazuje na drugi) što je zapravo osobina hiperteksta.

  • Postoje tri vrste linkova:

    1. Linkovi do nekog drugog dela stranice u kojoj se već nalazimo (tzv. Named Anchor);

    2. Linkovi do druge stranice u okviru iste prezentacije;

    3. Linkovi do stranice u nekoj novoj prezentaciji.


Kreiranje web strana

1. Prva vrsta linkova se koristi kada npr. dođemo na kraj strane i hoćemo da se vratimo na vrh.

  • To se postiže u dva koraka:

    1) Moramo prvo da napišemo na početku dokumenta:

    <a name=“početak”></a>

    pri čemu se ovaj link ne vidi u dokumentu.

    2) Na kraju stranice postavimo vidljivi link koji

    nas vodi do označenog početka:

    <a href=“#početak”>Početak</a>


Kreiranje web strana

2. Ako želimo da stavimo link do neke druge stranice u okviru iste prezentacije, to postižemo stavljanjem:

<a href=“ime_stranice.html”>Ime linka</a>

3. Ako zelimo da stavimo link do neke druge prezentacije, koja se može nalaziti na nekom sasvim drugom serveru potrebno je da napisemo celu Web adresu te prezentacije:

<a href=“http://www.google.com/”>Ime linka</a>


Kreiranje web strana

  • Tag <a> sa atributom href možemo iskoristiti kao link za pokretanje e-mail poruke u korisnikovom programu za elektronsku postu (npr. Outlook Express).

  • Možemo definisati i naslov poruke, kome prosleđujemo pa čak i tekst koji će biti otkucan u samoj poruci dok posetiocu sajta ostaje samo da poruku pošalje:

    <a href="mailto:E-mail_adresa?subject=Naslov&cc=Adresa_кome_prosleđujemo&body=Tekst_poruke">Naziv_linka</a> 


Pravila pri kreiranju

-Pravila pri kreiranju-

  • Pri kreiranju Web prezentacija postoji nekoliko pravila kojih se treba pridržavati dok je sve ostalo stvar ukusa.

  • Ta pravila se posebno odnose na Početnu stranu, tekst, boje i slike na jednoj Web prezentaciji.


Po etna strana home page

Početna strana (Home Page)

  • Home Page je početna strana svake Web prezentacije a samim tim i najvažnija strana.

  • Ona za sajt ima isto značenje kao i prva strana za časopis, što znači da mora da istakne suštinu Web prezentacije.

  • Mora da bude konkretna, pregledna i da se brzo učitava.


Kreiranje web strana

  • Za korisnika koji prvi put posećuje lokaciju, najvažnija uloga početne strane je da odgovori na njegovo pitanje “Gde sam” i “Šta mogu da uradim ili saznam na ovom sajtu”.

  • Posetioci sajta obično prvo primete gornji levi ugao pa je pogodno da se tu postavi nešto važno (kao npr. baner) a to je deo koji je vidljiv i na manjim monitorima.


Kreiranje web strana

  • Na Početnoj strani bi trebao da se nalazi:

    1. Dobar navigacioni sistem

    2.Kratak pregled najvažnijih vesti iliobaveštenja

    (da bude vodič kroz sadržaj i pokaže posetiocu šta sve može pronaći na sajtu).

    3. Pretraživač (ukoliko je posetiocu lakše da se na taj način kreće po sajtu, umesto klasično linkovima)


Kreiranje web strana

  • Od kvaliteta početne strane zavisiće koliko će se posetioci zadržati na sajtu odnosno koliko će svi ostali delovi sajta biti posećeni.

  • Posetilac koji bude zainteresovan za ono o čemu je pročitao na početnoj strani, pročitaće i nešto duži tekst odnosno posetiće ostale stranice sajta. 


Kreiranje web strana

  • Zbog svega toga Prvu stranicusajta nije dobro kreirati kao tzv. Splash page odn. uvodnu stranu na kojoj obično postoji samo logo firme i ulaz na jedan ili više jezika.

  • Ovo je jedino opravdano ukoliko treba upozoriti određen segment posetilaca na sadržaj samog sajta.

  • Pri kreiranju se Početna stranica mora sačuvati pod nazivom index.htmliliindex.htm


Upotreba teksta

Upotreba teksta

  • Tekst je na Web stranici mnogo važniji od grafike.

  • Ono što će privući pažnju najvećeg broja posetilaca su sadržaj, naslovi i nazivi slika.

  • Da tekst ne bi oterao korisnike sa sajta postoje određena pravila kojih se pri pisanju za Web treba pridržavati.


Kreiranje web strana

Standardni tipslova:

  • Standardni tip slova je npr. Times New Roman, Verdana, Arial i ostali stilovi koje korisnici već imaju instalirane na svom računaru.

  • Upotreba slova na Webu može stvarati ozbiljne probleme ukoliko stil kojim smo pisali na stranama nije instaliran na korisnikovom računaru.

  • Nekad je najbolje uopšte ne definisati vrstu slova već prihvatiti podrazumevanu.

  • Ukoliko ipak želimo da koristimo neka neobična slova najbolje je da se navede nekoliko mogućih alternativa.


Kreiranje web strana

  • Jedan od načina je da se u HTML kod unese više alternativa stilova:

    <font face=“Chiller,Bauhaus 93,Arial”>Ovdedodje vaš tekst </font>

  • Ovo znači da će ukoliko posetilac stranice na svom kompjuteru nema instaliran prvi stil, tekst biti prikazan u sledećem definisanom stilu sa liste.

  • Time se povećava verovatnoća da će tekst biti učitan na korisnikovom računaru u nekom od predviđenih stilova i omogućava nam da planiramo krajnji izgled naše Web prezentacije.


Kreiranje web strana

Tekstovi treba da budu kratki:

  • Pri kreiranju za Web treba imati u vidu da je čitanje sa ekrana 25% sporije od čitanja sa papira.

  • Korisnici se osećaju nelagodno dok čitaju sa monitora i ne vole da pomeraju tekst u prozoru.

  • Zbog svega toga temu na Webu treba pokriti sa 50% manje materijala od onog koji bi bio upotrebljen za štampani tekst.


Kreiranje web strana

Tekstovi treba da budu pregledni:

  • Pri pisanju za Web se treba pridržavati metoda kojim se služe novine tzv. “metod obrnute piramide”.

  • Ovaj metod se koristi da bi se posetioci na kratak i jasan način upoznali sa sadržajem Web prezentacije pomoću odgovora na pitanja:

    - ko ?

    - šta ?

    - gde ?

    - kada ?

    - kako ?

    - zašto ?


Kreiranje web strana

Tekstovi bi trebalo da su podeljeni i povezani:

  • Često se dešava da korisnici na Webu čitaju samo prvu rečenicu svakog pasusa.

  • Tematske rečenice su zbog toga veoma bitne kao i pravilo “jedna ideja po pasusu”

  • Tekst se može skratiti bez žrtvovanja sadržaja tako što će se podeliti na više delova povezanih hipervezama.

  • Na taj način svaka strana može biti kratka a da istovremeno ceo hiperprostor sadrži znatno više informacija nego što bi moglo da stane u jedan štampani članak.


Kreiranje web strana

Tekstovi treba da budu jasni:

  • Tekst treba da bude napisan običnim jezikom.

  • Zamršene rečenice i složeno pisanje se na Webu još teže razumeju.

  • Humorom se treba služititi umereno. Pošto korisnici samo pregledaju tekst, nekad neće biti u stanju da odrede kada je pisac duhovit a kada sarkastičan.

  • Takođe upotreba metafora treba da bude krajnje ograničena.


Upotreba boja

Upotreba boja

  • Približno 8 do 10 procenata stanovništva ima neki oblik daltonizma.

  • Od tog procenta oko 0.5% predstavljaju žene dok ostatak čine muškarci.

  • Ovo je bitno pri izboru ciljne grupe Web prezentacije.


Kreiranje web strana

  • Boju treba koristiti namenski i umereno da bi se:

    - skrenula pažnja na određene informacije;

    - pokazali uzajamni odnosi elemenata;

    - napravila razlika između pojedinih područja;

    - pomoglo korisnicima da pamte;

    - prikazali objekti na realističan način;

    - povećala vizuelna dopadljivost.


Kreiranje web strana

Boja pozadine i boja tekstatreba da budu u

što većem kontrastu:

  • Najbolju čitljivost na beloj pozadini obezbeđuju:

    Crni tekst

    Braon tekst

    Tamno zeleni tekst

    Tamno plavi tekst


I razne druge kombinacije sa malim kontrastom

Najgoru čitljivost obezbeđuju:

...i razne druge kombinacije sa malim kontrastom.


Kreiranje web strana

  • Kombinacije koje omogućavaju najbolju preglednost za kratke delove teksta su:


Upotreba slika

Upotreba slika

  • Najčešći grafički formati na Webu su:

    1. GIF (Graphic Interchange Format)

    2. JPEG (Joint Photographic Experts Group) i

    3. PNG (Portable Network Graphics)


Kreiranje web strana

  • Format GIF odlično komprimuje grafiku bez gubitka na kvalitetu slike. Ima 256 boja.

  • GIF89A podržava:

    1. Animaciju(sadrži u sebi više slika pa se naizmeničnim ponavljanjem tih slika dobija mala animacija);

    2. Transparentnost (izjednačavanje boje pozadine slike sa bojom stranice);

    3. Preplitanje (slike se učitavaju brzo u celoj veličini ali sa niskom rezolucijom a potom se prikazuju u punoj rezoluciji).


Kreiranje web strana

  • U JPEG formatu se obično čuvaju kvalitetnije fotografije jer ovaj format podržava 16 miliona boja.

  • Fajlovi su dobro komprimovani, tako da se fotografije relativno brzo učitavaju.

  • Postoji više opcija kompresije u zavisnosti od stepena gubitka detalja (Low, Medium, High, i Maximum).

    0-40 = slab kvalitet;

    40 - 60 = prihvatljiv kvalitet;

    60 - 80 = visok kvalitet;

    80-100 = maksimalan kvalitet.


Kreiranje web strana

  • PNGje još jedan format podržan od strane novijih Web čitača a kombinuje funkcionalnosti gif-a i jpeg-a. Postoje dva tipa ovog formata:

    1. PNG-8, sadrži 8 bitnu informaciju o bojama(slično GIF-u), ne podržava animaciju ali podržava transparetnost i to mnogo bolje nego GIF;

    2. PNG-24, sadrži 24 bitnu informaciju o bojama,ekvivalentan je JPEG-u i poseduje sličnu kompresiju.


Kreiranje web strana

  • Neke od najboljih alatki za obradu slika su: Adobe Photoshop CS2, Macromedia Fireworks8 i Flash8.

  • Pri obradi slika je uvekbolje da se ne vrši obradu gotovih JPEG i GIF fajlova, već originalnih slika.

  • Slikebi na Web prezentaciji bilo poželjno staviti u jedan direktorijum kao bi se keširale (snimile kod korisnika) čime se ubrzava vreme učitavanja stranice.


Statistika pose enosti

-Statistika posećenosti-

  • Postoje sajtovi koji generišu kod koji treba postaviti u HTML dokument radi praćenja posećenosti sajta npr. www.statcounter.com

  • Boljistatistički program obično nude provajderi na čijem se serverunalazi Web prezentacija.

  • On će pomoći da pratimo ne samo statistiku posećenosti, već i koje browsere koriste posetioci, koje operativne sisteme, konfiguracije...


Kreiranje web strana

  • Kako Srbi pretražuju Internet:


Kreiranje web strana

Kako to rade u svetu:

  • 1998 godine se u proseku tražilo upisivanjem 1.2 reči

  • 2004 godine se u proseku tražilo upisivanjem 2.5 reči

  • 2006 godine se u proseku tražilo upisivanjem 3.3 reči.

  • Sa porastom broja reči glašivači dobijaju sve bolje korisnike a sami korisnici su zadovoljniji rezultatima pretrage.


Kreiranje web strana

  • Ovo je bitno znati pri postavljanju ključnih reči u okviru Meta taga.

  • Meta tag ima ulogu da pretraživačima odn. njihovim robotima da informacije o tome kakav sadržaj obrađuje neki sajt.

  • Ako se u ovaj tag smeste ključne reči koje su u vezi sa sadržajem stranice, on će mnogo pomoći da se podigne rang sajta u rezultatima pretraživanja.

  • <meta name=“keywords" content=“Ovde dođu ključne reči" />

  • <meta name=“description" content=“Ovde dođe kratak opis" />


Kreiranje web strana

Još nekoliko pravila:

  • Da bi se izbeglo da izgled stranice zavisi od Web čitača u kojem se pregleda, u HTML-une treba zadavati elemenate koji su svojstveni nekim Web čitačima a nisu podržani u ostalima. Zbog toga Web prezentaciju treba obavezno proveriti u nekoliko popularnih pretraživača. (npr. Netscape Navigator ne podrzava atribut color za horizontalne linije)

  • Tabele ne treba definisati u fiksnim širinama i dužinama već u procentima od raspoložive veličine ekrana.


Kreiranje web strana

  • Da kasnije ne bi došlo do problema prilikom prenošenja prezentacije sa našeg računara na server treba sepridržavati sledećeg:

    1. Nazive stranica i nazive svih elemenata na sajtu treba pisati malim slovima i sastavljeno (razmak treba zameniti znacima “-” ili“_”).

    2.Web stranice moraju biti organizovane u pažljivo osmišljene direktorijume koji sadrže sve što se nalazi u jednoj Web prezentaciji.

    Nakon završetka kreiranja potrebno je ove direktorijume postaviti na server i to je to!!!


Kreiranje web strana

SREĆNO U KREIRANJU !!!


  • Login