cmp-html

Voorwoord

Eigenschappen van een web-pagina (html-bestand) op een groot beeldscherm

Kan weergegeven worden met elke computer, ziet er altijd hetzelfde uit (het is een webpagina).
Niet pagina-gebonden, je moet scrollen, maar alleen in de lengte.
Vergroten / verkleinen letters, tabellen en afbeeldingen is zeer gemakkelijk (ctrl + en ctrl -)
Letter-grootten zijn relatief, niet absoluut
Inhoud venster past zich aan aan de schermbreedte, bij verschillende lettergrootten
Plaatsing afbeeldingen en tabellen is zoals bij een webpagina-layout
Afbeeldingen, beeld- en geluidsfragmenten zijn afzonderlijke bestanden, en staan bvb in een afzonderlijke map.
Weergaveprogramma is een webbrowser.
Weergaveprogramma is verschillend van opmaakprogramma. Bestand kan niet "per ongeluk" gewijzigd worden.

Info over bestandsformaten staat hier.

Webpagina = HTML-bestand

Wat is een html-bestand

"html" staat voor HyperText Markup Language

Hypertext is de techniek waarmee een verbinding (een link) wordt gelegd naar bijvoorbeeld een ander document, een afbeelding, of een geluidsopname.
Markup is het gebruik van code om de browser, een programma waarmee HTML-documenten bekeken kunnen worden, te vertellen hoe de inhoud van het document weergegeven moet worden en naar welke bestemming de hyperlinks moeten leiden.

Een html-bestand is een doodgewoon puur tekstbestand, dat "geïnterpreteerd" wordt door de webbrowser, die de bedoelde "vorm" toont.

Het is geen binair bestand zoals bvb een .doc bestand, dat alleen correct weergegeven wordt door het desbetreffende programma, hetzelfde programma waarmee het .doc-bestand geschreven werd.

Het is tekst, en kan dus door elke pure tekst-lezer gelezen worden.
"gelezen" wil niet zeggen dat de instructies die erin staan, ook correct geïnterpreteerd worden.

voorbeeld van wat er staat		<strong> deze tekst staat vet </strong>
voorbeeld van wat bedoeld wordt		deze tekst staat vet

Deze html-tekst bevat dus zowel de inhoud (de eigenlijke tekst), als de vormgeving (de formattering) en dit allemaal dooreen.
De minimale "overhead" van een html-bestand, is ongeveer dit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://xxx.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
</head>
<body>
<h1></h1>
<br>
<p>
</p>
</body>
</html>

Dit staat wel behoorlijk in contrast met bvb een .doc document, dat meer dan 20000 karakters overhead heeft...
(hieronder een klein stukje uit een leeg .doc bestand zoals het op de schijf staat)

Een html-tekst kan in veel versies (HTML5, XHTML) met veel opties (CSS, java, Flash).
Een html-bestand bevat alleen de tekst, in tekstvorm en tabellen.
Afbeeldingen kunnen niet "in" deze tekst ingepakt worden, zoals bij een "doc" document.
Afbeeldingen, geluids- en beeldfragmenten worden meestal in een afzonderlijke map ondergebracht.
Wanneer deze map dezelfde naam heeft als het html-document, worden de twee (in Windows Verkenner) als één geheel aanzien.

Voorbeeld:

document: computer-grootscherm.html
bijbehorende map: computer-grootscherm_bestanden

Met een html-bestand kan je wel een link verbinden, maar je kan er geen programma mee opstarten.
Je kan dus niet linken naar een .exe bestand. Dit is onmogelijk vanuit veiligheidsoogpunt.
Een html-bestand bevat "relatieve" waarden (geen pagina-afmeting, alleen relatieven lettergrootte), in tegenstelling tot een tekstverwerker, die "absolute" waarden gebruikt. (bvb een A4-pagina is 210x297mm, lettergrootte (corps) 10punt is 3.76mm hoog).

Aanmaken

Het html-bestand wordt aangemaakt, opgesteld door een "html-editor", een bewerkingsprogramma.

Aanmaken kan met een teksteditor

Elke "platte-tekst"-verwerker: MS Notepad (voorbeeld), EditPad (voorbeeld), Notepad++ (voorbeeld)...
Voordeel: je ziet alle instructies, je kan alles controleren
Nadeel: je moet een ander programma (een browser) opstarten om te controleren hoe het er uit ziet.
Bruikbaar, maar niet voor de modale gebruiker. Niet handig.

