-
Created by Unknown User (mariakui), last modified by Unknown User (nooraes) on 19.9.2011
You are viewing an old version of this page. View the current version.
Compare with Current
View Page History
« Previous
Version 18
Next »
Päätimme tehdä sivut, jossa on linkkejä rumille nettisivuille.
1. Dokumenttityypin etsiminen netistä.
-Ensin haimme oikean dokumenttityypin googlesta hakusanalla "html doctype".
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!
You must log in to comment.