Webdesign

Webdesign

Inleiding

Link binnen een webbrowser

Zodra je op het internet gaat browsen, maak je keuzes door op een stukje tekst, afbeelding of een knop te klikken. 

In deze arrangement ga je leren hoe deze links werken. als je kaar bent kun je zelf links maken in webpaginas. 

Voorkennis is dat je weet wat de structuur van een hml document is.

Uitleg

Hyperlinks

Bij een link zijn maar twee dingen van belang:
  • Waar kan de gebruiker op klikken. (plaatje of stukje tekst)
  • Waar gaat de gebruiker naar toe als deze op de link klikt.

Voor links gebruik je de <a> </a> tags. a is de afkorting van het Engelse woord "anhor" wat anker betekent.

Voorbeeld1:

<a href="http://www.nu.nl/">
   Klik hier om naar nu.nl te gaan
</a>

levert een tekst-link op:  

Klik hier om naar nu.nl te gaan

In dit voorbeeld ziet de gebruiker een stuk tekst. Als de gebruiker op de tekst klikt gaat hij naar de website van nu.nl

 

Voorbeeld 2:

<a href="http://www.nu.nl/">
   <img src="nunl.png" alt="Logo nu.nl" width="79px" height="79px">
</a>

levert een plaatje-link op:

 

In voorbeeld2 ziet de gebruiker een plaatje van 79 bij 79 pixels als hij op het plaatje klikt gaat hij eveneens naar de website van nu.nl

 

Net als bij plaatjes is het netjes om linkjes niet te laten niet zweven. Met andere woorden: ook een link zet ik vaak tussen een <p> en een </p> dit is niet verplicht.

Naast dat je kunt linken naar websites kun je ook linken naar paginas van je eigen site, bestanden of een bladwijzer op dezelfde pagina.

In onderstaand film wordten links uitgelegd.

 

Pseudoklassen

Het beeldscherm is de interface van de browser. Een interface is het punt van interactie tussen twee systemen of objecten.
Browsers hebben listeners (luisteraars) die permanent aan het luisteren zijn naar events (gebeurtenissen) op het beeldscherm.
Bijvoorbeeld wanneer de muis over een tekst zweeft. Dit noemen we muis-events.
Muis-events kunnen we programmeren met behulp van pseudoklassen.

Hyperlinks hebben de volgende pseudoklassen: 

  • a:hover   wanneer de muis over een hyperlink zweeft
  • a:focus  wanneer de muis op een hyperlink focust
  • a:visited  wanneer de muis een hyperlink heeft gactiveerd
  • a:active  wanneer de muis een hyperlink activeert

De pseudoklassen
a:visited en a:active veranderen de kleur van de bezochte en de actieve hyperlinks. Zo kunnen we zien welke links we bezocht hebben.

In de laatste opgave hebben we met behulp van de pseudoklasse a:hover een hover-effect gecodeerd zodat de kleur van de tekst van alle hyperlinks verandert wanneer de muis over de link zweeft.

Oefenen

Nu we weten hoe links werken is het tijd om te oefenen.

Ga naar W3schools om te oefenen met de verschillende attributen van de link tag.

Opdracht

Maak een html document met een navigatiemenu met minimaal drie links naar andere pagina's in dezelfde map. Deze pagina's mogen leeg zijn. Om de navigatie makkelijker te maken voor onze gebruikers codeer je in deze opgave een hover-effect zodat de achtergrondkleur van de hyperlinks verandert wanneer een hover-event plaatsvindt.

Zoek uit hoe je kunt linken binnen de zelfde document. Maak minimaal 5 paragrafen aan in je document. Elk paragraaf bestaat uit tenminste 5 regels. Zet bovenin je document een opsomming van links naar deze paragrafen. Dus een opsomming van 5 links die als je erop klikt naar de desbetreffende paragraaf gaan op dezelfde document/pagina.

Daarnaast maak je een plaatje-link die verwijst naar w3schools.com.

Als je klaar bent kun je de uitwerking mailen naar m.kocadag@alfa-college.nl

  • Het arrangement Webdesign is gemaakt met Wikiwijs van Kennisnet. Wikiwijs is hét onderwijsplatform waar je leermiddelen zoekt, maakt en deelt.

    Auteur
    Mehmet Kocadag
    Laatst gewijzigd
    2016-11-03 01:15:19
    Licentie

    Dit lesmateriaal is gepubliceerd onder de Creative Commons Naamsvermelding 3.0 Nederlands licentie. Dit houdt in dat je onder de voorwaarde van naamsvermelding vrij bent om:

    • het werk te delen - te kopiëren, te verspreiden en door te geven via elk medium of bestandsformaat
    • het werk te bewerken - te remixen, te veranderen en afgeleide werken te maken
    • voor alle doeleinden, inclusief commerciële doeleinden.

    Meer informatie over de CC Naamsvermelding 3.0 Nederland licentie.

    Ing. M. Kocadag

    Docent-ICT @ Alfa-college

    T. 088 334 23 66 | E. m.kocadag@alfa-college.nl

    Aanvullende informatie over dit lesmateriaal

    Van dit lesmateriaal is de volgende aanvullende informatie beschikbaar:

    Toelichting
    Leren werken met links
    Eindgebruiker
    leerling/student
    Moeilijkheidsgraad
    gemiddeld
    Trefwoorden
    anchor, html, hyperlnks, pseudo

  • Downloaden

    Het volledige arrangement is in de onderstaande formaten te downloaden.

    Metadata

    LTI

    Leeromgevingen die gebruik maken van LTI kunnen Wikiwijs arrangementen en toetsen afspelen en resultaten terugkoppelen. Hiervoor moet de leeromgeving wel bij Wikiwijs aangemeld zijn. Wil je gebruik maken van de LTI koppeling? Meld je aan via info@wikiwijs.nl met het verzoek om een LTI koppeling aan te gaan.

    Maak je al gebruik van LTI? Gebruik dan de onderstaande Launch URL’s.

    Arrangement

    IMSCC package

    Wil je de Launch URL’s niet los kopiëren, maar in één keer downloaden? Download dan de IMSCC package.

    Voor developers

    Wikiwijs lesmateriaal kan worden gebruikt in een externe leeromgeving. Er kunnen koppelingen worden gemaakt en het lesmateriaal kan op verschillende manieren worden geëxporteerd. Meer informatie hierover kun je vinden op onze Developers Wiki.

  • Gebruik
    Weergave
  • Wikiwijs is een dienst van