Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Auditorne vježbe br. 3

Šećerbegović Alma, Hasanović Tea

Fakultet elektrotehnike,
Univerzitet u Tuzli
oktobar, 2014

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 1 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

1 Formatiranje teksta
Atribut align
Tagovi za formatiranje teksta

2 Ostali HTML atributi

Tipovi DTD-a
Šema kodiranja karaktera
Komentar i specijalni karakteri
Body atributi
Tagovi za formatiranje fonta

3 Liste u HTML-u
Tipovi

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 2 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Atribut align

Vrijednosti koje može poprimiti: left, right, center, justify.

Primjer 1

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < title > Moja druga stranica </ title >
5 </ head >
6 < body >
7 < h1 > Omiljene fudbalske ekipe </ h1 >
8 <p > FC Barcelona </ p >
9 <p > AC Milan </ p >
10 <p > Manchester United FC </ p >
11 </ body >
12 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 3 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Atribut align

Vrijednosti koje može poprimiti: left, right, center, justify.

Primjer 1

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < title > Moja druga stranica </ title >
5 </ head >
6 < body >
7 < h1 > Omiljene fudbalske ekipe </ h1 >
8 <p align = " left " > FC Barcelona </ p >
9 <p align = " center " > AC Milan </ p >
10 <p align = " right " > Manchester United FC </ p >
11 </ body >
12 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 4 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Tagovi za formatiranje teksta

1 Strong služi za pooštrenje teksta - <strong>

2 Bold služi za podebljavanje teksta - <b>
3 Italic služi za zakošenje teksta - <i>
4 Emphasize služi za naglašavanje teksta <em>
5 Underline služi za podvučeni tekst - <u>
6 Strike služi za prekriženi tekst - <strike>
7 Monospaced služi za postavljanje jednake širine za svako
slovo unutar teksta - <tt>

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 5 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 2

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < title > Moja druga stranica </ title >
5 </ head >
6 < body >
7 < h1 > Omiljene fudbalske ekipe </ h1 >
8 <p align = " left " > FC Barcelona
9 < br / >
10 < strong > Futbol Club Barcelona </ strong > ( takodjer poznat i pod
nazivom <b > Barcelona </ b > ili jednostavnije <i > Barca </ i >) je
profesionalni nogometni klub smjesten u Barceloni ( < strike >
Katalonija </ strike > <u > Spanjolska </ u >) .
11 </ p >
12 <p align = " center " > < em > AC Milan </ em > </ p >
13 <p align = " right " > < tt > Manchester </ tt > United FC </ p >
14 </ body >
15 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 6 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Deklaracija tipa dokumenta - DTD

Deklaracija tipa dokumenta definira koji elementi i atributi su

validni u HTML dokumentu
<!DOCTYPE> deklaracija ne predstavlja tag, već daje
informaciju Web pregledniku o verziji HTML-a u kojoj je
napisana stranica.
HTML 4.0.1 verzija razlikuje 3 verzije DTD-a:
Strict
Transitional
Frameset
HTML 5

1 <! DOCTYPE html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 7 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Šema kodiranja karaktera

Tag meta se koristi za definiranje šema kodiranja karaktera

Definiše se unutar tag-a head i nema kraja
Primjer 3 bez uključene šeme kodiranja

1 <! DOCTYPE html >

