Afbreken van teksten met -wbr- en de html-entiteit ­

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.

Misschien is het je al eens opgevallen.

Maar standaard zal een browser nooit teksten afbreken met een afbreekstreepje.

Zodra een woord niet meer op een regel past, wordt deze in zijn geheel naar de volgende regel geplaatst.

Kijk maar wat er gebeurt met de woorden op deze pagina als ze niet meer passen op de regel.

Op zich is het natuurlijk geen probleem.

Totdat je hele lange woorden tegenkomt.

Die heb ik er nu natuurlijk express in gezet.

Maar lange woorden bestaan nu eenmaal.

En dat kan dat een heel lelijk regelverloop opleveren.

Wil je hier iets aan doen dan kan dat.

Je kunt op twee manieren zorgen dat teksten worden afgebroken.

De eerste manier die ik wil behandelen is de html-entiteit voor een zacht afbreekstreepje.

Dat heet een soft-hyphen in het Engels. Deze schrijf je als volgt.

Ik ga naar het woord dat ik wil kunne laten afbreken.

Het woord arbeidsongeschiktheidsverzekering.

Na 'arbeids' mag er worden afgebroken met een afbreekstreepje.

Hiervoor plaats ik dan het &-teken, shy, voor soft hyphen en een puntkomma.

En ik bewaar dit document .

Ik zie nu al dat het woord op deze plek wordt afgebroken.

Zo kun je zelf, op elke plek, dit aangeven waar je dat wilt.

Dus ik wil ook dat er een afbreekstreepje mag verschijnen na 'ongeschikt'.

En ook deze wordt nu toegepast. En ook na 'heids'. (Plak, Save)

En ook op deze plek wordt nu een zacht afbreekstreepje gebruikt als dat nodig is.

Je kunt dus zelf aangeven op welke plekken er allemaal afgebroken mag worden.

En dat kun je met elk woord doen.

Mensen die dit mee willen typen. Die kunnen de video even stopzetten en dit overnemen.

Bekijk dan opnieuw het resultaat in de voorvertoning.

Controleer dat er mag worden afgebroken op de plekken waarop jij dit hebt aangegeven.

Hoe dan ook loopt mijn regelverloop nu een stuk mooier.

De volgende manier waarop je woorden kunt laten afbreken is met het html-element -wbr-, wordbreak.

Deze doet exact hetzelfde als de vorige methode.

Met het grote verschil dat er juist geen afbreekstreepje verschijnt...

als het woord wordt afgebroken en naar de volgende regel doorloopt.

Voor sommige woorden is dat namelijk essentieel.

Denk aan bedrijfsnamen of url's waarbij streepjes soms juist echt een onderdeel is van de naam.

Maar als er dan juist geen streepje in die naam voorkomt dan wil je hem ook niet in beeld zien verschijnen.

Als voorbeeld heb ik het internetadres www.hollandventilatieorganisatie.nl.

Deze url bevat geen streepjes.

Toch wil ik hem wel kunnen afbreken omdat het een erg lange url is.

Als ik mijn venster kleiner maak.

Kan ik nu al zien dat het feit dat dit woord niet kan worden afgebroken...

Lelijke gaten in mijn tekst veroorzaakt.

Na het woord 'holland' wil ik eventueel kunnen afbreken.

Dus plaats daarvoor het html-element -wbr-. (Bewaar)

En dit gebeurt ook in de browser.

Na het woord 'ventilatie' mag eventueel ook worden afgebroken.

Opnieuw het html-element -wbr-.

Dit is een leeg element, hij hoeft niet afgesloten te worden. Hij moet zichzelf gewoon uitvoeren.

Wat je wel ziet in de browser.

Er wordt afgebroken, maar er wordt geen afbreekstreepje geplaatst.

Zo kunnen mensen zich ook niet vergissen in deze url.