Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

HTML – links

Het internet is een verbinding tussen pagina’s. Deze pagina’s zijn met elkaar verbonden via zogenaamde links. Deze links kun je zelf maken met de HTML link tag.

HTML links maken met de anchor tag

De verbinding tussen je verschillende pagina’s bestaat uit links. Deze kun je maken met de anchor tag <a href=”…”>Tekst</a>. Het attribuut href zegt de anchor tag waar de bedoelde pagina staat. Deze pagina kan zowel op je eigen server als op een andere server staan.

Standaard is een link opgemaakt als volgt:

  • nog niet bezochte link is blauw en onderstreept;
  • een bezochte link is paars en onderstreept;
  • een actieve link is rood en onderstreept.

Wil je de stijl van een link aanpassen, dan kun je dit het beste met CSS doen. Door de anchor tag te omschrijven in je stijlsheet kun je deze vervolgens opmaken.

Atrributen anchor tag

De <a>…</a> tag heeft een aantal attributen waar je als webmaster je voordeel mee kan doen.

  •  href: geeft de url van de pagina waar je een link naartoe wilt maken.
  • hreflang: specificeert de taal van de site waar je naartoe linkt.
  • media: specificeert het soort media waarvoor de pagina is geoptimaliseerd.
    • all: voor alle soorten media goed.
    • handheld: voor kleine media apparaten zoals smartphones, tablets.
    • print: pagina om te printen op papier.
    • screen: pagina om weer te geven op het beeldscherm.
  • rel: specificeert de relatie tussen jouw pagina en de pagina waarmee je een link legt.
  • target: bepaalt in welk scherm de link moet worden geopend.
    • _blank: open in een nieuw window.
    • _self: open in hetzelfde window, is standaard de value.
    • _parent: opent de nieuwe pagina in het hoofdframe.
    • _top: opent de nieuwe pagina over het hele scherm.

Opmaak anchor tag met CSS

De opmaak van een link doe je bij voorkeur via CSS. Hoe maak je een anchor tag dan op met CSS? Dit gaat als volgt.

a:link {color: blue;}      /* onbezochte link */
a:visited {color: red;}  /* bezochte link */ 
a:hover {color: green;}  /* over de link gaan met de muis */ 
a:active {color: yellow;}  /* geselecteerde link */

Iedere link krijgt nu dezelfde opmaak. Natuurlijk kun je nog veel verder gaan en speciale font uitkiezen, dikte bepalen, margin bepalen, of een link wel of niet onderstreept moet zijn bij een zogenaamd hover effect (dan zet je text-decoration op none of juist underline). Kortom, genoeg om eens mee te spelen.

Lees hier meer over dit onderwerp: http://regnery.net/css/css-pseudo-class/