2 < html >
3 < head >
4
5 < title > Moja druga stranica </ title >
6 </ head >
7 < body >
8 < h1 > Omiljene fudbalske ekipe </ h1 >
9 <p align = " left " > FC Barcelona
10 < br / >
11 < strong > Futbol Club Barcelona </ strong > ( tako d er poznat i pod
nazivom <b > Barcelona </ b > ili jednostavnije <i > Barca </ i
>) je profesionalni nogometni klub smje š ten u Barceloni
( < strike > Katalonija </ strike > <u > Spanjolska </ u >) .
12 </ p >
13 <p align = " center " > < em > AC Milan </ em > </ p >
14 <p align = " right " > < tt > Manchester </ tt > United FC </ p >
15 </ body >
16 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 8 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 3

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja druga stranica </ title >
6 </ head >
7 < body >
8 < h1 > Omiljene fudbalske ekipe </ h1 >
9 <p align = " left " > FC Barcelona
10 < br / >
11 < strong > Futbol Club Barcelona </ strong > ( tako d er poznat i pod
nazivom <b > Barcelona </ b > ili jednostavnije <i > Barca </ i >) je
profesionalni nogometni klub smje š ten u Barceloni ( < strike >
Katalonija </ strike > <u > Spanjolska </ u >) .
12 </ p >
13 <p align = " center " > < em > AC Milan </ em > </ p >
14 <p align = " right " > < tt > Manchester </ tt > United FC </ p >
15 </ body >
16 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 9 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Komentar i specijalni karakteri

Komentar predstavlja tekst koji se ne prikazuje na Web stranici

Komentar se kreira sa tagom <! − − i −− >
Specijalni karakteri su simboli koje Web preglednik ne
prikazuje u izvornom obliku
Oni se mogu prikazati korištenjem predefinisanih sekvenci koje
počinju sa & ili &#, a završavaju sa ;

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 10 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 4

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja nova stranica </ title >
6 </ head >
7 < body >
8 < h1 > Specijalni karakteri </ h1 >
9 <p > 100 & euro ; ili 1000 &#8364; ili 2000 &# x20AC ; </ p >
10 <p >I & hearts ; you </ p >
11 <p >I &# x2665 ; &# x2665 ; you more ! </ p >
12 <p > Nema praznog prostora . </ p >
13 <p > Ima & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;! </ p >
14 <p > You are my &#9733; &#9734; </ p >
15 <p > Dusseldorf ili D & uuml ; sseldorf </ p >
16 </ body >
17 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 11 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Body atributi

Atributi
alink - boja aktivnog linka
background - slika pozadine
bgcolor - boja pozadine
link - boja linka koji nije posjećen
text - boja teksta
vlink - boja linka koji je posjećen
Boja - dva načina definisanja (preko heksadekadne notacije ili
predefiniranih imena)

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 12 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjeri 5 i 6

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja nova stranica </ title >
6 </ head >
7 < body background = " http :// photos - h . ak . instagram . com / hphotos - ak - xaf1
/10632306 _ 5 6 3 4 6 4 3 1 7 0 8 7 0 3 1 _ 2 0 7 5 5 8 8 7 9 4 _ n . jpg " >
8 < h1 > Zalazak sunca </ h1 >
9 </ body >
10 </ html >

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja nova stranica </ title >
6 </ head >
7 < body bgcolor =# C0C0C0 >
8 < h1 > Pozadina </ h1 >
9 </ body >
10 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 13 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 7

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja nova stranica </ title >
6 </ head >
7 < body bgcolor = " white " , text = " # FFD1DC " , background = " http :// willfurry . com /
wp - content / uploads /2014/10/ l i g h t _ b l u e _ b a c k g r o u n d _ c o l o r . jpg " >
8 < h1 > Pastel PINK </ h1 >
9 <p > ’ Pastel Gray ’ is a shade of Grey that is 5 % saturated and 81 %
bright . For reference purposes , Pastel Gray has the hex value #
CFCFC4 . </ p >
10 </ body >
11 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 14 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Tagovi za formatiranje fonta

Veličina fonta - <small>, <big>

Relativna veličina fonta (indeksi) - <sub>, <sup>
Dodatne opcije za formatiranje teksta - <mark>, <del>,
<ins>
Tag font <font>
size - veličina fonta
<font size=”+n”>
<font size=”-n”>

face - tip fonta

