Verkkosivujen tekeminen

Verkkosivuston tekeminen: Ensimmäinen sivusto

Aloitimme opiskelemaan verkkosivujen tekoa. Ensin teimme opettajan johdolla HTML- pohjan ja esimerkkisivuston. Sen jälkeen teimme tätä tehtyä pohjaa hyödyntäen oman version. Sen sai suunnitella miten haluaa ja aihe oli vapaa.

En ole ennen millään tavalla tusustunut verkkosivujen tekoon aiemmin. Päivän aikana tuli paljon uutta asiaa (taas) ja jossain vaiheessa tuli jo epätoivo, että pysynkö kärryillä tässä tai opinko mitään, uutta asiaa tuli niin paljon. Nyt kun olen sulatellut pari päivää oppimaani, aihe ei enää tunnu niin ylivoimaiselta.

Ajattelin myös, että aihe olisi tylsä, mutta ensimmäisen päivän päätteeksi tajusin olevani aiheesta innoissani ja huomasin suunnittelevani jo sivustoa jonka haluaisin tehdä jakson loppuun mennessä: sivusto omille valokuvilleni. Olen jo miettinyt vähän värimaailmaa ja fontteja siihen ja minulla on jo  oma logokin sitä varten!


Kun alat luomaan HTML-pohjaa esim. koneelta löytyvään Muistio- ohjelmaan, muista nämä:

Tallentaessasi tiedostoa, muuta nimen pääte HTML- muotoon. Vaihda myös kohdasta: Tallennusmuoto (*txt) kohtaan: Kaikki tiedostot.

tiedostopääte

Muista myös vaihtaa alhaalla olevasta valikosta: UTF-8utf

Tee myös muistioon erillinen muotoilu-tiedosto ja tallenna molemmat samaan kansioon. Muista vain laittaa tiedostopäätteeksi: CSS. esim. ”muotoilu.css”

Olen kova juomaan teetä, joten päätin tehdä sivuston eri teelaaduista.
Apuna käytin aiemmin tehtyä koodipohjaa ja lähdin muuttamaan sitä mieleiseksi.

Otsikon tein Photoshopilla ja liitin kuvan otsikoksi:otsikkokuva

Hain wikipediasta copy/pastella vähän sisältöä ja jaoin ne html-koodeilla järkevästi osiin sivustolle.

teksti

  • Väliotsikot saa tehtyä kirjoittamalla <h2>  ja loppuun </h2>.
  • Leipätekstin saa tehtyä kirjoittamalla <p>  ja loppuun </p>

Tee myös erikseen tiedostokansioosi tyylitiedosto, johon kirjaat käyttämäsi fontit, niiden värit, sivuston taustan värit, otsikoiden fontit ja värit, kuvien/tekstien mahdolliset lähteet jne.

Sivuston loppuun liitin linkit lähdesivuostoista.

lähdelinkit

Taas yhtä asiaa viisaampana. Nyt vaan armotonta harjoittelua!

Tässä linkki valmiiseen sivustoon: Erilaiset teelaadut

Mainokset

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out /  Muuta )

Google photo

Olet kommentoimassa Google -tilin nimissä. Log Out /  Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out /  Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out /  Muuta )

Muodostetaan yhteyttä palveluun %s