Tretja tema našega E-portfelja je spletna stran. Spletna stran je zagotovo ena najbolj zanimivih računalniških aktivnosti, kar jih računalništvo ponuja. Je tudi eno najbolj uporabnih računalniških znanj. Dobra stvar vsega pa je, da enostavnih spletnih strani sploh ni težko narediti. Sam bom kreiral preprosto spletno stran, na temo spletnih brskalnikov. Vključil bom še CSS (Cascading style sheet) oblikovanje strani, izdelal pa jo bom v programu Notepad++ in sicer s html in css kodo. Stran ne bo nek estetski višek, bo pa zelo dober in nazoren vodič kako oblikovati html in css datoteko.
Veselo na delo!
Kreiranje spletne strani v programu Notepad++
Notepad++ je preprost program v obliki beležnice, ki zaznava ukaze različnih programskih in splenih jezikov. Brezplačno si ga lahko naložite
tukaj.
Na začetku ustvarimo dva dokumenta in sicer enega s .html končnico, ki bo naša spletna stran ter drugega s .css končnico, ki bo naš css stil za oblikovanje strani. V mojem primeru bom začetno stran imenoval kar index.html, medtem ko bo CSS datoteka imenovana style.css.
Pa začnimo!
V html datoteko vstavimo značko za html dokument, značko za glavo in značko za telo, tako kot kaže slika 1.
|
Slika 1: Značke |
Nato v glavo vstavimo nekaj ukazov. Prvi ukaz, ki ga na sliki 2 vidite v 3. vrstici nam poveča nabor znakov, tako da lahko uporabljamo tudi šumnike in podobne znake.
V 4. vrstici se nahaja povezava do naše CSS datoteke, v 5. pa je naslov spletne strani, ki se kasneje prikazuje v skrajnem zgornjem desnem robu brskalnika.
|
Slika 2: Glava |
Nadaljujemo v telesu. Dodamo naslov celotne spletne strani. Sprememba je vidna na sliki 3 v 8. vrstici.
|
Slika 3: Naslov spletne strani |
Sedaj začnemo urejati CSS datoteko. Datoteko odpremo, če je še nismo, jo še shranimo in vanjo napišemo kodo, ki jo vidimo na sliki 4.
|
Slika 4: Ozadje in naslov spletne strani v CSS |
Najprej nastavimo ozadje spletne strani (od 1. do 5. vrstice), nato pa uredimo še naslov h1 (glavni naslov spletne strani) po lastnem okusu (od 9. do 16. vrstice). Več CSS ukazov si lahko poiščemo na internetu.
Nadaljujemo ponovno v html datoteki in sicer ustvarimo nekaj povezav za podstrani, kot vidimo na sliki 5. Povezav še nismo poimenovali, saj podstrani še nimamo. Podstrani bomo ustvarili tako, da bomo stran index.html shranili pod različnimi imeni, ampak šele ko bo osnovna oblika strani zaključena. To je majhen trik, da stvari, ki bodo na vseh straneh enake delamo samo enkrat.
Povezave so na sliki 5 od 9. do 12. vrstice. Značka razmak služi kot presledek med posameznimi povezavami, njeno funkcionalnost, pa bomo ustvarili v CSS datoteki.
|
Slika 5: Povezave |
Nadaljujemo spet v CSS datoteki, kot vidimo na sliki 6.
|
Slika 6: Povezave v CSS datoteki |
Razmak definiramo kot presledek 50ih pikslov. Z 'a' pa definiramo izgled povezav v naši spletni strani.
Sedaj priden a vrsto del urejanja samega besedila. Začnemo z naslovom podstrani. Najprej ga vstavimo v html datoteko (slika 7). Vstavimo tudi besedilo, ki ga želimo napisati. Več ga lahko dodamo pozneje. Besedilu smo dodali še značko "barvatexta", ki oblikuje besedilo, če je v tej znački. Značko bomo definirali kot že prej v CSS datoteki.
|
Slika 7: Dodajanje podnaslova in besedila v html datoteko |
Nato pa ta dva dela spletne strani uredimo še vizualno v CSS datoteki, kot prikazuje slika 8.
|
Slika 8: Urejanje videza podnaslova in naslova v CSS datoteki |
Tako, to je več ali manj vse, kar rabimo za našo spletno strani. Sedaj lahko spletno stran namnožimo tolikokrat, kot želimo imeti podstrani. Najbolj praktično je, da vnaprej napišemo imena vseh strani v povezave in jih šele nato ustvarimo, da so vse strani že v naprej povezane med sabo.
Za konec vam bom pokazal še, kako se v html jeziku v spletno stran vstavi slika. To prikazuje slika 9.
|
Slika 9: Vstavljanje slike |
Tako, sedaj pa lahko začnemo z vsebinskim urejanjem spletne strani. Napišemo nekaj besedila, vstavimo nekaj slik, animacijskih slik itd...
Končni izgled moje strani pa si lahko ogledate
TUKAJ.
Uporaba spletnih strani pri pouku
Spletne strani v šoli bi bile uporabne predvsem za to, da bi na njih pisali literaturo na bol doživet, zanimiv in vsem lažje dostopen način. Koristno bi bilo, da bi se literatura nahajala na spletnih straneh, ker bi se tako učenci naučili brskati po spletnih straneh in jih uporabljati. Spletna stran ponuja precej možnosti deljenja podatko in informacij na zelo enostaven način. Na spletno stran lahko prav tako pripenjamo datoteke.
Prav tako pa obstajajo posebne namenske spletne strani oz razna spletna mesta, kot so spletne učilnice, forumi, blogi, wikiji, ki vsak zase služijo svojemu namenu. Vsa ta spletna mesta so zelo uporabna v šolstvu za širjenje podatkov, literature, datotek, pa tudi komunikacijo in deljenje mnenj.
Nevarnost na spletu
Seveda pri brskanju po spletu na nas preži mnogo nevarnosti. Predvsem pa so tem nevarnostim izpostavljeni mlajši uporabniki, ki se jih še ne zavedajo v celoti. Zato je zelo pomembno, da učence podučimo o nevarnostih, kot so kraja in zloraba podatkov, razna lažna oglasna sporočila in mamljive ponudbe, neprimene vsebine itd...
Vendar pa menim, da moramo pri tem ohranjati neko zdravo mero, saj s svarjenjem ne smemo pretiravati. To pa je po mojem mnenju ened od problemov, ki se kar pogosto pojavljajo. Pogosto učitelji, pa tudi drugi viri informacij (mediji...), pretiravajo s svarjenjem in s tem prestrašijo otroke in tudi starše, ter jim dajejo lažni občutek ogroženosti. Tako recimo objava osnovnih osebnih podatkov, kot so rojstni datum in šola, katero učenec obiskuje, na spletnem omrežju Facebook ni tako kritična, kot opisujejo nekateri mediji.
Gospod Chroziller sporoča