dizajn statičkih web strana (uvod u html i css) web view) je organizacija koju je osnovao tim...

1Dizajn statičkih web strana (uvod u html i css)

Dizajn statičkih web strana (uvod u html i css)Osnove HTML-a

HTML, skraćenica od HyperText Markup Language, je standarizovani opisni jezik koji se koristi pri strukturiranju tekstova i multimedijalnih objekata u web stranice i elektronsku poštu. Kao modifikovanu i pojednostavljenu verziju SGML jezika, HTML standarizuje i održava World Wide Web Consortium (W3C).

World Wide Web Consortium (skr. W3C) je organizacija koju je osnovao Tim Berners-Lee, izumitelj Interneta, 1994. godine na Institutu za tehnologiju u Massachusettsu, skraćeno MIT. Organizacija djeluje s ciljem unapređenja i standarizacije Interneta kroz pojedinačne specifikacije koje izdaju radne grupe. Tehnički standardi koje je W3C do sada unaprijedio su, između ostalih: HTML, CSS, SMIL, XML i SVG. www.w3.org

HTML je veoma jednostavan jezik koji 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 datotka, 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 (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, nelinearno.

HTML je jezik za opis veb strana (za obeležavanje). Nije programski jezik. Kod HTML-a se prenosi http protokolom (Hyper Text Transfer Protocol). Za opis HTML strana koriste se tagovi. Za pisanje HTML koda potreban je običan tekst editor (Notepad). HTML stranice imaju ekstenziju .html ili .htm Za izvršavanje HTML koda je potreban web browser.

http://www.w3.org/


Osnovni tagovi HTML-a.

Tagovi su specijalne reči između zgrada <>

HTML koristi tagove da pomoću njih ukaže pretraživaču kako neki tekst ili slika treba da budu prikazani na ekranu. Tagovi se stavljaju unutar < > zagrada. U većini slučajeva, tagovi se postavljaju na početak nekog dela dokumenta, a na kraju tog dela dokumenta postavlja se tag završetka.

Na primer da napravite naslov dokumenta koristite sledeći opis: <title>Moj prvi HTML Dokument</title>

Uočite ova dva taga, <title> i </title> između kojih se nalazi tekst naslova dokumenta. Vidite da se tag završetka razlikuje od taga početka po kosoj crti (/).

Tag HTML

<html> tag označava početak HTML programa (koda).

<html> tag se obično postavlja na početak dokumenta, kao prva naredba za pretraživače. Na kraju dokumenta postavlja se tag završetka </html> . Između ova dva taga nalaziće se svi ostali tagovi kao i sam sadržaj dokumenta.

Tag head

<head> tag je tag koji služi za početak jednog posebnog dela dokumenta koje se naziva zaglavlje dokumenta. Zaglavlje se neće prikazivati na ekranu.Ono služi da se unutar njega definišu neke karakteristike dokumenta, kao što je naslov.

Zaglavlje se opisuje između tagova <head> i </head>.

Primer dokumenta koji sadrži zaglavlje u kojem je definisan naziv dokumenta tagovima <title> i </title>:

<html><head><title>Moj prvi HTML dokument</title></head>


Title tag

title tag vam omogućava da definišete naziv vašeg dokumenta. To se postiže na sledeći način:

<title>Moj prvi HTML dokument</title>

Naziv dokumenta, pošto se nalazi u zaglavlju, neće biti prikazan na ekranu, ali će se pojaviti u na raznim drugim mestima (na vrhu prozora, u bukmark-u stranica i sl.)

Body tag

<body> i </body> tagovi definišu početak i kraj sadržaja vašeg dokumenta. Sav tekst, sve slike i linkovi na druge dokumente nalaziće se unutar ovih tagova.

<body> se nalazi odmah nakon zaglavlja (head tagova). Tipična web stranica može izgledati ovako:

h (Header) tagovi

h tag se koristi za izbor veličine slova koja će se koristiti za naslove i podnaslove u vašem dokumentu. Postoji šest nivoa veličine od h1 do h6. Najveća slova se dobijaju tagom h1 a najmanja tagom h6. Slede primeri za svih 6 nivoa.

<html><head><title>My First HTML Document</title></head><body>Ovde se nalazi sadržaj vašeg dokumenta: tekst, slike, grafika itd.</body></html>


Tagovima za naslove se ne postiže samo promena veličine slova, već su naslovi i boldovani, a takođe ispred i iza naslova se dodaje po jedna prazna linija.

Paragrafi

U HTML, paragraf se označava tagom tag <p> i postavlja se na kraj svakog paragrafa "normalnog" teksta (pod normalnim se podrazumeva tekst koji nema upotrebljene neke druge tagove).

<p> ovaj tag prouzrokuje postavljanje teksta u novu liniju uz dodavanje jedne prazne linije ispred

<br> ovaj tag je sličan prethodnom sa razlikom što se ne dodaje jedna prazna linija ispred (nema završni tag </br>)

Bold i italik tagovi

Možete posebnim tagovima označiti da vaš tekst bude u bold i/ili italic obliku.

Ne možete koristiti istovremeno oba taga (za bold i za italic). Ako greškom to pokušate onaj poslednji unet će biti primenjen.

Bold i itali se javljaju u dva oblika: fizičkom i logičkom i možete koristiti oba prema vašoj želji. Upotreba ovih tagova vidi se u sledećim primerima:

Fizički tagoviOvo je <b>boldovano</b>Ovo je boldovanoOvo je <i>italic</i>Ovo je italic

Logički tagovi

Ovo je <strong>jako istaknuto</strong>Ovo je jako istaknutoOvo je <em>istaknuto</em>Ovo je istaknuto

Postoji mala razlika između fizičkog i logičkog taga. Kod fizičkog se menja samo oblik slova, a logički je zavisan od pretraživača i može uneti i druge promene ( recimo promenu boje slova ).

Horizontalna linija

Ako želite da razdojite delove vašeg dokumenta, to možete postići ubacivanjem horizontalne linije pomoću taga <hr>.

Horizontalna linija će biti prikazana ovako:

Komentari

Moguće je u HTML dokumente uneti komentare koji se neće prikazivati na ekranu pretraživača. To je najbolji način da se postave upozorenja i dodatne instrukcije za svako buduće ažuriranje vašeg dokumenta.

Komentari imaju sledeći oblik:

HTML kontrole


HTML Forme

HTML forma je deo dokumenta koji u sebi može da sadrži elemente forme kao što su razna polja za unos potataka, razne vrste dugmića za pokretanje akcije i sl.

Forma se kreira tagom <form> a pojedinačni elementi forme tagovima <input>.

Evo jednog jednostavnog primera forme koja sadrži dva elementa:<form> <input> <input></form>

U pretraživaču bi to izgledalo ovako:

Tag <form> i tagovi <input> mogu imati niz atributa koji ih bliže definišu.

Primer:<form>Ime : <input type="text" name="ime"><br>Prezime: <input type="text" name="prezime"></form>

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

Ime :

Prezime:

Tag <input> se koristi i za definisanje dugmića (buttons) koji imaju različite oblike i upotrebu.

Akciono dugme

Akciono dugme se koristi za pokretanje neke akcije, recimo brisanje svih polja u formi, startovanje nekog javsript programa i sl.

Akciono dugme se kreira na način prikazan u sledećem primeru:


<form><input type="button" name="dugme" value="Start" onClick="Akcija"></form>

Ovako bi to izgledalo u pretraživaču:

Radio dugme

Radio dugme se koristi kada želite da pravite izbor između malog broja opcija kao u sledećem primeru.<form><input type="radio" name="pol" value="muski"> Muski<br><input type="radio" name="pol" value="zenski"> Zenski</form>

Ovako to izgleda u pretraživaču::

Muski

Zenski

Uočite da samo jedna od dve opcije može biti odabrana kada kliknete na dugme.

Checkbox dugme

Checkbox dugme se koristi kada želite da odaberete jednu ili više opcija iz nekog manjeg skupa kao što to pokazuje sledeći primer:<form>Šta sve imam?Imam bicikl:<input type="checkbox" name="vozilo" value="Bicikl"><br>Imam auto: <input type="checkbox" name="vozilo" value="Auto"><br>Imam avion: <input type="checkbox" name="vozilo" value="Avion"></form>


A evo kako bi to izgledalo u pretraživaču:

Šta sve imam?

Imam bicikl:

Imam auto :

Imam avion:

Uočite da kod checkbox dumića možete da birate više od jedne opcije (za razliku od radio dugmića gde birate samo jednu opciju).

Slanje sadržaja forme serveru

Forme se najčešće koriste za slanje podataka ka serveru. Za slanje podatka se koristi dugme tipa "submit" a u tagu <form> se dodaje atribut "action" kojim se definiše koji će program na serverskoj strani preuzeti poslate podatke. Atributom "method" definiše se metod slanja podataka koji može biti "get" ili "post".

Evo primera:<form name="input" action="http://osnove-programiranja.com/vezbe/login.php"method="get">Korisnik: <input type="text" name="korisnik"><input type="submit" value="Submit"></form>

Ovako to izgleda u pretraživaču:

Korisnik:

Ako sada u input polje ukucate niz slova i kliknete na dugme "Submit" pretraživač će poslati vaš podatak serveru na kojem će se aktivirati program login.asp koji će preuzeti poslati podatak i sprovesti odgovarajuću akciju.

Stilovi u HTML-u (kaskadni stilovi - CSS) Cascading Style Sheet i Metode izrade HTML dokumenata i kaskadnih stilova

Submit


CSS Tutorial http://w3schools.com/css/ (na engleskom jeziku)

CSS je jezik kji može da sadrži sve one podatke (sintakse) koji imaju zadatak da odrede dizajn nekog elementa jedne web strane.

• CSS – kaskadne liste stilova

• Stilovi definišu izgled html elemenata

• Stilovi su dodati u html v 4.0

• Razni nivoi definicije stilova

– Stil na nivou elementa (najniži nivo)

– Stil na nivou html strane

– Spoljašnji stil (eksterni file)

– Podrazmevani prikaz u browser-u (najviši nivo)

• Različiti nivoi definicije stilova za jedan isti html elemenat na web strani će imati različite prioritete u zavisnosti od nivoa – najniži nivo – najviši prioritet

Problematika html-a• Html tag-ovi su prvobitno zamišljeni da definišu sadržaj web strane

• Prikaz dokumenta je trebalo da bude zadatak browser-a

• Dva sukobljena browser-a - IE i Netscape su dodavala nove html tag-ove i atribute originalnoj specifikaciji html-a, što je bitno otežalo striktno razdvajanje sadržaja i načina prikazivanja – na pr. <font> tag i color atribut

Kao odgovor na takvo stanje, W3C – neprofitna organizacija za standardizaciju web-a je kreirala stilove – styles u html-u V 4.0

Prikaz preko CSS-a

• CSS određuju način prikaza html elemenata

• Stilovi su najčešće smešteni u posebnim file - ovima sa ekstenzijom CSS, mada mogu biti i na web strani

• CSS u posebnim file-ovima omogućavaju da se veoma lako centralizovano može definisati i po potrebi menjati način prikaza html elemenata na čitavom web site-u koji može imati veliki broj strana

• CSS omogućavaju da se jednom definisani izgled web strane koristi na velikom broju drugih web strana što doprinosi ujednačenom vizuelnom izgledu i prikazu web strana na site-u

CSS syntacs – sintaksa

• Osnovna sintaksa definicije stila se sastoji od tri osnovna elementa:

http://w3schools.com/css/


– Selector

– Property

– Value

• selector {property: value}

• Selector je html element / tag za koji se definiše stil

• Property je svojstvo / atribut koje se stilom podešava

• Value je vrednost atributa

Primeri stilova

• body {color: black} (<body>)

• p {font-family: "sans serif"} (<p> navodnici ako se vrednost atributa sastoji iz više odvojenih reči)

• p {text-align:center; color:red} (podešavanje više svojstava jednog elementa)

• Pregledan način pisanja:

p

{

text-align: center;

color: black;

font-family: arial

}

dizajn statičkih web strana (uvod u html i css) web view) je organizacija koju je osnovao tim...

Documents