KREIRANJE WEB STRANICA U HTMLU Grupa SS Snjezana

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 • Web stranica se sastoji od jedne ili više povezanih HTML datoteka.

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

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

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.

Struktura HTML dokumenta

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

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

Zaglavlja

UREĐIVANJE TEKSTA • tekst može biti istaknut kao podebljan, podcrtan i ukošen • oznaka reda <H 1> <U> Welcome </U> </H 1> 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

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

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

BOJE BOJA RGB Triplet HEKSADECIMALE Crna (0, 0, 0) 00 FFFF Ljubičasta (128, 0, 128) 800080 Siva (128, 128) 808080 Zelena (0, 128, 0) 008000 Žuta (225, 0) FFFF 00 Bijela (225, 225) FFFFFF

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

Kreiranje linkova kroz dokumente

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

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

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

UBACIVANJE SLIKE u HTLM format

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

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.

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

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

Uređena lista

Neuređena lista

Definicijska lista

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>

Tekstualna i grafička tablica

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>

Spojni redovi i ćelije

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

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

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. • Real. Audio zvukovni dokumenti su isto popularni jer omogućuju korisniku da ih pregledava od početka skidanja i onda pokreću

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>

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 Quick. Time

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

VIDEO FORMATI

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?