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?
- Slides: 42