Versions Compared

Old Version 18

changes.mady.by.user Unknown User (petterek)

Saved on

compared with

New Version 19

changes.mady.by.user Unknown User (petterek)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Wiki Markup
Hei.

Tämä on opetusteksti, jonka päämääränä on opettaa lukijaansa merkkaamaan HTML-kielellä vastaavanlainen sivu: [Paras Avoin Sivu Koskaan 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ä:&nbsp;
{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:

!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]