...
1. Dokumenttityypin etsiminen netistä.
-Ensin haimme
...
oikean dokumenttityypin googlesta hakusanalla "html doctype".
(http://www.
...
w3schools.
...
com/tags/tag_doctype.asp)
2. Rakenne: (html, head, body)
-
...
Tageja käyttämällä teimme html:lle sen perusrakenteen:
<html>
<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
...
Z-asemalle siirtäminen
-Tarkistimme koodin osoitteessa http://validator.w3.org/ ja korjasimme virheet.
8. Sivut nettiin
-Siirsimme kaikki tiedostot palvelimelle (Z- asemalle) public_html- kansioon, jonka jälkeen tarkistimme että kaikki näyttää siltä kuin pitääkin.
9.VALMIS!