OSNOVE HTML-a - tvolaric.comtvolaric.com/preuzimanja/html.pdf · poredana lista (eng. ordered list) je lista kod koje su elementi nabrojani jedan ispod drugoga i svaki element označen

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

OSNOVE HTML-A

1

Tomislav Volarić [email protected], 2010/11

Internet i WWW

HTML

osnovni elementi HTMLa

osnovni elementi

hiperveze

osnovno formatiranje teksta i sadrţaja

liste

posebni znakovi

prikaz slika

tablice

forme

okviri

2

Sadrţaj

Internet3 www.fpmoz.bawww.google.com

www.yahoo.com

server

TCP/IP protokol

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

4

WWW

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)

5

WWW

WWW6 http://www.fpmoz.ba/index.hml

URL

klijent

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

7

HTML

8

Primjer HTML stranice

<table id = "prva_tablica">

<tr>

<td> Prva ćelija </td>

</tr>

</table>

<hr />

9

Koncepti HTMLa

element

atribut

vrijednost atributa

oznake

č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)

10

Ugnjeţđivanje

Ugnježđivanje

<p>

<b>Neki sadrţaj

</b>

</p>

Preklapanje

<p>

<b>Neki sadrţaj

</p>

</b>

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>

11

Struktura HTML dokumenta

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" />

12

Zaglavlje HTML dokumenta

<html>

<head>

<title>Prva HTML stranica</title>

</head>

<body>

Ovo je moja prva HTML stranica!

</body>

</html>

13

HTML dokument

Izgled u pregledniku14

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

15

Elementi HTML-a

<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>

16

HTML dokument


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

(drugi HTMLdokument, tekst, slika,...)

18

Hiperveza

<a href="drugi_dokument.html">

Ovo je link na drugi dokument</a>

a - "sidro" (eng. anchor) href – hyperlink referenceprikazuje se kao plavi podcrtani tekst (ukoliko specifičnim stilom nije drugačije definirano)

"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

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

direktoriju kao html stranica putanju nije potrebno navoditi

19

Hiperveza

<a href="http://www.unidu.hr/index.html"> Tekst linka</a>

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

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

odredišna mjesta (knjiške oznake) moraju biti posebno imenovana vrijednošću atributa "name" <a> elementa ili"id" atributa bilo kojeg (npr. <h1>) elementa

20

Hiperveza

<a href="drugi_dokument.html#mjesto2"> Ovo je link na određeno

mjesto u drugom dokumentu</a>

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

ili

<h1 id = "mjesto2">Odredište</h1>

stranica se moţe otvoriti u novom prozoru (atr. target)

ili u određenom okviru (frame)

hiperlinkovi mogu biti posebnih vrsta:

slanje elektroničke pošte

pristup datotekama na ftp serveru

21

Hiperveza

<a href="drugi_dokument.html" target="_blank">

Ovo je link na drugi dokument</a>

<a href="mailto:[email protected]">E-mail</a>

<a href="ftp://ftp.server.hr/datoteka">FTP adresa</a>

<a href="drugi_dokument.html" target="lijeviOkvir">

Ovaj dokument će se otvoriti u lijevom okviru</a>

<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:[email protected]">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>

22

HTML dokument


oznake za formatiranje značenja teksta24

Osnovno formatiranje 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>

oznake za formatiranje fizičkog izgleda teksta25

Osnovno formatiranje 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>

<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>

26

HTML dokument


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

28

Osnovno formatiranje sadrţaja

<html>

<head>

<title></title>

</head>

<body>

///\\___

(@ @)

+----oOO----(_)-----------+

| I ja učim |

| osnove |

| HTML-a |

+-----------------oOO-----+

|__|__|

|| ||

ooO Ooo

</body>

</html>

očuvanje formatiranja sadrţaja

oznake <pre></pre>

tekst se prikazuje fontovima fiksne širine

29

Osnovno formatiranje sadrţaja

<html>

<head>

<title></title>

</head>

<body>

<pre>

///\\___

(@ @)

+----oOO----(_)-----------+

| I ja učim |

| osnove |

| HTML-a |

+-----------------oOO-----+

|__|__|

|| ||

ooO Ooo

</pre>

</body>

</html>

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

30

Liste

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

31

Poredana lista

<ol>

<li>prvi element liste</li>

<li>drugi element liste</li>

