Tee omat nettisivut Esan ohjeiden mukaan omalle yrityksellesi.
Linkitä valmiit nettisivut omaan blogiisi.
maanantai 28. lokakuuta 2019
keskiviikko 23. lokakuuta 2019
17. Korjaa koodi
Kopioi seuraava html-koodi Muistioon (Macissa Texturi, muunna pelkäksi tekstiksi) ja tallenna se .html muotoon.
Koodissa on virheitä, jonka vuoksi se ei toimi oikein.
Korjaa virheet ja parantele sivun ulkoasua muutenkin mieleiseksesi.
Palauta sitten korjattu koodi omaan blogiisi.
Mikäli tarvitset ohjeita koodin kirjoittamisesta, neuvoja saa etsiä netistä.
koodi alkaa
__________________
<html>
<head>
<title>Oma sivu</tite>
<body bgcolor="#DB7093">
<h1>Kokeilu</h1><br>
lisää tekstiä<br>
vielä lisää tekstiä
<p><font face="arial" color="#6B4226">
<b>uusi kappale</b></font><>
<table border="1" width="900" align="center">
<tr>
<th colspan="3">eka solu</th>
<tr>
<td width="100">kolmas solu</td>
<td width="500">neljäs solu</td>
<td width="300">b solu</td>
</tr>
</table>
<br>
<table border="1" width="900" align="center">
<tr>
<td width="100">eka solu</td>
<th rowspan="2">otsikkosolu</th>
<td width="300">a solu<td>
</tr>
<tr>
<td width="100">kolmas solu</td>
<td width="300">b solu</td>
</tr>
</table>
<p>
<a href=http://www.kktavastia.fi target="blank">
<img ="kuvia/koulu_valmis.jpg" alt="Koulun sivuille">
</a>
</p>
<p>
<a href=http://www.kktavastia.fi target="_blank">Koulun sivut</a>
</p>
<p>
<a href="toka.html" target="_self">
<img src="kuvia/painike.jpg" alt="Toiselle sivulle">
</a>
</p>
<p>
<a href="kolmas.html" target="_self">
<img src="kuvia/painike2.jpg" alt="Kolmannelle sivulle">
</a>
</p>
</head>
________________________
koodi päättyy
Koodissa on virheitä, jonka vuoksi se ei toimi oikein.
Korjaa virheet ja parantele sivun ulkoasua muutenkin mieleiseksesi.
Palauta sitten korjattu koodi omaan blogiisi.
Mikäli tarvitset ohjeita koodin kirjoittamisesta, neuvoja saa etsiä netistä.
koodi alkaa
__________________
<html>
<head>
<title>Oma sivu</tite>
<body bgcolor="#DB7093">
<h1>Kokeilu</h1><br>
lisää tekstiä<br>
vielä lisää tekstiä
<p><font face="arial" color="#6B4226">
<b>uusi kappale</b></font><>
<table border="1" width="900" align="center">
<tr>
<th colspan="3">eka solu</th>
<tr>
<td width="100">kolmas solu</td>
<td width="500">neljäs solu</td>
<td width="300">b solu</td>
</tr>
</table>
<br>
<table border="1" width="900" align="center">
<tr>
<td width="100">eka solu</td>
<th rowspan="2">otsikkosolu</th>
<td width="300">a solu<td>
</tr>
<tr>
<td width="100">kolmas solu</td>
<td width="300">b solu</td>
</tr>
</table>
<p>
<a href=http://www.kktavastia.fi target="blank">
<img ="kuvia/koulu_valmis.jpg" alt="Koulun sivuille">
</a>
</p>
<p>
<a href=http://www.kktavastia.fi target="_blank">Koulun sivut</a>
</p>
<p>
<a href="toka.html" target="_self">
<img src="kuvia/painike.jpg" alt="Toiselle sivulle">
</a>
</p>
<p>
<a href="kolmas.html" target="_self">
<img src="kuvia/painike2.jpg" alt="Kolmannelle sivulle">
</a>
</p>
</head>
________________________
koodi päättyy
maanantai 21. lokakuuta 2019
16. CSS parametrit
CSS tyylit ovat tänä päivänä tärkein työkalu html sivujen ulkoasun ja asettelun muokkaamiseen.
Tee itsellesi muistilista mielestäsi 20 tärkeimmästä CSS parametrista ja kerro niiden ominaisuudet esimerkein näin:
----
font-family:
Määrittää fontin (voi olla useita: esim. Arial,Verdana) tai fonttiperheen (serif tai sans-serif tai cursive tai fantasy tai monospace.) Selain käyttää ensimmäistä koneelta löytyvää fonttia. Fonttiperhe annetaan siltä varalta, ettei annettua fonttia löydy koneelta.
esimerkki font-family parametrin käytöstä p -kappaletagin kanssa, määrittää kappaleen fonttityylin:
P {font-family: Arial,Helvetica,sans-serif;}
----
Tee itsellesi muistilista mielestäsi 20 tärkeimmästä CSS parametrista ja kerro niiden ominaisuudet esimerkein näin:
----
font-family:
Määrittää fontin (voi olla useita: esim. Arial,Verdana) tai fonttiperheen (serif tai sans-serif tai cursive tai fantasy tai monospace.) Selain käyttää ensimmäistä koneelta löytyvää fonttia. Fonttiperhe annetaan siltä varalta, ettei annettua fonttia löydy koneelta.
esimerkki font-family parametrin käytöstä p -kappaletagin kanssa, määrittää kappaleen fonttityylin:
P {font-family: Arial,Helvetica,sans-serif;}
----
15. Linkit ja ohjeet
Etsi internetistä tietoa mistä löydät ohjeita html-koodin kirjoittamisesta ja css-tyylien käyttämisestä internetsivuilla.
Tee löytämistäsi linkeistä itsellesi blogiisi muistilista, josta löydät hyödylliset linkit jatkossakin helposti.
Testaa löytämiäsi ohjeita yhdelle harjoitussivulle ja tee samalla itsellesi ohjeet yleisimmin käytettävistä koodeista
Esim. miten lisäät
- kuvan (img)
- tekstin muotoilut valmiita tyylimuotoilut (p, h1, h2...)
- linkin toiselle sivulle samassa hakemistossa (a href...)
- linkin ulkoiselle sivulle (target)
- linkki kuvasta
- miten käytetään css tyylejä joko html tiedoston osana tai ulkoisena tiedostona .css
- rivinvaihto (br) ja kappaleenvaihto (p) erot
- tallenna nimellä html-muotoon (.html)
Kirjoita harjoitusten koodit notepadilla/muistiolla. Voit tarvittaessa käyttää koodiesimerkkejä myös blogiisi kirjoittamissa ohjeissa.
Tee löytämistäsi linkeistä itsellesi blogiisi muistilista, josta löydät hyödylliset linkit jatkossakin helposti.
Testaa löytämiäsi ohjeita yhdelle harjoitussivulle ja tee samalla itsellesi ohjeet yleisimmin käytettävistä koodeista
Esim. miten lisäät
- kuvan (img)
- tekstin muotoilut valmiita tyylimuotoilut (p, h1, h2...)
- linkin toiselle sivulle samassa hakemistossa (a href...)
- linkin ulkoiselle sivulle (target)
- linkki kuvasta
- miten käytetään css tyylejä joko html tiedoston osana tai ulkoisena tiedostona .css
- rivinvaihto (br) ja kappaleenvaihto (p) erot
- tallenna nimellä html-muotoon (.html)
Kirjoita harjoitusten koodit notepadilla/muistiolla. Voit tarvittaessa käyttää koodiesimerkkejä myös blogiisi kirjoittamissa ohjeissa.
14. HTML rakenne
HTML PERUSRAKENNE
<html>
<head>
Tänne sijoitetaan sivujen ohjauselementit
</head>
<body>
Tänne tulee sivujen näkyvä sisältö
</body>
</html>
-----------------------------------------------------
HTML ja CSS
HTML5 on nykyisin yleisesti käytettävä verkkosivujen koodaustapa. Siinä kaikki muotoilut tehdään CSS tyylitiedostoon ja itse html koodiin ei kirjoiteta mitään muotoiluja. Muotoiluihin viitataan koodissa html-tageilla, luokilla ja div-elementeillä.
HTML5 koodi kirjoitetaan pienillä kirjaimilla
--------------index.html-------------
<html>
<head><title>Keskitetty sisältö</title>
<link href="ktyyli.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="ksisalto">
<h1>Keskitetty sisältö</h1>
<p>Keskittäminen tapahtuu määrittämällä lohkolle tietty leveys, sekä asettamalla sivumarginaalit yhtä suuriksi. Tekstin tasaukseen liittyvät määrittelyt ovat mukana, jotta myös vanhemmat selaimet osaisivat lukea sivun oikein</p>
<p>Liquid layoutilla tarkoitetaan sitä, että kaikki elementit on pyritty määrittelemään suhteellisesti selainikkunan kokoon.</p>
<img src="http://img.avatv.fi/mn_kuvat/mtv3/helmi/minisaitit/kapalakerho/kissat/2012/03/1356545.jpg" />
</div>
</body>
</html>
--------------ktyyli.css-------------
body {
text-align:center;
}
#ksisalto {
width:35em;
margin-left:auto;
margin-right:auto;
text-align:left;
}
Tee vastaavat harjoitukset esim muistiolla/notepadilla ja palauta blogiisi. Huomaa, että html sivu tulee tallentaa .html tiedostopäätteellä ja css-tyylitiedosto .css, jotta ne toimisivat selaimella oikein
https://drive.google.com/file/d/1ogu0YWlrKKD5aQBWQoPDAdkJ2YJoyH_3/view?usp=sharing
torstai 26. syyskuuta 2019
13. Internet kotikäytössä
Tutustu ja hae tietoa internetin avulla seuraavista asioista:
Etsi internetyhteyksiin liittyviä palveluita kotikäyttäjille tarjoavia yhtiöitä ja yhteisöjä. Tee näistä hinta- ja ominaisuusvertailuja; paljonko maksaa ja mitä ominaisuuksia ko hinnalla saa? Mitä kaikkia tulisi ottaa huomioon kun valitaan internetpalveluntarjoajaa?
Tutustu myös erilaisiin sähköpostipalveluihin
Minkälaisia sähköpostipalveluita löysit? Kuka tarjoaa ja mitä maksaa?
Millaisia palveluita ottaisit itsellesi? Perustele vastauksesi.
Kirjoita vastauksesi omaan blogiisi.
lauantai 21. syyskuuta 2019
12. Tietokantojen hyödyntäminen
Tämä harjoitus tehdään 3 hengen ryhmissä, joissa jokaisessa on yksi puheenjohtaja ja yksi sihteeri. Kaikki tuottavat ideoita. Puheenjohtaja antaa jokaiselle vuorollaan puheenvuoron, ja mahdollisuuden tuoda ajatuksiaan julki. Sihteeri kirjaa ideat. Aihe on kaikilla ryhmillä sama: tietokannat.
Pohtikaa yhdessä tietokannoista mm. seuraavaa:
Millaisia eri tietokantoja tiedätte?
Millaisissa tietokannoissa olette itse kirjoilla?
Missä kaikkialla tietokantoja mielestänne käytetään?
T
Tämän jälkeen jatkatte aiheen tarkastelua etsimällä Internetistä tarkennuksia sekä yllä oleviin omiin pohdintoihinne sekä alla oleviin kysymyksiin.
Mitä muuta tärkeää löydätte tietokannoista kerrottavaksi?
Listatkaa mahdollisimman paljon erilaisia tilanteita ja tietokantojen käyttötapoja!
Miettikää myös, miten tietokantoja hallinnoidaan?
Millaisia hallintajärjestelmät ovat/ voisivat olla? Ei arvailuja, vaan aitoa tiedonhakua.
Valitkaa sitten 1 tietokanta, jonka käyttöä tarkastelette tarkemmin. Mihin kaikkeen sitä voitaisiin käyttää?
* Jokainen kirjoittaa blogiinsa tästä harjoituksesta myös blogikirjoituksen, jossa on selkeästi vastauksia yllä oleviin kysymyksiin, sekä tarkastelussa olleesta tietokannasta esimerkkejä, mihin sitä käytetään ym. valinnaista infoa.
Muistakaa lisätä lähteet esitykseenne, ja tarkastella lähteiden luotettavuutta.
Pohtikaa yhdessä tietokannoista mm. seuraavaa:
Millaisia eri tietokantoja tiedätte?
Millaisissa tietokannoissa olette itse kirjoilla?
Missä kaikkialla tietokantoja mielestänne käytetään?
T
Tämän jälkeen jatkatte aiheen tarkastelua etsimällä Internetistä tarkennuksia sekä yllä oleviin omiin pohdintoihinne sekä alla oleviin kysymyksiin.
Mitä muuta tärkeää löydätte tietokannoista kerrottavaksi?
Listatkaa mahdollisimman paljon erilaisia tilanteita ja tietokantojen käyttötapoja!
Miettikää myös, miten tietokantoja hallinnoidaan?
Millaisia hallintajärjestelmät ovat/ voisivat olla? Ei arvailuja, vaan aitoa tiedonhakua.
Valitkaa sitten 1 tietokanta, jonka käyttöä tarkastelette tarkemmin. Mihin kaikkeen sitä voitaisiin käyttää?
* Jokainen kirjoittaa blogiinsa tästä harjoituksesta myös blogikirjoituksen, jossa on selkeästi vastauksia yllä oleviin kysymyksiin, sekä tarkastelussa olleesta tietokannasta esimerkkejä, mihin sitä käytetään ym. valinnaista infoa.
Muistakaa lisätä lähteet esitykseenne, ja tarkastella lähteiden luotettavuutta.
Tilaa:
Blogitekstit (Atom)