HTML Prirucnik PDF

1
Vjeţbe iz kolegija “Računalni praktikum 2"
OSNOVE HTML-A
Mostar, 2010/11
Tomislav Volarić volaric.tomislav@gmail.com
Sadrţaj
2
 Internet i WWW
 HTML
 osnovni elementi HTMLa
 osnovni elementi
 hiperveze
 osnovno formatiranje teksta i sadrţaja
 liste
 posebni znakovi
 prikaz slika
 tablice
 forme
 okviri
Internet
3
www.google.com www.fpmoz.ba server
www.yahoo.com
TCP/IP protokol
WWW
4
 WWW=World Wide Web

 stvoren je 1989. godine na CERN-u
 bazira se na hipertekstu (povezivanju sadrţaja)
 WWW je biblioteka multimedijalnih dokumenata
smještenih na računalima širom svijeta dostupnih putem
Interneta
 dokumenti se nazivaju web stranice
WWW
5
 web počiva na 3 mehanizma:

1. jedinstvenom adresiranju sadrţaja putem URL-a
(Uniform Resource Locator)
2. protokolima za pristup sadrţajima (http - HyperText
Transfer Protocol)
3. hipertekstualnoj organizaciji i pristupu sadrţajima
(HTML jezik)
WWW
6 http://www.fpmoz.ba/index.hml
URL
klijent
HTML
7
 HTML=HyperText Markup Language

 jezik za opis strukture dokumenta
 najvaţnija osobina HTML dokumenta je
hipertekstualnost (povezivanje sadrţaja)
 HTML dokument je tekstualna datoteka koja se sastoji
od HTML elemenata
Primjer HTML stranice
8
Koncepti HTMLa
9 atribut
element
<table id = "prva_tablica">
vrijednost atributa
<tr>
<td> Prva ćelija </td>
</tr>
</table> oznake
<hr />
Ugnjeţđivanje
10
 često se na web stranici na isti sadrţaj primjenjuje više

elemenata
 takvi elementi ne smiju se preklapati već moraju biti
ugnjeţđeni (eng. nested)
Preklapanje Ugnježđivanje
<p> <p>
<b>Neki sadrţaj <b>Neki sadrţaj
</p> </b>
</b> </p>
Struktura HTML dokumenta
11
 HTML dokument <html></html>

 početna i završna oznaka svakog dokumenta
 svi ostali elementi moraju biti ugnjeţđeni unutar ovoga
 HTML dokument dijeli se na 2 osnovna dijela

 zaglavlje dokumenta <head></head>
 tijelo dokumenta <body></body>
 <frameset></frameset>
Zaglavlje HTML dokumenta
12
 zaglavlje dokumenta <head></head>

 unutar zaglavlje unose se određeni "meta" podaci koji opisuju
dokument npr. naslov dokumenta, kodna stranica, ključne riječi,...
 naslov dokumenta <title></title>
 meta podaci
 <meta name="keywords" content=“računalni
praktikum 2, osnove HTMLa" />
 meta name="author" content=“Tomo" />
 <meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
HTML dokument
13
<html>
<head>
<title>Prva HTML stranica</title>
</head>
<body>
Ovo je moja prva HTML stranica!
</body>
</html>
Izgled u pregledniku
14
Elementi HTML-a
15
 naslovi (6 razina naslova <h1>-<h6>)

<h1>Ovo je naslov razine 1</h1>
...
 odlomci <p>Ovo je odlomak</p>
 prijelaz u novi redak <br />
 vodoravna crta za odvajanje odlomaka <hr />
 komentar <!–- Ovo je komentar -->
 ne prikazuje se u web pregledniku
HTML dokument
16
<html>
<head><title>Druga HTML stranica</title></head>
<body>
<h1>Ovo je moja druga HTML stranica</h1>
<h2>HTML</h2>
<p>HTML je izvorni jezik za prikazivanje sadržaja na webu.<br
/>
Razvijen je 1989. godine na CERN-u Europskom laboratoriju za
nukleranu fiziku u Ženevi.

