Tehtävänä oli piirtää viivoja ja kirjoittaa viivojen mukaisesti.
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>
<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>
torstai 11. syyskuuta 2014
CSS parametrit
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;
}
maanantai 1. syyskuuta 2014
Tilaa:
Blogitekstit (Atom)