UVOD U HTML
PREDAVANJE 4
1
OPEN
LINKOVI
Efektivnost web okruženja proizilazi iz
mogućnosti da se povezuju stranice pomoću
linkova i da se prelazi sa jedne stranice na drugu
 Link se specificira komandom <a> a atribut href
ove komande određuje destinacijsku stranicu
koja će se otvoriti
 Destinacija može biti stranica koja se nalazi u
lokalnom direktoriju.Tada je dovoljno između
navodnika specificirati fajl u kojem se nalazi
stranica

2
LINKOVI

Primjer linka na stranicu u lokalnom
direktoriju:



<a href="primjer1.html">Otvori primjer 1</a>
Destinacija može biti i stranica koja se nalazi na
drugom web serveru. Tada je potrebno
specificirati između navodnika Internet adresu
stranice koja se otvara.
3
LINKOVI

Primjer linka na stranicu na internetu:


<a href="http://www.hotmail.com">Hotmail</a>
4
VJEŽBA 1

Napisati HTML kod koji će prikazati stranicu
kao na slici na slajdu 6. Mala slika treba se
ponašati kao link. Nakon što se klikne na malu
sličicu,browser treba da otvori sliku u njenoj
puno veličini kao na slici na slajdu 7 .
5
IZGLED PRVE STRANICE
6
SLIKA U PUNOJ VELIČINI
7
KOMENTAR VJEŽBE 1
U ovom slučaju objekat slika je poslužio kao
link.Zato se nalazi između početka i kraja a taga.
 Atribut target sa vrijednošću „blank“ otvara
stranicu u narednom tabu u browserima u kojima
su tabovi podržani (<a href
target=“blank“....>...</a>).
 Kao link mogu se staviti i dokumenti
 Na ovaj način se omogućava download, npr:
 <a href=“KulturShock-Nadija.mp3”>Kultur
Shocok DOWNLOAD </a>

8
VJEŽBA 2
Napraviti stranicu koja sadrži galeriju slika kao na
slijedećem slajdu.
 Sve slike trebaju biti veličine 120 sa 120 piksela
 Horizontalni razmak između slika 40, a vertikalni 20
piksela
 Sve slike se nalaze na Desktopu u folderu galerija
 Svaka slika je link na tu sliku u punoj veličini
 Kopirati u željeni folder po potrebi

9
GALERIJA
10
TABELE
Komanda koja služi za specificiranje tabele je
<table> </table>
 Neki od atributa:




border=““ – debljina okvira tabele
cellpadding=““ – Veličina praznog prostora oko teksta
unutar ćelije
cellspacing=““ – Razmak između ćelija unutar tabele
Tag za specificiranje reda unutar tabele <tr>
</tr>.
 Ako želimo da specificiramo ćeliju unutar
određenog reda koristiti ćemo tag <td></td>.

11
TABELE
Neki od atributa:
 rowspan=““ – Koristi se kada se ćelija prostire u
više redova
 colspan=““ – Koristi se kada se ćelija prostire u
više kolona
 između znaka navoda ukucamo broj
redova/kolona u koliko će se ćelija prostirati

12
PRIMJER














OBIČNA TABELA
<table>
<tr>
<td>Prvi red,prva kolona</td>
<td>Prvi red,druga kolona</td>
</tr>
<tr>
<td><b>Drugi red,prva kolona</b></td>
<td><i>Drugi red,druga kolona</i></td>
</tr>
<tr>
<td>Treci <b>red</b>,prva kolona</td>
<td>Treci <i>red</i>,<br/>druga <pre>
kolona</pre></td>
</tr>
</table>
13
PRIMJER TABELE SA ĆELIJAMA KOJE
ZAUZIMAJU VIŠE KOLONA













<table border="3">
<tr>
<td>Prvi red,prva kolona</td>
<td>Prvi red,druga kolona</td>
</tr>
<tr>
<td><b>Drugi red,prva kolona</b></td>
<td><i>Drugi red,druga kolona</i></td>
</tr>
<tr>
<td colspan="2">Celija sada zauzima dvije
kolone</td>
</tr>
</table>
14
TABELE

U tabele možemo ubaciti bilo koji
objekat(tekst,slike,video....).
Primjer:
 Napraviti tabelu 2x4 koja sadrži 2 slike sa
linkovima na njihove prave veličine,koji se
otvaraju u drugom tabu. Druge dvije ćelije neka
budu vaše ime i prezime.
 Potrebno je da debljina okvira tabele bude 3px.

15
VJEŽBA 3

Napraviti stranicu kao na slijedećem. Za
raspored elemenata koristiti tabelu. Dimenzije
tabele su 3x3.
16
REZULTAT VJEŽBE3
17
RJESENJE


<table>
<tr>
<td></td> <td><h2>Naslov</h2></td> <td></td>


</tr>

<tr>

<td>
<ul> <li>Naslovna</li> <li>O nama</li> <li>Kontakt</li>

</ul>

</td> <td></td> <td>Trazi:</td>

</tr>

<tr>



<td></td> <td><img src="vuk.jpg" alt="Slika vuka"></td>
<td></td>
</tr>
</table>
18
NAPOMENA
Tabele se više ne koriste za dizajn web stranica.
 Koriste se jos uvijek za tabelarni prikaz
podataka.

19
PONAVLJANJE
Slike
 Tabele
 Linkovi

20
VJEZBA 4
21
RJESENJE

Poslati emailom
22
DOCTYPE
<!DOCTYPE> deklaracija je tag koji govori
browser-u koju HTML ili XHTML specifikaciju
dokument koristi tj. govori validatoru koju
verziju HTML-a ili XHTML-a da koristi za
provjeru sintakse dokumenta.
 Doctype služi da bi browser bolje generirao
stranicu.

23
DOCTYPE
Najbolje bi bilo prije svakog dokumenta kopirati
slijedeći kod:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN">



Browser će otvoriti stranicu u skladu sa
HTML4.01 specifikacijama.
https://addons.mozilla.org/enUS/firefox/addon/249/ - HTML validator Firefox
24
KOMENTARI U HTML-U
<!-- ……………….. -->
 Pozeljno pisanje komentara za odredjene cjeline
 Kod unutar komentara se ignorise

25
DIZAJN WEB STRANICA

TAJNA DOBRE STRANICE NE LEŽI
PRVENSTVENO U DIZAJNU NEGO U
KOLIČINI I ORGANIZACIJI
INFORMACIJA!!!!!
26
Download

uvod u html predavanje 4 open