Aanmaken kan met een WISYWYG programma (What You See Is What You Get)

Voorbeeld: Adobe Dreamweaver ($), Mozilla Kompozer (voorbeeld), Microsoft Frontpage ($)
Voordeel: je creëert het uitzicht van een pagina, het programma schrijft automatisch de code
Voordeel: je kan vanuit het programma onmiddellijk zien hoe het er in een browser zal uit zien.
Nadeel: codering is soms inefficiënt groot, door teveel opties (zie computer-bestanden)
Andere: Online html5-editor, Maquetta, Blue Griffon, Rapter editor ($), Mercury editor ($), ...

Aanmaken kan met een office-suite-tekstverwerker

Voorbeeld: Microsoft Office Word (voorbeeld), LibreOffice Writer (voorbeeld)
Voordeel: is zoals WISYWIG programma, "opslaan als html"
Nadeel: codering is meestal veel te groot, teveel overhead, door teveel opties (zie computer-bestanden).
Ook worden tabellen meestal niet correct gecodeerd.

Conclusie: snelst, goedkoopst en gemakkelijkst: Mozilla Kompozer Portable

is opvolger van NVU, en hetzelfde als Seamonkey Kompozer
Kompozer "moet" niet geïnstalleerd worden (KompozerPortable)
Kompozer "kan" wel geïnstalleerd worden, downloadpagina staat hier
bevat onderaan tabbladen: Normal - HTMLtags - Source - Preview
bevat CSS editor
Er bestaan "help"-websites: www.kompozerwebsite.be, www.kompozer.nl
(off-line versie: kompozerwebsite.be en kompozerwebsite.nl)

Lezen

Een html-bestand wordt gelezen, uitgevoerd, bekeken met om het even welke web-browser

Webbrowsers gebaseerd op Mosaic-engine (Netscape) en Trident-engine

Microsoft Internet Explorer (op 06-12-2012 is het versie 10.0.9200.16384 inclusief update RTM KB2718695, op 04-02-2013 is het versie 10.0.9200.16466 updateversie 10.0.1 KB2761465, op 10-03-2013 is het versie 10.0.9200.16484 updateversie 10.0.2 KB2792100, op 01-03-2014 is het versie 11.0.9600.16518 inclusief update 11.0.3 KB2909921, op 22-09-2014 is het versie 11.0.9600.17278 inclusief update 11.0.12 KB2977629...)
Belangrijkste eigenschappen: de grootste, traagste, meeste versies, meest veranderende layout, telkens moeten veiligheidslekken gedicht worden, zit standaard vastgebakken in een Microsoft Operating System, in Windows 8 en Windows 8.1 zitten er zelfs 2 verschillende versies op tegeltjesmenu en op desktop...
Internet Explorer kan wel een paar kunstjes die niet lukken met andere webbrowsers.
Internet Explorer was volgens sommigen de belangrijkste reden om de ondersteuning van Windows XP stop te zetten. XP-gebruikers die bvb concurrent Firefox of Chrome browser gebruiken, hebben geen problemen...
Microsoft Edge, is de browser die voorzien is in Windows 10, en die Internet Explorer zou vervangen. Microsoft Edge is ook een variant van de Trident-engine, en dus blijven sommigen het Internet Explorer 12 noemen...

Webbrowsers met Konquerer-engine (WebKit, OpenSource)
Belangrijkste eigenschappen: de snelste webbrowser, maar werkt niet altijd met alle plug-ins

Webbrowsers gebaseerd op Gecko-engine (Mozilla, OpenSource)

Mozilla FireFox
Belangrijkste eigenschappen: de meest complete, minste problemen, meest gebruikt (2014)
Seamonkey

Webbrowsers gebaseerd op Presto-engine

Opera

Webbrowsers kan je installeren, of gebruiken in "portable" vorm.
Alle webbrowsers bestaan in beide vormen, behalve Microsoft 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.
Er bestaan heel wat webbrowsers, ook minder bekende: Maxthon, SRWare Iron, K-Meleon, Avant Browser, Comodo Dragon, Lunascape, RockMelt, Sleipnir, ...

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"

