CSS:n käyttäminen verkkosivujen suunnittelussa on olennainen taito. Tässä oppaassa käsitellään perusteita, kuten linkkien lisäämistä, tekstien muotoilua ja erityisten HTML-tagien käyttöä.
Hyperlinkit
Kun työstät verkkosivuja, saatat törmätä tilanteisiin, joissa haluat lisätä linkkejä. Esimerkiksi, voit haluta lisätä linkkejä sosiaalisen median sivuillesi. Tämän toteuttamiseksi sinun tarvitsee ympäröidä haluttu teksti ’a’ tagilla (anchor tag), joka toimii ankkurina linkille. ’a’ tagin sisälle lisätään ’href’ parametri (hypertext reference), joka määrittää linkin kohteen.
Esimerkiksi, jos haluat linkittää yrityksesi Twitter-sivulle, lisäisit ’a’ tagin ympärille tekstin ”SGH Twitter” ja määrittelisit ’href’ attribuutissa linkin Twitter-sivullesi. Tämä muuttaa tekstin klikattavaksi linkiksi. Jos haluat, että linkki avautuu uudessa välilehdessä, lisää ’target=”_blank”’ ’a’ tagiin. Tämä ominaisuus on hyödyllinen, mutta sen käyttö jakaa mielipiteitä; linkit voi avata uuteen välilehteen myös hiiren rullaa painamalla.
Some: <a href="https://x.com/suomigamehub" target="_blank">SGH Twitter</a>
Voit myös lisätä sähköpostilinkkejä käyttämällä ’mailto:’-protokollaa. Tämä mahdollistaa käyttäjien lähettää sähköpostia suoraan verkkosivun linkistä. Kun käyttäjä klikkaa tällaista linkkiä, heidän oletussähköpostiohjelmansa (esimerkiksi Outlook) avautuu valmiina lähettämään viestiä määritettyyn osoitteeseen.
Sähköposti: <a href="mailto:info@pelifirma.fi">info@pelifirma.fi</a>
Tekstin muotoilu
Lisäksi verkkosivujen tekstisisältöä voi muotoilla monin eri tavoin käyttämällä erilaisia HTML-tageja. Esimerkiksi ’strong’ tagia käytetään tekstin lihavoimiseen ja se korvaa perinteisen ’b’ tagin. ’em’ (emphasis) tagia puolestaan käytetään tekstin kursivointiin ja se on moderni versio ’i’ tagista (italic).
Bold ja italic asettavat aina fontin tietynmuotoiseksi. Jos sinulle ei kuitenkaan ole tärkeää, että teksti on nimenomaan esimerkiksi lihavoitu, vaan haluat vain korostaa sitä, harkitse ’strong’ ja ’em’ -tagien käyttöä sen sijaan. Tällöin ohjelma, joka sivuja toistaa, voi itse päättää, miten korostus tapahtuu.
<li><strong>Innovatiiviset pelit</strong>: Paraspeli tiimi koostuu taitavista pelisuunnittelijoista ja kehittäjistä, jotka ovat aina valmiita haastamaan perinteisiä pelikonsepteja ja luomaan uusia, jännittäviä pelejä.</li> <li><em>Yhteisöllisyys</em>: Pelaajat ovat sydämessämme, ja haluamme luoda vahvan yhteisön, joka rakastaa pelata yhdessä. Tarjoamme foorumin, jossa voit keskustella pelisuosikeistasi, jakaa vinkkejä ja tavata samanhenkisiä pelaajia.</li>
Toinen hyödyllinen elementti on ’pre’ tagi, jota käytetään esimuotoillun tekstin näyttämiseen. Tämä on erityisen hyödyllinen koodin esittämiseen, koska se säilyttää alkuperäisen muotoilun, kuten sisennykset ja rivivälit. Jos haluat esitellä koodinpätkiä, voit käyttää ’code’ tagia ’pre’ tagin sisällä, jolloin selain ja muut ohjelmat tunnistavat tekstin koodiksi. Tämä voi vaikuttaa esimerkiksi tekstin värimaailmaan, tehostaen koodin luettavuutta.
Kuvat
Kuvat HTML-sivuilla näytetään IMG-tagilla. Se on itsenäinen tagi, jonka kanssa ei käytetä sulkutagia, vaan joka suljetaan välittömästi aloitustagin sisällä kenoviivalla. Esimerkiksi, jos halutaan lisätä kuva, IMG-tagin sisään lisätään src-attribuutti (source), joka määrittelee kuvan sijainnin. Tämä voidaan tehdä kopioimalla halutun kuvan linkki ja sijoittamalla se src-attribuutin arvoksi.
<img src="https://suomigamehub.com/kuvat/screenshots/1463_0002.webp" />
Kuvan leveyttä voidaan säädellä width-attribuutilla. Esimerkiksi, jos asetetaan width-arvoksi 10%, kuva skaalautuu sivun leveyden mukaan säilyttäen alkuperäisen kuvasuhteen. Vastaavasti, 100% leveys asettaa kuvan täyttämään koko sivun leveyden. Pikseleinä määritelty leveys, kuten 100, määrittää kuvan tarkalleen kyseisen levyiseksi pikseleinä. Height-attribuutilla voidaan säädellä kuvan korkeutta vastaavalla tavalla.
HTML:n käyttö visuaalisen ilmeen määrittelyyn ei kuitenkaan ole suositeltavaa. Sen sijaan visuaalisen ilmeen määrittelyyn olisi selkeyden vuoksi hyvä käyttää CSS-kieltä (Cascading Style Sheets), jotta sivujen ilme määritellään yhdessä paikassa. CSS mahdollistaa tehokkaamman ja joustavamman tavan hallita web-sivun ulkoasua. Esimerkiksi, voit luoda tyylisääntöjä, jotka määrittelevät kaikkien kuvaelementtien (img) leveyden ja korkeuden tietyiksi pikseleiksi tai prosenteiksi. Tämä voidaan tehdä sivun head-tagien sisällä omassa script-lohkossaan.
<head>
<script>
img {
width: 25%;
}
</script>
</head>
CSS:ssä voidaan käyttää ID- ja luokka-attribuutteja elementtien tarkempaan määrittelyyn. ID-arvo on uniikki tietylle elementille, kun taas luokka-arvoa voidaan käyttää ryhmittelemään useita elementtejä. Voimme vaikka antaa tietylle kuvaelementille uniikin ID-arvon (esim. ”banneri”) ja määritellä CSS:ssä tälle elementille omat tyylisäännöt. Tämä mahdollistaa yksittäisten elementtien tarkemman muokkaamisen ilman, että muutokset vaikuttavat muihin samanlaisiin elementteihin.
Luokka-attribuutilla voidaan ryhmitellä elementtejä ja soveltaa niille yhteisiä tyylisääntöjä. Esimerkiksi, jos halutaan, että kaikki screenshot-luokkaan kuuluvat kuvat ovat tietyn leveyden, tämä voidaan määritellä CSS:ssä käyttämällä luokkaselektoria (esim. .screenshot). Näin kaikki kyseiseen luokkaan kuuluvat elementit saavat määritellyt tyylit.
<head>
<script>
img#banneri {
width: 100%;
}
img.screenshot {
width: 25%;
}
</script>
</head>
Jos esimerkiksi asetetaan tietty leveys prosentuaalisesti, se määritellään suhteessa elementin vanhempaan. Jos kyseinen elementti on suoraan body-elementin sisällä, se ottaa leveytensä suhteessa koko sivun leveyteen.
Tämän jälkeen halutuille img-elementeille annetaan joko id- tai class-parametrit, jotka hakevat tyylit CSS-tiedoista.
<img src="https://suomigamehub.com/kuvat/sgh-discord2-jpg-768x83.webp" id="banneri" /> <img src="https://suomigamehub.com/kuvat/screenshots/1463_0002.webp" class="screenshot" />
♞
Edellinen osa: Nettisivujen valmistaminen HTML:n avulla.