[TVZ Računarstvo] Dinamičke web aplikacije, predavanje 3.

HTML&CSS
=
osnovno
informati koč
znanje?

HTML vs. CSS
HTML
sadržaj
struktura
CSS
opis kako HTML treba
izgledati

HTML

HyperText Markup Language

markup jezik

napravljen 1990-tih, razvija se i dalje u više
smjerova
– HTML5
– XHTML5
• XHTML – pokušaj standardiziranja HTML-a prema XML-u

Izrada HTML-a
● obi an tekstč
● Notepad / vi / TextEdit
● ekstenzija .htm ili .html
● sadrži markup tagove
● < > otvaraju i tagć
● </ > zatvaraju i tagć
● izme u otvaraju eg i zatvaraju eg dolazi sadržajđ ć ć
elementa
● <p> Ovo je tekst </p>

Izrada HTML-a
● neki tagovi nemaju sadržaj, pa se odmah sami
zatvaraju (npr. <br />)
● nevažna velika i mala slova <p> = <P>
● XHTML preferira mala
● mogu se ugnjež ivati ali treba paziti na redoslijedđ
● dobro: <div> <b> Tekst </b></div>
● loše: <div> <b> Tekst </div></b>

Važni tagovi
 blokovi
 paragraf (p) , grupiranje teksta(span), sekcija tekst
(div)
 naslovi
 h1, h2, h3, h4, h5, h6
 liste
 numerirane (ol), nenumerirane (ul), pojedini element
(li)
 tablice
 tablica (table), redak (tr), stupac u retku (td)

Važni tagovi
 slike (img)
 linkovi
 sidra (a name) i linkovi (a href)
 forme
 forma (form)
 ulazi (input)
 razni tipovi: text, password, checkbox, radio, button, hidden,
file, image, reset, submit
 izbori (select)
 opcije (OPTIONS)
 ve i tekst (textarea)ć

Struktura HTML stranice
<html>
<head>
<title>Moja prva stranica</title>
</head>
<body>
<h1> Zdravo svijete </h1>
</body>
</html>
Sadržaj
}
}
dodatne
upute
(CSS,
skripte,
META)

Atributi tagova
● tag može imati i dodatne atribute
● zapisuju se iza taga, u obliku atribut=”vrijednost”
● može i jednostruki navodnik atribut='vrijednost'
● više atributa se razdvaja razmakom
● <div id=”id” class=”klasa”>
● <img src=”slika.png” height=”200px”>
● <a href=”//www.tvz.hr”>
● <body bgcolor=”black”>

Tag: img
● ume e sliku u HTML dokumentć
● atributi: src, alt (!) , height, width
● željeni format mora podržavati
pretraživač
● tipi no: jpg, png, gifč
<img src=”vibrator.jpg”
alt=”vibrator” height=”400”
width=”100”>

Tag: a
● koristi se za
● sidrenje
● <a name=”neki_naslov”>
● poveznice (linkove)
● <a href=”#neki_naslov”>
• <a href=”stranica.html#neki_naslov”>
• <a href=”http://www.google.com”>
• <a href=”mailto:stipe.predanic@tvz.hr”>

Tag: pre, font,
● pre daje tekst u fontu fiksne širine (Courier)
● font mijenja tekst – veli inu i bojuč
● NE KORISTITI – zamjenjeno CSS-om
●
<font size="5" color="red"><pre>Probni tekst</pre></font>
<font size="2" color="blue"><pre>Vidi tekst</pre></font>
<font size="+2" color="#ff00ff">Hmmmm, boja!</font>

Tag: b, i, u, br, hr
● bold, italic, underline
● preporu eno ne koristiti (CSS)č
● br = break – prelazak u novi red
● hr = horizontal rule – vodoravna linija
●
<b>Podebljano</b>
<br />
<i>Italic</i>
<hr />
<u>Podcrtano!</u>

Tag: form
● forme su potrebne za unos podataka
● razli iti tipovi podatakač
● tekst
● checkbox - mogu e odabrati više podatakać
● radio – mogu e odabrati samo jedan podatakć
● selekcija – ve i broj ponu enih objekatać đ
● potvrde i reseta

Važniji elementi formi
● Input type=”text”

