Uvod u HTML5

01 Fajlovi

Web stranice imaju ekstenziju .htm ili .html. Postoje i posebni tipovi web dokumenata koji imaju drugačije ekstenzije (.php, .asp, .jsp, itd.). Slike se ne snimaju unutar HTML dokumenta već su izdvojene u zasebne fajlove. Uobičajeno su slike u .gif, .jpg ili .png formatu. Noviji web čitači prepoznaju i vektorski format grafike .svg.

Stilove za formatiranje HTML dokumenta obično izdvajamo u .css fajlove. Isto možemo učiniti sa JavaScript programima koji mogu biti izdvojeni u .js fajlovima.

Početna strana sajta gotovo uvijek treba da se zove index.html (ili rjeđe default.html), što saznajemo od web provajdera kod koga postavljamo sajt. Dobra ideja je da se fajlovi snimaju sa imenima koja se sastoje samo iz malih slova engleske abecede i cifara. LINUX serveri razlikuju mala i velika slova, što znači da lako možemo da pogriješimo u linkovima do fajlova. Fajlovi mogu biti organizovani u foldere i podfoldere. Ovo nam je značajno zbog načina na koji ćemo se povezati sa određenim fajlom. Pogledajmo sledeći primjer:

Osnovni folder (označen kao "/") sadrži foldere grafika, mapa i fajlove index.html i profil.jpg. Unutar foldera "grafika", nalazi se folder slike i fajlovi strelica.png i okvir.png. Unutar foldera "slike", nalaze se fajlovi pozadina.jpg i foto.jpg. Povezivanje se vrši tako što se HTML fajlovi povezuju sa drugim HTML fajlovima i svim ostalim resursima (slike, stilovi i sl). Veza se može uspostaviti navođenjem relativne ili apsolutne putanje do fajla. Apsolutna putanja navodi se od osnovnog foldera sajta pa do konkretnog fajla, dok se relativna navodi od foldera u kome se nalazi fajl iz koga se vrši povezivanje.

Ako bismo željeli da u fajlu index.html prikažemo sliku foto.jpg, navođenjem apsolutne putanje, to bi izgledalo ovako:

/grafika/slike/foto.jpg

Na potpuno isti način bismo prikazali tu sliku i u fajlu prikaz.html. Pošto su u pitanju apsolutne putanje (uvijek počinju kosom crtom), potpuno je nebitno kako su fajlovi raspoređeni jedan u odnosu na drugi.

Međutim, ako koristimo relativne putanje, onda moramo da vodimo računa gdje se nalaze fajlovi jedan u odnosu na drugi. Ako bismo željeli da u fajlu index.html prikažemo sliku foto.jpg, to bi izgledalo ovako (obratite pažnju da sada nema vodeće kose crte):

grafika/slike/foto.jpg

Ali ako bismo željeli da u fajlu prikaz.html prikažemo sliku foto.jpg, to bi izgledalo ovako:

../grafika/slike/foto.jpg

Dvotačka označava nadfolder, što znači da putanja mora prvo da "izađe" iz foldera mapa u kome se nalazi prikaz.html, a tek onda da "uđe" u foldere grafika i slike. Pogledajmo još nekoliko primjera:

U fajlu index.html prikazati sliku profil.jpg:"profil.jpg"

U fajlu prikaz.html prikazati sliku profil.jpg:"../profil.jpg"

U fajlu index.html prikazati sliku strelica.png:"grafika/strelica.png"

U fajlu prikaz.html prikazati sliku strelica.png:"../grafika/strelica.png"

U fajlu primer.html prikazati sliku profil.jpg:"../../profil.jpg"

U fajlu primer.html prikazati sliku okvir.png:"../okvir.png"

U fajlu primer.html prikazati sliku pozadina.jpg:"pozadina.jpg"

Iz fajla primer.html napraviti link ka fajlu prikaz.html:"../../mapa/prikaz.html"

Iz fajla prikaz.html napraviti link ka fajlu primer.html:"../grafika/slike/primer.html"

02 HTML oznake

