De bronmap / Local Root Folder (LRF)

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.

De inhoud van een website bewaar je altijd in één map.

Deze map noemen we de Local Root Folder.

De map zelf mag je elke naam geven die je wilt.

Uiteindelijk is het namelijk de inhoud van de map die je gaat publiceren op het world wide web.

Ik heb een voorbeeldmap aangemaakt. Dit is dus de Local Root Folder.

Hierin heb ik opnieuw mappen aangemaakt waarin ik de bestanden...

waar mijn website gebruik van gaat maken in kan gaan ordenen.

In de map css bewaar ik straks alle css-stijlbladen.

Die de vormgeving van de website gaan bepalen.

In de map img bewaar ik alle afbeeldingen die ik ga gebruiken.

En de map js is bedoeld voor de javascript bestanden.

Dankzij zo'n mappenstructuur kan ik eenvoudig bepaalde bestanden weer snel terugvinden.

De startpagina van een website heet altijd index.html.

Dat hebben we zo afgesproken.

Zodra een bezoeker enkel de url van een website opzoekt in een browser.

Wordt automatisch het aanwezige document index.html getoond.

Deze index.html mag daarom niet in een map staan.

Maar moet juist los in de Local Root Folder staan.

Anders kan de browser hem niet vinden.

Dan kun je ervoor kiezen om alle overige html-pagina's ook los in de Local Root Folder te plaatsen.

Maar je kunt er ook voor kiezen om ook deze in aparte mappen te stoppen.

Puur voor een prettiger en beter overzicht.

Even ter vergelijking. Stel dat je geen mappenstructuur erop na wilt gaan houden?

Dit is een project waarin alles netjes in mapjes geordend is.

En dit is hetzelfde project maar dan alles los in één map.

Dit is nog maar een kleine website bestaande uit één pagina.

Niet echt overzichtelijk dus.

Maar voor de werking van de site maakt het niks uit.

Beide websites functioneren gewoon prima.

Dus het is aan jou hoe je wilt werken.

Zodra je een Local Root Folder gemaakt hebt kun je deze map activeren in Brackets.

Ga naar Bestand > Open map...

Wijs de map toe en klik op Open.

In de linkerkolom verschijnt dan bovenin de naam van de map.

En toont daaronder de mappenstructuur zoals je deze hebt aangemaakt.

Klik op het bestand index.html om deze te activeren.

Klik dan ook op de knop Live Voorbeeld om de pagina in een voorbeeldvenster van de browser te bekijken.

Op deze manier kun je meerdere Local Root folders activeren in Brackets.

Klik op de naam van zo'n project.

Er verschijnt een lijst met daaronder de andere Local Root Folders.

De ander projecten. Zo kun je wisselen.

En dus aan meerdere sites tegelijkertijd werken.

Je kunt nu zelf zo'n Local Root Folder aanmaken.

Of eentje van mij downloaden via de downloadknop van dit hoofdstuk.

Zelf een mappenstructuur aanmaken is simpel op de mac.

Dat kun je zelfs doen tijdens het opslaan van een document.

Het huidige document ga ik opslaan naar een andere map.

Dat doe ik via bestand > Opslaan als...

Ga naar de locatie waar je de Local Root Folder wilt aanmaken.

Klik onderin dit venster op New Folder.

Ik noem deze basiskennis-html en klik op Create.

In deze map wil ik nog een map aanmaken. Klik opnieuw op New Folder.

En hierin ga ik mijn afbeeldingen plaatsen. Dus ik zet het mapje img er neer.

Los in de map mag dan vervolgens het bestand index.html worden bewaard. Ik klik op Save.

Om ook dit project in Brackets te activeren ga ik naar Bestand > Open map.

Klik ik op basiskennis-html > Open

Nu staat deze actief. Klik eenmaal op index.html.

Het is dezelfde pagina natuurlijk. Zodra ik klik op Live Voorbeeld...

Toont de browser een voorvertoning van exact dezelfde pagina.

Alle geopende projecten kun je benaderen door op één van de projectnamen te klikken.

Dan verschijnt er een lijst met de overige projecten en kun je een andere activeren.