WEB programiranje

HTML5 semanticki elementi

Rene Radojcic

Sadraj

1 HTML5 Semanticki elementi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.1 Uvod 51.1.1 Download materijala . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.1.2 to su semanticki elementi? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

1.2 Zadaca semantickih oznaka 5

2 Osnove . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.1 Elementi 72.1.1 Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.2 Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.3 Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1.4 Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.1.5 Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.1.6 Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.1.7 Tablica svih semantickih elemenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 Stranica posvecena MS IE... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

UvodDownload materijalato su semanticki elementi?

Zadaca semantickih oznaka

1 HTML5 Semanticki elementi

1.1 Uvod1.1.1 Download materijala

Materijalima i primjeru web stranice izradene u HTML5 moete pristupiti na adresi:

http://student.fsb.hr/~rr186479/index.html

1.1.2 to su semanticki elementi?Semantika (grcki semantikos, koji daje znakove, znacajan, simptomatican, od sema, znak) se

odnosi na aspekte znacenja koji su izraeni u jeziku, kodu ili nekom drugom oblikupredstavljanja.

Semanticki elementi = elementi sa znacenjem.

1.2 Zadaca semantickih oznakaSemanticke oznake uvode se u novoj inacici HTML-a kako bi olakali definiciju elemenata kojise standardno ponavljaju prilikom izrade web stranice. Kao i to samo ime kae semantickeoznake predstavljaju istovremeno znacenje za covijek i za racunalo.

ElementiElement Element Element Element Element Element Tablica svih semantickih elemenata

2 Osnove

2.1 Elementi

Primjer ne-semantickih elemenata:

1 < d i v > . . . < / d i v >2 . . . < / span >

Primjer semantickih elemenata:

1 < h e a d e r > . . . < / h e a d e r >2 < f o o t e r > . . . < / f o o t e r >

Slika 2.1: Prikaz svih semantickih oznaka i njihove pozicije

Slika 2.1 prikazuje sve standardizirane elemente u HTML5. Definicija vastitih semantickihoznaka je moguca, no kako se HTML5 markup jezik veoma dinamicno razvija i unaprijedujepostoji mogucnost podudaranja buducih standarda/oznaka sa vaim. Te se stoga vlastorucnodefiniranje semantickih oznaka ne preporucuje zbog mogucnosti krive interpretacije web pretra-ivaca.

8 Osnove

2.1.1 Element Element definira odlomak teksta, moe sadravati uzglavlje i podnoje (koje su takoder semanticke oznake).

1 < s e c t i o n >2 Naslov < / h1>3

Ovo j e p a r a g r a f . . . . < / p>4 < / s e c t i o n >

Slika 2.2: Definiranje elementa

2.1.2 Element Clanak (eng. article) je samostalni elemnt koji definira svoj zaseban sadraj. Calanak treba bitisvrsishodan, te moguc za distribuciju neovisno o ostatku web stranice.

1 < a r t i c l e >2 Web p r o g r a m i r a n j e < / h1>3

Svi s t e d o b i l i 5 ! ! ( c r n i humor :D) < / p>4 < / a r t i c l e >

Slika 2.3: Definiranje elementa

Nekoliko primjena za element article: Forum post Komentari Blog post Vijest

2.1.3 Element

Slika 2.4: primjena objekta za izradu navigacijske trake

2.1 Elementi 9

Ovo je element koji definira skup navigacijskih veza (linkova). Namjenjen je velikom brojunavigacijskih blokova. Medutin ne simiju se sve veze nalaziti unutar tog elementa.

1 2 HTML< / a> |3 CSS< / a> |4 J a v a S c r i p t < / a> |5 jQuery < / a>6 < / nav>

Slika 2.5: Definiranje elementa

2.1.4 Element Element koji definira neki sadraj pored npr. clanka (poput sidebar).

1

My f a m i l y and I v i s i t e d The Epcot c e n t e r t h i s summer . < / p>2

3 < a s i d e >4 Epcot C e n t e r < / h4>5

The Epcot C e n t e r i s a theme pa rk i n Disney World , F l o r i d a .

< / p>6 < / a s i d e >

Slika 2.6: Definiranje elementa

2.1.5 Element Element koji je rezerviran za uvodni sadraj ili naslov artikla. Header se moe nalaziti u vieobjekata unutar iste web stranice.

1 < a r t i c l e >2 < h e a d e r >3 I n t e r n e t E x p l o r e r 9< / h1>4

< t ime p u b d a t e d a t e t i m e =" 20110315 ">< / t ime >< / p>5 < / h e a d e r >6

Windows I n t e r n e t E x p l o r e r 9 ( a b b r e v i a t e d as IE9 ) was

r e l e a s e d t o7 t h e p u b l i c on March 14 , 2011 a t 21 :00 PDT . . . . . < / p>8 < / a r t i c l e >

Slika 2.7: Definiranje elementa

10 Osnove

2.1.6 Element Element odreduje podnoje za dokument ili poglavlje. Footer obicno sadri autora dokumenta,autorskim pravima, linkovi sa uvjetima koritenja, kontakt informacije, itd.Moete imati nekoliko elemente u jednom dokumentu.

1 < f o o t e r >2

P o s t e d by : Hege R e f s n e s < / p>3

< t ime p u b d a t e d a t e t i m e =" 20120301 ">< / t ime >< / p>4 < / f o o t e r >

Slika 2.8: Definiranje elementa

2.1.7 Tablica svih semantickih elemenata

Definira clanak Definira sadraj sa strane (sidebar) Odreduje samostalni sadraja, kao to su ilustracije, dijagrami, fotografije, kod oglasi, itd. Definira podnoje za dokumentu ili dijelu Odreduje glavom za dokumentu ili dijelu Definira oznacen / istaknuti tekst Definira navigacijski linkovi Definira odjeljak u dokumentu definira datum / vrijeme

Slika 2.9: Tablica svih semantickih elemenata

3 Stranica posvecena MS IE...

Zbog Internet explorera i njegovog nepodravanja HTML5 u starijim verzijama potrebno je napocetku dokumenta bilo pomocu JavaScripta ili koristeci neki od template-a navesti te elemnte,odnosno, deklarirati da budu block-level elementi.

1 < s c r i p t >2 document . c r e a t e E l e m e n t ( header ) ;3 document . c r e a t e E l e m e n t ( nav ) ;4 document . c r e a t e E l e m e n t ( s e c t i o n ) ;5 document . c r e a t e E l e m e n t ( hgroup ) ;6 document . c r e a t e E l e m e n t ( a s i d e ) ;7 document . c r e a t e E l e m e n t ( f i g u r e ) ;8 document . c r e a t e E l e m e n t ( f o o t e r ) ;9 < / s c r i p t >

Slika 3.1: JavaScript "zakrpa" za Internet Explorer

Drugi nacin je koritenje boilerplate templata koji u sebi sadre sve potrebno kako bi straniceizgledale konzistentno u svim browserima. Jedna zanimljivost je da boilerplate u kodu pronadeda koristite npr. IE6 ili 7 ponudi vam Instalaciju google frame koja traje par sekundi i stranicuvam renderira normalno i bez potrebe za hackovima i ostalim trikovima.

Link za boilerplate HTML5:http://html5boilerplate.com/