HTML editors gebruiken
Over een ding zijn de meeste website bouwers het wel eens. Als je een goede website wilt bouwen moet je aan de slag met de code en niet met WYSIWYG (Wat je ziet, is wat je krijgt) software. Je kunt natuurlijk een pakket als Dreamweaver van Adobe aanschaffen, maar er zijn veel meer goede opties om je website met de hand te bouwen. In dit artikel een aantal mogelijkheden en voorbeelden van html-editors en de redenen om hiervoor te kiezen.
Browsers gebruiken HTML
Als je het internet over surft dan gebruik je een web browser zoals Firefox, Chrome of Internet Explorer. Hiermee haal je HTML bestanden binnen die door een browser worden omgezet naar visueel aantrekkelijke webpagina’s. Op zijn eenvoudigst gezegd, HTML is een platte markup taal dat tekstuele inhoud, pagina structuur en instructies bevat waarmee je browser uit de voeten kan hoe de webpagina moet worden getoond.
What You See Is What You Get (WYSIWYG)- editors
Je hoeft niets van HTML code te kennen en je kunt toch websites maken. Er zijn veel WYSIWYG programma’s, online en offline, op de markt waarmee je stap voor stap, met knippen en plakken, een website in elkaar kunt zetten. Zo heeft Apple bijvoorbeeld het programma iWeb, wat een groot aantal sjablonen bevat waarmee je een eenvoudige website kunt maken.
De problemen beginnen pas als er meer toepassingen moeten worden toegevoegd aan de eenvoudige website, zoals formulieren, reactievelden of banners. Daarvoor kun je gemakkelijk de code even induiken.
HTML is gemakkelijk te leren
HTML is echter niet moeilijk te leren en als je de tijd neemt om er even in te duiken dan ben je veel beter voorbereid om een eenvoudige en goede website te maken.
Je kunt HTML schrijven in een eenvoudig programma dat op iedere Windows computer te vinden is: Kladblok, of voor iedere Apple gebruiker: ‘Teksteditor’. Ik raad je echter aan om een iets uitgebreidere editor te gaan gebruiken, specifiek gericht op de taak van het schrijven van code.
Controle over het bouwen
Met een HTML-editor heb je namelijk meer controle over het zelf schrijven van de code. Dit komt omdat er een aantal zaken geautomatiseerd wordt. Een HTML editor zet de tags in kleur neer, verschillende tags in verschillende kleuren. De regels worden genummerd en je kunt tags op eenvoudige manieren in een keer invoegen. Je hoeft dus niet elke letter te schrijven.
Verschillende editors
Notepad2 is een gratis editor met syntax highlighting voor meerdere programmeertalen en markuptalen, waaronder HTML.
Notepad++ is een vergelijkbare editor die erg populair is vanwege de vele mogelijkheden.
HTML-kit is een al wat oudere editor, maar nog zeer volwaardig voor zijn taak. Deze editor is niet alleen geschikt voor HTML, maar ook voor vele andere talen. Daarnaast heeft deze editor een scala aan plugins.
Voor Mac OSX gebruikers is er bijvoorbeeld Textwrangler van Barebones. Een zeer complete editor met een ingebouwde FTP functie. Iets wat HTML-kit trouwens ook heeft.
Voordelen van een editor
Het mooie van een editor is dat er een aantal functies is geautomatiseerd. Zo kun je bij het opstarten alvast een basisversie tevoorschijn laten komen met de belangrijkste codes op een rij.
Vaak is het mogelijk om met een druk op de knop verschillende onderdelen, zoals links of afbeeldingen in te voegen.
Preview functie
Bij afbeeldingen gaat het dan om de specifieke tag hiervoor, en niet de afbeelding zelf. Dat is direct het punt van een editor. Je moet eerst de code invoeren en vervolgens moet je gaan controleren of dit het resultaat is wat je wilde bereiken. De meeste browsers hebben een preview functie hiervoor.
Je kunt natuurlijk ook je browser hiervoor gebruiken.
Het allerbelangrijkste bij het maken van een HTML document is dat je het document ook als zodanig opslaat. En ja, dat gaat vaker mis dan je denkt. Sla een bestand dus op als ‘naam.htm’.
Nog een laatste tips als je een bestand opslaat, gebruik dan geen spaties in de naam. dat kan wel eens verkeerd aflopen, en dan is je website ineens onzichtbaar.
Wil je HTML leren, en kunnen werken met een editor, dan is het aan te raden de Cursus HTML te volgen. Je leert dan alles over HTML en CSS. Je leest er meer over op de cursuspagina.
"De meeste browsers hebben een preview functie hiervoor."
"Je kunt natuurlijk ook je browser hiervoor gebruiken."
Juist 🙂
Ik gebruik zelf Notepad++, prima programma.
Ik zweer bij dreamweaver. Is de meest complete editor die ik ken.
En wysiwyg is soms wel degelijk handig. Ik heb bijvoorbeeld echt geen zin om zelf een hele tabel uit te typen.
En dan nadenken over cols en rows. Met 1 klik heb ik dit gelijk gedaan.
Aptana en InType vind ik de handigste.
Aptana, omdat het veel attributen in het systeem en goede plug-ins heeft.
InType, omdat het heel makkelijke aan te passen bundles heeft. Als ik typ table en ik druk op TAB dan komt er een basis tabel te staan, en met tab kan tussen elke cel switchen.
En daarnaast is het snel.
Notepad++ is top, gebruik het vanaf het begin al. Werkt super 😀
Ik gebruik Zend Studio omdat dit een heel fijn programma is voor verschillende talen. Vooral voor PHP (goede autocomplete, foutenopsporing, debugging, alles zit er in) werkt hij erg goed.
Als webontwerper zou ik eerder voor Dreamweaver gaan omdat Dreamweaver betere tools heeft voor CSS en HTML. Als je echt gaat coderen, zou ik toch echt verder gaan kijken.
Html-kit, echt de allerbeste!!
Notepad/Notepad++ voldoen ruim aan de eisen voor het maken van websites.
Zelf gebruik ik Eclipse (met PHP extensie) in een Linux omgeving. Autocompletion is handig, meer high-tech functies hoef ik niet en wil ik ook niet hebben.
Dreamweaver… tja, echt vreselijk. Je wijzigt iets in Dreamweaver en de hele structuur van je website wordt fijn overhoop gegooid. Tevens werkt het niet op Linux, dus dat is ook nog een reden voor mij om het niet te gebruiken (afgezien van de prijs).
Kortom, wil je echt leren websites bouwen, gebruik gewoon Notepad (o.i.d.) om je creatie te verwezenlijken.