<li>treći element liste</li>

</ol>

neporedana lista (eng. unordered list) je lista kod koje su elementi nabrojani jedanispod drugoga, a svaki element označen je točkom

koristi se kada nije vaţan redoslijed elemenata u listi

32

Neporedana lista

<ul>

<li>prvi element liste</li>

<li>drugi element liste</li>

<li>treći element liste</li>

</ul>

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>

33

Ugnjeţđivanje listi

Pogrešno

<ul>

<li>ispitivanje znanja</li>

<ul>

<li>seminarski </li>

<li>kolokviji</li>

</ul>

<li>predavanja</li>

</ul>

Ispravno<ul>

<li>ispitivanje znanja

<ul>

<li>seminarski </li>

<li>kolokviji</li>

</ul>

</li>

<li>predavanja</li>

</ul>

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:

34

Posebni znakovi

Znak

Za prikaz

koristiti

znakovni kod

... ili

numerički

< < <

> > >

" " "

‘ ' '

znak razmaka

Pogrešno

<html>

<head>

<title>Kod prve HTML

stranice</title>

</head>

<body>

Podebljani tekst se prikazuje

između oznaka <b> i </b>

</body>

</html>

35

HTML dokument

Želimo prikazati HTML kod :

36

HTML dokument

Ž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>

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>

37

Prikaz slike

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>


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

40

Tablice

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

41

HTML oznake tablice

zaglavlje zaglavlje

ćelija ćelija

ćelija ćelija

redak 1

zaglavlje

redak 2

tablica

Opis/naslov tablice

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>

42

Osnovni atributi tablice

<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>

43

Primjer 1 (okvir tablice)

<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>

44

Primjer 2 (širina i visina tablice)

<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>

45

Primjer 3 (širina i visina ćelije)


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

46


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

47

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

48


<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>

49

Primjer 4 (prostor oko sadrţaja)

<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>

50

Primjer 5 (razmak između ćelija)

<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>

51

Primjer 6 (tablica s razmacima)

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

border="0">

<tr>







</tr>

<tr>







</tr>

</table>

52

Primjer 7 (tablica bez razmaka)

<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>

53

Primjer 8 (poravnanje sadrţaja)

spojeni redovi<td rowspan="?"> </td>

broj spojenih redova

spojeni stupci<td colspan="?"> </td>

broj spojenih stupaca

54

Spojene ćelije tablice


<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>

55

Primjer 9 (spojeni redovi ili stupci)


<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>

56

Primjer 10 (spojeni redovi i stupci)

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

...

57

Forma

<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:[email protected]"

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>

58

Forma

<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

59

Elementi forme

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

60

Elementi forme (nastavak)

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

61

Elementi forme (nastavak)

Primjer 11 (elementi forme)62

<form action="p1.html">

E-mail:

<input type="text" id="email" value="[email protected]" />

<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

Izgled u pregledniku

64

Primjer 12 (elementi forme)

<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>

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

65

Okviri (eng. frames)

<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

66

Okviri (eng. frames)

<noframes></noframes> definira izgled stranice koja će se prikazivati u browserima koji nemaju mogućnost rada s okvirima

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

...

<a href="p1.html" target="okvir1">Otvori stranicu </a>

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>


Primjer 1469

<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>


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

Izgled u pregledniku

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

74

Inline frame

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

frameborder="1"></iframe>

atributi iframe elementasrc – stranica koja se ubacujewidth i height – širina i visina okviraframeborder – debljina linije oko okvira (0-nema okvira)marginwidth – širina praznog prostora između sadržaja i horizontalne marginemarginheight – širina praznog prostora između sadržaja i vertikalne marginescrolling (yes, no, auto) – prikazivanje klizača

Primjer 1675

<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>


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

77

Definicija tipa XHTML dokumenta

za stranice rađene po HTML 4 standardu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

za stranice rađene po XHTML standardu <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

za stranice sa skupom okvira (frameset) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

78

Tipovi XHTML dokumenta

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:

Ne vide mi se hrvatska slova! (š, č, ć, ž, đ)

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

charset=windows-1250" />

Documents

OSNOVE HTML-a - tvolaric.comtvolaric.com/preuzimanja/html.pdf · poredana lista (eng. ordered list) je lista kod koje su elementi nabrojani jedan ispod drugoga i svaki element označen