Uitleg omtrent HTML, CSS en JavaScript

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.

Zo, dan nu echt mijn laatste voorbereidende praatje.

Wat je goed moet weten is dat een webpagina standaard wordt opgebouwd uit drie technieken.

Te weten HTML, CSS en eventueel JavaScript voor speciale functionaliteiten.

Bij deze zet ik ze nog één keer voor je op een rij.

Met HTML schrijf je de inhoud van een webpagina.

Je structureert de inhoud met de daarvoor bedoelde html-elementen.

Deze html-elementen gebruikt de browser om de pagina goed te kunnen vertonen.

De html-elementen worden ook door spraakmachines en braille-lees apparatuur gebruikt.

Hierdoor is de pagina ook te lezen voor minder validen als slechtzienden, blinden of mensen met dyslexie.

Je kan van iedere webpagina de broncode bekijken in een browser, dat laat ik je zometeen zien.

Dan CSS, de Cascading Style Sheets.

Hiermee bepaal je de vormgeving van de webpagina's.

Een extern css-bestand koppel je aan de webspgaina's.

Het mooie hiervan is. Je bepaalt niet per pagina de vormgeving.

Maar je kunt in één stijlblad de vormgeving voor de gehele website beschrijven.

Wijzig het stijlblad en de vormgeving van de gehele website wordt automatisch aangepast.

Voor het toepassen van JavaScript maken de meeste webdesigners gebruik van bibliotheken als jQuery.

Dat maakt het toepassen van extra functionaliteiten heel gemakkelijk.

Met JavaScript kun je extra interactiviteit of functies toevoegen aan een website.

Denk aan geanimeerde slideshows of het weergeven van de actuele datum en tijd.

Om kennis te maken met de kracht van HTML en CSS...

raad ik je aan om eens naar de website van css-zengarden te gaan.

Ik gebruik de browser Chrome.

Dit is een project waar iedereen aan kan meedoen.

Download het html bestand via deze downloadknop.

Dit is de pagina puur in html, dus zonder opmaak van css.

Om de broncode van de pagina te bekijken.

Klik je met de rechtermuisknop ingedrukt op de pagin.

En kies je voor Inspecteren.

Ik klap de html-code uit zodat je kan zien wat de inhoud is.

In het html-element -header- staat een -h één- en een -h twee- .

Dat zijn twee koppen.

Dan volgt er een -div-, dat is een soort container met daarin twee -p's-, paragrafen.

We kijken nu puur naar de html en in de browser zie je hoe deze de html weergeeft.

De vormgeving van de pagina css zen garden wordt volledig door een extern cds-stijlblad bepaald.

Onderaan de pagina vind je een lijst met andere designs.

A Robot named Jimmy toont exact dezelfde pagina maar dan op deze manier.

Inclusief geanimeerde illustratie.

Want met css kun je ook animaties en overgangen creëren.

Ga ik opnieuw kijken naar de lijst met andere design.

Activeer ik Apothecary.

En deze heeft weer een hele andere vormgeving.

Nou, je kunt alle designs gaan bekijken.

En zo ook zien wat er allemaal mogelijk is qua vormgeving met css.

Maar, eerst gaan we aan de slag met html.