http://users.metropolia.fi/~nooraes/
Päätimme tehdä sivut
...
, jossa on linkkejä rumille nettisivuille.
...
Dokumenttityypin etsiminen netistä.-
1. Tiedoston luominen ja dokumenttityypin määrittely
-Loimme Notepadilla uuden tiedoston, jonka tallensimme nimellä index.htm
Sen jälkeen haimme tiedostolle 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. Css- tiedosto linkitettiin html- tiedostoon.
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 kuvallisiksi 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.
9.VALMIS!
-Tässä ovat valmiit nettisivumme: http://users.metropolia.fi/~nooraes/
...