4.2. Teeman tiedostorakenne 2 - Aurinkoverkko

Sivuston rakenteellisia tiedostoja

Laajennetaan teeman tiedostorakennetta muilla oleellisilla tiedostoilla, joiden avulla voidaan hallita laajemmin sivustomme eri tyyppisiä sivuja. WordPress-sivustollahan voi olla monenlaisia sivuja, kuten sivut, artikkelit, kategorioiden ja avainsanojen sivut. Tarpeiden mukaan kaikille näille sivutyypeille kannattaa luoda omia template-tiedostoja.

Sivujen luonne

Verkkosivusto on kokonaisuus, johon kuuluu sivuja. WordPressissä sivuilla on myös erilaisia luonteita ja käyttötarkoituksia. Sivut (pages) ovat luonteeltaan verkkosivuston staattista sisältöä, jota ei luomisen jälkeen tehdä lisää tai muokata säännöllisin väliajoin. Ne saattavat pysyä ennallaan, koskemattomana, pitkänkin aikaa. Etusivun tehtävänä on toimia sivuston ensimäisenä sivuna, jonka sivustolle saapuva tulee navigoidessaan verkko-osoitteeseen. Se on siis myös omalla tavallaan eri luonteinen kuin esimerkiksi yhteydenottosivu tai tietoa meistä sivu.

WordPressissä index.php, jonka olemme jo luoneet on vain yksi ”template” eli mallipohjatiedosto sivusta ja etusivulle on olemassa toinen vaihtoehtoinen template home.php. Yksittäisen artikkelin template on kuvaavasti single.php.

Luodaan seuraavaksi sivustollemme näitä templatesivuja, joiden avulla voidaan muotoilla sivuja eri näköisiksi niiden luonteiden mukaisesti. Tavallisimpia templatesivuja, joita sivustolle luodaan, ovat:

front-page.php-templatesivua käytetään sivuston etusivulla.
page.php-templatesivu vastaa yksittäisen sivun mallista.
archive.php vai tag.php ja caterory.php?: Jos teemaan luotaisiin archive.php, se määrittäisi sekä kategorioiden että avainsanojen arkistosivujen ulkoasun. Harjoitussivulla halutaan kuitenkin, että teemassa on mahdollista rakentaa kategoriasivuille ja avainsanasivuille erilaiset ulkoasut, joten luodaan tiedostot category.php ja tag.php.
single.php on luonteeltaan yksittäisen artikkelin templatesivu.
404.php vastaa ”Sivua ei löytynyt -not found” -sivua
search.php on templatesivu, jota käytetään etsintäsoiminnon tuloksien näyttämiseen.

Avaa kaaviokuva hierarkiasta

front-page.php

Tehdään tiedostoihin seuraavaksi template-tiedosto etusivulle. Tällä hetkellä etusivu käyttää templatena page.php-tiedostoa ja omassa teemassa halutaan hieman erilainen etusivu, kuin muut sivuston sivut ovat. Kun olet luonut tiedoston, kopioi page.php-tiedoston koodi tiedostoon ja lisää content-wrapper div-elementtiin luokka class="front-page". Tarkista seuraavaksi etusivun lähdekoodista ottiko WordPress käyttöön templaten.

Voit käyttää selkeyden vuoksi tiedostossa kommenttia koodin alkuosassa, joka kertoo mihin tarkoitukseen template on olemassa. On kuitenkin muistettava, että kommentti näkyy myös lähdekoodissa, jollei kommentteja poisteta näkyvistä.


<!--=============================================

Sivuston etusivun mallista vastaava tiedosto

===============================================-->

<?php get_header(); ?>

<div id="content-wrapper" class="front-page">


    <div id="primary" class="content-area">

    
        <main id="main" class="site-main">

        
            <?php while ( have_posts() ) : the_post(); ?>

            
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                
                    <header class="entry-header">

                    
                        <h1 class="entry-title"><?php the_title(); ?></h1>

                    </header>

                    <div class="entry-content">

                    
                        <?php the_content(); ?>

                    </div>

                
                </article>

            
            <?php endwhile; ?>

        
        </main>

    
    </div>

    
    <?php get_sidebar(); ?> <!-- Oikean reunan sivupalkki -->


</div>



