Docstoc

Html-izrada-sajta

Document Sample
Html-izrada-sajta Powered By Docstoc
					 BESPLATNI GOTOVI SEMINARSKI, DIPLOMSKI I MATURSKI
                       RAD.

  RADOVI IZ SVIH OBLASTI, POWERPOINT PREZENTACIJE I
             DRUGI EDUKATIVNI MATERIJALI.




                WWW.SEMINARSKIRAD.ORG

                  WWW.MAGISTARSKI.COM

               WWW.MATURSKIRADOVI.NET

                      WWW.MATURSKI.NET

                WWW.SEMINARSKIRAD.INFO

                      WWW.MATURSKI.ORG

                       WWW.ESSAYSX.COM

   WWW.FACEBOOK.COM/DIPLOMSKIRADOVI
    NA NAŠIM SAJTOVIMA MOŽETE PRONAĆI SVE, BILO DA JE TO SEMINARSKI, DIPLOMSKI ILI
 MATURSKI RAD, POWERPOINT PREZENTACIJA I DRUGI EDUKATIVNI MATERIJAL. ZA RAZLIKU OD
OSTALIH MI VAM PRUŽAMO DA POGLEDATE SVAKI RAD, NjEGOV SADRŽAJ I PRVE TRI STRANE TAKO
 DA MOŽETE TAČNO DA ODABERETE ONO ŠTO VAM U POTPUNOSTI ODGOVARA. U BAZI SE NALAZE
   GOTOVI SEMINARSKI, DIPLOMSKI I MATURSKI RADOVI KOJE MOŽETE SKINUTI I UZ NJIHOVU
   POMOĆ NAPRAVITI JEDINSTVEN I UNIKATAN RAD. AKO U BAZI NE NAĐETE RAD KOJI VAM JE
    POTREBAN, U SVAKOM MOMENTU MOŽETE NARUČITI DA VAM SE IZRADI NOVI, UNIKATAN
SEMINARSKI ILI NEKI DRUGI RAD RAD NA LINKU IZRADA RADOVA. PITANjA I ODGOVORE MOŽETE
         DOBITI NA NAŠEM FORUMU ILI NA MATURSKIRADOVI.NET@GMAIL.COM

Uvod u HTML

Prvo da kažemo što je to HTML.
HTML je skraćenica od HyperText Markup Language.
To je opisni jezik za stvaranje web stranica. Njime se opisuje izgled dokumenta, pozicije slika,
veličina teksta, boja pozadine, boja slova itd.

HTML stranice nisu ništa drugo nego obične tekstualne datoteke koje sadržavaju upute kako
prikazati stranicu. Za opis stranica se koriste tagovi koji se pišu unutar znakova < i >. Evo
primjera:

Ovo je <b> tekst </b> za web stranicu.


Ta rečenica bi bila prikazana ovako:

Ovo je tekst za web stranicu.

Kako su HTML stranice ništa drugo nego obične tekstualne datoteke možete ih izrađivati u bilo
kojem tekstualnom editoru pa čak i u najjednostavnijem Notepadu koji dolazi s Windowsima.

Umjesto tekstualnih editora, kao što je Notepad, možete 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 učiti HTML, ali svatko tko se želi imalo
ozbiljnije baviti izradom web stranica mora naučiti HTML jer je HTML majka svih web stranica i
sve počinje od njega.

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




Elementi

Html elementi se sastoje od 3 osnovna dijela:
1. tag koji otvara neki element
2. sadržaj elementa
3. tag koji zatvara taj element

<b>
ovo je podebljani tekst
</b>


ELEMENTI:
<HTML>
-sa ovim elementom počinje i završava svaka web stranica

<HEAD>
-ovaj element se treba nalaziti unutar <html> elementa
-browser ne prikazuje sadržaj unutar ovog elementa

<TITLE>
-ovaj element se treba nalaziti unutar HEAD elementa
-riječi koje napišete unutar ovog elementa će biti prikazane na vrhu web browsera

<BODY>
-sadržaj napisan unutar ovog elementa će se prikazivati na web stranici, to znači tu idu tekst,
slike...


PRIMJER:

<html>
<head>
<title>moja stranica</title>
</head>
<body>
moj tekst
</body>
</html>




Komentari