Suštinski posmatrano, HTML fajl je tekstualni dokument. Sam standard je relativno jednostavan za učenje i razumjevanje, tako da je HTML stranicu moguće kreirati i u običnom tekst editoru. Naravno, postoji i veliki broj besplatnih ili komercijalnih programa namjenjenih da proces kreiranja Internet prezentacije učine što više intuitivnim.

Inače, izgled web stranice u potpunosti zavisi od HTML-a i CSS-a, pošto web čitač:

ignoriše svaki novi red (enter) i poistovjećuje ga sa jednim razmakom ignoriše višestruke razmake i tab-ove i takođe ih svodi na samo jedan razmak

HTML kod prvenstveno služi za definisanje dijelova dokumenta.

Naredbe HTML-a nazivaju se „oznakama“ (“tags”). Uz nekoliko izuzetaka, svaka oznaka sastoji se iz dva dijela – početne i završne oznake. Između njih, nalazi se dio dokumenta (npr. tekst) na koji se ta oznaka odnosi. Oznake takođe mogu biti hijerarhijski struktuirane, što znači da se i unutar njih mogu takođe naći oznake.

Uopšteno, oznaka ima sledeću strukturu:<oznaka> tekst </oznaka>Nazivi oznaka se uobičajeno pišu malim slovima, ali HTML5 dozvoljava da ih pišemo kako želimo.

Na primjer, oznaka “<b>” se koristi ako je potrebno da jedan dio teksta bude naglašen (uobičajeno ispisan podebljanim slovima). U HTML fajlu:Tekst koji sledi je <b>vrlo važan</b> i morate ga pažljivo čitati.

Na ekranu, kako ga tumači web čitač:

U ranijim verzijama standarda (prije pojave XHTML-a), HTML je služio za formatiranje dokumenta. Bitno je da napravimo razliku, već na samom početku. Formatiranje definiše izgled dokumenta, i HTML standard se više ne bavi time.

Danas, HTML-om definišemo šta predstavlja odeređeni dio dokumenta (npr. glavni naslov, podnaslovi, pasusi...). Kažemo da su oznake HTML-a "semantičke", odnosno da definišu smisao dokumenta.

Opšta ideja je da se odvoji suština od izgleda. Suštinom se bavi HTML, a izgledom CSS.

Tekst koji sledi je vrlo važan i morate ga pažljivo čitati.

Oznake najčešće imaju i neke dodatne atribute (parametre). Pravila za atribute su sledeća:

atributi se uvijek zadaju u početnom dijelu oznake (posle naziva same oznake), nikada u završnom dijelu

zadaju se u obliku: naziv_param = “vrijednost” (naziv atributa bez razmaka, znak jednakosti i vrijednost atributa pod navodnicima)

može ih biti više – u tom slučaju se odvajaju razmakom njihov redosled nije bitan

Tako bi oznaka sa parametrima bila napisana na sledeći način:

<oznaka param1=”vrijednost” param2=”vrijednost” … > tekst </oznaka>

Na primjer, oznaka kojom se u dokument ubacuje link, sadrži atribut kojim se definiše URL na koji link vodi korisnika:

Posjetite <a href=”http://www.visokaturisticka.edu.rs”> sajt Škole </a> za sve informacije o upisu.

U web čitaču izgleda ovako:

Posjetite sajt Škole za sve informacije o upisu.

Postoji i posebna vrsta oznaka, koje nemaju dio za zatvaranje, odnosno koji ne mogu da obuhvate tekst i druge oznake. Jednostruke oznake imaju posebnu sintaksu:

<oznaka />

Odnosno:

<oznaka param1=”vrijed” param2=”vrijed” … />

Prema HTML5 standardu, kosa crta ne mora da se navede. Drugim riječima moguće je napisati i samo:<oznaka param1=”vrijed” param2=”vrijed” … >

Ovakva je na primjer oznaka koja nalaže web čitaču da na određeno mjesto ubaci sliku ili oznaka kojom se zadaje prelazak u novi red (web čitač, inače sam vrši prelom teksta u sledeći red, kada tekst premaši širinu prozora).

Ovo je <br /> prelom linije.

Dobijamo ovakav rezultat:

Ovo jeprelom linije.

Kao što je već rečeno, novi redovi, kao i uzastopni razmaci u HTML fajlu se ignorišu od strane web čitača. Ako je u HTML fajlu zadato:

