Embed Size (px)
Citation preview
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:
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.
3
10. U division s id-em Container treba dodati:
1. Navigaciju (nav)
2. Sekciju (section)
3. aside
4. footer
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.
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
6
14. U tag aside treba dodati:
1. h3
2. p
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
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.
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:
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:
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:
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:
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:
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:
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
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:
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
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
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
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.
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:
22
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>
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;
}
