PDF download Pdf downloaden PDF download Pdf downloaden

Als je graag websites met de hand codeert, dan kun je HTML-bestanden bewerken in een basistekstverwerker zoals Kladblok (Windows) of TextEdit (macOS). Als je liever elementen op het scherm wilt verplaatsen en live voorbeelden wilt zien, dan kun je een WYSIWYG (What You See Is What You Get) editor gebruiken, zoals Dreamweaver of Kompozer. Deze wikiHow leert je hoe je een HTML-bestand kunt openen en bewerken in een standaard of visuele bewerkingsapplicatie.

Methode 1
Methode 1 van 4:

Kladblok gebruiken (Windows)

PDF download Pdf downloaden
  1. Kladblok wordt geopend in het Start-menu.
  2. Dit is een pictogram dat lijkt op een notitieblok met een blauwe kaft.
  3. Dit staat bovenaan de menubalk in Kladblok. Dit geeft een uitklapmenu weer. Er wordt een verkennervenster geopend voor het openen van bestanden in Kladblok.
  4. Het is de tweede optie in het menu Bestand.
  5. Klik op het uitklapmenu 'Tekstdocumenten (.txt)' en selecteer 'Alle bestanden' in het uitklapmenu. Dit geeft alle documenttypen (inclusief HTML-bestanden) weer in het verkennervenster.
  6. Het HTML-document wordt geopend in Kladblok. Je kunt de HTML-code bewerken in Kladblok.
  7. Om HTML in Kladblok te bewerken, moet je HTML leren zodat je het met de hand kunt bewerken. Veel voorkomende elementen die je kunt bewerken zijn onder andere:
    • <!DOCTYPE html> : Dit komt bovenaan het HTML-document te staan. Dit vertelt de webbrowser dat dit een HTML-document is.
    • <html></html> : Deze tags komen bovenaan en onderaan het HTML document. Dit geeft aan waar de HTML-code begint en eindigt.
    • <head></head> : Deze tags komen bovenin het HTML document. Ze geven aan waar de kop van het HTML-document begint en stopt. De header van het HTML-document bevat informatie die niet op de webpagina te zien is. Dit omvat de paginatitel, metadata en CSS.
    • <title>Paginatitel</title> : Deze tags geven de titel van de pagina aan. De titel staat in de kop van het HTML-document. Typ de titel van de pagina tussen deze twee tags.
    • <body></body> : Deze tags geven de titel van de pagina aan: Deze tags geven aan waar de body van het HTML-document begint en eindigt. De body is de plaats waar alle inhoud van de webpagina komt. De body komt achter de header in het HTML-document.
    • <h1>Koptekst</h1> : Deze tags creëren koptekst. De tekst tussen de '<h1>' en '</h1>' tags verschijnen als een grote vette tekst. Tekst komt in de body van het HTML-document.
    • <p>Alineatekst</p> : Deze tags worden gebruikt om alineatekst in een HTML-document te maken. De tekst tussen '<p>' en '</p>' wordt als tekst van een normale grootte weergegeven. De tekst gaat in de body van het HTML-document.
    • <b>Vette tekst</b> : Deze tags worden gebruikt om vetgedrukte tekst te maken. De tekst tussen '<b>' en '</b>' wordt vet weergeven.
    • <i>Schuine tekst</i> : Deze tags worden gebruikt om cursieve tekst te maken. De tekst tussen '<i>' en '</i>' wordt cursief weergegeven.
    • <a href="URL">Koppeling</a> : Deze tag wordt gebruikt om naar een andere website te linken. Kopieer het webadres waarnaar je wilt linken en plak het op de plaats waar 'URL' staat (tussen de aanhalingstekens). De tekst van de link waar 'Koppeling' staat (zonder aanhalingstekens) is de omschrijving van de koppeling.
    • <img src="image URL"> : Deze tag wordt gebruikt om een afbeelding te plaatsen met behulp van HTML-code. Vervang de tekst "image URL" door het webadres van de afbeelding.
  8. Dit staat in de menubalk bovenin het scherm.
  9. Dit opent een dialoogvenster dat je kunt gebruiken om het bestand op te slaan.
    • Om het bestand op te slaan onder de bestaande naam en bestandstype, klik je op Opslaan in het uitklapmenu onder 'Bestand'.
  10. Gebruik het uitklapmenu naast 'Opslaan als type' om 'Alle bestanden' te selecteren.
  11. Gebruik het vakje naast 'Bestandsnaam' om een naam voor het bestand te typen.
  12. Nadat je een naam voor het bestand in het vak 'Bestandsnaam' hebt getypt, voeg je de extensie '.html' toe aan het einde van de bestandsnaam. Zonder deze extensie wordt het bestand opgeslagen als een .txt-bestand, in plaats van een HTML-bestand.
  13. Het bestand wordt nu opgeslagen.
    Advertentie
Methode 2
Methode 2 van 4:

TextEdit in macOS gebruiken

