Citaten met Blockquotes en Quotes (blockquote en q)

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.

n deze video leg ik de toepassing en het gebruik uit van de blockquote en de quote.

Maak je gebruik van teksten die van andere webpagina's afkomstig zijn.

Dan is het wel zo netjes om dit aan te geven.

Zo heb ik in dit voorbeeld een tekstgedeelte dat afkomstig is van een wikipedia pagina.

Dit is de originele tekst op de wikipedia website.

Als een citaat bestaat uit veel woorden, één of meerdere zinnen.

Dan is het gebruikelijk het block-level element blockquote te gebruiken.

Dit doe je als volgt. Ik selecteer deze tekst.

Knip deze weg met Commando X en plaats het html element -blockquote-.

Daarna kun je met het attribuut cite="".

Tussen de quotes aangeven waar het citaat van afkomstig is.

De url kun je eenvoudig weg in de adresbalk van een browser selecteren.

En vervolgens kopiëren met commando C.

En deze plaats je dan tussen de quotes met Commando V Plakken.

Bewaar het document en bekijk het Live-voorbeeld in de browser.

En dit is de wijze waarop standaard blockquotes worden weergegeven door Chrome.

Je herkent dat het een blocklevel-element is, want er wordt witruimte vrijgehouden aan boven- en onderzijde.

Maar een blokquote krijgt ook een inspringing mee.

Zowel links als rechts.

Het is aan te raden om dit altijd te doen met teksten die afkomstig zijn van andere websites.

Sterker nog, doe je dit niet?

Dan kan dit afgestraft worden door zoekmachines als onder ander Google.

Want zij controleren teksten op hun herkomst.

Voor korte citaten kun je het inline html element quote, -q- gebruiken.

Dan blijft deze gewoon onderdeel van de regel.

In dit voorbeeld heb ik een uitspraak van Tim Berners Lee.

Deze uitspraak ga ik in een quote zetten.

Dat geef ik aan met -q-.

En daarbinnen staat de citaat. Bewaar het document.

Bekijk direct het voorbeeld.

Wat je ziet in d browser is dat er een extra quote is verschenen.

In mijn broncode staat één keer een quote aangegeven. Nu staan er twee.

Dat komt omdat de browser zelf aan een citaat quotes toevoegt.

Dus deze in de broncode kan ik weghalen.

En dan maak ik gebruik gebruik van de quotes die de browser standaard al aan het begin en het einde van een citaat plaatst.

Mocht je juist deze aanhalingstekens niet mooi vinden.

Of je wilt ze op een andere manier vormgeven.

Dan doe je dat later uiteraard zelf in een eigen geschreven css-stijl.

Ook het quote-element kun je voorzien van het attribuut cite="".

En hierin kan je dan vervolgens de url plaatsen waar de originele tekst vandaan komt.