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.    Primjeri I dio

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


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

  57.    Primjeri II dio

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

  64.              Provjera znanja 2. dio (Quiz - priprema - test)
  65.              Provjera znanja 2. dio - quiz
  66.              Provjera znanja 2. dio - test sa slikama
  67.              Provjera znanja 2. dio - test bez slika
  68.              Provjera znanja 2. dio - test bez slika 1. i 2. dio
  69.              Provjera znanja - abc HTML5 i CSS3 - Test 2. dio
  70.              Provjera znanja - abc HTML5 i CSS3 - Test 1. i 2. dio


  71. 3. DIO
  72. LISTE /LISTS/ I UVLAČENJE TEKSTA
  73.    Numerisana lista /ORDERED LIST - OL & LI/
  74.    Nenumerisana lista - buliti /UNORDERED LIST - UL & LI/
  75.    Definisana lista /DEFINITION LIST/ <DL><DT><DD>


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

  87.    Primjeri IIIa dio


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

  102.    Primjeri IIIb dio

  103.              Provjera znanja 3. dio (Quiz - priprema - test)
  104.              Provjera znanja 3. dio - quiz
  105.              Provjera znanja 3. dio - test sa slikama
  106.              Provjera znanja 3. dio - test bez slika
  107.              Provjera znanja 1, 2. i 3. dio - test bez slika
  108.              Provjera znanja - abc HTML5 i CSS3 - Test 3. dio
  109.              Provjera znanja - abc HTML5 i CSS3 - Test 1, 2. i 3. dio


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


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


  126. 6. AUDIO I VIDEO /AUDIO & VIDEO/
  127.    Dodavanje zvuka /INSERT AUDIO/ <audio>
  128.    Dodavanje videa /INSERT VIDEO/ <video>
  129.    Dimenzija videa /VIDEO SIZE/ width="height="
  130.    Ponavljanje videa /LOOP VIDEO/ loop="
  131.    Poster za video /VIDEO POSTER/ poster="


  132. 7. Pokretna poruka /MARQUEE/
  133.    Pokretna poruka /MARQUEE/ <marquee>


  134.              Provjera znanja 4. dio (Quiz - priprema - test)
  135.              Provjera znanja 4. dio - quiz
  136.              Provjera znanja 4. dio - test sa slikama
  137.              Provjera znanja 4. dio - test bez slika
  138.              Provjera znanja 4. dio - test bez slika 1, 2, 3. i 4. dio
  139.              Provjera znanja - abc HTML5 i CSS3 - Test 4. dio
  140.              Provjera znanja - abc HTML5 i CSS3 - Test 1, 2, 3. i 4. dio

  141. .... CSS3 .....

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

  176.        Primjeri i zadaci - Tabela /EXAMPLES - TABLE/
  177.        Tabela - prema uzorku .CSS-a
  178.        Gotove tabele

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

  200. Primjeri EXTERNI CSS
  201.    Primjeri / Eksterni CSS /EXTERNAL CSS/

  202. Dodaci
  203.    Dodatak: boje /APPENDIX COLORS/
  204.    Dodatak: Font i tekst /FONT & TEXT/
  205.    Dodatak: veličina fonta - parametri /FONT SIZE/
  206.    HTML kodovi u priručniku
  207.    Heksadicimalni brojevi /APPENDIX HEXADECIMAL/
  208.    Lista naredbi BOOKMARK and HYPERLINK 1
  209.    Lista naredbi: BOOKMARK AND HYPERLINK /URL/
  210.    Spisak .css fajlova /CSS FILES LIST/
  211.    Spisak selektora /SELECTORS LIST/
  212.    Popis termina u priručniku


  213. Primjeri


    Zabilješke sa predavanja
  214.    Lekcija 1. Sadržaj stranice - HEADER, MAIN, FOOTER i ATTRIBUTES
  215.    Lekcija 2. - HTML -CSS
  216.    Lekcija 3. - img
  217.    Lekcija 4_2
  218.    Lekcija 5. BOOKMARK
  219.    Lekcija 6. TAGOVI
  220.    Izbor tagova /CHOUSE TAGS/

  221.              Provjera znanja 5. dio (Quiz - priprema - test)
  222.              Provjera znanja 5. dio - quiz
  223.              Provjera znanja 5. dio - test sa slikama
  224.              Provjera znanja 5. dio - test bez slika
  225.              Provjera znanja - abc HTML5 i CSS3 - Test 5. dio


  226. QUIZ - PRIPREMA - TEST
  227.    Quiz - priprema - test