1.05. Kuvan lisääminen sivulle

Kuvan lisääminen sivuun

Kun julkaiset kuvia internetsissä, on ne kaikkien saatavilla ja nähtävillä. Käytä vain sellaisia kuvia, joihin sinulla tai asiakkaalla on tekijänoikeus.

Käytä kuvaa jos

  • Olet ottanut valokuvan itse

  • Älä käytä kopioituja valokuvia, jollet ole saanut valokuvan ottajalta lupaa kuvan esittämiseen

  • Olet kysynyt luvan valokuvan ottajalta ja olet maksanut kuvan käytöstä jonkinlaisen korvauksen

  • Kuvassa ei ole arkaluontoista eikä lainvastaista sisältöä

  • Olet kysynyt kuvassa olevilta henkilöiltä luvan kuvan julkaisemiseen. Tutustu julkisen tilan valokuvaussääntöihin. Julkisessa tilassa johon kaikki pääsevät, säännöt ovat hieman erilaiset

Näissä harjoituksissa käytän https://pixabay.com sivustolta löytyviä ilmaisia kuvia.

Koodi

tiedosto_3_koodi

Selain

tiedosto_3_selain

Selitys

Rivinumero Selite
1 – 10 Ei muutoksia toka sivun koodiin
11 Sivulla näkyvä otsikko muutettu
12 Kuvan tag
<img src="" alt=””>
HTML5 standardissa kuvan tag on yllä olevan rivin mukainen.
alt lisämääre ei ollut pakollinen vanhemmissa standardeissa, mutta HTML5 standardissa alt lisämääre on pakollinen
13 – 15 ei muutoksia toka sivun koodiin

Sivun virheet

  1. Yllä olevalla koodilla ei kuvaa näytetä, koska selain ei löytänyt kuvatiedostoa. Olen tallentanut kuva tiedoston hakemistorakenteessa kuvat -alihakemistoon, joten ylläolevaan kuvan linkkiä pitää muuttaa
  2. kuva ja kuvan alla oleva linkitys rivittyvät selaimessa samalle riville. Jos linkki halutaan kuvan alapuolelle, pitää koodissa kertoa selaimelle, että tehdään rivinvaihto. Rivinvaihdon HTML-tag on 
    <br>
    Rivinvaihdon koodi lisätään koodissa kuvan ja linkin väliin. Lukemisen helpottamiseksi olen lisännyt rivinvaihdon kuvan määrittelevän tagin loppuun

Korjattu koodi

Korjaukset on tehty riville 12.

tiedosto_3_korjattu_koodi

Korjattu sivu selaimessa

tiedosto_3_korjattu_selain

Kuvan attribuutit eli lisämääreet

HTML5 standardissa toimii seuraavat lisämääreet

alt, crossorigin, height, width, ismap, longdesc, usemap

Tehtävä

Jos olet opiskelemassa Länsirannikon Koulutus Oy eli WinNovassa, niin ota kuvaruutukaappaukset koodista ja internetselaimen ikkunasta tekemiesi muutosten jälkeen. Tallenna ottamasi kuvaruutukaappaukset pdf tiedostoon. Pyydä opettaja tarkistamaan tehtäväsi omalta tietokoneeltasi.

  1. muuta kuvan leveys, esim. 200 pikseliä
  2. Muuta kuvan korkeus, esim. 50 pikseliä

Comments are closed.

By continuing to use the site, you agree to the use of cookies. - - - - - - Jatkamalla sivuston käyttöä hyväksyt evästeet.
more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.
- - - - - -
Tällä sivulla käytetään evästeitä sivuston paremman toiminnan takaamiseksi. Jatkamalla sivuston käyttöä tai napsauttamalla "Accept" hyväksyt sivuston evästeet.

Close