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

Html script that loads the first picture of the google search results in a html file corresponding to the title tag

Hey folks,

We are searching for a html code that can load up the first picture of the Google pictures results. The picture has to be corresponding with the title of the blog or the title tag in the html files.

For example:
We have a blog post about stones. Than the html code has to search for the first picture of stones in the Google pictures results and then display it on the website. If we go to another page in the website with the title plants than it the code automatically needs to reload and show a new pictures of plants in the garden.

Is t'is also possible to do this with YouTube video's?

Please leave a message...

Thanks in advance,

The ArchiVision Directory team.