- OSNOVE -
Tehnologije za izradu Web stranica
− HTML
− CSS
− JavaScript
− PHP
− ASP
− MySQL
− Adobe FLASH
− AJAX
Šta je to HTML?
− HTML je standardizovan jezik koji se koristi na Web-u.
Koristi se za opisivanje formata Web stranice i njenih
elemenata.
− HTML jezik ne sadrži podatke, ved definiše način na
koji se podaci prikazuju na Web stranicama.
− HTML je matični jezik Web pretraživača.
− Razvijen je 1990. godine od strane naučnika Cern-a,
pod vođstvom Tim Berners-Lee.
Primer: Google stranica
Izgled Google stranice u HTML jeziku
Alati za izradu Web stranica
Grafički orijentisani HTML editori koji omogudavaju korisnicima kreiranje
Web stranica bez potrebe poznavanja HTML –a i drugih Web-jezika:
• Microsoft
– FrontPage
– Exspression Web
• Macromedia
– HomeSite
– DreamWeaver
• Adobe
– PageMill
• Open source
– Quanta Plus
– Mozilla Composer
–…
HTML – START
Alati koji su vam potrebni za izradu Web sajta u
HTML jeziku:
− Neki od Web browser-a (Microsoft
Opera, Mozilla Firefox ...)
Internet Explorer,
− Jednostavan Text Editor (Notepad - iz Windows-a ili
Notepad ++ koga možete preuzeti sa Interneta i instalirati
na vaš računar).
Notepad - Start Meni/All Programs/Accessories ...
Notepad ++ možete preuzeti sa Interneta i instalirati na
vaš računar (http://notepad-plus-plus.org/download).
HTML osnove - 1
• HTML (HyperText Markup Language).
• HTML datoteka se sastoji od tagova i tekstova.
• Tagovi (oznake):
− definišu strukturu i izgled dokumenta
− otvarajudi tag: <ime_elementa>
− zatvarajudi tag: </ime_elementa>
− postoje i prazni tagovi: <ime_elementa>
(pravilnije: <ime_elementa />)
XHTML (Extensible HyperText Mark-up Language)
struktuiraniji način pisanja HTML.
HTML osnove - 2
Osim imena HTML elementa, tag čini i određeni broj
atributa, čije su vrednosti uokvirene navodnicima:
<img src="slika.gif">
Ime
Atribut
Vrednost atributa
Ime taga govori browser-u šta da uradi, a atribut kako da
to uradi.
Pri prikazivanju stranica browser-i se oslanjaju na
informacije date u tagovima.
Razlika između malih i velikih slova ne postoji:
(title = Title = tiTLe)
Struktura HTML dokumenta - 1
Osnovna struktura HTML dokumenta:
− html (dokument-stranica)
− head (glava-zaglavlje)
− body (telo)
head (glava-zaglavlje)
body (telo)
html (dokument-stranica)
Struktura HTML dokumenta - 2
Ispravno formatiran HTML dokument ograničen je sa
tagovima:
<html> - početak html dokumenta
</html> - kraj html dokumenta
Unutar ove oznake se nalazi kompletan sadržaj strane,
uključujudi i eventualne skriptove.
Struktura HTML dokumenta - 3
Zaglavlje stranice:
<head> - početak zaglavlja
</head> - kraj zaglavlja
Sadrži informacije koje su specifične za tu stranu.
Tag gde se upisuje naslov strane koji de biti prikazan u
Web pretraživaču:
<title> - početak naslova
</title> - kraj naslova
Struktura HTML dokumenta - 4
Telo stranice:
<body> - početak tela
</body> - kraj tela
U telu html stranice smešta se HMTL kod koji zapravo
predstavlja "pravi" sadržaj strane.
Struktura HTML dokumenta -5
Minimalni HTML dokument:
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
Struktura HTML dokumenta - 6
Minimalni HTML dokument:
Primer 1:
<HTML>
<HEAD>
<TITLE> Ja volim Informatiku! </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Primer 1:
HTML dokument napišite u Notepad-u. Sačuvajte ga u
nekom folderu, sa ekstenzijom .htm.
Otvorite prethodno sačuvan dokument u nekom Web
browser-u:
Primer 1: Izgled stranice
Primer 2:
<html>
<head>
<title>Naslov</title>
</head>
<body>
Tekst dokumenta.
</body>
</html>
Primer 2: Izgled stranice
Komentar
Oblik:
<!-- Ovo je komentar -->
Komentar počinje sekvencom znakova <!-- (između
ovih znakova ne sme da postoji ni jedan razmak), a
završava se sekvencom znakova -->.
Obrada teksta - 1
Pasusi teksta se navode između <p> tagova:
<p> Pasus...
</p>
Svi <p> tagovi počinju u novom redu.
Iza završnog </p> taga, prelazi se u novi red, sa
dodatnim praznim prostorom između.
Ukoliko treba ubaciti praznu liniju bez dodavanja
praznog prostora, koristi se tag <br>.
Obrada teksta - 2
U okviru početnog taga <p> može se navesti atribut
align, koji određuje horizontalno poravnanje paragrafa;
vrednost ovog atributa može biti jedna od slededih:
left, center, right i justify.
Ukoliko se navede samo početni tag <p>, podrazumeva
se da je slededi element u novom redu.
Primer 3: Pasusi
<html>
<head>
<title>Pasusi</title>
</head>
<body>
<p>Ovo je prvi pasus.</p>
<p>Ovo je drugi pasus.</p>
<p>Ovo je treci pasus sa praznim redom.<br></p>
<p align="right">Ovo je pasus koji je desno poravnat.</p>
<p align="center">Ovo je pasus koji je centriran.</p>
</body>
</html>
Primer 3: Izgled stranice
Obrada teksta -3
Naslovi se mogu istadi korišdenjem elemenata h1, h2,
h3, h4, h5 i h6.
Tag <h1> daje najvedu veličinu slova, a <h6> najmanju.
Svaki od ovih elemenata počinje u novom redu, a
browser-i dodaju još malo praznog mesta pre zaglavlja.
U okviru zaglavlja se može navesti atribut align, koji
određuje horizontalno poravnanje zaglavlja. Vrednost
ovog atributa može biti jedna od slededih: left, center,
right.
Primer 4: Tekst
<html>
<head>
<title>Veličina slova</title>
</head>
<body>
<h1>Ovo je veličina slova u zaglavlju H1</h1>
<h2>Ovo je veličina slova u zaglavlju H2</h2>
<h3>Ovo je veličina slova u zaglavlju H3</h3>
<h4>Ovo je veličina slova u zaglavlju H4</h4>
<h5>Ovo je veličina slova u zaglavlju H5</h5>
<h6>Ovo je veličina slova u zaglavlju H6</h6>
</body>
</html>
Primer 4: Izgled stranice
Obrada teksta - 4
Za grubo razdvajanje teksta linijom koristi se prazan
tag <hr>.
On dodaje jednu horizontalnu liniju ispred i iza koje
postoji prazan red.
Mogude je podesiti visinu korišdenjem atributa size=n
(n je broj piksela), širinu pomodu atributa width=n i
poravnanje pomodu atributa align (mogude vrednosti
su left, right i center).
Primer 5: Linije
<HTML>
<HEAD>
<TITLE> Linije </TITLE>
</HEAD>
<BODY>
<HR>
<HR WIDTH=35%>
<HR WIDTH=250 ALIGN=RIGHT>
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=10 COLOR="red">
<HR WIDTH=550 SIZE=3 COLOR="blue">
</BODY>
</HTML>
Primer 5: Izgled stranice
Obrada teksta - 5
Tag <blockquote> služi za vede blokove citata.
Obično se predstavlja kao blok teksta uvučen u odnosu
na ostatak.
Tag <cite> se koristi za krade citate i uglavnom ispisuje
tekst italikom.
Koristi se za citate unutar teksta.
Tag <code> služi za kratke (manje od jednog reda)
listinge (unutar teksta).
Tag <pre> (preformatted) obezbeđuje prikaz teksta
“onako kako je unet” (svi enteri, tab-ovi i razmaci se
prikazuju kako su uneti).
Primer 6: Citati
<html>
<head>
<title>Enter the title of your HTML document here</title>
</head>
<body>
<p>Ovo je tekst koji je levo poravnat.</p>
<blockquote>Ovo je veliki blok citata.</blockquote>
<p>Ovo je treći pasus, unutar kojeg će biti naveden citat.
<cite>Ovo ćemo posmatrati kao citat.</cite>
</p>
</body>
</html>
Primer 6: Izgled stranice
Obrada teksta - 6
Ukoliko treba promeniti sam izgled teksta, koriste se
slededi elementi:
– <b> - za podebljan tekst,
– <i> - za iskošen (italik) tekst,
– <u> - za podvučen tekst,
– <big> - daje vedi font za 1 od zadatog,
– <small> - daje manji font za 1 od zadatog,
– <blink> - daje tekst koji treperi.
Obrada teksta - 7
Tag <font> omogudava da se menja boja, veličina i
vrsta fonta. Sav tekst između početnog i završnog taga
bide prikazan sa specificiranim karakteristikama .
Atributi u okviru početnog taga <font> su:
− face - naziv fonta,
− color - menjanje boje (navodi se ime boje ili
heksadecimalni broj koji predstavlja tu boju na RGB
skali),
− size - menjanje veličine,
− weight - debljina slova.
Primer 7: Tekst
<html>
<head>
<title>Karakteristike teksta</title>
</head>
<body>
<p>Sledeći tekst će prikazati upotrebu atributa za menjanje karakteristika
teksta:</p>
<p><b>Ovo je podebljan tekst.</b></p>
<p><i>Ovo je iskošen tekst.</i></p>
<p><u>Ovo je podvučen tekst.</u></p>
<p>Ovo su slova uobičajene veličine, <big>a ovo su slova za jedan veća od
uobičajenih.</big></p>
<p>Ovo su slova uobičajene veličine, <small>a ovo su slova za jedan manja
od uobičajenih.</small></p>
<p><font face="Arial" color="red" size="10">Ovo je tekst crvene boje, font
je Arial, slova su veličine 10.</font></p>
<HR WIDTH=1000 SIZE=3 COLOR="blue">
<p><font face="Times New Roman" color="green" size="6">Ovo je tekst
zelene boje, font je Times New Roman, slova su veličine 6.</font></p>
</body>
</html>
Primer 7: Izgled stranice
Liste - 1
Liste su potrebne u tekstu kad nešto nabrajamo. Grafičke
liste se prave upotrebom tagova <ul> i <li>.
Primer 8: Liste 1
<HTML>
<head>
<title>Liste1</title>
</head>
<body>
Ovo je moja prva lista:
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>
</body>
</HTML>
Liste - 2
Vrsta oznake bira se atributom type, taga <ul>,
(primer: cirkle, square,...).
Primer 9: Liste 2
<HTML>
<head>
<title>Liste1</title>
</head>
<body>
Ovo je moja prva lista:
<ul type="square">
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ul>
</body>
</HTML>
Liste - 3
Numeričke liste prave se upotrebom tagova <ol> i <li>.
Vrsta numeracije se bira atributom type, taga <ol>,
(primer: 1, a, A, I...).
Primer 10: Liste 3
<HTML>
<head>
<title>Liste1</title>
</head>
<body>
Ovo je moja prva lista:
<ol type="A">
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ol>
</body>
</HTML>
Liste - 4
Start numeracije bira se atributom start, taga <ol>,
(primer: 5, 3, 11, 20...).
Primer 11: Liste 4
<HTML>
<head>
<title>Liste1</title>
</head>
<body>
Ovo je moja prva lista:
<ol type="1" start=5>
<li>text1</li>
<li>text2</li>
<li>text3</li>
</ol>
</body>
</HTML>
Slike - 1
Tag <img> definiše sliku koja de se javiti u HTML
dokumentu.
Atribut src sadrži ime slike koja treba da se nađe u
dokumentu, ili putanju do te slike.
Atribut alt sadrži tekst koji je ispisan na mestu slike,
ukoliko ona nije učitana iz nekog razloga.
Slike - 2
Dimenzije slike se zadaju preko atributa height i width.
Slika može biti poravnata u odnosu na ostatak
dokumenta, a željena vrednost se daje u artibutu align.
Debljina ivice slike se zadaje u atributu border.
Primer 12: Slike
<html>
<head>
<title>Slike</title>
</head>
<body>
<img src ="//D:/My pictures/slika.jpg" border="3" alt="snoopy">
<br>
<img src ="slika.jpg" height="180" width="120" alt="snoopy"
align="bottom">
<br/>
<img src ="//D:/My pictures/slika.jpg" alt="snoopy">
</body>
</html>
Primer 12: Izgled stranice
Dodatni atributi body taga
−
−
−
−
Atribut bgcolor boji pozadinu stranice.
Atribut link definiše boju linka.
Atrigut vlink definiše boju posedenog linka.
Atribut alink definiše boju aktivnog (selektovanog)
linka.
− Atribut background definiše putanju do pozadinske
slike.
Primer 13: Boja pozadine i linkova
<html>
<head>
</head>
<body bgcolor="gray" alink="yellow" vlink="red" link="green">
<h1>Označavanje delova dokumenata</h1>
<p>
Ovaj pasus obeležen je imenom “prvi”.
Ovo je <a href="#drugi">link</a> na <code>drugi</code> deo.
</p>
</body>
</html>
Primer 13: Izgled stranice
Primer 14: Slika za pozadinu
<html>
<head>
</head>
<body background="bgpic.gif">
<h1>Pozadinska slika</h1>
<p>
All of the base tables and views for the database's data
dictionary are stored in the schema SYS. These base tables and
views
are critical for the operation of Oracle...
</p>
</body>
</html>
Primer 14: Izgled stranice
Linkovi (veze) - 1
− Linkovi na Web strani se prave pomodu <a> oznake
(a je skradeno od anchor - sidro).
Atributi ove oznake su:
href - (hyperlink reference) koji označava lokaciju na
koju se preusmerava Web pretraživač kada korisnik
klikne na link. Ne zaboravite "http://" za punu
adresu.
Primer 15: Link 1
<a href="http://www.gimnazijakursumlija.edu.rs/"> Veza
ka zvaničanom sajtu Gimnazije u Kuršumliji </a>
Linkovi (veze) - 3
• Mogu se definisati veze unutara jedne stranice.
• Sve što je potrebno je atribut id (identification) i
simbol "#".
• Id atribut markira element ka linku:
<h1 id="link1">Naslov 1</h1>
• Sada je mogude kreirati link korišdenjem "#" u atributu
veze. "#" mora da bude u paru sa id.
<a href="#link1">Veza ka naslovu 1 </a>
Primer 16: Linkovi
<html>
<head>
<title> Linkovi2 </title
</head>
<body>
<a href="http://www.gimnazijakursumlija.edu.rs/"> Veza ka zvaničanom
sajtu Gimnazije u Kuršumliji </a>
<p><a href="#link1">Veza ka naslovu 1</a></p>
<p><a href="#link2">Veza ka naslovu 2</a></p>
<hr>
<h1 id="link1">Naslov 1</h1>
<p>Text text text text</p>
<h1 id="link2">Naslov 2</h1>
<p>Text text text text</p>
</body>
</html>
Primer 16: Izgled stranice
Tabele - 1
Tabele se obično koriste iz dva razloga u HTML-u. Prvi je
uredjenje podataka tabelarno. Drugi je manje uočljiv ali u
HTML-u mnogo više korišden, a to je dizajniranje Web
stranica korišdenjem nevidljivih tabela.
Gotovo svi sajtovi koriste nevidljive tabele u dizajnu.
Dizajniranje Web stranice tabelama znači podeliti stranicu
na različite delove i u njima smeštati pojedine njene
elemente. Obično ti delovi su zaglavlje, deo za dugmide koji
povezuju stranice Web sajta, polje za pretragu Web-a ili
sajta, polje za glavni deo strane, itd.
Tabele - 2
Osnovni tag tabele je <table>, koji ima početni i krajnji tag. Taj
tag je u stvari onaj naš pravougaonik. U tabelu stavljamo jedan ili
više horizontalnih polja.
Tag horizontalnog polja je <tr>, i ono ima takođe početni i krajnji
tag. U horizontalno polje stavljamo jednu ili više delija.
Ćelija ima tag <td>, a i ona ima početni i krajnji tag.
Linije koja oivičava tabelu pravi se tako što se stavi atribut
border unutar <table> taga.
Primer 17: Tabela 1
<html>
<head>
<title> Tabela1 </title>
</head>
<body>
Sastav ekipa:
<table border=2>
<tr>
<td>Ekipa 1</td>
<td>MARA</td>
<td>ĐOLE</td>
<td>ĐURA</td>
</tr>
<tr>
<td>Ekipa 2</td>
<td>JACA</td>
<td>MARKO</td>
<td>MILE</td>
</tr>
</table>
</body>
</html>
Primer 17: Izgled stranice
Primer 18: Dekorativna HTML tabela
Primer tabele koja služi da rasporedi elemente jedne
Web stranice:
Primer 18: Dekorativna HTML tabela
Izgled tabele koja služi da rasporedi elemente jedne
Web stranice:
Tag
Opis
<html> ... </html>
Deklariše da je Web stranica pisana u HTML-u
<head> ... </head>
Zaglavlje stranice
<title> ... </title>
Definiše naslov stranice
<body> ... </body>
Ograničava telo stranice
<hn> ... </hn>
Ograničava naslov nivoa n
<b> ... </b>
Zadebljana slova (bold)
<i> ... </i>
Isošena slova italik
<center> ... </center>
Horizontalno centriranje ... na stranici
<ul> ... </ul>
Ograničava neuređenu listu
<ol> ... </ol>
Ograničava uređenu listu
<il> ... </il>
Ograničava stavku uređene liste
<br>
Umede novi red (prelom linije)
<p> …</p>
Ograničava paragraf
<hr>
Umede horizontalnu liniju po celoj dužini strane
<img src = “...“>
Prikazuje sliku
<a href=“...“> ... </a>
Definiše hiperlink
66
HTML Tutorijali
Više o HTML-u možete saznati na slededim
Web stranama:
− http://www.bubaj.com/index.php?html
− http://webarena.rs/html-css
− http://www.w3schools.com/html/default.asp
Download

HTML – osnove