Kotisivuopas

Yrityksen, organisaation tai henkilökohtaisten kotisivujen tekemiseen on runsaasti vaihtoehtoja, mutta tässä artikkelissa kerron omasta mielestäni parhaan ratkaisun ja perustelut valinnalleni. Suosittelen lukemaan, mikäli olet tekemässä kotisivuja ensimmäistä kertaa, tai haluat vaihtaa vanhat sivusi tuoreempiin. Lähdetään siitä, mitä vaihtoehtoja on alkaen helpoimmasta:

vinkkisolutions.com verkko-osoite ei ole enää käytössä vuonna 2022. Artikkelin esimerkit pätevät nykyiseen osoitteeseeni mikaelahonen.com.

Ilmainen palvelu on tietysti houkutteleva, mutta se ei anna juuri mahdollisuuksia hallita sivuston ulkoasua tai seurata, mitä kävijät sivustolla tekevät. Mitä enemmän valtaa haluaa sivujen muokkaamisen suhteen, sitä enemmän joutuu maksamaan – paitsi webhotellin kohdalla. Webhotelli ja oma verkko-osoite on ehdottomasti paras ratkaisu, jos haluaa maksimoida hallittavuuden ja helppouden, mutta minimioida hinnan. Alustan aihetta varsin diipiltä tuntuvalla teorialla internetin toiminnasta, että ymmärrät myöhemmin, mikä on webhotelli ja domain ja mitä hyötyä niistä on sinulle.

1 Kuinka Internet toimii

Internetselain on ohjelmisto, joka osaa esittää tietynlaisia tiedostoja. Tunnettuja selaimia ovat esimerkiksi Google Chrome, Internet Explorer ja Mozilla Firefox. Hieman yksinkertaistaen ne on suunniteltu näyttämään .html -tiedostoja samaan tapaan kuin Excel on suunniteltu näyttämään .xlsx päätteellä varustettuja tiedostoja ja Notepad .txt -tiedostoja.

Excelissä pystyy valitsemaan, mistä tiedostosijainnista ja minkä tiedoston haluaa avattavan omalta koneelta, esimerkiksi C:\Users\Mikke\Downloads\työvuorolista.xlsx ja tämä on varsin helppo ymmärtää. Mitä ei kuitenkaan tule ajatelleeksi, on se, että myös nettiselaimeen kirjoitettu osoite on itseasiassa tiedostosijainti.

Kun kirjoitat osoitekenttään www.vinkkisolutions.com/ratkaisut/esite.html teet itseasiassa palvelimelle (selitetään kohta) pyynnön näyttää internetin osoitteessa vinkkisolutions.com kansiossa ratkaisut sijaitsevan tiedoston esite.html. Html-tiedostot ovat tiedostoja siinä missä .txt, .jpg ja .xlsx -tiedostotkin. Html-tiedostot on koodattu tietyllä logiikaalla, jonka selaimesi osaa tulkita ja esittää maailman Internet-järjestön kehittämän maailmanlaajuisen standardin mukaisesti. Nykyään käytössä on muotisanaksi noussut html5-standardi .

No mistä ne tiedostot haetaan? Ne sijaitsevat serveillä eli palvelimilla. Palvelin on tietokone. Voit tehdä vaikka omasta kannettavastasi palvelimen, jos teet muutamia asetuksia ja pidät sen kytkettynä Internetiin yötä päivää. Palvelin on sille tulevien pyyntöjen vastaanottamiseen ja käsittelemiseen suunniteltu internetiin kytketty tietokone, joka hyrisee palvelinhallissa jossain päin maailmaa. Pyyntö tarkoittaa sitä, kun menet nettisivulle ja pyydät palvelinta lähettämään selaimellesi esimerkiksi tiedoston www.vinkkisolutions.com/ratkaisut/esite.html . Eli kirjoitat nettiosoitteen selaimen osoiteriville ja painat entteriä. Tässä vaiheessa ei ole oleellista, kuinka sähköimpulssit sinun tietokoneestasi osaavat mennä oikealle palvelimelle pyytämään tiedostoa ja tuomaan sen takaisin omalle tietokoneellesi.

2 Webhotelli ja domain

