Webpagina maken

Hoe maak je je eerste webpagina en hoe kan je je webpagina testen?

Het korte antwoord

In de cursus: Fundament Programmeren: HTML5 en webdesign op Instruct Online gebruiken ze HTML-Kit.
Op de computers van Sancta Maria is HTML-Kit niet geïnstalleerd. Daarom gebruiken we op school Dreamweaver en Notepad.
En om te testen gebruiken we Explorer, Chrome of Firefox.

  1. Maak een HTML-bestand met een editor (Notepad, Dreamweaver)
  2. Opslaan als "voorbeeld.html"
  3. Open "voorbeeld.html" met een browser (Explorer, Chrome, Firefox)
  4. Indien je daarna de webpagina wilt aanpassen open je "voorbeeld.html" opnieuw met de editor.
  5. Maak de aanpassingen.
  6. Ga verder bij 2. En zo voort.

Het lange antwoord: stap voor stap

Dreamweaver is professionele software om websites te bouwen. Het zit vol met handige functies om snel te kunnen werken, maar het duurt lang om al die handige functies te leren. Daarom is het beter om de basis te leren met Kladblok.

Hier laten we alleen even zien hoe je een bijna lege pagina maakt met Dreamweaver. Daarna gaan we verder met Kladblok.

Webpagina met Dreamweaver

Start Dreamweaver.

Klik op HTML in de kolom Nieuw.

Zorg dat Framework is Geen en Documenttype: HTML5. Klik op Maken.

Dreamweaver heeft een compleet HTML-bestand gegeneert. Alleen Voorbeeld Kop 1 is ingetoetst.
Verder is op het knopje Gedeeld geklikt, zodat Dreamweaver zowel het resultaat (links boven) als de HTML (links onder) laat zien.

Webpagina met Kladblok

Kladblok staat waarschijnlijk niet in je startmenu. Zoek daarom naar "notepad" en klik op Notepad.exe, want dat is Kladblok.
Je moet nu zelf de HTML intoetsen.


Klik op Bestand en Opslaan als.

.

Het is handig om je HTML ergens op te slaan waar je het kan terug vinden.
Maak daarom een Nieuwe map html5.

Klik op de map html5.

Kladblok wil een TXT-bestand maken, maar HTML hoort in een HTML-bestand.
Zorg dat bij Opslaan als: Alle bestanden (*.*) staat en Codering: UTF-8 en noem je Bestandsnaam: Voorbeeld.html
Klik op Opslaan.

Webpagina testen met Explorer

Voorbeeld.html is nu klaar om te testen. Ga naar de map html5.

Klik op Voorbeeld.html en zie het resultaat:

Samenvatting

Daarna kan je Voorbeeld.html verbeteren en opnieuw testen. En zo voort.