Uitleg HTML Kit
Op de pagina html leren heb je HTML code getikt met behulp van kladblok, de tekst bewerker van Windows. Het is een prima tekstbewerker maar bied weinig extra's.
Nu je iets grotere bestanden gaat maken is het handig om een HTML editor te gaan gebruiken. Ondanks er talloze opties te vinden zijn online, gebruik ik zelf HTML Kit. Dit programma is gratis en bied meer dan genoeg extra's.
Let op dat je op de website, de onderste versie download aangezien de bovenste alleen een probeer versie is.
Voordelen HTML Kit
- HTML Kit herkent onderdelen van de HTML taal en geeft die in kleuren aan.
- Typfouten worden door de verschillende kleuren snel herkend.
- Het schakelen tussen de browser en de editor is erg makkelijk.
Het schakelen tussen de browser en de editor is erg makkelijk.
Je ziet dat het openingsvenster uit twee gedeeltes bestaat. Bovenin zie je een aantal opties om een nieuw of bestaand HTML document te openen en onderin zie je de laatst geopende bestanden.
Indien je nog niet eerder gebruikt hebt gemaakt van HTML Kit dan is het onderste gedeelte waarschijnlijk leeg.
Klik op create a new file en onderstaand scherm verschijnt.
Je ziet dat HTML Kit de basis elementen zoals uitgelegd op Hoe maak je een html pagina alvast heeft ingevuld, dat scheelt weer typen.
Zoals je ziet, geeft de editor de HTML elementen blauw aan, de tekst wordt zwart weergegeven.
Verander de tekst tussen < title > en < / title > naar "mijn eerste pagina" en klik met je muis net onder < body > een scherp haakje <
HTML Kit herkent alle html elementen en zet deze voor je op een rij zodra je begint met typen. Met de muis kun je naar de juiste tag gaan. Ga naar de < h1 > tag in de lijst en bevestig je keuze door enter te drukken of door dubbel te klikken.
Typ als voorbeeld nu tussen de < h1 > en < / h1 > tag, de tekst: Dit is een voorbeeld.
Je ziet nu onderstaand scherm.
Verschillende schermen
Onder in je scherm zie je 4 tabbladen: Editor, preview, Output en Split View.
Wanneer je op de tab Preview klikt zie je een voorbeeld van wat je net getypt hebt.
Zo zal de pagina eruit zien in een internet venster. Je ziet dat de pagina een titel heeft "mijn eerste pagina" en de tekst Dit is een voorbeeld is heel dik gedrukt door het toevoegen van de < h1 > tag.
De < h1 > is maar 1 van de 6 mogelijkheden die je kunt toevoegen aan een headline. De tag < h1 > is het grootste en < h6 > is het kleinste.
De meeste webpagina's gebruiken alleen de eerste 4 tags en sommige alleen de < h1 > en < h2 > tag. Je zult zelf moeten kijken welke tags het beste in je webpagina's passen.
Tip 1: De < h1 > is altijd de eerste headline en die gebruik je maar 1 keer per pagina.
Tip 2: Vergeet niet elke tag die je gebruikt, ook weer te sluiten door < / >
Nadat je je eerste kop hebt gemaakt met de < h1 > tag begint je eerste paragraaf. Die open je en sluit je met < p > en < / p >. Tussen deze twee elementen plaats je de gewenste tekst en je eerste paragraaf is een feit.
Splitview en Controlecode
Wanneer je op Split View klikt dan wordt je scherm in twee delen opgesplitst. Links zie je de originele code die je zelf gemaakt hebt en rechts de geoptimaliseerde code. Indien je een typfout hebt gemaakt door bijvoorbeeld een < tag te vergeten dan wordt dat in het rechtervenster aangegeven en herstelt.
Ik heb zelf een < weggehaald als voorbeeld en in onderstaand venster zie je wat er dan gebeurd.
De knop voor de html controle is rood omcirkeld en de fout die is gevonden in de html code is in het rechterscherm rood omlijnd. De fout in de code wordt aangegeven en de juiste code staat eronder vermeld.
Dit was de basis van HTML Kit, je ziet dat er meer mogelijk is met deze editor dan met het standaard Windows programma kladblok. Met name de code controle is een extra optie die het makkelijker maakt om fouten op te sporen.