HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su...
Transcript of HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su...
![Page 1: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/1.jpg)
HTML
(prvi deo)
![Page 2: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/2.jpg)
Oblikovanje web stranica pomocu HTML-a
HTML je kratica za Hyper Text Markup Language.
Datoteka napisana pomocu HTMLa je obicna tekstualna datoteka
koja u sebi sadrži oznake (engl. markup tags), koje kažu web
pregledniku (engl. browser) kako treba prikazati stranicu.
HTML dokument mora imati .htm ili .html ekstenziju.
OSNOVE IZRADE WEB STRANICA
![Page 3: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/3.jpg)
Pocetkom 90-ih godina prošlog stoljeca Tim Berners-Lee fizicar zaposlen u
CERN-u
(Geneve) razvio je HTML,
1995. razvija standard HTML 2.0 kako bi se uobličile već usvojena praksa
izrade stranica. HTML+ (1993) i HTML 3.0
(1995) su predlagali širu verziju HTMLa. Unatoc teškoćama pri dobivanju
konsenzusa za standard,
1997. godine World Wide Web Consortium donosi novi standard koji je usvojio
uobicejenu praksu kod izrade web stanica i tako je nastao HTML 3.2. standard.
Takoder, novi standard omogucava da dodaci mogu biti smješteni van HTML
dokumenta u posebnoj datoteci koja se poziva iz HTML dokumenta.
Standard HTML 4.1. unosi neke manje dopune i ispravke, te pravila koja
omogucavaju lakši prelazak na XHTML (eXtended Hyper Text Markup
Language) 1.0. standard.
Upotrebom HTML 4.01 standarda buduce unaprijedivanje iz HTML u XHTML
(HTML reformuliran kao XML aplikacija) standard postaje vrlo jednostavan
postupak.2
Kratka istorija HTML-a
![Page 4: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/4.jpg)
HTML editori
Za izradu web stranica danas postoji niz HTML editora od kojih su
najpoznatiji
1. Microsoft FrontPage
2. Macromedia Dreamweaver.
Medutim, sve što je potrebno za izradu stranice je obican tekst
editor kao na primjer Notepad
![Page 5: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/5.jpg)
Struktura HTML dokumenta
HTML dokument je tekstualna datoteka koja se sastoji od HTML elemenata, koji su
definirani pomocu HTML oznaka (engl. tag). Svaki HTML dokument ima svoju strukturu.
Najjednostavniji HTML dokument izgledao bi ovako:
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
Ovo je primjer najednostavnije Web stranice.
</body>
</html>
Primjer 1.
![Page 6: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/6.jpg)
Ovako prva.htm izgleda u brovseru:
Slika 1. Izgled datoteke prva.htm u web brovseru
![Page 7: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/7.jpg)
HTML elementi
Nadopunit cemo datoteku iz Primjera 1 s još jednim HTML elementom.
<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
Ovo je primjer najednostavnije Web stranice.
<b>Ovaj tekst je podebljan.</b>
</body>
</html>
Primjer 2.
![Page 8: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/8.jpg)
Ovaj html dokument u brovseru bi izgledao ovako:
Naslov stranice
<title>...</title>
Naziv dokumenta
Tijelo dokumenta <body>...</body>
Podebljani tekst
<b>...</b>
Slika 2. Izgled datoteke druga.htm u web brovseru
![Page 9: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/9.jpg)
Osnovne HTML oznake
Oznaka Opis
<html> Definiše HTML dokument
<body> Definiše tijelo dokumenta
<h1> to <h6> Definiše velicinu naslova
<p> Paragraf
<br> Prelazak u novi red
<hr> Horizontalna crta
<!--> Komentar
![Page 10: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/10.jpg)
Oznaka <html>
Sav sadržaj HTML dokumenta, izuzev deklaracije tipa dokumenta mora se naci unutar
oznaka <html>.... </html>.
Oznaka <head>
Nakon oznake <html> slijedi zaglavlje koje pocinje oznakom <head> i završava
oznakom </head>. Unutar oznaka za zaglavlje obicno se stavlja naslov stranice i meta
podaci4.
Oznaka <title>
Tekst koji se nalazi izmedu oznaka <title> i </title> pojavit ce se u naslovu web
preglednika. Ovaj tekst nije moguce formatirati i piše se uvijek unutar zaglavlja.
Oznaka <body>
Unutar oznaka <body> i </body> nalazi se tijelo html dokumenta. Otvara se nakon
oznake </head> i zatvara prije oznake </html>.
Oznake <h1> do <h6>
Gotovo svaki dokument je podijeljen na blokove teksta. Za dobru organizaciju teksta
potrebno je imati i razlicite velicine naslova. U HTML-u naslovi (engl. heading) su
definirani u 6 razina od <h1> do <h6>. HTML prije i nakon oznake naslova dodaje jedan
prazan red.
![Page 11: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/11.jpg)
Formatiranje teksta
Oznake za formatiranje
Oznaka Opis
<b> Podebljana slova
<big> Velika slova
<em> Naglašeni tekst
<i> Iskošeni tekst
<small> Mala slova
<strong> Podebljana slova
<sub> Tekst u indeksu (subscript)
<sup> Tekst u potenciji (superscript)
<ins> Ubaceni tekst
<del> «Brisani» tekst
<s> Zastarjelo. Bolje koristiti <del>
<strike> Zastarjelo. Bolje koristiti <del>
<u> Zastarjelo. Bolje koristiti neki stil.
![Page 12: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/12.jpg)
Oznake za formatiranje teksta dijele se na logicke i fizicke stilove. U fizicke spadaju
oznake npr. <b>, <i>, <u>, <tt>, <s>, dok u logicke spadaju oznake npr. <em>, <strong>,
<code>,
<samp>, <kbd>, <var>, <dfn>, <cite>, <address>.
<html>
<head>
<title>Formatiranje</title>
</head>
<body>
<b>Podebljani tekst</b>
<br><strong>Pojacano naglašeni tekst -strong</strong>
<br><big>Velika slova -big</big>
<br><em>Naglašeni tekst -em</em>
<br><i>Iskošeni tekst</i>
<br><small>Mala slova -small</small>
<br>Ovaj tekst sadrži<sub>subscript</sub>
<br>Ovaj tekst sadrži<sup>superscript</sup>
<br>Ovako izgleda <ins>ubaceni tekst</ins>
<br>Ovako izgleda naglašavanje <del>brisanog teksta</del>
</body>
![Page 13: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/13.jpg)
HTML – Osnove1/2
• HTML (HyperText Markup Language).
• HTML dokument je datoteka sa tekstom i tagovima.
• Tagovi:
– definišu strukturu i izgled dokumenta
– otvarajući tag: <ime_elementa>
– zatvarajući tag: </ime_elementa>
– postoje i prazni tagovi: <ime_elementa>(pravilnije: <ime_elementa />)
![Page 14: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/14.jpg)
HTML – Osnove2/2
• Osim imena HTML elementa, tag čini i određeni broj atributa, čije su vrednosti uokvirene navodnicima:<img src=“slika.gif”>
• Tag govori browser-u šta da uradi, a atribut kako da to uradi.
• Razlika između malih i velikih slova ne postoji (title = Title = tiTLe).
• Pri prikazivanju stranica browser-i se oslanjaju na informacije date u tagovima.
• Više whitespace-ova se svodi na jedan (enteri, razmaci,tabovi).
![Page 15: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/15.jpg)
Struktura HTML dokumenta1/2
• Tagovi koji opisuju osnovnu strukturu
HTML dokumenta:
– html,
– head i
– body.
![Page 16: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/16.jpg)
Struktura HTML dokumenta2/2
• Tag <html> je okvir u kom se nalaze svi ostali tagovi– HTML dokument uvek počinje tagom <html>, a
završava se tagom </html>.
• Tag <head> uokviruje zaglavlje u kom se nalaze informacije o samom dokumentu (naslov, opis, ključne reči, ime autora, itd.); opcion je.
• Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice, nalazi se u telu dokumenta koje uokviruje element <body>– u dokumentu sme da postoji samo jedan par tagova
<body></body>.
![Page 17: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/17.jpg)
HEAD
• Browser ne prikazuje informacije koje se
nalaze između tagova <head> i </head>,
osim sadržaja taga <title>.
• Sadržaj taga <title> je naslov HTML
dokumenta koji će se pojaviti u naslovnoj
liniji web čitača.
![Page 18: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/18.jpg)
BODY
• Ovaj element specificira glavni sadržaj
dokumenta
• Početni tag <body> ima atribute koji
omogućavaju da se specificiraju karakteristike
dokumenta (boja pozadine ili slika, boja teksta,
boja posećenih i neposećenih linkova, akcije
koje se izvršavaju kada se dokument učita, ili
ako se ne učita iz nekog razloga, itd.)
![Page 19: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/19.jpg)
Primer
<html>
<head>
<title>Naslov</title>
</head>
<body>
Tekst dokumenta.
</body>
</html>
![Page 20: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/20.jpg)
Primer
![Page 21: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/21.jpg)
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 -->.
![Page 22: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/22.jpg)
Obrada teksta1/7
• Pasusi teksta se navode između <p> tagova.
• 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>.
![Page 23: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/23.jpg)
Obrada teksta 2/7
• 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 sledećih: left, center, right i
justify.
• Ukoliko se navede samo početni tag <p>,
podrazumeva se da je sledeći element u novom
redu.
![Page 24: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/24.jpg)
Primer
<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>
![Page 25: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/25.jpg)
Primer
![Page 26: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/26.jpg)
Obrada teksta 3/7
• Naslovi se mogu istaći korišćenjem elemenata h1, h2, h3, h4, h5 i h6.
• Tag h1 daje najveću veličinu slova, a h6najmanju.
• 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 sledećih: left, center, right.
![Page 27: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/27.jpg)
Primer
<html>
<head>
<title>Velicina slova</title>
</head>
<body>
<h1>Ovo je velicina slova u zaglavlju H1</h1>
<h2>Ovo je velicina slova u zaglavlju H2</h2>
<h3>Ovo je velicina slova u zaglavlju H3</h3>
<h4>Ovo je velicina slova u zaglavlju H4</h4>
<h5>Ovo je velicina slova u zaglavlju H5</h5>
<h6>Ovo je velicina slova u zaglavlju H6</h6>
</body>
</html>
![Page 28: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/28.jpg)
Primer
![Page 29: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/29.jpg)
Obrada teksta 4/7
• Za grubo razdvajanje teksta koristi se prazan tag <hr>.
• On dodaje jednu horizontalnu liniju ispred i iza koje postoji prazan red.
• Moguće je podesiti visinu korišćenjem atributa size=n (n je broj piksela), širinu pomoću atributa width=n i poravnanje pomoću atributa align (moguće vrednosti su left, right i center).
![Page 30: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/30.jpg)
Obrada teksta 5/7
• Tag blockquote služi za veće blokove citata– obično se predstavlja kao blok teksta uvučen u
odnosu na ostatak.
• Tag cite se koristi za kraće 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)– služi za prikaz listinga programa.
![Page 31: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/31.jpg)
Primer
<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>
![Page 32: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/32.jpg)
Primer
![Page 33: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/33.jpg)
Obrada teksta 6/7
• Ukoliko treba promeniti sam izgled teksta, koriste se sledeći elementi:– b - za podebljan tekst,
– i - za iskošen (italik) tekst,
– u - za podvučen tekst,
– big - daje veći font za 1 od zadatog,
– small - daje manji font za 1 od zadatog,
– blink - daje tekst koji treperi.
![Page 34: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/34.jpg)
Obrada teksta 7/7
• Tag <font> omogućava da se menja boja, veličina i vrsta fonta; sav tekst između početnog i završnog taga biće 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.
![Page 35: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/35.jpg)
Primer<html>
<head><title>Karakteristike teksta</title>
</head><body>
<p>Sledeci tekst ce prikazati upotrebu atributa za menjanje karakteristika teksta:</p><p><b>Ovo je podebljan tekst.</b></p><p><i>Ovo je iskosen tekst.</i></p><p><u>Ovo je podvucen tekst.</u></p><p>Ovo su slova uobicajene velicine, <big>a ovo su slova za jedan veca od uobicajenih.</big></p><p>Ovo su slova uobicajene velicine, <small>a ovo su slova za jedan manja od uobicajenih.</small></p><p><font color="red" size="10">Ovo je tekst crvene boje, slova su velicine 10.</font></p>
</body></html>
![Page 36: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/36.jpg)
Primer
![Page 37: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/37.jpg)
Liste1/3
• Postoje tri vrste lista:
– unordered (neoznačena) lista,
– ordered (brojna) lista i
– definiciona lista.
• Neoznačena lista predstavlja spisak elemenata ispred kojih se nalazi bullet.
• Neoznačena lista počinje tagom <ul>(Unordered List)
• Elementi liste se označavaju tagom <li> (List Item).
![Page 38: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/38.jpg)
Liste2/3
• Ako se umesto taga <ul> koristi element <ol>, dobija se brojna lista (Ordered List), odnosno spisak elemenata sa rednim brojevima.
• Početni broj liste se može zadati atributom start.
• Svakom elementu se može dodeliti poseban broj, pomoću atributa value u tagu <li>.
![Page 39: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/39.jpg)
Primer
<html>
<head>
<title>Uredjena lista</title>
</head>
<body>
<p>Ovo je primer uredjene liste:</p>
<ol start=“3">
<li>Voce:
<ul>
<li>jabuka</li>
<li>kruska</li>
<li>jagoda</li>
</ul>
</li>
<li>Povrce:
<ul>
<li>paprika</li>
<li>kupus</li>
<li>paradajz</li>
</ul>
</li>
</ol>
</body>
</html>
![Page 40: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/40.jpg)
Primer
![Page 41: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/41.jpg)
Liste3/3
• Unutar taga <dl> i </dl> nalazi se definiciona lista.
• Svaka stavka liste počinje tagom <dt> i </dt>.
• Ispod stavke se nalazi definicija, unutar tagova <dd> i </dd>.
• Primer:<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>
![Page 42: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/42.jpg)
Slike1/2
• Tag img definiše sliku koja će 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.
![Page 43: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/43.jpg)
Slike2/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.
![Page 44: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/44.jpg)
Primer
<html>
<head>
<title>Slike</title>
</head>
<body>
<img src="E:\nastava\web programiranje\html\slika.gif" border="3" alt="snoopy">
<br>
<img src="E:\nastava\web programiranje\html\slika.gif" height="180" width="120" alt="snoopy" align="bottom">
<br/>
<img src="E:\nastava\web programiranje\html\slika.gif" alt="snoopy">
</body>
</html>
![Page 45: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/45.jpg)
Primer
![Page 46: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/46.jpg)
Linkovi
• Doovde Linkovi predstavljaju mogućnost
da se klikom mišem pređe sa jednog
dokumenta na drugi.
• Linkovi mogu da ukazuju na:
– drugi dokument,
– drugi deo unutar dokumenta,
– bilo koji resurs (ne obavezno HTML datoteka).
![Page 47: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/47.jpg)
URI, URL
• Odredišni objekat se identifikuje uz pomoć
mehanizma URI.
• URI (Uniform Resource Identifiers) –
služi za identifikaciju nekog resursa.
• URL (Uniform Resource Locator)
– podskup URI,
– služi za lociranje nekog resursa na Internetu,
– oblik:
protokol://računar:port/putanja/datoteka
![Page 48: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/48.jpg)
Apsolutni i relativni linkovi
<html>
<head>
</head>
<body>
<h1>Linkovi</h1>
<p>
Ovaj primer sadrži <a href="primer09.html">link</a> sa relativnom
putanjom na prethodni primer.
</p>
<p>
Ovaj primer sadrži <a href="http://www.google.com">link</a> sa apsolutnom
putanjom na Google.
</p>
</body>
</html>
![Page 49: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/49.jpg)
Relativni link na deo dokumenta
<html>
<head>
</head>
<body >
<h1>Označavanje delova dokumenata</h1>
<p>
<a name="prvi">Ovaj pasus obeležen je imenom <b>prvi</b>.</a>
Ovo je <a href="#drugi">link</a> na drugi deo.
</p>
<p>
<a name="drugi">Ovaj pasus obeležen je imenom <b>drugi.</a>
Ovo je <a href="#prvi">link</a> na prvi deo.
</p>
</body>
</html>
![Page 50: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/50.jpg)
Mapa sa slikama
• Tag <map> definiše geometrijske zone na slici koje će predstavljati linkove.
• Atribut usemap u img tagu određuje putanju do opisa zona (do <map> taga).
• Definicija oblasti:– <area shape="poly" alt="poligon" coords="395,145,
322,91, 393,32" href="primer01.html">
– <area shape="rect" alt="pravougaonik" coords="51,119, 135,191" href="primer02.html">
– <area shape="circle" alt="krug" coords="277,165,76" href="primer03.html">
![Page 51: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/51.jpg)
Primer
<html>
<head>
</head>
<body>
<p>
Delovi slike predstavljaju linkove. Pronađite ih.
</p>
<p>
<img src="pic.gif" height="300" width="400" border="0" usemap="#mapa">
</p>
<map name="mapa">
<area shape="poly" alt="poligon" coords="395,145, 322,91, 393,32“href="primer01.html">
<area shape="rect" alt="pravougaonik" coords="51,119, 135,191“href="primer02.html">
<area shape="circle" alt="krug" coords="277,165,76" href="primer03.html">
</map>
</body>
</html>
![Page 52: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/52.jpg)
Dodatni atributi body taga
• Atribut bgcolor boji pozadinu stranice.
• Atribut link definiše boju linka.
• Atrigut vlink definiše boju posećenog linka.
• Atribut alink definiše boju aktivnog
(selektovanog) linka.
• Atribut background definiše putanju do
pozadinske slike.
![Page 53: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/53.jpg)
Primer
<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>
![Page 54: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/54.jpg)
Primer
<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>
![Page 55: HTML (prvi deo)HTML editori Za izradu web stranica danas postoji niz HTML editora od kojih su najpoznatiji 1. Microsoft FrontPage 2. Macromedia Dreamweaver. Medutim, sve što je potrebno](https://reader036.fdocuments.net/reader036/viewer/2022071212/6024a607d13d9459d219ef09/html5/thumbnails/55.jpg)
Primer