Websites met stijl

Info over Komodo

Op dit infoblad

Editor
Installatie instructies
Korte handleiding

Editor

Komodo Edit is een gratis editor voor Windows, Lunix en Mac IOS. Daarin tik je de html-code en de stijlbladen voor de webpagina's.

Een alternatief voor Komodo Edit is Notepad++.

Installatie instructies

Ga naar de website ActiveState de maker van Komodo Edit en klik daar op Download Komodo Edit .
De betaalde variant Komodo IDE heb je niet nodig. Komodo Edit heeft alle mogelijkheden die je maar nodig zult hebben.
Kies de versie voor jouw computer (Windows, Mac IOS, Linux)
Volg de aanwijzingen bij het downloaden en installeren.
Na het installatieproces krijg je de eerste keer dat je Kosovo start de mogelijkheid enkele instellingen aan te passen.
Je kan hier rustig doorklikken zonder iets te veranderen. Deze en vele andere instellingen kan je later aanpassen.

Korte handleiding

Het edit-scherm

Na openen van Komodo kom je in het edit-scherm.

Zijn er geen documenten geopend, dan zie je het openingsmenu (figuur 1).
Zijn er wel documeneten geopend, dan zie je het actieve document (figuur 2)
In beide gevallen staat de werkbalk boven in beeld.

Komodo onthoudt welke documenten je geopend hebt. Als je bij bij het afsluiten van de vorige sessie nog één of meer documenten open liet staan, dan dan verschijnen die bij het opstarten weer in beeld. Je kan meteen verder gaan.

Als je bij het afsluiten van de vorige sessie alle documenten gesloten hebt, start Komodo met het openingsmenu in beeld (figuur 1)
- Kies de knop 'Nieuw document' om een nieuw document te beginnen (zie verderop bij Nieuw document)
  of
- Klik op de knop 'Open file' om verder te gaan met een eerder gemaakt document.
Als je bij het afsluiten van de vorige sessie nog één of meer documenten open liet staan dan verschijnen die in beeld. (figuur 2)

De werkbalk

Bladeren door onlangs geopende documenten [tooltips: Go back one location en Go forward one location]
Ongedaan maken - opnieuw [tooltips: Undo Last Action en Redo Lats Action]
Nieuw document [tooltip: New Document Using Default Language]
Openen [tooltip: Open File]
Opslaan [tooltip: Save File]
Fouten in het document in beeld [tooltip: Jump to next syntax checking result]
Document bekijken in de browser [tooltip: View in Browser]
Schakelt tussen volledige werkbalk en beknopte werkbalk (alleen knoppen 8, 12-15) [tooltip: Toggle Focus Mode]
Schakelt linker balk in/uit [tooltip: Show/Hide Left Pane]
Schakelt onderbalk in/uit [tooltip: Show/Hide Bottom Pane]
Schakelt rechter balk in/uit [tooltip: Show/Hide Right Pane]
Menu [tooltip: Menu]
Minimaliseert het scherm (staat alleen nog op de taakbalk) (geen tooltip)
Schakelt tussen groot en kleiner venster (geen tooltip)
Sluitknop (geen tooltip))

Een nieuw document

Klik op (knop 3 van de werkbalk) om een nieuw document te beginnen
Tik een letter of spatie in en sla het document dan op (met knop 5 van de werkbalk).
Geef een naam die eindigt op .html voor een html-document of op .css voor een stijlblad.

Aan de toevoeging .html / .css herkent Komodo edit het soort bestand en geeft het hulp bij het intikken.

Opmerking

Vanuit het openingsmenu kan je ook een nieuw document openen door New File from Template te kiezen. Kies daarna het gewenste document (html5 of css).

In het geval van .html beschout Komodo het als een document met het 'geraamte' van een html (versie 5)-document. Het lijkt op het document nieuw.html uit hoofdstuk 3 van de cursus.
In het geval van css opent Komodo een leeg document.

Preview

Preview is het bekijken van het document zoals het er in de browser uitziet.

Klik op (knop 7 van de werkbalk)
Als je een dialoogschermpje krijgt kan je op Preview klikken. (Als je in dat dialoogvenster het vakje Remember for this file) aanvinkt, verschijnt het dialoogvenster voor dat document niet meer.

Opmerkingen

Je kunt Preview instellen: komt de preview onderin beeld, in een andere tab,...... Zie achteraan dit hoofdstuk, bij Browser en preview instellen.
Je kunt een document ook buiten Komodo om bekijken. Dit heeft soms voordelen als je wilt zien wat het effect is van een verandering die je net hebt aangebracht in de html of het stijlblad. Zie tip 6 op het blad met tips.

Het intikken van html of css

Hulp bij het intikken

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