<hr />
Tim Berners-Lee, istraživač na CERN-u, predložio je distribuirani
informacijski sustav za pohranu informacija. Sustav je bio baziran
na Hipertekstu.
</p>
</body>
</html>
17
Hiperveza
18
 hiperveza je veza između HTML dokumenta i drugog sadrţaja

(drugi HTMLdokument, tekst, slika,...)
<a href="drugi_dokument.html">
Ovo je link na drugi dokument</a>
a - "sidro" (eng. anchor) href – hyperlink reference

prikazuje se kao plavi podcrtani tekst (ukoliko specifičnim
stilom nije drugačije definirano)
Hiperveza
19
 "adresiranje" drugog dokumenta koji se poziva moţe se

provesti na različite načine
 ako se drugi dokument nalazi na drugom web posluţitelju,
navodi se puna adresa posluţitelja i naziv dokumenta
<a href="http://www.unidu.hr/index.html"> Tekst linka</a>
 ako se dokument nalazi na istom web posluţitelju i istom

direktoriju kao html stranica putanju nije potrebno navoditi
<a href="index.html">Tekst linka</a>

Hiperveza
20
 hiperveza moţe pokazivati na određeno mjesto u HTML

dokumentu
<a href="drugi_dokument.html#mjesto2"> Ovo je link na određeno
mjesto u drugom dokumentu</a>
 odredišna mjesta (knjiške oznake) moraju biti posebno

imenovana vrijednošću atributa "name" <a> elementa ili
"id" atributa bilo kojeg (npr. <h1>) elementa
<a name = "mjesto2">Odredište</a>

ili
<h1 id = "mjesto2">Odredište</h1>
Hiperveza
21
 stranica se moţe otvoriti u novom prozoru (atr. target)
<a href="drugi_dokument.html" target="_blank">
Ovo je link na drugi dokument</a>
 ili u određenom okviru (frame)
<a href="drugi_dokument.html" target="lijeviOkvir">
Ovaj dokument će se otvoriti u lijevom okviru</a>
 hiperlinkovi mogu biti posebnih vrsta:
 slanje elektroničke pošte
<a href="mailto:mail@server.hr">E-mail</a>
 pristup datotekama na ftp serveru
<a href="ftp://ftp.server.hr/datoteka">FTP adresa</a>
HTML dokument
22
<html>
<head>
<title>Primjer linkova</title>
</head>
<body>
<a href="http://www.google.com/index.html">Ovo je
link na drugi dokument</a><br />
<a href="#mjesto2">Ovo je link na dno ovog
dokumenta</a><br />
<a href="mailto:korisnik@server.hr">E-mail</a><br />
<a href="ftp://ftp.carnet.hr/README"> FTP
datoteka</a><br /><br /><br /><br /><br /><br />
<a name="mjesto2">Odredište</a>
</body>
</html>
23
Osnovno formatiranje teksta
24
 oznake za formatiranje značenja teksta
<strong>Ovaj tekst je jako

naglašen</strong>
<em>Ovaj tekst je
naglašen</em>
<code>Ovo je programski
kod</code>
<cite>Ovo je citat</cite>
Osnovno formatiranje teksta
25
 oznake za formatiranje fizičkog izgleda teksta

<b>Ovaj tekst je
podebljan</b>
<i>Ovaj tekst je
nakošen</i>
Ovo je indeks<sub>1</sub>
Ovo je
potencija<sup>2</sup>
<tt>Ovo je font fiksne
širine</tt>
HTML dokument
26
<html>
<head><title>Treća HTML stranica</title></head>
<body>
<h1>Ovo je moja treća HTML stranica</h1>
<h2>HTML</h2>
<p>HTML je izvorni jezik za <strong>prikazivanje
sadržaja</strong> na webu.<br />
Razvijen je 1989. godine na CERN-u<sup>1</sup> <em> Europskom
laboratoriju za nukleranu fiziku u Ženevi.</em>

