Afbreken van teksten met wbr en de html-entiteit ­

uit de cursus Basiskennis HTML

Afbreken van teksten met wbr en de html-entiteit ­
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

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

Basiskennis HTML

perm_identity Belinda | video_library 40 video's | query_builder 2:50:32

In de cursus basiskennis HTML leer je hoe je webpagina’s structureert met de juiste HTML-tags. 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

Wat kun je hierna?

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.

Belangrijke onderwerpen in deze online basiscursus zijn:

  • Leren maken van de juiste mappenstructuur voor webproducties voor elke dag
  • Semantische beteknis van HTML-tags
  • Pagina’s structureren met HTML-tags conform het W3C
  • Inzicht in de reglementen van het W3C
  • Tabellen toepassen

In deze video gaan we het hebben over woordafbrekingen.

Standaard zal een browser namelijk niet afbreken binnen een tekst.

Ik laat het even zien in een paar browsers. Ik zal deze even sluiten en haal mijn browsers tevoorschijn.

Allereerst even in Chrome. Ik kan het document verkleinen en je ziet dat de hele woorden naar volgende regels worden verplaatst.

Op zich is dat geen probleem totdat je hele lange woorden tegenkomt. Die ik er natuurlijk express hier in heb gezet.

En dan kan dat een heel lelijk regelverloop opleveren. Dit is in Chrome.

Ik laat ook nog even een voorbeeld zien in Firefox. Deze doet feitelijk exact hetzelfde. ook deze breekt niet af.

Maar plaatst de hele woorden naar de volgende regel. En ook nu kun je dus een lelijk regelverloop krijgen.

Op moment dat een woord niet afgebroken kan worden.

Je kunt op twee manieren zorgen dat teksten worden afgebroken.

Je kunt op twee manieren zorgen dat teksten worden afgebroken.

Je kunt op twee manieren zorgen dat teksten worden afgebroken.

De allereerste die ik wil behandelen is het speciale opdrachtteken waar een speciale html schrijfwijze voor gemaakt is.

En dat is de soft-hyphen, een zacht afbreekstreepje. en dat schrijf je als volgt.

Het & teken en dan schrijf je shy en dan ;.

Het & teken en dan schrijf je shy en dan ;.

Op deze manier wordt er niet direct afgebroken.

Maar geef je toestemming om op deze plekken af te breken en een afbreekstreepje te plaatsen.

Dus ik doe dit even voor de overige plekken. Zoals bijvoorbeeld bij 'totten' wil ik datzelfde doen.

& dan typ ik weer shy ;. Wat je natuurlijk ook kunt doen is dit even kopiëren. Commando C.

En dan vervolgens 'Plakken' op de plekken waar je hem graag wilt plaatsen. Dus 'tenten' (plak).

tentoon (plak) stelling. Voor (plak). Ik ga even verder.

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

Dan bekijk ik nu een voorbeeld, opnieuw, in de browser. Ik ga naar voorvertoning in Firefox.

Ik sla de wijzigingen op. En zoals je nu al kunt zien, worden op die plekken waar ik dat heb aangegeven.

Zoals hier wordt nu een afbreekstreepje geplaatst en de rest wordt naar de volgende regel verplaatst.

En dit zorgt ervoor dat mijn regelverloop ook een stuk mooier loopt.

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

Het voordeel van deze tag is dat hij woorden wel afbreekt en naar de volgende regel verplaatst maar geen afbreekstreepje plaatst.

Zeker bij bepaalde naamgevingen als een url waarbij soms juist ook afbreekstreepjes voorkomen in de woorden...

Maar soms ook niet. Kan het heel onhandig zijn als die er ineens wel in verschijnt.

Zoals in dit voorbeeld heb ik http://www.hollandventilatieorganisatie. En dat hoor je aan elkaar te schrijven.

Als ik hier een html schrijfwijze voor zou gebruiken de ­ Dan zou er daadwerkelijk een afbreekstreepje geplaatst kunnen worden.

En dat zou erin resulteren dat mensen denken "Oh, het internetadres is holland-ventilatieorganisatie.

Maar dat is niet zo. Dus ik wil wel afbreken maar geen afbreekstreepje. En dan gebruiken we de html tag

En dit is een leeg element. Dat wil zeggen. Op het moment dat deze er is, sluit hij zichzelf eigenlijk ook direct weer af.

Dat geef je aan met de slash (/).

Dat geef je aan met de slash (/).

Dat geef je aan met de slash (/).

En dan kun je op de plekken waar je mag afbreken, dus waar het woord door mag gaan naar de volgende regel.

En dan kun je op de plekken waar je mag afbreken, dus waar het woord door mag gaan naar de volgende regel.

Dat is ook hier. En een voorbeeld bekijken in een browser.

Dat is ook hier. En een voorbeeld bekijken in een browser.

Dat is ook hier. En een voorbeeld bekijken in een browser.

Dat is ook hier. En een voorbeeld bekijken in een browser.

Dat is ook hier. En een voorbeeld bekijken in een browser.

En ik maak de browser kleiner en kleiner en je ziet dat nu het internetadres...

...wordt afgebroken. Hij gaat naar de volgende regel, maar er verschijnt geen streepje.