html, xsl, javascript · pdf file- osnove - tehnologije za izradu web stranica

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

− HTML jezik ne sadrži podatke, ved definiše način nakoji 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

• Microsoft

– FrontPage

– Exspression Web

• Macromedia

– HomeSite

– DreamWeaver

• Adobe

– PageMill

• Open source

– Quanta Plus

– Mozilla Composer

– …

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

HTML – START

Alati koji su vam potrebni za izradu Web sajta uHTML jeziku:

− Neki od Web browser-a (Microsoft Internet Explorer,Opera, Mozilla Firefox ...)

− Jednostavan Text Editor (Notepad - iz Windows-a iliNotepad ++ koga možete preuzeti sa Interneta i instaliratina vaš računar).

Notepad - Start Meni/All Programs/Accessories ...

Notepad ++ možete preuzeti sa Interneta i instalirati navaš 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 brojatributa, čije su vrednosti uokvirene navodnicima:

<img src="slika.gif">

Ime taga govori browser-u šta da uradi, a atribut kako dato uradi.

Pri prikazivanju stranica browser-i se oslanjaju nainformacije date u tagovima.

Razlika između malih i velikih slova ne postoji:

(title = Title = tiTLe)

Ime Vrednost atributaAtribut

Struktura HTML dokumenta - 1

Osnovna struktura HTML dokumenta:

− html (dokument-stranica)

− head (glava-zaglavlje)

− body (telo)

head (glava-zaglavlje)

body (telo)

html (dokument-stranica)


Ispravno formatiran HTML dokument ograničen je satagovima:

<html> - početak html dokumenta

</html> - kraj html dokumenta

Unutar ove oznake se nalazi kompletan sadržaj strane,uključujudi i eventualne skriptove.


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 uWeb pretraživaču:

<title> - početak naslova

</title> - kraj naslova


Telo stranice:

<body> - početak tela

</body> - kraj tela

U telu html stranice smešta se HMTL kod koji zapravopredstavlja "pravi" sadržaj strane.

Struktura HTML dokumenta -5

<html>

<head>

</head>

<body>

</body>

</html>

<head>

</head>

<body>

</body>

</html>

<html>

Minimalni HTML dokument:


<HTML>

<HEAD>

<TITLE> Ja volim Informatiku! </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Minimalni HTML dokument:Primer 1:

Primer 1:HTML dokument napišite u Notepad-u. Sačuvajte ga unekom folderu, sa ekstenzijom .htm.

Otvorite prethodno sačuvan dokument u nekom Webbrowser-u:

Primer 1: Izgled stranice

Primer 2:

<html>

<head>

<title>Naslov</title>

</head>

<body>

Tekst dokumenta.

</body>

</html>

Komentar

Oblik:



Komentar počinje 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, sadodatnim praznim prostorom između.

Ukoliko treba ubaciti praznu liniju bez dodavanjapraznog prostora, koristi se tag <br>.

Obrada teksta - 2

U okviru početnog taga <p> može se navesti atributalign, 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>, podrazumevase 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>

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, abrowser-i dodaju još malo praznog mesta pre zaglavlja.

U okviru zaglavlja se može navesti atribut align, kojiodređuje horizontalno poravnanje zaglavlja. Vrednostovog 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>






</body>

</html>

Obrada teksta - 4

Za grubo razdvajanje teksta linijom koristi se prazantag <hr>.

On dodaje jednu horizontalnu liniju ispred i iza kojepostoji prazan red.

Mogude je podesiti visinu korišdenjem atributa size=n(n je broj piksela), širinu pomodu atributa width=n iporavnanje pomodu atributa align (mogude vrednostisu 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>

Obrada teksta - 5

Tag <blockquote> služi za vede blokove citata.

Obično se predstavlja kao blok teksta uvučen u odnosuna ostatak.

Tag <cite> se koristi za krade citate i uglavnom ispisujetekst 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 seprikazuju 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>

Obrada teksta - 6

Ukoliko treba promeniti sam izgled teksta, koriste seslededi 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 ivrsta fonta. Sav tekst između početnog i završnog tagabide 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>

Liste - 1

Liste su potrebne u tekstu kad nešto nabrajamo. Grafičkeliste 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 - 2Vrsta 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">


</ul></body>

</HTML>

Liste - 3Numeričke liste prave se upotrebom tagova <ol> i <li>.Vrsta numeracije se bira atributom type, taga <ol>,(primer: 1, a, A, I...).



</head><body>

Ovo je moja prva lista:<ol type="A">


</ol></body>

</HTML>

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



</head><body>

Ovo je moja prva lista:<ol type="1" start=5>


</ol></body>

</HTML>

Slike - 1

Tag <img> definiše sliku koja de se javiti u HTMLdokumentu.

Atribut src sadrži ime slike koja treba da se nađe udokumentu, 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 ostatakdokumenta, 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>

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

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 nakoju se preusmerava Web pretraživač kada korisnikklikne 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) isimbol "#".

• Id atribut markira element ka linku:

<h1 id="link1">Naslov 1</h1>

• Sada je mogude kreirati link korišdenjem "#" u atributuveze. "#" mora da bude u paru sa id.

<a href="#link1">Veza ka naslovu 1 </a>

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

Tabele - 1

Tabele se obično koriste iz dva razloga u HTML-u. Prvi jeuredjenje podataka tabelarno. Drugi je manje uočljiv ali uHTML-u mnogo više korišden, a to je dizajniranje Webstranica korišdenjem nevidljivih tabela.

Gotovo svi sajtovi koriste nevidljive tabele u dizajnu.Dizajniranje Web stranice tabelama znači podeliti stranicuna različite delove i u njima smeštati pojedine njeneelemente. Obično ti delovi su zaglavlje, deo za dugmide kojipovezuju stranice Web sajta, polje za pretragu Web-a ilisajta, polje za glavni deo strane, itd.

Tabele - 2

Osnovni tag tabele je <table>, koji ima početni i krajnji tag. Tajtag je u stvari onaj naš pravougaonik. U tabelu stavljamo jedan iliviše horizontalnih polja.

Tag horizontalnog polja je <tr>, i ono ima takođe početni i krajnjitag. 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 atributborder 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 18: Dekorativna HTML tabela

Primer tabele koja služi da rasporedi elemente jedneWeb stranice:

Primer 18: Dekorativna HTML tabela

Izgled tabele koja služi da rasporedi elemente jedneWeb stranice:

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

<a href=“...“> ... </a> Definiše hiperlink

HTML Tutorijali

− http://www.bubaj.com/index.php?html

− http://webarena.rs/html-css

− http://www.w3schools.com/html/default.asp

Više o HTML-u možete saznati na slededimWeb stranama:

http://www.bubaj.com/index.php?html

http://webarena.rs/html-css



http://www.w3schools.com/html/default.asp

html, xsl, javascript · pdf file- osnove - tehnologije za izradu web stranica

Documents