<?php get_sidebar('footer'); ?> <!-- Footerin yläpuolella oleva toinen sivupalkki. koodi on varalle, jos halutaan lisätä toinen 
 sivupalkki footer osan yläpuolelle. Sitä varten on luotava myös tiedosto sidebar-footer.php -->

<?php get_footer(); ?>

page.php

Luodaan aluksi sivustolle page.php -tiedosto, jossa voidaan määrittää miltä muut kuin etusivu näyttävät. Tätä mallia tullaan käyttämään esimerkiksi mahdollisilla yhteydenottosivulla tai tietoa meistä sivulla riippuen mitä sivuja sivustolle luodaan.

Luo tiedosto ja lisää oheinen koodaus sivustolle Visual Studio Code -ohjelmassa

<?php get_header(); ?>

<div id="content-wrapper">


    <div id="primary" class="content-area">

    
        <main id="main" class="site-main">

        
            <?php while ( have_posts() ) : the_post(); ?>

            
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                
                    <header class="entry-header">

                    
                        <h1 class="entry-title"><?php the_title(); ?></h1>

                    </header>

                    <div class="entry-content">

                    
                        <?php the_content(); ?>

                    </div>

                
                </article>

            
            <?php endwhile; ?>

            
        </main>

        
    </div>

    
    <?php get_sidebar(); ?> <!-- Oikean reunan sivupalkki -->


</div>



<?php get_sidebar('footer'); ?> <!-- Footerin yläpuolella oleva toinen sivupalkki. koodi on varalle, jos halutaan lisätä toinen 
 sivupalkki footer osan yläpuolelle. Sitä varten on luotava myös tiedosto sidebar-footer.php -->

<?php get_footer(); ?>

category.php ja tag.php

Luodaan seuraavaksi kategoria sekä avainsana arkistosivujen templatet. Molempiin tiedostoihin voidaan asettaa samankaltainen koodaus. Luo tiedostot ja aseta tiedostoihin seuraavat koodaukset. Kommentit tag.php-tiedoston koodin kuvassa kertovat mitä koodaukset tarkoittavat toiminnallisesti.Kopioi koodaukset tiedostoihin ja tallenna tiedostot.

Luo myös WordPress ohjauspaneelissa pari artikkelia ja aseta sekä kategorioita että avainsanoja artikkeleihin. Luo kategorioihin ja avainsanoihin myös kuvaustekstejä.

Kategorioita

Luo sivustolla kategorioita ohjauspaneelista Artikkelit (Posts) -osiosta. Sivusto käsittelee Tampereen alueen retkeilyreittejä ja kategorioiksi asetetaan Tampereen seudun alueet, joita yleisesti käytössä ovat seuraavat:

Keskusta: kuvaustekstiksi ” Tampereen keskustan alueella sijaitsevia polkuja ja mukavia kävelyreittejä. ”
Eteläinen alue: kuvaustekstiksi ” Tampereen eteläisellä alueella, kuten Hervannassa ja Vuoreksessa sijaitsevat kävely ja retkeilyreitit. ”
Pohjoinen alue kuvaustekstiksi ” Tampereen pohjoispuolella sijaitsevia luontorikkaita kävelyreittejä ja polkuja. ”
Läntinen alue kuvaustekstiksi ” Tampereen läntisiin osiin kuuluvat mm. Tesoma ja Nokia. Näissä kaupunginosissa on useinta mielenkiintoisia kävely ja retkeilyreittejä tarjolla. ”
Itäinen alue kuvaustekstiksi ” Tampereen itäinen alue kattaa mm. Messukylän, Linnainmaan ja Kaukajärven ja näillä vehreillä luontorikkailla alueilla voit nauttia retkeilystä ja kävelystä vehreissä suomalaisissa metsissä. ”

Avainsanoja

Luo sivustolla myös avainsanoja ohjauspaneelista. Avainsanoiksi asetetaan kaupunginosia, joissa reitit ja polut sijaitsevat. Aseta seuraavia avainsanoja alustavasti, jotta nähdään kuinka teema käyttäytyy:

