Sivun näyttöjä yhteensä

maanantai 29. syyskuuta 2014

sunnuntai 21. syyskuuta 2014

sunnuntai 14. syyskuuta 2014

Mainos

Tehtävänä oli tehdä mainos jostain elektroniikka tuotteesta.



Tein kuva Adoben Illustrator ja PhotoShop ohjelmilla. Yritin keskittyä mainoksen ulkoasuun että se olisi mielenkiintoisen näköinen ja houkutteleva. 

Korjaa koodi

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="tyyli.css" type="text/css" media="all" />
<title>Niko Lehtinen</title>
</head>

<body bgcolor="#DB7093">
<h1>Niko Lehtinen</h1>
<p>16v poika Hämeenlinnasta <br>
Harrastan tietokonepelien<br>
pelaamista</p>
<b>Jotai</b></font>

<table border="1" width="900" align="center">
  <tr>
 <th colspan="3">Niko Lehtinen</th>
    </tr>
</table>
<br>
<table border="1" width="900" align="center">
  <tr>
 <td width="100" height="45">28.06.1998</td>
 <th rowspan="2">Datanomi</th>
 <td width="200">2014-2015</td>
  </tr>
  <tr>
 <td width="100">Hämeenlinna</td>
  </tr>
</table>


<a href=http://www.kktavastia.fi target="blank">
<img" alt="Koulun sivuille" width="82" ="fb.jpg>
</a>



</br>
<br>

<a href="https://www.facebook.com" target="_self">
<img src="fb.png" alt="Toiselle sivulle" width="87" height="80" weight="160">

<br>

<a href="https://www.youtube.com/?gl=FI&hl=fi" target="_self">
<img src="youtube.png" alt="Kolmannelle sivulle" width="68" height="40" weight="80" >
</a>

</body>
</html>

Harjoitus Kenny ja nature

Piirrä kenny!

Piirsin Illustratorilla Kennyn.



torstai 11. syyskuuta 2014

CSS parametrit

 
Background:

 määrittää taustakuvan koon, paikan, toiston, värin ja yms.
 esim. body {
  background-image: url(nimi.jpg / www.kuva.fi);  (Kuva)
  background_color: black;             (Väri)
  background-repeat: no-repeat;        (Toisto)
  background-position: right top;      (Sijainti)
  }

Font:

 määrittää tekstin "perheen", koon, paksuuden, tyylin.
 esim. p {
  font-family: fantasy, cursive, Serif;("Perhe")
  font-style: italic       (Tyyli)
  font-size: 10px;       (Koko)
  font-weight: 900       (Pasksuus)
  }

Volume:

 määrittää äänen kovuuden.
 esim. h1{
  volume: 50;        (Voimakkuus)
  tai
  volume: silent, x-soft, soft, medium, loud, x-loud, inherit
  }

Text-shadow:

 määritetään tekstille varjo.
 esim. h1{
  text-shadow: 4px 4px 6px blue      (varjo)
  }

Outline:

 märittää reunukset
 esim. p {
  outline: thick solid red      (Punaiset reunat)
  }

Float:

 määrittää tekstin paikan (vasen / oikea)
 esim. h1{
  float: left        (h1 teksti vasemmalle puolelle...)
  }

Margin:

 siirtää koko "tekstilaatikkoa"
 esim. p {
      margin-top: 50px;       (ylä 50px)
       margin-bottom: 50px;       (ala 50px)
       margin-right: 50px;       (oikea 50px)
  margin-left: 50px;       (vasen 50px)
  }

Padding:

 siirtää tekstiä "laatikon sisällä"
 esim. p {
      padding-top: 50px;       (ylä 50px)
       padding-bottom: 50px;       (ala 50px)
       padding-right: 50px;       (oikea 50px)
  padding-left: 50px;       (vasen 50px)
  }

Div top, bottom, right, left:

 voi määrittää missä jokin asia sijaitsee netti sivulla
 esim. div{
   position: relative;
   top: 20px;
   }

Text-align:

 määritetään onko teksti tasoitettu oikealle, vasemmalle vai keskelle
 esim. div{
  text-align: left, right, center;
  }

Border:

 voidaan tehdä laatikko teksti laatikon ympärille
 esim. div.styled {
     border:2px dotted #ff9900;
     }
   <div class="styled"> (tarvitsee tämän)

Color:

 määritetään taustan tai fontin väri
 esim. h1{
  color: red;
  color: #ff0000;
  color: rgb(255,0,0);
  color: rgb(100%,0%,0%);
  }

White-space:

 Määritetään rivinvaihto
 esim. p {
      white-space: nowrap, normal, pre, inherit;
  }

Empty-cells:

 Määrittää, että näytetäänkö tyhjät lokerot
 esim. table {
   empty-cells: hide, show, inherit;
   }