Speciale karakters met html-entiteiten

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.

In dit hoofdstuk werken we met de local root folder htm--.

Daarin staat de index.html en dat is deze pagina.

Met html-entiteiten kun je speciale karakters creëren op de pagina.

Dat zijn karakters die je niet zomaar kan typen via het toetsenbord.

Of karakters die door de browser vertaald worden als html, broncode.

Ik laat het zien.

Elk html-element staat tussen de tekens kleiner-dan en groter-dan.

Op mijn webpagina wil ik iets gaan vertellen over het h-element.

Als ik de tekens kleiner-dan en groter-dan plaats om de h.

Dan zie je eigenlijk al direct in de broncode dat dit misgaat.

Brackets herkent de html-tag en sluit deze direct ook netjes voor me af.

Nu is het een echte h-tag geworden.

Ik plaats er even tekst h tussen.

Zodat je het resultaat hiervan kunt zien in het voorbeeld en bewaar mijn document met Commando S.

Een h is een blokklever element.

En daarom staat de tekst h nu ook op een aparte regel in de vormgeving van een h.

Want blocklevel elementen staan altijd alleen op de regel.

Ik maak dit ongedaan door meerdere keren Commando Z te gebruiken.

Zo nu ben ik weer terug bij het begin.

Maar hoe zorg ik er dan wel voor dat ik het h-element op dezelfde manier in beeld kan brengen als in de broncode.

Omdat dit probleem zich voordoet met allerlei tekens die voor het schrijven van broncode worden gebruikt.

Is hier een oplossing in gevonden met de zogeheten html-entiteiten.

Een html-entiteit staat altijd geschreven tussen het &-teken en een puntkomma.

Tussen deze tekens plaats je dan de vervangende entiteit.

In dit geval kan ik het kleiner-dan teken vervangen voor lt.

Dat staat voor littler than.

Het groter dan teken kan ik vervangen voor gt, greater than.

Bewaar het document en dit is precies wat ik wilde.

Zo kun je dus toch een html-tag laten tonen op een webpagina.

Zo zijn er nog veel meer van dat soort bijzondere karakters en ik laat er even een aantal zien op de volgende regel.

De euro bijvoorbeeld. Als ik deze wil tonen plaats ik de entiteit 'euro; tussen het &-teken en de puntkomma.

Zo heb je ook de 'copy' dat is het copyright-teken.

Of bijvoorbeeld het &-teken zelf. Daarvoor gebruik je de 'amp'. Ampersand in het Engels.

Er zijn een heleboel van dit soort karakters waar een speciale schrijfwijze bij hoort.

En die kun je vinden op deze wikipedia pagina.

Op deze pagina vind je de hele lijst met html-entiteiten terug. Met een voorbeeld van het karakter.

Een percentage geef je dan aan met 'percnt'.

Ga door deze lijst heen en probeer een aantal van deze entiteiten uit op de pagina.

En dit is inderdaad het percentage-teken.

Het enige wat je moet onthouden is dat je een entiteit altijd plaatst tussen het &-teken en een puntkomma.