Bronnen voor webdesigners

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.

Er is online ook erg veel informatie te vinden over html.

Ik laat een tweetal websites zien die handig en praktisch zijn.

En als ik jou was zou ik deze bookmarken.

De eerste site waar je nu naar kijkt is die van wschools.

Onder References staan de verschillende onderwerpen.

Je ziet niet alleen meerdere hoofdstukken over HTML.

Maar ook over CSS, JavaScript en nog veel meer.

Logischerwijs zul je na het leren van html ook css en JavaScript willen leren.

Dus voorlopig ben je op deze website nog niet uitgekeken.

Kijk je op HTML Tag reference...

...dan zie je in het zijmenu alle html-elementen op alfabetische volgorde.

Standaard wordt de alfabetische lijst weergegeven.

Bovenin het zijmenu kun je zoeken op categorie.

Dan kom ik op een pagina terecht die start met een overzicht van de basiselementen van html.

Daarna Formatting ofwel tekstopmaak met html.

Vervolgens de elementen voor formulieren en input, afbeeldingen, audio en video et cetera.

Ik keer terug naar de alfabetische lijst.

Klik op een html-element...

en direct wordt er een voorbeeld van het element getoond.

Bij elke html element staat een korte uitleg...

waarvoor je deze moet gebruiken bij Definition and Usage.

Ook handig is het overzicht welke browsers het element allemaal ondersteunen.

Zo weet je dat je een element wel of niet veilig kunt gebruiken.

Klik op de knop Try it Yourself en je komt in een editor terecht.

In de broncode kun je nu zelf experimenteren met de html.

Ik maak ook het woord This vet.

Dus plaats ik voor het woord de openingstag -b-, bold.

En aan het einde van het woord de afsluitende tag -/b-, einde bold.

Klik op Run om de broncode uit te laten voeren.

En nu heb ik het woordje This ook vet gemaakt.

Wschools is een handige en zeer praktische website.

De volgende website die ik je wil laten zien is developer.mozilla.org.

Deze website wordt bijgehouden door de ontwikkelaars van Mozilla.

Dat zijn de bouwers van de browser Firefox.

Browserontwikkelaars kijken juist heel erg naar de technische feiten.

Daarom kan deze site wat abstract overkomen.

Voor sommigen ook wat minder prettig leesbaar.

Onder de kop Technologies vind je weer meerdere onderwerpen als HTML, CSS en javaScript.

Dus ook op deze website ben je voorlopig nog niet uitgekeken.

Ga naar HTML en de pagina start met een korte uitleg over html.

In het zijmenu vind je de verschillende onderwerpen over html.

Klap het hoofdstuk HTML-elements uit en ook nu verschijnt een lange alfabetische lijst.

Aan het prullenbak-icoon zie je direct welke html-elementen verouderd zijn.

Klik op de naam van een element.

En ook nu begint de pagina met een kleine uitleg waarvoor het element bedoeld is.

Dan ook een voorbeeldvenster.

Waarin ik zelf kan experimenteren met de broncode.

En direct wordt het resultaat getoond in het voorbeeld. Superhandig.

Ook fijn is de uitgebreide uitleg hoe je het element moet gebruiken bij Usage notes.

En ook op deze pagina wordt aangegeven welke browsers het element allemaal ondersteunen.

Als je goed onderweg bent met html.

Dan zul je op deze website net even iets meer technische informatie kunnen vinden over de html dan op wschools.

Natuurlijk zijn er meerdere van dit soort websites te vinden

Maar van deze sites weet ik in ieder geval dat de informatie correct is.