IAI: Les 3/4 - Rick Hazebroek

 IAI: Les 3/4 Hyperlinks Rick Hazebroek [email protected]
Pim Leuthoff [email protected] 1
Les 3
Hyperlink: wat is het?
Bekijk de powerpoint van deze les.
In les 2 hebben we in elk vakje (elke div-tag) een hyperlink geplaatst. Een
hyperlink is een link. Wanneer je daarop klikt ga je naar een andere
pagina. Wanneer de bezoeker bijvoorbeeld op de banner van "Bekijk de
footies ", klikt gaat hij naar de pagina waar de footies op staan. Opdracht 1: Maak voor elke pagina een .html-bestand
We moeten voor elke pagina een HTML-bestand maken. Dit zijn de pagina’s:
1. ticket-for-two-actie.html
2. bekijk-de-footies.html
3. beluister-de-playlist.html
Een nieuwe pagina maak je als volgt:
1. Klik op File > New (⌘ N)
2. Vul het document (als voorbeeld wordt de pagina Bekijk de footies gebruikt):
<html> <head> <title>Converse Zwolle: Bekijk de footies</title> <link rel='stylesheet' href='style.css' /> </head> <body> Dit is de pagina: Bekijk de footies </body> </html>
2. Sla het bestand op met File > Save as… (⇧ ⌘ S) en vul dan de naam in (bijv.:
ticketfortwo.html). Sla het document op in de Converse Zwolle map.
Herhaal stap 1 t/m 3 voor bekijk-de-footies.html en beluister-de-playlist.html.
2
Opdracht 2: Hyperlinks maken die naar de bijhorende pagina’s linken (verwijzen)
Nu gaan we de hyperlinks verwijzen naar de bijhorende pagina’s linken. Dat wil zeggen dat als
we op de hyperlink van de Ticket for Two-actie drukken, we naar de pagina gaan waar de actie
wordt uitgelegd. Drukken we op de hyperlink van Bekijk de footies, dan gaan we naar de pagina
waar we de footies kunnen bekijken, enzovoorts.
In opdracht 1 van les 2 heb je vakjes (div’s) gemaakt voor elk pagina onderdeel (Logo, Video,
Ticket for two actie, Bekijk de footies, Beluister de playlist, Shopping bag en Contact). In drie van die vakjes moet een hyperlink komen: Ticket for two actie, Bekijk de footies en
Beluister de playlist.
De code ziet er nu zo uit, het kan zijn dat de class-namen en de tekst verschilt van wat jij hebt
getypt, dat maakt niet uit:
<div class='ticket-for-two'> Ticket for two actie
</div>
<div class='footies'> Bekijk de footies </div>
<div class='playlist'> Beluister de playlist </div>
Nu moeten we zorgen dat als we op de tekst Ticket for two actie drukken, we naar het bestand
ticket-for-two-actie.html gaan, als we op Bekijk de footies drukken we naar bekijk-defooties.html gaan en als we op Beluister de playlist drukken, we naar beluister-de-playlist.html
gaan. Dit doen we door een hyperlink te maken voor elk van die teksten. Daarvoor gebruiken
we de a-tag. Dit is een voorbeeld van een a-tag:
3
Achter href= komt de verwijzing waar we naar toe gaan als we op de hyperlink drukken. In het
voorbeeld hier gaan we naar de website van Cibap als we op de tekst "Bezoek de Cibap site"
drukken. Zo’n hyperlink (of a-tag) ziet er dan zo uit in je browser:
We gaan nu een hyperlink (a-tag) om onze teksten plaatsen. Zo wordt de tekst "Ticket for two actie":
<a href='ticket-for-two-actie.html'>Ticket for two actie</a>
Onze href ziet er iets anders uit dan in het voorbeeld van de Cibap-hyperlink. Wij verwijzen
(linken) de tekst namelijk naar een bestand in plaats van een website.
Maak nu voor elke tekst een hyperlink:
<div class='ticket-for-two'> <a href='ticket-for-two-actie.html'>Ticket for two actie</a> </div>
<div class='footies'> <a href='bekijk-de-footies.html'>Bekijk de footies</a> </div>
<div class='playlist'> <a href='beluister-de-playlist.html'>Beluister de playlist</a> </div> Zorg dat de bestandsnamen van ticket-for-two-actie.html, bekijk-de-footies.html en beluisterde-playlist.html kloppen met de bestandsnamen uit opdracht 1 van deze les. Bekijk
het resultaat in je browser door op de bliksem te drukken rechtsboven. (z.o.z.!) 4
We zijn nu nog 1 knop vergeten. Ons logo. Waar moeten we heen gaan als we op het logo
drukken? Naar de homepage! Dat logo komt natuurlijk straks ook op onze adere pagina’s en op
die andere pagina’s moeten we ook terug naar onze homepage kunnen. Welk bestand heeft
onze homepage eigenlijk? ….. index.html!
<div class='logo'> <a href='index.html'>Hier komt het logo</a> </div>
Les 4
In les 4 hebben we een Kahoot-quiz over HTML en CSS. Dit is een leerzame manier om de theorie van les 1 t/m 3 te herhalen.
Heb je dit gemist?
1. Ga naar http://goo.gl/KjJJXG. Start de quiz
2. Log in met je mobiel via www.kahoot.it. Voor de game-code in en start!
5

Download Report