Sa komentarima možete pisati bilo gdje unutar skripte a taj tekst neće biti prikazivan na
stranici, tj. moći će se vidjeti samo ako otvorite skriptu sa code editorom. Na ovaj način
možete ostavljati sebi poruke unutar skripte i sa njima npr. skrenuti pozornost na jedan dio
skripte, ili sa ovime možemo jedan dio skripte isključiti, a sačuvati kod tog dijela, kojeg
možemo ponovno aktivirati ako izbrišemo sljedeće:

<! -- sa ovim otvaramo komentar
--> sa ovim zatvaramo komentar


<html>
<head>
<body>
ovo je tekst
<! --kojeg cu izbrisati -->
</body>
</head>
</html>
Formatiranje

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

<p> tag za odlomak </p>
<b> podebljani tekst </b>
<em> nakrivljen tekst </em>
<strong> "jaki" tekst </strong>
<i> nakrivljen tekst </i>
<sup> podignut tekst </sup>
<sub> spusten tekst </sub>
<del> precrtan tekst </del>
<code> tekst kompjuterskog koda </code>

-veličina fonta:

<font size="6"> velicina fonta 6</font>


veličina od 1-7

-boja fonta:
-boju fonta možemo mijenjati na više načina:

<font color="#770000">ovaj tekst je u hexaboji #770000</font>


koristeći hexa zapis boja

<font color="blue">ovaj tekst je plav</font>


ili koristeći ime boje
-također boju fonta možemo zapisati i u rgb zapisu ali taj zapis nije uobičajen

-vrsta fonta:

<font face="Bookman Old Style, Book Antiqua, Garamond">ovom paragrafu je
promijenjen font</font>


-početno slovo:

<font size="5" face="Georgia, Arial" color="blue">P</font>ocetno slovo
Linkovi

Vaši linkovi mogu voditi na unutrašnjost stranice(internal) ,na kojoj se nalaze (npr. link "na
vrh"), na stranicu unutar vaše domene(local) ili na neku drugu stranicu izvan vaše
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)


Tekst linkovi

<a href="http://www.tutorijali.net/" target="_blank" >Tutorijali.net</a>


Ovako izgleda kod za link u obliku teksta.
Sada ćemo se posvetiti ovom dijelu koda:

target="_blank"


ovaj dio govori na koji način će se otvoriti taj link:
_blank" otvara novu stranicu u novom prozoru
_self" otvara novu stranicu u trenutačnom prozoru
_parent" otvara novu stranicu u okvir koji je "nadređen" linku
_top" otvara novu stranicu u trenutačno otvorenom prozoru, poništavajući sve ostale okvire

Strelice

<b>linkovi<a name="top"></a></b>
<a href="#top">na vrh</a>


sa 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 potražiti koju će varijablu tražiti, u našem slučaju
pronaći će "top", i odvest nas na taj dio teksta.

Email linkovi

<a href="mailto:tutor@tutorijali.net?subject=pomoc&body=trebam
pomoc">tutor@tutorijali.net</a>


sa ovim kodom ,kojeg možemo staviti bilo gdje na stranicu, otvorit ćemo vaš email klijent na
pisanju nove email poruke sa naslovom "pomoc" i sadržajem poruke "trebam pomoc"
Download linkovi

<a href="http://www.tutorijali.net/tekst.txt">tekst dokument</a>

sa ovim kodom možete stavljati link na vaše datoteke u domeni (ili datoteke na internetu).

Baza

Dobra je ideja odrediti defaultnu stranicu na koju će ići svi linkovi ako oni ne rade, tj. ako
nemogu pronaći stranicu na koju se odnose.

<head>
<base href="http://www.tutorijali.net/">
</head>


Slikovni linkovi

Slikovne linkove ćete dobiti tako da napišete ovakav kod:

<a href="http://www.tutorijali.net" target="_blank>
<img src="neka-slika.jpg">
</a>


Uklonite rub tih slika ovako:

<a href="http://www.tutorijali.net" target="_blank>
<img src="neka-slika.jpg" border="0">
</a>




Slike

Slike se mogu dodati na vašu stranicu sa ovim kodom:

<img src="XXX" />