Voorbeeld

Aanmaken van een html-bestand

Voorbeelden zijn met KompozerPortable
Open programma "Kompozer"

Navigeer naar D: \ WINAPPLI \ INTERNET \ EDIT \ KompoZerPortable \ KompoZerPortable.exe en dubbelklik
Maak eventueel een snelkoppeling, en plaats die bvb op je bureaublad
Of, indien je een dock gebruikt, sleep KompoZerPortable.exe naar een lege plaats in het dock.

KompoZer is ook voorzien voor het publiceren van een volledige website.
Deze optie zullen we niet gebruiken. Wanneer je scherm er als volgt uit ziet, kan je de site manager afsluiten.
Het is handig om ook een basislettertype op te geven.
Links vanboven, in de blauwe balk, staat nog "untitled".
Kompozer wil graag een naam voor je bestand, bvb "grootheden en eenheden".
Kompozer zal ook meteen voorstellen om het bestand weg te schrijven.
Navigeer naar de gewenste map, bvb D:\TEMP, en klik op [_Opslaan_]
Nu kan het lettertype ingesteld worden, als onderdeel van de CSS Stylesheet.
Klik bij tabblad _/¯General¯\_ op het uitklapblad, en kies "body"
Klik knop [_Create Style Rule_]
Kies tabblad _/¯Text¯\_
Klik knopje "Predefined"
Klik [_OK_]
Nu kan je aan de inhoud van de pagina beginnen.
Die inhoud kan bestaan uit

tekst die je zelf tikt of plakt, gestructureerd, met insprongen, enz...
tabellen die je aanmaakt
afbeeldingen (staan in dezelfde map als het html-bestand, of in een map met dezelfde naam)
geluids- en beeldfragmenten (staan in dezelfde map, of in een map met dezelfde naam)

Je maakt dus best in "Verkenner" een map aan, waarin je de "ondergeschikte" bestanden plaatst
Deze map heeft precies dezelfde naam als het html-bestand, maar met daarachter "_bestanden" zoals hieronder.
De vormgeving van de pagina heeft zijn eigenschappen en beperkingen.

Er zijn een beperkt aantal lettergrootten, die allemaal, in grootte, "relatief" zijn ten opzichte van de "standaard" waarde. Je kan dus niet zoals bij een tekstverwerker, zeggen dat de letter precies bvb 14p groot is.

the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog (standaard)
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog
the quick brown fox jumps over the lazy dog

Je kan, net zoals bij elke tekstverwerker, je lettertype kiezen.
The quick brown fox jumps over the lazy dog

Wanneer je afbeeldingen en tekst op eenzelfde horizontale lijn wil plaatsen, doe je dat met een tabel, waarvan bvb de randen onzichtbaar zijn, zoals hier

Zwaailicht (staat vertikaal in het midden van de cel)

Tekst bovenaan

Tekst onderaan

Hetzelfde kan je doen met het principe van het "floating tekstvak"

In dit geval gaat het om een sterk of zwak verbonden hoeveelheid informatie die op een vaste of variabele plaats op de bladspiegel, meestal in ander lettertype of tegen een andere achtergrond, in meer of minder mate tot lezen aanzet en niet noodzakelijk in chronologische volgorde moet gelezen worden.

Tabellen maak je vrij eenvoudig, bvb

Voorvoegsel

Symbool

Factor

yotta

10^24

 1
000 000 000 000 000 000 000 000

zetta

10^21

 
   1 000 000 000 000 000
000 000

exa

10^18

 
   
   1 000 000 000 000 000 000

peta

10^15

 
           1 000
000 000 000
000

tera

10^12

 
           
   1 000 000 000 000

giga

10^9

 
       1 000 000
000

mega

10^6

 
   1 000 000

kilo

10^3

 
       1 000

hecto

10^2

100

deca

10^1

10

10^0

1

deci

10^-1

0.1

centi

10^-2

   
     0.01

milli

10^-3

 
       0.001

micro

10^-6

 
       0.000
001

nano

10^-9

 
       0.000
000 001

pico

10^-12

 
       0.000
000 000 001

femto

10^-15

 
       0.000
000 000 000 001

atto

10^-18

 
       0.000
000 000 000 000
001

zepto

