1 / 41

IZRADA WEB STRANICE

IZRADA WEB STRANICE. Grupa “DELETE” : Mirela Vučković Daria Kučan Sanja Rempešić Ines Stermečki Maja Šanko. Sadržaj:. 1. Upoznavanje sa HTML-om 2. Osnovne oznake 3. Zaglavlja 4. Uređivanje teksta

augustus-moser
Télécharger la présentation

IZRADA WEB STRANICE

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IZRADA WEB STRANICE Grupa “DELETE” : Mirela Vučković Daria Kučan Sanja Rempešić Ines Stermečki Maja Šanko

  2. Sadržaj: 1. Upoznavanje sa HTML-om 2. Osnovne oznake 3. Zaglavlja 4. Uređivanje teksta 5. Formiranje teksta sa <FONT> 6. Dodavanje posebnih znakova 7. Hipertekstualni linkovi 8. Umetanje slika 9. Primjer, pitanja i zadaci

  3. 1. Upoznavanje sa HTML-om • Za kreiranje web dokumenta koristi se specijalni jezik HTML- Hypertext Markup Language • Koraci do objavljivanja stranice na Web-u su: • Planirati web stranicu • Dizajnirati Web stranicu • Kreirati Web stranicu • Postaviti Web str. na internet-dostupnu lokaciju • Provjeriti da je Web str. legalna i da je krajnji rezultat onakav kakav smo htjeli

  4. 1. Planiranje web stranice • Indentifikacija svrhe i određivanje profila ljudi koje želimo da posjećuju našu internet str. • Odluka o sadržaju koji treba biti aktualan i uzbudljiv 2. Dizajniranje web stranice • Dizajniramo raspored elemenata Web str. kao što su: tekst, grafika, audio, video i virtualna realnost 3. Kreiranje dokumenata • Možemo koristiti Windows Notepad, HTML uređivač teksta ili se možemo služiti HTML pretvaračem • HTML urednik nam pomaže kod kreiranja HTML datoteke tako što unosimo HTML kodove kako radimo

  5. Kako napisati HTML u obliku izvornog koda? KreiramoHTML dokument koristeći se Notepad priređivačkim programom za tekst - preporučase da ime svih HTML datoteka bude sa .htmlnastavkom - Prilikom upisa imena index.html, Notepad nam automatski daje ime i index.html.txt - Kako bi to izbjegli, moramo ime upisati pod navodnike (“index.html”); drugi način je da napišemo ime datoteke u File name, i promijenimo Save As type: u All Files iz Text Document (*txt)

  6. Snimanje naše domaće stranice

  7. 4. Postavljanje dokumenata na Web • Nakon što smo kreirali web stranicu, potrebno ju je poslati sa našeg računala na web server: • FTP • Snimimo Web str u Web mapu, koja je lokacija na Web serveru 5. Potvrda dokumenta • Potrebno je ispraviti greške • Preglednik pokušava “pretpostaviti” što da napravi kada vidi neispravan HTML

  8. Osnovna struktura HTML dokumenta • HTML dijelovi su naznačeni markup oznakama, koje su napisane korištenjem uglatih zagrada ( <TITLE> ) • HTML oznake mogu imati atribute ( <IMG SRC=“images/figurl.gif”> ) • Neki elementi su spremnici koji imaju početnu oznaku(e.g.<BODY> ) i završnu oznaku koja počinje sa “/” (e.g., </BODY> ) • Web dokument bi trebao biti uređen između <HEAD> i <BODY>odlomka • Početna oznaka je <HTML> , a završna <HTML> spaja sve preostale kodove u dokumentu

  9. Osnovni okvir za HTML dokument

  10. 2. Osnovne oznake • Pretraživač ne pokazuje HTML dokument, već formatiranu stranicu • Red koda <!—MY first page--> je komentar • Redovi koda <HEAD> <TITLE> First Example <TITLE> </HEAD> predstavljaju zaglavlje Web stranice • Svaki HTML mora imati naslov (TITLE)

  11. 3. Zaglavlja (Headers) • HTML ima šest levela zaglavlja, od broja 1 do 6. • Element <CENTER> daje naredbu da svi materijali između <CENTER> i </CENTER> budu centrirani horizontalno u prozoru pretraživača. • Linija koda <H1>Level1Header</H1> • unosi H1 element zaglavlja, saotvarajućom <H1> oznakom i zatvarajućom </H1> oznakom.

  12. 4. Uređivanje teksta (Text Styling) • U HTML-u tekst može biti naznačen podebljanim slovima (bold), podcrtanim slovima (underline), i/ili mogu biti nakošena (italic). Linija koda <H1 ALIGN="center"><U>Welcome to Our Web Site!</U></H1> • pokazuje podcrtani stil slova. Sav tekst uključen u <U>..</U> oznaku je prikazan podcrtan. • ALIGN="center" u <H1> oznaci predstavlja metodu kojom se jedan element stranice može poravnati.

  13. Kod • <EM>HTML<EM> koristi <EM> oznaku kako bi prikazao naglašeni ili nakošeni tekst (italic). (HTML) Kod <U>version<STRONG>2.0</STRONG></U>koristi <STRONG> oznaku za podebljavanje teksta (bold). (version 2.0)

  14. 5. Formiranje teksta sa <FONT>: • Oznaka <FONT> nam omogućava odabir boja, veličina i stil slova teksta na stranici. Sintaksa za <FONT> oznaku glasi: <FONT SIZE=size COLOR=color FACE=font>Formatted Text</FONT> • Atribut SIZEomogućava određivanje veličine slova formiranog teksta. Apsolutna veličina: SIZE=2 u <FONT> oznaku. Relativna veličina: <FONT SIZE="+2"> • Atribut COLOR omogućuje mjenjanje boja u formiranom tekstu. Na primjer, za mjenjanje boje riječi "Information" u crvenu, koristimo slijedeći HTML- ov kod: <FONT COLOR="red">Information</FONT>

  15. Atribut FACEkoristimo kada želimo tekst prikazati u nekom stilu fonta <FONT FACE="Arial, Helvetica, sansserif">Information</FONT> • HTML identificira boju na dva načina, po imenu boje ili po brojuboje • Vrijednosti boja (color value) su brojčani izrazi koji točno opisuju prikaz boje. Svaka boja je prikazana kroz kombinaciju tri primarnih boja; crvene, zelene i plave. • Intenzitet svake primarne boje korespondira sa određenim brojem od 0 (bez boje) do 255 (najjači intenzitet). Na ovaj način, 2553 je više od 16 miliona definiranih boja.

  16. Upravo ovaj RGB triplet unosimo u HTML kod ako želimo predstaviti određenu bojui to u heksadecimalnom sustavu • Na primjer, žuta boja ima RGB triplet (255, 255, 0), što je u heksadecimalnom sustavu FFFFoo. • Web pretraživači imaju pretpostavljene sheme boja koje primjenjuju u pozadine i na tekst Web stranica koje prikazuju (crni tekst na bijeloj ili sivoj pozadini sa hyperlinkom ljubičaste ili plave boje)

  17. Specificiramo svoje vlastite boje kodom: <BODY BGCOLOR=color TEXT=color LINK=color VLINK=color> • gdje atribut BGCOLORpostavlja boju pozadine, atribut TEXT postavlja boju teksta, atribut LINK definira boju hipertekst linkova i atribut VLINK definira boju linkova na kojima je već bio posjetitelj.

  18. Uređeni tekst sa <FONT> • Red koda <BODY BGCOLOR ="#FFFFOO" TEXT = "red"> • postavlja Web stranicu sa crvenim tekstom na žutoj pozadini. Tada se oznaka <FONT> koristi za određivanje boje, veličine i/ili stila teksta.   • Red koda • <FONT COLOR="black“SIZE="+1" FACE="Arial"> • postavlja tekst u crnoj boji, velike veličine i Arialom kao stilom teksta. Kako bi učinili tekst većim, postavimo SIZE="+x", za manji tekst postavimo SIZE="-x". U svakom slučaju x je broj veličine fonta kojim želimo povećali ili smanjiti tekst.

  19. 6. Dodavanje specijalnih znakova • Ne nalaze se na tipkovnici • HTML podržava mnoge znakove i simbole • Kreiranje: znak (&), te broj ili ime šifre • Ako se radi o broju šifre: prije broja mora stajati simbol (#) • Npr. pisanje simbola (&): &#38 ili &amp

  20. Lista uobičajenih HTML simbola

  21. HTML ignorira stvari kao što su - dodatni međuprostor ( razmak), prazne retke ili tabulatore • Za dodavanjem razmaka moguće je umetnuti : &nbsp • Prekid tj. kraj retka : upisivanjem <BR>

  22. Primjer ubacivanja specijalnih znakova

  23. 7.Hipertekstualni linkovi (poveznice) • Najvažnija sposobnost HTML-a: - mogućnost kreiranja hiperlinkova na dokumentima bilo gdje na serveru, te na različitim serverima • Destinacije linka (poveznica): - drugi sadržaji ili dokumenti na koje se pri kliku miša prebacujemo • Tekst i slike mogu vršiti funkciju linkova

  24. Stvaranje linkova između Web dokumenata • <A HREF=“address”> • Linkovi se umeću sidrenom oznakom <A> • Atributom HREF unutar <A> specificira se adresa na koju bi se željeli povezati • address je lokacija sa kojom bi željeli da sidreni objekt bude povezan • Lokacija može biti: - bilo koja dostupna stranica, datoteka ili - URL elektronske pošte

  25. Primjeri sidrenih oznaka

  26. Primjer ubacivanja horiz. ravnala u HTML-u <HR WIDTH=“25%” SIZE=3 ALIGN=“left”> • <HR> oznaka za ubacivanje ravnala • WIDTH atribut – podešava širinu ravnala • 25% - ravnalo će zauzeti taj postotak širine ekrana • SIZE atribut – označava visinu ravnala u pikselima • ALIGN atribut – poravnava ravnalo na stranici ( lijevo, sredina, desno)

  27. Primjer linka prema e-mailu • Contact me: bravo@gmail.com • Forma ovog e-mail sidra je: Cotact me: <A HREF=mailto:bravo@gmail.com>bravo@gmail.com</A> • Vrlo je važno da cijeli atribut pa i mailto budu smješteni unutar navodnih znakova

  28. 8. Umetanje slika • Dva su grafička formata: GIF i JPEG • GIF dokumenti se mogu prikazivati u 256 boja • GIF format je sposoban kreirati prozirne (transparentne) boje • Koristi se u kreiranju animiranih slika • JPEG dokumenti mogu kreirati grafike sa 16.6 milijuna boja • JPEG dokumenti se mogu kompresirati (zbijati) • Kod JPEG dokumenta se ne mogu koristiti prozirne boje i animacije

  29. Kako umetnuti slike? • <IMG> je oznaka za umetanje slike u HTML dokument • Opća sintaksa za umetanje slike glasi: <IMG SRC=“filename“> - <IMG> ima nekoliko atributa ALIGN atribut specificira položaj slike poštivajući liniju teksta u kojem se slika pojavljuje • Sintaksa za ALIGN atribut glasi: <IMG SRC=“filename“ALIGN=“alignment“>

  30. Moguće opcije poravnavanja su: lijevo, desno, gore, dolje i sredina WIDTH (širina) i HEIGHT (visina) atributi specificiraju ciljanu veličinu slike u pikselima Sintaksa za određivanje širine i visine glasi: <IMG SRC=“filename“ WIDTH=value HEIGHT=value> Može se i povećati horizontalan i vertikalan prostor oko slike koristeći HSPACE i VSPACE atribute Sintaksa glasi:

  31. BORDER atribut specificira širinu linije u pikselima koja okružuje sliku. Sintaksa za promjenu širine linije glasi: <IMG SRC=“filename“ BORDER=value> Posljednji atribut koji se koristi za slike jest ATL atribut, koji omogućuje specificiranje teksta koji će se smjestiti u slici Sintaksa za specificiranje ALT atributa glasi: <IMG SRC=“filename“ ALT=“alternate text“>

  32. Umetanje slika u HTML dokument

  33. Ilustracija također prikazuje kako umetnuti pozadinsku sliku u dokument Sintaksa za umetanje pozadinske slike glasi: <BODY BACKGROUND=“image_file“> Kreiranje i upotreba slikovnih mapa Slikovna mapa je lista koordinata na slici koje određuju granice žarišnih mjesta (hotspots) Žarišno mjesto je definirano područje na slici koje se ponaša kao hipertekstualni link Hotspot se određuje upravo pomoću slikovnih mapa. Svaki put kada korisnik klikne unutar granica hotspota, hiperlink se aktivira

  34. Opća sintaksa za slikovnu mapu glasi: <MAP NAME=“mapname“> <AREA SHAPE=shape COORDS=“coordinates“ HREF=“URL“> </MAP <MAP> oznaka je ime za slikovnu mapu <AREA> oznaka ime tri atributa: SHAPE, COORDS i HREF SHAPE atribut označava oblik žarišnog mjesta: RECT za pravokutno žarišno mjesto, CIRCLE za kružno žarišno mjesto, i POLY za nepravilni pologon U HREF atribut se unosi URL za hipertekstualni link na koje upućuje žarišno mjesto

  35. Kreiranje slikovnih mapa i žarišnih mjesta

  36. Primjer svjetski poznatih web stranica

  37. www.yahoo.com

  38. Pitanja • Navedite dva osnovna slikovna formata te njihove karakteristike? • Koja je jedna od najvažnijih sposobnosti HTML-a? • Što se pri kreiranju specijalnih znakova u HTML-u može upisati nakon samog znaka? • Što u HTML-u označava oznaka <BR>? • Što su destinacije linka( poveznica)?

  39. Zadaci Zadatak 1. Napišite link za web adresu Googla u obliku linijskog koda

  40. Zadatak 2. Uredite sljedeći tekst u HTML kodu tako da bude lijevo centrira i riječ "Microsoft Excel-u" podebljati i označiti plavom bojom, a riječ "Access-u" nakositi u zelenoj boji. :Na kolegiju informatička tehnologija savladali smo rad u Microsoft Excel-u, Access-ute naučili izrađivati Web stranice.

  41. HVALA NA PAŽNJI!

More Related