XXX zamijenite sa jednim od sljedećega
src="pas.gif" slika se nalazi u istom direktoriju kao i HTML stranica
src="../pas.gif" slika se nalazi u prijašnjem direktoriju od HTML stranice
src="../slike/pas.gif" slika se nalazi u direktoriju "slike" , prijašnjem direktoriju od HTML
stranice

Alternativni atribut

<img src="slomljenlink/pas.gif" alt="pas" />

     u slućaju da se slika nemože učitati, biti će prikazana riječ "pas" unutar okvira slike.

                                      Formatiranje slike


-VISINA I ŠIRINA

<img src="pas.gif" height="100" width="100">

ako želite vi odrediti veličinu slike a ne da vam browser to odredi koristite kod iznad. Ovo
može biti korisno kada vam se stranica počne "raspadati" zbog veličine slika i teksta.

-VERTIKALNO I HORIZONTALNO PODEŠENJE

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

Ovo je popis mogućih podešenja slika. Primjer koda u kojem je slika podešena:

<p>Ovo je neki tekst</p>
<p>
<img src="pas.gif" align="left">
ovo je opet neki tekst koji će se nalaziti na desno od slike
</p>


Linkovi na slike

<a href="http://www.tutorijali.net" target="_blank>
<img src="pas.gif">
</a>

sa ovim kodom će browser prikazati sliku koja će voditi na neku stranicu kada kliknete na nju.

<a href="http://www.espn.com" target="_blank>
<img src="ahman.gif" border="0">
</a>

sa ovim kodom odredili ste da neće biti okvira oko slike. Ako želite da slike imaju okvir,
zamijenite 0 sa nekim brojem.

<a href="sunset.gif">
<img src="thmb_sunset.gif">
</a>

ovaj kod će prikazati manju verziju slike koja će biti link na veću stranicu. Naravno, manju
sliku vi morate napraviti.
Thumbnails-to je naziv za smanjene verzije slika, napravljene da bi se stranica brže učitavala
ili zbog estetskih razloga. Thumbnail ima link na sliku u punoj kvaliteti.

Slike kao linkovi

<a href="http://www.tutorijali.net/">
<img src="pas.gif"> </a>

primjer koda koji će pretvoriti sliku u link na neku stranicu.

<a href="pas.gif"> <img src="thmb_pas.gif"> </a>

primjer koda koji će prikazati na stranici umanjenu sliku koja će biti link na veću sliku.




Liste

Postoje 3 različite vrste lista. <ol>, <ul> i <dl>.

<ul> - unordered list; točkice
<ol> - ordered list; brojevi
<dl> - definition list; točkice

Npr. Ordered lista
Između <ol> i </ol> stavljate <li> tekst </li>

Znači

Proizvodi:
<ol>
<li> DVD </li>
<li> CD </li>
<li> Tipkovnica </li>
<li> Monitor </li>
<li> Miš </li>
</ol>


Rezultat će biti:

Proizvodi:
1. DVD
2. CD
3. Tipkovnica
4. Monitor
5. Miš

Možete i odabrati što će biti umjesto brojeva ovako:

<ol   type="a">
<ol   type="A">
<ol   type="i">
<ol   type="I">

U prvom primjeru pomoću ovoga <ol type="a"> bi se ispisalo

a. DVD
b. CD
c. Tipkovnica
d. Monitor
e. Miš

Za <ul> možete birati između izgleda točkica.

<ul type="square">
<ul type="disc">
<ul type="circle">




Tablice

Tablice su možda i najzbunjenije za početnike i neki kad to vide pobjegnu od HTML-a jer
misle: "Šta će mi to kad imam Dreamweaver koji to umjesto mene obavi". E pa to nije baš
tako. Ako budete možda nekad radili sa PHP-om ili ASP-om trebat će vam znanje "ručne"
izrade tablica u HTML-u.

Za početak tablice koristimo <table>. U tom elementu postoje tagovi <tr> (redak) i <td>
(stupac).
Evo primjera jedne tablice sa dva reda i dva stupca.

<table border="1">
<tr>
<td> Prvi red i prvi stupac </td>
<td> Prvi red i drugi stupac </td>
</tr>
<tr>
<td> Drugi red i prvi stupac </td>
<td> Drugi red i drugi stupac </td>
</tr>
</table>
Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom
stupcu imamo dva redka.

