Emphasis, strong, mark, bold, italic en span

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.

Met html-tags geef je structuur en betekenis aan de inhoud.

We werken verder aan de index.html van de vorige oefening.

Met de html-elementen -emphasized-, -strong-, mark, -italic- en -bold-

kun je delen van een tekst laten opvallen en benadrukken.

Deze elementen worden door de browser ook standaard anders vormgegeven.

Elke browser verbindt namelijk aan html-tags al bepaalde vormgeving.

Om die reden zou jij kunnen denken dat je vanwege de vormgeving die html-tags zou moeten gaan gebruiken.

Maar dat is juist niet het geval.

Alles wat je nu en in de komende video’s ziet op het gebied van vormgeving moet je loslaten.

Vormgeven van webpagina’s doe je met css en dat leer je hierna.

Nu moet je je alleen maar focussen waarom de html-tags zijn bedoeld.

Als je bepaalde woorden of delen van een zin wilt laten benadrukken of opvallen.

Dan gebruik je hiervoor de html elementen emphasized -em- en -strong-.

Een spraakmachine zal deze woorden anders uitspreken.

Allereerst de tag -em-.

Een spraakmachine zal de emphasized tekst met een andere intonatie uitspreken.

Zodat deze woorden net wat meer opvallen.

Deze zin bijvoorbeeld zou ik net wat stelliger willen laten uitspreken.

Omdat het ook een stellige definitie is.

Ik knip de zin weg met Commando X.

Plaats het element -em-. Brackets maakt deze automatisch voor mij af. En plak de zin er weer terug in.

Bewaar het document en bekijk dan het resultaat in de browser.

De browser maakt deze tekst schuin geschreven, Italic. Terug naar brackets.

Als je tekst extra wilt laten opvallen dan gebruik je daarvoor -strong-.

Ik knip het woord 'definitie weg' met Commando X en plaats -strong-

Wordt automatisch afgesloten en plak de tekst weer terug met Commando V.

Bewaar het document, bekijk het voorbeeld in de browser.

Teksten die je strong hebt gemaakt zullen door een spraakmachine ook nog eens luider worden voorgelezen.

Het mark-element gebruik je om de aandacht van de lezer te trekken naar een navolgend stuk tekst.

Bijvoorbeeld hier (Let op!). Het gaat natuurlijk om de tekst die volgt.

Maar ik trek de aandacht naar deze tekst door 'Let op!' te gaan highlighten met -mark-

Bewaar het document.

De browser toont het mark-element standaard geel gehighlight.

Klik met de rechtermuisknop ingedrukt in de browser en kies voor Inspecteren.

Activeer het select gereedschap bovenin de menubalk van het inspecteer-venster.

En klik op het mark-element.

Je herkent de html in het broncode-venster.

En hier in het styles-venster staat de volgende css-stijl beschreven voor het mark-element.

Deze vormgeving is afkomstig van Chrome.

Dat herken je aan het feit dat achter mark 'user agent stylesheet' staat.

Dit is dus de stijl die de browser Chrome verbindt aan het element mark.

De tekst krijgt een gele achtergrondkleur, background-color.

En met color wordt de tekst zwart gekleurd.

Selecteer op deze manier ook het em-element.

Zie je dat de browser naast het em-element ook de elementen italic, cite, var, adres en definition. Schuin geschreven zal plaatsen?

Klik dan eenmaal op het element strong.

En bij de css-stijl zie je dat de b, de bold, ook vet zal worden weergegeven. Net als deze strong.

Ik raad je aan om bij alle komende lessen de browser gestuurde vormgeving te gaan bestuderen.

Zo maak je alvast kennis met de opmaakmogelijkheden van css.

En ben je je er meer bewust van dat de browser al bepaalde opmaak verbindt aan html.

Dan nu nog de elementen bold en italic.

Deze werden vroeger juist gebruikt vanwege hun vormgeving.

Ze tonen zich respectievelijk vet en schuin geschreven.

Dezelfde vormgeving dus als de strong en emphasis.

Lange tijd stonden deze twee elementen op de lijst om te verdwijnen uit html-.

Maar dat is niet gebeurd.

Deze twee elementen verbinden geen betekenis aan de tekst.

Niet zoals de em, strong en mark dat doen.

Het wc adviseert dan ook om deze elementen alleen te gebruiken als je geen em of strong kan gebruiken.

Als je bepaalde teksten anders wilt vormgeven.

Dus niet zozeer omdat ze een bepaalde betekenis hebben.

Dan gebruik je daarvoor het zogeheten span-element.

Span is betekenisloos

Met het attribuut class=“” kun je een unieke naam opgeven.

Voor deze class in combinatie met die unieke naam kun je dan een geheel aparte css-stijl schrijven.

Waarin je de vormgeving bepaalt.

Zodra je bezig gaat met het vormgeven van pagina's met css komt dit uitgebreid aan de orde.

Conclusie van deze video is dat je em gebruikt om teksten te benadrukken.

Strong om teksten extra te laten benadrukken.

Mark om de aandacht te trekken naar een hiernavolgend stuk tekst.

Bijvoorbeeld een uitleg, conclusie of waarschuwing.

De html-tag bold -b- en bijvoorbeeld italic, de -i-.

Die gebruik je alleen als de tags em, strong en mark al gebruikt of niet van toepassing zijn.

Maar beter is het om in die gevallen het span-element te gebruiken.

Daarover later meer.