Vježba 1: Razvoj HTML5 statične stranice

Post on 30-Dec-2016

234 views 2 download

Transcript of Vježba 1: Razvoj HTML5 statične stranice

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;

}