HTML Seminar Ski Rad Vedran Bozickovic

SEMINARSKI RAD – HTML, Vedran Božičković

VISOKA ŠKOLA ZA USLUŽNI BIZNIS ISTOČNO SARAJEVO - SOKOLAC

S E M I N A R S K I R A DSMIJER: POSLOVNA INFORMATIKA

PREMDET: PROGRAMSKI JEZICI

Tema: HTML

Student: ProfesorVedran Božičković dr Ljiljana CvetkovićBroj indeksa: 873

Doboj, 18.05.2011. godine

1 | S t r a n i c a


S A D R Ž A J S A D R Ž A J S A D R Ž A J S A D R Ž A J S A D R Ž A J S A D R Ž A J

1. Uvod..................................................................................................................... 32. Pisanje programa pomoću tekst editora Notepad.................................................... 43. Testiranje HTML stranice u Internet browseru........................................................ 54. Struktura HTML stranice......................................................................................... 65. Odabir pozadine – background................................................................................. 7

6. Odabir slova fonta.................................................................................................... 77. Insertovanje naslova................................................................................................. 88. Insertovanje linija..................................................................................................... 89. Insertovanje slika...................................................................................................... 810. Insertovanje hiperveza.............................................................................................. 911. Insertovanje formi.................................................................................................... 1012. Literatura.................................................................................................................. 11

2 | S t r a n i c a


HTML - UVOD

HTML (HyperText Markup Language) je veoma jednostavan strukturisani jezik koji se koristi za izradu Web stranica, odnosno služi za izvršavanje programa na daljinu. Ovaj jezik predstavlja standard za Internet dokumente.