Ovo je i dalje jedna linija.

U web čitaču to izgleda ovako:

Ovo je i dalje jedna linija.

Zbog toga koristimo oznaku za prelazak u novi red i specijalan razmak. Inače specijalni znakovi HTML-a su:

&nbsp; za razmak koji se neće automatski prelamati na kraju reda &lt; za znak manje: < &gt; za znak veće: > &quot; za navodnik: “ &apos; za apostrof: ' &amp; za ampersend: &

03 Komentari

Na bilo kom mjestu unutar HTML dokumenta, moguće je postaviti komentar. Komentari se obično koriste da bolje objasne HTML tekst, što pomaže kod kasnijeg mijenjanja. Tekst komentara se neće vidjeti na stranici.

<!-- Tekst komentara -->

04 Struktura HTML dokumenta

Postoje posebne oznake koje, već određuju glavne odjeljke same HTML stranice. Po tome, HTML dokument ima sledeću strukturu:

<!DOCTYPE...><html> <head> ... zaglavlje dokumenta </head> <body> ... tekst dokumenta </body></html>

Kao što vidimo, cio dokument se nalazi unutar jedne posebne oznake – html.

U dijelu za zaglavlje head, nalaze se informacije o samoj stranici – ko je autor, u kom programu je stranica kreirana, koja kodna strana se koristi, ključne riječi, naziv stranice i slično.

U glavnom dijelu – body nalazi se sam sadržaj stranice, tj. tekst, slike, tabele itd. Sve oznake koje su ovde opisane upotrebljavaju se u ovom dijelu, osim ako nije naglašeno da su u pitanju oznake zaglavlja.

Inače, dokument obično počinje doctype linijom, koja se navodi ispred svega i koja definiše tip dokumenta. Primjeri ovih linija se mogu pronaći u W3C specifikacijama, a primjer linije koja definiše standardni (striktno) XHTML dokument bi bila:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Srećom, HTML5 standard je veoma pojednostavio ovu liniju, tako da je danas dovoljno napisati:

<!doctype html>

05 Oznake zaglavlja

Unutar zaglavlja HTML dokumenta moguće je koristiti nekoliko specifičnih oznaka.

Oznaka title služi za definisanje naslova stranice koji se pojavljuje u naslovnoj liniji web čitača.

Oznaka meta ima višestruku primjenu. Jedna od najvažnijih je za određivanje kodnog rasporeda. U sledećem primjeru vidimo kako se po XHTML standardu definiše UNICODE UTF-8 raspored koji pored ostalih pisama podržava i srpsku latinicu i ćirilicu.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML5 je značajno pojednostavio način za navođenje kodne strane, tako da je danas dovoljno otkucati:

<meta charset=“utf-8“ />

Pomoću META taga možemo definisati ključne riječi koje opisuju stranicu i koje pretraživači uzimaju u obzir pri indeksiranju.

<meta name="keywords" content="HTML, XHTML, stilovi, uvod, turisticka, skola" />

Postoje i druge primjene oznake META, ali one ovde neće biti objašnjene.

06 Osnovne HTML oznake

U ovom odjeljku ćemo objasniti nekoliko najkorišćenijih oznaka za definisanje dijelova dokumenta. Neke od ovih oznaka imaju i prateće parametre koji preciznije definišu izgled teksta, ali ti atributi su prema HTML5 standardu zastarjeli i preporuka je da se za formatiranje koriste stilovi. Sve ovde navedene oznake mogu imati opšte atribute o kojima će biti više riječi kasnije.

<title>Uvod u HTML</title>

<p> služi za obilježavanje pasusa teksta

<p> Tekst pasusa </p>

<br> je jednostruka oznaka koja služi za prelazak u sledeći red

<br />

<h1>..<h6> oznake služe za obilježavanje naslova. Pri tom se <h1> koristi za glavne naslove, <h2> za podnaslove, <h3> za pod-podnaslove, itd.

<h1> Naslov </h1>

<b> i <strong> se koriste za obilježavanje naglašenog (bold) teksta.

<b> Podebljani tekst </b>

