Wiki: miten tehdään www-sivu:

Ryhmämme toteutti tämän linkin takaa löytyvän www-sivun:

http://users.metropolia.fi/~villesc/harjoitukset/kayttajalahtoinensuunnittelu/htmlviikkotehtava1.html

Kerromme tässä hieman tehtävän toteutuksesta. 

 

Aloitus:

Aloittaaksesi www-sivun teon, tarvitset editorin. Näitä ohjelmia on lukuisia. Valitse jokin ohjelma, kuten esimerkiksi Notepad++, tai TextWrangler. 

Asennettuasi ohjelman, aloita sen käyttä. Yleensä ohjelma antaa oletuksena puhtaan pohjan sivun teolle.

Kirjoita tänne ensin Doctype, jolla määritellään että kyseessä on HTML -sivu, ja mitä HTML standardia sivu käyttää. Usein editori antaa tämän valmiina.

 

HTML -kielestä:

Tagi:

HTML -kieli koostuu tageista. Varsinainen HTML-koodi sijaitsee html-tagien sisällä, eli <html> ja sen sulkeva </html> -tagi. Suurin osa tageista avataan ja suljetaan näin. Muita pakollisia tageja ovat <head> ja <body>, jotka suljetaan samalla tavalla, kuin html -tagi.

Mut tagit liittyvät enemmän muotoiluun, tai sisällön määrittelyyn.

Head -tagi sisältää kaikki metatiedot, kuten näppäinasettelu, otsikko ja css.

Body -tagi sisältää varsinaisen sisällön.

Lisäksi on olemassa linkkejä ja kuvia määrittäviä tageja. Linkit määritellään tagilla <a href= ja >, joiden väliin tulee itse linkki heittomerkkien väliin. Linkki aikeaa klikkaamalla tekstiä linkin jälkeen, joka päätty komentoon </a>.

Kuvat:

Kuvat kutsutaan <img src=> , jossa kuvan viittaus tulee heittomerkein = ja > väliin. Lisäksi kuvan koko voidaan määritellä komennoin: width=”” , ja height=”” .

CSS: 

CSS määrittelee html -sivun muotoilun ja ulkoasun. CSS -koodin voi laittaa html -koodin sisään, tai erilliseksi tiedostoksi, joka linkitetään varsinaiseen koodiin.

Julkaiseminen:

Julkaisuohjeet: julkaisu tapahtuu yleensä erillisellä ohjelmalla, kuten esimerkiksi WinSCP, tai CyberDuck. Julkaisua varten täytyy tietää palvelin, kuten esimerkiksi shell.metropoli.fi, sekä käyttäjätunnus. Sitten valitaan lähetettävä tiedosto ja testataan toiminta.

 

  • No labels
You must log in to comment.