63
Uitbreiden: tekst, afbeeldingen, links en Youtube
We gaan nu de webpagina uitbreiden. We gaan een tekst en afbeelding invoegen en een Youtube filmpje insluiten.
Tekst
Een simpel stukje tekst kan je het beste in een p-element insluiten. De p staat voor paragraaf.
Stap 1
Na de
tags gaan we het stukje tekst plaatsen. Begin met
, typ je stukje tekst en sluit af met
. Zie onderstaande voorbeeld of typ je eigen stukje tekst.

Stap 2
Sla het bestand op en typ in je browser http://localhost om het resultaat te bekijken.
Stap 3: Afbeelding opslaan
Je pagina word nog mooier met een afbeelding.
Stap 4
Zoek met Google een leuk plaatje.
Stap 5
Klik met de rechtermuisknop op het plaatje wat je wilt opslaan en kies Open Link. Het plaatje komt in het groot te voorschijn. Klik weer met de rechtermuisknop op het plaatje en kies Save Image As…
Stap 6
Klik links in het venster op Desktop.
Stap 7
Geef je plaatje een naam en klik op Save.
Stap 8
Voor we het plaatje invoegen moeten we hem eerst in de juiste map plaatsen.
Open de terminal en typ in:
sudo mv /home/pi/(naam plaatje) /var/www/html |
Druk dan op Enter.
Stap 9: Afbeelding invoegen
Typ onder je stukje tekst de volgende regel: 

Stap 10: Bekijken
Sla je bestand weer op en bekijk het resultaat in je browser. http://localhost. Als je browser nog open staat druk je op de F5 knop voor een refresh.
Link invoegen
Nu gaan we een link toevoegen aan het document. Dit doen we met het
element.
Stap 11
Typ:
onder 
Stap 12
Sla je document op en kijk weer op http://localhost voor de verandering.
Het linkje staat nu naast de afbeelding en dat ziet er niet zo mooi uit. Om het linkje onder de afbeelding te krijgen voegen we een
tussen
en 
Je code ziet er dan zo uit als hier onder.

YouTube
Stap 13
Ga naar https://www.youtube.com en zoek een leuk filmpje uit. Bijvoorbeeld over Minecraft.
Stap 14
Druk onderaan het filmpje op Delen.
Stap 15
Druk op Insluiten.
Stap 16
Kopieer de tekst uit het tekst vak en plak deze in je teksteditor.


Stap 17: Bekijken
Sla weer op en bekijk het resultaat in je browser. http://localhost. Als je browser nog open staat druk je op de F5 knop voor een refresh.