Verkkopalvelun Käyttäminen

maanantai 9. lokakuuta 2017

CSS Parametrit

Tässä mielestäni 20 tärkeintä CSS parametriä.

display:

Määrittää kuinka joku elementti näytetään. Eri asetuksia display:lle on 20.

Esimerkkejä ja niiden selitykset:

display: inline; määrittää elementin näkymään samalla rivillä kuin jokin muu elementti jonka sisällä tämä elementti on

display: block; määrittää elementin siirtymään seuraavalle riville sen sijaan että se pysyisi samalla rivillä

display: none; määrittää elementin näkymättömäksi

-----------------------------------------------------------------------

margin:

Määrittää valkoisen reunuksen elementtejen väliin.

Esimerkkejä ja niille selitykset:

margin: 2px 3px 4px 5px; määrittää jokaiselle sivulle oman reunuksen järjestyksellä ylä, oikea, ala, vasen

margin: 2px 4px; määrittää ylä ja ala reunukset 2 pikseliä ja vasemman ja oikean reunuksen 4 pikseliä

margin-right: 3px; määrittää oikean reunuksen 3 pikseliä

-----------------------------------------------------------------------

padding:

Määrittää reunuksen elementin sisällä.

Esimerkkejä ja niille selitykset:

padding: 4px 2px 3px 6px; määrittää jokaiselle sivulle oman sisennyksen samalla järjestyksellä kuin moni muukin css elementti määrittää koot

padding: 3px 4px 2px; määrittää ylä sisennyksen 3 pikseliä, vasemman ja oikean sisennyksen 4 pikseliä ja ala sisennyksen 2 pikseliä

padding-bottom: 6px; määrittää ala sisennyksen 6 pikseliä

-----------------------------------------------------------------------

color:

Määrittää tekstin värin.

Esimerkkejä ja niille selitykset:

color: red; määrittää tekstin väriksi normaalin punaisen

color: #fff; määrittää tekstin väriksi hex värikoodin mukaan valkoisen

color: rgb(255, 255, 255); määrittää tekstin väriksi valkoisen rgb värien mukaan

color: rgba(255, 255, 255, 0.4); määrittää tekstin väriksi valkoisen rgb värien mukaan ja lisää läpinäkyvyys kanavalla läpinäkyvyyttä tekstiin

-----------------------------------------------------------------------

background-color:

Määrittää taustavärin elementille.

Koska tämän parametrin sisällöt ovat samat kuin pelkästään colorilla niin en laita tähän esimerkkejä.

-----------------------------------------------------------------------

background-image:

Määrittää taustakuvan elementille.

Esimerkki:

background-image: url('tausta/taustakuva.png');

-----------------------------------------------------------------------

background-attachment:

Määrittää taustan siirtyvyyden. Usein käytetään siihen että kuva pysyy paikallaan kun sivua rullaa.

Esimerkki:

background-attachment: fixed; Kuva pysyy paikallaan kun sivua rullaa

background-attachment: scroll; Tausta rullaa sivun mukana, alkuperäinen asetus

-----------------------------------------------------------------------

text-decoration:

Määrittää tekstin koristelun.
Esimerkki:

text-decoration: none; poistaa kaikki tekstin koristeet esim linkin alleviivauksen

-----------------------------------------------------------------------

text-align:

Määrittää tekstin tasauksen.
Esimerkki:

text-align: center; tasaa tekstin keskelle

-----------------------------------------------------------------------

text-transform:

Määrittää että käyttääkö teksti isoja kirjaimia.
Esimerkkejä:

text-transform: uppercase; määrittää kaikki kirjaimet isoiksi kirjaimiksi
text-transform: lowercase; määrittää kaikki kirjaimet pieniksi kirjaimiksi
text-transform: capitalize; määrittää ensimmäisen kirjaimen isoksi

-----------------------------------------------------------------------

font-size:

Määrittää fontin koon.
Esimerkki:

