Html link code in webpagina'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="https://zzongs.com"><img src="https://zzongs.com/images/Z/zzongs.webp" alt="zzongs logo"</a>

In de alt atribuut kan je beschrijven waarover de afbeelding gaat. Gebruik ook een goede bestandsnaam die beschrijft waarover de afbeelding gaat, zoals 'zzongs.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=”https://zzongs.com/ArtistsInfo.html”>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=https://zzongs.com"></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

Html link code inside pages of websites

A link inside a web page can be very handy. Like the links you can find in the menu structure of a website and the text of the page itself. To implement links there is some html coding required. Accoarding to each type of link you need to ad some html code. We explain it to you in a simple way so you can implement it directly in to your web pages. As a webmaster adding or changing links on your website will be a peace of cake after reading this post. So here are the type of links that we're going to share with you. Html link codes starts always with an '<a href= ' and ends with a '</a>'.

Text link
This is the most used link method that every webmaster needs to now how to implement in his website pages.

html code

<a href="http://archivisiondirectory.blogspot.com/2016/10/broken-link-checkers-for-your-website.html">Visit our Broken Link Tutorial</a>

Image link
A link attached to an image is sometimes very useful. Most buttons are images with a link attached to it. The user of your website will click on the image to go to another page and browse your website.

html code with all the attributes that can be set by the user

<a href="https://zzongs.com"><img src="https://zzongs.com/image/Z/zzongs.webp" alt="zzongs logo" style="width:42px;height:42px;border:0;"></a>

In the alt atribute you can describe what's the picture about. Use also a filename that describes the picture like 'zzongs logo.jpg' this helps Google and other search engines to crawl the right information about the picture.

The style atribute is not always necessary but is usefull if you want big pictures to be shown smaller without having to compress them first or if you want to show a border around the picture.

Anchor link, linking within a web page
These links are called 'Anchors' and are very similar to normal links with the difference that a normal link will point to the top of another page and an anchor will point to a place within the same page you already at.

To do this you need to create a set of links, mostly on the top of the page, that points to an anchor inside the page. Then you need to define the anchor itself where it begins in the page.

Html code that points to an anchor

<a href=”#dogs”>Dogs</a>

<a href=”#cats”>Cats</a>

<a href=”#birds”>Birds</a>

Html code of the anchor inside the page

< a name=”dogs”></a>
…

< a name=”cats”></a>
…

< a name=”birds”></a>


Note: this code works only for the page you're on. If you want to link to an anchor inside another page you need to use the following html code:

<a href=”https://zzongs.com/ArtistsInfo.html”>Artists</a>

Load page into a new tab
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 zoals _blank.

Html code that opens the page into a new tab

<a href="http://archivisiondirectory.blogspot.com" target="_blank">Visit the ArchiVision Directory</a>

Other target attributes that can be used:

_blank - Opens the linked document in a new window or tab, this is the most used attribute.

_self - Opens the linked document in the same window/tab as it was clicked. This is only needed if the page has to be releaded in the browser after clicking the link.

_parent - Opens the linked document in the parent frame.

_top - Opens the linked document in the full body of the window.

framename - Opens the linked document in a named frame.

Redirecting page
A redirecting page is a page that links a page to another page because the original page that was linked to was moved to another place. When this happens than a redirecting page is a good solution that links the landing page to the link with a 'between link' in the form of a directing page. Note that a redirecting page this is a full html document and has to be uploaded to the original spot where the moved html file was first. When clicking the link the browser will send you to the redirecting page and the redirecting page will that sends you to the right page without you even notice it. This way you avoid broken links in your website.

Html code, not that this is an entire full html file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Redirected To</title>
<meta http-equiv="REFRESH" content="0;url=https://zzongs.com"></HEAD>
<BODY>
This page is rediricted to an other place.
</BODY>
</HTML>

Note that the 0 after the content=" means that you display the redirect page for 0 seconds, you can change that value to more seconds if you want to display the user something that is on this page but this is not necessary in fact the user want to be on that landing page as soon as possible.

CSS style
Most modern websites run css files to manage the layout and the style of the web pages. With this file you can set the properties of text and other things but also links can be styled with it. Links can be in 4 different states that can be styled seperately.

css code snipet

<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 and innerlinks, SEO and ranking in Google
Google does count how many links their are to a webpage. The most linked webpage will be crawled more often and will likely rank higher than other pages. Their are 2 different types of links in SEO. The first is the most easy to manipulate and are the innerlinks. These are the links inside your website that pointing to another page inside your website. The more you link to a page inside your website, the more important the page is. The second type of links are backlinks. This are links coming from other websites that link to a page from your website. This backlinks are very important for ranking. The more backlinks from different websites the more relevant a page is and Google knows this because the core of their algorithm is based on this. Note that the backlinks need to go about the same subject to give weight to the Google ranking. And a second note: don't mess with this system because you can be penalized to a lower ranking if Google see irregularities.

Related content
Check and repair broken links with broken link checkers