Evo primjera:
<table border="1">
<tr>
<td rowspan="2">Jedan redak </td>
<td>Prvi redak</td>
</tr>
<tr>
<td>Drugi redak </td>
</tr>
</table>


Primjetite Rowspan s brojem 2. Taj broj označava 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:

<table border="1">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>




Cellspacing
Koristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:

<table border="1" cellspacing="6">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>
Cellpadding
Cellpadding koristite kada želite odvojiti tekst od rubova tablice. Pogledajmo primjer:

<table border="1" cellpadding="15">
<tr>
<td colspan="2">Jedan redak </td>
</tr>
<tr>
<td>Prvi stupac </td>
<td>Drugi stupac </td>
</tr>
</table>




Boja pozadine

Boja pozadine odnosno bgcolor atribut se koristi za promijenu boje pozadine cijele stranice ili
pojedinih elemenata kao što su tablice. Bgcolor možete staviti na više mjesta u HTML
elemente ali mi vam prporučamo da bgcolor koristite samo za boju pozadine stranice a za
tablice koristite CSS.

Evo primjera kako promijeniti boju pozadine stranice:

<body bgcolor="blue">
Boja pozadine je postavljena.
</body>
HTML sistem bojanja - imena boja
Sada ćemo naučiti neke boje koje koristimo u HTML-u.
Postoje 3 različite metode postavljanja pozadinske boje. Najjednostavniji je općeniti način
(primjer: blue, green, red, silver, black, yellow...)

Evo 16 osnovnih boja:




Drugi način je Hexadecimalni način bojanja. Evo primjera:

<body bgcolor="#006699">
Boja pozadine je postavljena.
</body>


Ovdje možete vidjeti primjere boja.

Treći način bojanja je sa RGB vrijednostima. Pogledajmo primjer:

<body bgcolor="rgb(0,0,255)">
Boja pozadine je postavljena.
</body>


Treći način bojanja nije preporučljiv.


Primjer dodavanja pozadinske boje tablici

<table bgcolor="#006699" border="1">
<tr>
<td> Neka vrsta plave boje </td>
</tr>
</table>




Slika kao pozadina

Pozadinsku sliku možete koristiti u bilo kojem elementu (tablicama, odlomcima, body
tablice...)
Ovdje ćemo naučiti kako pomoću HTML-a napraviti da slika bude kao pozadina ali inače kada
naučite HTML radite to CSS-om.
Evo primjera kako pomoću HTML-a postaviti neku sliku kao pozadinu u tablici.

<table height="200" width="500"
background="http://www.nekastranica.com/slike/slika.jpg" >
<tr>
<td>Ova tablica ima pozadinsku sliku </td>
</tr>
</table>


Za pozadinske slike, zbog veličine slika, vam je najbolje koristiti tzv. Patterne odnosno
minijaturene sličice koje se stalno ponavljaju koliko je god široka tablica.

U sljedećem tutorijalu ćemo naučiti kako napravit Layout stranice pomoću tablica.




Meta Oznake

Meta tagovi se uvijek postavljaju izmedju <head></head>!
Na pocetku svakog html dokumenta,ovisi o programu u kojem pisete vas html kod, prvu liniju
zauzima ova linija koda:

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

- OPIS KODA -
- Oznacuje vrstu browsera namjenjenog za pregled stranice

<meta http-equiv=”REFRESH” content=”60;url=http://www.net.hr”>

- 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,inace bi vas nakon 60 sekundi preusmjerilo na net.hr stranicu.Takodjer
ako zelite da se vasa stranica nakon 60 sekundi prebaci na neku drugu stranicu promjenite
url=”vasaStranica.com”

<meta http-equiv=”KEYWORDS” content=”more,plaza,odmor”>

- OPIS KODA –
- Kljucne rijeci na koje reagira web pretrazivac,u content=” upisite kljucne rijeci koje
karakteriziraju vas site.
- Nemojte misliti da cete odmah dospjeti na neki poznatiji web pretrazivac

<meta http-equiv=”Content-Type” content=”text/html;charset=windows-1250”>

- OPIS KODA –
- Upisujuci ovo u <head> stranica omogucavate sebi pisanje na hrvatskom jeziku,te slova
čćšđž
<meta name=”author” content=”Vase ime “>

