Hoe maak je een html-bestand

• Eigenschappen van een html-bestand (=web-pagina) op een groot beeldscherm
• Kan weergegeven worden met elke computer, tablet en smartphone, en ziet er altijd hetzelfde uit (het is een webpagina).
• Niet pagina-gebonden, je kan scrollen, maar meestal alleen in de lengte.
• Inhoud van het venster past zich aan aan de schermbreedte, bij verschillende lettergrootten.
• Vergroten / verkleinen van letters, tabellen en afbeeldingen is zeer gemakkelijk met [_Ctrl_] [_+_] / [_Ctrl_] [_-_]
  
• Letter-grootten zijn relatief, niet absoluut.
• Plaatsing van afbeeldingen en tabellen gebeurt zoals bij een webpagina-layout.
• Afbeeldingen, beeld- en geluidsfragmenten zijn afzonderlijke bestanden, en staan in dezelfde map van het html-bestand, of in een afzonderlijke map met dezelfde naam als het html-bestand.
• Weergaveprogramma is een webbrowser. 
• Weergaveprogramma is verschillend van opmaakprogramma. Het html-bestand kan niet "per ongeluk" gewijzigd worden.
• Wat is een html-bestand?
• Een html-bestand is een puur platte-tekst-bestand. Daarin staan codes die door het leesprogramma (de browser) geïnterpreteerd worden, en zo dan ook worden afgebeeld.
  

HTML-bestand = Webpagina

• Vorm
  

  2 mogelijkheden:
  

• HTML-bestand en hulpbestanden (afbeeldingen en filmpjes) staan in dezelfde map.
  Voorbeeld:
  
• html-bestand.html
• afbeelding1.jpg
• afbeelding2.jpg
• afbeelding3.jpg
• filmpje1.avi
  
  
  
  
  
  
• HTML-bestand heeft (in dezelfde map) een submap met dezelfde naam, en daarin staan de hulpbestanden.
  Voorbeeld:
• html-bestand.html
• html-bestand_bestanden (dit is een map)
  
• afbeelding1.jpg
• afbeelding2.jpg
• afbeelding3.jpg
• filmpje1.avi
  
  
  
  
  

• Aanmaken

• Eenvoudig houden:
  Open een "leeg", voorgeformatteerd document, en sla het op onder de naam die je wenst te gebruiken.
• Open html-editor
• D:\WINAPPLI\INTERNET\INTERNET-EDIT\KompoZerPortable\KompoZerPortable.exe
• Start programma KompoZerPortable.exe (dubbelklikken)
  
  
• Open een "leeg" bestand, bvb _leeg.html
  (Dit bestand kan in dezelfde map staan als KompoZer.exe)
  
• File - Open File (navigeer naar KompoZer map) - selecteer _leeg.html
• File - Save As (navigeer naar gewenste map) - vul naam in van nieuw document.
  
  
• Gebruik het KompoZer programma zoals je een eenvoudige tekstverwerker zou gebruiken.
  Voornaamste verschillen:
• KompoZer bestaat voorlopig alleen in het engels. Maar omdat de layout heel erg sterk gelijkend is op een standaard tekstverwerker (MS Office 2003, LibreOffice, OpenOffice, AbiWord...) is dit meestal geen groot probleem.
  
• Er zijn geen "pagina-randen", je kan in de breedte verder blijven tikken tot aan de rand van het venster, maar wanneer de breedte van het venster veranderd wordt, zal de tekst zich herformatteren, zodat die altijd binnen het venster valt.
• Je kan in de lengte verder blijven tikken, er verschijnt dan wel een scrollbalk aan de rechterkant van het venster.
• Lettergrootte is relatief:   je kan vergroten en verkleinen, maar je hebt geen "absolute waarde" zoals in een klassieke tekstverwerker.
  
• Je hebt wel alle lettertypes ter beschikking die in je besturingssysteem geactiveerd zijn, maar het kan zijn dat de browser waarmee het html-document gelezen wordt,bepaalde exotische lettertypes substitueert door andere lettertypes.
  Beperk je dus tot de meest voorkomende en best gekende lettersoorten. Lees ook typografie.
  
• Letterstijlen zijn beperkt. Je hebt 6 hoofdingen, paragraaf en body-tekst.
  
• Bevat onderaan tabbladen:
  
• KompoZer 0.7 heeft 4 tabbladen:  Normal - HTMLtags - Source - Preview
  
  
  
  
• Kompozer 0.8 heeft links 3 tabbladen en rechts drie lay-out-keuzemogelijkheden:
  
  
  
  
• KompoZer is een WYSIWYG editor, die de html-code schrijft aan de hand van wat de gebruiker in het ontwerp-scherm aanmaakt, maar soms kan het nodig zijn om in de html-code in te grijpen. 
• Je kan eenvoudig ankers en links invoegen, in hetzelfde of een ander html-document.
• Wanneer je een hyperlink in een document invoegt,
  
