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; }
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>