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;
}