Afbeelding en -button- linken naar bestand

uit de cursus Basiskennis HTML5 (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Basiskennis HTML5 (2019)

perm_identity Belinda | video_library 55 video's | query_builder 3:02:53

Webpagina’s maken met HTML

Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content. In webdesign is namelijk de content gescheiden met de opmaak. Zoekmachines gebruiken de HTML-structurering om betekenis en waarde aan de content te verbinden. Maak je niet gebruik van de juiste structurering dan zul je dit terugzien in de zoekresultaten. Slecht gestructureerde webpagina’s worden minder goed geïndexeerd

Doelgroep van deze cursus

Iedereen die wil leren hoe je statische websites maakt of haar/zijn kennis wil uitbreiden van webdesign-technieken in het algemeen. Heb je bijvoorbeeld al ervaring met het maken van websites met een CMS als WordPress. Dan nog is het bijna onmisbaar om voldoende begrip te hebben van de broncode.

Wat ga je leren

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. Je krijgt uitgebreid uitleg en inzicht in de juiste wijze waarop je de html-tags toepast.

Je leert hoe de juiste mappenstructuur voor webproducties in de zogeheten Local Root Folder. je krijgt uitleg over de semantische betekenis van de html-tags en leert hoe je pagina’s structureert conform de regels van het W3C.

Eventuele vervolgcursus

Een logische vervolgcursus is de cursus Basiskennis CSS. Hierin leer je de vormgeving van webpagina’s onder de knie te krijgen met CSS. Dit is de werkwijze voor het creëren van prachtige webpagina’s. Eerst zorgen dat de HTML op orde is en vervolgens de vormgeving bepalen met CSS.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen specifieke voorkennis nodig. Algemene kennis van de computer is wel belangrijk.

Het linken naar een bestand is net zo eenvoudig als het linken naar een andere pagina.

Het bestand kan in principe overal staan.

Dus dat hoeft niet perse in je eigen local root folder te zijn.

Maar dan moet je wel het absolute adres weten naar dit bestand toe.

In deze oefening staat het bestand wel in de Local Root Folder.

Open de map docs.

Ik wil dat deze afbeelding op de pagina gaat linken naar het bestand voorwaarden.pdf.

Ik knip het img-element weg van de pagina met CommandoX en plaats het a-element.

Dan plak ik de afbeelding weer terug binnen het link-element.

Plaats het attribuut href=" " binnen de -a- en geef nu daarbinnen de route op.

Ind e amp docs staat het bestand voorwaarden.pfd.

Dan plaats je achter docs/ en daarin staat het bestand voorwaarden.pdf.

De afbeelding is nu een link geworden.

Zodra je in de browser met de muis over de afbeelding loopt verschijnt er ook een handje .

Ten teken dat dit een aanklikbaar item is geworden.

Ik wil nog wel dat de pdf in een nieuw venster verschijnt.

Dus plaats ik ook nog het attribuut target=" ".

En kies dan voor de optie _blank.

Dan kun je de link gaan controleren in een browser.

Klik op de afbeelding. En inderdaad.

Een nieuw tabblad verschijnt en de pdf wordt hierin geopend.

Als je ook de tekst zou willen linken naar dit bestand.

Dan kun je de afsluitende -/a- verplaatsen naar het einde van de tekst.

Dan is de tekst nu ook onderdeel geworden van de link.

Je kunt dus meerdere elementen opnemen binnen één link-element.

Ze zullen dan allemaal gaan linken met het bestand of de pagina.

Een html-element wat nu leuk is om te vermelden is de -button-.

Als je wilt dat jouw link eruit ziet als een button, dan doe je dat met het html-element -button-.

Kijk nu wordt de linktekst als een knop weergegeven.

En bedenk dan dat je deze knop later kunt vormgeven met een cas-stijl.

Helemaal zoals jij dat wilt.