...
<head></head><boby></body></html>
3. Otsikko, teksti, kuvat, linkit
-Lisäsimme bodyn (<body>) sisään otsikon (<h1>), joka on photoshopilla tehty kuva (<img/>):
<h1><img alt="kuvateksti" id="tunniste" src="polku josta kuvat löytyvät" /></h1>.
Lisäsimme tekstin (<p>) bodyn sisälle:
<p>teksti</p>.
Lisäsimme bodyyn myös hyperlinkit (<a>) jotka ovat kuvien muodossa, eli linkin sisällä on kuva:
<a href="sivun osoite"><img alt="kuvan nimi" src="polku josta kuvat löytyvät" /></a>.
4. Css-tiedoston luominen, tyylien määrittely
...
-Loimme Notepadilla css-tiedoston tallentaen tiedoston nimellä tyyli.css.
...
Tyylitiedostoon määrittelimme ensimmäiseksi body- tagille taustavärin, fontin ja fontin värin.
...
Tyylimääreet laitettiin bodyn sisään näin:
...
body{
...
background-color:värin nimi;
...
font-family:verdana;
...
color:värin nimi;
...
}
...
Tarkat värien nimet etsimme googlesta hakusanalla "html color names".
...
(http://www.w3schools.com/html/html_colornames.asp)
...
Samaan tyylitiedostoon määritimme otsikon tyylin h1{}, linkkien tyylin a{} ja kuvien tyylin img{}.
5. Sisältö
...
-Sisällön etsimme googlettamalla rumia nettisivuja ja lisäsimme sivut linkeiksi.
6. Favicon
...
-Googletimme sanan favicon, ja loimme generaattorilla kuvan jonka tallensimme ico- tiedostopäätteellä. (http://www.favicon.cc/)
...
Tämän jälkeen haimme ohjeet faviconin lisäämiseen googlesta hakusanalla "html favicon tag". (http://www.w3.org/2005/10/howto-favicon)
7. Validointi + virheiden korjaaminen
...
-Tarkistimme koodin osoitteessa http://validator.w3.org/ ja korjasimme virheet.
8. Sivut nettiin
...