Sveučilište u Zagrebu Fakultet strojarstva i brodogradnje. WEB programiranje HTML & CSS

Size: px

Start display at page:

Download "Sveučilište u Zagrebu Fakultet strojarstva i brodogradnje. WEB programiranje HTML & CSS"

Alexina Bryant
5 years ago
Views:

1 Sveučilište u Zagrebu Fakultet strojarstva i brodogradnje WEB programiranje HTML & CSS Autor/i: Juraj Benić 2018

2 1. Zadatak Kreirati stranicu kojoj će naslov biti Zadatak 1. i veličina teksta 20px te staviti jedan komentar, a stranica će biti ista kao i Slika 1. Slika 1 2. Zadatak Kreirati stranicu koja će imati tri linka, jedan na stranicu FSB-a koja se otvara u novom tabu, drugi za slanje mail-a i zadnji link na teks koji se nalazi na kraju dokumenta. Na stranici će se nalaziti numerirana lista s opisom svakog linka. Na kraju dokumenta se mora nalaziti link Kraj dokumenta odmaknut 1000px od početka stranice. Slika 2 1

3. Zadatak Potrebno je napraviti tablicu 2x3 prema slici 3 koja se nalazi na div elementu rotiranom za 45 i centriranom na stranici. Prvi red tablice je tekstualni, a tekst je poravnat s desne strane.

3 3. Zadatak Potrebno je napraviti tablicu 2x3 prema slici 3 koja se nalazi na div elementu rotiranom za 45 i centriranom na stranici. Prvi red tablice je tekstualni, a tekst je poravnat s desne strane. U drugom redu su brojke u plavoj boji, a druga ćelija ima brojke u crvenoj boji. CSS treba definirati pomoć style taga unutar head taga. Raditi s klasama i id-evima. Tablica imam obrub crne boje debljine 1px, a svaka ćelija ima širinu od 140px. Slika 3 4. Zadatak Potrebno je napraviti stranicu prema slici 4. Lijevi div element zauzima 50% širine ekrana, a desni div element 40%. Na desnom divu nalazi se forma sa sedma input polja koji su redom tipa text, text, password, button, checkbox, radio i submit. Gumb klikni ima atribut onclick= alert( U ovoj formi probajte staviti i checkbox i radiobutton ) koji generira obavijest prilikom klika na gumb. Forma ne poziva niti jednu akciju. Tekst Moj tag je nevidljiv! generiran je pomoću vlastitog html taga <mojtag>. Zadatak riješiti pomoću vanjskog css koji se poziva na slijedeći način: 1 <li nk href= "{{ =URL (' static ', 'css / ime_css_datoteke.css ')}}" rel= " stylesheet " type= " text / css "> Slika 4 2

HTML & CSS 5. Zadatak Potrebno je postaviti z utu podlogu pozadine, sliku pozadine (slika Galaxy.jpg) koja se ponavlja po y osi i pozicionirana je u centru ekrana.

4 HTML & CSS 5. Zadatak Potrebno je postaviti z utu podlogu pozadine, sliku pozadine (slika Galaxy.jpg) koja se ponavlja po y osi i pozicionirana je u centru ekrana. U lijevom gornjem kutu potrebno je uc itati sliku w3schools.png, a u centru ekrana potrebno je uc itati animirani gif pod nazivom Loptice.gif. Slike je potrebno kopirati u mapu static/images. Za kreiranje putanje do slike koristi se python naredba: 1 {{ =URL ( ' static ', ' images / i m e _ s l i k e. e k s t e n z i j a ' ) }} Slika 5 3

5 6. Rješenja Kod 1: Zadatak 1 HTML 4 <title > Zadatak 1 </title > 5 <meta charset= " utf8 ">  6 </head > 7 <body style= " font-size:20px; "> 8 9 <h1 > Naslov 1 </h1 > 10 <p> 11 prvi paragraf <span style= " color: red; " > ja sam span </ span > 12 </p > <hr > 15 <h3 > Naslov 3 </h3 > 16 <hr > 17 <h6 > Naslov 6 </h6 > <p style= " text-align:right; "> 20 random tekst s <b> blod< /b>, <i> italic< /i> i <u> podcrtanom< /u> rijeci 21 </p >  25 </body > 26 </html > Kod 2: Zadatak 2 HTML 4 <title > Linkovi i liste </ title > 5 <meta charset= " utf8 ">  6 </head > 7 <body style= " font-size:20px; "> 8 9 <a href= "# kraj " > Link unutar dokumenta - kraj dokumenta </a > </ br > 10 <a href= " http: // /" target= " _blank "> Link na web stranicu FSB- a u novom tabu </a > <br > 11 <a href= " mailto:ime.prezime@ .com "> Slanje poruke </a > <hr > 14 Linkovi: 15 <ol > 16 <li > unutar istog dokumenta - href= "# kraj " </li > 17 <li >na udaljene dokumente - href= " http: // " </li > 18 <li > ostalo - href= " mailto:ime.prezime@ .com " </li > 19 </ol > 20 4

