SuomiGameHUB

Maailma tarvitsee pelejä

CSS ja inspector

Katsotaanpa tässä oppaassa perusteita siitä, miten voimme muotoilla nettisivuamme visuaalisesti miellyttävämpään suuntaan.

Kun haluamme muuttaa sivun taustan väriä, käytämme CSS:n `background-color` -ominaisuutta. Jos valitsemme taustaväriksi mustan (`black`), huomaamme nopeasti, että teksti ei erottu, jos sekin on mustaa. Tämä ongelma ratkaistaan määrittelemällä tekstin väriksi jotain muuta CSS:n `color` -ominaisuudella, esimerkiksi `white`. Musta ja valkoinen ovat kuitenkin voimakkaita värejä ja niiden käyttö voi aiheuttaa silmien väsymistä pitkäaikaisessa lukemisessa. Tämä on syy, miksi monissa käyttöliittymissä suositaan pehmeämpiä värisävyjä.

Värien tarkempi määrittely on mahdollista käyttämällä heksadesimaalikoodeja. Heksakoodaus mahdollistaa laajan värien kirjon luomisen kuuden merkin avulla. Esimerkiksi täysi musta on `#000000` ja täysi valkoinen `#ffffff`. Heksadesimaalijärjestelmä perustuu 16-järjestelmään, jossa numerot kulkevat 0:sta 9:ään ja sen jälkeen kirjaimiin a-f. Jokainen heksakoodin osa (esimerkiksi `ff` (255) valkoisessa) edustaa yhtä perusväriä (punainen, vihreä, sininen) ja niiden intensiteettiä välillä 0–255. Voimme säätää värien voimakkuutta muuttamalla näitä arvoja, kuten vaikkapa `#aaaaaa` tummentaa valkoista. Lisäksi, jos jokainen merkkipari sisältää samat kaksi merkkiä, voimme lyhentää koodin muotoon `#aaa`, joka on siis sama asia kuin `#aaaaaa`.

Jos haluamme lisätä tekstiin tai taustaan erityisiä sävyjä, voimme muokata näitä RGB-arvoja erikseen. Esimerkiksi sinisen lisääminen tekstiin onnistuu muuttamalla sinisen arvoa, kuten `#0000ff`. Vastaavasti, jos haluamme taustalle vihreää, voimme säätää vihreän arvon, esimerkiksi `#00ff00`.

Fontin muuttaminen tapahtuu CSS:n `font-family` -ominaisuuden avulla. Esimerkiksi Arialin käyttöönotto tapahtuu määrittämällä `font-family: Arial;`. Jos haluamme käyttää erikoisempia fontteja, kuten Google Fonts -kirjaston fontteja, prosessi sisältää fontin linkittämisen sivustolle ja sen määrittämisen CSS:ssä. Tämä tapahtuu lisäämällä fontin linkki `<head>`-osioon ja määrittelemällä se sitten CSS:ssä, kuten `font-family: “Audiowide”`.

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
  <style>
  h1 {
    font-family: "Audiowide";
  }
  </style>
</head>

Selaimen otsakkeessa näkyvä otsikko määritellään HTML:n `<title>`-elementissä `<head>`-osion sisällä. Tämä otsikko näkyy myös selaimen välilehdessä ja on osa sivuston tunnistettavuutta. Kun olet tallentanut muutokset sivuston otsikossa, voit alkaa lisätä kuvia ja linkkejä.

<head>
  <title>Paraspeli nettisivut</title>
</head>

Kuvat lisätään HTML-koodiin img-tagilla ja ne voidaan linkittää kuvaan, jolloin klikkaamalla kuvaa käyttäjä ohjautuu suoraan kuvatiedostoon. Tämä tehdään lisäämällä kuvan ympärille a-tag, johon määritellään kohdeosoite.

<a href="https://suomigamehub.com/wp-content/uploads/screenshots/1463_0001.webp">
  <img src="https://suomigamehub.com/wp-content/uploads/screenshots/1463_0001.webp" />
</a>

Tyylitiedostojen hallinta voi muodostua ajankohtaiseksi, jos sivustollasi on paljon CSS-koodia. Silloin se kannattaa siirtää erilliseen CSS-tiedostoon. Tämä parantaa sivuston luettavuutta ja ylläpidettävyyttä. Luo uusi CSS-tiedosto ja siirrä sinne kaikki tyylisäännöt. Kun olet tallentanut CSS-tiedoston, muista päivittää HTML-tiedostosi linkittämällä se uuteen tyylitiedostoon. Tämä tehdään lisäämällä head-osioon link-elementti, jossa viitataan uuteen CSS-tiedostoon.

<link rel="stylesheet" href="style.css">

Web-kehitystyökalut

Web-kehitystyökalut, kuten selaimen Inspektori-toiminto, ovat arvokkaita kun haluat ymmärtää, miten eri sivustot on rakennettu. Voit tutkia minkä tahansa elementin HTML- ja CSS-koodia napsauttamalla sitä oikealla painikkeella ja valitsemalla “Inspect”. Tämä näyttää sekä elementin HTML-rakenteen että siihen liittyvät CSS-tyylit. Esimerkiksi fontin tyyppi, koko ja väri voidaan tunnistaa tarkastelemalla CSS-ominaisuuksia.

Toinen hyödyllinen työkalu on “View Page Source”, joka näyttää koko sivuston HTML-koodin. Tämä on hyvä tapa ymmärtää sivuston rakennetta ja oppia, miten eri elementit on järjestetty. Voit nähdä, kuinka head-osio sisältää metatageja, linkkejä ja skriptejä ja kuinka body-osio sisältää sivun varsinaisen sisällön, kuten divit, linkit ja headerit.

Kun olet tutustunut näihin perusteisiin, voit aloittaa sivustosi muokkaamisen. Esimerkiksi, jos haluat muuttaa tekstin väriä, voit avata Inspektori-työkalun, valita tekstin ja kirjoittaa uuden värikoodin CSS-osioon. Samoin voit muokata kuvien kokoa ja muita ominaisuuksia. Muista, että nämä muutokset ovat väliaikaisia ja katoavat, jos päivität sivun.

Vaikka käyttät valmiita malleja tai julkaisujärjestelmiä, perustiedot HTML:stä ja CSS:stä ovat aina hyödyllisiä. Tämä tieto auttaa sinua ymmärtämään, miten eri elementit toimivat ja miten voit korjata mahdolliset ongelmat sivullasi.

Edellinen osa: Linkit, kuvat ja CSS.

Keskustelu

Aloita uusi keskustelu