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;}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.

9.VALMIS!

Child pages

Rumat nettisivut-ohjeet

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.

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.

9.VALMIS!