Viikko 7

2019-01-29T12:47:22+02:00

Kuvan paikan määrittäminen

Kuvan paikkaa voidaan muuttaa CSS-kielellä. Ensinnäkin kuvalle pitää keksiä jokin div-lohko, jonka sisään kuvan laittaa. Alla esimerkki:

<div class="kuva">
<img alt="Auto" src="auto.jpg" />
</div>

Kun tämän kuvan paikkaa haluaa muuttaa, sen pystyy tekemään siirtämään index.html tiedostossa haluamaansa väliin ja sen jälkeen muuttaa sitä CSS-tiedostossa.

.kuva {
float: left;
position: relative;
margin: 10px;
max-width: 100%;
}

Kuvan kokoa suosittelen vaihtamaan kuvankäsittelyohjelmalla haluamakseen.

Videon lisääminen YouTubesta

Youtubesta pystyy lisäämään videoita kotisivulle siten, että videota voidaan katsoa kotisivulta ilman, että tarvitsee siirtyä YouTubeen.

Videon osoite YouTubessa:
http://www.youtube.com/watch?v=Vxte2lGH1hk
Klikkaa "Jaa" ja valitse "Upotuskoodi".
Kopioi upotuskoodi ja liitä se index.html-tiedostoon.

Yllä olevan videon pystyy lisäämään, kirjoittamalla seuraavan tekstin index.txt tiedostoon:

<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Vxte2lGH1hk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Huomioi, että video on lisätty div-lohkon sisään!

Lisäksi tämä video pitää lisätä CSS-tiedostoonkin. Tämä käy esimerkiksi seuraavasti:

.video object{
width: 640px;
height: 360px;
float: left;
position: relative;
padding: 0px;
margin: 20px;
}

Harjoitus

2017-09-27T18:42:41+03:00

1. Jatketaan samaa harjoitusta kuin viime tunnilla.

2. Lisää kuvallesi div-lohko ja anna lohkolle jokin nimi.

3. Muuta kuvasi koko sopivaksi kuvankäsittelyohjelmalla ja kokeile siirtää kuvaa joko oikeaan tai vasempaan laitaan. Valitse mieleisesi sijainti kuvalle.

4. Lisää musiikkivideot sivulle kaksi musiikkivideota YouTubesta siten, että videot näkyvät sivulla.

5. Laita videot vierekkäin. Molempien videoiden tulee mahtua ruudulle vierekkäin.

6. Tallenna!

Harjoitus 7

Viikko 7

Harjoitus