HTML Tutorijali

HTML TUTORIJALI
Uvod u HTML

Prvo da kaemo to je to HTML.
HTML je skraenica od HyperText Markup Language.
To je opisni jezik za stvaranje web stranica. Njime se opisuje 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:
Ovo je <b> tekst </b> za web stranicu.

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)

Za postavljanje web stranice na internet, potreban vam je web hosting i neki FTP program.
Preporu?amo besplatan FTP program pod imenom Filezilla. Pogledajte uputstva za rad za
Filezilla programom sa nase partnerske stranice.

Sljedei tutorijal: Elementi

HTML TUTORIJALI

Elementi

Html elementi se sastoje od 3 osnovna dijela:
1. tag koji otvara neki element
2. sadraj elementa
3. tag koji zatvara taj element
<b>
ovo je podebljani tekst
</b>

ELEMENTI:
<HTML>
-sa ovim elementom poinje i zavrava svaka web stranica

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

<TITLE>
-ovaj element se treba nalaziti unutar HEAD elementa
-rijei koje napiete unutar ovog elementa e biti prikazane na vrhu web browsera

<BODY>
-sadraj napisan unutar ovog elementa e se prikazivati na web stranici, to znai tu idu tekst,
slike...

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

Sljedei tutorijal: Komentari

HTML TUTORIJALI

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 otvaramo komentar
--> sa ovim zatvaramo komentar

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

Sljedei tutorijal: Formatiranje

HTML TUTORIJALI

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>

-veliina fonta:
<font size="6"> velicina fonta 6</font>

veliina od 1-7

-boja fonta:
-boju fonta moemo mijenjati na vie naina:
<font color="#770000">ovaj tekst je u hexaboji #770000</font>

koristei hexa zapis boja
<font color="blue">ovaj tekst je plav</font>

ili koristei ime boje
-takoer boju fonta moemo zapisati i u rgb zapisu ali taj zapis nije uobiajen

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

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

Sljedei tutorijal: Linkovi

HTML TUTORIJALI

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)

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 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 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 potraiti koju e varijablu traiti, u naem sluaju
pronai 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 moemo staviti bilo gdje na stranicu, otvorit emo va email klijent na
pisanju nove email poruke sa naslovom "pomoc" i sadrajem poruke "trebam pomoc"

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

sa ovim kodom moete stavljati link na vae datoteke u domeni (ili datoteke na internetu).

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.
<head>
<base href="http://www.tutorijali.net/">
</head>

Slikovni linkovi

Slikovne linkove ete dobiti tako da napiete ovakav kod:
<a href="http://www.tutorijali.net" target="_blank>
<img src="neka-slika.jpg">
</a>

Uklonite rub tih slika ovako:
<img src="neka-slika.jpg" border="0">
</a>

Sljedei tutorijal: Slike

HTML TUTORIJALI

Slike

Slike se mogu dodati na vau stranicu sa ovim kodom:
<img src="XXX" />

XXX zamijenite sa jednim od sljedeega
src="pas.gif" slika se nalazi u istom direktoriju kao i HTML stranica
src="../pas.gif" slika se nalazi u prijanjem direktoriju od HTML stranice
src="../slike/pas.gif" slika se nalazi u direktoriju "slike" , prijanjem direktoriju od HTML
stranice

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

u sluaju da se slika nemoe uitati, 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 veliinu slike a ne da vam browser to odredi koristite kod iznad. Ovo moe
biti korisno kada vam se stranica pone "raspadati" zbog veliine slika i teksta.

-VERTIKALNO I HORIZONTALNO PODE ENJE

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

Ovo je popis moguih podeenja slika. Primjer koda u kojem je slika podeena:
<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
<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 nee 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 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 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 veu sliku.

Sljedei tutorijal: Liste

HTML TUTORIJAI

Liste

Postoje 3 razliite vrste lista. <ol>, <ul> i <dl>.

<ul> - unordered list; tokice
<ol> - ordered list; brojevi
<dl> - definition list; tokice

Npr. Ordered lista
Izmeu <ol> i </ol> stavljate <li> tekst </li>

Znai
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

Moete i odabrati to e biti umjesto brojeva ovako:

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

U prvom primjeru pomou ovoga <ol type="a"> bi se ispisalo

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

Za <ul> moete birati izmeu izgleda tokica.

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

Sljedei tutorijal: Tablice

HTML TUTORIJALI

Tablice

Tablice su moda i najzbunjenije za poetnike 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 moda nekad radili sa PHP-om ili ASP-om trebat e vam znanje "rune" izrade tablica u
HTML-u.

Za poetak 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 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:
<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 izmeu rubova tablice. Pogledajmo primjer:
<table border="1" cellspacing="6">
<tr>
</tr>
<tr>
</tr>
</table>

Cellpadding
Cellpadding koristite kada elite odvojiti tekst od rubova tablice. Pogledajmo primjer:
<table border="1" cellpadding="15">
<tr>
</tr>
<tr>
</tr>
</table>

Sljedei tutorijal: Boja pozadine

HTML TUTORIJALI

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:
<body bgcolor="blue">
Boja pozadine je postavljena.
</body>

HTML sistem bojanja - imena boja
Sada 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:
<body bgcolor="#006699">
</body>

Ovdje moete vidjeti primjere boja.

Trei nain bojanja je sa RGB vrijednostima. Pogledajmo primjer:
<body bgcolor="rgb(0,0,255)">
</body>

Trei nain bojanja nije preporuljiv.

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

Sljedei tutorijal: Slika kao pozadina

HTML TUTORIJALI

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.
<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 veliine slika, vam je najbolje koristiti tzv. Patterne odnosno
minijaturene sliice koje se stalno ponavljaju koliko je god iroka tablica.

U sljedeem tutorijalu emo nauiti kako napravit Layout stranice pomou tablica.

Sljedei tutorijal: Meta oznake

HTML TUTORIJALI

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

HTML Tutorijali

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tutorijali

Uploaded by

Copyright:

Available Formats

HTML TUTORIJALI

You might also like