10^-21

 
       0.000
000 000 000 000 000 001

yocto

10^-24

   
    0.000 000 000 000 000 000 000 001

Het symbool van een voorvoegsel vormt één geheel met het symbool waaraan het is toegevoegd en vormt zo een symbool van een nieuwe eenheid.

Eenheden met voorvoegsels kunnen tot een macht worden verheven en met andere eenheden worden samengesteld tot afgeleide eenheden. Let op: cm^2=(10^-2 m)^2 = 10^-4 m^2

Het combineren van voorvoegsels is niet toegestaan bvb 10^-12 F = 1 pF en niet 1 µµF

Bij het kilogram is reeds een voorvoegsel gebruikt met betrekking tot het gram (symbool g). Hier moeten dus ook de andere decimale veelvouden en delen worden betrokken op het gram, bvb 10^-6 kg = 1 mg en niet 1 µkg.

Als de eenheden voluit geschreven zijn, schrijven we ook het voorvoegsel voluit: bvb 12 kV of 12 kiloVolt

Let op: 1 kilobit is 1024 bit (2^10 bit)

Je maakt eigenlijk een "web"-pagina, waarvan de lengte onbeperkt is, en waarbij de breedte bepaald wordt door de breedte van het venster.

Je kan hyperlinks (snelkoppelingen) maken

naar plaatsen in je tekst (ankers) bvb top
naar andere html-bestanden op de computer, op een netwerk of op internet (links)

Hyperlinks kunnen geen programma's opstarten, maar wel verwijzen naar een bestand, waarvan de computer weet met welk standaardprogramma dit geopend moet worden.
Zo kan je bvb verwijzen naar

een tekstfragment (let op de snelheid van openen / inladen...)

dat met een browser geopend wordt,
dat met een snelle editor wordt geopend,
dat met een standaard tekstverwerker geopend wordt,

een pdf-bestand, die bijvoorbeeld met PDF-Exchange Viewer wordt geopend,
een afbeelding, die bijvoorbeeld met IrfanView wordt geopend,
een geluidsfragment, dat bijvoorbeeld met Billy wordt geopend,
een videoclip, die dan bijvoorbeeld met VLC wordt geopend,
een ander html-bestand

Hyperlinks kunnen aangeklikt worden in tekst, maar ook door op afbeeldingen of icoontjes te klikken.
Hyperlinks naar video's worden meestal afgespeeld door de ingebouwde videoplayer van de browser, in een nieuw tabblad of venster.
Hyperlinks werken in dit "aanmaak"-programma (KompoZer) niet onmiddellijk. Je kan ze openen in een nieuw tabblad.
Een eenvoudige cursus, (eerder gericht op het maken van een website) is bvb verschenen in het tijdschrift Clickx (2008).
Er bestaan "help"-websites: www.kompozerwebsite.be, www.kompozer.nl
(off-line versie: kompozerwebsite.be en kompozerwebsite.nl)
Documentatie in verband met de broncode: http://www.handleidinghtml.nl/html/

Voorbeeld van een invuloefening

Invulvelden kunnen doorgestuurd worden naar databases, waar ze worden verwerkt. Maar daarbij moet de databaseserver over een CGI of PHP-script beschikken, dat specifiek voor deze gegevens wordt opgesteld. Dit is omslachtig en ingewikkeld.
Een eenvoudige, (maar verre van ideale oplossing), is een mail-functie te gebruiken: de ingevulde data wordt verstuurd naar een e-mail-adres. In dit voorbeeld is het mailadres niet vooringesteld, je kan dus zelf een mailadres ingeven.

Tekstveld
Keuzerondjes	Mozilla Firefox Microsoft Internet Explorer Opera Andere browser
Twee veldjes naast mekaar
E-mail adres
Paswoord
Checkboxes	appels peren bananen
Bestand meesturen
Uitschuifkeuzelijst
Meervoudige Keuzelijst
Tekstvak, commentaarvak

Weergeven van html-presentatie

Wanneer er een volledige website gemaakt wordt, is het allereerste bestand waarvan je opstart "index.html". Van daaruit lopen de links naar de andere html-bestanden.
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.

Ref	20120300_ADP	rev 20160713
File	cmp-html	html
ID	computer html schrijven en gebruiken	howto