http://users.metropolia.fi/~nooraes/
Päätimme tehdä sivut, jossa on linkkejä rumille nettisivuille.
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.
...
...
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/
...