Websites met stijl

Info over Notepad++

Op dit infoblad

Editor

Notepad++ is een gratis editor voor Windows. Daarin tik je de html-code voor de webpagina's en de css-code voor de stijlbladen.

Notepad++ is een Windows programma. Voor Apple en Linux gebruikers is Visual Studio Code een alternatief.

Installatie instructies (Windows)

De zipversie installeren

Het voordeel van de zipversie is dat je zeker weet dat er geen veranderingen worden aangebracht in het windowregister. Je kan het programma dan ook verwijderen door simpelweg de map met het programma te wissen. En je kan het programma op een USB-stick zetten, zodat je het ook op een andere (Windows) computer kan gebruiken.

Vanuit het installatievenster installeer je de zip-versie als volgt:

Korte handleiding

Het edit-scherm

figuur 1: werkvenster

Na het openen van Notepad++ kom je in het editscherm. Als je bij het afsluiten van de vorige sessie een of meer documenten open liet staan, dan verschijnen die bij het opstarten weer in beeld. Je kan dan meteen verder gaan waar je gebleven was.

Als er geen document open stond in de vorige sessie verschijnt er een leeg documen met de naam New.

Ga verder met dat nieuwe bestand, of open een eerder gemaakt bestand.

Je kunt verschillende documenten open hebben staan, die staan dan in verschillende tabbladen. In figuur 1 zijn dat index.html en polder.html.
Klik op een tabblad om het document daarin actief te maken.

Is het opslagsymbool op de tab rood, dan is dat document gewijzigd sinds het is opgeslagen.
Sla het opnieuw op. (in figuur 1 is het document index.html dus gewijzigd.)

De werkbalk (linker deel)

De belangrijkste knoppen van de werkbalk staan in het linker deel:

  1. Nieuw
  2. Openen
  3. Opslaan
  4. Alles opslaan (alle tabs opslaan)
  5. Sluiten
  6. Alles sluiten (alle tabs sluiten)
  7. Afdrukken...
  8. Knippen
  9. Kopiëren
  10. Plakken
  11. Ongedaan maken
  12. Herhalen (Opnieuw)
  13. Zoeken
  14. Vervangen...
  15. Inzoomen
  16. Uitzoomen

Het intikken van html of css

Hulp bij het intikken

Bij het intikken geeft Notepad++ bijna voortdurend hulp. Mogelijke elementen/attributen/eigenschappen worden aangegeven; ook wordt automatisch de sluit-tab gezet. Als je dus <p> intikt, zet Notepad++ daar automatisch </p> achter. Door van die hulp gebruik te maken maak je minder fouten.

Opmerkingen

Stukken van een document 'inklappen'

Met de min-tekens bij de linkerkantlijn (direct achter de regelnummers -zie figuur 1) kan je delen van het document tijdelijk 'inklappen'. De ingeklapte regels worden dan niet getoond. Dat is handig bij een lang document: je laat de delen waar je even niet mee bezig bent ingeklapt.
Bij het ingeklapte stuk is het min-teken veranderd in een plus . Klik op de plus om het stuk weer zichtbaar te maken.

Begin- en eind-tag gemarkeerd

Als je de cursor op de begin-tag van een element zet, wordt de eind-tag gemarkeerd. En als je de eind-tag aanwijst, wordt de begin-tag gemarkeerd. Handig om te controleren of de begin- en eind-tags juist zijn geplaatst.

Tip voor het achteraf plaatsen van begin- en eindtag

Soms overkomt het me dat ik een stuk tekst heb ingetikt, maar dat ik vergeten ben de <p> en </p> te zetten. Dat gaat dan het snelst als volgt:

Twee schermen naast elkaar

Soms wil je twee documenten met elkaar vergelijken. Dan is het handig als je die naast elkaar kan zetten in twee vensters. In Notepad++ gaat dat als volgt:

Het deelvenster (rechter venster) vedwijn weer als je het document (de documenten) in dat venster gesloten hebt.

Instellingen

In Notepad++ kunnen een groot aantal zaken worden ingesteld. De meeste kan je rustig laten staan, die zijn prima, maar enkele instellingen wil je misschien wijzigen.

Je komt bij de instelingen door in de menubalk te klikken op instellingen en dan op voorkeuren.... In het venster dat dan verschijnt staan links de categorieën. In het rechter deel van het venster staan de voorkeuren van die categorie.

Categorie 'Algemeen'

Zet hier de taal op Nederlands (waarschijnlijk is de instelling al Nederlands, behalve als je de zip-versie van Notepad++ hebt gebruikt).

Categorie 'Language'

Zet alle talen, behalve CSS en HTML, naar rechts in de categorie disabled items (uitgeschakeld).

Je zet een taal rechts door die links aan te klikken en dan op pijltje-naar-rechts te klikken dat tussen beide vakken staat.

Zo wordt alleen hulp geboden bij de talen CSS en HTML.
Je kan een 'disabelde' taal later altijd weer terug naar links zetten als dat nodig is.

De categorie 'Automatisch aanvullen'

Hier geef je aan wat notepad++ automatisch aanvult bij het intikken. Boven staat een vinkje bij 'automatisch aanvullen inschakelen', waarbij is ingested op 'woorden en functies aanvullen'.
Zolang je, zoals ik, de functie automatisch aanvullen wilt gebruiken, is dit de juiste keuze.

Bij automatisch invoegen staat niets aangevinkt. Ik heb daar alle functies aangevinkt, zoals in de figuur.

De verschillende vakjes hebben de volgende betekenis:

Zo vergeet je dus nooit een sluittag of sluitteken.

Opmerkingen

Het bovenstaande werkt zo in Windows als een Nederlands of VS internationaal toetsenbord is geïnstalleerd.

UTF-8 karakterset en Notepad++

In Notepad++ kan je de gebruikte karakterset instellen.
In HTML5 is UTF-8 de voorgeschreven karakterset.
Controleer daarom altijd als je een nieuw document hebt geopend, of dit is ingesteld op UTF-8.
Dat gaat als volgt:

Als je Notepad++ gebruikt en bij het intikken van accenten merkt dat die niet juist worden getoond, dan staat de verkeerde kaarakterset ingesteld. Je moet je document dan omzetten naar de UTF-8.
Dat gaat as volgt:

De accenten moeten nu juist worden weergegeven.