Hervanta, Kuvausteksti: ” Hervanta tunnetaan opiskelijoiden urbaanina kaupunginosana Tampereella mutta vilkkaan keskustan liepeiltä voit löytää myös luontoreittejä ja päästä keskelle luontoa. ”
Kaukajärvi, Kuvausteksti: ” Kaukajärvi tunnetaan puhtaasta järvestään ja uimarannastaan. Kaukajärven rannoilta voit löytää mielenkiintoisia kävelypolkuja tutkittavaksi. ”
Kauppi, Kuvausteksti: ” Kauppi tunnetaan mm. UKK-instituutista ja erinomaisesta yleisestä saunastaan mutta myös hienoista luontopoluistaan alueella.”
Niihama, Kuvausteksti: ”Niihama sijaitsee Tampereen pohjoispuolella metsäisen maaston keskellä ja alueella voit nauttia todellisesta suomalaisesta metsäluonnosta. Alueella kulkee lukuisia mielenkiintoisia polkuja ja luontopolku, jonka opastaulut kertovat suomalaisesta metsäluonnosta ja sen asukeista.”
Pyynikki, Kuvausteksti: ”Pyynikin luonnonsuojelualue perustettiin vuonna 1993 suojelemaan ainutlaatuista harjukokonaisuutta ja sen arvokasta luontoa. Tampereen keskustan länsiosassa sijaitsevaa Pyynikin harjua pidetään maailman korkeimpana soraharjuna. Luonnonsuojelulain mukaisella rauhoituksella pyritään turvaamaan harjuluonto ja säilyttämään alue kaupunkilaisten ulkoilu- ja virkistyskäytössä, maisemansuojelualueena ja geologisena muistomerkkinä.”

<?php get_header(); ?>



<div class="category-page">


    <h1><?php single_cat_title(); ?></h1>

    <p>Selaa <?php single_cat_title(); ?>-kategoriaan kuuluvia artikkeleita</p>

    <div class="category-description">

        <?php echo category_description(); ?>

    </div>



    <?php if (have_posts()) : ?>

    
        <div class="category-posts">

        
            <?php while (have_posts()) : the_post(); ?>

            
                <div class="post">

                
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

                    <div class="post-excerpt">

                    
                        <?php the_excerpt(); ?>

                    
                    </div>

                
                </div>

            
            <?php endwhile; ?>

        
        </div>

        <div class="pagination">

        
            <?php

            the_posts_pagination(array(

            
                'mid_size' => 2,

                'prev_text' => __('«Edellinen', 'textdomain'),

                'next_text' => __('Seuraava»', 'textdomain'),

            
            ));

            ?>

        
        </div>

    
    <?php else : ?>

    
        <h2><?php _e('Tähän kategoriaan liittyviä artikkeleita ei löytynyt.', 'textdomain'); ?></h2>

    
    <?php endif; ?>


</div>



<?php get_footer(); ?>

<?php get_header(); ?>



<div class="tag-page">


    <h1><?php single_tag_title(); ?></h1>

    <p>Selaa <?php single_tag_title(); ?>-avainsanaan kuuluvia artikkeleita</p>

    <div class="tag-description">

        <?php echo tag_description(); ?>

    </div>



    <?php if (have_posts()) : ?>

    
        <div class="tag-posts">

        
            <?php while (have_posts()) : the_post(); ?>

            
                <div class="post">

                
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

                    <div class="post-excerpt">

                    
                        <?php the_excerpt(); ?>

                    
                    </div>

                
                </div>

            
            <?php endwhile; ?>

        
        </div>

        <div class="pagination">

        
            <?php

            the_posts_pagination(array(

            
                'mid_size' => 2,

                'prev_text' => __('«Edellinen', 'textdomain'),

                'next_text' => __('Seuraava»', 'textdomain'),

            
            ));

            ?>

        
        </div>

    
    <?php else : ?>

    
        <h2><?php _e('Tähän avainsanaan liittyviä artikkeleita ei löytynyt.', 'textdomain'); ?></h2>

    
    <?php endif; ?>


</div>



<?php get_footer(); ?>

Kuten huomaat koodia tutkiessasi molempiin tiedostoihin asetetaan todellakin samanlaiset koodaukset teemassamme ja myöhemmin voidaan asettaa sivuihin haluttuja muotoiluja ja muokataan koodauksia tarpeen mukaan. Molemmissa sivuissa on pääotsikkona kategorian tai avainsanan nimi. Pääotsikossa on myös alaotsikko, joka kertoo, että tästä avainsanaan tai kategoriaan määritetyt artikkelit listataan tällä sivulla.

