1

Tehnologije za podrku
tehnikom pisanju
dr. Edin Pjani, docent

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Pregled predavanja

Maine i raunari

raunari programi i podaci

HTML

osnovni pojmovi
struktura dokumenta
osnovni tagovi za formatiranje teksta
atributi

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Maine

Nekada davno... maine nisu postojale :)

Maine su se "pojavile" zbog potrebe za brim,
jeftinijim i tanijim obavljanjem nekog posla

proizvodnja, raunanje, razne usluge...

Mainama na neki nain treba:

zadati radne zadatke (komande, program, ...),

dopremiti sirovinu (repromaterijal, podaci, ...),
obezbijediti preuzimanje gotovog proizvoda (ako postoji).

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Primjeri maina

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Raunar (kompjuter)

Raunar opte namjene nastao je razvojem maina za

raunanje. Raunar je i dalje samo maina (ovo treba
upamtiti i po potrebi se prisjeati).
Razumije samo binarne podatke (10010100 01110101
10110010 10110010 00111001 00110101 00101100) =>
numerike podatke.
Raunarski program lista komandi (instrukcija) za
izvravanje odgovarajuih aritmetiko-logikih i drugih
operacija sa ciljem obavljanja nekog zadatka.
Podaci problem zapisivanja nenumerikih podataka
(tekst, zvuk, slika, ...): rjeenje kodiranje u
odgovarajui numeriki ekvivalent (ASCII, ...).

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Neke osobine raunara

Samo izvrava program koji je upisan u njegovu

programsku memoriju i "pametan" je onoliko koliko
je pametan program.
"Prepoznaje" podatke za koje je programiran da
"prepoznaje".

U sutini, podatke prepoznaje program a ne raunar

(sjetimo se raunar je samo maina).

Obrauje podatke na nain na koji je programiran.

Raunari opte namjene (veina dananjih
raunara) izvrava programe za razliitu namjenu:

operativni sistemi, pomoni sistemski programi,

upravljanje raznim procesima, obrada slike, zvuka,
videa, teksta, igre, virusi i ostala gamad...

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Raunarski program i podaci

Podaci se za trajnije uvanje obino smjetaju

(snimaju) na neki medij (traka, disk, ...).
Da bi program ispravno interpretirao podatke
moraju mu biti ponueni u odgovarajuem obliku
(formatu), tj. onako kako je predvieno
raunarskim programom.
Ako programu ponudimo podatke u obliku u kojem
mu nisu prepoznatljivi pogreno e ih interpretirati.

Probajte neku sliku (.gif, .jpg i sl.) otvoriti u nekom

editoru teksta (Notepad, Vim, i sl.)

Fakultet Eletktrotehnike

Univerzitet u Tuzli

HTML Hypertext Markup Language

Opisni jezik za hipertekstne dokumente (Web stranice).

Hipertekst omoguava nesekvencijalni, dinamiki redoslijed

itanja dokumenata (hiperlinkovi).

HTML je osmislio Tim Barners-Lee 1991. godine, institut

CERN, eneva

cilj je bio osmisliti jednostavan nain za prenos i pregled

naunih podataka
World Wide Web (W3) projekat.

HTML dokumenti se prenose

raunarskom mreom
putem HTTP protokola.

Fakultet Eletktrotehnike

Univerzitet u Tuzli

HTML - verzije

Verzije:

HTML - 1993. god.

HTML 2.0 1995. god.
HTML 3 1995. god.
HTML 3.2 1997. god.
HTML 4.0 1997. god.
HTML 4.01 1999. god. (danas u upotrebi)
HTML5 2008 (draft), 2014? (recommendation)
mnogi Web preglednici ga ve odavno djelimino
podravaju

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Podrka za HTML5

Fakultet Eletktrotehnike

10

Univerzitet u Tuzli

HTML Hypertext Markup Language

Opisni jezik za hipertekstne dokumente (Web stranice).

Chromium, Firefox, Opera, Internet Explorer, ...

HTML dokumenti su obini tekstualni dokumenti sa

ekstenzijom:

Hipertekst omoguava nesekvencijalni, dinamiki redoslijed

itanja dokumenata (hiperlinkovi).

HTML dokumenti se pregledaju u tzv. Web pregledniku

(browser):

11

.htm ili .html

Osnovna gradivna jedinica HTML dokumenta je tag

(oznaka):

opisuje kako e se neki element prikazati

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Prikaz Web (HTML) dokumenta

HTML fajl (dokument), sadri tekst i skup oznaka koje

opisuju na koji nain preglednik HTML dokumenata
(Web preglednik) treba da prikae taj dokument na
ekranu ili nekom drugom grafikom mediju.

HTML
(fajl)

12

Web preglednik
(program)

Dakle, kad piemo HTML dokument cilj nam je da Web

preglednik prikae dokument onako kako mi to elimo.

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Kreiranje HTML dokumenta

13

Moemo koristiti neki komercijalni specijalizirani

softver (WYSIWYG) i sl.
Moemo koristiti bilo koji besplatni editor teksta:

Notepad
Notepad++
Vim
SciTE
TextMate
gedit
Geany
bilo koji drugi

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Koraci pri izradi HTML dokumenta

14

