Link

Een website staat voor met links naar andere pagina's / websites. Een link kan je maken met gebruik van de a tag

<a href="index.html" target="_blank">Link naar index.html</a>

De tekst tussen <a ..> en </a> zal op je scherm komen dus in dit geval "Link naar index.html".

Het attribuut target is optioneel. target="_blank" zal de link openen in een nieuw tabblad.
Het attribuut href is de verwijzing van de link. Dit is een andere pagina of een url.

CSS opmaak van een link kan op onderstaande manier. Let op een link kan in veel verschillende staten verkeren. Dus ook wat meer code nodig voor de opmaak.

/* eigenschappen voor elke link */
a {
    text-decoration: none; /* geen lijntje onder de link */
}
/* nog niet bezocht link */
a:link {
    color: red;
}

/* reeds bezocht link */
a:visited {
    color: green;
}

/* muis over link */
a:hover {
    color: hotpink;
}

/* geselecteerde link */
a:active {
    color: blue;
} 

Link binnen de pagina

Een webpagina kan heel lang zijn. Soms wil je je gebruiker naar een tekst ergens binnen je pagina sturen. Dat kan door het gebruik van id's.

Geef het element waar je naartoe wilt verwijzen een id bv:

<h3 id="tekst1">Tekst 1</h3>

Nu kan je een link maken waarmee je naar dit element wordt doorgestuurd.

<a href="#tekst1">Ga naar tekst 1</a>

Een lang pagina voorbeeld:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    p {
        margin-bottom: 200px;
        width: 400px;
        font-size: 1.5rem;
    }
</style>
<a href="#tekst1">Ga naar tekst 1</a>
<a href="#tekst2">Ga naar tekst 2</a>
<a href="#tekst3">Ga naar tekst 3</a>
<h3 id="tekst1">Tekst 1</h3>
<p>Tekst 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, accusantium aspernatur autem consectetur
    cupiditate distinctio dolor dolore fuga ipsam ipsum laborum nam natus nemo nisi odio odit officiis repellat,
    tempore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, deserunt earum eos molestias provident
    sed. Aperiam debitis eos eum facilis fuga, impedit, incidunt iure iusto labore, molestias nihil quos sunt? Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aut commodi consequatur debitis distinctio earum
    ex explicabo facilis incidunt iste magni, necessitatibus nisi, numquam obcaecati quam, similique sit voluptate.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores assumenda atque aut blanditiis
    dolor ducimus eius eligendi, et ex incidunt, minus placeat, quibusdam quos rerum soluta tempore vel voluptatibus.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid asperiores autem beatae consectetur
    cumque, dolorem error est fugit inventore ipsam natus neque nesciunt pariatur, placeat qui quos voluptate
    voluptatibus?
</p>
<h3 id="tekst2">Tekst 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores neque numquam provident quasi ut. Cumque
    doloremque dolores dolorum, error inventore iste laborum quidem! Accusamus eum ex iste nulla numquam suscipit? Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Ab, accusantium aspernatur autem consectetur
    cupiditate distinctio dolor dolore fuga ipsam ipsum laborum nam natus nemo nisi odio odit officiis repellat,
    tempore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, deserunt earum eos molestias provident
    sed. Aperiam debitis eos eum facilis fuga, impedit, incidunt iure iusto labore, molestias nihil quos sunt? Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aut commodi consequatur debitis distinctio earum
    ex explicabo facilis incidunt iste magni, necessitatibus nisi, numquam obcaecati quam, similique sit voluptate.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto commodi corporis distinctio doloremque, ducimus
    ea harum itaque magni minima minus nihil nulla praesentium quaerat quasi repellat sed ullam velit vitae. Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Accusantium, aliquam beatae, consequatur earum eligendi est et
    excepturi, exercitationem ipsam necessitatibus nesciunt nisi odit perferendis possimus quibusdam quo ratione sint
    temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eos labore maiores necessitatibus
    quos recusandae similique vitae. Aliquid fuga odio quae quas totam. Adipisci delectus facere itaque, sed sequi
    velit.
</p>
<h3 id="tekst3">Tekst 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate enim error ex odio quisquam ratione suscipit.
    Distinctio, excepturi sunt! Animi doloremque eaque, expedita inventore laborum perferendis praesentium quae sed
    unde! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, accusantium aspernatur autem consectetur
    cupiditate distinctio dolor dolore fuga ipsam ipsum laborum nam natus nemo nisi odio odit officiis repellat,
    tempore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, deserunt earum eos molestias provident
    sed. Aperiam debitis eos eum facilis fuga, impedit, incidunt iure iusto labore, molestias nihil quos sunt? Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aut commodi consequatur debitis distinctio earum
    ex explicabo facilis incidunt iste magni, necessitatibus nisi, numquam obcaecati quam, similique sit voluptate.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci at consequatur culpa deserunt doloremque earum,
    error esse eveniet ipsa itaque magni nesciunt quia sed sunt tempora tenetur velit, veritatis, voluptatum. Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Atque consequuntur esse maxime, molestiae nesciunt nobis
    possimus saepe similique sit vero. Accusamus asperiores, ex expedita facilis fugit harum laudantium minus vitae?
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam architecto facere incidunt, ipsum
    laudantium, magnam necessitatibus quasi rem repellendus repudiandae temporibus? Aperiam cupiditate delectus eligendi
    esse nihil quam tempora?
</p>
</body>
</html>