Alaotsikon html-tagiksi on asetettu paragraph-tagi mutta tarvittaessa voidaan vaihtaa tagi span-tagiksi ja asettaa sille luokkaelementti. Näin voidaan osoittaa sille haluttuja erikoismuotoiluja ja niin edelleen.

Divit ja niihin asetetus luokkaelementit (class) toimivat ankkureina, joiden avulla päästään käsiksi kätevästi elementteihin templatessa. Huomaa myös div-luokkaelementti <div class="tag-page"> ja <div class="category-page">, jotka ympäröivät koko tiedostojen sisältöä ja antavat mahdollisuuden yksilöidä kohdistetut CSS-muotoilut, joko avainsanojen sivuille tai kategorioiden sivuille.

Avaa kuva uuteen välilehteen ja tutki koodausta tarkemmin.

single.php

Single-niminen php-tiedosto muotoilee teemassamme yksittäisen artikkelin ulkoasun ja tehdään siihen vaadittava koodaus php:llä.

Luo tiedosto ja lisää oheinen koodaus sivustolle Visual Studio Code -ohjelmassa

Artikkeleita

Luo sivustolle muutama artikkeli WP:n ohjauspaneelissa Artikkelit (Posts) toiminnossa. Aseta seuraavat toiminnot artikkeleihin:

Post name – Artikkelin nimi	Description eli kuvaus	Kategoria	Avainsana
Suolijärven kierros	Suolijärvi on yksi Hervannan järvistä ja sen ympäri kulkee mielenkiintoinen luontopolku.	Eteläinen alue	Hervanta
Haiharan alue	Kaukajärven Haiharan kartano on historiallisesti merkittävä paikka ja sen ympäristön puistot tarjoavat luontoelämyksen.	Itäinen alue	Kaukajärvi
Niihaman luontopolku	Niihama tarjoaa upeat puitteet luonnossa liikkujalle! Tutustu Niihaman luontopolkuun, nauti Pikku-Niihaman kauniista järvimaisemasta ja vietä rentouttava päivä ulkoillen. Niihaman ulkoilumaja tarjoaa palveluita ja reitit sopivat kaiken tasoisille kävelijöille.	pohjoinen alue	Niihama
Pyynikin luontopolku	Pyynikin luontopolulla kuljetaan maailman korkeimman soraharjun ainutlaatuisissa maisemissa. Reitin varrella voi tutustua harjuluontoon ja alueen geologiseen historiaan. Kaupunkilaisten suosima ulkoilureitti tarjoaa upeita luontoelämyksiä aivan Tampereen keskustan tuntumassa.	Keskusta	Pyynikki

Kopioi seuraava koodaus single.php-tiedostoon. Ohessa myös hieman selvitystä tiedoston koodin toiminnasta ja tarkoituksesta.

<?php get_header(); ?>

<div class="content-wrapper">


    <div id="primary" class="content-area">

	
        <main id="main" class="site-main">

		
            <?php

            while ( have_posts() ) :

                the_post();

            ?>

			
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

				
                    <header class="entry-header">

					
                        <div class="kuvaheader" style="background-image: url('<?php echo get_the_post_thumbnail_url(); ?>')">

						
                            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

                        </div>

                        <div class="entry-meta">

						
                            <span class="posted-on">Tampere <?php echo get_the_date(); ?></span>

                            <span class="category"> <?php the_category( ', ' ); ?></span>, 

                            <span class="tags"><?php the_tags( '', ', ', '' ); ?></span>

						
                        </div>

					
                    </header>

                    <div class="entry-content">

                        <?php the_content(); ?>

                    </div>

				
                </article>

			
            <?php endwhile; ?>

		
        </main>

	
    </div>

    <?php get_sidebar(); ?> <!-- Oikean reunan sivupalkki -->


</div>

<?php get_sidebar('footer'); ?> <!-- Footerin yläpuolella oleva toinen sivupalkki. koodi on varalle, jos halutaan lisätä toinen

sivupalkki footer osan yläpuolelle. Sitä varten on luotava myös tiedosto sidebar-footer.php -->

