EVROPSKI UNIVERZITET BRKOTehniki Fakultet Katedra Inenjerska informatikaPredmet: Web dizajnTEMA: Uvod u HTMLSTUDENT: PROFESOR:Fuad Hasanovi Prof. Dr Halid igi

1. HTML 1.1. Uvod u HTML

Prvo da ukratko objasnimo ta je to HTML.HTML je skraenica od HyperText Markup Language. To je opisni jezik za stvaranje web stranica. Njime se opisuju izgled dokumenta, pozicije slika, veliina teksta, boja pozadine, boja slova itd.

HTML stranice nisu nita drugo nego obine tekstualne datoteke koje sadravaju upute kako prikazati stranicu. Za opis stranica se koriste tagovi koji se piu unutar znakova < i >. Evo primjera:Ta reenica bi bila prikazana ovako:

Ovo je tekst za web stranicu.Kako su HTML stranice nita drugo nego obine tekstualne datoteke moete ih izraivati u bilo kojem tekstualnom editoru pa ak i u najjednostavnijem Notepadu koji dolazi s Windowsima.

Umjesto tekstualnih editora, kao to je Notepad, moete koristititi vizualne editore za izradu web stranica kao to su Macromedia Dreamweaver ili Microsoft Frontpage. Vizualni editori web stranica se nazivaju i WYSIWYG editori. What You See Is What You Get

Sa WYSIWYG editorima nemate neku veliku potrebu za uiti HTML, ali svatko tko se eli imalo ozbiljnije baviti izradom web stranica mora nauiti HTML jer je HTML majka svih web stranica i sve poinje od njega.

Sve html stranice koje napravite moraju imati ekstenziju .html ili .htm (npr. mojastranica.html).

1.2. Elementi

Html elementi se sastoje od 3 osnovna dijela:1. tag koji otvara neki element,2. sadraj elementa,3. tag koji zatvara taj element.Primjer:

1.3. Komentari

Sa komentarima moete pisati bilo gdje unutar skripte a taj tekst nee biti prikazivan na stranici, tj. moi e se vidjeti samo ako otvorite skriptu sa code editorom. Na ovaj nain moete ostavljati sebi poruke unutar skripte i sa njima npr. skrenuti pozornost na jedan dio skripte, ili sa ovime moemo jedan dio skripte iskljuiti, a sauvati kod tog dijela, kojeg moemo ponovno aktivirati ako izbriemo sljedee:

sa ovim zatvaramo komentar

1.4. Formatiranje

U HTML-u se formatira uz pomo tagova. Evo popisa najpoznatijih tagova za formatiranje:

tag za odlomak podebljani tekst nakrivljen tekst "jaki" tekst nakrivljen tekst podignut tekst spusten tekst precrtan tekst tekst kompjuterskog koda

-veliina fonta:

veliina od 1-7

-boja fonta:-boju fonta moemo mijenjati na vie naina: koristei hexa zapis boja ili koristei ime boje

-takoer boju fonta moemo zapisati i u rgb zapisu ali taj zapis nije uobiajen-vrsta fonta: -poetno slovo:

1.5. Linkovi

Vai linkovi mogu voditi na unutranjost stranice(internal) ,na kojoj se nalaze (npr. link "na vrh"), na stranicu unutar vae domene(local) ili na neku drugu stranicu izvan vae domene(global).O tome ovisi koji ete href atribut koristiti:

internal href="#strelica"local href="../slike/slika.jpg"global href="http://www.hotmail.com"

(href- Hypertext Reference)Ovako izgleda kod za link u obliku teksta.Sada emo se posvetiti ovom dijelu koda:ovaj dio govori na koji nain e se otvoriti taj link:_blank" otvara novu stranicu u novom prozoru_self" otvara novu stranicu u trenutanom prozoru _parent" otvara novu stranicu u okvir koji je "nadreen" linku_top" otvara novu stranicu u trenutano otvorenom prozoru, ponitavajui sve ostale okvireStrelicesa ovim kodom korisnika e se vratiti na vrh stranice kada on stisne link "na vrh". Prva linija koda se stavlja ondje gdje elimo da nas stranica odvede kada kliknemo na link "na vrh"; "linkovi" e biti prikazano na browseru, ali e do njega biti skriven dio "top" i onda kada kliknemo na link "na vrh" ta linija koda e potraiti koju e varijablu traiti, u naem sluaju pronai e "top", i odvest nas na taj dio teksta.

Email linkovisa ovim kodom ,kojeg moemo staviti bilo gdje na stranicu, otvorit emo va email klijent na pisanju nove email poruke sa naslovom "pomoc" i sadrajem poruke "trebam pomoc"Baza

Dobra je ideja odrediti defaultnu stranicu na koju e ii svi linkovi ako oni ne rade, tj. ako nemogu pronai stranicu na koju se odnose.Slikovni linkovi

Slikovne linkove ete dobiti tako da napiete ovakav kod:Uklonite rub tih slika ovako:

