http://users.metropolia.fi/~nooraes/
Päätimme tehdä sivut, jossa on linkkejä rumille nettisivuille.
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;
{color:#ff6600}}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
-Siirsimme kaikki tiedostot palvelimelle (Z- asemalle) public_html- kansioon, jonka jälkeen tarkistimme että kaikki näyttää siltä kuin pitääkin.