Osnovni elementi HTML dokumenta. Boja i slika za pozadinu.

Čas obuhvata uvod u izradu prve web stranice putem programa Notepad, praktičnu izradu osnovnog HTML dokumenta kroz elemente <html>, <head>, <title> i <body> uz postavljanje boje i slike za pozadinu, te prezentaciju rada i samoevaluaciju.

Organizacijski oblik nastave
Suradnja škole sa roditeljima i zajednicom te razvoj školskog kolektiva
Trajanje

45 minuta

Predmet

Informatika

Ciljevi i ishodi učenja i poučavanja

Cilj: Učenici izrađuju jednostavan HTML dokument, razlikuju ulogu elemenata <html>, <head>, <title> i <body> te postavljaju boju i sliku za pozadinu stranice.

Ishodi učenja i poučavanja

Učenik/učenica:

  • prepoznaje i primjenjuje osnovne elemente HTML dokumenta
  • oblikuje izgled web stranice korištenjem boje i slike za pozadinu

Detaljan opis realizacije

Aktivnost 1 – Upoznavanje sa izradom prve web stranice


Kroz razgovor nastavnik postavlja pitanje kako nastaje web stranica, objašnjava ulogu datoteke index.html kao početne stranice web mjesta te predstavlja Notepad kao alat za pisanje HTML koda. Najavljuje izradu prve web stranice koju će učenici nadograđivati na narednim časovima.

Aktivnost 2 – Izrada osnovnog HTML dokumenta


Nastavnik demonstrira postupak izrade HTML dokumenta na projekcijskom zaslonu, a učenici istovremeno prate demonstraciju i izrađuju vlastitu web stranicu u programu Notepad. Učenici kreiraju datoteku index.html te organizuju radni prostor tako da se na lijevoj strani ekrana nalazi Notepad, a na desnoj internet preglednik. Nakon svake izmjene koriste kombinaciju tipki Ctrl+S za spremanje datoteke i F5 za osvježavanje stranice u internet pregledniku kako bi odmah uočili rezultate svog rada.
Učenici kroz praktičan rad postupno dodaju osnovne HTML oznake:

Korak 1 – <html></html>
Korak 2 – <head></head>
Korak 3 – <title></title>
Korak 4 – <body></body>
Korak 5 – <body bgcolor="lightblue">
Korak 6 – <body background="pozadina.jpg">
Nastavnik napominje razliku između lokalnog i javnog pokretanja web stranice. Tokom rada nastavnik kontinuirano prati aktivnost učenika, postavlja usmjeravajuća pitanja, pruža podršku prema potrebi i evidentira zapažanja u obrascu za formativno praćenje.

Aktivnost 3 – Prezentacija rada i samoevaluacija


Nekoliko učenika prikazuje i objašnjava izmjene na svojoj web stranici. Nastavnik sa učenicima sumira ulogu obrađenih oznaka i značaj datoteke index.html. Učenici zaključuju da su izradili osnovni kostur web stranice te popunjavaju obrazac za samoevaluaciju. Datoteku index.html šalju sebi putem Teams-a za naredni čas.

Potrebni resursi

  • Offline varijanta: Računari, Notepad, USB i obrazac za formativno praćenje (print verzije).
  • Online varijanta: Računari sa internet priključkom + Teams, obrazac za samoevaluaciju i obrazac za formativno praćenje (elektronska verzija) (MS Forms).
Praćenje i procjenjivanje

Praćenje se vrši putem obrasca za formativno praćenje koji nastavnik popunjava tokom rada te obrasca za samoevaluaciju koji učenici popunjavaju na kraju časa.

Ideje za domaće zadaće (nastavak aktivnosti) i uključivanje roditelja

/

Savjeti za druge nastavnike/ce kod realizacije ove lekcije/teme

/

Prilozi (radni materijal, radni listovi i dr.)
Metode i tehnike
Slične objave

Dopisivanje

Morate biti prijavljeni da biste ćaskali