HTML/Basiscursus/Links

HTML

Inhoudsopgave
  1. De basis
  2. Tekst structureren
  3. Links
  4. Opmaak
  5. Afbeeldingen en objecten
  6. Tabellen
  7. Scripts
  8. Citeren
  9. Frames
  10. Formulieren
  11. Commentaar

Met links kunt uw pagina verbinden met een andere pagina of bestand. U kunt links in de inhoud van uw pagina zetten (hypertekst links) maar u kunt ook een relatie definiëren tussen uw gehele pagina en een andere pagina (document relaties).

bewerken

U maakt een link in uw pagina met behulp van de a-tag in samenwerking met het href-attribuut. De tekst of afbeelding tussen de a-tags zal klikbaar worden voor de gebruiker.

bewerken

U kunt in uw pagina lokale links maken naar documenten die zich op dezelfde website bevinden. U hoeft dan niet het volledige adres op te geven maar alleen de locatie van het bestand in verhouding met document. Alles tussen <!-- en --> is commentaar, daarover later meer.

HTML-code: Lokale links

<a href="pagina1.html">Pagina 1</a>
<!-- Link naar het bestand pagina1.html in dezelfde map -->

<a href="./pagina2.html">Pagina 2</a>
<!-- Link naar het bestand pagina2.html in dezelfde map -->

<a href="../pagina3.html">Pagina 3</a>
<!-- Link naar het bestand pagina3.html in de bovenliggende map -->

<a href="inhoud/pagina4.html">Pagina 4</a>
<!-- Link naar het bestand pagina4.html in de map inhoud -->

<a href="../inhoud/pagina5.html">Pagina 5</a>
<!-- Link naar het bestand pagina5.html in de map inhoud in de bovenliggende map -->

<a href="/pagina6.html">Pagina 6</a>
<!-- Link naar het bestand pagina6.html in de rootmap -->

<a href="/inhoud/pagina7.html">Pagina 7</a>
<!-- Link naar het bestand pagina7.html in de map inhoud in de root -->
bewerken

U kunt ook links maken naar andere websites, u moet dan het gehele internetadres opgeven.

Het is een goed gebruik om niet alleen de map aan te geven (bijvoorbeeld http://www.google.nl/) maar het complete adres (bijvoorbeeld http://www.google.nl/index.html). Op deze manier bezorgt u de betreffende server iets minder werk, omdat deze dan niet hoeft uit te zoeken wat het "indexbestand" is. Het had immers net zo goed index.php kunnen zijn, of index.xhtml. Door het daadwerkelijke bestand aan te geven, bespaart u een server extra load.

HTML-code: Externe links

<a href="http://www.wikipedia.org">Wikipedia</a>
<!-- Link naar de externe website Wikipedia -->

<a href="http://www.google.nl/search?q=wikibooks">Zoekresultaten "Wikibooks"</a>
<!-- Link naar een externe pagina van Google -->
bewerken

Links kunnen ook wijzen naar een bepaald deel van een pagina, als u dan op een link klikt verspringt de pagina naar de aangewezen tag. U kunt linken naar een plek in dezelfde pagina maar ook naar een plek in een andere pagina.

Eerst geeft u de tag waar u naartoe wil linken een naam met behulp van het id-attribuut, ook het name-atribuut kan gebruikt worden. Vervolgens kunt u in een link naar deze tag verwijzen met een hekje (#) gevolgd door het id (of name) van de tag.

HTML-code: Links naar een id

<p><a href="#inhoud">Naar de inhoud</a></p>
<p>Een lange inleiding...</p>
<p id="inhoud">Hier komt de inhoud</p>
<!-- Link naar een bepaald deel in dezelfde pagina -->

<a href="http://nl.wikibooks.org/wiki/HTML:_Semantiek#Het_semantisch_web">Het semantisch web</a>
<!-- Link naar een bepaald deel in een externe pagina -->

Document relaties

bewerken

Met behulp van het link element kunt u linken naar documenten die een relatie hebben met de pagina. Voorbeelden hiervan zijn: het volgende of vorige hoofdstuk, de inhoudsopgave of een externe stylesheet.

Een link element gebruikt het rel en rev attribuut om aan te geven op welke manier de link verband houdt met de pagina. Het href attribuut wordt gebruikt om de locatie van het document aan te geven. De link tag mag alleen in het head element voorkomen.

HTML-code: Document relaties met het link element

<head>
  <link rel="index" href="inhoudsopgave.html">
  <link rel="next" href="hoofdstuk3.html">
  <link rel="prev" href="hoofdstuk1.html">

  <link rel="chapter" href="hoofdstuk7.html" title="Hoofdstuk 7">
  <link rel="section" href="hoofdstuk6.html#2" title="Hoofdstuk 6.2">

  <link rel="alternate" lang="en" href="chapter2.html">
  <link rel="alternate" type="print" href="print/hoofdstuk2.html">

  <link rel="stylesheet" href="normaal.css">
  <link rel="alternate stylesheet" href="slechtzienden.css">
  <link rel="alternate stylesheet" media="print" href="print.css">
</head>

Met het rel attribuut geeft u de relatie aan van het doel van de link en het huidige document, met het rev attribuut de relatie van het huidige document tot het doel van de link.

Er zijn enkele standaard link types die u kunt gebruiken in het rel en/of rev attribuut, dit zijn:

alternate
Wijst een plaatsvervangende versie voor het huidige document toe van waaruit de link voorkomt. Wanneer samen met het lang-attribuut gebruikt, verwijst het naar een vertaalde versie van het document. Wanneer samen met het media-attribuut gebruikt, verwijst het naar een versie ontworpen voor een ander medium (printen, telefoon, etc.).
stylesheet
Verwijst naar een externe style sheet.
alternate Stylesheet
Verwijst naar een alternative externe style sheet. Een user agent kan de gebruiker de optie geven deze stijl te kiezen.
start
Verwijst naar het eerste document in een collectie van documenten. Dit link type vertelt zoekrobots welk document door de auteur beschouwd wordt als het startpunt van de collectie.
next
Verwijst naar het volgende document in een reeks van documenten. User Agents kunnen er voor kiezen om deze documenten alvast te laden om zo de pagina later sneller te tonen.
prev
Verwijst naar het vorige document in een reeks van documenten. User Agents kunnen er voor kiezen om deze documenten alvast te laden om zo de pagina later sneller te tonen.
contents
Verwijst naar een document dat dienst doet als een inhoudstabel.
index
Verwijst naar een document dat dienst doet als startpagina.
glossary
Verwijst naar een document dat dienst doet als een lijst van begrippen voor termen die in het document voorkomen.
copyright
Verwijst naar een verklaring van auteursrechten voor het huidige document.
chapter
Verwijst naar een document dat dienst doet als een hoofdstuk in een collectie van documenten.
section
Verwijst naar een document dat dienst doet als een onderdeel in een collectie van documenten.
subsection
Verwijst naar een document dat dienst doet als een onderafdeling in een collectie van documenten.
appendix
Verwijst naar een document dat dienst doet als een appendix in een collectie van documenten.
help
Verwijst naar een document dat hulp biedt.
bookmark
Verwijst naar een bladwijzer. Een bladwijzer is een link naar een sleutelpositie binnen een uitgebreid document. Het title-attribuut mag gebruikt worden om de bladwijzer te labelen.

U kunt ook zelf nieuwe linktypes introduceren maar User Agents zullen de relatie dan niet begrijpen.

Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.