abc Tutorials:
  Operativni sistemi
   abc Windows 7
   abc Windows XP
   abc Operativni sistemi
  Microsoft Office
   abc Word 2010
   abc Word 2007
   abc Word 2003
   abc Excel 2010
   abc Excel 2007
   abc Excel 2003
   abc Power Point 2010
   abc Power Point 2003
   abc Access 2010
   abc Access 2007
   abc Expression Web
   abc Front Page 2003
  Računari i Internet
   abc Brojni sistemi
   abc Osnove računara
   abc Računarski sistemi
   abc Internet osnove
   abc HTML5 i CSS3
   abc HTML
   abc Jasc Animation Shop
   abc Flash
   abc Movie Maker
   abc Računarska grafika
  Algoritmi i programski jezici
   abc Algoritmi
   abc BASIC
   abc Turbo Pascal
   abc Dev-Pascal
   abc Python
   abc C
   abc C++
   abc Java
   abc Matlab
   abc Matlab 2
   abc Asembler
  Provjera znanja
   abc Quiz-Test

Priručnici:
   MatchCAD
   MatchCAD 2001
   Corel Draw X6
   CSS

Tutorials in English
   abc Word 2010
   abc Excel 2010
   abc Excel 2003
   abc PowerPoint 2010

Učenjenje kroz igru /LEARNING THROUGH GAMES/

abc HTML5 i CSS3 TUTORIAL - elektronski priručnik
Autor: Željko B. Grbić, Bojan Stojković i saradnici

