SuomiGameHUB

Maailma tarvitsee pelejä

Nettisivujen valmistaminen HTML:n avulla

Tässä oppaassa käydään läpi nettisivujen rakentamisen perusteet HTML-kielen avulla, sekä tarkastellaan, miksi nettisivut ovat tärkeitä, erityisesti pelien kehittämisen kontekstissa.

Vaikka monet pelaajat eivät välttämättä koskaan vieraile näillä sivuilla, ne ovat olennaisia pelin markkinoinnissa ja tiedotuksessa. Pelisivustot tarjoavat tietoa pelin kehityksestä, historiasta ja tiimistä, jota ei yleensä löydy esimerkiksi Steamista tai Google Playsta. Tämä tieto on tärkeää pelilehdistölle, striimaajille ja muille alan ammattilaisille. Hyvin suunniteltu ja toteutettu nettisivu voi helpottaa merkittävästi pelin tunnetuksi tekemistä.

Aloitetaan HTML:stä (Hypertext Markup Language), joka on perustana kaikille web-sivuille. HTML ei ole ohjelmointikieli, vaan merkintäkieli, jolla määritellään web-sivujen rakenne. HTML käyttää ‘tageja’ eli merkintöjä, jotka sijoitetaan pienempi kuin ja suurempi kuin (<, >) -merkkien sisään. Nämä tagit luovat sivun rungon, mukaan lukien otsikot, kappaleet ja muut elementit. Jokainen HTML-dokumentti alkaa juuritagilla, joka tunnetaan nimellä ‘html’. Tämä tagi kertoo selaimelle, että seuraavat merkinnät ovat HTML:ää. Sisällä HTML-tagissa, koodi jaetaan yleensä kahteen pääosaan: ‘head’, joka sisältää metatiedot ja viittaukset ulkoisiin resursseihin, kuten CSS-tiedostoihin ja ‘body’, joka sisältää itse sivun näkyvän sisällön.

<html>
<head></head>
<body></body>
</html>

Nettisivujen luomiseen tarvittavien taitojen oppiminen alkaa yksinkertaisista harjoituksista. Voit aloittaa lataamalla ja asentamalla tekstieditorin, kuten Sublime Textin, joka on erinomainen työkalu web-kehitykseen. Se on käyttäjäystävällisempi kuin perus-Muistio ja tarjoaa ominaisuuksia, kuten automaattisen sisennyksen ja avainsanojen värikoodauksen, jotka helpottavat koodin kirjoittamista ja lukemista.

Kun olet valinnut editorin ja asettanut sen käsittelemään HTML-tiedostoja, voit aloittaa kirjoittamalla yksinkertaisen HTML-rungon. Tämä runko voi sisältää peruselementtejä, kuten otsikoita ja kappaleita.Tallenna tämä tiedosto nimellä ‘index.html‘, joka on yleinen konventio web-sivustojen etusivuille.

Kun olet tallentanut HTML-tiedoston, voit avata sen selaimessa, kuten Firefoxissa, tarkastellaksesi luomasi sivun ulkoasua. Aluksi sivu näyttää hyvin perustasoiselta, sisältäen vain tekstiä valkoisella taustalla. Tämä on kohta, jossa CSS:n merkitys korostuu. CSS:n avulla voit lisätä tyylejä ja muokata sivusi ulkoasua, muuttaen fontteja, värejä ja asettelua. Katsotaan sitä myöhemmissä oppaissa.

HTML:ssä otsikot merkitään H1–H6-tageilla, jotka määrittävät otsikon tason. Esimerkiksi, voimme lisätä sivun yläosaan H1-otsikon, joka voisi olla “Tervetuloa Paraspeli nettisivuille!” Myös tekstin jäsentäminen erillisiksi kappaleiksi parantaa luettavuutta. HTML:ssä käytämme p-tagia (paragraph), joka edustaa yhtä kappaleen osaa. Kun tallennamme sivun, teksti näkyy selkeänä ja erillisenä kappaleena.

<html>
<head></head>
<body>
  <h1>Tervetuloa Paraspeli nettisivuille!</h1>
  <p>Paraspeli on intohimoisten pelaajien ja pelikehittäjien yhteisö, joka on omistautunut luomaan unohtumattomia pelikokemuksia. Olemme ylpeitä siitä, että voimme tarjota pelaajillemme laadukkaita ja viihdyttäviä pelejä, jotka vievät heidät seikkailuun, josta he voivat nauttia yksin tai ystävien kanssa.</p>