Jos sinulle on oma palvelin, eli käytännössä jossain päin maailmaa sijaitseva nettipalvelun pyörittämiseen tarkoitettu tietokone, pystyt hallitsemaan erittäin tarkasti siihen liittyviä toimintoja. Tämä on kuitenkin suhteellisen kallista, joten netti on pullollaan palveluntarjoajia, jotka omistavat palvelimia ja tarjoavat osan palvelinkapasiteetistaan sinun käyttöösi edulliseen hintaan. Toimintamallia kutsutaan suomeksi termillä webhotelli tai englanniksi web hosting. Palveluntarjoaja on tehnyt vaikeimman työn puolestasi, mutta sinulla on silti mahdollisuus hallita esimerkiksi sähköpostiosoitteitasi ja säätää muita asetuksia helpon käyttöliittymän kautta. Itse käytän Radicenteriä webhotellinani, sillä olen todennut sen edulliseksi ja helpoksi vaihtoehdoksi, jossa on kaikenlisäksi suomenkielinen asiakaspalvelu.

Kaikilla maailman Internetiin kytketyillä tietokoneilla on oma IP-osoite, jonka avulla tieto kulkeutuu internetissä oikeaan paikkaan. Esimerkiksi vinkkisolutions.com verkko-osoitetta vastaava IP-osoite on 212.47.208.166. Tietokoneet ymmärtävät vain IP-osoitteita, mutta ihmiset ymmärtävät paremmin selkokielisiä verkko-osoitteita. Tätä tarkoitusta varten verkko-osoite on rekisteröitävä vastaamaan tiettyä IP-osoitetta, vaikka teoriassa pääsisitkin käsiksi nettisivuihisi pelkällä IP-osoitteella. Verkko-osoitteesta (esim. vinkkisolutions.com) käytetään nimitystä domain.

Domainin hankkiminen tarkoittaa siis käytännössä sitä, että palveluntarjoaja varaa kyseisen verkko-osoitteen käyttöösi ja mahdollisesti kytkee sen hankkimaasi palvelimeen, mikäli hankit webhotellin ja domainin samasta paikasta, mitä suosittelen vahvasti. Itselläni juuri tämä tuotti aikanaan vaikeuksia, kun en tiennyt, kuinka domain ja webhotelli eri palveluntarjoajalta yhdistetään. Webhotelli-domain yhdistelmä on avaimesi omiin nettisivuihin, joita on suhteellisen helppo käyttää, mutta tarvittaessa pystyt tekemään hyvinkin monipuolisia säätöjä.

3 Webhotellin ja domainin hankkiminen

Webhotellin tilaaminen Radicenteriltä vuodeksi maksaa 30€ ja com-domain 12,5€. Mitä pidemmäksi ajaksi hankit palvelun, sitä edullisempi se yleensä on, mutta suosittelen aluksi vuoden jaksoa. Yrityspaketti Radicenterillä on hinnaltaan 80€ (+ domain), johon kuuluu automaattinen varmuuskopiointi ja tarvittaessa tietojen palautus. Erinomainen lisäpalvelu, jos koet, että tietojen katoaminen aiheuttaa haittaa liiketoiminnallesi.

Näin saat nettisivut käyttöösi Radicenterissä:

1. Mene Radicenter.fi sivustolle tai valitse vastaava palveluntarjoaja
2. Teet tunnukset palveluun
3. Hanki webhotelli ja domain kyseiseltä palveluntarjoajalta
4. Saat sähköpostiisi tunnukset ja linkin webhotellin hallintapaneeliin kirjautumiseen
5. Nettisivu ei luultavasti näytä vielä paljon miltään

4 Hallintapaneeli

Hallintapaneeli on webhotellin sydän, josta pääset muun muassa luomaan itsellesi oman sähköpostiosoitteen, kuten [email protected] ja siirtämään tiedostoja palvelimellesi. Yleisesti käytettyjä hallintapaneeleja ovat esimerkiksi cPanel ja DirectAdmin. Kaikki hallintapaneelit toimivat jokseenkin samalla periaatteella, mutta seuraavaksi tulevat esimerkit koskevat nimenomaan DirectAdminia. Koska tässä esimerkissä käytät webhotellia, etkä omaa serveriä, palveluntarjoaja on luultavasti rajoittanut kehittyneimpien (ja vaikeimpien) toimintojen muokkaamista, jotka tulevat vastaan vasta siinä vaiheessa, kun alat ohjelmistokehittäjäksi. Hallintapaneelista voit

• Ladata ja muokata tiedostoja palvelimellesi
• Tehdä alidomaineja, kuten en.vinkkisolutions.com
• Luoda sähköpostitunnuksia
  • Tehdä automaattisia vastausviestejä
  • Tehdä sähköpostiryhmiä
