Steampunk - Kuva-galleria, sivu2.html tiedosto

Kuva-galleria, yksinkertainen versio

Kuva-galleria tarkoittaa www-sivulla esitettävien kuvien kokoelmaa. Galleriassa pientä kuvaa klikkaamalla selaimeen aukeaa klikattu kuva suurempana.

INFO - Kuva-gallerioista

TAVOITE
Harjoituksessa muokataan yksinkertainen kuva-galleria joka näyttää kuvat suurena kunkin omalla html-sivullaan ja suurta kuvaa klikataeessa palaa takaisin galleria-sivulle. Esimerkki:

Varjo kuvalle

  • Kopioidaan tarvittavat HTML-koodaukset ja CSS-muotoiluohjeet sekä lisätään ne sivu2.html koodaukseen.
  • Kerätään Google:sta neljä testikuvaa ja muokataan ne näkymään www-sivulla.
  • Tehdään kutakin kuvaa varten oma html-tiedosto, CSS-muotoiluineen.
  • Tehdään galleriaan sekä kuvien html-tiedostoihin tarvittavat linkit .
  • Muotoillaan hiukan gallerian kuva-linkkejä sekä kuvien tekstejä CSS-muotoiluilla.
Mikäli omille www-sivuille haluaa hienompia gallerioita, löytyy niitä hakusanoilla "free image gallery for website".


Gallerian tekemiseen tarvittavat HTML- ja CSS-koodaukset

1. Tehtävässä tarvittava galleria ja koodaukset löytyvät täältä, tai voit kopioida tarvittavat osat alta.

CSS-muotoiluohjeet, lisätään kopiona sivu2.html tiedoston alussa olevaan style-elementiin:


   div.gallery {
     border: 1px solid #ccc;
   }
   div.gallery:hover {
     border: 1px solid #777;
   }
   div.gallery img {
     width: 100%;
     height: auto;
   }
   div.desc {
     padding: 15px;
     text-align: center;
   }
   * {
     box-sizing: border-box;
   }
   .responsive {
     padding: 0 6px;
     float: left;
     width: 24.99999%;
   }
   @media only screen and (max-width: 700px) {
     .responsive {
        width: 49.99999%;
        margin: 6px 0;
     }
   }
   @media only screen and (max-width: 500px) {
     .responsive {
        width: 100%;
     }
   }
   .clearfix:after {
       content: "";
       display: table;
       clear: both;
   }
   

Kohta sivu2.html koodauksessa johon yllä oleva CSS-ohjeisto liitetään
(poista kommenttimerkit <!-- ja --> style-elementin ympäristä !):
 <link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
 <link href="style.css" rel="stylesheet">
 <!-- <style>
   CSS-LIITETÄÄN TÄHÄN KOHTAAN KOODAUKSESSA !!
 </style> -->
</head>   
   
Gallerian tarvitsema HTML-koodaus lisätään kopiona img-elementin paikalle (keltaisella):
<div class="col-9 col-s-9">
   <h1> Landscape </h1>
   <p> Browse landscape pictures from around the world, including mountains, 
       seascapes, forests, deserts and a lot more. This collection of beautiful 
       and breathtaking photos is free for personal and commercial use. </p>
   <img class="varjo" src="kuva1.jpg" width="460" height="345">
</div>
Gallerian HTML-koodaus:

    <div class="responsive">
     <div class="gallery">
      <a target="_blank" href="img_fjords.jpg">
        <img src="img_fjords.jpg" alt="Trolltunga Norway" width="600" height="600">
      </a>
      <div class="desc"> Kuvaan liittyvä teksti tähän </div>
     </div>
    </div>

    <div class="responsive">
     <div class="gallery">
      <a target="_blank" href="img_forest.jpg">
         <img src="img_forest.jpg" alt="Forest" width="600" height="600">
      </a>
      <div class="desc"> Kuvaan liittyvä teksti tähän </div>
     </div>
    </div>

    <div class="responsive">
     <div class="gallery">
      <a target="_blank" href="img_lights.jpg">
        <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
      </a>
      <div class="desc"> Kuvaan liittyvä teksti tähän </div>
     </div>
    </div>

    <div class="responsive">
     <div class="gallery">
      <a target="_blank" href="img_mountains.jpg">
        <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
      </a>
      <div class="desc"> Kuvaan liittyvä teksti tähän </div>
     </div>
    </div>

    <div class="clearfix"></div>
   

2. Tallenna sivu2.html ja päivitä selain, tilanne tällä hetkellä:

50% leveinä osina

3. Etsi google:sta neljä steampunk-aiheista kuvaa. Valitse erikokoisia kuvia, talleta jpg-muodossa nimillä kuva2, kuva3, kuva4 ja kuva5.