• Je kan eenvoudig formulieren aanmaken.
• Invoegen van afbeeldingen en clips gebeurt nooit in het html-document: hierin staat alleen de link naar het externe bestand. Je ziet de afbeelding wel staan, maar bij het opslaan wordt de afbeelding niet in het html-document opgeslagen.
  Je moet dus altijd de afbeelding samen met het html-bestand bewaren.
  Dit is min of meer zoals bij een presentatie waar je ook de clips afzonderlijk moet opslaan.
  


• Meer uitleg, (ook over het instellen van CSS) in cmp-html.html
  
• Er bestaan "help"-websites:   www.kompozerwebsite.be,  www.kompozer.nl
  (off-line versie: kompozerwebsite.be en kompozerwebsite.nl)
  

• Opslaan
  

• Je kan een html-bestand enkel opslaan als een html-bestand.
  Eigenlijk is een html-bestand een puur platte-tekst bestand, waarbij de code die erin staat, door het leesprogramma (de browser) wordt geïnterpreteerd. Wanneer je dus een html-bestand opent met bvb "kladblok", kan je gewoon de html-code zien staan.
  

• Lezen

• Een html-bestand wordt gelezen, uitgevoerd, bekeken met om het even welke web-browser
  Voorbeelden van web-browsers:
• Google Chrome 
• Mozilla FireFox
• Safari
• Opera
• Microsoft Internet Explorer of Microsoft Edge
  
• ook minder bekende: Maxthon, SRWare Iron, K-Meleon, Avant Browser, Comodo Dragon, Lunascape, RockMelt, Sleipnir, ...
• Webbrowsers kan je installeren, of gebruiken in "portable" vorm.
  Alle webbrowsers bestaan in beide vormen, behalve Microsoft Internet Explorer/Edge en Safari. Deze twee behoren tot sterk afgesloten systemen (closed source), en mogen van de makers (Microsoft en Apple) niet in "portable" versie bestaan.
  

• Weergeven van html-bestand
  

• Dubbelklik op het html-bestand, bvb vanuit "Verkenner"
  Normaal opent dit met een vooringestelde webbrowser.
• De layout zou identiek moeten zijn als wat je bij de aanmaak met KompoZer zag, behalve dat bvb de rode hulplijnen bij tabellen en uitgelijnde paragraaf-tekstblokken niet voorkomen.
• De weergave in een browser maakt het mogelijk om op eenvoudige wijze de grootte van de letters en afbeeldingen te wijzigen, zonder dat er horizontale scrollbars voorkomen.
• Hyperlinks werken onmiddellijk, maar bij de aanmaak van het html-bestand wordt bepaald of ze in hetzelfde venster, in een ander tabblad of in een andere frame worden geopend.
• Eens het html-bestand geopend, kan je het gebruiken zoals een webpagina: vooruit-achteruit knop, zoekfunctie, afdrukken, enz...
• In webpagina's kan je gemakkelijk navigeren: (voorbeeldafbeelding links is met QWERTY-toetsenbord, waar het origineel ontworpen werd)
  
  

  Hou [_Ctrl_] ingedrukt, en tik [_+_] om te vergroten tik [_-_] om te verkleinen tik [_0_] om terug te keren naar standaardgrootte		Hou [_Ctrl_] ingedrukt, en gebruik het scrollwieltje van de muis om te vergroten of te verkleinen		Je kan ook de klassieke navigatietoetsen gebruiken: [_Home_], [_End_], [_PageUp_], [_PageDown_] en natuurlijk de pijltjestoetsen.

Te onthouden:

• "html" is het bestandsformaat voor een webpagina, een formaat dat op elke computer kan gelezen worden
• "html" is het best bruikbare bestandsformaat wanneer de grootte van de presentatie (lettergrootte en beeldgrootte) "on the spot" moet gewijzigd kunnen worden.
• "html" is een formaat waarbij de gegevens, bvb de lettergrootte "relatief" zijn, niet "absoluut".
  
• "html" schrijf je met een eenvoudige tekstverwerker (bvb Kompozer).
• "html" lees je met om het even welke webbrowser.
• "html" is het moederbestand, bijkomende bestanden zijn nodig voor afbeeldingen, geluids- en beeldfragmenten.
• Dit bestand is een html-bestand. Wil je de "echte" inhoud van de pagina bekijken, rechtermuisklik en kies "Paginabron bekijken" of "View page source"