Citaten duiden met Blockquotes en Quotes q tag

uit de cursus Basiskennis HTML (2014)

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 HTML (2014)

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

Leer webpagina’s te bouwen in html

In webdesign is de content gescheiden van 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

Webdesigners, webbouwers, appbouwers en vormgevers voor webproducties. Iedereen die wil leren html-pagina’s te vervaardigen.

Wat ga je leren

In de cursus basiskennis HTML leer je hoe je webpagina’s structureert met de juiste HTML-tags. En je leert hoe je de juiste mappenstructuur maakt voor webproducties. Om webpagina’s correct te kunnen voorvertonen door browsers is het essentieel dat je de juiste HTML-tags verbindt aan de content.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je geen voorkennis nodig. Algemene comptervaardigheden is wel aan te raden.

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.

 

In 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. Eén of meerdere zinnen dan is het gebruikelijk het block-level element blockquote te gebruiken.

Dit doe je als volgt. Aan het begin plaats je het html element

.

En aan het einde van het citaat sluit je deze vervolgens af met einde blockquote

.

Vervolgens kun je met het attribuut cite, cite =" " , aangeven waar het citaat van afkomstig is.

De url kun je eenvoudig weg in de adresbalk van een browser selecteren. Vervolgens kopiëren.

En terugkeren naar je broncode en tussen de quotes van cite, plakken. Via Bewerken > Plakken.

Om een voorbeeld te zien hoe de browser een blockquote weergeeft gaan we naar voorvertonen in Firefox. Ik sla de wijzigingen op.

En dit is de wijze waarop standaard blockquotes worden weergegeven.

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

Maar een blockquote krijgt ook een inspringing mee. Zowel links als rechts.

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

Sterker nog, doe je dit niet? Dan kan dit afgestraft worden door zoekmachines. Want die controleren teksten op hun herkomst.

Voor korte citaten kun je het inline html element quote () gebruiken.

Dan blijft deze gewoon onderdeel van de regel.

In dit voorbeeld staat een uitspraak van Tim Berners Lee.

Ik ga dit aangeven met het html element .

En aan het einde van deze uitspraak zeg ik einde q .

We bekijken een voorbeeld in de browser. ik open deze in Firefox.

En wat mij direct al opvalt is dat eraanhalingstekens zijn verschenen om de tekst heen.

Dit wordt standaard door de browser gedaan zodra je tekst in een quote-tag plaatst.

En ook als je probeert de quotes te selecteren, dan lukt dat niet.

Omdat ze gegenereerd worden door de browser en niet daadwerkelijk in mijn broncode staan.

Mocht je het soort aanhalingstekens niet mooi vinden of je wilt ze op een andere manier vormgeven?

Dan kan dat maar dat doe je dan met css in een stijlblad.

Ik keer terug naar dreamweaver.

En ik controleer dat inderdaad de aanhalingstekens door de browser zijn gegenereerd.

Want hier in de broncode zie ik ze niet terug.

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

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