font-size: 18px;

-----------------------------------------------------------------------

font-family:

Määrittää fontti perheen.
Esimerkki:

font-family: Arial, sans-serif; määrittää fontiksi arialin

-----------------------------------------------------------------------

list-style-type:

Määrittää listan tyylin.
Esimerkit:

list-style-type: none; poistaa listan pallurat
list-style-type: upper-roman; muuttaa järjestyksellisen listan numeroinnin isoiksi roomailaisiksi numeroiksi

-----------------------------------------------------------------------

position:

Määrittää elementin paikan määrittämis tavan.
Esimerkkejä:

position: relative; määrittää elementin paikan muuttamisen relatiiviseksi
position: fixed; määrittää elementin paikan pysyväksi; joten kun sivua rullaa, elementti pysyy samassa kohdassa sivua. Tämä on hyödyllistä esimerkiksi navigointipalkkia tehdessä

-----------------------------------------------------------------------

width/height:

Määrittää elementin pituuden tai leveyden.
Esimerkkejä:

height: 200px; määrittää elementin korkeudeksi 200 pikseliä
width: 50%; määrittää elementin leveydeksi puolet koko alueen leveydestä

-----------------------------------------------------------------------

float:

Määrittää elementin kiinnityksen sivun reunaan.
Esimerkki:

float: right; kiinnittää elementin sivun oikeaan reunaan

-----------------------------------------------------------------------

border-radius:

Määrittää kehyksen reunojen pyöreyden
Esimerkki:

border-radius: 3px; määrittää reunojen pyöreydeksi 3 pikseliä

-----------------------------------------------------------------------

border-color:

Määrittää kehyksen värin.
Esimerkki:

border-color: red; vaihtaa kehyksen väriksi punaisen

-----------------------------------------------------------------------

border-style:

Määrittää kehyksen tyylin.
Esimerkit:

border-style: dashed; määrittää kehyksen viivoitetuksi
border-style: double; määrittää kehyksen tyylin kaksi kehyksiseksi

-----------------------------------------------------------------------

border-width:

Määrittää kehyksen paksuuden.
Esimerkit:

border-width: 2px 3px 2px 4px; määrittää kaikille kehyksen sivuille omat paksuudet
border-width: 3px 2px; määrittää kehyksen ylä ja ala sivujen paksuuksiksi 3 pikseliä ja vasemman ja oikean sivun paksuudeksi 2 pikseliä

sunnuntai 8. lokakuuta 2017

Korjaa koodi

<html>
<head>
<title>Oma sivu</title>
</head>
<body bgcolor="#DB7093">
<h1>Kokeilu</h1>
<p>lisää tekstiä<br>vielä lisää tekstiä</p>
<p><font face="arial" color="#6B4226"><b>uusi kappale</b></font></p>
<table border="1" width="900" align="center">
<tr>
<th colspan="3">eka solu</th>
</tr>
<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>
<th rowspan="2">otsikkosolu</th>
<td width="100">eka solu</td>
<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 src="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>
</body>
</html>

Tekijänoikeudet

Asioita joita pitää huomioida kun käyttää kuvia omissa töissään:

Jos omistat teoksen, voit tehdä sillä mitä haluat
Jos et omista teosta, tarkista että mitkä oikeudet sinulla on kyseiseen teokseen
Kun olet etsimässä esim. kuvaa Googlesta, muista laittaa suodatus oikeuksien perusteella
Jokaisella tekijänoikeuksien alaisella teoksella on suoja-aika. Suoja-aika kestää teoksen syntyhetkestä 70 vuotta teoksen tekijän kuoleman jälkeen. Suoja-ajan päätyttyä kaikilla on oikeus vapaasti käyttää näitä teoksia.
Jotkin antavat käyttää niiden teoksia sillä ehdolla että sinä mainitset teoksen tekijät teoksen omistajina
Jos loukkaa tekijänoikeuksia tahallaan, se katsotaan rikokseksi. Tahattomasta loukkaamisesta ei usein anneta rangaistusta mutta pyydetään poistamaan kyseisen henkilön/henkilöiden teokset.
Valokuvilla tekijänoikeus laki pätee jos ne ylittävät teoskynnyksen. Valokuvien suoja-aika teoskynnyksen alla on 50 vuotta.
Jos loukkaa tekijänoikeuksia, on loukkaajalla velvollisuus hyvittää loukkaus
Jos haluat saada oikeudet jonkun teokseen, sinun tarvitsee kysyä oikeuksia teoksen tekijältä.
Jos haluat saada oikeudet muokattuun teokseen jolla on omat oikeudet, sinun tarvitsee kysyä lupaa alkuperäiseltä teoksen tekijältä sekä sen muokkaajalta.

Alla olevat kuvat ovat kaikki creative commons oikeuksisia

Kolme kuvaa Flikr palvelusta:

Ihminen

Kasvi

Rakennus

Kuva google kuvahausta:

Sammakko

Kuvapankkeja joista saa ilmaiseksi kuvia on esim. Pixabay, Pexels, PhotoPin ja Wikimedia Commons

Internet Kotikäytössä

Vertailin Elisan, Telian ja DNA:n 4G nettiyhteyksien hintoja.

Elisa/Saunalahti:

4G 50M

Liittymä : 22€/kk (aluksi 17,90 mutta muuttuu koko hintaan 6kk jälkeen)

Reititin: 6,50€/kk

Yht: 28,40€/kk

Telia:

4G 100M

Liittymä: 29,90€/kk (aluksi 24,90 mutta muuttuu koko hintaan 12kk jälkeen)

Reititin: saatavilla erikseen 6,50€/kk

Yht: 36,40€/kk

DNA:

4G 50M

Liittymä: 21,90€/kk (aluksi 24,90€/kk mutta muuttuu koko hintaan jossain vaiheessa)
Reititin: mukana liittymän hinnassa

Sähköposti palveluita löytyy internetpalveluntarjoajilta mutta en suosittelisi niitä koska on olemassa ilmaisia sähköposti palveluita. Suosituin on Gmail pari muuta suosittua ilmaista on Outlook ja Yahoo Mail.

Itse hommaisin 4G yhteyden mutta en muuta koska en koe mitään muuta tarpeelliseksi. Itse en tarvitse mitään sähköposti palvelua koska käytän jo gmailia.

tiistai 12. syyskuuta 2017

Uutisten Seuraaminen

7.9.2017
Microsoftin Edge nettiselaimessa on vaarallinen aukko jota Microsoft ei ole paikkaamassa. Microsoftin mukaan Edgessä on tarkoituksellaan jätetty tämä tietoturva aukko.

http://www.is.fi/digitoday/tietoturva/art-2000005357938.html

Tietoturva

Tietokonetta käyttäessä on tärkeää ottaa huomioon tietoturva. Kun käyttää laitetta internetissä kannattaa tarkistaa että palomuuri on käytössä ja että reitittimen langattoman yhteyttä käyttäessä on käytössä salasana. Liitetiedostojen tiedostopäätteet kannattaa aina katsoa ennen kuin päättää avata tiedoston joka on tullut sähköpostin kautta. Virustentorjunta on hyvä olla vaikka luulisi että osaa itse pysyä turvassa haittaohjelmilta ja tietokoneen ohjelmat ja käyttöjärjestelmä kannattaa pitää päivitettynä. Kun kulkee internetissä, kannattaa katsoa sivuston osoitetta ettet laita tietojasi kalastussivustolle. Älä anna kenellekkään omia salasanoja tai muita henkilökohtaisia tietoja netissä. Kun on yleisillä tietokoneilla vaikka kirjastossa muista kirjautua ulos kaikista palveluista ja tyhjennä selaustiedot.