Izdelava spletnih strani z uporabo HTML

Namen: Dijak spozna osnove HTML jezika, osnovno strukturo HTML strani, spozna osnovne značke za oblikovanje besedila, vstavljanje povezav na podstrani, vstavljanje slik, zna uporabiti sezname in si pomagati s spletnimi vodiči. Tej vsebini namenimo okvirno 8 ur pouka informatike oz. 4 tedne izobraževanja na daljavo. Pridobljeno znanje bo služilo dijaku kot temelj za razumevanje in uporabo spletnih portalov.

Opis sklopa:

Opisani sklop sodi v Predstavitev informacije na svetovnem spletu v učnem načrtu za informatiko. Dijaki ustvarjajo lastno spletno stran in pri tem:

  • spoznajo temeljne zakonitosti predstavitve informacije na spletu,
  • učinkovito uredijo spletni sestavek, ureditev razložijo in ovrednotijo,
  • spoznajo osnove jezika HTML, poiščejo ustrezne značke in jih uporabijo.

Splošno navodilo/pojasnilo za informatiko

Pri samostojnem učenju izhajamo iz predznanja dijakov. Dejavnosti so zasnovane tako, da učitelj spremlja napredek dijakov pri izdelavi spletne strani.

Dijaki se naučijo uporabljati vodiče in druga e-gradiva, ki jih najdejo na spletu. Spletno stran ustvarjajo lokalno in se pri tem naučijo uporabljati relativno in absolutno naslavljanje. Dijaki urejajo spletno stran v beležnici ali urejevalniku besedila, rezultat pa preverjajo v brskalniku. Tako vidijo povezavo med HTML jezikom in vsebino na spletu. Učitelj je na voljo dijakom preko utečenih komunikacijskih kanalov (spletna učilnica in videokonferenčni sistemi). Učitelj glede na zaznane tipične napake ali pomanjkljivo razumevanje pri pregledovanju izdelkov pripravi srečanje na daljavo, kjer skupaj odpravijo napake in pomanjkljivosti v razumevanju.

Opis dejavnostiDejavnost dijaka Priporočila za izvedbo na daljavo
Predpriprava na delo in preverjanje predznanja (20 minut) – samostojno na daljavoDijaki si namestijo urejevalnike besedil (če še niso), ki znajo barvati kodo (npr. Notepad++). Dijaki si ogledajo animacijo Uvod v splet (ang) – https://ed.ted.com/lessons/what-is-the-world-wide-web-twila-camp#review in rešijo kratek vprašalnik. (10 min) ali odgovorijo  na vprašalnik, ki ga pripravi učitelj in v katerem odgovarja na vprašanja o razliki med brskalnikom in iskalnikom, o izdelavi spletnih strani (statičnih in dinamičnih), o orodjih s katerimi izdela spletno stran, o iskanju pomoči za gradnjo spletnih strani (video vodiči, priročniki, učbeniki, …).Dijaki oceni svoje znanje s tega področja in zapiše kaj bi se želel še naučiti. To zapiše v nek skupen prostor tako, da vsi vidijo vse (Padlet, gDocs, …)Učitelj pošlje sporočilo dijakom kako naj se pripravijo na uvodno video srečanje.Pripravi tudi vprašalnik (primer 1, primer 2)  ali dijake napoti v reševanje kviza v e-učbeniku. Na primer: http://sasa.musiclab.si/eri1/INFORMATIKA/kvizko/index.html?quizFileName=rac_omrezja.json ali https://lusy.fri.uni-lj.si/ucbenik/book/1406/index9.html Dijaki naredi samooceno znanja s področja interneta, spleta in izdelave spletnih strani ter kaj bi se želel še naučiti. (To dijaki vpišejo v nek skupni prostor, morda kak skupen dokument (gDrive, OneDrive, OneNote, Padlet, forum v učilnici, …)
Uvodno videokonferenčno srečanje. Predstavitev zgradbe spletne strani in osnovnih značk v HTML jeziku (45 min)Dijaki spremljajo učiteljev prikaz in nato sproti preizkušajo uporabiti značke v svojem dokumentu. Dijaki vodeno gradijo enostavno spletno stran.Učitelj pripravi načrt dela za dijaka v spletni učilnici. Določi pot učenja in predvidi koliko časa naj dijak porabi za določeno dejavnost.Predstavi spletno učilnico in kje najdejo navodila ter prostor za oddajo dokazov o učenju.Učitelj demonstrira tudi uporabo HTML priročnikov v katerih je možno najti dokumentacijo za posamezne značke. Demonstrira kako poiščeš ustrezno značko v priročniku (primer 1, primer 2, primer 3), kako kopiraš značko v svojo spletno stran in kako prilagodiš parametre.
Učitelj poda tudi navodila za nadaljnje samostojno delo..
Predstavitev oblikovanja vsebine s CSS (45 minut)Dijaki poslušajo videkonferenčno predavanje o oblikovanju s CSS in nato predelajo svojo stran tako, da vse značke za oblikovanje zamenjajo s CSSUčitelj pripravi kratko demonstracijo o vključevanju CSS pri oblikovanju vsebine na spletnih straneh.
Vključevanje naprednejših značk (tabele, povezave, …) v svojo spletno stran (45 minut)Dijaki si pogledajo videovodič o vstavljanju tabel, slik in povezav v spletno stran.Te iste značke poskušajo tudi sami vstaviti v svojo spletno stranUčitelj poišče (ali sam posname) videovodič o vstavljanju tabel, slik in povezav v spletno stranVečinoma kot samostojna in preko vodičev vodena dejavnost.
Samostojna izdelava spletne strani dijaka (180 min ali 4 šolske ure)Dijak ustvari svojo spletno stran in jo deli z enim sošolcem. Dijaka v paru si izmenjujeta povratne informacije in na osnovi teh povratnih informacij izboljšujeta vsak svojo spletno stran. Ko je stran dokončana, da povratno informacijo dijaku še učitelj. Dijak spletno stran še izboljša glede na pridobljeno povratno informacijo in svojo stran sam oceni glede na kriterije ocenjevanja.Učitelj pripravi navodila (glej priloga 1 na dnu tega dokumenta) za samostojno nalogo v kateri opredeli robne pogoje (minimalno število html strani, značk, elementov, vsebine, …), kriterije uspeha, način medvrstniškega sodelovanja in način ocenjevanja izdelka.

