Uvod U HTML

Uvod u web programiranje:
Uvod u HTML
Dubrovnik, oujak 2013.
Krunoslav ubrini
Zatieno licencom http://creativecommons.org/licenses/by-nc-sa/3.0/hr/
Creative Commons
slobodno smijete:
dijeliti umnoavati, distribuirati i javnosti priopavati djelo

remiksirati preraivati djelo
pod slijedeim uvjetima:
imenovanje. Morate priznati i oznaiti autorstvo djela na

nain kako je specificirao autor ili davatelj licence (ali ne
nain koji bi sugerirao da Vi ili Vae koritenje njegova djela
imate njegovu izravnu podrku).
nekomercijalno. Ovo djelo ne smijete koristiti u
komercijalne svrhe.
dijeli pod istim uvjetima. Ako ovo djelo izmijenite,
preoblikujete ili stvarate koristei ga, preradu moete
distribuirati samo pod licencom koja je ista ili slina ovoj.
U sluaju daljnjeg koritenja ili distribuiranja morate drugima jasno dati do znanja licencne uvjete ovog
djela. Najbolji nain da to uinite je linkom na ovu internetsku stranicu.
Od svakog od gornjih uvjeta mogue je odstupiti, ako dobijete doputenje nositelja autorskog prava.
Nita u ovoj licenci ne naruava ili ograniava autorova moralna prava.
Tekst licence preuzet je s http://creativecommons.org/.
Uvod u web programiranje: Uvod u HTML
Kako funkcionira Web
Prilagoeno iz: E. Freeman & E. Freeman, Head First HTML with CSS & XHTML, O'Reilly, 2006
Web server i web preglednik
Web preglednik
Adresa web stranice

