Veebilehekülgede tegemiseks ei pea kõike algusest peale ise HTML-is kirjutama. Võimalusi oma tegemisi internetis kajastada on väga palju ning kodulehe või blogi tegemiseks ei pea tegelikult isegi HTML-i oskama.
Küll aga annab arusaamine HTML-ist ja CSS-ist võimaluse veebilehekülge omanäolisemaks ning mallidest erinevamaks "tuunida".
Keskkonnad, kus saab endale kerge vaevaga kena kodulehe või blogi, on näiteks
Blogger www.blogger.com (www.blogspot.com) - seda keskkonda saab kasutada Google kontoga ehk ka kooli e-postiaadressiga. Võimalus on kasutada valmis "malle". Kodulehe või blogi veebiaadressiks saab tasuta konto puhul sinuantudnimi.blogspot.com
Weebly http://www.weebly.com/ - keskkonna kasutamiseks tuleb luua kasutajakonto. Edasi on võimalik kasutada valmis "malle". Tasuta konto puhul on kodulehe aadressiks sinuantudnimi.weebly.com
Juhendid: http://multimeediaring.blogspot.com/2014/02/kodulehekulje-tegemine-weebly-keskkonnas.html
ja http://multimeediaring.blogspot.com/2014/02/kodulehekulge-tegemine-weebly.html
Wix http://www.wix.com/ - keskkonda saab kasutada ka Google kontoga (ka kooli e-postiaadressiga). See on ilmselt eelnimetatutest kõige rohkem erinevaid võimalusi pakkuv keskkond! Kasutada saab valmis "malle", millele on lisatud juba animatsioone. Enamasti saab kasutada tervet valmis leheküljestikku, millele siis tuleb lihtsalt oma sisu lisada.
Tasuta konto puhul on kodulehe aadressiks sinukasutajanimi.wix.com/leheküljenimi
Juhend: http://multimeediaring.blogspot.com/2013/01/kodulehe-tegemine-wwwwixcom.html
Wordpress http://www.wordpress.com/ - palju kasutatud keskkond, kahjuks veebipõhine tasuta leht ei võimalda eriti valmis "mallide" muutmist (HTML ja CSS lisamist). Samas on võimalik Wordpressi programm ka enda arvutisse installeerida ning siis on juba kõik võimalused ka koodi muutmiseks olemas. Rohkem infot leiab lehelt: https://et.wordpress.org/
Programmeerimise algõpetus
laupäev, 25. mai 2019
kolmapäev, 22. mai 2019
HTML koodi tutvustus, pildi ja lingi lisamine
Proovime täna selle lehekülge abiga kirjutada html-keeles lehekülje ning seda siis veebilehitsejaga vaadata.
Lehekülje kirjutame programmis Notepad. Selleks ava oma arvutis Start -> All Programs -> Accessories -> Notepad
Sinna võid kirjutada näiteks järgmise koodi:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Lehekülje pealkiri</TITLE>
</HEAD>
<BODY>
<h1>Suur pealkiri</h1>
<p>Siin on tekstilõik</p>
<img src="http://www.viimsi.edu.ee/public/kodulehe_pais7_1.jpg" />
</BODY>
</HTML>
Tuleta meelde eelmisel tunnil õpitud kood.
Kui see on meelest läinud, siis spikker on siin:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
HTML koodinäiteid saab testida siin:
http://www.w3schools.com/html/html_examples.asp
Notepad'i dokumendi salvestamine html-formaati.
Selleks, et veebilehitseja meie dokumenti oskaks avada, tuleb Notepadis valmis tehtud dokument salvestada HTML formaati.
Selleks klõpsa File -> Save As ning vali Save as type alt All Files (vt joonis allpool). Nüüd kirjuta File namereale oma faili nimi (näiteks esimene) ja lisa kohe nime järele punkt ning lühend html
Näiteks: esimene.html
Klõpsa save.
Nüüd leia oma dokument üles ning tee ta veebilehitsejaga lahti. Nüüd näed, milline see lehekülge internetis välja näeks.
Lehekülje kirjutame programmis Notepad. Selleks ava oma arvutis Start -> All Programs -> Accessories -> Notepad
Sinna võid kirjutada näiteks järgmise koodi:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Lehekülje pealkiri</TITLE>
</HEAD>
<BODY>
<h1>Suur pealkiri</h1>
<p>Siin on tekstilõik</p>
<img src="http://www.viimsi.edu.ee/public/kodulehe_pais7_1.jpg" />
</BODY>
</HTML>
Tuleta meelde eelmisel tunnil õpitud kood.
Kui see on meelest läinud, siis spikker on siin:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
HTML koodinäiteid saab testida siin:
http://www.w3schools.com/html/html_examples.asp
Notepad'i dokumendi salvestamine html-formaati.
Selleks, et veebilehitseja meie dokumenti oskaks avada, tuleb Notepadis valmis tehtud dokument salvestada HTML formaati.
Selleks klõpsa File -> Save As ning vali Save as type alt All Files (vt joonis allpool). Nüüd kirjuta File namereale oma faili nimi (näiteks esimene) ja lisa kohe nime järele punkt ning lühend html
Näiteks: esimene.html
Klõpsa save.
Nüüd leia oma dokument üles ning tee ta veebilehitsejaga lahti. Nüüd näed, milline see lehekülge internetis välja näeks.
Ülesanne 1
- Vaheta oma failis ära pilt (selleks otsi internetist meelepärane pilt vaata selle aadressi) ja lisa pildi alla ka link, kust pildi leidsid (osavamad võivad muuta pildi enda klikitavaks lingiks, kuidas seda teha, vaata siit).
- Lisa kodulehele pealkirjaks "Sinu eesnimi koduleht".
- Paiguta pilt pealkirja järele.
- Lisa kodulehele tekst, kus kirjutad, mida oled senistest programmeerimisetundidest teada saanud ja mida tahaksid veel teada saada!
reede, 10. mai 2019
Python - graafiline kasutajaliides
Esmalt lae siit alla fail nimega easygui.py ja salvesta see oma kausta kooli arvutivõrgus.
NB! See fail peab olema nende pythoni programmi failidega, mis seda funktsiooni kasutavad, samas kaustas!
Easygui funktsiooni kasutava programmi puhul tuleb funktsioon esmalt importida (nagu ka turtle funktsiooniga tegime).
from easygui import *
Graafilisel kasutajaliidesel on teateaken, mida kirjeldatakse funktsiooniga msgbox
Katseta programmi:
from easygui import *
msgbox("Kui näed seda akent, klõpsa OK")
Funktsioon buttonbox kuvab aknakese, milles on nupud ja mis registreerib nende nuppude vajutamise. Nuppudele ilmuvad kirjad saab funktsioonile ette anda muutujaga choices
NB! See fail peab olema nende pythoni programmi failidega, mis seda funktsiooni kasutavad, samas kaustas!
Easygui funktsiooni kasutava programmi puhul tuleb funktsioon esmalt importida (nagu ka turtle funktsiooniga tegime).
from easygui import *
Graafilisel kasutajaliidesel on teateaken, mida kirjeldatakse funktsiooniga msgbox
Katseta programmi:
from easygui import *
msgbox("Kui näed seda akent, klõpsa OK")
Katseta programmi:
from easygui import *
buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
Kui me soovime, et programm ka kasutaja valikule kuidagi reageeriks, siis tuleks nupuvajutus muutujasse salvestada (allolevas näites salvestatakse kasutaja tehtud valik muutujasse nimega valik).
Kolmandas reas anname kasutajale tema valikust teada msgbox funktsiooni kasutades.
from easygui import *
valik=buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
msgbox("Sinu valik oli "+valik)
Võime vastamise teha ka valikust sõltuvaks, selleks saame kasutada tingimuslauset if ... else
from easygui import *
valik=buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
if valik == "JAH":
msgbox("Tore, et sulle meeldib programmeerimist õppida!")
elif valik == "EI":
msgbox("Kahju!")
else:
msgbox("Kas soovid akna sulgeda?") #Seda kuvatakse juhul, kui kasutaja proovib akent ristist sulgeda
Kasutajalt saab andmeid küsida enterbox abil.
from easygui import *
nimi=enterbox("Mis su nimi on?")
msgbox("Sinu nimi on: "+nimi)
Kui soovid küsida kasutajalt ainult arvu, siis saad kasutada funktsiooni integerbox. Siin on võimalik anda ette ka piirid, mille vahele vastus peab jääma (kui kirjutada piiridest väljaspoole jääv vastus, siis antakse sellest teada ja küsitakse uuesti).
vanus = integerbox("Kui vana te olete?", lowerbound = 1, upperbound = 100)
Ülesanne 19
Täienda tunni jooksul tehtud katsetusi nii, et saaksid kasutajaliidese, mis küsib kasutaja nime ja vanust ning väljastab teate "Tere, <nimi>! Oled <vanus> aastane!"
Ülesanne 20
Loo kasutajaliides (võid kasutada ühel varasemal tunnil valminud matemaatika programmi), kus kasutaja saab sisestada 2 arvu (kaks integerbox'i) ning edasi valida, millise tehte ta nendega teeb (liidab, lahutab, korrutab või jagab). Edasi kuvatakse talle teade, kus on toodud arvud, nendega tehtud tehe ja vastus.
Näiteks:
NB! Selleks, et jagamisel kuvataks lõpmatute kümnendmurdude puhul vastuses näiteks ainult 2 komakohta, tuleb kasutada funktsiooni round
round(arv1/arv2,2) - jagatis ümardatakse sajandikeni (2 kohta peale koma).
Ülesanne edasijõudnutele
Uuri alloleval lingil olevat näidet pildi lisamise kohta buttonbox'i. Otsi internetist sobiv pilt ja programmeeri vastav liides näiteks küsimusega, kas pilt meeldib või mitte (nupud) ning vastus erinevatele valikutele (näiteks: "Tore, et pilt sulle meeldib!", "Kahju, et pilt ei meeldinud" vms).
http://easygui.sourceforge.net/tutorial.html#how-to-show-an-image-in-a-buttonbox
from easygui import *
buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
Kui me soovime, et programm ka kasutaja valikule kuidagi reageeriks, siis tuleks nupuvajutus muutujasse salvestada (allolevas näites salvestatakse kasutaja tehtud valik muutujasse nimega valik).
Kolmandas reas anname kasutajale tema valikust teada msgbox funktsiooni kasutades.
from easygui import *
valik=buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
msgbox("Sinu valik oli "+valik)
Võime vastamise teha ka valikust sõltuvaks, selleks saame kasutada tingimuslauset if ... else
from easygui import *
valik=buttonbox("Tahad programmeerimist õppida?", choices = ("JAH", "EI"))
if valik == "JAH":
msgbox("Tore, et sulle meeldib programmeerimist õppida!")
elif valik == "EI":
msgbox("Kahju!")
else:
msgbox("Kas soovid akna sulgeda?") #Seda kuvatakse juhul, kui kasutaja proovib akent ristist sulgeda
Kasutajalt saab andmeid küsida enterbox abil.
from easygui import *
nimi=enterbox("Mis su nimi on?")
msgbox("Sinu nimi on: "+nimi)
Kui soovid küsida kasutajalt ainult arvu, siis saad kasutada funktsiooni integerbox. Siin on võimalik anda ette ka piirid, mille vahele vastus peab jääma (kui kirjutada piiridest väljaspoole jääv vastus, siis antakse sellest teada ja küsitakse uuesti).
vanus = integerbox("Kui vana te olete?", lowerbound = 1, upperbound = 100)
Ülesanne 19
Täienda tunni jooksul tehtud katsetusi nii, et saaksid kasutajaliidese, mis küsib kasutaja nime ja vanust ning väljastab teate "Tere, <nimi>! Oled <vanus> aastane!"
Ülesanne 20
Loo kasutajaliides (võid kasutada ühel varasemal tunnil valminud matemaatika programmi), kus kasutaja saab sisestada 2 arvu (kaks integerbox'i) ning edasi valida, millise tehte ta nendega teeb (liidab, lahutab, korrutab või jagab). Edasi kuvatakse talle teade, kus on toodud arvud, nendega tehtud tehe ja vastus.
Näiteks:
NB! Selleks, et jagamisel kuvataks lõpmatute kümnendmurdude puhul vastuses näiteks ainult 2 komakohta, tuleb kasutada funktsiooni round
round(arv1/arv2,2) - jagatis ümardatakse sajandikeni (2 kohta peale koma).
Ülesanne edasijõudnutele
Uuri alloleval lingil olevat näidet pildi lisamise kohta buttonbox'i. Otsi internetist sobiv pilt ja programmeeri vastav liides näiteks küsimusega, kas pilt meeldib või mitte (nupud) ning vastus erinevatele valikutele (näiteks: "Tore, et pilt sulle meeldib!", "Kahju, et pilt ei meeldinud" vms).
http://easygui.sourceforge.net/tutorial.html#how-to-show-an-image-in-a-buttonbox
Tellimine:
Postitused (Atom)