20. Html ja CSS, kuvagalleria

Html ja CSS tehtävä 3, kuvagalleria

Mene w3school-sivustolle ja siellä CSS ja Image Gallery.

https://www.w3schools.com/css/css_image_gallery.asp

Avaa ensimmäinen esimerkki Try it Yourself. Esimerkissä on kuvagalleria, jossa esikatselukuvat = pikkukuvat. Pikkukuviin voi kirjoittaa myös esittelytekstin. Pikkukuvaa klikkaamalla aukeaa iso kuva uudessa välilehdessä. Tutki esimerkin koodia ensin style-osiossa. Kokeile vaihtaa koodiin eri numeroarvoja, niin näet vaikutuksen. Vastaa sitten tämän sivun kysymyksiin style-osiosta.

Vastaa näihin CSS-osiota (style) koskeviin kysymyksiin

Kirjaudu sisään lähettääksesi tämän lomakkeen


div.gallery {
margin: 5px;
Mitä tämä saa aikaan gallerian ulkonäössä?


Muutama rivi alaspäin on määritys: width: 180px;
Mitä se saa aikaan?


div.gallery:hover {
border: 1px solid #777;
Mitä tämä koodi saa aikaan?


Entä tämä
div.desc {
padding: 15px;
text-align: center;

Kirjaudu sisään lähettääksesi tämän lomakkeen

Oma kuvagalleria

Tee sitten oma kuvagalleria haluamastasi aiheesta. Voit katsoa apuja alla olevasta kuvasta. jossa on selitetty yhden kuvagallerian kuvan koodi. Kun rakennat kuvagalleriaa, niin tee ensin kansio, johon tallennat sekä html-tiedoston että kuvat. Palauta galleria tämän sivun palautuslaatikkoon. Voit palautaa pelkän html-tiedoston ilman kuvia.

Peda.net käyttää vain välttämättömiä evästeitä istunnon ylläpitämiseen ja anonyymiin tekniseen tilastointiin. Peda.net ei koskaan käytä evästeitä markkinointiin tai kerää yksilöityjä tilastoja. Lisää tietoa evästeistä