Search trough the ArchiVision Directory:

Html link code in website pagina's

Een link in een web-pagina can zeer handig zijn. Je vindt ze vaak in de menu structuur en de tekst van de pagina zelf. Om linken te implementeren dien je een stukje html code nodig. Volgens welke type link je nodig hebt bestaat er telkens een andere html code. Wij leggen het u uit op een simple manier zodat ook jij gemakkelijk een linken kan toevoegen in uw web-pagina's. Als webmaster zal het voor jou zeer eenvoudig worden om linken te implementeren nadat je deze post hebt gelezen. Hierna volgen de verschillende type links die we met jou gaan delen. Iets fundamenteels aan de html code van links, ze starten altijd met <a href=' en eindigen altijd met '</a>'.

Tekst link
Dit is de meest gebruikte link methode die elke webmaster dient te kennen om toe te passen in zijn of haar website pagina's.

html code

<a href="http://archivisiondirectory.blogspot.be/2016/10/broken-link-checkers-voor-uw-website.html">Bezoek onze Broken Link handleiding</a>

Afbeelding als link
Een link die vast hangt aan een afbeelding is soms zeer nuttig. De meeste 'buttons' zijn afbeeldingen waar een link aan vast hangt. De gebruiken van jou website zal dan klikken op de afbeelding om naar een andere pagina te browsen op de website.

html code met alle atributen die kunnen ingesteld worden


<a href="http://photographsbywm.jalbum.net/mml/index.html"><img src="http://photographsbywm.jalbum.net/mml/MML-Logo.jpg" alt="Music Maestro Library (MML) logo" style="width:42px;height:42px;border:0;"></a>

In de alt atribuut kan je beschrijven waarover de afbeelding gaat. Gebruik ook een goede bestandsnaam die beschrijft waarover de afbeelding gaat, zoals 'MML Logo.jpg', dit helpt Google en andere zoekmachines om de juiste informatie te 'crawlen' over de afbeelding.

De stijl atribuut is niet altijd noodzakelijk maar wel nuttig als je grote afbeeldingen kleiner wil laten verschijnen op de pagina zonder dat je ze hoeft te comprimeren of als je een boord wil laten zien rondom de afbeelding.

Anker link, linken in dezefde web-pagina.
Deze linken worden 'Anchors' of 'Ankers' genoemd en zijn gelijkaardig aan normale linken met het verschil dat normale linken u naar de bovenkant van een pagina zullen sturen en dat een anker u naar de plaats binnen de pagina zal lijden. Dit kan op de zelfde pagina zijn die al actief was of op een nieuwe pagina.

Om dit te doen dien je een reeks linken te creeƫren, meestal bovenaan de pagina, deze verwijzen dan naar een anker die verder op in de pagina staat. Daarna dien je het anker zelf the definieren waar het begint in de pagina.

Html code dat verwijst naar het anker.

<a href=”#honden”>Honden</a>

<a href=”#katten”>Katten</a>

<a href=”#vogels”>Vogels</a>

Html code van het anker in de pagina.

< a name=”honden”></a>

< a name=”katten”></a>

< a name=”vogels”></a>

Let op: deze code werkt enkel voor pagina's waar je momenteel op bent. Als je wilt linken naar een aker in een andere pagina dan dien je onderstaande html code te gebruiken:


<a href=”http://photographsbywm.jalbum.net/mml/index.html#artists in the picture”>Artists</a>

Laad een pagina in een nieuw tab-blad
Als je een pagina wil laden in een nieuw tabblad van de browser zonder de andere pagina te sluiten waar de link zich op bevindt dan maak je het best gebruik van een target atribuut zoals _blank.

If you want to load the page in a new tab of the browser without closing the page where the link is on than you need to use a target atribute blank.

Html code dat de pagina opent in een nieuw tabblad.
<a href="http://archivisiondirectory.blogspot.com" target="_blank">Bezoek ArchiVision Directory</a>

Andere target atributen die kunnen worden gebruikt:

_blank - Opend het gelinkte document in een nieuw tabblad, dit is het meest gebruikte target atribuut..

_self - Opend het gelinkte document in het zelfde tabblad of venster. Deze target wordt niet veel gebruikt tenzij het nodig is dat de pagina opnieuw wordt geladen nadat er op de link wordt geklikt omdat er bijvoorbeeld nieuwe info op de pagina aanwezig zou zijn.

_parent - Opend het gelinkt document in de hoofdframe.

_top - Opend het gelinkte document in de 'full body' van het venster.

framename - Opend het gelinkte document in een benaamde frame.

Redirecting pagina
Een redirecting pagina is een pagina dat doorlinkt naar een andere pagina omdat het originele bestand waarnaar gelinkt wordt is verzet van plaats. Wanneer een pagina is verzet dan is het een goed idee om een redirecting pagina aan te maken en up te loaden naar de plaats waar de verzette pagina vroeger stond. Zo wordt de landingspagina met de link zelf aan elkaar gelinkt met een 'tussen link' in de vorm van een directing pagina. Een redirecting pagina is een volledig html document met de gebruikelijke tags. Wanneer men nu de link aanklikt zal de browser u via de redirecting pagina naar de juiste pagina omleiden zonder dat je er ook maar iets van merkt. Op deze manier kun je ook niet werkende links vermijden op jou website.


Html code, let er op dat dit een vollig html bestand is.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Omgeleid naar</title>
<meta http-equiv="REFRESH" content="0;url=http://photographsbywm.jalbum.net/mml/"></HEAD>
<BODY>
Deze pagina is omgeleid naar een andere plaats.
</BODY>
</HTML>

Merk op dat de 0 na de content=” er op wijst dat de redirecting pagina 0 seconden zichtbaar zal zijn in de browser. Je kunt deze waarde veranderen naar meer seconden als je iets wil tonen aan de gebruiker van de website maar dit is niet noodzakelijk want de gebruiker wil in feite zo rap mogelijk op de juiste landingspagina terechtkomen.

CSS style

De meeste moderne website hebben een css bestand draaien die de layout en de stijl van de website managed. Met dit bestand kun je de eigenschappen van een tekst en vele andere dingen zoals linken een stijl geven. Linken kunnen in 4 verschillende staten gestijld worden.

css code

<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>

Backlinks en innerlinks, SEO en ranking in Google

Google houdt wel degelijk rekening met het aantal links die er zijn naar een web-pagina. De meest gelinkt web-pagina zal ook het vaakst gecrawled worden door Google en zal hoogst waarschijnlijk ook hoger scoren in de zoekresultaten. Er zijn 2 type links in SEO. Het eerste type is de gemakkelijkst om te manipuleren en zijn innerlinks. Dit zijn de linken in uw website die verwijzen naar een pagina binnen uw website. Hoe meer je links naar een bepaalde pagina binnen uw website, hoe belangerijker de pagina is. Het tweede type links zijn backlinks. Dit zijn links afkomstig van ander websites die linken naar een pagina van jouw website. Deze backlinks zijn zeer belangrijk voor het ranken. Hoe meer backlinks van verschillende websites, hoe relevanter de pagina is en ook Google weet dit, want dit is ook de basis van hun zoek algoritme. Let hierbij op dat de backlinks zo veel mogelijk over het zelfde onderwerp gaan om extra gewicht te geven aan de Google ranking. Een tweede opmerking: ga niet rond dollen met dit systeem want je kunt gestraft worden met een lagere ranking als Google onregelmatigheden aantreft en je als webmaster bezig houdt met de grijze zone van SEO optimalisatie.

Relevante onderwerpen
Broken link checkers voor uw website