● input type=”submit”
● input type=”reset”

● input type=”checkbox”
● input type=”radio”

● select
● option

CSS
● Cascading Style Sheets
● odre uje kakve stilove HTML koristi, ovisno ođ
mjestu primjene
● screen, print, handheld, tv ...
● tekstualna datoteka
● ako se nalazi u posebnoj datoteci, uobi ajenač
ekstenzija je .css
● dovoljan je obi an tekst editorč

Pridruživanje HTML-u
● CSS se HTML-u pridružuje na jedan od 3 načina
● inline – djeluje samo na element kojem je pridružen
● embedded – djeluje na elemente HTML stranice u
koju je umetnut
● external – vanjska datoteka koja djeluje na sve
stranice koje je pozovu

Pridruživanje
● inline
<p style=”color: red”>Zdravo svima!!</p>
● embedded
<head>
<style type=”text/css”>
body { font-family: Tahoma, Arial, sans-serif; ... }
</style>
</head>
● external
<head>
<link rel=”stylesheet” type=”text/css” href=”web.css” />
</head>

Sintaksa
h1 {color:gray; font size‐ :12px;}
p {
color:#ff00ff;
text-decoration: underline;
}
selektor svojstva vrijednosti

Selektori
● selektor može biti
● tag
● id
● klasa

Selektori
● kombinacija
● div.content – utje e na sve elemente tipač div klase
content, ne i ostale elemente
● gnjež enjeđ
● to na specifikacija elementač
<div class=”content”><p> ...</p></div>
CSS => div.content p {..}

Svojstva i vrijednosti
● elementi imaju razli ita svojstva i vrijednost te ihč
ovdje ne emo sva obra ivatić đ
● vježba vježba vježba
ILI
● platite dizajneru!!!
ALI
● morate ih znati jer emo s njima manipuliratić

Povijest
● 1995. Personal Home Page Tools (PHP Tools)
● Rasmus Lerdorf
●
● 1997 beta PHP 3
● Zeev Suraski i Andi Gutmans
– ZEND!
● 1998 PHP3
● novi naziv: PHP: Hypertext Preprocessor

Korištenje
● datoteka .php (ili primjerene ekstenzije poput
.php5)
● samostalni kod ili kombiniran sa HTML-om
<?php
//kod programa
echo “Program u PHP-u”;
?>

Korištenje
<html>
<head>
<title> Zbrajanje </title>
</head>
<body>
2+2= <?php echo 2+2; ?> <br />
</body>
</html>

Korištenje
● osim u HTML-u, može se koristiti i u komandnoj
liniji pokretanje PHP interpretera
● može zamjeniti shell ili .bat (batch) datoteke, a za
razliku od njih daje široke mogu nostić

A, B, C, C++ (sintaksa)
● sintaksa PHP-a je ista kao i u ostalim C-olikim
jezicima
● varijable su case sensitive, formatiranje teksta kako
želite, komentari su kao u C-u, “;” razdvaja naredbe
● if, for, while, switch, operatori, { }
<?php if ($x==10) {
for ($i=0; $i<10; $i++)
printf(“%d”,$i);
} ?>

Sintaksa - novosti
● loosely typed jezik
● varijable se uop e ne moraju deklarirati, a imenać
varijabli uvijek po inju sa $ (nprč $i, $brojac)
● komentari se osim sa // i /* */ mogu zapisati i sa
# (npr. #Ovo je komentar#)
● imena funkcija nisu osjetljiva na velika i mala
slova (echo je isto što i ECHO isto što i EcHo)
● imena varijabli su osjetljiva na velika i mala
slova ($varijabla nije isto što i $VARIJABLA)

Sintaksa - novosti
● konstante se definiraju sa define
define('VERZIJA', “1.0”);
echo VERZIJA;
● postoje varijable varijabli
$hrana='obrok';
$$hrana=”Lubenica”;
=> u varijablu $obrok spremljen je
podatak “Lubenica”

Tipovi podataka
● NULL
● cjelobrojni (integer)
● realni (float)
● nizovi znakova (string)
● logi ke vrijednost (boolean)č
● polja (array)
● objekti
● cast mogu kao u C-u (int) (float) (string) (bool) (array)ć