HTML5 je jezik koji se koristi za kreiranje dokumenta na World Wide Web-u. Priručnik je namjenjen za jednostavnije učenje.

  1. 1. DIO Opšti pojmovi

  2.    O tutorijalu /ABOUT TUTORIAL/
  3.    Uvod /INTRODUCTION/


  4.    Minimalan HTML5 dokument /MINIMUM HTML5 DOCUMENT/

  5.    Naredbe u dijelu HEAD
  6.    Naslov dokumenta /PAGE TITLE/
  7.    Izbor jezika /DECLARING LANGUAGES/

  8.    Naredbe u dijelu BODY
  9.    Zaglavlje teksta /HEADING/ <h1> ... <h6>

  10.    Paragraf /PARAGRAPH/
  11.    Paragraf /PARAGRAPH/ <p>
  12.    Nova linija /LINE BREAK/ <br>
  13.    Prethodno formatiran tekst /PREFORMATTED/ <pre>
  14.    Odnos paragrafa, nove linije, prethodno formatirani /PARAGRAPH, LINE BREAK, PRE/ p, br, pre
  15.    FONT stil /FONT STYLE - b = strong, i, em/
  16.    Eksponent i indeks /SUPERSCRIPT, SUBSCRIPT/ <sup>, <sub>
  17.    Horizontalna linija /HORIZONTAL LINE/ <hr>

  18.    Primjeri I dio

  19.              Provjera znanja 1. dio (Quiz - priprema - test)
  20.              Provjera znanja 1. dio - Quiz sa slikama
  21.              Provjera znanja 1. dio - Quiz bez slika
  22.              Provjera znanja 1. dio - Pripremni test sa slikama
  23.              Provjera znanja 1. dio - Pripremni test bez slika
  24.              Provjera znanja - abc HTML5 i CSS3 - Test 1. dio


  25. 2. DIO
  26.    Linijski CSS /INLINE CSS/ - Atributi /ATTRIBUTE/
  27.    1.1. Poravnanje /ALIGN/ STYLE="text-align
  28.      Poravnanje zaglavlja teksta /ALIGN HEADINGS/
  29.      Poravnanje paragrafa /ALIGN PARAGRAPH/
  30.      Poravnanje dokumenta paragrafa i zaglavlja teksta /ALIGN DOCUMENT, PARAGRAPH, HEADINGS/
  31.    1.2.0. Boja i kod boje /CODE COLOR/ STYLE="BACKGROUND-COLOR: i STYLE="COLOR:
  32.    1.2. Boja pozadine /BACKGROUND COLOR/ STYLE="BACKGROUND-COLOR
  33.      Boja pozadine dokumenta /BACKGROUND COLOR/
  34.      Boja pozadine zaglavlja teksta /HEADINGS BACKGROUND COLOR/
  35.      Boja pozadine paragrafa /PARAGRAPH BACKGROUND COLOR/
  36.    1.3. Boja teksta /TEXT COLOR/ STYLE="COLOR
  37.      Boja teksta paragrafa /PARAGRAPH COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/
  38.      Boja teksta zaglavlja teksta /HEADINGS COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/
  39.      Boja teksta i pozadine paragrafa /PARAGRAPH COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/
  40.      Boja teksta i pozadine zaglavlja teksta /HEADINGS COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/
  41.      Boja teksta dokumenta /PAGE TEXT COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/
  42.    1.4. Izgled fonta /FONT FAMILY/ STYLE="FONT-FAMILY
  43.      Izgled fonta u dokumentu /BODY FONT FAMILY/
  44.      Izgled fonta u paragrafu /PARAGRAPH FONT FAMILY/
  45.      Izgled fonta u naslovu /HEADINGS FONT FAMILY/
  46.    1.5. Veličina fonta /FONT SIZE/ STYLE="FONT-SIZE
  47.      Veličina fonta u paragrafu /PARAGRAPH FONT SIZE/
  48.      Veličina fonta u zaglavlju teksta /HEADINGS FONT SIZE/ style="font-size:veličina;"
  49.      Veličina fonta u dokumentu /BODY FONT SIZE/
  50.      Veličina fonta u dokumentu i paragrafu /PARAGRAPH & BODY FONT SIZE/
  51.    1.6. Margine /MARGINS/  style="margin
  52.    1.7. Promjena parametara u paragrafu /SPAN/ SPAN STYLE="
  53.    1.8. Promjena parametara unutar grupe naredbi /DIV/ DIV STYLE="
  54.    1.9. Tekst i linija /TEXT DECORATION - UNDERLINE/ STYLE="text-decoration
  55.      Tekst i linija u dokumentu, DIV grupi naredbi i SPAN dijelu /TEXT DECORATION/ STYLE="text-decoration, BODY, DIV i SPAN
  56.    1.10. Uvlačenje teksta /INDENT/ STYLE="text-indent
  57.    1.11. Horizontalna linija /HORIZONTAL LINE - HR/ atributi
  58.    1.12. Zaglavlje i podnožje /HEADER & FOOTER/
  59.    1.13. Okvir /BORDER/

  60.    Primjeri II dio

  61.        Primjeri i zadaci - Tekst /EXAMPLES - TEXT/
  62.        FONT: parametri fonta 01
  63.        FONT: stil, boja - primjeri 0
  64.        FONT: stil, boja - primjeri 03
  65.        Tekst - prema uzorku 02
  66.        Tekst - prema uzorku 03

  67.              Provjera znanja 2. dio (Quiz - priprema - test)
  68.              Provjera znanja 2. dio - Quiz sa slikama
  69.              Provjera znanja 2. dio - Quiz bez slika
  70.              Provjera znanja 2. dio - Pripremni test sa slikama
  71.              Provjera znanja 2. dio - Pripremni test bez slika
  72.              Provjera znanja 2. dio - Pripremni test bez slika 1. i 2. dio
  73.              Provjera znanja - abc HTML5 i CSS3 - Test 2. dio
  74.              Provjera znanja - abc HTML5 i CSS3 - Test 1. i 2. dio


  75. 3. DIO
  76. LISTE /LISTS/ I UVLAČENJE TEKSTA
  77.    Numerisana lista /ORDERED LIST - OL & LI/
  78.    Nenumerisana lista - buliti /UNORDERED LIST - UL & LI/
  79.    Definisana lista /DEFINITION LIST/ <DL><DT><DD>


  80.    Linijski CSS /INLINE CSS/ - Atributi lista /LISTS ATTRIBUTES/
  81.      Numerisana lista - Atributi /ORDERED LIST - OL - ATTRIBUTE VALUES/ <OL style="list-style-type: Vrijednost>
  82.      Nenumerisana lista - Atributi /UNORDERED LIST - OL - ATTRIBUTE VALUES/ <OL style="list-style-type: Vrijednost>
  83.    Boja pozadine /BACKGROUND COLOR/ STYLE="BACKGROUND-COLOR/ i boja teksta /TEXT COLOR/ STYLE="color
  84.      Boja teksta i pozadine numerisana lista - Atributi /ORDERED LIST COLOR & BACKGROUND COLOR/ style="background-color & style="color
  85.      Boja teksta i pozadine nenumerisana lista - Atributi /UNORDERED LIST COLOR & BACKGROUND COLOR/ style="background-color & style="color
  86.      Boja teksta i pozadine definisane liste /DEFINITION LIST COLOR & BACKGROUND COLOR/ style="background-color & style="color
  87.    Izgled i veličina fonta u listi /LIST FONT FAMILY & FONT SIZE/ style="font-family & style="font-size
  88.      Izgled i veličina fonta numerisana lista /ORDERED LIST FONT FAMILY & FONT SIZE/ style="font-family & style="font-size
  89.      Izgled i veličina fonta nenumerisana lista /UNORDERED LIST FONT FAMILY & FONT SIZE/ style="font-family & style="font-size
  90.      Izgled i veličina fonta definisane liste /DEFINITION LIST FONT FAMILY & FONT SIZE/ style="font-family & style="font-size

  91.    Primjeri IIIa dio


  92. ODREDIŠTE I HIPERLINK /BOOKMARK & HYPERLINK/
  93.    O odredištu /BOOKMARK/
  94.    Kreiranje odredišta /CREATE BOOKMARK/
  95.    Različiti hiperlinkovi /DIFFERENT HYPERLINKS/
  96.    Hiperlink na oderdište u istom fajlu /HYPERLINK TO BOOKMARK IN THE SAME FILE/
  97.    Hiperlink na fajl u istom direktoriju /HYPERLINK TO FILE/
  98.    Hiperlink na fajl u prethodnom direktoriju /HYPERLINK TO FILE IN PARENT DIRECTORY/
  99.    Hiperlink na fajl u poddirektoriju /HYPERLINK TO FILE IN SUBDIRECTORY/
  100.    Hiperlink na odredište drugom fajlu /HYPERLINK TO BOOKMARK IN ANOTHER FILE/
  101.    Hiperlink na BOOKMARK u fajlu iz poddirektorija /HYPERLINK TO THE BOOKMARK IN FILE IN SUBDIRECTORY/
  102.    Hiperlink na Web adresu (domen) /HYPERLINK TO WEB ADDRESS/
  103.    Hiperlink na fajl na Web serveru /HYPERLINK TO FILE AT WEB SERVER/
  104.    Hiperlink na fajl index.htm(l) /HYPERLINK TO FILE index.htm(l)/
  105.    Hiperlink na e-mail /HYPERLINK TO E-MAIL/

  106.    Primjeri IIIb dio

  107.              Provjera znanja 3. dio (Quiz - priprema - test)
  108.              Provjera znanja 3. dio - quiz
  109.              Provjera znanja 3. dio - Pripremni test sa slikama
  110.              Provjera znanja 3. dio - Pripremni test bez slika
  111.              Provjera znanja 1, 2. i 3. dio - Pripremni test bez slika
  112.              Provjera znanja - abc HTML5 i CSS3 - Test 3. dio
  113.              Provjera znanja - abc HTML5 i CSS3 - Test 1, 2. i 3. dio


  114. 4. DIO
  115. SLIKE /IMAGES/
  116.    Dodavanje slike /IMAGE/
  117.    Dimenzije slike širina /WIDTH/ visina /HEIGHT/
  118.    Okvir oko slike /BORDER/
  119.    Slika kao pozadina dokumenta /BACKGROUND IMAGE/
  120.    Poravnanje teksta oko slike /ALIGN IMAGE/ STYLE="FLOAT:
  121.    Slika kao hiperlink /IMAGE AS HYPERLINK/


  122. 5. TABELA /TABLE/
  123.    Tabela /TABLE / <table>
  124.    Dodavanje tabele /INSERT TABLE / <table>
  125.    Debljina linija tabele /TABLE BORDERS/ <border>
  126.    Boja pozadine tabele /TABLE BACKGROUND COLOR/ <background-color>
  127.    Zaglavlje reda i zaglavlja kolone /COLUMN AND R0W HEADERS/ <th>
  128.    Povezivanje ćelija /TABLE - CELL SPANS/ <colspan> i <rawspan>
  129.    Boja pozadine ćelije /CELL BACKGROUND/ STYLE="BACKGROUND-COLOR

  130.    Primjeri V dio


  131. 6. AUDIO I VIDEO /AUDIO & VIDEO/
  132.    Dodavanje zvuka /INSERT AUDIO/ <audio>
  133.    Dodavanje videa /INSERT VIDEO/ <video>
  134.    Dimenzija videa /VIDEO SIZE/ width="height="
  135.    Ponavljanje videa /LOOP VIDEO/ loop="
  136.    Poster za video /VIDEO POSTER/ poster="


  137. 7. Pokretna poruka /MARQUEE/
  138.    Pokretna poruka /MARQUEE/ <marquee>


  139.              Provjera znanja 4. dio (Quiz - priprema - test)
  140.              Provjera znanja 4. dio - quiz
  141.              Provjera znanja 4. dio - Pripremni test sa slikama
  142.              Provjera znanja 4. dio - Pripremni test bez slika
  143.              Provjera znanja 4. dio - Pripremni test bez slika 1, 2, 3. i 4. dio
  144.              Provjera znanja - abc HTML5 i CSS3 - Test 4. dio
  145.              Provjera znanja - abc HTML5 i CSS3 - Test 1, 2, 3. i 4. dio

    146. .... CSS3 .....

  146. Interni CSS /INTERNAL CSS/ (u HEAD-u)
  147.    Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u BODY TAG-u
  148.    Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u paragrafu
  149.    Poravnanje /ALIGN/ STYLE="text-align
  150.    Poravnanje /ALIGN/ {text-align:}
  151.    Poravnanje sadržaja tabele /TABLE ALIGN CONTENT/ {text-align:}
  152.    Boja pozadine /BACKGROUND COLOR/ STYLE="BACKGROUND-COLOR/ i boja teksta /TEXT COLOR/ STYLE="color
  153.    Boja pozadine dokumenta /BODY BACKGROUND COLOR/ {background-color:}
  154.    Boja teksta /COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/ {background-color: color:}
  155.    Boja teksta i pozadine numerisana lista - /ORDERED LIST COLOR & BACKGROUND COLOR/ { background-color } & { color }
  156.    Boja teksta i pozadine nenumerisane liste /UNORDERED LIST COLOR & BACKGROUND COLOR/ { background-color } & { color }
  157.    Boja teksta i pozadine definisane liste /DEFINITION LIST - DL & DT DD COLOR & BACKGROUND COLOR/ {background-color:}
  158.    Boja pozadine tabele /TABLE BACKGROUND COLOR/ {background-color:}
  159.    Izgled i veličina fonta u dokumenttu /BODY FONT FAMILY & FONT SIZE/ {font-family: } & { font-size: }
  160.    Izgled fonta u dokumentu /BODY FONT FAMILY/ {font-family:}
  161.    Veličina fonta u dokumentu /BODY FONT SIZE/ {font-size:}
  162.    Izgled i veličina fonta u listi /LIST FONT FAMILY & FONT SIZE/ {font-family: } & { font-size: }
  163.    Izgled i veličina fonta numerisana lista /ORDERED LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }
  164.    Izgled i veličina fonta nenumerisana lista /UNORDERED LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }
  165.    Izgled i veličina fonta definisane liste /DEFINITION LIST FONT FAMILY & FONT SIZE/ { font-family: } & { font-size: }
  166.    Margine /MARGINS/
  167.    Margine /MARGINS/ {margin:}
  168.    Uvlačenje teksta /INDENT/
  169.    Uvlačenje teksta /INDENT/ {text-indent:}
  170.    Promjena parametara unutar grupe naredbi /DIV/ <STYLE> div {} </STYLE>
  171.    Boja pozadine i teksta unutar grupe naredbi /DIV/ <STYLE> div {} </STYLE>
  172.    Izgled i veličina fonta u grupi naredbi /DIV/ <STYLE> div {} </STYLE>
  173.    Liste /LISTS/ - Atributi /ATTRIBUTES/
  174.    Numerisana lista - Atributi /ORDERED LIST - OL - ATTRIBUTE VALUES/ {list-style-type:}
  175.    Nenumerisana lista - buliti - Atributi /UNORDERED LIST - UL & LI- ATTRIBUTE VALUES/ {list-style-type:}
  176.    Selektori /SELECTORS/
  177.    ID selektor /ID SELECTOR/ id="
  178.    Selektor klase /CLASS SELECTOR/ class="
  179.    Selektor klase - kombinovanje selektora /CLASS SELECTOR - COMBINING MULTIPLE TWO CLASS SELECTORS/ class="

  180.        Primjeri i zadaci /EXAMPLES/
  181.        Horizontalni navigacioni linkovi - Primjeri i zadaci /EXAMPLES/
  182.        Kreiranje galerija slika /DIV i FLOAT/ - Interni CSS
  183.        Tabela - prema uzorku .CSS-a - Primjeri i zadaci /EXAMPLES/
  184.        Gotove tabele - Primjeri i zadaci /EXAMPLES/
  185.        Kreiranje galerije slika /IMAGE GALLERY/ parametar FLOAT: LEFT /EXAMPLES/

  186. Eksterni CSS /EXTERNAL CSS/ (u CSS fajlu)
  187.    Poravnanje /ALIGN/ text-align
  188.    Poravnanje teksta dokumenta /ALIGN BODY/ .css
  189.    Poravnanje zaglavlja teksta /ALIGN HEADINGS/ .css
  190.    Boja pozadine /BACKGROUND COLOR/ STYLE="BACKGROUND-COLOR/ i boja teksta /TEXT COLOR/ STYLE="color
  191.    Boja pozadine dokumenta /PAGE BACKGROUND COLOR/ .css
  192.    Boja teksta dokumenta /PAGE TEXT COLOR/ .css
  193.    Boja teksta dokumenta /PAGE TEXT COLOR/ i boja pozadine dokumenta /BACKGROUND COLOR/ .css
  194.    Izgled i veličina fonta u dokumentu /BODY FONT FAMILY & FONT SIZE/ {font-family: } & { font-size: }
  195.    Izgled fonta /FONT FAMILY/ {font-family:} .css
  196.    Veličina fonta /FONT SIZE/ {font-size:} .css
  197.    Margine /MARGINS/ {margin:}
  198.    Margine /MARGINS/ {margin:}
  199.    Uvlačenje teksta /INDENT/
  200.    Uvlačenje teksta /INDENT/ {text-indent:}
  201.    Promjena parametara unutar grupe naredbi /DIV/ div {} .css
  202.    Boja pozadine i teksta unutar grupe naredbi /DIV/ div {} .css
  203.    Izgled i veličina fonta u grupi naredbi /DIV/ div {} .css
  204.    Liste /LISTS/ - Atributi /ATTRIBUTES/
  205.    Numerisana lista - Atributi - .css /ORDERED LIST - OL - ATTRIBUTE VALUES/ .css
  206.    Nenumerisana lista - Atributi /UNORDERED LIST - UL - ATTRIBUTE VALUES/ .css

    207. Primjeri EXTERNI CSS
  207.    Primjeri / Eksterni CSS /EXTERNAL CSS/

    208. Dodaci
  208.    Dodatak: TAG za komentar /APPENDIX COMMENT TAG/
  209.    Dodatak: boje /APPENDIX COLORS/
  210.    Dodatak: Font i tekst /FONT & TEXT/
  211.    Dodatak: veličina fonta - parametri /FONT SIZE/
  212.    HTML kodovi u priručniku
  213.    Heksadicimalni brojevi /APPENDIX HEXADECIMAL/
  214.    Grčki alfabet: /GREEK LETTERS/
  215.    Lista naredbi BOOKMARK and HYPERLINK 1
  216.    Lista naredbi: BOOKMARK AND HYPERLINK /URL/
  217.    Spisak .css fajlova /CSS FILES LIST/
  218.    Spisak selektora /SELECTORS LIST/
  219.    Popis termina u priručniku


    220. Primjeri


    Zabilješke sa predavanja
  220.    Lekcija 1. Sadržaj stranice - HEADER, MAIN, FOOTER i ATTRIBUTES
  221.    Lekcija 2. - HTML -CSS
  222.    Lekcija 3. - img
  223.    Lekcija 4_2
  224.    Lekcija 5. BOOKMARK
  225.    Lekcija 6. TAGOVI
  226.    Izbor tagova /CHOUSE TAGS/

  227.              Provjera znanja 5. dio (Quiz - priprema - test)
  228.              Provjera znanja 5. dio - quiz
  229.              Provjera znanja 5. dio - Pripremni test sa slikama
  230.              Provjera znanja 5. dio - Pripremni test bez slika
  231.              Provjera znanja - abc HTML5 i CSS3 - Test 5. dio


  232. QUIZ - PRIPREMA - TEST
  233.    Quiz - priprema - test