22. Websivujen tekemisestä
Websivujen tekemisestä
-Käytämme web ohjelmointi työkalua nimeltä Brackets
-Brackets on ilmainen web ohjelmointi työkalu. Jos haluat kokeilla sitä myös kotona sen voit ladata osoitteesta http://brackets.io/
Apua päivän tehtävien tekemiseen löydät esimerkiksi
http://salakapakka.net/oppaat/html-ja-css-opas/index.php
Ja jos englanninkielisyys ei haittaa niin mahtava sivusto
https://www.w3schools.com/
Tässä pätkä esimerkki html tiedostoa, copy pastea se omaan brackets projektiisi ja kokeile mitä se tekee.
<!DOCTYPE html>
<html>
<title>Kokeilu</title>
<body>
<p>
Pieni kokeilu
</p>
<p id="demo">Tekstiä.</p>
<button type="button" onclick="myFunction()">Kokeile</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Teksti muutettu.";
}
</script>
</body>
</html>
Muuta tätä pätkää niin, että
-lisäät otsikon
-muutat jonkin osan väriä
Muuta sitten vielä napin painalluksesta tapahtuvaa asiaa. Esimerkiksi lisäämällä sivulle kuvan jonka muutat toiseksi napin painalluksella.
Esimerkin tästä löydät https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
Kun olet saanut muutoksesi toimimaan palauta html tiedosto palautuslaatikkoon.
Palautettuasi voit aloitella JavaScript harjoituksia sivulta
https://ohjelmointikurssi.github.io/
-Brackets on ilmainen web ohjelmointi työkalu. Jos haluat kokeilla sitä myös kotona sen voit ladata osoitteesta http://brackets.io/
Apua päivän tehtävien tekemiseen löydät esimerkiksi
http://salakapakka.net/oppaat/html-ja-css-opas/index.php
Ja jos englanninkielisyys ei haittaa niin mahtava sivusto
https://www.w3schools.com/
Tässä pätkä esimerkki html tiedostoa, copy pastea se omaan brackets projektiisi ja kokeile mitä se tekee.
<!DOCTYPE html>
<html>
<title>Kokeilu</title>
<body>
<p>
Pieni kokeilu
</p>
<p id="demo">Tekstiä.</p>
<button type="button" onclick="myFunction()">Kokeile</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Teksti muutettu.";
}
</script>
</body>
</html>
Muuta tätä pätkää niin, että
-lisäät otsikon
-muutat jonkin osan väriä
Muuta sitten vielä napin painalluksesta tapahtuvaa asiaa. Esimerkiksi lisäämällä sivulle kuvan jonka muutat toiseksi napin painalluksella.
Esimerkin tästä löydät https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb
Kun olet saanut muutoksesi toimimaan palauta html tiedosto palautuslaatikkoon.
Palautettuasi voit aloitella JavaScript harjoituksia sivulta
https://ohjelmointikurssi.github.io/
Html tiedostot tänne
Sinulla ei ole tarvittavia oikeuksia lähettää mitään.