<i> i <em> se koriste za obilježavanje teksta koji je po smislu drugačiji – obično se prikazuje kao kurziv (italic).

<i> Kurzivni tekst </i>

<mark> služi za izdvajanje “obilježenog” teksta – obično se prikazuje kao tekst obojen markerom.

<mark> Obilježen tekst </mark>

<sup> i <sub> oznake se koriste za obilježavanje teksta koji će biti ispisan u eksponentu odnosno indeksu.

^Eksponent , _Indeks

<hr> je jednostruka oznaka koja predstavlja promjenu teme u tekstu – obično prikazuje horizontalnu liniju.

VAŽNO:

Sve ovde navedene oznake će u neku ruku uticati na izgled dokumenta. To je zbog toga što web čitač ima neka unaprijed pripremljena formatiranja za većinu njih.

Na primjer, između pasusa će se pojavljivati razmak, naslovi će biti prikazani uvećanim slovima i podebljano itd.

Ipak, treba da zapamtimo, da sve oznake posmatramo isključivo kao semantičke, odnosno kao način da odredimo smisao teksta, a ne njegov izgled.

<hr />

Oznake koje se malo rjeđe koriste:

<del> definiše „obrisan“, tj. nevažeći tekst – kada želimo da se vide promjene koje su urađene u dokumentu – obično se prikazuje precrtano.

<ins> definiše novi tekst koji je „naknadno dodat“ – obično podvučen.

<pre> definiše „unaprijed formatirani“ tekst – obično zadržava entere i višestruke razmake.

07 Linkovi

Jedna od najvažnijih karakteristika Web dokumenata je što su oni predstavljeni ne običnim tekstom, već tzv. “hipertekstom”. Hipertekst je tekst u kome su određene riječi, rečenice ili pojmovi drugačije ispisani (npr. drugom bojom) i što služe kao tzv. “linkovi”, odnosno veze sa drugim stranicama koje su vezane za te pojmove.

Te stranice mogu biti dio iste prezentacije, a mogu biti i na sasvim drugim Internet sajtovima.

Apsolutni link se obično koristi kada želimo da pristupimo stranici na drugom sajtu. URL (Uniform Resource Locator) uvijek počinje sa „http://“ iza koga se navodi sam naziv sajta i putanja do stranice. Primjer: http://www.visokaturisticka.edu.rs/info/vest154.html

Relativni link se uvijek odnosi na neku stranicu unutar sajta. Ako je stranica u istom folderu, može se navesti samo naziv te stranice, kao npr: strana.html

Ako se stranica nalazi u nekom podfolderu, navodi se putanja od stranice sa linkom do tražene stranice. Npr: dokumenti/vazno/strana.html

Ako se strana nalazi u nadfolderu, taj folder se obilježava kao „..“ , npr: ../docs/strana.html

Ponekad je zamorno navoditi nadfoldere i podfoldere, pogotovu ako želimo da koristimo isti link na više različitih strana. Tada možemo koristiti apsolutne linkove, kao npr: http://www.nassajt.com/docs/strana.html ili samo /docs/strana.html (kada link počinje kosom crtom, uvijek se odnosi na osnovni folder sajta).

Ako želimo da link služi za pisanje e-maila, možemo ga navesti kao npr: mailto:ime@adresa.com

Linkovi ne moraju uvijek da vode na HTML fajlove, već i na slike, PDF dokumente i sl. Ukoliko browser ne može da otvori fajl, ponudiće posjetiocu da ga snimi na svoj računar.

Za linkove se koristi oznaka <a>, koja u svom najjednostavnijem obliku izgleda kao:

<a href=“URL“> Tekst linka </a>

Na primjer:

<a href=”http://www.w3schools.com/default.asp”>W3Schools Online Web Tutorials</a>

Ova oznaka ima i jednu posebnu mogućnost. Ukoliko se navede atribut „name“, na tom mjestu će biti obilježen tzv. bookmark, odnosno mjesto unutar stranice koje može da se referencira linkom.

<a name=“naziv“ />

Na primjer, bookmark:

<a name=“pocetak“ />

Može se pozvati linkovima

<a href=”#pocetak”> Početak strane </a>, ako je link na istoj stranici, odnosno

