| Wiki Markup |
|---|
Hei. |
...
Tämä on opetusteksti, jonka päämääränä on opettaa lukijaansa merkkaamaan HTML-kielellä vastaavanlainen sivu: [Paras Avoin Sivu Koskaan |
...
Tiedoston luominen
...
AIkuisille|http://users.metropolia.fi/~petterek/Koulutyot/HTML-viikkotehtava/paras%20sivu.html] h5. Tiedoston luominen Ohjelmistoksi käy esimerkiksi notepad++, notepad tai Adobe Dreamweaver. |
...
Avattuasi valitsemasi ohjelman, aloita tiedosto kirjoittamalla vastaavanlainen rivi: <\!Doctype html> |
...
Tämä rivi näyttää minkä tyyppinen HTML-tiedosto on kyseessä. |
...
Seuraavalle riville kirjoita <head>. Tiedoston mahdolliset CSS-elementit tulevat tälle alueelle. Sulje seuraavaksi alue kirjoittamalla </head>. |
...
Tämän tehtyäsi tulee sinun avata tiedoston varsinainen html-alue. Avaa alue kirjoittamalla <body> ja sulje se kirjoittamalla </body>. Näiden väliin voit kirjoittaa yksinkertaista tekstiä ja se tulee sivulle esiin sellaisenaan. Esimerkiksi: |
...
<body> |
...
Hei, tämä tässä on pätkä tekstiä. |
...
</body> |
...
Lopuksi, sulje html-pätkä kirjoittamalla </html>. Nyt sinulla on valmiina html-tiedoston perusrakenne ja seuraavaksi pääset täyttämään tulevaa sivuasi sisällöllä. Suosittelemme, että tallennat tiedostosi jo tässä vaiheessa, varmistaen, että tallennat sen .html-muotoon. Kannattaa myös säännöllisin väliajoin tehdä välitallennuksia. |
...
h5. Faviconin, CSS-elementtien ja scriptin lisäys |
...
Muistatko alueen, jonka alun ja lopun merkitsit <head> ja </head> merkinnöillä? Sivullesi haluamat CSS-elementit kirjoitetaan tähän väliin. CSS-elementit luovat sivuston ulkoasun. Esittelemällämme sivulla on myös käytössä favicon, eli pieni ikoni, joka näkyy esimerkiksi osoiterivillä. Tämä favicon lisätään kirjoittamalla seuraava pätkä: |
...
| Code Block |
|---|
{code}<link REL="SHORTCUT ICON" HREF=" favicon.ico">{code} jossa korvaat "favicon.ico" \-osan faviconisi tiedostonimellä. Tiedoston tulee olla samassa parent directoryssä kuin kirjoitettava sivu. Sama pätee mahdollisiin "alasivuihin". |
...
Sivullamme käyttämä CSS näkyy seuraavan linkin takaa: |
...
CSS tekstissämme auttaa muodostamaan sivumme taustan ja sen värit sekä fontit ja fonttien värit. Ensimmäiset kolme osiota määrittävät ensin taustan värin ja sitten taustassa näkyvät "suorakulmiot". Loput CSS osiosta (h1.otsikko lähtien) muokkaa tekstin ja linkkejen värejä ja fontteja.
Ja tässä vielä ohjeet loppuun sivuun tarvittavaan koodiin:
...
!paska-css.png|border=1!
CSS tekstissämme auttaa muodostamaan sivumme taustan ja sen värit sekä fontit ja fonttien värit. Ensimmäiset kolme osiota määrittävät ensin taustan värin ja sitten taustassa näkyvät "suorakulmiot". Loput CSS osiosta (h1.otsikko lähtien) muokkaa tekstin ja linkkejen värejä ja fontteja.
Ja tässä vielä ohjeet loppuun sivuun tarvittavaan koodiin:
!paska-bodyohjeistus.png|border=1!
Tässä vielä sivumme lähdekoodit: [Sivu 1|http://users.metropolia.fi/~petterek/Koulutyot/HTML-viikkotehtava/PASKA1.txt] [Sivu 2|http://users.metropolia.fi/~petterek/Koulutyot/HTML-viikkotehtava/PASKA2.txt] |