VrednotenjeOdda dokončano spletno stranUčitelj izboljšano spletno stran ovrednoti z OPRAVIL ALI NI OPRAVIL.

Priloga 1: Naloga – izdelava spletne strani na izbrano temo

Izdelali boste spletno stran, v kateri boste predstavili izbrano temo.

Spletna stran naj zajema:

  • osnovni html dokument z imenom “index.htm”, ki naj vsebuje kratko predstavitev izbrane teme.

Pri gradnji spletne strani upoštevajte naslednje napotke:

  • spletna stran naj bo oblikovno in vsebinsko celovita in smiselna;
  • obvezno vstavi telo strani: značke <html>, <head> in <body>
  • drži se lepe urejenosti dokumenta (ustrezno zamikaj!);
  • ustvari vsaj eno pojavitev vseh osnovnih gradnikov: p, br, h1, h2, table, ul, ol, hr …
  • vsaj eno smiselno povezavo na zunanjo spletno stran (URL)
  • vsaj dve smiselni sliki (eno lokalno in eno iz spleta)

Obliko določaj skozi css (ustvari datoteko slog.css in NE oblikuj v značkah);

  • za vse gradnike definiraj obliko v css dokumentu.

Dodatni elementi:

  • meni z medsebojnimi povezavami in vsaj tri podstrani (ustvariti je treba layout – z gradnikom <table>, <div> ali <frame>);
  • smiselno uporabiti značko <iframe>

Pomagajte si:

  • s spletno stranjo http://www.w3schools.com/ glede HTML in CSS sintakse;
  • google – samo ne preveč časa zapravljat z googlanjem …

Kriteriji uspeha:

  • Spletna stran vsebuje vse zgoraj naštete elemente
  • Stran je vsebinsko in oblikovno celovita in smiselna
  • Dokument s HTML in CSS kodo je ustrezno oblikovan (zamikanje)

Sošolcu podajte (preko foruma) koristno povratno informacijo na osnovi katere lahko izboljša spletno stran.

Tudi sami izboljšajte svojo spletno stran na podlagi pridobljene povratne informacije in šele nato oddajte izdelek učitelju tako, da mapo stisnite v ZIP datoteko in jo naložite v spletno učilnico.

Uživajte med delom!

Primer pripravili:

  • Romana Zver, Gimnazija Murska Sobota
  • Mirko Đukić, ZAMS Maribor
  • Radovan Krajnc, ZRSŠ

Dodaj odgovor

Vaš e-naslov ne bo objavljen. * označuje zahtevana polja