1 / 42

KREIRANJE WEB STRANICA U HTML-U

KREIRANJE WEB STRANICA U HTML-U. Grupa: S&S Snjezana Lajic Sabina Katanar. OSNOVE HTML-A. Hipertext Markup Language računalni jezik za identificiranje elemenata stranice tako da preglednik može prikazati tu stranicu na računalu

ketan
Download Presentation

KREIRANJE WEB STRANICA U HTML-U

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. KREIRANJE WEB STRANICA U HTML-U Grupa: S&S Snjezana Lajic Sabina Katanar

  2. OSNOVE HTML-A • Hipertext Markup Language • računalni jezik za identificiranje elemenata stranice tako da preglednik može prikazati tu stranicu na računalu • Web stranica se sastoji od jedne ili više povezanih HTML datoteka.

  3. KORACI OBJAVE WEB STRANICA NA WEB • Planiranje Web stranica • Dizajniranje Web stranice • Kreiranje Web stranice • Lociranje Web stranice na pristupačnu lokaciju • Ovjera da je Web stranica legalna i da rezultira u prikazivanju onoga što smo imali na umu

  4. STRUKTURA HTML DOKUMENTA • HTML se sastoji od oznaka (tag) koje omeđuju određena područja početnom i završnom oznakom • Završna oznaka ima u sebi kosu crtu (npr. početna je <html> a završna </html>) • Dijeli se na dvije sekcije: head i body

  5. STRUKTURA HTML DOKUMENTA • Head sekcija je omeđena početnom i završnom oznakom.Sve što se ovdje nalazi ne vidi se u pregledniku. • ovdje definiramo stilove ili datoteku CSS u kojoj se stilovi nalaze • Body sekcija označava tijelo stranice i gotovo sve(osim oznaka) vidljivo je u pregledniku.

  6. Struktura HTML dokumenta

  7. OSNOVNE OZNAKE • Oznake redaka <HEAD> <TITLE>First Example</Title> </HEAD> • Između <BODY> i </BODY> oznaka je područje gdje lociramo sav sadržaj koji želimo da preglednik prikaže • Tekst između oznaka <P> i </P> čini jedan odlomak

  8. ZAGLAVLJA • HTML ima šest razina zaglavlja, numeriranih od 1 do 6 • pojavljuju se u većem fontu od normalnog teksta i često se koriste za opis novih odlomaka ili poodlomaka stranice. • Opća sintaksa za zaglavlje je: <Hn> Heading Text</Hn> • n označava veličinu zaglavlja

  9. Zaglavlja

  10. UREĐIVANJE TEKSTA • tekst može biti istaknut kao podebljan, podcrtan i ukošen • oznaka reda <H1> <U> Welcome</U> </H1> označava podcrtani stil • Oznaka <EM>HTML</EM> prikazuje tekst u kurzivnom obliku • <STRONG>2.0</STRONG> koristi oznaku <STRONG> da prikaže tekst u podebljanom obliku

  11. FORMATIRANJE TEKSTA NAREDBOM <FONT> • <FONT> naredba omogućuje nam da preciziramo boju, veličinu i font koji ćemo koristiti za tekst na našoj stranici. • Sintaksa<FONT SIZE=size COLOR= color FACE= font> Formatted Text</Font> • Veličina fonta koju podržavaju preglednici kreće se od 1-7. • COLOR svojstvo omogućuje nam da mijenjamo boju formatiranog teksta

  12. FORMATIRANJE TEKSTA NAREDBOM <FONT> • FACE svojstvo koristimo kako bi ukazali na font u kojem će tekst biti prikazan • HTML identificira boju na dva načina: putem imena boje ili brojčanog opisa • Svaka boja može biti smišljena kao kombinacija tri osnovne boje: crvene, zelene i plave. • Svaka boja prikazuje RGB triplet

  13. BOJE

  14. HIPERTEKSTUALNI LINKOVI • U HTML-u, tekst i slike mogu biti linkovi sa druge stranice na Webu. • Linkovi se ubacuju upotrebljavajući tag <A>. • Npr.<A HREF=”http://www.yahoo.com”>Yahoo</A> • autori mogu kreirati dokument ili set dokumenata sa linkovima na drugi dio dokumenta

  15. Kreiranje linkova kroz dokumente

  16. UBACIVANJE SLIKA • Dva najčešća slikovna formata su GIF i JPEG • GIF je najčešće upotrebljavan format na Webu, limitiran je na 256 boja. • Jedna od najpopularnijih upotreba GIF-a zadnjih godina je kreiranje animacije • U JPEG formatu, slike mogu biti kreirane od 16,6 miliona boja

  17. Ubacivanje slika • <IMG> je tag za ubacivanje slika u HTML dokument • sintaksa<IMG SRC=”filename”> • <IMG> ima nekoliko atributaALIGN (davati smjer), WIDTH(sirina), HEIGHT(visina) • Možete povećati horizontalan i vertikalan prazan prostor oko slike sa HSPACE i VSPACE atributima

  18. Ubacivanje slika • BORDER atribut označava širinu u pikselima ruba koji je smješten oko slike • ALT atribut vam omogućava da pozicionirate tekst koji se pojavljuje na vašoj slici

  19. UBACIVANJE SLIKE u HTLM format

  20. Kreiranje i upotrebljavanje Slikovnih mapa • možete označiti određen dio slike kao mnogostruki link na nekoliko drugačijih mjesta • Hotspot je definirano područje koje se ponaša kao hiperlink • Slikovne mape prikazuju kordinate slika koje definiraju granice hotspota

  21. Kreiranje i upotrebljavanje Slikovnih mapa • Generalna sintaksa za slikovne mape je <MAP NAME=”mapname”> <AREA SHAPE=shape COORDS=”coordinates” HREF=”URL”> </MAP> • <MAP> tag daje ime slikovne mape • <AREA> tag ima 3 atributa: SHAPE; COORDS i HREF.

  22. KREIRANJE LISTA • HTML podržava tri vrste lista: uređene (ordered), neuređene (unordered) i defincijske liste (definition lists) • Uređene liste su liste u brojčanom redosljedu • Tekst liste počinje oznakom <OL> a završava oznakom </OL> u kojima OL označava uređenu listu • Svaki popis je omeđen sa oznakom <LI> koja označava popis

  23. KREIRANJE LISTA • U neuređenim listama stavke nisu označene brojevima, slovima ili drugim oznakama • Definicijska lista je lista termina sa definicijom uz svaki termin pojedinačno

  24. Uređena lista

  25. Neuređena lista

  26. Definicijska lista

  27. KREIRANJE TABLICA • možemo ubaciti tablicu informacija koja može biti: tekstualna ili grafička. Tekstualna tablica sadrži samo tekst. • Tekstualna tablica kreira se koristeći komponentu <PRE>.Za kreiranje grafičke tablice, počinjemo sa naredbom <TABLE> • Naslov tablice se kreira koristeći naredbu <CAPTION>

  28. Tekstualna i grafička tablica

  29. KREIRANJE TABLICA • Sintaksa za kreiranje okvira tablice je: <TABLE BORDER= size> • Svojstvom CELLSPACING kontroliramo iznos prostora između ćelija tablice • Svojstvo ALIGN koristimo za pozicioniranje tablice • sintaksa za određivanje veličine tablice je: <TABLE WIDTH= size HEIGHT= size>

  30. Spojni redovi i ćelije

  31. UPOTREBLJAVANJE OKVIRA U WEB STRANICAMA • Okviri omogućavaju podjelu prozora u različite regularne čelije, koje su načinjene u različitim HTML dokumentima • Položaj okvira je definiran upotrebom <FRAMESET> taga • Tag <FRAMESET> ima dva osnovna atributa: ROWS i COLS

  32. RAD SA MULTIMEDIJIMA • multimedija može biti dodana na Web stranicu na dva načina: kao vanjski medij ili unutarnji medij • Sa vanjskim medijem, zvuk ili video je povezan pomoću hiperlinka • Unutarnji medij je smješten na Web stranicu kao ugrađen objekt

  33. RAD SA MULTIMEDIJIMA • WAVE (ili WAV) dokumenti su najčešće upotrebljavani na Webu zbog dominacije Windows operacijskih sustava i jer je podrška ugrađena u Windows-e • AIFF i SND se najčešće upotrebljavaju u Macintosh operacijskim sustavima. • RealAudio zvukovni dokumenti su isto popularni jer omogućuju korisniku da ih pregledava od početka skidanja i onda pokreću

  34. RAD SA MULTIMEDIJIMA • Zvukovni isječak smješten direktno u Web stranicu je primjer umetnutog objekta • Za umetanje zvučnog isječka u Web stranicu, upotrebite <EMBED> tag • Sintaksa<EMBED SRC=URL WIDTH=value HEIGHT=value> • Dok je za kreiranje pozadinskog zvuka <BGSOUND SRE=URL LOOP=value>

  35. PRIKAZIVANJE VIDEA • Veličina ovira 160 piksela širine i 120 piksela visine je standardna za Web • Video na Webu se obično pojavljuje u 3 formata: AVI, MPEG ili QuickTime

  36. PRIKAZIVANJE VIDEA • Video dokument sa velikom količinom okvira imati će glatki prikaz, ali zauzimat će mnogo mjesta na hard disku • Možemo smanjiti količinu okvira u sekundi da bi smanjili veličinu dokumenta • Drugi način kontroliranja veličine videa je kompresija svakog pojedinog okvira. • Tehnika komperesiranja i dekompresiranja video okvira se zove codec

  37. VIDEO FORMATI

  38. PITANJA • 1.Koje su dvije sekcije HTML dokumenata i sto predstavljaju? • 2.Koje vrste lista podržava HTML i objasnite razliku između njih? • 3.Možete li svojim riječima objasniti razliku između vanjskog i unutarnjeg medija? • 4.Nabrojite atribute koje se koriste kod UBACIVANJA SLIKA?

More Related