<a href=”index.html#pocetak”> Početak strane </a> , ako se poziva bookmark sa druge stranice.

08 Liste

U HTML-u je moguće kreirati tri vrste lista – neuređenu listu, numerisanu listu i definition listu. Neuređena lista (bullets) se obilježava oznakama

<ul> ...stavke liste... </ul>

a numerisana lista oznakama

<ol> …stavke numerisane liste… </ol>

Same stavke unutar bilo koje od ove dvije liste se navode unutar oznaka

<li> pojedinačna stavka </li>

Primjer za neuređenu listu (unordered list - ul) bi bio:

<ul> <li> Prva </li> <li> Druga </li> <li> Treća </li></ul>

Prva Druga Treća

Primjer numerisane liste (ordered list - ol):

<ol> <li> Prva </li> <li> Druga </li> <li> Treća </li></ol>

1. Prva2. Druga3. Treća

Unutar samih LI oznaka mogu se naći druge HTML oznake.

Unutar liste možemo imati i podliste. Podlistu (stavke unutar stavki) ubacujemo kao novu UL ili OL listu unutar odgovarajuće LI oznake. Ovde imamo primjer u kome smo unutar druge stavke uređene liste umetnuli neuređenu podlistu.

<ol> <li> Prva </li> <li> Druga <ul> <li> Podstavka A </li> <li> Podstavka B </li> <li> Podstavka C </li> </ul> </li> <li> Treća </li></ol>

09 Grafika

Unutar HTML fajla se mogu prikazivati slike. Slike su date kao zasebni fajlovi i pozivaju se preko URL-a koji vodi do slike, što znači da prikazana slika čak i ne mora da bude na istom sajtu.

Da bi se slika prikazala koristi se jednostruka <img> oznaka:

<img src=“putanja do slike“ alt=“alternativni tekst“ width=“sirina slike“ height=”visina slike” />

Kao što se vidi, ova oznaka ima nekoliko atributa koje možemo koristiti:

src – obavezan atribut. Definiše putanju do fajla slike. alt – definiše tekst koji se prikazuje ako slika iz nekog razloga nije pronađena ili ne može da se

prikaže. width – određuje širinu slike u pikselima ili procentima. Ukoliko parametar nije naveden, slika se

prikazuje u svojoj originalnoj širini. height – slično kao gornji atribut, određuje se visina slike.

Primjer za prikaz slike:

<img src=”adorable.gif” alt=”Mali meda” width=”100” height=”92” />

10 Tabele

Tabele su do nedavno predstavljale jedan od najboljih HTML alata za formatiranje sadržaja stranice. Danas to više nije slučaj, pošto se pokazalo da su stranice komponovane pomoću tabela teške za održavanje. Ipak, i dalje imaju svoju upotrebnu vrijednost za prikaz tabelarnih podataka.

HTML tabele su vrlo fleksibilne – pojedine ćelije se mogu protezati na više redova i kolona, tako da je u krajnjoj liniji moguće ostvariti bilo kakav kompozicijski zahtjev. Kada se dođe do granice mogućnosti tabele, uvijek je moguće smjestiti novu tabelu unutar ćelije već postojeće tabele.

Svaka tabela se sastoji iz redova i kolona, s tim što je, zbog prirode HTML-a, njena struktura hijerarhijski organizovana. Tabela sadrži redove, dok redovi sadrže ćelije. Nije neophodno navesti koliko ima redova, odnosno ćelija, i time se omogućava fleksibilnost tabela.

Oznaka kojom se označava tabela je <table>, unutar nje se nalazi jedan ili više redova označenih kao <tr>, unutar kojih se nalazi nekoliko (ne obavezno isti broj) ćelija koje su označene kao <td>. Sadržaj ćelija tabele se uvijek mora nalaziti u <td> odjeljcima. Dakle struktura tabele bi izgledala ovako:

<table border="1"> <!-- Eng. border - okvir, bez ovoga ne bi imali okvira oko tabele --> <tr> <td> tekst </td> <td> tekst </td> ... </tr> <tr>

<td> tekst </td> <td> tekst </td> … </tr> …</table>