Komodo doet dat alleen als het aan de bestandsnaam kan zien of het .css bestand (stijlblad) of html-bestand is. Zolang je nog geen naam aan een nieuw document hebt gegeven, geeft Komodo geen hulp. Sla daarom een nieuw document zo snel mogelijk op met een naam die eindigt op .html (voor een html-document of .css (voor een stijlblad).

Stukken van een document 'inklappen'

Met de driehoekjes vóór 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.

Begin- en eind-tag gemarkeerd

Als je de cursor op de begin-tag van een element zet, wordt de eind-tag (tijdelijk) onderstreept. En als je de eind-tag aanwijst, wordt de begin-tag onderstreept. 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 en te zetten. Dat gaat dan het snelst als volgt:

Selecteer het stuk tekst en knip dit (bijvoorbeeld met ctrl-x)
Laat de cursor staan en tik in (of welke tag je wilt aanbrengen).
Komodo zet nu de eindtag en laat de cursor tussen de begin- en eind-tag staan.
Plak de geknipte tekst (bv. met ctrl-v).

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 Komodo edit gaat dat als volgt:

Open het eerste document.
Klik Klik op de menuknop
en kies New > New Window.
Open in het nieuwe venster dat dan veschijnt het andere document.
Maak de beide vensters wat kleiner (versleep de randen) en schuif ze naast elkaar.

Instellingen

In Komodo is een ongelofelijk aantal zaken in te stellen. Voorlopig kun je de meeste instellingen het beste maar laten staan op hun standaard waarde. Maar misschien wil je toch hier daar wat aanpassen aan je wensen. In dit hoofdtukje heb ik een paar suggesties.

De menubalk zichtbaar maken

Sommige mensen gebruiken liever de menubalk dan de werkbalk. Je kan die als volgt zichtbaar maken:

Rechts-klik ergens in de blauwe werkbalk
Zet in het menu dat dan verschijnt een vinkje voor Show Menubar

Klaar.

Als je na een rechtsklik het betreffende vinkje weghaalt is de menubalk weer onzichtbaar.

Naar de Preferences

Instellingen doe je in het Preferences menu. Daar kan je op 3 manieren komen:

Vanuit het openingsmenu
- Klik op Preferences
Vanuit de werkbalk
- Klik op de menuknop
- Kies vervolgens Edit en dan Preferences...
Vanuit de menubalk (indien zichtbaar gemaakt)
- Kies in de menubalk Edit en dan Preferences...

Aan de linker kant van het preferences menu zie je meer dan twintig categorieën.
Klik op een categorie om naar de instellingen van díe categorie te gaan.
Die verschijnen dan in het rechter vak.
Let op, vaak zijn niet alle instellingen zichtbaar. Dan moet je de schuifbalk gebruiken.

Enkele suggesties om instellingen te wijzigen:

De startmap instellen

Bij mij startte Komodo steeds vanuit een onhandige map op. Om bij de map met mijn websites te komen moest ik door misschien wel vij mappen bladeren. Als dat bij jou ook zo is, stel dan de startmap van Komodo in:

Kies in het instellingenmenu de categorie Environment.
Klik dan onder het grote vak op New
Tik in het vak Name in: HOMEPATH
Tik in het vak Value het pad in van de map waarin Komodo moet starten, bv. C:\Mijndocumenten\websites]terschelling.
(Komodo gebruikt de backslash \ om de mappen van elkaar te scheiden, maar het lijkt ook goed te gaan met een slash /)

De standaard programmeertaal instellen op HTML5

Kies in het instellingenmenu de categorie File Opening
Klik in het vakje onder de regel "Specify the default language for files using the 'New' button"'
Er verschijnt een lijst met talen.
Kies uit deze lijst HTML5
Onder in het menu op Apply en dan op OK.

Opmerkingen:

Als je de standaard programmeertaal niet aanpast maakt Kosovo van een nieuw document een .txt-bestand (tekstbestand). Erg is dat niet, want vanaf het moment dat je het met de toevoeging .html of .css opslaat herkent Komodo het als zodanig en past zijn hulp bij het intikken aan.
Kies niet voor HTML, maar voor HTML5, dat is de nieuwe versie van html.

Browser en Preview instellen

Kies uit het instellingenmenu de categorie Web & Browser.
Bovenin dit menu kan je aangeven welke browser Komodo gebruikt om websites te tonen (Which browser should Komodo use when opening URL's?)
Je kan kiezen uit alle geïnstalleerde browsers.
(Mogelijk is dit deel van het scherm niet aanwezig als er op je systeem maar één browser is geïnstalleerd.)
- Meestal is de keuze 'standaard browser' ((Systeem defined default browser") prima.
Belangrijker is de keuze hoe de Preview in de browser ingesteld moet worden
(Preview is bekijken vanuit Komodo hoe de website er in een browser uitziet)

Kies uit de volgende vier mogelijkheden:
1. Preview in Komodo tab, other Split View
  Het scherm wordt verdeeld in twee deelschermen boven elkaar: bovenin de code, onderin de preview.
2. Preview in Komodo tab, same Split View
  In feite is dit in een ander tabblad van Komodo. Door te klikken op de ene tab of de andere schakel je heen en weer.
3. Preview in a seperate Komodo dialog
  In een dialoogvenster over Komodo heen.
4. Preview in external browser (specified above)
  Komodo opent de website in de browser