PDF download Pdf downloaden
  1. Dit toont een lijst met apps die overeenkomen met het zoekresultaat.
  2. Het staat bovenaan de zoekresultaten. Het staat naast een pictogram dat lijkt op een vel papier en een pen.
  3. Het staat in de menubalk bovenin het scherm wanneer TextEdit geopend is.
  4. Hiermee open je een bestandsbrowser die je kunt gebruiken om door macOS te navigeren en bestanden te openen.
  5. HTML-bestanden hebben een extensie '.html' achter de bestandsnaam. Gebruik de bestandsbrowser om naar een HTML-bestand te gaan en klik erop om het te selecteren. Klik vervolgens op Openen om het HTML-bestand te openen in TextEdit.
  6. Je kunt TextEdit gebruiken om HTML-code te bewerken of schrijven. Je moet HTML leren zodat je het met de hand kunt bewerken. Veel voorkomende elementen die je kunt bewerken zijn onder andere de volgende:.
    • <!DOCTYPE html> : Dit komt bovenaan het HTML-document te staan. Dit vertelt de webbrowser dat dit een HTML-document is.
    • <html></html> : Deze tags komen bovenaan en onderaan het HTML document. Dit geeft aan waar de HTML-code begint en eindigt.
    • <head></head> : Deze tags komen bovenin het HTML document. Ze geven aan waar de kop van het HTML-document begint en stopt. De header van het HTML-document bevat informatie die niet op de webpagina te zien is. Dit omvat de paginatitel, metadata en CSS.
    • <title>Paginatitel</title> : Deze tags geven de titel van de pagina aan. De titel staat in de kop van het HTML-document. Typ de titel van de pagina tussen deze twee tags.
    • <body></body> : Deze tags geven de titel van de pagina aan: Deze tags geven aan waar de body van het HTML-document begint en eindigt. De body is de plaats waar alle inhoud van de webpagina komt. De body komt achter de header in het HTML-document.
    • <h1>Koptekst</h1> : Deze tags creëren koptekst. De tekst tussen de '<h1>' en '</h1>' tags verschijnen als een grote vette tekst. Tekst komt in de body van het HTML-document.
    • <p>Alineatekst</p> : Deze tags worden gebruikt om alineatekst in een HTML-document te maken. De tekst tussen '<p>' en '</p>' wordt als tekst van een normale grootte weergegeven. De tekst gaat in de body van het HTML-document.
    • <b>Vette tekst</b> : Deze tags worden gebruikt om vetgedrukte tekst te maken. De tekst tussen '<b>' en '</b>' wordt vet weergeven.
    • <i>Schuine tekst</i> : Deze tags worden gebruikt om cursieve tekst te maken. De tekst tussen '<i>' en '</i>' wordt cursief weergegeven.
    • <a href="URL">Koppeling</a> : Deze tag wordt gebruikt om naar een andere website te linken. Kopieer het webadres waarnaar je wilt linken en plak het op de plaats waar 'URL' staat (tussen de aanhalingstekens). De tekst van de link waar 'Koppeling' staat (zonder aanhalingstekens) is de omschrijving van de koppeling.
    • <img src="Afbeelding URL"> : Deze tag wordt gebruikt om een afbeelding te plaatsen met behulp van HTML-code. Vervang de tekst 'Afbeelding URL' door het webadres van de afbeelding.
  7. Het staat in de menubalk bovenin het scherm.
  8. Het staat in het uitklapmenu onder 'Bestand'. Hiermee sla je het HTML-bestand op.
    • Als je de naam van het bestand wilt wijzigen, klik je op Hernoemen (of Naam wijzigen) in het vervolgkeuzemenu 'Bestand'. Typ een nieuwe naam voor het bestand bovenaan het scherm. Zorg ervoor dat de '.html'-extensie bovenaan de pagina staat.
    Advertentie
Methode 3
Methode 3 van 4:

Dreamweaver gebruiken

PDF download Pdf downloaden
  1. Dreamweaver heeft een icoontje dat lijkt op een groen vierkant met 'Dw' in het midden. Klik op het pictogram in het Windows Start-menu, of op de map Programma's op de Mac, om Dreamweaver te openen.
    • Adobe Dreamweaver vereist een abonnement . Je kunt een abonnement aanschaffen vanaf ongeveer €20 per maand.
  2. Het staat in de menubalk bovenaan het scherm.
  3. Dit vind je in het uitklapmenu onder 'Bestand'.
  4. Gebruik de bestandsbrowser om een HTML-document op je computer te kiezen en klik erop om het te selecteren. Klik dan op Openen in de rechter benedenhoek.
  5. Dit staat in het middelste tabblad bovenaan de pagina. Dit toont een gesplitst scherm met een HTML-editor aan de onderkant en een voorbeeldscherm aan de bovenkant. [1]
  6. Gebruik de HTML-editor om HTML te bewerken. De manier waarop je HTML in Dreamweaver bewerkt is niet al te verschillend van het bewerken van HTML in Kladblok of TextEdit. Als je een HTML-tag typt, verschijnt er een zoekmenu met bijbehorende HTML-tags. Je kunt op de HTML-tag klikken om de begin- en eindtags in te voegen. Dreamweaver zal controleren of er begin- en eindtags zijn voor al je HTML-elementen.
    • Als alternatief kun je daar klikken waar je een HTML-element in de HTML-editor wilt invoegen, en klik je op Invoegen in de menubalk bovenin het scherm. Klik op het element dat je wilt invoegen in het uitklapmenu, om de HTML-code automatisch toe te voegen.
  7. Wanneer je klaar bent met het bewerken van het HTML-document, klik je op Bestand in de menubalk bovenin het scherm.
  8. Het staat in het uitklapmenu onder Bestand . Hiermee sla je HTML-document op.
    Advertentie