6 21 <a id= " kraj " style= " position: absolute; top: 1000 px; " > Kraj dokumenta </a > <br > </body > 24 </html > Kod 3: Zadatak 3 HTML i CSS 4 <title >id i klase </title > 5 <meta charset= " utf8 ">  6 7 <style > 8 table, th, td { border: 1 px solid black; } 9 td { width: 140 px; } 10. tekst { text- align: right; } 11. broj { color: blue; } # celija-2-2 { color:red; } # priv { 16 margin: auto; 17 width: 320px; 18 background- color: # fff; 19 -webkit-transform: rotate ( -45deg ); 20 -moz-transform: rotate ( -45deg ); 21 position: relative; 22 top: 140 px; 23 } 24 </style > </head > 27 <body style= " font- size: 20px; " > <div id= " priv "> <table > 32 <tbody > 33 <tr > 34 <td class= " tekst "> daispf </td > 35 <td class= " tekst "> daispf </td > 36 <td class= " tekst "> daispf </td > 37 </tr > 38 <tr > 39 <td class= " broj "> 1233 </td > 40 <td class= " broj " id= " celija-2-2 "> </td > 41 <td class= " broj "> 324 </td > 42 </tr > 43 </tbody > 44 </table > </div >

7 49 </body > 50 </html > Kod 4: Zadatak 4 HTML 4 <title > Zadatak 4. </ title > 5 <meta charset= " utf8 " > 6 <li nk href= "{{ =URL (' static ', 'css / zadatak_4.css ')}}" rel= " stylesheet " type= " text / css "> 7 </head > 8 9 <body > <div id= " Lijevispremnik " > 12 Ovo je tablica: 13 <table > 14 <tr > <td > ć elija 1,1 </td > <td > ć elija 1,2 </td > <td > ć elija 1,3 </td > </tr > 15 <tr > <td > ć elija 2,1 </td > <td > ć elija 2,2 </td > <td > ć elija 2,3 </td > </tr > 16 </table > <br > <p class= " zaparagraf " > Ovaj paragraf je u stilu klase </p > 21 <p class= " zaparagraf " > Ovaj paragraf je u stilu klase </p > 22 <p > Ovaj paragraf je u stilu klase </p > 23 <p class= " zaparagraf " > Ovaj paragraf je u stilu klase </p > </div > <div id= " Desnispremnik " > Ovo ispod je forma: <br > <hr > <br > <br > 30 <form target= " _blank " method= " post "> <input type= " text " name= " Ime " value= " Unesi ime "></ input > <br > 33 <input type= " text " name= " Prezime " value= " Unesi prezime "></ input > <br > 34 <input type= " password " name= " psw " value= " 125 "></ input > <br > 35 <input type= " button " onclick= " alert (' U ovoj formi probajte staviti i checkbox i radiobutton ')" value= " Klikni!" > </ input > <br > 36 <input type= " checkbox " name= " chbox "> Ozna či ako misli š da si sve razumio!</ input > <br > 37 <input type= " radio " name= " rdbutton "> Slu šaš li radio ;-)?</ input > <br > <input type= " submit " name= " Submit " value= "Poš alji "></ input > </ form > 42 6

8 43 <mojtag onclick= " alert (' Vidljiv si! ')"> Moj tag je nevidljiv!</ mojtag > </div > </body > 48 </html > 1 table { 2 background- color: # E00000; 3 color: white; 4 border: 2px solid black; 5 width: 70%; 6 margin- left: auto; 7 margin- right: auto; 8 } 9 10 td { 11 border: 1px dashed white; 12 } div { 15 border: 4px dotted black; 16 } div # Lijevispremnik { 19 width: 50 %; 20 float: left; 21 background-color:yellow; 22 } div # Desnispremnik { 25 width: 40 %; 26 float: right; 27 border: 3px green solid; 28 } mojtag { 31 color: green; 32 font- size: 22px; 33 } p. zaparagraf { 36 background-color:black; 37 color: white; 38 } Kod 5: Zadatak 4 CSS Kod 6: Zadatak 5 HTML 4 <title > Slike i gifovi </ title > 5 <meta charset= " utf8 ">  7

9 6 7 <style > 8 body { 9 background-image: url ("{{ =URL (' static ', ' images / Galaxy.jpg ') }}"); 10 background- color: yellow; 11 background- position: center; 12 background- repeat: repeat- y; 13 } img { 16 width: 200px; 17 height: 100px; 18 } 19 </style > </head > <body >  26 PNG slika<img src= "{{ =URL (' static ', ' images / w3schools.png ')}}" alt= " Ako nema slike tu je tekst " > <br / > <p style= " text-align:center;color: # ffffff "> Animirani GIF <img src= "{{ =URL (' static ', ' images / Loptice.gif ')}}" alt= " Nema </body > 31 </html > loptica "> </p > 8

recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)

HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its