<?php get_footer(); ?>

singe.php koodaus

Looppi:WordPress-looppi, jonka sisällä on sivun sisältöä generoivaa koodausta.
Artikkelin sisältöosa (article) kietoo sisältöosan sisälleen.
Header eli sivun ylätunniste: Header-osan kietova html header-elementti, johon on asetettu luokkamäärite.
Kuvaheader ja sivun otsake: Kuvaheader on itse luotu luokkamäärite, joka pitää sisällään koodin, joka generoi artikkelin nimen eli otsakkeen näkyviin headeriin. Lisäksi koodi, joka generoi elementin taustakuvaksi artikkelin artikkelikuvan.
Artikkelin metatiedot: Tuodaan artikkelin metatietoja esille header-osaan. Php-koodaukset hakevat tietoja MySQL-tietokannasta.
Content sisältöosa, johon tuodaan editorilla artikkeliin luotu sisältö.
Sivupalkit (Sidebar): Mahdollisuus lisätä artikkeliin sivupalkkeja näkyviin ja ne tuodaan koodeilla tietokannasta.

Monipuolisempi index.php

Index.php vastaa tässä teemassa artikkelien sivusta, joka listaa kaikki sivustolla julkaistut artikkelit. Tällä hetkellä index.php:n koodaus on melko pelkistetty ja näyttää artikkelit yksinkertaisena listana linkkejä. Luodaan hieman monipuolisempi näkymä artikkelien sivulle. Tarkoituksena on luoda artikkelilistaus, jossa artikkelit listautuvat kategorioittain eli sivustolla Tampereen alueittain. Lisäksi artikkelista haetaan näkyviin metatietoja sekä artikkelikuva tekstien vasemmalle puolelle. Myöhemmin muotoillaan artikkelin lohkot ja muut osat CSS:llä. Tehdään kuitenkin rakenne ensin valmiiksi.

Siirry index.php-tiedoston pariin ja korvaa tiedoston koodaus oheisella koodilla Visual Studio Code -ohjelmassa. Siirry seuraavaksi artikkelit-sivulle selaimessa ja päivitä sivu. Huomaat, että näkymä muuttui huomattavasti paremmaksi ja monipuolisemmaksi.

<?php get_header(); ?>

<h1><?php bloginfo('name'); ?></h1>

<p>Selaa kaikkia sivustolla julkaistuja artikkeleita</p>

<?php

$categories = get_categories();

foreach ($categories as $category) :

    
    $args = array(

    
        'category' => $category->term_id,

        'post_type' => 'post',

        'post_status' => 'publish',

        'posts_per_page' => -1,

	
    );

    $posts = get_posts($args);

    if ($posts) :

	
?>

    
        <h2><a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a></h2>

        <div class="art-sisalto">

		
            <?php foreach ($posts as $post) : setup_postdata($post); ?>

            <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

            <div class="artikkelikuva">

			
                <?php if (has_post_thumbnail()) : ?>

                <?php the_post_thumbnail(); ?>

                <?php endif; ?>

			
            </div>

            <div class="meta-tiedot">

			
                <p>Tampere <?php the_date(); ?>, <?php the_tags('', ', ', ''); ?></p>

            </div>

            <p><?php the_excerpt(); ?></p>

            <a href="<?php the_permalink(); ?>">Lue lisää..</a>

            <?php endforeach; wp_reset_postdata(); ?>

		
        </div>

	
<?php

    
    endif;

endforeach;

?>

<?php get_footer(); ?>

Kategoriat: Funktio foreach ryhmittelee viestit kategorioittain ja näyttää ne erillisissä osioissa sivulla. Tässä on erittely sen toiminnasta:

Funktio hakee kaikki kategoriat MySQL-tietokannasta.
Haetaan kategorian ID-tunnus ja määritetään käyttämään toiminnossa kategorian uniikkia ID-tunnusta.
Haetaan vain artikkelit, jotka on julkaistu sivustolla.
Haetaan kaikki artikkelit, jotka on julkaistu.