Broken link checkers voor uw website

Als webmaster wil je geen fouten in uw website. Een dode link (dead link, broken link) betekend geen verkeer en uiteindelijk geen verkoop als klanten het product niet kunnen vinden als ze op een 404-pagina terecht komen. Vanuit mijn ervaring, en vele andere webmasters, verlaten mensen uw website onmiddellijk als ze niet direct vinden wat ze zoeken en dat is niet anders voor uw website als ze op een 404-pagina terechtkomen. Het is dus van de hoogste prioriteit dat we deze dode links oplossen.

Het is dus belangrijk om te controleren of er dode links in uw website, zodat u deze direct kunt corrigeren. Je kan dit handmatig doen door elke pagina van uw website te één voor één te bezoeken en elke link aan te klikken, maar dat is zeer tijdrovend. Niets mis mee hoor. Uiteindelijk deed ik dit als onervaren webmaster ook, maar er zijn betere manieren om dode links te controleren: Brokenlinkcheck.com en Xenu's Link Sleuth. De voordelen van deze 2 tools zijn enorm en waarom wil ik wil deze met u delen zodat u niet telkens manueel uw webpagina's hoeft checken op dode links.

Beam us up
Dit is een online tool die naast http ook het https protocol ondersteund. Deze app die volledig in Java code is geschreven heeft enkel de laatste Java software nodig om te kunnen functioneren. Mits het aanpassen van een aantal instellingen hoeft deze app niet veel rekenkracht te gebruiken. Deze app kan dus gemakkelijk op de achtergrond draaien terwijl u andere zaken doet op de computer. Naast gebroken links checken kan deze app ook meta data zoals titles en tags controleren of deze dubbel voorkomen of net ontbreken.

website: beamusup.com

Brokenlinkcheck.com
Dit is een online tool die uw website controleert. Het is goed genoeg voor reguliere websites die niet meer dan 3000 pagina's bevatten. Ik vond deze tool, toen ik op zoek was naar een tool die ook https websites kon controleren. Dit doordat blogger hun protocol onlangs veranderd heeft van http naar een beveiligde https adres.

voordelen
U hoeft geen ​​programma te installeren op uw computer.
Het is snel.
Het overbelast uw computer niet.
HTTP en HTTPS wordt ondersteund

nadelen
Het kan geen ongeldige afbeelden scannen.
Het kan maximaal 3000 webpagina's controleren.

website: brokenlinkcheck.com

Xenu's Link Sleuth
Deze tool staat bij vele webmasters bekend als het beste programma om dode links te controleren.

voordelen
Controleert elke link, ook ongeldige afbeeldingen.
U kunt een lijst met meerdere websites controleren.
Het is mogelijk om tot 10 pagina's in één keer te scannen.
U kunt zoveel pagina's controleren als u wilt.
Voor grote sites met veel pagina's.

nadelen
Je kan geen beveiligde websites die met https controleren, alleen http wordt ondersteund.
Xenu Sleuth heeft veel middelen van de computer.

website: home.snafu.de/tilman/xenulink.html

Verwante onderwerpen
Html link code in webpagina's

Broken link checkers for your website

As a webmaster you want no errors for your website. A broken link (dead link) is like results in no traffic and eventually no sales if costumers can't find the product if they land on a 404-page. From my experience and many other webmasters, people leave your website immediately if they find not what they looking for and that's not otherwise for your website if they land on a 404-page. So it's necessary that we need to repair broken links in our website.

It is important to check if there are broken links in you website so you can correct it immediately. You could do this manually by visiting every page of your website en click every link on those pages but that's very time consuming. Nothing wrong with it. Actually I did this to in my early days of being a webmaster but there are better ways to check broken links: Brokenlinkcheck.com and Xenu's Link Sleuth. The advantages of these 2 tools are enormousand that's why I want to share these with you.

Brokenlinkcheck.com
This is an online tool that checks your website. It's good enough for regular websites that has no more than 3000 pages. I found this tool because I was searching for a tool that also checks https websites since blogger changed their protocol from http to more secured https.

advantages
You don't need to install a program on your computer.
It's fast.
It doesn't overload your computer.
Http and Https is supported.

disadvantages
It doesn't check broken images.
It can only checks a maximum of 3000 webpages.

website: brokenlinkcheck.com

Beam us up
This is an online tool that can handle the http and the https protocol. This app is fully written  in Java code. You only need the latest Java software installed on your PC to function. Beside checking for broken links the app can also check for missing meta data like titles and double tags.

website: beamusup.com

Xenu's Link Sleuth
This tool is well known by many webmasters as the best program to check broken links.

advantages
Checks every link, also broken images.
You can use a list of websites that can be checked all together
It's possible to scan 10 pages at once.
You can check as many pages as you want.
For large sites with many pages.

disadvantages
You can't check secured websites beginning with https, only http is supported.
Xenu Sleuth needs many resources of the computer.

website: home.snafu.de/tilman/xenulink.html

Related subjects
Html link code inside pages of websites