1.6. SlikeSlike se mogu dodati na vau stranicu sa ovim kodom:XXX zamijenite sa jednim od sljedeegasrc="pas.gif" slika se nalazi u istom direktoriju kao i HTML stranicasrc="../pas.gif" slika se nalazi u prijanjem direktoriju od HTML stranicesrc="../slike/pas.gif" slika se nalazi u direktoriju "slike" , prijanjem direktoriju od HTML straniceAlternativni atributu sluaju da se slika nemoe uitati, biti e prikazana rije "pas" unutar okvira slike.

Formatiranje slike-VISINA I IRINA-VERTIKALNO I HORIZONTALNO PODE ENJE

align (horizontalno)-right-left-centervalign (vertikalno)-top-bottom-center

Ovo je popis moguih podeenja slika. Primjer koda u kojem je slika podeena:

Linkovi na slikesa ovim kodom e browser prikazati sliku koja e voditi na neku stranicu kada kliknete na nju.ovaj kod e prikazati manju verziju slike koja e biti link na veu stranicu. Naravno, manju sliku vi morate napraviti.Thumbnails-to je naziv za smanjene verzije slika, napravljene da bi se stranica bre uitavala ili zbog estetskih razloga. Thumbnail ima link na sliku u punoj kvaliteti.Slike kao linkoviprimjer koda koji e pretvoriti sliku u link na neku stranicu.primjer koda koji e prikazati na stranici umanjenu sliku koja e biti link na veu sliku

1.7. Liste

Postoje 3 razliite vrste lista. , i .

- unordered list; tokice - ordered list; brojevi - definition list; tokice

Npr. Ordered listaIzmeu i stavljate tekst

Znai.....Rezultat e biti:

Proizvodi:1. DVD2. CD3. Tipkovnica4. Monitor 5. Mi

Moete i odabrati to e biti umjesto brojeva ovako:

U prvom primjeru pomou ovoga bi se ispisalo

a. DVDb. CDc. Tipkovnicad. Monitor e. Mi

Za moete birati izmeu izgleda tokica.

1.8. Tablice

Tablice su moda i najkomplikovanije za poetnike i zbog toga mnogi bjee od HTML a kada na red doe rad sa tablicama. ta e mi to kad imam Dreamweaver koji to umjesto mene obavi?", je pitanje koje se esto postavlja. E pa to nije ba tako. Ako budete moda nekada radili sa PHP-om ili ASP-om trebati e vam znanje "rune" izrade tablica u HTML-u.

Za poetak tablice koristimo . U tom elementu postoje tagovi (redak) i (stupac).Evo primjera jedne tablice sa dva reda i dva stupca.Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva redka.

Evo primjera:

Primjetite Rowspan s brojem 2. Taj broj oznaava koliko se redaka nalazi u drugom stupcu.Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan.

Evo primjera:CellspacingKoristite cellspacing za razmak izmeu rubova tablice. Pogledajmo primjer:

1.9. Boja pozadine

Boja pozadine odnosno bgcolor atribut se koristi za promijenu boje pozadine cijele stranice ili pojedinih elemenata kao to su tablice. Bgcolor moete staviti na vie mjesta u HTML elemente ali mi vam prporuamo da bgcolor koristite samo za boju pozadine stranice a za tablice koristite CSS.

Evo primjera kako promijeniti boju pozadine stranice: HTML sistem bojenja - imena bojaSada emo nauiti neke boje koje koristimo u HTML-u. Postoje 3 razliite metode postavljanja pozadinske boje. Najjednostavniji je openiti nain (primjer: blue, green, red, silver, black, yellow...)

Evo 16 osnovnih boja:Drugi nain je Hexadecimalni nain bojanja. Evo primjera:Ovdje moete vidjeti primjere boja.

Trei nain bojanja je sa RGB vrijednostima.

1.10. Slika kao pozadina

Pozadinsku sliku moete koristiti u bilo kojem elementu (tablicama, odlomcima, body tablice...) Ovdje emo nauiti kako pomou HTML-a napraviti da slika bude kao pozadina ali inae kada nauite HTML radite to CSS-om.

Evo primjera kako pomou HTML-a postaviti neku sliku kao pozadinu u tablici.Za pozadinske slike, zbog veliine slika, vam je najbolje koristiti tzv. Patterne odnosno minijaturne sliice koje se stalno ponavljaju koliko je god iroka tablica.

1.11. Meta oznake

Meta tagovi se uvijek postavljaju izmedju !Na pocetku svakog html dokumenta,ovisi o programu u kojem pisete vas html kod, prvu liniju zauzima ova linija koda:- OPIS KODA - - Oznaava vrstu browsera namjenjenog za pregled stranice- OPIS KODA - Refresh stranice svakih 60 sekundi,zelite li mjenjati vrijeme za koje ce se vasa stranica refreshati promjenite broj 60 u bilo koji broj.To ce se samo dogoditi ako izbrisete url=http://www.net.hr,inae bi vas nakon 60 sekundi preusmjerilo na net.hr stranicu.Takoer ako elite da se vaa stranica nakon 60 sekundi prebaci na neku drugu stranicu promjenite url=vaaStranica.com- OPIS KODA - Upisujui ovo u stranica omoguavate sebi pisanje na naem jeziku, te slova - OPIS KODA - Upisite vae ime ili osobne podatke- OPIS KODA Opis vae web stranice