Methode 4
Methode 4 van 4:

Kompozer gebruiken

PDF download Pdf downloaden
  1. Ga naar https://sourceforge.net/projects/kompozer/ in een webbrowser. Je kunt elke webbrowser op de pc of Mac gebruiken. Dit is de downloadpagina voor Kompozer. Het is een gratis HTML (WYSIWYG) editor die zowel op Windows als op de Mac werkt.
  2. Het is de groene knop bovenaan de pagina. Dit brengt je naar een aparte downloadpagina. Na een vertraging van vijf seconden begint het downloaden.
  3. Standaard staan gedownloade bestanden in je 'Downloads'-map op de pc of Mac. Je kunt ze ook aanklikken in je webbrowser om het installatieprogramma van Kompozer te starten. Installeer Kompozer als volgt:
    • Windows:
      • Als je wordt gevraagd of je het installatieprogramma toestemming wilt geven om wijzigingen in je systeem aan te brengen, klik je op Ja .
      • Klik op Volgende in de introductievensters.
      • Klik op de ronde knop naast 'Ik accepteer de overeenkomst' en klik op Volgende .
      • Klik op Volgende om de standaard installatielocatie te gebruiken of klik op Bladeren om een andere installatielocatie te selecteren.
      • Klik op Volgende en klik dan opnieuw op Volgende .
      • Klik op Installeren .
      • Klik op Voltooien .
    • Mac:
      • Dubbelklik op het installatiebestand van Kompozer.
      • Klik op KompoZer.app .
      • Klik op het Apple-pictogram in de linkerbovenhoek.
      • Klik op Systeemvoorkeuren .
      • Klik op Beveiliging en Privacy .
      • Klik op het tabblad Algemeen .
      • Klik op Open toch onderin het venster.
      • Klik op Openen in het pop-upvenster.
      • Sleep het Kompozer-icoontje naar je bureaublad.
      • Open Finder.
      • Klik op de map Programma's .
      • Sleep het Kompozer-pictogram van het bureaublad naar de map 'Programma's'.
  4. Gebruik de volgende stappen om Kompozer op de pc of Mac te openen.
    • Windows:
      • Klik op het Windows Start -menu.
      • Typ 'Kompozer'
      • Dubbelklik op het Kompozer-icoon.
    • Mac: .
      • Klik op het vergrootglaspictogram in de rechterbovenhoek.
      • Type 'Kompozer' in de zoekbalk.
      • Dubbelklik op Kompozer.app .
  5. Het staat in de menubalk bovenaan de app.
  6. Het is de tweede optie in het uitklapmenu onder 'Bestand'. Hiermee open je een bestandsbrowser die je kunt gebruiken om een open HTML-bestand te selecteren.
  7. Hiermee open je het HTML-bestand in Kompozer.
  8. Het is het middelste tabblad bovenaan de pagina. Dit toont een gesplitst scherm dat een HTML-editor bevat aan de onderkant en een voorbeeldvenster aan de bovenkant.
    • Mogelijk moet je het venster van de app groter maken zodat je meer ruimte hebt om te werken.
  9. Het HTML broncodescherm staat aan de onderkant, Je kunt dit scherm gebruiken om op dezelfde manier HTML te bewerken als in Kladblok of TextEdit. Je kunt ook het voorbeeldscherm gebruiken om je HTML te bewerken, met behulp van de volgende stappen:
    • Gebruik het uitklapmenu in de rechterbovenhoek om het teksttype te selecteren (d.w.z. Header, alinea, etc.).
    • Klik en typ om tekst toe te voegen.
    • Gebruik de knoppen in het paneel bovenin het scherm om vet, cursief, tekstuitlijning, inspringing of lijsten aan je tekst toe te voegen.
    • Klik op het gekleurde vierkantje in het paneel bovenin het scherm om de tekstkleur te wijzigen.
    • Klik op het Afbeelding -pictogram bovenaan het scherm om een afbeelding toe te voegen aan je HTML-document.
    • Klik op het pictogram dat op een kettingschakel lijkt om een link aan je HTML-document toe te voegen.
  10. Als je klaar bent met het aanbrengen van wijzigingen in je document, klik je op het Opslaan -pictogram bovenin het scherm. Eronder staat een pictogram dat lijkt op een diskette. Hiermee sla je je werk op.
    Advertentie

Waarschuwingen

  • Vergeet niet je document op te slaan tijdens het bewerken. Er kan elk moment iets misgaan.
Advertentie

Over dit artikel

Deze pagina is 5.280 keer bekeken.

Was dit artikel nuttig?

Advertentie