Rad sa stringovima
● spajanje se obavlja sa .
● $x=”Novi ” . “Zagreb”;
● postoji i operator pridruživanja “.=”
● interpolacija varijabli
$i=3;
echo “Otac imao $i kćeri”;
echo 'Otac imao $i kćeri';
● pazite na razliku
echo 'Otac imao '.$i.' kćeri';

Rad sa stringovima
● heredoc format
● služi za spremanje više redova teksta u jednu varijablu
$c= <<< Gotovo
Ovo je prva linija teksta i “ navodnik će se vidjeti.
Druga linija teksta
Gotovo;
● ispis
● echo 'Ovo je tekst'; ili echo ('I ovo je tekst');
● print 'Ovo je tekst';
● printf(“%s”, 'Ovo je tekst');
● sa echo i print se može koristiti heredoc format

Rad sa stringovima
● pojedina ni znak u stringuč
$string{ mjesto } (npr. $tekst{3} ili
$tekst {$i} )
● PHP ima ugra eno brdo funkcija za rad sađ
stringovima (pogledati dokumentaciju na
php.net)
● npr. mogu e je direktno usporeditić $i=='Pivo', ali
je preporu ljivo koristič strcmp($i, 'Pivo');

Polja
● polja su grupe vrijednosti koje se mogu identificirati prema
poziciji ili prema imenu za identifikaciju
$zvijezde= array('Toni', 'Bago', 'Seve');
echo $zvijezde[0]; => Toni
$zvijezde[3]='Maminjo'; => dodavanje elementa
$zvijezde[]='drIvo'; => također dodaje element
$politicari=array( 'Nezavisni' => 'Lesar',
'HDZ' => array('Kosor', 'Šeks'),
'SDP' => array('Milanović'),
);
echo $politicari['HDZ'][1]; => Šeks
$politicari['HSLS']=array('Kosor', 'Budiša'); => dodavanje el.
sa imenom

Rad s poljima
● prolazak kroz polje
foreach ($zvijezde as $zvijezda)
foreach ($politicari as $stranka => $vrijednost)
– foreach radi sa kopijom polja, izmjene ovih vrijednosti se
ne e reflektirati natrag na originalno poljeć
for ($i=0; $i<count($zvijezde); $i++)
echo zvijezde[$i];
– for u ovom obliku radi sa originalnim poljem i promjene eć
se vidjeti na originalnom polju
– korištenje iteratora i odgovaraju ih funkcija (next(), prev(),ć
reset(), each () itd.)

Rad s poljima
● ispis svih podataka u polju
● var_dump($polje)
● print_r($polje)
● ako se želi lijepo formatiran ispis, preporuka je
koristiti
<?php echo '<pre>';
var_dump($polje);
echo '</pre>';
?>

Objekti
class cdLista{
private id;
function setId ($newId=NULL) {
$id=$newId;
}
function setName ($newName=NULL) {
$this->name=$newName; // name nije nigdje
// ranije definiran
}
}
● objekte emo raditi na jednom od budu ih predavanja :Dć ć

Funkcije
● PHP ima bogatstvo ugra enih funkcija. Kad zatrebađ
vlastita funkcija:
function ime funkcije (parametar){
programski kod;
opcionalno return (npr return $i)
}
● npr.
function spoji ($prvi, $drugi){
return $prvi.$drugi;
}

Funkcije
● korištenje globalnih varijabli
● klju na rije globalč č
● npr.
$a='Toni';
function promjeniZvijezdu() {
global $a;
$a='Stipe';
}
echo $a; => Stipe
● globalne varijable su povezane sa sistemskom varijablom
$GLOBALS

Funkcije
● stati ke varijable – jednako kao u C-uč
function broji () {
static $count=0;
$count++;
}
● proslije ivanje parametara u funkcijeđ
● by value (default)
● by reference
function uvecaj(&$vrijednost){
++$vrijednost; }
$a=1; uvecaj($a); => a=2;

Parametri funkcija
● podrazumjevani parametri
function adresaFakulteta($fakultet=”TVZ”) {
}
● promjenjiv broj parametara
function nekaFunkcija (){
$array=func_get_args();
$broj= func_num_args();
$pojedini_parametar=func_get_arg(redni_broj);
...
● }