Pri izradi HTML dokumenta prolazimo redom kroz

sljedee korake:
1. Potreba za izradom
2. Odluka o sadraju i dizajnu
3. Pisanje HTML koda u nekom editoru teksta
4. Provjera izgleda napisanog HTML dokumenta u Web
pregledniku, po mogunosti vie razliitih verzija
5. Ako nismo zadovoljni konanim izgledom, idemo na
korak 3
6. ivimo sretno do kraja ivota.
Fakultet Eletktrotehnike

Univerzitet u Tuzli

Osnovni pojmovi

HTML tag (HTML oznaka)

15

opisuje kako e se neki element prikazati

odgovarajua kljuna rije (ime taga) se zadaje (pie) izmeu
znakova < >, kao npr. <P> </P> <BR>
Mogu se zadati velikim i/ili malim slovima.
Tagovi obino idu u parovima kao npr. <b> i </b>. U tom
sluaju opisuju izgled podruja izmeu tih tagova (poetnog i
krajnjeg).
Postoje i tagovi koji nemaju krajnjeg taga. Njima se obino
ubacuje odreeni element, kao npr. <hr>.

Web preglednik interpretira tagove i ostali sadraj slijeva nadesno

i odozgo nadole.

Web preglednik ne prikazuje tagove nego ih koristi da

inerpretira sadraj Web stranice.
W3C preporuuje koritenje malih slova za pisanje tagova.

Fakultet Eletktrotehnike

Univerzitet u Tuzli

Srtruktura HTML dokumenta

16

HTML dokument

<html>
<head>
</head>

Zaglavlje podaci o dokumentu

(naslov, kljune rijei, autor, skripte...)

<body>
Tijelo opis sadraja dokumenta
(Web stranice)

Fakultet Eletktrotehnike

</body>
</html>

Univerzitet u Tuzli

HTML dokument - primjeri

17

<html>
<body>
Ovo je moja prva Web stranica.
</body>
</html>

<html>
<head>
<title>Naslov stranice</title>
</head>
<body>
Ovo je moja prva Web stranica.
</body>
</html>
Fakultet Eletktrotehnike

Univerzitet u Tuzli

Rad sa tekstom

h1, h2, h3, h4, h5, h6

18

specificiranje naslova. h1 je naslov najvieg nivoa a h6

najmanjeg

p paragraf (pasus)
br prelazak u novi red
b podebljano (bold)
i zakoeno (italic)
u podvueno (underline)
pre preformatirani tekst (fiksne irine)

Fakultet Eletktrotehnike

Univerzitet u Tuzli

HTML dokument primjer 2

19

<html>
<head>
<title>Moja stranica</title>
</head>
<body>
<h1>Naslov</h1>
<h2>Malo manji naslov</h2>
<p>Ovo je reenica u prvom paragrafu.
Ovo je <u>druga <b>reenica</b></u> u istom paragrafu i u
istom redu.
</p>
<pre>
Ovo je reenica u preformatiranom tekstu.
Ovo je druga reenica u preformatiranom tekstu.
</pre>
<h6> Najmanji naslov </h6>
<p> Reenica u posljednjem paragrafu,<br/>
u kojem <b>imamo</b> prelaz u naredni red.
</p>
</body>
</html>
Fakultet Eletktrotehnike

Univerzitet u Tuzli

Atributi tagova

Unutar veine tagova mogue je koristiti

odgovarajue atribute
Atributi mijenjaju predefinisane (defaultne)
vrijednosti tagova.
Navode se unutar taga u formatu:

20

<tag atribut="vrijednost atributa">

Primjer: <p align="center">
Mogue je navesti vie atributa unutar jednog taga.

Za tag p: atribut align moe imati vrijednosti:

left, right, center i justify

Fakultet Eletktrotehnike

Univerzitet u Tuzli

HTML dokument primjer 3

21

<html>
<head>
<title>Moja stranica</title>
</head>
<body>
<h1>Naslov</h1>
<h2>Malo manji naslov</h2>
<p>Ovo je reenica u prvom paragrafu.
Ovo je <u>druga <b>reenica</b></u> u istom paragrafu i u
istom redu.
</p>
<pre>
Ovo je reenica u preformatiranom tekstu.
Ovo je druga reenica u preformatiranom tekstu.
</pre>
<h6> Najmanji naslov </h6>
<p align="right"> Reenica u posljednjem paragrafu,<br/>
u kojem <b>imamo</b> prelaz u naredni red.
</p>
</body>
</html>ds
Fakultet Eletktrotehnike

Univerzitet u Tuzli

Atributi za BODY tag

22

atribut
alink

vrijednost

opis

boja

boja aktivnog linka

background

URL

slika pozadine

bgcolor

boja

boja pozadine

link

boja

boja neposjeenog linka

text

boja

boja teksta u dokumentu

vlink

boja

boja posjeenog linka

Svi gornji atributi se ne koriste u HTML5.

Boja moe biti zadana:
imenom (red, white, grey, purple, ...) - pogledati na
http://www.w3schools.com/html/html_colornames.asp
u heksadekadnom broju u formatu #RRGGBB (#FF0000, #555555, #A032C4, ...)

Fakultet Eletktrotehnike

Univerzitet u Tuzli