<hr /><big>Tim Berners-Lee</big>, istraživač na <def>CERN-
u</def>, predložio je distribuirani informacijski sustav za
pohranu informacija. <br />
<code>Sustav je bio baziran na hipertekstu.</code>
</p>
</body>
</html>
27
Osnovno formatiranje sadrţaja
28
 prikazom u pregledniku gubi se početno formatiranje sadrţaja
<html>
<head>
<title></title>
</head>
<body>
///\\___
(@ @)
+----oOO----(_)-----------+
| I ja učim |
| osnove |
| HTML-a |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</body>
</html>
Osnovno formatiranje sadrţaja
29
 očuvanje formatiranja sadrţaja

 oznake <pre></pre>
 tekst se prikazuje fontovima fiksne širine
<html>
<head>
<title></title>
</head>
<body>
<pre>
///\\___
(@ @)
+----oOO----(_)-----------+
| I ja učim |
| osnove |
| HTML-a |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</pre>
</body>
</html>
Liste
30
 liste sluţe za organizaciju sadrţaja na web stranici

 poredana lista (ordered list)
 <ol></ol> kreira listu
 neporedana lista (unordered list)
 <ul></ul> kreira listu
 elementi liste (za obje vrste liste)

 <li></li> elementi liste
Poredana lista
31
 poredana lista (eng. ordered list) je lista kod koje su elementi nabrojani jedan
ispod drugoga i svaki element označen je rednim brojem
 koristi se kada je redoslijed elemenata vaţan
<ol>
<li>prvi element liste</li>
<li>drugi element liste</li>
<li>treći element liste</li>
</ol>
Neporedana lista
32
 neporedana lista (eng. unordered list) je lista kod koje su elementi nabrojani jedan
ispod drugoga, a svaki element označen je točkom
 koristi se kada nije vaţan redoslijed elemenata u listi
<ul>
<li>prvi element liste</li>
<li>drugi element liste</li>
<li>treći element liste</li>
</ul>
Ugnjeţđivanje listi
33
 Unutar <ul>/<ol> elementa smije se nalaziti samo <li> element

 <ul>/<ol> ne smiju biti u istoj razini s <li> elementom
 Ugnjeţđena <ul>/<ol> lista dolazi unutar <li>
Pogrešno Ispravno
<ul>
<ul>
<li>ispitivanje znanja
<li>ispitivanje znanja</li>
<ul>
<ul>
<li>seminarski </li>
<li>seminarski </li>
<li>kolokviji</li>
<li>kolokviji</li>
</ul>
</ul>
</li>
<li>predavanja</li>
<li>predavanja</li>
</ul>
</ul>
Posebni znakovi
34
 znakovi koji u HTML-u imaju posebno značenje u tekstu se moraju

prikazivati na poseban način, znakovnim ili numeričkim kodovima
 na početku imaju znak & (ampersand), a na kraju točku-zarez
 najčešće korišteni posebni znakovi:
Za prikaz
... ili
Znak koristiti
numerički
znakovni kod
< < <
> > >
" " "
‘ ' '
znak razmaka
HTML dokument
35
Želimo prikazati HTML kod :
Pogrešno
<html>
<head>
<title>Kod prve HTML
stranice</title>
</head>
<body>
Podebljani tekst se prikazuje
između oznaka <b> i </b>
</body>
</html>
HTML dokument
36
Želimo prikazati HTML kod:
Ispravno
<html>
<head>
<title>Kod prve HTML stranice</title>
</head>
<body>
Podebljani tekst se prikazuje
između oznaka < b > i <
/b >
</body>
</html>
Prikaz slike
37
 u HTML dokumentu mogu se ubaciti i slike

 za prikaz se koristi <img> element
 <img src="slika.jpg" alt="Moja prva slika"
