HTML Osnove (1)

8/18/2019 HTML Osnove (1)

http://slidepdf.com/reader/full/html-osnove-1 1/67

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 sarži podatke, ved efiniš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

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



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



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 oređ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 sa

tagovima:

<html> - početak html dokumenta

</html> - kraj html dokumenta

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

Zaglavlje stranice:

<head> - početak zaglavlja

</head> - kraj zaglavlja

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

Telo stranice:

<body> - početak tela

</body> - kraj tela

U telu html stranice smešta se HMTL kod koji zapravo

predstavlja "pravi" sarž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 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>

Komentar

Oblik:



Komentar počinje sekvencom znakova .

Obrada teksta - 1

Pasusi teksta se navode između tagova:

 Pasus... 

Svi tagovi počinju u novom redu.

Iza završnog taga, prelazi se u novi red, sa

dodatnim praznim prostorom između.

Ukoliko treba ubaciti praznu liniju bez dodavanja

praznog prostora, koristi se tag .

Obrada teksta - 2

U okviru početnog taga može se navesti atribut

align, koji oređuje horizontalno poravnanje paragrafa;

vrednost ovog atributa može biti jedna od sleedih:

left, center, right i justify.Ukoliko se navede samo početni tag , podrazumeva

se da je sleedi element u novom redu.

Primer 3: Pasusi

<html>

<head>

<title>Pasusi</title>

</head>

<body>Ovo je prvi pasus.

Ovo je drugi pasus.

Ovo je treci pasus sa praznim redom. 

Ovo je pasus koji je desno poravnat.

Ovo je pasus koji je centriran.</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, koji

oređuje horizontalno poravnanje zaglavlja. Vrednostovog atributa može biti jedna od sleedih: 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 koje

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

Ovo je tekst koji je levo poravnat.<blockquote>Ovo je veliki blok citata.</blockquote>

Ovo je treći pasus, unutar kojeg će biti naveden citat.

<cite>Ovo ćemo posmatrati kao citat.</cite>



</body>

</html>

Obrada teksta - 6

Ukoliko treba promeniti sam izgled teksta, koriste sesleedi elementi:

– - za podebljan tekst,

– - za iskošen (italik) tekst, – - za podvučen tekst,

– <big> - daje vedi font za 1 od zadatog,

– - daje manji font za 1 od zadatog,

– <blink> - daje tekst koji treperi.

Obrada teksta - 7

Tag 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 su:− face - naziv fonta,

− color - menjanje boje (navodi se ime boje iliheksadecimalni broj koji predstavlja tu boju na RGB

skali),

− size - menjanje veličine,

− weight - debljina slova.

P i 7 T k t

Primer 7: Tekst<html>

<head><title>Karakteristike teksta</title>

</head><body>

Sledeći tekst će prikazati upotrebu atributa za menjanje karakteristikateksta:Ovo je podebljan tekst.Ovo je iskošen tekst.Ovo je podvučen tekst.Ovo su slova uobičajene veličine, <big>a ovo su slova za jedan veća oduobičajenih.</big>Ovo su slova uobičajene veličine, a ovo su slova za jedan manjaod uobičajenih.Ovo je tekst crvene boje, font

je Arial, slova su veličine 10.<HR WIDTH=1000 SIZE=3 COLOR="blue">Ovo je tekstzelene boje, font je Times New Roman, slova su veličine 6.

</body></html>




Liste 1

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 - 2Vrsta oznake bira se atributom type, taga <ul>,

(primer: cirkle, square,...).

Primer 9: Liste 2

<HTML>

<head><title>Liste1</title>

</head>

<body>


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


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


<ol type="1" start=5><li>text1</li>

<li>text2</li>

<li>text3</li>

</ol>

</body>

</HTML>

Slike - 1

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

Atribut src sarži ime slike koja treba da se nađe u

dokumentu, ili putanju do te slike.Atribut alt sarž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">

 

<img src ="slika.jpg" height="180" width="120" alt="snoopy"align="bottom">

 

<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 efiniše boju posedenog linka.

− Atribut alink efiniše boju aktivnog (selektovanog)linka.

− Atribut background efiniše putanju o pozainske

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>



Ovaj pasus obeležen je imenom “prvi”.

Ovo je <a href ="#drugi">link</a> na <code>drugi</code> deo.

</body>

</html>

Primer 14: Slika za pozadinu

<html>

<head>

</head>

<body background="bgpic.gif ">

<h1>Pozadinska slika</h1>



All of the base tables and views for the database's data

dictionary are stored in the schema SYS. These base tables andviews

are critical for the operation of Oracle...



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

Primer 16: Linkovi

<html>

<head>

<title> Linkovi2 </title

</head>

<body>

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

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

<a href ="#link2">Veza ka naslovu 2</a>

<hr>


Text text text text


Text text text text

</body>

</html>

Primer 16: Linkovi



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

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 jedne

Web stranice:





Izgled tabele koja služi da rasporedi elemente jedne

Web stranice:

Tag Opis

66

g p

<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

 ... Zadebljana slova (bold)

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

 Umede novi red (prelom linije) … Ograničava paragraf

<hr> Umede horizontalnu liniju po celoj už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 sleedimWeb stranama:

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

http://webarena.rs/html-css

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

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




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

HTML Osnove (1)

Documents

Transcript of HTML Osnove (1)