Povratak iz funkcije
● Funkcije mogu vratiti samo jednu varijablu. Ako
želite vratiti više – koristite polja
function vratiPuno($nešto) {
....
return array('prviRezultat'=>10,
'drugiRezultat'=>20,
'treciRezultat'=>array(
'podrezultat' => $izracun)
);
}
$a=vratiPuno(); echo $a['prviRezultat']; => 10

Sistemske varijable (polja)
● $_COOKIE
● $_GET
● $_POST
● $_FILES
● $_SERVER
● $_ENV
● $_SESSION
● $argc i $argv
}$_REQUEST

$_SERVER
● polje sa podacima o serveru i zahtjevu
● npr.
echo $_SERVER['REQUEST_METHOD']; => GET ili POST
$ipAddress=$_SERVER['REMOTE_ADDR']; =>IP korisnika
● za sadržaj $_SERVER polja podatke pogledajte
dokumentaciju na
http://www.php.net/manual/en/reserved.variables.serve
r.php

$_GET / $_POST / $_REQUEST
● podaci koji se nalaze u ovim poljima su
povezani sa HTML formama preko “name” taga
pojedinog elementa
<html>
<head><title> Forma </title></head>
<body>
<form action=”login.php” method=”get”>
<input type=”text” name=”ime”>
<input type=”text” name=”prezime”>
<input type=”submit”>
</form>
</body></html>
echo $_GET['ime'];
echo $_GET['prezime'];

$_GET ili $_POST?
● ako niste sigurni, možete koristiti $_REQUEST
● možete kombinirati zahtjev (npr.
<form action=”login.php?id=2332&name=Darko”
method=”post”>
● ako u gornjem slu aju to no želite “službeni”č č
oblik predaje podataka koristite
$_SERVER['REQUEST_METHOD']

Korištenje PHP-a sa HTML-om
● PHP kod se u HTML stranicu ume eć
● XML stilom (naj eš i, uvijek radi)č ć
– <?php echo 2+2; pokreni(); ?>
● SGML stilom (znaju ga nazivati i short tags, esto podržanč )
– <? echo 2+2; pokreni(); ?>
● Dodatni stilovi koji se koriste (na specifi no konfiguriranimč
serverima)
– ASP stil
● <% echo 2+2; pokreni(); %>
– script stil
● <script language=”php”> echo 2+2; pokreni(); </script>

Korištenje PHP-a sa HTML-om
● PHP može raditi ispis HTML koda, a dopušteno
je i mješanje PHP-a i HTML-a
<?php
$zvijezde=array('Toni',
'Vanna', 'Severina', 'Mate
Mišo', 'Jasmin');
echo “<table>”;
for ($i=0; $i<count($zvijezde);
$i++) {
echo “<tr>
<td>$i</td>
<td>$zvijezde[$i]</td>
</tr>”;
}
echo “</table>”;
?>
<table><?php
$zvijezde=array('Toni',
'Vanna', 'Severina', 'Mate
Mišo', 'Jasmin');
for ($i=0;
$i<count($zvijezde); $i++) {
?> <tr>
<td><?php echo $i; ?></td>
<td><?php echo
$zvijezde[$i]; ?></td>
</tr>
<?php } ?>
</table>

Dodavanje podprograma
● Velike stranice se mogu razbiti u manje blokove
i dijelovi u itavati po potrebič
● include()
● include_once()
● require()
● require_once()
konfiguracija.php
<?php
$ime='Stipe';
$ipBaze='127.0.0.1';
echo “TVZ”;
?>
program.php
<?php
echo $ime.$ipBaze; // neće ispisati ništa
include('konfiguracija.php'); // ispisuje TVZ
echo $ime.$ipBaze; // Stipe127.0.0.1
?>

Idu e predavanjeć
● JavaScript
● osnove
● DOM
● events
● preporu eno pogledati:č
● w3schools

[TVZ Računarstvo] Dinamičke web aplikacije, predavanje 3.

Recommended

Recommended

More Related Content

More from Stipe Predanic

More from Stipe Predanic (20)

[TVZ Računarstvo] Dinamičke web aplikacije, predavanje 3.

Editor's Notes