programiranje za internet upute za laboratorijske · pdf file2 osim tagova, važno je naučiti...
TRANSCRIPT
PROGRAMIRANJE ZA INTERNET
Upute za laboratorijske vježbe (izradio: Marin Bugarić)
HTML
Lab. vježba
2
P R O G R A M I R A N J E Z A I N T E R N E T
1
Općenito o HTML-u
HTML - Hyper Text Markup Language
yperText Markup Language, odnosno HTML, centralni je jezik za izgradnju internetskih stranica. Iako postoje napredne tehnologije poput PHP-a, ASP .NET-a i ostalih, HTML i dalje ostaje osnova bez koje nije moguće kreirati internetsku stranicu. Možemo reći da je ovo programski jezik posebno
prilagođen izradi Web sadržaja, no treba voditi računa da je u biti riječ o markup jeziku.
Markup jezici koriste se za procesiranje, definiranje i prezentiranje teksta, s točno definiranim dijelovima teksta koji služe kao naredbe. U HTML-u postoje dvije vrste naredbi:
1. Tagovi - Naredbe za oblikovanje stranice - pišu se između znakova < >. Tagovi u većini slučajeva dolaze u paru, i njihova se funkcionalnost odnosi na tekst koji se nalazi unutar ta dva taga. Upravo zbog toga, treba biti oprezan i voditi računa o tome što je i na koji način obuhvaćeno tagovima, te postoji li uvijek odgovarajući zatvarajući tag.
Kao primjer možemo uzeti naredbu/tag kojim se definira početak i kraj HTML internetske stranice: <html>.
<html>
</html>
Zatvarajući tag se, dakle, piše dodavanjem kose crte (/). Postoje iznimke kada tag nema svoj odgovarajući zatvarajući tag. Potrebno je takve tagove prepoznati i znati ih koristiti. Ukoliko se želimo držati XHTML standarda i pravila, takve takove moramo pisati na način da prije znaka > dopišemo znak /. To je najbolje vidjeti na primjeru taga kojim se označava prelazak u novi red: <br />
Popis svih tagova možete pronaći na sljedećem linku: http://www.w3schools.com/tags/default.asp
2. Entiteti – Naredbe koje su nužne za ispis posebnih znakova. Entiteti se pišu sa znakom &, a kao primjer možemo uzeti ispis znaka „copyright“ ©:
©
Popis entiteta možete pronaći na sljedećem linku: http://www.w3schools.com/html/html_entities.asp
H
T A G O V I
E N T I T E T I
2
Osim tagova, važno je naučiti i što su atributi. Atributi su određena svojstva tagova kojima možemo pobolje objasniti ili definirati funkcionalnost određenog taga. Primjer atributa je sljedeći:
<img src="http://www.stranica.hr/slika.jpg" />
U ovom slučaju atribut je “src”, a služi kako bi naredbi, odnosno tagu img pobliže naznačili koju točno sliku želimo prikazati. Postoje globalni atributi u HTML-u koji se mogu primijeniti na sve tagove. Također, postoje i specifični atributi koji se mogu koristiti isključivo sa određenim tagovima. O HTML-u možete pročitati više (i koristiti za vrijeme laboratorijskih vježbi) ovdje: http://www.w3schools.com/html/default.asp
Jednostavna HTML stranica
Na primjeru najjednostavnije HTML stranice možemo vidjeti primjer tagova (html, head, body). Vodite računa da DOCTYPE nije tag, već samo način da pretraživaču objasnite tip dokumenta (u ovom slučaju HTML) koji se koristi.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
Već na ovom, najjednostavnijem primjeru, jasno je kako nije jednostavno voditi računa o otvorenim i zatvorenim tagovima. Stoga je dobra praksa prilikom pisanja svakog novog taga, odmah i zatvoriti isti u sljedećem retku. Također, svaki ugniježđeni tab mora biti uvučen, kao što je to i vidljivo u sljedećem primjeru, kojim je objašnjen postupak stvaranja tagova.
Preglednost koda vaše stranice je bitna!
A T R I B U T I
W 3 S C H O O L S
H E L L O W O R L D
<html>
<html>
</html>
<html>
<head>
</html>
<html>
<head>
</head>
</html>
3
Osnovni dijelovi HTML stranice
<head>
Naredbe u 'head' dijelu sadrže informacije o dokumentu. Ovaj dio se prvi učitava u pretraživač. Najčešći tagovi unutar 'head' dijela su: <meta>, i <link> (ne zatvaraju se), te <title>, i <script> (zatvaraju se).
title – glavni naslov dokumenta o <title>Ovo je naslov dokumenta</title>
meta - razne informacije o dokumentu koje koriste pretraživači, npr: o <meta name="keywords" content="key,word,keyword" />
ključne riječi o <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
za korištenje hrvatskih znakova o <meta http-equiv="refresh" content="0; URL=http://www.a.hr/ " />
koristi se ukoliko stranica sadrži informacije koje se mijenjaju (dinamički
generirane stranice). Također se koristi za automatsko preusmjeravanje na
neku adresu
script - za uključivanje skripti, npr. JavaScript koda
link - koristi se za uključivanje vanjskog css-a. Primjer: <head>
<title>Naslov moje stranice</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<script src="mojaskripta.js"></script>
<link type="text/css" href="mojstil.css">
</head>
NAPOMENA: Ponekad se radi jednostavnosti i preglednosti otvarajući i zatvarajući tag pišu u istom retku, ali samo u slučaju da je sadržaj između kratak ili ga nema.
<body>
Ovaj tag definira tijelo HTML dokumenta, i unutar njega se nalazi cijeli sadržaj HTML dokumenta poput teksta, hiperlinkova, slika, tablica, lista.
Unutar body elementa u starijim verzijama HTML-a koristili su se specifični atributi (koje ćemo mi možda i koristiti za vrijeme vježbi iz ovog predmeta), ali je važno znati da su oni uklonjeni po HTML5 standardu.
H E A D
B O D Y
4
o <h1> - Naslovi, h1 - najveći naslov, postoje manji - do h6 o <p> - označava paragraf o <em> - označava naglašeni tekst o <b> - ispis podebljanog teksta o <i> - ispis kosog teksta o <small> - umanjeni tekst o <big> - povećani tekst o <sub> i <sup> - indeksindeks i eksponeneteksponenet o <pre> - preformatiran tekst - ne uklanja suvišne razmake o <br /> - prijelaz u novi red o <hr /> - crta horizontalnu liniju
Više o formatiranju teksta možete pogledati na: http://www.w3schools.com/html/html_formatting.asp
<img /> Atributi koji se koriste s ovim tagom su:
o src – OBAVEZAN – lokacija slike o alt – OBAVEZAN – Alternativni tekst koji opisuje sliku o height – Visina slike o width – Širina slike o ismap o usemap
<a> <a href="http://www.microsoft.com/">ovo je link</a>
o Običan link <a href="#sidro">prebaci</a>
o link na mjesto unutar iste stranice
o Mjesto se definira sa: <a name="sidro"><h2>novo</h2></a>
o Klikom na prebaci u prozoru pretraživača pomiče se ista stranica tako da je novo u vrhu prozora
<a href="mailto:[email protected]"> Send Mail</a> o otvara novu e-mail poruku za primaoca
<a href="http://www.microsoft.com/"><img src="slika.gif"></a>
o i slika može biti link
F O R M A T I R A N J E
T E K S T A
P R I K A Z
S L I K E
L I N K O V I
5
<ul>,<li> - kreiranje nepobrojane liste - imaju zatvarajuće tagove atributi: type="disc|circle|square" Primjer: Ispis:
<ul>
<li>Teorem 1</li>
<li type="disc">Teorem 2</li>
<li type="circle">Teorem 3</li>
<li type="square">Teorem 4</li>
</ul>
Teorem 1
Teorem 2 o Teorem 3
Teorem 4
<ol>,<li> - kreiranje pobrojene liste - imaju zatvarajuće tagove atributi: type="1|A|a|I|i" Primjer1: Ispis1:
<ol>
<li>Teorem 1</li>
<li>Teorem 2</li>
<li>Teorem 3</li>
<li>Teorem 4</li>
</ol>
1. Teorem 1 2. Teorem 2 3. Teorem 3 4. Teorem 4
Primjer2: Ispis2:
<ol type="1">
<li>Teorem 1</li>
<li>Teorem 2</li>
<li>Teorem 3</li>
<li>Teorem 4</li>
</ol>
i. Teorem 1 ii. Teorem 2 iii. Teorem 3 iv. Teorem 4
<dl>,<dt> - kreiranje liste definicija. - imaju zatvarajuće tagove Primjer: Ispis:
<dl>
<dt>Termin 1</dt>
<dd>Definicija 1 </dd>
<dt>Termin 2</dt>
<dd>Definicija 2 </dd>
</dl>
Termin 1 Definicija 1
Termin 2 Definicija 2
L I S T E
6
<table> Jedini podržani specifični atribut za ovaj tag u HTML5 je atribut border kojem možemo postaviti samo vrijednosti "" ili "1". Ostali tagovi se više ne koriste. U kombinaciji s ovim tagom idu tagovi • <tr> - novi redak • <th> - novi stupac kao naslov • <td> - novi stupac Evo primjer nekoliko jednostavnih tablica: Primjer 1. <!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
Primjer 2. <!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>naslov1</th>
<th>naslov2</th>
</tr>
<tr>
<td>polje1</td>
<td>polje2</td>
</tr>
</table>
</body>
</html>
T A B L I C E
7
Colspan i rowspan su atributi koji se mogu koristiti kod <th> i <td> tagova za spajanje stupaca odnosno redaka. Primjer: <th colspan="2"> polje koja spaja 2 stupca. Primjer 3. <html>
<body>
<table border="1">
<tr>
<th>naslov1</th>
<th colspan="2">naslov od stupca</th>
</tr>
<tr>
<td>vrijednost1</td>
<td>vrijednost2</td>
<td>vrijednost3</td>
</tr>
</table>
</body>
</html>
VAŽNA NAPOMENA Sve atribute koji su izbačeni u HTML5 možete pronaći na stranici: http://www.w3schools.com/html5/
8
Forma je područje gdje ćete pronaći sve što je potrebno jednom formularu Polja formi su objekti koji posjetitelju stranica dozvoljavaju unos podataka "action" je akcija koja se izvodi na unesenim podacima, npr: JavaScript,
CGI skripta, najjednostavnija mailto:[email protected]
Forma sadrži jedan od sljedećih elemenata:
o <input>
o Text
o Password
o Radio
o Checkbox
o Submit o <textarea>
o <button>
o <select> i <option>
o <optgroup>
F O R M E
9
o <fieldset>
<datalist> - nije još podržano u svim preglednicima, služi kao sugestija pri unošenju teksta
<output>
<label>
10
Zadatak
Kreirati HTML stranicu prema sljedećem primjeru. Resursi za vježbu nalaze se u odgovarajućoj komprimiranoj datoteci koje možete snimiti na eLearning portalu.
11
12
13
U M A N J E N A
V E R Z I J A