Broncode opschonen in Brackets (Beautify)

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

Volgende video: Commentaarregels plaatsen

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.

Deze video is alleen bedoeld voor mensen die werken met Brackets.

Zodra je html gaat schrijven...

dan hou je juist goed overzicht over de code als deze consistent op de juiste manier inspringt.

Zo kun je makkelijker door de code navigeren.

Typ je html met de hand zoals wij gaan leren en je wilt netjes werken.

Dan ben je telkens bezig met het bijwerken van dit soort inspringingen.

Brackets biedt een extensie die dit voor jou gaat doen.

Klik op het icoon Extensiebeheer.

Typ in het zoekvenster beautify.

En je vindt de extensie direct bovenaan in de lijst.

Klik achter de extensienaam op Installeren.

Als de installatie succesvol is dan kun je deze vensters sluiten.

Terug in Brackets zie je dan in de rechterkolom een extra icoon.

Dit is de extensie Beautify.

Je vindt deze ook terug onder het menu Bewerken > Beautify.

Selecteer dan eerst alle broncode met Bewerken > Alles selecteren of Commando A.

En activeer Beautify Kijk dit ziet er al een stuk netter uit. Prachtig!

Ik maak deze laatste handeling even ongedaan met Commando Z of via Bewerken > Herstel.

Bij Bewerken kun je de optie Beautify on Save aanzetten.

Dat deze geactiveerd is herken je dan aan het vinkje voor de menuopdracht.

Ditmaal ga ik het document bewaren via Bestand > Opslaan of Commando S.

Niet alleen wordt het document bewaard, maar ook de code wordt nu automatisch bijgewerkt en opgeschoond met beautify.