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
Tilaa:
Blogitekstit (Atom)