• Tehdä sivujen uudelleenohjauksia
  • vinkkisolutions.com/solutions > vinkkisolutions.com/ratkaisut
• Luoda ja muokata tietokantoja

5 Tiedostojen siirtäminen palvelimelle

Palvelimelle voi ladata mitä tahansa tiedostoja, kuten kuvia, pdf-dokumentteja ja word-asiakirjoja, mutta riippu täysin selaimesta, mitä tiedostomuotoja pystytään esittämään. Kaikki selaimet osaavat näyttää .html -tiedostoja, mutta kaikki eivät osaa näyttää .pdf -tiedostoja, eikä yleisimmät selaimet osaa esittää Word-asiakirjoja. Seuraavaksi esitellään, kuinka tiedostoja voidaan siirtää palvelimelle kahdella eri tavalla: hallintapaneelista tai niin sanotun ftp-käyttäjän avulla.

Webhotellin hallintapaneeli on yksinkertaisempi tapa – kirjaudut vain hallintapaneeliin ja DirectAdminista tiedostoja siirretään kohdasta File Manager. Kansiorakenne saattaa vaihdella palveluntarjoajan tekemien serveriasetusten mukaan, mutta Radicenterin DirectAdminissa julkisesti nähtävät tiedostot ovat sijainnissa domains/vinkkisolutions.com/public_html. Käytännössä tämä tarkoittaa sitä, että kaikki public_html kansioon laittamasi tiedostot ja kansiot ovat julkisesti kenen tahansa saatavissa, mikäli niitä ei ole erikseen suojattu. Suojaaminen on mahdollista DirectAdminissa kohdasta Password Protected Directories.

Yksinkertaisimmillaan nettisivulle saa sisältöä seuraavasti: kirjoita mitä tahansa tekstiä tekstieditorilla, kuten Notepadilla ja tallenna se omalle koneellesi nimellä hellurei.html. Lataa se kansioon public_html. Nyt sivullasi, esimerkiksi vinkkisolutions.com/hellurei.html pitäisi lukea teksti, jonka kirjoitit .html -tiedostoon. Serverin asetuksissa on määritetty, mikä tiedosto esitetään oletusarvoisesti, mikäli osoitekenttään annetaan vain kansiosijainti ilman tiedostoa ja yleensä se on index.html, kuten Radicenterillä. Jos tallennatkin äskeisen tekstitiedoston nimellä index.html ja lataat tiedoston hallintapaneelistasi public_html kansioon, se esitetään selaimessa, kun menet osoitteeseen vinkkisolutions.com.

Ftp-ominaisuutta saatetaan tarvita esimerkiksi WordPressin asennuksessa. Lyhenne tulee sanoista File Transfer Protocol ja se on menetelmä siirtää tiedostoja tietokoneelta toiselle, tässä tapauksessa omalta koneeltasi palvelimellesi. Mikäli tiedostoja on paljon, on kätevämpää käyttä ftp-ohjelmistoa kuin hallintapaneelia. Suosittelen tähän tarkoitukseen ilmaista ohjelmistoa FileZillaa . Ftp tunnukset tulevat mahdollisesti saamassasi vahvistussähköpostissa palveluntarjoajaltasi, mutta jos näin ei ole, tunnuksia voi käydä lisäämässä hallintapaneelista kohdasta FTP Management. Ftp-käyttäjälle voidaan määrittää mihin kansioihin tiedostonsiirto-oikeus on, mutta pääkäyttäjälle pitäisi olla täydet valtuudet. Itselläni ftp-tunnukset ovat samat kuin hallintapaneeliin. FileZillaa käyttääksesi tarvitset seuraavat tiedot, jotka voivat olla vaikkapa tässä muodossa:

Isäntä: vinkkisolutions.com
Käyttäjänimi: z54953
Salasana: abcd1234
Portti: 21

Normaalitilanteessa portti on 21, mutta jos otit palveluntarjoajaltasi maksullisen SSL-sertifikaatin, portti on 22. Asetusten syöttämisen jälkeen klikkaa yhdistä ja siirrää haluamasi tiedostot omalta koneeltasi palvelimelle.

6 Sivuston ulkoasu kuntoon

Nettisivujen ulkoasun muokkaamiseen liitty kaksi tärkeää termiä, joista suosittelen opettelemaan perusteet. Toinen on jo aiemmin mainittu html ja toinen on CSS, jolla voidaan muokata esimerkiksi sivuston värejä, alueiden mittasuhteita ja fonttia. Käyn molemmat hyvin nopeasti läpi.