Opciono, unutar tabele se mogu koristiti i oznake <thead> , <tfoot> i <tbody>. Ove oznake služe za grupisanje redova unutar tabele, da bi se izdvojilo zaglavlje, podnožje i glavni dio sa podacima. Ako se ove oznake koriste, obavezno je da sekcije tabele budu navedene upravo po redosledu zaglavlje, podnožje, pa tek onda tijelo tabele.

<table border="1"> <thead> <tr> <th> tekst </th> … </tr> … </thead> <tfoot> <tr> <td> tekst </td> … </tr> … </tfoot> <tbody> <tr> <td> tekst </td> … </tr> … </tbody></table>

Oznaka <tr> definiše red tabele, a oznaka <td> sadrži pojedinu ćeliju. Ova oznaka ima dva parametra koji se koriste ukoliko želimo da spojimo više ćelija u jednu:

colspan – definišemo preko koliko kolona se konkretna ćelija proteže. rowspan – definišemo preko koliko redova se konkretna ćelija proteže.

Sledi jednostavan primjer, gdje u prvom redu jedna ćelija pokriva dvije kolone, a u drugom redu se nalaze dvije ćelije. Postignut efekat je identičan spajanju ćelija u Word-u ili Excel-u.

<table border="1"> <tr> <td colspan=“2“> Spojena ćelija </td> </tr> <tr> <td> Prvi red <br />Drugi red </td> <td> Druga ćelija </td> </tr>

</table>

U web čitaču ova tabela izgleda ovako:

Da pogledamo još jedan primjer kako funkcioniše spajanje ćelija. Recimo da imamo tabelu sa tri reda i po tri ćelije u svakom redu. Ako bismo prvu ćeliju proširili preko dvije kolone, a bez uklanjanja bilo koje druge ćelije, dobili bismo deformisanu tabelu.

<table border="1"> <tr>  <td colspan="2"> 1 </td>  <td> 2 </td>  <td> 3 </td>  </tr>  <tr>  <td> 4 </td>  <td> 5 </td>  <td> 6 </td>  </tr>  <tr>  <td> 7 </td>  <td> 8 </td>  <td> 9 </td>  </tr> </table>

Pokazalo se da je jedna ćelija u prvom redu višak, što znači da bismo trebali da je uklonimo. U ovom slučaju uklonićemo ćeliju sa brojem 2.

<table border="1"> <tr>  <td colspan="2"> 1 </td>  <td> 3 </td>  </tr>  <tr>  <td> 4 </td>  <td> 5 </td>  <td> 6 </td>  </tr>  <tr>  <td> 7 </td>  <td> 8 </td>  <td> 9 </td> 

</tr> </table>

Kako bi se ponašala tabela ukoliko bismo prvu ćeliju proširili preko dva reda, opet bez prethodnog izbacivanja ćelija koje su višak?

<table border="1"> <tr>  <td rowspan="2"> 1 </td>  <td> 2 </td>  <td> 3 </td>  </tr>  <tr>  <td> 4 </td>  <td> 5 </td>  <td> 6 </td>  </tr>  <tr>  <td> 7 </td>  <td> 8 </td>  <td> 9 </td>  </tr> </table>

Ukoliko ste mislili da će ćelije 4 i 7 da „ispadnu“ ispod tabele, prevarili ste se. Ne zaboravite, tabela se sastoji prvenstveno iz redova koji su popunjeni ćelijama, kolone kao takve se nigdje ne pominju. Kada smo ćeliju 1 proširili na dva reda, ustvari se pojavio višak u drugom redu.

Grešku ćemo ispraviti ako uklonimo jednu od ćelija iz drugog reda, u ovom slučaju, neka to bude ćelija 4.

<table border="1"> <tr>  <td rowspan="2"> 1 </td>  <td> 2 </td>  <td> 3 </td>  </tr>  <tr>  <td> 5 </td>  <td> 6 </td>  </tr>  <tr>  <td> 7 </td>  <td> 8 </td>  <td> 9 </td>  </tr> 

</table>

Boje i pozadina u HTML5

<!DOCTYPE html><html><body style="background-color:PowderBlue;">

<h1>Stilovi i boje</h1>