4. Kuvat saadaan näkyviin galleriassa seuraavasti. Jokaisella galleriassa olevalla kuvalla on alla olevan mukainen div-elementti. Kirjoita keltaisella korostettuun kohtaa kussakin div:llä esittävän kuvatiedoston nimi, esimerkissä kuva2.jpg:

 <div class="col-9 col-s-9">
      <h1> Landscape </h1>
      <p> Browse landscape pictures from around the world, including mountains, 
         seascapes, forests, deserts and a lot more. This collection of beautiful 
         and breathtaking photos is free for personal and commercial use. </p>
    <div class="responsive">
     <div class="gallery">
      <a target="_blank" href="kuva2.jpg">
        <img src="kuva2.jpg" alt="Trolltunga Norway" width="600" height="600">
      </a>
      <div class="desc"> Kuvaan liittyvä teksti tähän </div>
     </div>
    </div>
 </div>
   

5. Talleta sivu2.html tiedosto ja päivitä selain sekä testaa klikkaamalla näkyykö kuvat kuten kuuluukin.

50% leveinä osina

5. Eräs ongelma.
Tällä hetkellä kuvat aukeaa selaimessa uuteen välilehteen joka on suljettava katselun jälkeen.
Tehdään jokaiselle kuvalle oma www-sivu, joihin kuva aukeaa sivun keskelle. Tehdään lisäksi www-sivujen isoihin kuviin linkki, jolloin isoa kuvaa klikkaamalla päästään takaisin galleriaan.

Ensiksi kuva2-kuvatiedostolle html-tiedosto joka talletetaan nimellä kuva2.html:


<!DOCTYPE html>
<html>
<head>
 &lmeta name="viewport" content="width=device-width, initial-scale=1.0">
 <style>
  body {
    background-color: rgb(35, 35, 35);
  }
  img {
    margin: 0;                   /*1. kuvan sijoittaminen www-sivulla keskelle*/
    position: absolute;          /*1*/
    top: 50%;                    /*1*/
    left: 50%;                   /*1*/
    transform: translate(-50%, -50%); /*1*/
	width: 100%;            /*2. kuvan koon muuttumiseen näytön koon mukaan */
    height: auto;           /*2*/
  } 
 </style>
</head>
<body>
 <a href="sivu2.html#kohta2"> <!-- linkki takaisin galleria-sivulle ja tarkempi kohta galleriassa -->
  <img src="kuva2.jpg">        <!-- Kuvatiedoston nimi tähän --> 
 </a>
</body>
</html>   
   

6. Päivitä selain ja kokeile aukeaako gallerian kuva2 klikkauksella kuva isommaksi sekä näkyykö tällöin selaimen osoite-kentässä auki olevan kuva2.html tiedosto.

7. Korjaa vielä alla koodauksessa korostevärillä näkyvät kohdat sivu2.html tiedostoon aluksi ensimmäiselle kuvalle. Testaa aukeaako selaimeen edelleen iso kuva, tarkista lukeeko selaimen osoitekentässä kuva2.html.
Tarkista vielä ettei uusia välilehtiä aukea selaimeen.
Klikkaa isoa kuvaa ja tarkista aukesiko selaimeen galleria-sivu.

<div class="responsive">
  <div class="gallery">
    <a target="_self" href="kuva2.html" id="kohta2">
      <img src="kuva2.jpg" alt="Steampunk piirros" width="600" height="600">
    <</a>
    <div class="desc"> Kuvaan liittyvä teksti tähän </div>
  </div>
</div>   
   
Selitykset:
target="_self" - avaa linkin kohteen selaimessa samaan välilehteen
href="kuva2.html" - avattavan kohteen tiedoston nimi
id="kohta2" - "kirjanmerkki" johon viitataan jossain linkissä (katso kuva2.html tiedostossa).

8. Tee lopuillekin kuville omat html-tiedostot (kuva3.html, kuva4.html ja kuva5.html). Tee myös yllä olevat muutokset muidenkin galleria kuvien kohdalle.

9. Tee sivu2.html tiedostossa vielä pieni muutos style-elementissä gallerian pikku-kuviin liittyen ja testaa vaikutus:

div.gallery:hover {
   border: 3px solid orange;
}
   
75% leveinä osina

CSS-asetuksella tehdään 3 pikselin levyinen oranssi viiva gallerian pikkukuvan ympärille kun hiiren osoitin on kuvan kohdalla. Voit kokeilla muitakin CSS-tehosteita.

Vaiheessa 7, City-sivulle eli sivu3.html upotetaan Yuotube-video tai parikin.