HTML Osnove (1)

(1)

(2)

-Tehnologije za izradu Web stranica

− HTML − CSS − JavaScript − PHP − ASP − MySQL − Adobe FLASH − AJAX

(3)

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

(4)

(5)

(6)

(7)

Alati za izradu Web stranica

• Microsoft – FrontPage – Exspression Web • Macromedia – HomeSite – DreamWeaver • Adobe – PageMill • Open source – Quanta Plus – Mozilla Composer – …

Grafički orijentisani HTML editori koji omogudavaju korisnicima kreiranje Web stranica bez potrebe poznavanja HTML –a i drugih Web-jezika:

(8)

HTML – START

Alati koji su vam potrebni za izradu Web sajta u HTML jeziku:

− Neki od Web browser-a (Microsoft Internet Explorer,

Opera, Mozilla Firefox ...)

− Jednostavan Text Editor (Notepad - iz Windows-a ili

Notepad ++ koga možete preuzeti sa Interneta i instalirati na vaš računar).

(9)

(10)

Notepad ++ možete preuzeti sa Interneta i instalirati na vaš računar (http://notepad-plus-plus.org/download).

(11)

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.

(12)

HTML osnove - 2

Osim imena HTML elementa, tag čini i određeni broj atributa, čije su vrednosti uokvirene navodnicima:

<

img

src=

"

slika.gif

"

>

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)

(13)

Struktura HTML dokumenta - 1

Osnovna struktura HTML dokumenta:

− html (dokument-stranica)

− head (glava-zaglavlje)

− body (telo)

head (glava-zaglavlje) body (telo) html (dokument-stranica)

(14)

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.

(15)

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

(16)

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.

(17)

Struktura HTML dokumenta -5

<html>

<

head

>

</

head

>

<

body

>

</

body

>

</html>

<head> </head> <body> </body> </html> <html> Minimalni HTML dokument:

(18)

Struktura HTML dokumenta - 6

<HTML>

<HEAD>

<TITLE> Ja volim Informatiku! </TITLE>

</HEAD> <BODY> </BODY> </HTML> Minimalni HTML dokument: Primer 1:

(19)

Primer 1

:

HTML dokument napišite u Notepad-u. Sačuvajte ga u nekom folderu, sa ekstenzijom .htm.

(20)

Otvorite prethodno sačuvan dokument u nekom Web browser-u:

(21)

(22)

Primer 2:

<html>

<head>

<title>Naslov</title>

</head>

<body>

Tekst dokumenta.

</body> </html>

(23)

(24)

Komentar

Oblik:

<!--

Ovo je komentar

-->

Komentar počinje sekvencom znakova .

(25)

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

(26)

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.

(27)

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>

(28)

(29)

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,

(30)

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>

(31)

(32)

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

(33)

Primer 5: Linije

<HTML>

<HEAD>

<TITLE> Linije </TITLE> </HEAD>

<BODY>

<HR>

</BODY>

(34)

(35)

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

(36)

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>

(37)

(38)

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,

(39)

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,

(40)

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>

(41)

(42)

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>

</body> </HTML>

(43)

Liste - 2

Vrsta oznake bira se atributom type, taga <ul>, (primer: cirkle, square,...).

Primer 9: Liste 2

</body> </HTML>

(44)

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

</body> </HTML>

(45)

Liste - 4

Start numeracije bira se atributom start, taga <ol>, (primer: 5, 3, 11, 20...).

Primer 11: Liste 4

</body> </HTML>

(46)

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.

(47)

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

.

(48)

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>

(49)

(50)

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.

(51)

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>

(52)

(53)

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>

(54)

(55)

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

(56)

Primer 15: Link 1

<a href="http://www.gimnazijakursumlija.edu.rs/"> Veza ka zvaničanom sajtu Gimnazije u Kuršumliji </a>

(57)

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.

(58)

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

(59)

(60)

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.

(61)

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.

(62)

Primer 17: Tabela 1

<title> Tabela1 </title> </head> <body> Sastav ekipa: <tableborder=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>

(63)

(64)

Primer 18: Dekorativna HTML tabela

Primer tabele koja služi da rasporedi elemente jedne Web stranice:

(65)

Primer 18: Dekorativna HTML tabela

Izgled tabele koja služi da rasporedi elemente jedne Web stranice:

(66)

66

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

(67)