? Kako web preglednik zna pronai
mjesto na kojem se nalazi web stranica?
! Svaka web stranica ima jedinstvenu adresu
(tzv. URL (uniform resource locator)
Prikaz sadraja web stranice

? Kako web preglednik zna kako
iscrtati sadraj web stranice?
! HTML kod sadri sve informacije o
sadraju i izgledu web stranice.
Kako izgleda HTML?

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Klub "Kod smrznutog pingvina"</title>
</head>
<body>
<h1>Dobrodoli u klub "Kod smrznutog pingvina"</h1>
<img src="klub-logo.jpg" />
<p>
Klub <em>"Kod smrznutog pingvina"</em> je prostor u kojem moete provesti
ugodne trenutke sami ili u drutvu itajui, sluajui glazbu, igrajui
drutvene igre ili ispijajui bezalkoholna pia.
<a href="http://en.wikipedia.org/wiki/Wireless_LAN">Beini internet</a>
je dostupan tako da moete surfati ili provjeriti elektroniku potu.
</p>
<h2>Kako do nas</h2>
<p>
Siete na treoj stanici od Pila, skrenete desno pa produite cca. 300 metara.
</p>
</body>
</html>
klub-01.html
HTML u web pregledniku
ime pisati HTML?

Vlastita web stranica
Zapoeti u obinom ureivau teksta kako bi se
upoznali s elementima i pravilima izrade HTML-a
Nakon toga moete prijei na vizualne ureivae
Adobe Dreamweaver
MS Share Point Designer
Notepad++
MS Expression Web
elite li vie mogunosti moete koristiti gotove

sustave za upravljanje sadrajem (CMS)
Joomla!
Wordpress
Drupal
Izgled stranica u CMS-ovima

prilagoavate sami pomou
HTML-a, CSS-a i JS-a.
Manje ambiciozni mogu
koristiti gotove predloke.
10
Uvid u HTML kod
Omoguuje prikaz "naih" slova na web

stranici. Kodne stranice koje podravaju
"naa" slova su utf-8 i windows-1250. Koju
od njih trebate koristiti, ovisi o postavkama
ureivaa teksta koji koristite.
<html>
<head>
8
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
Naziv
stranice/ 1 <title>Klub "Kod smrznutog pingvina"</title>
Naslov odlomka
</head>
kartice <body>
Mogu se definirati
<h1>Dobrodoli u klub "Kod smrznutog pingvina"</h1> 2
odlomci na 6 razina
Slika 3 <img src="klub-logo.jpg" />
(<h1>,<h2> <h6>)
4 Naglaeni tekst
<p>
Klub <em>"Kod smrznutog pingvina"</em> je prostor u kojem moete provesti
ugodne trenutke sami ili u drutvu itajui, sluajui glazbu, igrajui
Hiperveza
drutvene igre ili ispijajui bezalkoholna pia.
<a href="http://en.wikipedia.org/wiki/Wireless_LAN">Beini internet</a>
5
je dostupan tako da moete surfati ili provjeriti elektroniku potu.
</p>
6 <h2>Kako do nas</h2>
Tekst odlomka
Podnaslov <p>
Siete na treoj stanici od Pila, skrenete desno pa produite cca. 300 metara. 7
</p>
</body>
</html>
11
Omoguuje prikaz naih slova na web stranici.

8 Ako se slova ne prikazuju ispravno, kodnu
stranicu moete promijeniti kroz
View->*Encoding izbornik web preglednika.
Naziv
stranice
/kartice
Naslov odlomka
Naglaeni
tekst
Web preglednici mogu

standardno prikazati
samo slike u
.jpg, .png i .gif formatu
Hiperveza prema drugoj HTML

stranici
5
Podnaslov
Tekst odlomaka
12
Uvod u anatomiju (HTML dokumenta)

<html></html>
poetna i zavrna
oznaka svakog dokumenta
zaglavlje dokumenta
<head></head>
tijelo dokumenta
<body></body>
naslov dokumenta
<title></title>
naslov odlomka
<h1></h1>
tekst odlomka
<p></p>
13
Uvod u anatomiju (HTML elementa)
14
Koncepti HTML-a
<html>
<body>
<p>
Tekst odlomka
</p>
<img src=slika.jpg />
</body>
Neki elementi imaju
samo 1 oznaku. Oni
</html>
Element
Unutar sebe moe
imati tekst ili
ugnijeene druge
elemente.
Oznake
Veina elemenata ima
2 oznake: poetnu i
zavrnu.
Zavrna oznaka ima
znak / prije svog
naziva
<p> = poetna oznaka
</p> = zavrna oznaka
zavravaju znakom /
prije zavrnog >
<img /> = slika
<br /> = prijelom retka
15
Koncepti HTML-a
atribut
vrijednost atributa
Elementi mogu imati atribute

Vrijednost atributa pridruuje
se znakom jednakosti i navodi
se pod navodnicima
<p style = "color: blue" >

atribut
vrijednost atributa
<img src="slika.jpg" width="20"

<em> Tekst odlomka </em>
</p>
Elementi
mogu biti
ugnjeeni
unutar
/>
drugih
elemenata i
ne smiju se
preklapati
Preklapanje
Ugnjeivanje
<p>
<p>
<b>Neki sadraj
</p>
</b>
<b>Neki sadraj
</b>
</p>
16
Kako djeluju atributi

<p style = "color: blue" >
1
Sav tekst unutar

ovog odlomka
prikazati e se
obojan plavom
bojom
<img src="slika.jpg" width="50" />

<em> Tekst odlomka </em>
2
</p>
Web preglednik e sliku "slika.jpg" koja se nalazi u istom folderu kao ova web stranica (vrijednost src
atributa) prikazati tako da njezina irina (vrijednost width atributa) bude tono 50px. Automatski e
smanjiti njezinu visinu kako bi omjer irine i visine ostao nepromijenjen. Isto se moe postii tako da se
smanji njezina visina (vrijednost atributa height).
NEMOJTE jako smanjivati sliku na ovaj nain (npr. sliku veliine 3000*2000 px smanjiti na veliinu 30*20)
jer se s web servera pregledniku uvijek alje slika izvorne veliine.
17
Kako djeluju atributi

<img src="slika.jpg" width="250"
Visina slike zadana

je da bude 250px.
Web preglednik
proporcionalno
/> visinu
smanjuje
slike tako da omjer
ostane sauvan.
1
<img width="250" height = "50"

src="slika.jpg" />
2
img-width.html
Zadali ste tonu irinu (250px) i visinu

(50px) slike. Slika je sada izobliena jer
niste vodili raunao njihovom omjeru!
PAZITE ako mijenjate i irinu (width) i
visinu (height) kako ne biste pokvarili
omjer! Osim ako to ne elite
18
1. zadatak: Moja prva web stranica

Izmijenite web stranicu klub-01.html tako da rezultat
izgleda kao na ovom slajdu
Sliku moete pronai na adresi: http://goo.gl/hPo1a
Linkovi vas trebaju odvesti na lanak Wikipedije koji
govori o HTML-u
19
1. zadatak: Moja prva web stranica

Naslov web stranice
Slika s adrese
http://goo.gl/hPo1a
Trebate podesiti irinu ili visinu slike
(atributi width ili height)
Naslov i odlomka i boja teksta
Hiperlinkovi na adresu
http://en.wikipedia.org/wiki/HTML
20
Osnovno formatiranje sadraja

Prikazom u web pregledniku gubi se
poetno formatiranje sadraja
<html>
<head>
<title></title>
</head>
<body>
///\\___
(@ @)
+----oOO----(_)-----------+
|
I ja uim
|
|
osnove
|
|
HTML-a
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</body>
</html>
format-1.html
21

Ouvanje formatiranja sadraja
oznake <pre></pre>
tekst se prikazuje zadanim fontom fiksne irine
<html>
<head>
<title></title>
</head>
<body>
<pre>
///\\___
(@ @)
+----oOO----(_)-----------+
|
I ja uim
|
|
osnove
|
|
HTML-a
|
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</pre>
</body>
</html>
format-2.html
22

Sve posebne oznake na
poetku imaju znak &
(ampersand), a na kraju ;
(toku-zarez)!
<+----------------|
I mi uimo
|
osnove
|
HTML-a
+-----------------
format-3a.html
elimo li sauvati izabrane fontove, a

prelomiti redak koristimo element <br />
elimo li u tekstu prikazati prazninu
koristimo posebnu oznaku
+-------------------<br />
|  I mi uimo<br />
|    osnove<br />
|      HTML-a<br />
+-------------------<br />
Znak
Oznaka
<
<
>
>
"
"
'
'
praznina

format-3b.html
23
Osnovno formatiranje teksta

Oznaka
Prikaz
<strong>Jako naglaen</strong>
<em>Naglaen tekst</em>
<code>Programski kod</code>
<cite>Citat</cite>
Ovo je <sub>indeks</sub>
Ovo je <sup>potencija</sup>
<big>Ovo je uveano</big>
Jako naglaen
Naglaen tekst
Programski kod
<b>Podebljan tekst</b>
<i>Nakoen tekst</i>
<tt>Font fiksne irine</tt>
Podebljan tekst
Nakoen tekst
Font fiksne irine
Citat
Ovo je indeks
Ovo je potencija
Ovo je uveano
format-4.html
24
2. zadatak: "Razlomljena" stranica

Izmijenite i
nadopunite
sadraj vae
prve web
stranicu tako
da rezultat
izgleda kao
na ovom
slajdu
25
2. zadatak: "Razlomljena" stranica

Promijenite naslov stranice i odlomka
Tekst
druge
stranice
Pretvorite tekst u indeksni oblik
Dodajte
nekoliko
razmaka
Razlomite
reenicu u
vie redaka
Podebljate i poveajte slova

Promijenite boju slova
Napravite link na vau prvu web stranicu (iz 1. zadatka).

Prikaite taj URL pomou posebnih oznaka i oblikujte
ga slovima fiksna irine
26
Liste
slue za organizaciju sadraja na web
stranici
neporedana lista (unordered list)
<ul></ul> kreira listu
<li></li> elementi liste
poredana lista (ordered list)

<ol></ol> kreira listu
<li></li> elementi liste
27
Poredana (ordered) lista

lista kod koje su elementi nabrojani jedan
ispod drugoga, a svaki element oznaen
je rednim brojem (ili slovom)
koristi se kada je redoslijed elemenata vaan
<h1>Postupak kuhanja kave</h1>
<ol>
<li>Ulij vodu u posudu</li>
<li>Stavi eer u vodu</li>
<li>Ugrij vodu</li>
<li>Stavi kavu u vodu</li>
<li>Izlij kavu u alice</li>
</ol>
lista-p.html
28
Neporedana (unordered) lista

lista kod koje su elementi slobodno
nabrojani jedan ispod drugoga i oznaeni
tokicama ili crticama
koristi se kada redoslijed elemenata nije vaan
<h1>Lista stvari za kupovinu</h1>
<ul>
<li>Kruh</li>
<li>eer</li>
<li>Novi mobitel</li>
<li>Sir</li>
<li>Mineralna voda</li>
</ul>
lista-n.html
29
3. zadatak: Stranica kluba v2

Doradite
poetnu
stranicu kluba
klub-01.html
tako da izgleda
kao na slici.
Link treba otvoriti novu web

stranicu s vaim web
dizajnerskim referencama
30
3. zadatak: Stranica kluba v2

Promijenite
naslov
Smanjite veliinu slike (nemojte pretjerivati)

sjetite se width i/ili height atributa
Podebljate tekst i
promijenite mu boju
Pretvorite u neporedanu listu
Pretvorite u poredanu listu

Link treba otvoriti novu web stranicu s
vaim web dizajnerskim referencama
31
3. zadatak: Dizajnerske reference

Slika se nalazi
na adresi
http://goo.gl/enwrW
Klik na prvi link treba
otvoriti vau prvu web
stranicu (iz 1.
zadatka), a klik na
drugi link vau drugu
web stranicu (iz 2.
zadatka).
32
3. zadatak: Dizajnerske reference
Slika s adrese http://goo.gl/enwrW

Svaki element
neporedane liste je
jedan link.
Sjetite se pravila
ugnjeivanja HTML
elemenata!
Linkovi otvaraju vau 1.
odnosno 2. web stranicu (iz
1. i 2. zadatka)
33
to nismo obradili?
Tablice
<table><tr><td>
Forme
<form><input><select><option><textarea>
Okvire
<iframe><frameset><frame>
Komentari

Brojne atribute HTML elemenata

O HTML-u detaljno moete proitati na adresi:
http://www.w3schools.com/html/default.asp
34
Gdje smjestiti web stranice?

Besplatni web prostor kod vaeg
davatelja ADSL usluga
Npr. Optima daje Freeweb uslugu od 30Mb besplatnog
prostora na koji moete staviti vlastite web stranice
http://freeweb.optinet.hr/~vae_kor_ime
Besplatne CMS aplikacija i drutvene mree

Facebook, Google sites, wiki, blogovi,
Drugi davatelji besplatnog prostora za smjetaj web

stranica
Najee plaate time to u svaku vau web stranicu davatelj
usluge umee reklame
Prostora za smjetaj web stranica koji se plaa
35

Uvod U HTML

Uploaded by

Document Information

Original Title

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

Uvod U HTML

Uploaded by

Copyright:

Available Formats

Uvod u web programiranje:

Zatieno licencom http://creativecommons.org/licenses/by-nc-sa/3.0/hr/

dijeliti umnoavati, distribuirati i javnosti priopavati djelo

pod slijedeim uvjetima:

imenovanje. Morate priznati i oznaiti autorstvo djela na

Uvod u web programiranje: Uvod u HTML

Kako funkcionira Web

Uvod u web programiranje: Uvod u HTML

Web server i web preglednik

Uvod u web programiranje: Uvod u HTML

Uvod u web programiranje: Uvod u HTML

Adresa web stranice

Uvod u web programiranje: Uvod u HTML

Prikaz sadraja web stranice

Uvod u web programiranje: Uvod u HTML

Kako izgleda HTML?

Uvod u web programiranje: Uvod u HTML

HTML u web pregledniku

Uvod u web programiranje: Uvod u HTML

ime pisati HTML?

elite li vie mogunosti moete koristiti gotove

Izgled stranica u CMS-ovima

Uvod u web programiranje: Uvod u HTML

Uvid u HTML kod

Omoguuje prikaz "naih" slova na web

Uvod u web programiranje: Uvod u HTML

Omoguuje prikaz naih slova na web stranici.

Web preglednici mogu

Hiperveza prema drugoj HTML

Uvod u web programiranje: Uvod u HTML

Uvod u anatomiju (HTML dokumenta)

Uvod u web programiranje: Uvod u HTML

Uvod u anatomiju (HTML elementa)

Uvod u web programiranje: Uvod u HTML

Uvod u web programiranje: Uvod u HTML

Elementi mogu imati atribute

<p style = "color: blue" >

<img src="slika.jpg" width="20"

Uvod u web programiranje: Uvod u HTML

Kako djeluju atributi

Sav tekst unutar

<img src="slika.jpg" width="50" />

Kako djeluju atributi

Visina slike zadana

<img width="250" height = "50"

Zadali ste tonu irinu (250px) i visinu

Uvod u web programiranje: Uvod u HTML

1. zadatak: Moja prva web stranica

Uvod u web programiranje: Uvod u HTML

1. zadatak: Moja prva web stranica

Naslov i odlomka i boja teksta

Uvod u web programiranje: Uvod u HTML

Osnovno formatiranje sadraja

Osnovno formatiranje sadraja

Uvod u web programiranje: Uvod u HTML

Osnovno formatiranje sadraja

elimo li sauvati izabrane fontove, a

Osnovno formatiranje teksta

2. zadatak: "Razlomljena" stranica

Uvod u web programiranje: Uvod u HTML

2. zadatak: "Razlomljena" stranica

Podebljate i poveajte slova

Napravite link na vau prvu web stranicu (iz 1. zadatka).