HTML-editor kiezen en installeren

uit de cursus Basiskennis HTML5 (2019)

Geef een reactie of stel een vraag

Geef een reactie

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

In de cursus basiskennis HTML5 leer je hoe je webpagina’s structureert met de juiste HTML-tags. 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

Wat kun je hierna?

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.

Belangrijke onderwerpen in deze online basiscursus zijn:

  • Leren maken van de juiste mappenstructuur voor webproducties voor elke dag
  • Semantische beteknis van HTML-tags
  • Pagina’s structureren met HTML-tags conform het W3C
  • Inzicht in de reglementen van het W3C
  • Tabellen toepassen

Als je een website gaat bouwen heb je een browser nodig en het liefst een html-editor.

Voor het schrijven van html heb je aan een simpel tekstprogramma feitelijk al genoeg.

Een html-editor kan je echter helpen bij het foutloos schrijven van html.

En daardoor ben je sneller en efficiënter.

Er zijn heel wat html- of webeditors te vinden.

Zowel gratis als betaald.

Ik heb voor deze cursus gekozen voor de webeditor Brackets.

Hij is gratis te downloaden en geschikt voor elk platform.

Dus zowel voor Windows als Mac.

Kwestie van de installatieprocedure volgen en je kunt aan de slag.

Brackets komt uit de stal van Adobe.

Maar ze hebben het programma vrijgegeven en het zit nu ook niet meer in de Adobe Cloud.

Ben je in het bezit van een Adobe Cloud Account, dan zou je ook Adobe Dreamweaver kunnen gebruiken.

De keuze voor een editor is persoonlijk.

Ik kan je aanraden om juist meerdere editors te leren kennen.

Dan maak je uiteindelijk een keuze welke jou het beste bevalt.

Uiteindelijk doen en kunnen ze bijna allemaal hetzelfde.

Maar heeft de ene net wat prettigere functies die het werken wat makkelijker maken.

Nadat je de editor hebt geïnstalleerd start je deze op.

Ik start het programma Brackets op.

Een standaard startbestand wordt geopend en je kijkt nu naar de broncode hiervan.

Naast de HTML-editor heb je dan de browser nodig.

Waarmee je de html-pagina’s kunt gaan bekijken.

Brackets biedt een Live-voorvertoning aan met de knop Live voorbeeld.

Deze optie vind je ook terug onder het menu Bestand > Live Voorbeeld of Commando Alt P.

Chrome wordt opgestart en je kijkt nu naar een Live voorvertoning van de broncode.

Kijk maar! Als ik hier de tekst verander in de broncode.

Wordt direct deze wijziging ook doorgevoerd in de browser

Vanaf nu zorg ik ervoor dat ik zowel het brackets-venster...

als het browser-venster naast elkaar geopend heb staan.

Met de optie Live Voorbeeld kan ik dan direct zien hoe de html vertoond wordt in de browser.

Maar wat ook erg handig is is het volgende.

Klik in de voorvertoning van de browser op een element of een zin.

En deze wordt ook geselecteerd in de broncode.

Zo kun je dus heel snel zien welke html-code hoort bij welk deel van de pagina.

Chrome is op dit moment de meest gebruikersvriendelijke en betrouwbare browser.

Maar Firefox, Opera, Safari kun je ook prima gebruiken.

De enige browser die je beter niet kunt vertrouwen is Internet Explorer.