<p style="font-family:verdana;color:red;">Ovaj tekst je u Verdani i crven je</p>

<p style="font-family:times;color:green;">Ovaj tekst je u Times formatu i zelen je</p>

<p style="font-size:30px;">Ovaj tekst ima 30 piksela</p>

</body></html>

Background-color je boja pozadine, a „PowderBlue“ je naziv boje.

Da bismo postavili neku sliku kao pozadinu stranice, ali tako da se slika automatski smanjuje kada smanjujemo prozor browser-a, uradićemo sledeće:

<!DOCTYPE html><html><head><style type="text/css">body { background:url(Slika.png) no-repeat left top; background-size: 100%; }</style></head><body><h1> Moja stranica sa pozadinom koja se smanjuje smanjivanjem prozora browser-a </h1> </body></html>

<!DOCTYPE html><html><head><style type="text/css">h1 {color:red;}h2 {color:blue;}p {color:green;}</style></head>

<body>

<h1>Svi h1 elementi će biti u crvenoj boji</h1><h2>Svi h2 elementi će biti u plavoj boji</h2><p>Svaki tekst u paragrafu će biti zelen</p>

</body></html>

Boje se u HTML-u mogu predstaviti na neki od sledećih načina:

color:blue; boja je zadata svojim nazivom (blue - plava)color:#0000FF; boja je zadata heksadecimalnim brojem (0000FF)

color:rgb(0,0,255); boja je zadata vrijednostima crvene (red), zelene (green) i plave (blue) – RGB (Red Green Blue). Crvena ima vrijednost 0, takođe i zelena, dok plava ima vrijednost 255.

RGB vrijednosti za boju koja nam je potrebna možemo saznati iz Paint-a. U Windows 7 pronađite Paint i otvorite ga. Zatim kliknite na dugme Edit colors (vidi donju sliku).

Dobija se prozor kao na donjoj slici:

Klikom na zaokruženu boju na gornjoj slici u donjem desnom uglu dobijamo vrijednosti za Red 255, Green 255 i Blue 0. 255 je najveća vrijednost koju može imati boja u RGB načinu predstavljanja boja. Sa slike vidimo da se miješanjem crvene i zelene dobija žuta boja. Heksadecimalni brojevi boja se mogu saznati upotrebom Photoshop-a. Heksadecimalne i RGB vrijednosti, kao i nazivi boja mogu se saznati pretragom Interneta.

WEB DIZAJN

Web dizajn je korisnički orijentisana multidisciplinarna djelatnost koja uključuje vizuelne vještine, izbor tehnologije i sadržaja, kao i elemente uspješnog poslovanja, prije svih poznavanje Internet marketing-a. Predstavlja proces dizajniranja i razvoja web sajtova, odnosno Internet prezentacija. Riječ multidisciplinarna potiče od činjenice da web dizajn u sebi sadrži više oblasti (grafički dizajn,

programiranje, biznis i dr.). Kompletan web dizajner mora da bude i dobar programer, i dobar grafički dizajner i da poznaje elemente poslovanja. U najkraćem, web dizajn predstavlja spoj programerskih vještina i estetike, odnosno smisla za dizajn.

Osnovni pricipi dobrog web dizajna