- OPIS KODA –
- Upisite vase ime ,ili osobne podatke

<meta name=”DESCRIPTION” content=”Opis vase web stranice”>

- OPIS KODA –
Opis vase web stranice




Kodiranje HTML dokumenata

Često vidim na internetu hrvatske webove kojima nedostaju hrvatski dijakritički znakovi
(š,đ,č,ć,ž). Često ih ljudi jednostavno ne pišu jer im je valjda "preteško" pisati točno ali često
zna biti slučaj da njihove web stranice ne podržavaju sve naše znakove.

Naime, svaki HTML dokument se treba kodirati u odgovarajućem skupu znakova tj. kodu.

Većina programa za stvaranje HTML datoteka koriste ISO-8859-1 kao preodređeni kod. Njemu
je baza latinsko pismo s određenim dodatnim znakovima. Sljedeći jezici mogu koristiti ISO-
8859-1 bez bojazni da im se neka slova neće točno prikazati: švedski, engleski, norveški,
islandski, irski, danski, škotski, španjolski, portugalsk, njemački, itd.

Za hrvatski jezik je potreban drugi kod koji podržava naše dijakritičke znakove. Ustvari,
postoje 2 koda koja su nam od koristi. Prvi je ISO-8859-2 i koriste ga mnogi slavenski jezici
od kojih su neki poljski, hrvatski, češki, slovački, srpski (latinica), slovenski, itd. Drugi kod je
UTF-8. On je uniformni koji je osmišljen da sadržava sve svjetke znakove . U njemu se može
pisati ćirilicom, kineskim, japanskim, sanskrtom i gotovo svim pismima svijeta uz iznimke.
Preporučam njegovo korištenje iz dva razloga. Prvi je taj što nikad ne znate kada ćete morati
koristiti znakove koje vaš trenutni kod ne podržava a drugi je taj što većina današnjih
tekstualnih editora koje koristimo za stvaranje HTML datoteka nema mogućnost kodiranja u
ISO-8859-2 formatu.

To je bio uvod u kodiranje HTML dokumenata (ali i praktički svih ostalih) a sada je vrijeme da
vam i pokažem kako se to radi. Primjera radi koristit ću par najpopularnijih tekstualnih
editora.

Što svi često misle, kodiranje HTML dokumenta nije samo dodavanje sljedećeg meta taga u
head dio stranice:

<meta http-equiv="content-type" content="text/html; charset=utf-8">


To vrijedi jedino ako koristite windows-1250 kodiranje što ne preporučam jer onda Linux, Mac
i ostali korisnici neće ispravno vidjeti sve znakove. To kodiranje je SAMO za korisnike s
Windowsima.
Osim što treba staviti taj dio koda u head dio dokumenta (a ni to nije uvijek potrebno) treba i
SPREMITI datoteku u odgovarajućem kodiranju. Kod svakog editora je ovo drugačije a ja sam
ovdje naveo nekoliko popularnijih. Ako koristite neki program koji nije ovdje naveden probajte
naći opciju tipa file encoding, character encoding, encoding, file type ili slično te odaberite
kodiranje koje želite. Većina programa, osim onih opširnijih kao Dreamweaver ili Frontpage,
neće imati ISO-8859-2 ali i tako je bolje koristiti UTF-8.

Notepad

Kod spremanja datoteke imate polje Encoding. Odaberite UTF-8 umjesto ANSI.

Notepad++

Otiđite na Format->Encode in UTF-8 ili UTF-8 without BOM. BOM (byte order mark) je jedna
stvarčica vezana uz UTF kodiranje ali je najbolje da je izbjegavajte jer stariji pretraživači (a i
noviji nekad) znaju ispisati na početku dokumenta čudne znakove što je posljedica korištenja
BOM-a.

Ako želite da vam svi novi dokumenti u Notepadu++ budu kodirani u UTF-8 onda kliknite na
Edit->Preferences... i pod tabom New Document odaberite UTF-8 (sa ili bez BOM-a, po želji).

				
DOCUMENT INFO
Description: Seminarski, diplomski i maturski radovi iz ekonomije, informatike, matematike, finansija, medicine. Seminarski, diplomski i maturski radovi izrada, razmena i download