Sa razvojem Interneta došlo je do pojave nove vrste dokumenata - hiperteksta. To je tekst koji sadrži veze ili linkove ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica u obliku datoteka, međusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se može kliknuti. Za razliku od običnog teksta, koji se čita linearno (s lijeva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način. HTML se sastoji od kodova, kojie nazivaju elemnti i koji se koriste za opisivanje strukture i izgleda dokumenta. Čitač Weba (explorer, chrome, mozila, opera, i sl..) interpretira HTML elemente i na osnovu njih pokazuje dokument na ekranu.

HTML stranice imaju ekstenziju .html ili .htm (index.htm), a nalaze se u određenom direktorijumu servera vezanog na Internet, što ih čini dostupnim na web-u. Hipertekst je, tekst koji sadrže veze ili linkove prema drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica, u obliku datoteka, međusobno povezanih linkovima koje su umetnute u stranice. Na ove linkove se može kliknuti.

Postoji veći broj jezika koji omogućavaju da se precizno opiše izgled i sadržaj jednog teksta. Od posebnog su značaja:

SGML (skr. od Standard General Markup Language), TeX i LaTeX (za matematičke tekstove), PostScript (jezik laserskih štampača), RTF (skr. od Rich Text Format), ...

Najznačajniji jezici za opis hiperteksta su: SGML, HTML (skr. od HyperText Markup Language), pojednostavljena verzija SGML-a, XHTML (skr. od Expandable HTML) i XML (skr. od Extensible Markup Language, "kompromis" između pretjerane složenosti

SGML-a i jednostavnosti HTML-a; njegova standardizacija je u toku)

HTML je jezik kojim je moguće formatirati izgled www stranice, koristi se od 1992. godine. Svaka www stranica koju potencijalni posjetilac šalje pretraživaču nije čisti tekst već sadrži niz informacija u skladu s HTML jezikom koje govore pretraživaču kako dokument treba prikazati. HTML predstavlja dogovor o zajedničkom jeziku između autora stranica i pretraživača - komunikacija i razmjena informacija je moguća isključivo ako obadvije strane govore isti jezik. HTML jezik daje nam osnovni skup kodova koje možemo kombinovati na razne načine poštujući neka osnovna pravila. Za izradu stranica potrebna je samo još dovoljno mašte da se osnovni kodovi povežu na različite načine te kao rezultat može proizići određena www stranica visokog kvaliteta.

3 | S t r a n i c a


Na Internetu povezano je vrlo mnogo različitih računara koji koriste različite unutrašnje jezike za prikaz podataka. Takođe, www stranice moraju moći čitati osim računara i ljudi. Iz toga razloga je HTML jezik tekstualan. Kodovi HTML jezika su zapravo riječi (često skraćenice engleskog jezika) koje je moguće kombinovati na razne načine.

Svaki HTML dokument mora biti otvoren sa ovim tagom <html> a zatvoren sa ovim tagom</html>.

Za generisanje HTML stranice potreban je najobičniji tekst editor, na primer Notepad.Nalazi se u Start meniju pod Programs->Accessories.

Pisanje programa pomoću tekst editora NotepadPrvo je potrebno startovati Notepad program. U okviru Windows operativnog sistema, na statusnoj liniji možemo pronaći dugme Start i pritisnuti ga. Od ponuđenih opcija izaberemo opciju Run i treba

aktivirati ovu opciju. Na prozoru koji se pojavi postoji tekst polje. U njega samo upisati notepad (slika 1).

Slika 1 /Aktivirana opcija Run pod operativnim sistemom WIN 7 i XP/ Nakon aktiviranja dugmeta pritiskom tastera enter ili OK, dobija se prozor tekst editora Notepad (slika 2).

Slika 2 Aktiviran prozor tekst editora Notepad

Na bijeloj površini piše se kod za HTML stranicu. Stranica se u svakom trenutku može snimiti aktiviranjem na meniju opcija File, pa opcije Save. Sačuvati stranicu pod željenim nazivom, npr. proba.htm Kod snimanja stranice treba obratiti pažnju da dokumenat koji u ovom slučaju treba da predstavlja HTML stranicu mora imati ekstenziju html ili htm.

4 | S t r a n i c a


Testiranje HTML stranice u Internet browseru (čitaču)

Kako bismo testirali napisani HTML potrebno je startovati neki od pretraživača, kao recimo Internet Explorer program, ili google chore, Netscape, Opera, i sl... U okviru Windows operativnog sistema, na statusnoj liniji treba pronaći dugme Start i pritisnuti ga. Od ponuđenih opcija treba pronaći opciju Programs>>Internet Explorer i treba aktivirati ovu opciju. U meniju izabrati opciju File>>Open pri čemu se otvara dijalog prozor Open i pritiskom na dugme Browse pronaći html stranicu proba.htm .

Za pisanje HTML programa mogu se koristiti i specijalni alati, na primjer Front Page. Stranica se može vidjeti u okviru Web browser-a, Google Chrome, Netscape Navigator ili Internet Explorer.

Pisanje, ali i editovanje HTML radim kroz standardizovani softver Adobe Dreamweaver CS3 ("C:\Program Files\Adobe\Adobe Dreamweaver CS3\Dreamweaver.exe), kroz koji ima tri moda rada, i to design mod u kome se radi dizajn i oblikovanje, i code mode kroz koji se vide HTML kodovi i može se raditi njihova eventualna korekcija, kao split mode odnosno kombinovani mod putem koga se vidi i dizajn stranice i kodovi. (slika 3)

Slika 3 /Izgled programa za editovanje i pisanje HTM – Adobe Dreamweaver CS3/

5 | S t r a n i c a


HTML komande se pišu u vidu tzv. TAG-ova. Jedan tag je ustvari komanda koja govori browseru sta i kako da uradi tj. na koji način da prikaže sadržaj određene stranice. HTML tagovi su "case insensitive" tj. svejedno je da li ih pišete malim ili velikim slovima. Tagovi se pišu unutar oznaka "<" i ">" (bez znakova navoda) npr: <html>.

Ovaj tag se nalazi na početku svakog HTML dokumenta<html> govori browseru da je fajl koji je upravo počeo da učitava HTML dokument i da kao takvog treba i da ga prikaže.Na kraj HTML dokumenta se stavlja završni HTML tag:</html>.

Ovaj tag govori browseru da je to kraj HTML dokumenta. Većina tagova ima i početni i završni tag. Završni tag se dobija dodavanjem znaka "/" i označava mjesto na kom prestaje dejstvo početnog taga.

Struktura HTML straniceMinimalna struktura HTML-dokumenta obuhvata tagove: <HTML>, </HTML> - zagrade HTML-teksta;<HEAD>, </HEAD> - zagrade zaglavlja, sadrži meta-definicije HTML-dokumenta;<TITLE>, </TITLE> - zagrade za naziv HTML-dokumenta i<BODY>, </BODY> - zagrade teksta obilježenog dokumenta.

Head dioSvaki HTML dokument se sastoji od dva dijela: zaglavlja (engl. head) i tijela (engl.

body). Zaglavlje se odvaja tagovima <head> i </head> a tijelo dokumenta tagovima: <body> i </body>. Sve ono što se napiše u zaglavlju dokumenta neće se prikazati u prozoru browsera već obično služi samo da pruži neke informacije o stranici.

BODY dioSve ono što je napisano između tagova <body> i </body> predstavlja tijelo dokumenta

pojaviće se kao sadržaj prezentacije u prozoru browsera. Izgled stranice:<html> <head><title> ovde pišemo naziv prezentacije </title></head><body> ovde se unosi sve ono sto želimo da se vidi u prezentaciji </body></html>

HeaderiNaslovi (engl. headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za

naslov ima opšti oblik: <Hn> Naslov nivoa n </Hn> gdje n uzima vrijednosti od 1 do 6.

6 | S t r a n i c a


OdjeljakOdjeljak (engl. division) se opisuje zagradama <DIV> ... </DIV>. Ovaj tag može imati atribut za pozicioniranje ALIGN sa vrijednostima CENTER, RIGHT ili LEFT.

ParagrafPasus (engl. paragraph) se obilježava zagradama <P> ... </P>. Ukoliko u ravnom tekstu slijedi pasus za pasusom, tag </P> se može izostaviti. Ovaj tag može imati atribut za pozicioniranje ALIGN sa istim vrijednostima kao tag <DIV>.

Novi redNovi red (engl. break) se obilježava etiketom <BR>. Ovo je prosti tag: ne postoji kraj taga </BR>.

Razdvojna linijaRazdvojna linija (engl. rule) se obilježava etiketom <HR> sa opcionim atributom NOSHADE Ovo je prosti tag: ne postoji kraj taga </HR>.Primjer<HR SIZE=4 WIDTH="50%"> SIZE – debljina linije

Odabir pozadine - background

Svaka stranica mora imati pozadinu - background, za što možemo koristiti samo boju ili neku sliku. Na internetu se može pronaći veliki izbor free backgrounda (npr. http://www.free-backgrounds.com).

Primjer koda za background:

<BODY BACKGROUND="pozadina.gif"> - ovo je primjer koda kada za background koristimo sliku, osim fotografije za pozadinu se može koristi i određena paleta boja koju imamo u sklopu programa u kome radimo određene stranicu (adobe dreamweaver, adobe flash, front page i sl..)

<BODY BGCOLOR="#3300FF"> - ovo je primjer koda kada za background koristimo boju.

Odabir slova - fonta

Vrlo važna stvar kod izrade www stranice je i odabir fonta s kojim ćemo raditi. Veom važno je da nikad ne birammo neke egzotične fontove, jer ih stariji pretraživači neće moći očitati zato je najbolje da primjenjujemo neke standardne fontove kao što su Times New Roman, Arial i Verdana, Tahoma i sl.Primjer koda za odabir slova:

<I><FONT FACE="TIMES NEW ROMAN" COLOR="#3300FF" SIZE="3">Primjer fonta plave boje veličine slova 3 i stil Italic</FONT></I>

isto možemo uraditi i uz pomoć css-a ili izradom stilova koje možemo primjeniti na stranicu.

7 | S t r a n i c a


Insertovanje naslova

h1, h2, h3, h4, h5, h6 (naslov-heading)

Element h1 označava naslov najvećeg nivoa te se ispisuje najvećim slovima, potom h2 označava prvi podnaslov te se ispisuje nešto manjim slovima, i tako redom sve do h6.

Insertovanje horizontalnih linija

<hr width="70%">

Na pretraživaču to će izgledati ovako:Na

Prilikom određivanja mjerne veličine, mjere je bolje zadavati pomoću postotaka, a ne pomoću vrijednosti u tačkama. Naime, različiti korisnici pregledat će stranice u pretraživačima s prozorima raznih širina. Linije, i uopšte svi ostali grafički objekti koji imaju apsolutne veličine neće se moći prilagoditi različitim širinama prozora, već će biti ili premali ili preveliki. S druge strane, grafički elementi s relativno zadanim veličinama pomoću postotaka raspoloživog prostora uvijek će se moći prilagoditi raznim veličinama prozora te će u pravilu bolje izgledati.

Veličine grafičkih elemenata je potrebno navoditi relativno, ako je to moguće, da bi se postigli bolji rezultati u slučaju prozora različitih veličina.

Pomoću atributa align moguće je odrediti da li će se linija prikazati lijevo (u slučaju vrijednosti left), desno (u slučaju vrijednosti right) ili centrirano (podrazumijevana vrijednost center). Na primjer:

<hr align="right" width="50%">

Na pretraživaču to će izgledati ovako:

Takođe je moguće odrediti debljinu linije, i to pomoću atributa size. Vrijednost tog atributa predstavlja debljina linije u tačkama (nije moguće zadati relativnu širinu postocima):

<hr align="center" width="80%" size="10">

Insertovanje slika

<img src="slika.gif">

Slike možemo koristiti i za linkovanje drugih stranica, a kod izgleda ovako:

<img src="design/webmail_(100_x_100).jpg" alt="" width="100" height="82" />

8 | S t r a n i c a


Na jednoj stranici možemo imati više manjih sličica obično u gif formatu, a ako neko želi vidjeti puni format slike klikom na manju sličicu otvara mu se slika u punom formatu, kod za taj prikaz slika izgleda ovako:

<img src="vijesti/2011/prebrojavanje/IMG_0555_(320_x_240).jpg" alt="" width="320" height="180" hspace="5" vspace="5" align="left" /> (cod sa sajta koji ažuriram www.lufazan-doboj.com)

Insertovanje hiperveza-povezivanja dokumenata pomoću opcije hiperveza

Hiperveze se koriste za povezivanje stranica unutar jedne stranice (npr. za skok na vrh stranice), za povezivanje unutar grupe stranica (na primjer, za povezivanje sadržaja s pojedinim stranicama) i za povezivanje sa sasvim drugim stranicama na drugim računarima ili sajtovima. Takođe, hiperveze mogu pokazivati na Internet resurse koji uopšte nisu stranice (na primjer, na e-mail adrese, i slično). Hiperveza se postavlja preko URL adrese objekta na koji hiperveza pokazuje. Zbog toga je osnovno razumjeti kako funkcioniše sistem identifikacije Internet objekata putem URL-a.

Kod za umetanje hiperveze je slijedeći:

<a href="URL_adresa" title="opis veze">Tekst hiperveze</a>

Element a može se koristiti i za određivanje lokalnog mjesta u dokumentu. U tom slučaju mu je opšta struktura ovakva:

<a name="naziv_mjesta"></a>

Element a tada mora imati atribut name čija vrijednost daje naziv lokalnom mjesta hiperveze. Sam element može, ali i ne mora imati neki sadržaj, ali završna oznaka elementa mora biti prisutna. Ako se i navede tekst između oznaka <a> i </a> to neće uticati na način prikaza teksta. Naziv lokalnog mjesta ne smije sadržavati praznine. Oznake lokalnih mjesta se često koriste za pomicanje unutar stranice. Naime, u slučaju veće stranice, dobro je na početku stranice postaviti kratak sadržaj s pregledom svih informacija na stranici i s hipervezama na lokalna mjesta unutar stranice. Tada korisnik prilikom pregledavanja stranica putem hiperveze može skočiti na željenu temu. Nakon što je gotov s čitanjem pojedine teme na kraj teme se postavlja hiperveza nazad na sadržaj. Time se ostvaruje jednostavna navigacija unutar stranice kao u ovom primjeru:

<A HREF="#vrh">vrh</A>

Dakle kada rezimiramo, za umetanje hiperveze unutar stranice trebaju nam dva koda:- prvi kod stavljamo na mjesto na koje želimo "skočiti", a on izgleda ovako

<A NAME=""></A>- drugi kod stavljamo na mjesto skojega "skačemo", a on izgleda ovako:<A HREF="#"></A>

9 | S t r a n i c a


Insertovanje formi (obrazaca)

text - unos jedne linije tekstapassword - unos linije teksta pri čemu se znakovi prikazuju kao zvjezdice (obično se koristi za unos lozinke)checkbox - omogućava unos da/ne odgovoraradio - omogućava izbor jedne od niza vrijednostisubmit - dugme za slanje forme posjetiocureset - dugme za brisanje svih elemenata forme na početnu vrijednostfile - kontrola za slanje datoteke posjetiocuhidden - skrivena kontrolaimage - kontrola koja prikazuje slikubutton - dugmetextarea - za unos teksta - komentara, odgovora i sl.

Evo primjera dijela koda za jednu formu koju sam postavio na internet portalu www.lufazan-doboj.com a koja služi za slanje, odnosno prijavljivanje psa za izložbu pasa:

<FORM action=mailto:[email protected]?subject=Prijava_psa_za_CAC_Doboj_2011 psa sa sajta method=post encType=text/plain> <p align="center"> </p> <table width="66%" border="1" align="center" bordercolor="#CCCCCC"> <tr> <td width="24%" height="28"><span class="style38"><font size="2" face="Arial, Helvetica, sans-serif">RASA/PASMINA/BREED:</font></span></td> <td width="76%"><p> <input name="rasa/pasmina" type="text" id="rasa/pasmina" size="75"></p></td> </tr> <tr> <td height="28"><span class="style38"><font size="2" face="Arial, Helvetica, sans-serif">BOJA/COLOR:</font></span></td> <td> <p> <input name="boja" type="text" id="boja" size="50"> </p></td> </tr> <tr> <td height="28"><span class="style38"><font size="2" face="Arial, Helvetica, sans-serif">

............................................................................................. itd za svaku stavku koja se traži u obrazcu do <INPUT type=submit class="style1" value=POSALJI/SEND> <INPUT type=reset value=IZBRISI/DELETE> <font size="2" face="Arial, Helvetica, sans-serif"> (pažnja: kada kliknete na -posalji- startovaće se Vaš e-mail program i poslati mail)</font></p></FORM>

10 | S t r a n i c a


LITERATURA

1. Web dizajn,Thomas A. Powell, Kompletan priručnik za Web dizajn, mirko knjiga 20052. http://htmltutorijali.blogger.ba/arhiva/2006/11/18/5288233. http://www.infosajt.com/index.php?topic=207.04. http://www.croitportal.com/web-razvoj/tutorijali/html-tutorijali/78-sto-je-html5. http://www.w3schools.com/xhtml/6. http://webdesign.about.com/c/ec/9.htm7. http://www.shire.net/learnwebdesign/xhtml.htm8. http://movielibrary.lynda.com/html/modPage.asp?ID=489. http://www.softlookup.com/tutorial/XHTML/index.asp10. http://www.lufazan-doboj.com

11 | S t r a n i c a

HTML Seminar Ski Rad Vedran Bozickovic

Documents

Transcript of HTML Seminar Ski Rad Vedran Bozickovic