Html -merkintöjen avulla kerrot selaimelle, mitä tietoa haluat esittää: kuvia, otsikoita, laatikoita, tekstikenttiä, nappeja ja niin edelleen. Esimerkiksi merkintä <a href=”vinkkisolutions.com”>Etusivu</a> luo linkin kotisivulle tekstillä Etusivu ja <button>Nappi</button> napin, jossa lukee Nappi. Lisää aiheesta täältä .

CSS on merkintätapa, jolla määritellään, miltä html-elementit näyttävät. Voit muokata esimerkiksi napin kokoa, väriä, fonttia, reunoja, marginaaleja ja sijaintia. CSS voi sijaita joko .html -tiedostossa tai kokonaan omassa tiedostossaan. .html tiedostossa CSS tulee <style></style> tagien väliin. Lisää aiheesta täältä . Alla esimerkki CSS ja html käytöstä yhdessä:

<style>div a{color: green;}</style>  
<div><b><a href=”htttp://vinkkisolutions.com”>Lihavoitu linkki Etusivulle</b></a></div>

Lihavoitu linkki Etusivulle

Kopioimalla ylläolevat html -merkinnät .html -tiedostoon ja lataamalla tiedoston palvelimellesi, saat sivullesi vihreän lihavoidun linkin. Kuten huomaat, nettisivujen tekeminen tällä tavalla saattaa kestää jonkin aikaa.

7 WordPressin asentaminen

Omasta kokemuksesta voin sanoa, että kotisivujen kanssa kannattaa mennä siitä, mistä aita on matalin, koska turha kikkailu itse askarrelluilla html-tiedostoilla vie tolkuttomasti aikaa ja päädyt kuitenkin käyttämään helpointa vaihtoehtoa. Jos olet luomassa kotisivuja ensimmäistä kertaa, suosittelen ehdottomasti Wordpressiä sisällönhallintajärjestelmäksi. WordPressilla saat varsin tyylikkäät sivut ilmaiseksi, joita on helppo muokata ja tehdä tarvittaessa useita käyttäjiä.

WordPress täytyy asentaa palvelimellesi, että saat sen käyttöösi ja pääset kirjautumaan sisään. Asentaminen on hämäävä termi, sillä todellisuudessa kyse on siitä, että sinun on vain ladattava WordPress-tiedostot ensin omalle tietokoneellesi ja sitten ladattava ne palvelimellesi haluamaasi tiedostosijaintiin. Radicenterin DirectAdminissa WordPressin asentaminen käy suoraan nappia painamalla menemällä hallintapaneelin kohtaan Installatron. Installatronista löytyy myös kätevästi mahdollisuus asentaa mikä tahansa yleisessä käytössä oleva alusta, kuten Joomla, WooCommerce, Moodle tai Drupal.

Jos tiedostot täytyy ladata palvelimelle manuaalisesti, voit joutua muokkamaan joitakin tiedostoja siinä vaiheessa, kun asennuskansio on omalla tietokoneellasi. Tähän löytyy ohjeet WordPressin sivuilta. Jos asennat WordPressin esimerkiksi suoraan public_html kansioon, näkyvät WordPressilla tehdyt nettisivut suoraan osoitteessa vinkkisolutions.com ja pääset hallinnoimaan sivustoa vastaavasti osoitteesta vinkkisolutions.com/wp-admin. Asennuskansio voi olla mikä tahansa muukin, esimerkiksi public_html/esimerkki/testailua, jolloin sisäänkirjautuminen tapahtuu osoitteesta vinkkisolutions.com/esimerkki/testailua/wp-admin .

Worpressin käyttäminen on ensimmäisen kirjautumisen jälkeen sen verran helppoa, että mainittakoon vain, että tarjolla on monipuolisesti ulkoasuun vaikuttavia teemoja ja lisäosia esimerkiksi yhteydenottolomakkeen tekemiseen ja Google Analyticsin seurantatunnuksen syöttämiseen. Vaikka WordPress on erittäin helppokäyttöinen, html ja CSS perusteiden osaamisesta on hyötyä, mikäli haluaa ulkoasun viimeisen päälle tyylikkääksi. WordPress pitää huolen siitä, että omista räätälöinneistä huolimatta pakka pysyy kokonaisuutena kasassa.