8 osnovnih principa koje bi svaki web dizajner trebao da uzme u obzir prilikom izrade web sajtova: 1) Navođenje - Ono što želite postići kad osoba dođe na sajt, je da sledi neku logiku gledanja i čitanja sadržaja na način koji ste vi zamislili. Recimo, ako se radi o stranici neke firme, prva stvar koja se uočava bi trebao biti logo, i zato on mora biti dovoljno velik i smješten na najuočljivijem mjestu (npr. u gornjem lijevom uglu, jer tamo ljudi najčešće prvo pogledaju). Dizajner određuje koliko koji element sajta ima težinu, i na taj način navodi posjetioca da na određeni način prolazi kroz stranice. Određene elemente sajta je moguće istaknuti kombinovanjem tehnika kao što su npr. pozicija na strani, boja ili veličina. 2) Razmak - Početnička greška kod mnogih web dizajnera je stav da svaku moguću prazninu treba popuniti nekim elementom, te da je prazan prostor gubitak vremena. To naravno nije tako, budući da bez razmaka između pojednih elemenata sajta nema ni preglednosti. Treba misliti na tri stvari: razmak između redova (što direktno utiče na čitljivost sadržaja), razmak između slika i teksta (pravilo je da bi uvijek trebao postojati određeni razmak između slike i teksta) i prazan prostor na strani, tzv. white space. 3) Navigacija - Nikome nije uživanje da pretražuje loše organizovan sajt, gdje se nakon par klikova pogubi i nema pojma ni gdje je, ni kako se vratiti na dio gdje je već bio. Dva su osnovna pravila na koja treba misliti: dugmad za navigaciju treba u svakom trenutku da budu na vidljivom mjestu (na vrhu stranice) i da jasno i precizno opisuju gdje ona vode. Drugo, posjetioc u svakom trenutku mora da zna na kojem se dijelu sajta nalazi, što se postiže menijima, dugmadima i/ili mapom sajta. 4) Implementacija dizajna - CSS je poprilično olakšao izradu web sajtova, ali i dalje se prilikom rada u Photoshop-u mora razmišljati o samoj implementaciji dizajna, odnosno o samoj izradi sajta. Web dizajner bi trebao misliti na sledeće: može li se to stvarno napraviti kako je zamišljeno (egzotični font nije standardni HTML font i zato se ne može koristiti; dizajn izgleda odlično, ali je širina 1500 px i većina posjetilaca će vidjeti samo dio, odnosno moraće da se služi horizontalnim skrolovanjem, a to niko ne voli), koja je veličina stranice, odnosno šta se događa kod pregleda stranice u browser-u, te da li bi neke manje izmjene u dizajnu izuzetno olakšale izradu sajta. 5) Tipografija - Nema sajta bez određene količine teksta, pa je odabir fonta bitna stavka web dizajna. Tu treba razmisliti o vrsti fonta (mora da odgovara sadržaju, dakle moderan ili retro font itd, a u svakom slučaju – mora da bude čitljiv i mora da se uklapa u ostatak sajta, i ne treba pretjerivati u vrstama fonta na sajtu, sve preko tri je pretjerivanje i uglavnom neukus), veličini fonta (dovoljno veliki font da bude lako za čitanje, a naslove i podnaslove treba izdvajati od ostatka teksta), razmaku između redova i dužini redova (ukoliko je predug, teško je čitati), boji fonta te organizaciji teksta u odlomke (duži tekst se obavezno razbija u odlomke među kojima je razmak, inače nema šanse da će posjetilac čitati tekst). 6) Odnos među elementima sajta - Sajt se sastoji od više dijelova (zaglavlje, sekcije, ilustracije..) i svaki treba da je samostalan, ali svi treba da su međusobno dobro organizovani i u pravilnim odnosima. Znači, reda mora biti, i elementi treba da su raspoređeni na sajtu po nekom pravilu. Na taj način olakšavate posjetiocima snalažanje, a sve i izgleda puno bolje. 7) Preciznost i jasnoća - Najjednostavnije, sve mora biti precizno

u piksel. Provjerite ivice, jesu li jednake, postoji li jasan kontrast među dijelovima sajta, te jesu li granice jasno definisane. 8) Konzistentnost - Ovo znači da sve mora da se uklapa jedno s drugim i tako čini vizuelno dopadljivu cjelinu. Znači, veličina naslova i podnaslova, odabir fonta, boje, stil dugmadi, razmak, izbor slika, sve što smo spominjali, sve to treba da je stilski ujednačeno, i to kako na jednoj strani, tako i na svim ostalim međusobno. Jedino na taj način dizajn izgleda profesionalno i kvalitetno. Ovo je najlakše postići tako da se u samom startu odrede osnovne postavke stila, odnosno odabere osnovni koncept, i onda se on primjenjuje prilikom kompletne izrade sajta. Naravno, ovo ne znači da se određene ideje neće mijenjati prilikom izrade sajta, ali osnovne ideje moraju biti jasno definisane i ne smiju se prečesto mijenjati. Obavezno sa klijentom precizirajte je li upravo to ono što on želi, kako na kraju ne bi radili sve iz početka.