</body>
</html>

HTML ei automaattisesti tunnista rivinvaihtoja, joten pelkkä tekstipätkän kopioiminen ja liittäminen html-tiedostoon ei riitä. Jotta teksti näyttäisi sivulla halutulta, sen sisältö on jaettava kappaleisiin p-tagein. Tämä auttaa meitä hallitsemaan, missä kohtaa kappaleen tulisi vaihtua. Voimme esimerkiksi ottaa yhden kappaleen ja sijoittaa sen p-tagin sisään ja toistaa tämän toisen kappaleen kohdalla.

Seuraavaksi siirrytään listojen luomiseen. HTML:ssä on kaksi päätyyppiä: järjestetyt listat (ol) ja järjestämättömät listat (ul). Järjestetyssä listassa, kuten nimestä voi päätellä, listaelementit on numeroitu. Järjestämättömässä listassa elementit on merkitty pisteillä tai muilla symboleilla. Luodaksemme listan, meidän on sijoitettava jokainen listaelementti omalle rivilleen käyttämällä li-tagia. HTML tunnistaa li-tagit erillisinä listaelementteinä.

Jos haluamme lisätä uuden elementin listaan, voimme lisätä uuden li-tagin haluamamme tekstin kanssa. HTML lisää automaattisesti numeroinnin järjestettyyn listaan, joten numeroiden kirjoittaminen ei ole tarpeen.

<p>Mikä tekee meistä erityisen?</p>
<ol>
 <li>Innovatiiviset pelit: Paraspeli tiimi koostuu taitavista pelisuunnittelijoista ja kehittäjistä, jotka ovat aina valmiita haastamaan perinteisiä pelikonsepteja ja luomaan uusia, jännittäviä pelejä.</li>
 <li>Yhteisöllisyys: 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>
 <li>Laadukas grafiikka ja ääni: Panostamme huippuluokan grafiikkaan ja äänimaailmaan, jotta pelimme tarjoaisivat visuaalista ja auditiivista nautintoa.</li>
 <li>Jatkuva kehitys: Pidämme huolta siitä, että pelimme pysyvät ajan tasalla ja tarjoavat pelaajillemme uusia haasteita ja kokemuksia säännöllisten päivitysten ja lisäosien avulla.</li>
 <li>Jotaki tesksti'</li>
</ol>

<p>Tutustu sivuillemme ja löydä lisätietoa meistä, pelivalikoimastamme ja tulevista julkaisuistamme. Liity mukaan yhteisöömme ja aloita seikkailusi Paraspeli maailmassa jo tänään!</p>
<ul>
  <li>Yhteystietomme:</li>
  <li>Sähköposti: <a href="mailto:info@pelifirma.fi">info@pelifirma.fi</a></li>
  <li>Some: <a href="https://x.com/suomigamehub" target="_blank">SGH Twitter</a></li>
  <li>Osoite: Pelikuja 1</li>
</ul>

Lopuksi, sivulle voidaan lisätä muita tietoja, kuten yhteystiedot, sosiaalisen median profiilit ja firman osoite. Nämä tiedot kannattaa sijoittaa omiin kappaleisiinsa tai listoihinsa, jotta ne ovat selkeästi erotettavissa muusta sisällöstä.

Nettisivujen luominen vaatii käytännön harjoittelua. Kokeile erilaisia HTML-tageja ja CSS-ominaisuuksia, testaa eri asetteluita ja värejä ja opi ymmärtämään, miten eri elementit toimivat yhdessä luodaksesi visuaalisesti miellyttäviä ja käyttäjäystävällisiä web-sivuja.

Kun kaikki nämä elementit on lisätty ja järjestetty, olemme lähempänä tavoitettamme: selkeää ja toimivaa verkkosivua. Hyvällä suunnittelulla ja HTML:n oikeanlaisella käytöllä voimme luoda visuaalisesti miellyttäviä ja käyttäjäystävällisiä sivustoja. Muista, että hyvä verkkosivu ei ole vain tiedon lähde, vaan se myös edustaa yritystäsi tai projektiasi verkossa.

Keskustelu

Aloita uusi keskustelu