color - boja fonta

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 15 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 8

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " > < title > Moja nova stranica </ title >
5 </ head >
6 < body bgcolor = " # c0c0c0 " >
7 < h1 > Pastel PINK </ h1 >
8 <p > < font face = " Roboto " , color = " grey " > ’ Pastel Gray ’ is a shade of Grey
that is 5 % saturated and 81 % bright . For reference purposes ,
Pastel Gray has the hex value # CFCFC4 .
9 < br / > < br / > < br / >
10 Roboto has a dual < big > nature </ big >. It has a mechanical < small >
skeleton and the forms are largely geometric . At the same time ,
the font features friendly and open curves </ small >. </ font > </ p >
11 <p > < font face = " Comic Sans MS " , color =# B19CD9 , size = " +4 " > The HTML <
mark > element defines marked or highlighted text </ font > </ p >
12 <p > < font face = " Courier New " , color = " blue " > My favorite color is < del >
blue </ del > </ font >& nbsp ;& nbsp ;& nbsp ; < font color =# FF0000 , face = "
Arial " , size = " +3 " > red . </ font > </ p >
13 <p >E = mc < sup >2 </ sup > </ p >
14 </ body >
15 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 16 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Liste

Razlikujemo tri tipa:

Numerirane - <ul>
Nenumerirane - <ol>
Opisne - <dl>
Svaki element unutar liste počinje i završava sa <li> i </li>
Nenumerirane liste koriste atribut type za definiciju oblika
markera (krug, kvadrat i sl.)
Numerirane liste koriste atribut type za vrijednosti (brojevi,
slova i sl.) i start za definiranje početka liste
Liste definicija koriste dva taga <dt> i <dd>
Liste mogu biti i ugnijezdjene

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 17 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 9

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja nova stranica </ title >
6 </ head >
7 < body bgcolor =# C0C0C0 >
8 < h1 >To - do list </ h1 >
9 < ul > < h3 > Monday 12 th of October </ h3 >
10 < li > Check equipment for the acquisition of the data </ li >
11 < li > Read new research published on topic </ li >
12 < li > Write at least a paragraph based on previous research </ li >
13 < li > Prepare classes for today </ li >
14 < li > Check email and respond </ li >
15 < li > Add new students to existing groups </ li >
16 < li > Be nice ! </ li >
17 < li > Attend teacher ’ s council </ li >
18 < li > Talk to mentor about my research proposal </ li >
19 </ ul >
20 </ body >
21 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 18 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 10

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja nova stranica </ title >
6 </ head >
7 < body bgcolor = " white " >
8 < h1 > < font color = " red " >To - do list </ font > </ h1 >
9 < ol type = " 1 " > < h3 > Monday 12 th of October </ h3 >
10 < li > Check equipment for the acquisition of the data </ li >
11 < li > Attend teacher ’ s council </ li >
12 < li > Talk to mentor about my research proposal </ li >
13 < li > Prepare classes for today </ li >
14 < li > Check email and respond </ li >
15 < li > < font size = " +3 " > Be nice ! </ font > </ li >
16 < li > Add new students to existing groups </ li >
17 < li > Read new research published on topic </ li >
18 < li > Write at least a paragraph based on previous research </ li >
19 </ ol >
20 </ body >
21 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 19 / 20

Sadržaj Formatiranje teksta Ostali HTML atributi Liste u HTML-u

Primjer 11

1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Moja nova stranica </ title >
6 </ head >
7 < body bgcolor = " white " >
8 < h1 > < font color = " red " >To - do list </ font > </ h1 >
9 < dl > < h3 > Monday 12 th of October </ h3 >
10 < dt > < font face = " Roboto " > Equipment check </ font > </ dt >
11 < dd > Go to clinic and check devices for the acquisition of the
data </ dd >
12 < dt > < font face = " Arial " > Teacher council </ font > </ dt >
13 < dd > Try to attend teachers council which starts at 09:45 am </ dd
>
14 < dt > < font face = " Cambria " > Mentor meeting </ font > </ dt >
15 < dd > Talk to mentor about my research proposal before my classes
at 11:00 am </ dd >
16 </ dl >
17 </ body >
18 </ html >

Šećerbegović Alma, Hasanović Tea Auditorne vježbe br. 3 20 / 20