Vježba 1: Razvoj HTML5 statične stranice
Transcript of Vježba 1: Razvoj HTML5 statične stranice
![Page 1: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/1.jpg)
1
Vježba 1: Razvoj HTML5 statične stranice
1. Napravite mapu na D disku naziva {Vaš broj indeksa}RDWAHMTL (Na primjer: 00182RDWAHTML).
2. Pokrenite Visual Studio 2012, odaberite File/Open/Web site… i otvorite navedenu mapu.
3. Nakon toga pritisnite Ctrl+Shift+A, odaberite HTML Page i pod Name upišite mojastranica (Bez
razmaka !!).
4. U Visual studio-u biste trebali dobiti sljedeće:
5. U html tagu obrišite xmlns="http://www.w3.org/1999/xhtml" i stavite lang=“hr“, te encoding –
UTF-8.
6. U tagu title stavite Moja stranica – {Vaše ime i prezime} (Na primjer: Moja stranica – Saša Mitrović).
7. U body-u dodajte semantički tag header s elementima h1,h2,h3. Nakon dodavanja, vaš kod bi
trebao izgledati ovako:
![Page 2: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/2.jpg)
2
8. U h tagove upišite sljedeće:
1. HTML5 stranica
2. Prikaz HTML5 semantičkih tagova
3. Izrada HTML5 web stranice
9. Nakon izrade zaglavlja treba izraditi sadržaj stranice, a sadržaj stranice će se staviti u jedan element
naziva division. Nakon dodavanja division taga, potrebno mu je postaviti za naziv id atributa
Container.
![Page 3: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/3.jpg)
3
10. U division s id-em Container treba dodati:
1. Navigaciju (nav)
2. Sekciju (section)
3. aside
4. footer
![Page 4: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/4.jpg)
4
11. Unutar nav taga treba dodati:
1. h3 tag
2. Dva anchora/vanjska linka (a)
12. Zatim isto treba ponoviti i za unutarnje linkove.
![Page 5: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/5.jpg)
5
13. Nakon toga u sekciju (section) treba dodati sljedeće:
1. article
a. header
i. h1
b. 2 paragraph-a (p)
c. figure
i. dvije slike (img)
ii. figcaption
d. footer
i. h2
2. article
a. header
i. h1
b. unordered list (ul)
i. 4 list item-a (li)
c. footer
i. h2
![Page 6: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/6.jpg)
6
14. U tag aside treba dodati:
1. h3
2. p
![Page 7: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/7.jpg)
7
15. Nakon toga u footer:
1. h2
16. Nakon izrade HTML markup-a stranice ispunite section s tekstom:
1. article
a. h1 – Dobro došli!
b. prvi paragraph (p) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
ultricies accumsan adipiscing. Maecenas elementum ut libero id mollis.
c. drugi paragraph (p) - Ut pharetra purus convallis sodales ornare. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae.
d. prva slika (img) –
a. src=“HTML5_slika1.png“
b. alt=“ HTML5 rocks!“
e. druga slika (img) –
a. src=“HTML5_slika2.png“
b. alt=“Future of the web!“
f. figcaption – HTML5 is cool!
g. h2 – Ovo je podnožje
2. article
a. h1 – U nastavku će biti prikazana lista
b. li – Nulla
c. li – natoque
d. li – vestibulum
e. li – dignissim
f. h2 – drugo podnožje
![Page 8: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/8.jpg)
8
17. Nakon toga ispunite elemente aside i footer:
1. aside
a. h3 – Vijesti…
b. p - Aenean mollis magna nec felis iaculis, in ullamcorper tortor dictum. Etiam facilisis,
libero sit amet gravida pulvinar, nibh tellus consequat orci
2. footer
a. h2 - Copyright © 2014 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
![Page 9: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/9.jpg)
9
Uređivanje HTML5 statične web stranice
Nakon izrade HTML5 stranice potrebno ju je urediti pomoću CSS-a.
1. Pritisnite Ctrl+Shift+A, nakon toga odaberite Style Sheet i pod Name upišite mojstylesheet.
2. Nakon kreiranja css datoteke potrebno je pomoću link taga u head dijelu html stranice pozvati
novokreiranu css datoteku.
3. U css datoteci pomoću šest komentara razdvojite stilove po elementima:
![Page 10: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/10.jpg)
10
4. Prvo će se urediti generalne stvari:
a. body
b. img
c. #Container
5. U body treba dodati sljedeća svojstva:
NAPOMENA:
margin: T R B L;
margin: TB RL;
margin: TBRL;
6. U img treba dodati sljedeća svojstva:
7. U #Container treba dodati sljedeća svojstvo:
![Page 11: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/11.jpg)
11
8. Nakon uređivanja generalnih stvari; treba urediti Header i footer:
a. header
b. header h2
c. h1
d. h2
e. h3
f. footer
g. footer h2
9. U header treba dodati sljedeća svojstva:
![Page 12: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/12.jpg)
12
10. U header h2 treba dodati sljedeća svojstva:
11. U h1 treba dodati sljedeća svojstva:
12. U h2 treba dodati sljedeća svojstva:
13. U h3 treba dodati sljedeća svojstva:
14. U footer treba dodati sljedeća svojstva:
15. U footer h2 treba dodati sljedeća svojstva:
![Page 13: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/13.jpg)
13
16. Zatim se uređuje navigacija:
a. nav
b. nav a:link
c. nav a:hover
d. nav h3
17. U nav treba dodati sljedeća svojstva:
18. U nav a:link treba dodati sljedeća svojstva:
19. U nav a:hover treba dodati sljedeća svojstva:
![Page 14: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/14.jpg)
14
20. U nav h3 treba dodati sljedeća svojstva:
21. U section-u treba urediti sljedeće elemente:
a. section
b. article
c. article header
d. article footer
e. article h1
22. U section treba dodati sljedeća svojstva:
![Page 15: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/15.jpg)
15
23. U article treba dodati sljedeća svojstva:
24. U article header treba dodati sljedeća svojstva:
25. U article footer treba dodati sljedeća svojstva:
26. U article h1 treba dodati sljedeća svojstva:
27. U aside-u treba urediti sljedeće:
a. aside
b. aside h3
c. aside p
![Page 16: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/16.jpg)
16
28. U aside treba dodati sljedeća svojstva:
29. U aside h3 treba dodati sljedeća svojstva:
30. U aside p treba dodati sljedeća svojstva:
31. U figcaption treba dodati sljedeća svojstva:
![Page 17: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/17.jpg)
17
Izrada tablice
1. Unutar Visual Studia pritisnite Ctrl i označite mojastranica.html, te označeno povucite gore ili
dolje kako bi dobili kopiju mojastranica.html datoteke.
2. Preimenujte mojastranica - Copy.html u mojaDrugastranica.html.
3. Nakon toga u nav tagu mojastranica.html datoteke, u prvom anchor tagu ispod unutarnjih linkova
umjesto # stavite url koji vodi do datoteke mojaDrugastranica.html.
4. Isto učinite i u mojaDrugastranica.html, ali da unutarnji link vodi do datoteke mojastranica.html.
5. Unutar prvog article-a u mojaDrugastranica.html datoteci, obrišite sljedeće tagove:
1. p
2. figure
3. footer
![Page 18: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/18.jpg)
18
6. Umetnite tablicu na sljedeći način:
1. table
i. caption
ii. thead
1. tr
a. th
b. th
c. th
iii. tfoot
1. tr
a. td
b. td
c. td
iv. tbody
1. tr
a. td
b. td
c. td
2. tr
a. td
b. td
c. td
3. tr
a. td
b. td
c. td
![Page 19: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/19.jpg)
19
7. Ispunite tagove sa sljedećim tekstom:
1. caption - Albumi
2. thead tr th – Naslov
3. thead tr th – Izvođač
4. thead tr th - Komentar
5. tfoot tr td – Kolona 1
6. tfoot tr td – Kolona 2
7. tfoot tr td – Kolona 3
![Page 20: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/20.jpg)
20
8. tbody tr td - Electric Ladyland
9. tbody tr td - Jimi Hendrix
10. tbody tr td - Revolutionary
11. tbody tr td - Revolver
12. tbody tr td - The Beatles
13. tbody tr td - Their best work.
14. tbody tr td - Apostrophe
15. tbody tr td - Frank Zappa
16. tbody tr td - Brilliant mix of rock and jazz.
![Page 21: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/21.jpg)
21
Uređivanje tablice
1. U CSS datoteci treba urediti sljedeće elemente:
1. table
2. table, th, td
3. th, td
4. tfoot td
2. U table treba dodati sljedeća svojstva:
3. U table, th, td treba dodati sljedeća svojstva:
4. U th, td treba dodati sljedeća svojstva:
5. U tfoot td treba dodati sljedeća svojstva:
![Page 22: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/22.jpg)
22
![Page 23: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/23.jpg)
23
Media elementi
1. Dodajte sljedeći javascript kod u head mojaDrugastranica.html datoteke (mozete c/p):
<script> var audio; var video; function init() { audio = document.getElementById('audio1'); video = document.getElementById('video1'); } function play() { audio.play(); } function pause() { audio.pause(); } function rewind() { audio.currentTime = 0; } function Vplay() { video.play(); } function Vpause() { video.pause(); } function Vrewind() { video.currentTime = 0; } window.onload = init; </script>
2. Nakon toga u drugom article-u mojaDrugastranica.html datoteke obrišite sljedeće tagove:
1. ul
2. footer
3. Dodajte kontrolu za audio u drugom article-u (mozete c/p):
<p> Here's a song: </p>
<audio id="audio1" controls> <source src="media/song.m4a" type="audio/x-aac" /> <source src="media/song.mp3" type="audio/mpeg" /> <source src="media/song.ogg" type="audio/ogg" /> <p> Your browser does not support the HTML5 audio feature. </p> </audio> <form> <input type="button" value="Play" onclick="play()" /> <input type="button" value="Pause" onclick="pause()" /> <input type="button" value="Rewind" onclick="rewind()" />
</form>
![Page 24: Vježba 1: Razvoj HTML5 statične stranice](https://reader033.fdocuments.net/reader033/viewer/2022051123/58667a7b1a28aba0408b4dd5/html5/thumbnails/24.jpg)
24
4. Dodajte kontrolu za video u drugom article-u (mozete c/p):
<p> Here's a video: </p> <video id="video1" controls> <source src="media/video.m4v" type="video/mp4" /> <source src="media/video.webm" type="video/webm" /> <source src="media/video.ogg" type="video/ogg" /> <p> Your browser does not support the HTML5 video feature. </p> </video> <form> <input type="button" value="Play" onclick="Vplay()" /> <input type="button" value="Pause" onclick="Vpause()" /> <input type="button" value="Rewind" onclick="Vrewind()" />
</form>
5. Uredite u css-u kontrolu za video (mozete c/p):
/* Media stil */ video { width: 430px; height: 240px;
}