HTML tablice 1 Obrazovni sektor GRAFIKE TEHNOLOGIJE I

HTML tablice 1 Obrazovni sektor: GRAFIČKE TEHNOLOGIJE I AV OBLIKOVANJE Strukovna WEB DIZAJNER - 1 GODINA kvalifikacija/zanimanje: Nastavni predmet: WEB PROJEKTI Nastavna jedinica: HTML tablice Predviđeno vrijeme: 2 školska sata Za pregled i čitanje uputa: računalo, tablet, mobitel Potrebni materijal i pribor za Za vježbu i izradu zadataka: računalo s izradu: tekstualnim editorom (Notepad++ ili neki drugi program koji učenici koriste u nastavi i za izradu domaćih uradaka) MATERIJALE RIPREMILA: SUZANA ŠESTAN DIPL. DIZAJNER, PROF. SAVJETNIK

Dragi učenici i drage učenice • • • Kako bismo vam olakšali učenje za vas smo pripremili materijale za samostalni rad. Ova prezentacija vodi vas kroz osnovne elemente strukture i izrade HTML tablica (dio 1). Prezentacija sadrži pojašnjenje osnovnih pojmova, a za njihovo razumijevanje preporučuje se odraditi i vježbe prema uputama. Na kraju cjeline, za utvrđivanje sadržaja pripremljeni su zadaci za samostalni rad, koje možete prokomentirati s predmetnim nastavnicima i razrednim kolegama. Vaši nastavnici će vam također pružati podršku u učenju na daljinu. Želimo vam sretno i ugodno učenje. 2

HTML – tablice 1 HTML tablice – struktura: CSS slider Tablice se koriste za prikaz i organizaciju tabelarnih podataka. HTML tablica je definirana između početne i završne oznake <table>…</table> elementa. Tablica može imati željeni broj redaka a svaki redak upisujemo između početne i završne oznake <tr>… </tr> elementa. Ćelije se definiraju <td> i <th> tagovima, <th> predstavlja naslovnu ćeliju, a <td> predstavlja podatkovne ćelije. 3

HTML – tablice 1 HTML tablice - osnovni elementi: CSS slider Početak i kraj tablice: <table>. . . </table> Početak i kraj tijela stranice unutar kojeg se nalazi podatci: <tbody>. . . </tbody> Početak i kraj zaglavlja tablice: <th>. . . </th> Početak i kraj retka tablice: <tr>. . . </tr> Početak i kraj ćelije s podatcima: <td>. . . </td> 4

HTML – tablice 1 Primjer 1. jednostavna struktura tablice u HTML-u: <table> <tr> <td>Ćelija 1 u prvom retku </td> <td>Ćelija 2 u prvom retku </td> </tr> <td>Ćelija 1 u drugom retku </td> <td>Ćelija 2 u drugom retku </td> </tr> </table> Tablica 1. 5

HTML – tablice 1 Primjer 1. jednostavna struktura tablice u HTML-u: <table> <tr> <td>Prvi učenik </td> <td>Drugi učenik </td> </tr> <td>Treći učenik </td> <td>Četvrti učenik </td> </tr> </table> Tablica 2. 6

HTML – tablice 1 *Vježba: Upiši kod tablice 1. i tablice 2. u tekstualni editor! Spremi. Izgled gornjeg primjera u pregledniku: Ćelija 1 u prvom retku Ćelija 1 u drugom retku Ćelija 2 u prvom retku Ćelija 2 u drugom retku Prvi učenik Drugi učenik Treći učenik Četvrti učenik *Napomena: da bi vizualno označili rubove tablice potrebno je elemente tablice oblikovati (oblikovanje rubova obrađeno je u nastavku prezentacije) 7

HTML – tablice 1 Primjer 2. jednostavna struktura tablice u HTML-u sa zaglavljem: <table> <td> 069 777 555 </td> <tbody> </tr> <tr> <th> Ime </th> <th> Prezime </th> <th> Telefon </th> </tr> <td> Ivan</td> <td> Bašek </td> <td> Luka </td> <td> Novak </td> <td> 069 555 222 </td> </tr> </tbody> </table> Tablica 3. 8

HTML – tablice 1 *Vježba: Upiši kod tablice 3. u tekstualni editor! Spremi. Izgled gornjeg primjera u pregledniku: Ime Ivan Luka Prezime Bašek Novak Telefon 069 777 555 069 555 222 Nakon pravilnog prikaza u pregledniku odgovori na sljedeća pitanja: Što primjećuješ? Kakav je izgled teksta u zaglavlju <th> u odnosu na tekst u ćeliji <td>? 9

HTML – tablice 1 Svojstvo border elementa <table> Želimo li prikazati rubove tablice koristimo svojstvo border i dodjeljujemo mu vrijednost debljine crte ruba tablice. Ako svojstvo border nije definirano rubovi tablice neće biti prikazani (kao u ranijim primjerima)! U dalje navedenom primjeru zadana je debljina ruba 1 px. 10

HTML – tablice 1 Primjer 3. jednostavna struktura tablice u HTML-u sa zaglavljem i debljinom rubova: <table border="1"> <tbody> <tr> <th> Ime </th> <th> Prezime </th> <th> Telefon </th> </tr> <td> 069 777 555 </td> </tr> <td> Luka </td> <td> Novak </td> <td> 069 555 222 </td> </tr> <td> Ivan</td> <tbody> <td> Bašek </td> </table> Tablica 4. 11

HTML – tablice 1 *Vježba: Prethodnoj vježbi (tablica 3. ) dodaj debljinu ruba 1 px u tekstualni editor! Dobivaš kod kao u tablici 4. Spremi. Izgled gornjeg primjera u pregledniku: 12

HTML – tablice 1 * Zadatak za vježbu – samostalni rad 1: Izraditi tablicu prema slikovnom prilogu Debljina ruba tablice je 2 px Datoteku nazvati tablica 1_ime. html Slikovni prilog izgleda rješenja tablice za samostalni rad 1 13

HTML – tablice 1 * Zadatak za vježbu – samostalni rad 2: Izraditi tablicu s podacima prema vlastitom konceptu. Uključiti usvojene elemente strukture tablice i debljinu ruba, te ranije usvojene elemente oblikovanja (veličina, boja i vrsta fonta, boja pozadine html dokumenta, poravnanja …) U dogovoru s predmetnim nastavnikom predati zadatke na uvid. 14

Izvori materijala i podataka za pripremu prezentacije: HTML – tablice 1 slider / CSS https: //www. w 3 schools. com/html_tables. asp https: //www. mojwebdizajn. net/ https: //nedschooldevelopers. com/HTML. php *Napomena: podaci koji su korišteni u primjerima (imena, prezimena, brojevi telefona, ocjene…) su izmišljeni za potrebe ove nastavne jedinice. 15