Artikkelien näyttäminen sivulla: Tässä osassa luodaan varsinainen näkymä ja kuinka artikkelit ja niiden tiedot näytetään sivulla. Ylimpänä kategoria, jonka artikkelit näytetään.
Artikkelin näkymän ympäröivä divi.
Artikkelin otsikko: Kategorian artikkelilistauksessa oleva otsikko.
Artikkelikuva: Artikkelin artikkelikuva tuodaan tähän diviin.
Artikkelin metatiedot: Tuodaan artikkelin metatiedoista päivämäärä (date) ja artikkelin avainsanat.
Artikkelin lyhennelmäteksti eli Excerpt: ”Tulostetaan sivulle artikkelissa asetettu lyhennelmäteksti eli Excerpt. Jos sitä ei ole asetettu tässä kohdassa näkyy osa sisältötekstistä.

404.php

Jos jokin domainin sisältävä osoite tai linkki sivustolla ei toimi näytetään sivu, jota kutsutaan 404 -sivuksi tai Ei löytynyt virhesivuksi. 404.php tiedosto vastaa tämän sivun muotoilusta ja sisältää tuon sivun rakenteellisen koodauksen. Olen tehnyt sivun koodaukseen selaajalle vaihtoehdon ottaa yhteyttä ja raportoida virheellisestä osoitteesta tai vain palata etusivulle ja jatkaa sivuston selaamista.

Luo tiedosto ja lisää oheinen koodaus sivustolle Visual Studio Code -ohjelmassa

Yhteydenottosivu

Luo yhteydenottosivu WordPressin ohjauspaneelissa Sivut (Pages) toiminnossa, jotta tämän koodauksen linkki siirtyy yhteydenottosivulle. Nimeä yhteydenottosivu kuinka haluat mutta sivun url-osoite on tässä koodissa asetettu muotoon ”yhteydenotto”, joten sen tulee olla tuo, muuten linkki ei toimi. Jos et nimeä yhteydenottosivua ”Yhteydenotto”. päivitä koodissa ”yhteydenotto vastaamaan sivun url-tunnistetta.

Luo myös tiedosto 404.php ja lisää oheinen koodaus sivustolle Visual Studio Code -ohjelmassa.

<?php get_header(); ?>

<div id="content-wrapper"  class="error-404">


    <h1>404 - Sivua ei löytynyt</h1>

    <p>Voi ei, olen ehkä laittanut linkin väärin sivustoilleni tai sitten vaan etsimääsi ei löydy sivustoltani.<br />

    Jos sivuston linkissä oli virhe, voit laittaa minulle viestin toimimattomasta linkistä ja näin auttaa minua korjaamaan virheen.<br />

    Jos haluat ja viitsit, voit laittaa minulle viestin toimimattomasta linkistä ja näin auttaa minua korjaamaan virheen.<br />

    Voit tehdä sen <a href="<?php echo esc_url( home_url( '/yhteydenotto' ) ); ?>">täällä</a>.<br /><!-- Luodaan linkki yhteydenottosivulle -->

    Voit vaihtoehtoisesti vaan palata takaisin <a href="<?php echo esc_url( home_url( '/' ) ); ?>">etusivulle</a>.</p><!-- Luodaan linkki etusivulle -->

    <div id="primary" class="content-area">

    
        <main id="main" class="site-main">

        
            <?php while ( have_posts() ) : the_post(); ?>

            
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                
                    <header class="entry-header">

                    
                        <h1 class="entry-title"><?php the_title(); ?></h1>

                    </header>

                    <div class="entry-content">

                    
                        <?php the_content(); ?>

                    </div>

                
                </article>

            
            <?php endwhile; ?>

        
        </main>

    
    </div>  

    <?php get_sidebar(); ?>


</div>

<?php get_sidebar('footer'); ?> 

<?php get_footer(); ?>

Olemme luoneet suurimman osan teeman tiedostojen sisältökoodauksesta ja on aika siirtyä varsinaiseen tämän kurssin aiheeseen. Tiedostot search.php ja sidebar.php on vielä koodaamatta mutta jatkamme niiden parissa myöhemmin, kun ollaan luotu toiminnallisuus etsintätoimintoon sekä sivupalkkeihin. Nyt on aika muotoilla sivustoja ja aloitetaan muotoileminen tutustumisesta typografiaan. Klikkaa siis itsesi aiheen pariin artikkeliin 5.1 CSS-muotoilukieli.