height="160" width="160" border="2" />
 src - naziv i putanja slike koja se prikazuje
 alt - tekst koji opisuje sliku koji se prikazuje u slučaju ako nije moguć prikaz slike
 height i width - visina i širina slike
 border - definira okvir oko slike
 align ("left" , "right", "bottom", "middle", "top" -
poravnanje u odnosu na odlomak
 slike se mogu koristiti i kao linkovi
 <a href="http://www.fpmoz.hr/">
<img src="slika.jpg" alt="Moja prva slika"
height="159" width="143" border="2" /></a>
HTML dokument
38
<html>
<head><title>Primjer slike</title></head>
<body>
<img src="http://www.timdizajn.com/praktikum/slike/kosarka.jpg" alt="Prva slika"
height="160"
width="160"
border="2"
align="right"/>
<a href="http://www.fpmoz.ba/">
<img src="http://www.timdizajn.com/praktikum/slike/Windows_8.png"
alt=“windows"
height="160"
width="160"
border="2" /></a>
</body>
</html>
39
Tablice
40
 prikazuju sadrţaj na strukturirani način, u recima i

stupcima
 u praksi tablice se koriste za:
 prikaz strukturiranih podataka
 pozicioniranje sadrţaja na točno određeno mjesto na
stranici
 sadrţaj se smješta u određenu ćeliju
HTML oznake tablice
41
 HTML oznake tablice

 <table></table> određuje tablicu
 <th></th> određuje zaglavlje tablice
 <tr></tr> određuje redak tablice
 <td></td> određuje ćeliju tablice
 <caption></caption> određuje opis (naslov) tablice
Opis/naslov tablice
zaglavlje zaglavlje zaglavlje
redak 1 ćelija ćelija tablica
redak 2 ćelija ćelija

Osnovni atributi tablice
42
 debljina okvira (u pixelima)

<table border="?"> </table>
 širina (u % ili pixelima)
<table width="?"> </table>
 u odnosu na širinu prozora preglednika
 ako se ne navede tablica zauzima širinu sadrţaja
<td width="?"> </td>
 visina (u % ili pixelima)
<table height="?"> </table>
 u odnosu na visinu prozora preglednika
 ako se ne navede tablica zauzima visinu sadrţaja
<td height="?"> </td>
Primjer 1 (okvir tablice)
43
<table border="2">
<caption>Glumci i glumice</caption>
<tr>
<th>Inicijali</th>
<th>Ime i prezime</th>
</tr>
<tr>
<td>AJ</td>
<td>Ashley Judd</td>
</tr>
<tr>
<td>BW</td>
<td>Benjamin Weir</td>
</tr>
<tr>
<td>TLJ</td>
<td>Tommy Lee Jones</td>
</tr>
</table>
Primjer 2 (širina i visina tablice)
44
<table width="50%" height="300"

border="2">
<tr>
<th>Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
Primjer 3 (širina i visina ćelije)
45
<table border="2">
<tr>
<th width="60%"
height="75">Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
46
 prazan prostor oko sadržaja ćelije (u pixelima)

<table cellpadding="?"> </table>
 ako se ne navede, po defaultu je 1 ili 2 pixela
 ako se ţeli ukloniti treba staviti da je 0
Ime Prezime
cellpadding
47
 razmak između ćelija (u pixelima)

<table cellspacing="?"> </table>
 ako se ne navede, po defaultu je 1 ili 2 pixela
 ako se ţeli ukloniti treba staviti da je 0
Ime Prezime
cellspacing
48
 horizontalno poravnanje sadržaja u ćeliji

<tr align="?"> </tr>
<td align="?"> </td>
 left, center ili right
<caption align="?"> </caption>
 left, center ili right
 vertikalno poravnanje sadržaja u ćeliji

<tr valign="?"> </tr>
<td valign="?"> </td>
 top, middle ili bottom
<caption align="?"> </caption>
 top ili bottom
Primjer 4 (prostor oko sadrţaja)
49
<table border="2" cellpadding="15">
<tr>
<th>Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
Primjer 5 (razmak između ćelija)
50
<table border="2" cellspacing="15">

<tr>
<th>Inicijali</th>
</tr>
<tr>
<td>AJ</td>
</tr>
<tr>
<td>BW</td>
</tr>
<tr>
<td>TLJ</td>
</tr>
</table>
Primjer 6 (tablica s razmacima)
51
<table>
<tr>
<td><img src="pic-1a.gif" width="56"
height="102" border="0"></td>
<td><img src="pic-1b.gif" width="56"
<td><img src="pic-1c.gif" width="56"
</tr>
<tr>
</tr>
</table>
Primjer 7 (tablica bez razmaka)
52
<table cellspacing="0" cellpadding="0"

border="0">
<tr>
</tr>
<tr>
</tr>
</table>
Primjer 8 (poravnanje sadrţaja)
53
<table border="2">
<caption align="bottom">Glumci i
glumice</caption>
<tr align="left">
<th>Inicijali</th>
<th align="left">Ime i
prezime</th>
</tr>
<tr>
<td align="center">AJ</td>
</tr>
<tr>
<td align="center">BW</td>
</tr>
<tr>
<td align="center">TLJ</td>
</tr>
</table>
Spojene ćelije tablice
54
 spojeni redovi
<td rowspan="?"> </td>
 broj spojenih redova
 spojeni stupci
<td colspan="?"> </td>
 broj spojenih stupaca
Primjer 9 (spojeni redovi ili stupci)
55
<tr align="center">
<th rowspan="2">Godina</th>
<th colspan="3">Studenti</th>
</tr>
<tr align="center">
<th>1. godina</th>
<th>2. godina</th>
<th>3. godina</th>
</tr>
<tr align="center">
<td>2003</td>
<td>35</td>
<td>28</td>
<td>18</td>
</tr>
<tr align="center">
<td>2004</td>
<td>45</td>
<td>15</td>
<td>14</td>
</tr>
</table>
Primjer 10 (spojeni redovi i stupci)
56

<tr align="center">
<th rowspan="2">Godina</th>
<th colspan="3">Studenti</th>
</tr>
<tr align="center">
<th>1. godina</th>
<th>2. godina</th>
<th>3. godina</th>
</tr>
<tr align="center">
<td valign="bottom">2003</td>
<td rowspan="2" colspan="3">
Nema upisanih</td>
</tr>
<tr align="center">
<td>2004</td>
</tr>
</table>
Forma
57
 sluţi za interakciju korisnika

 korisnik unosi podatke i pokreće odgovarajući program
 primjena :
 prijava korisnika za pristup web stranici
 prikupljanje informacija o posjetiteljima
 on-line kupovinu
 sučelje prema bazi podataka
 unos podataka za pretraţivanje stranice
 ...
Forma
58
 <form></form> element
 "action" atribut određuje što će se uraditi s podacima (u koji program će
se podaci proslijediti)
<form method="post" action="neka_akcija"></form>
 akcije:
slanje podataka pomoću programa za elektroničku poštu
<form method="post" action="mailto:korisnik@domena.hr"
enctype="text/plain"></form>
pozivanje izvršnog programa na posluţitelju
<form method="post" action="program.cgi"></form>
prijelaz na drugu html stranicu
<form action="nova_stranica.html"></form>
Elementi forme
59
 <input /> element je osnovni element forme

 vrijednost atributa "type" određuje njegovu namjenu
 unos podataka <input type="text" />
 polje za unos lozinke <input type="password" />
 radio button <input type="radio" />
 checkbox <input type="checkbox" />
 ostali vaţni atributi
 “name" imenuje element forme
 npr svi checkbox-ovi koji pripadaju istoj skupini moraju imati istu vrijednost atributa
name
 "value" defaultna vrijednost elementa
 "size" veličina polja na ekranu
 "maxlength" maksimalna duţina sadrţaja
Elementi forme (nastavak)
60
 skriveno polje
<input type="hidden" />
 npr kada šaljete podatke na mail pomoću cgi programa u takvom podatku se
definira e-mail adresa na koju s epodaci šalju
 tipka za čišćenje polja forme
<input type="reset" />
 tipka za proslijeđivanje podataka forme
<input type="submit" />
 vrijednost atributa value mijenja prikaz teksta na tipki
 unos veće količine teksta
<textarea></textarea>
 atributi: rows i cols - broj redaka i stupaca
Elementi forme (nastavak)
61
 padajući izbornik (eng. Pull Down List)

 definicija izbornika <select></select>
 atribut size za broj prikazanih izbora
 po defaultu size=1
 ako je broj prikazanih izbora veći od 1 element se naziva izbornik s
klizajućom trakom (eng. Scrolling List)
 pojedini izbor <option></option>
 atribut selected za izabrani podatak
Primjer 11 (elementi forme)
62
<form action="p1.html">
E-mail:
<input type="text" id="email" value="korisnik@server.hr" />
<br /><br />
Lozinka:
<input type="password" id="lozinka" size="20"/>
<br /><br />
Čitate li informatičke časopise?<br />
DA <input type="radio" name= "cit" value="DA" checked="checked" />
NE <input type="radio" name= "cit" value="NE" />
<br /><br />

Koje informatičke časopise čitate?<br />
Bug<input type="checkbox" name="c1" value="C1" />
Mreţa<input type="checkbox" name="c2" value="C2" />
PC chip<input type="checkbox" name="c3" value="C3" />
</form>
63
Primjer 12 (elementi forme)
64
<form>
Komentar:
<textarea id="tekst" rows="3" cols="20"></textarea>
<br /><br />
Čitate li informatičke časopise?
<select id="izbor">
<option value="DA">Da</option>
<option value="NE">Ne</option>
</select><br />
Studenti:
<select id="studenti" size="3">
<option value="ivo">Ivo Ivić</option>
<option value="ana" selected>Ana Anić</option>
<option value="pero">Pero Perić</option>
</select>
<input type="submit" value="Potvrdi" id="sub0" /><br />
<input type="submit" id="sub1" />
<input type="reset" id="res1" />
</form>
Okviri (eng. frames)
65
 sluţe za istovremeni prikaz više web stranica u

browseru
 <frameset></frameset> definira skup stranica koji će
se istovremeno prikazivati u pregledniku
 obavezan je jedan od atributa: ili rows ili cols
 navodi se širina svakog pojedinog okvira u postotku ili pikselima
 moţe se navesti * - čitav preostali prostor
<frameset rows="50%,30%,20"> ili
<frameset rows="50%,*,20%">
 skupovi okvira se mogu međusobno ugnjeţđivati
 nedostatak: stanje određenih okvira ne moţe se zapamtiti
(uključiti u "favorites") preglednika
Okviri (eng. frames)
66
 <frame ... /> - definira se stranica koja će se prikazivati

u određenom okviru
 atributi:
 src="stranica.html" - stranica koja se otvara
 name ili id - naziv okvira (ako se navede moţe se pomoću target atributa
anchor elementa određena stranica otvoriti u određenom okviru
<frame src="p1.html" name="okvir1">

...
<a href="p1.html" target="okvir1">Otvori stranicu </a>
<noframes></noframes> definira izgled stranice koja će

se prikazivati u browserima koji nemaju mogućnost rada
s okvirima
Primjer 13 (skup okira)
67
<html>
<head>
<title>Ovo je primjer korištenja okvira </title>
</head>
<frameset rows="50%, 50%" cols="40%, 30%, 30%" >
<frame src="p2-9.html" />
</frameset>
<noframes>
<body>
Prikazuju se 6 dokumenta s primjerima tablica.
</body>
</noframes>
</html>
68
Primjer 14
69
<html>
<head>
</head>
<frameset cols="50%,*">
<frameset rows="50%,*">
<frame name="p1" src="p2-1.html">
</frameset>
<frameset rows ="33%,33%,*">
</frameset>
</frameset>
<noframes>
<body>
Prikazuju se 5 dokumenta s primjerima tablica.
</body>
</noframes>
</html>
70
Primjer 15 (frameset)
71
<html>
<head>
</head>
<frameset cols="30%,*">
<frame name="index1" src="index1.html">
<frame name="stranica" src="p2-1.html">
</frameset>
<noframes>
<body>
Prikazuju se primjeri s vjeţbi.
</body>
</noframes>
</html>
Primjer 15 (lijevi okvir)
72
<html>
<body>
<h2>Primjeri</h2>
<a href="p2-1.html" target="stranica">Okvir tablice</a><br />
<a href="p2-2.html" target="stranica">Širina i visina tablice</a><br />
<a href="p2-3.html" target="stranica">Širina i visina ćelije</a><br />
<a href="p2-4.html" target="stranica">Prostor oko sadrţaja</a><br />
<a href="p2-5.html" target="stranica">Razmak između ćelija</a><br />
<a href="p2-6.html" target="stranica">Tablica s razmacima</a><br />
<a href="p2-7.html" target="stranica">Tablica bez razmaka</a><br />
<a href="p2-8.html" target="stranica">Poravnanje sadrţaja</a><br />
<a href="p2-9.html" target="stranica">Spojeni redovi ili stupci</a><br />
<a href="p2-10.html" target="stranica">Spojeni redovi i stupci</a><br />
<a href="p2-11.html" target="stranica">Elementi forme 1</a><br />
<a href="p2-12.html" target="stranica">Elementi forme 2</a><br />
<a href="p2-13.html" target="stranica">Okviri 1</a><br />
<a href="p2-14.html" target="stranica">Okviri 2</a><br />
</body>
</html>
73
Inline frame
74
 ponekad ţelimo uključiti čitavu web stranicu unutar druge
<iframe src="p1.html" name="okvir1" width="300" height="200"

frameborder="1"></iframe>
atributi iframe elementa

src – stranica koja se ubacuje
width i height – širina i visina okvira
frameborder – debljina linije oko okvira (0-nema okvira)
marginwidth – širina praznog prostora između sadržaja i
horizontalne margine
marginheight – širina praznog prostora između sadržaja i
vertikalne margine
scrolling (yes, no, auto) – prikazivanje klizača
Primjer 16
75
<html>
<head><title>Primjer iframe</title></head>
<body>
<h1>Ovo je moja HTML stranica s iframe-om</h1>
<h2>HTML</h2>
<p>HTML je izvorni jezik za <strong>prikazivanje sadrţaja</strong> na webu.<br />
Razvijen je 1989. godine na CERN-u <em> Europskom laboratoriju za nukleranu fiziku u Ţenevi.</em>
<iframe src="2-11.html" frameborder="1" width="400" height="250“ align="center" scrolling=“yes">

</iframe>
<hr />Tim Berners-Lee, istraţivač na CERN-u, predloţio je distribuirani informacijski sustav za pohranu
informacija.
<code>Sustav je bio baziran na hipertekstu.</code>
</p>
</body>
</html>
76
Definicija tipa XHTML dokumenta
77
 na samom početku dokumenta navodi se definicija

tipa HTML dokumenta
 npr
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 kaţe web pregledniku kojem tipu stranica pripada
kako bi validatori mogli provesti kontrolu ispravnosti
dokumenta
 XHTML dokument je XML dokument i provjera se vrši
pomoću DTD pravila
Tipovi XHTML dokumenta
78
 za stranice rađene po HTML 4 standardu

Transitional//EN"
transitional.dtd">
 za stranice rađene po XHTML standardu
Strict//EN"
strict.dtd">
 za stranice sa skupom okvira (frameset)
Frameset//EN"
frameset.dtd">
Ne vide mi se hrvatska slova! (š, č, ć, ž, đ)
 Nemate naznačen encoding, pa browseri ne znaju

kako prikazati stranicu. Encodinga koji podrţavaju
hrvatske dijakritike ima više (ISO, UTF-8 i Windows)
 Odmah iza <head> upišite ovaj kod:
<meta http-equiv="Content-Type" content="text/html;

charset=windows-1250" />

HTML Prirucnik PDF

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

HTML Prirucnik PDF

Uploaded by

Copyright:

Available Formats

1

Vjeţbe iz kolegija “Računalni praktikum 2"

 WWW=World Wide Web

 web počiva na 3 mehanizma:

 HTML=HyperText Markup Language

 često se na web stranici na isti sadrţaj primjenjuje više

 HTML dokument <html></html>

 HTML dokument dijeli se na 2 osnovna dijela

 zaglavlje dokumenta <head></head>

 naslovi (6 razina naslova <h1>-<h6>)

 hiperveza je veza između HTML dokumenta i drugog sadrţaja

a - "sidro" (eng. anchor) href – hyperlink reference

 "adresiranje" drugog dokumenta koji se poziva moţe se

 ako se dokument nalazi na istom web posluţitelju i istom

<a href="index.html">Tekst linka</a>

 hiperveza moţe pokazivati na određeno mjesto u HTML

 odredišna mjesta (knjiške oznake) moraju biti posebno

<a name = "mjesto2">Odredište</a>

 oznake za formatiranje značenja teksta

<strong>Ovaj tekst je jako

 oznake za formatiranje fizičkog izgleda teksta

 prikazom u pregledniku gubi se početno formatiranje sadrţaja

 očuvanje formatiranja sadrţaja

 liste sluţe za organizaciju sadrţaja na web stranici

 elementi liste (za obje vrste liste)

 Unutar <ul>/<ol> elementa smije se nalaziti samo <li> element

 znakovi koji u HTML-u imaju posebno značenje u tekstu se moraju

Želimo prikazati HTML kod :

Želimo prikazati HTML kod:

 u HTML dokumentu mogu se ubaciti i slike

 prikazuju sadrţaj na strukturirani način, u recima i

 HTML oznake tablice

redak 1 ćelija ćelija tablica

redak 2 ćelija ćelija

 debljina okvira (u pixelima)

<table width="50%" height="300"

 prazan prostor oko sadržaja ćelije (u pixelima)

 razmak između ćelija (u pixelima)

 horizontalno poravnanje sadržaja u ćeliji

 vertikalno poravnanje sadržaja u ćeliji

<table border="2" cellspacing="15">

<table cellspacing="0" cellpadding="0"

<table border="1" cellpadding="10">

 sluţi za interakciju korisnika

 sučelje prema bazi podataka

 unos podataka za pretraţivanje stranice

 <input /> element je osnovni element forme

 padajući izbornik (eng. Pull Down List)

<br /><br />

 sluţe za istovremeni prikaz više web stranica u

 <frame ... /> - definira se stranica koja će se prikazivati

<frame src="p1.html" name="okvir1">

<noframes></noframes> definira izgled stranice koja će

 ponekad ţelimo uključiti čitavu web stranicu unutar druge

<iframe src="p1.html" name="okvir1" width="300" height="200"

atributi iframe elementa

<iframe src="2-11.html" frameborder="1" width="400" height="250“ align="center" scrolling=“yes">

 na samom početku dokumenta navodi se definicija

 za stranice rađene po HTML 4 standardu

 Nemate naznačen encoding, pa browseri ne znaju

<meta http-equiv="Content-Type" content="text/html;

You might also like