Opmerkingen

---

Op deze pagina worden alle versies en typen van de standaard weergavetaal HTML voor webpagina's besproken.
Daarnaast komen verwante weergavewebtalen zoals SVG en MathML aan bod.
Waar HTML een afgeleide is van SGML, zijn SVG en MathML op XML (database-weergavetaal) gebaseerd.

HTML (HyperText Markup Language) is de algemene benaming voor de webcodetaal die de content (tekst en afbeeldingen) op het scherm weergeeft (parsing = intepreteren van de code & rendering = weergeven van de code via de browser) en structureert (tekst in alinea's, regels, tabellen, kolommen, plaatsing van afbeeldingen).

Naast het standaard HTML bestaan er ook andere soorten HTML zoals DHTML en SHTML.
SVG is een soort van grafische variant van HTML die gebruikmaakt van vectortechniek. MathML is de weergavecode voor wiskundige formules.

Door de verwantschap en het modulaire karakter van al deze webtalen kan een SVG-, XML- en MathML-object moeiteloos in HTML geïntegreerd worden.

HTML5 is de laatste en huidige officiële versie van HTML. De versie 4.01 was diens directe voorganger.
De versies 2 en 3 zijn dermate beperkt in hun weergave- en opmaaktmogelijkheden dat ze feitelijk onbruikbaar zijn. Kenmerkend voor deze oude versies is dat HTML2 nauwelijks opmaak ('italic' en 'bold' maar 'underlined' pas in versie 3) kent en HTML3 nog zeer beperkt ('font color', 'font size' en 'align=left' etc.).

HTML4.01 is weliswaar verouderd maar is nog bruikbaar voor eenvoudige, statische webpagina's. Je zou zelfs nog voor HTML4 kunnen kiezen als je perse ook mensen wilt bereiken die een verouderd besturingssysteem zoals WinXP gebruiken.

HTML5 wordt ook wel als HTML omschreven maar ik houd 'HTML5' aan, omdat ik niet uitsluit dat versie 5 ooit een keer een opvolger krijgt in een versie 6.
Deze mogelijke toekomstige versie noem ik hier 'HTML6' waarbij ik benadruk dat er (nog) geen HTML6 bestaat en alleen als naam voor voorstellen voor vernieuwing en experimenten wordt ingezet.

Voorganger HTML4 kende 3 soorten Doctypes: 'Transitional', 'Strict' en 'Frameset'.
Om met de laatste te beginnen is dat het soort webpagina dat met zogenaamde frames werkt. In plaats van het body-element waarbinnen de content staat, staan hier één of meer frameset-elementen in de HTML-pagina. Nadeel is dat de broncode van de content in de frames niet zichtbaar is voor een zoekmachine.
De pagina in 'Transitional' laat afgekeurde attributen en elementen zoals 'font' en 'center' toe die in een pagina met 'Strict' niet worden gevalideerd.

Opmerking. De getoonde voorbeelden - zie hieronder - geven nogal eens beschrijvingen van jaren geleden: de periode 2011-2016.
De informatie kan daardoor soms wat gedateerd zijn. In één van de voorbeeldpagina's is HTML4.01 nog de standaard, in een tijd dat HTML5 nog niet officieel tot standaard was uitgeroepen. HTML5 is de W3C-standaard sinds oktober 2014.
De 'gedateerde' info is in zoverre interessant dat die de ontwikkelingen van de laatste tien jaar mooi aantoont.

Naast de weergavetalen (HTML enzovoorts) is er ook aandacht voor de opmaaktalen zoals Cascading Stylesheets (CSS), functieuitvoerende talen zoals JavaScript (JS) en PHP. Deze talen zijn onontbeerlijk voor het goed en efficiënt laten functioneren van een moderne webpagina.

---

Inleiding tot de weergave-, opmaak-, functieuitvoerende talen en overige onderwerpen
Hieronder vind je voorbeelden met HTML en aanverwante weergavetalen zoals SHTML, WML en SVG, met aansluitend info over opmaak (CSS), functies (JS, PHP), hulpmiddelen (vergroten toegankelijkheid) en overige items.

---

1. weergave
Voorbeelden met varianten en series van HTML en de grondslag ervan

Introductie tot SGML

SGML bron voor (X)HTML & XML

Introductie tot C-HTML

Introductie tot DHTML

Voorbeelden van DHTML

Introductie tot HTML

Introductie tot XHTML

Introductie tot HTML5

Introductie tot XHTML5

- Open hier Introductie tot HTML6.
- Ga voor het gehele overzicht naar HTML: html6.

Introductie tot MHTML

Introductie tot SHTML

Introductie tot WML

Introductie tot XML

Handleiding XML

SVG = 'XML based'

- Open hier Introductie tot SVG.
- Ga voor het gehele overzicht naar HTML: svg.

MathML = 'XML based'

Introductie tot MathML

Voorbeelden van MathML

Bron: JaxoDraw: MathML is the W3c approved, XML based, markup language for mathematics.

Voorbeelden met voorgangers van HTML5

HTML 2.0

HTML 3.2

HTML 4.01 Transitional

HTML 4.01 Strict

Voorbeeld HTML 2.0

Voorbeeld HTML 3.2

Voorbeeld HTML 4.01 Frameset

Voorbeeld HTML 4.01 Transitional

Voorbeeld HTML 4.01 Strict

Voorbeelden met technische kenmerken van HTML5

HTML5 & Natuurlijke Talen

Stripped & (error) Tolerance

HTML5 Elementen Invoegen

HTML5 Lege Elementen

Voorbeeld HTML5-broncode en Engels

Voorbeeld met HTML5-broncode, Engels en Fins

html5_tolerantie_in_notaties_en_weglatingen

Element 'embed' in HTML5

Element 'iframe' in HTML5

Element 'object' in HTML5

Element 'audio' in HTML5

Element 'img' in HTML5

Element 'svg' in HTML5

Element 'video' in HTML5

Element 'mathml' in HTML5

XML in HTML5

HTML Frameworks

- Ga voor het gehele overzicht naar Bootstrap.

- Ga voor het gehele overzicht naar W3.CSS.

- Ga voor het gehele overzicht naar AMP.

Boilerplate voorbeeld + Boilerplate structuur

HTML5 Skeleton voorbeeld
Bron: W3school.com: Using an HTML Skeleton

HTML CMS (Content Management System)

Inleiding. WordPress (WP) is een open-source CMS (gratis te gebruiken Content Management Systeem) dat een integraal geheel van een website en gebruikersinterface vormt.

Andere CMS. Naast WP heb je Joomla en WIX. Het huidige Joomla vind ik erg complex en ondoordringbaar qua techniek. In tegenstelling tot zo'n 10 à 15 jaar geleden. Met WIX heb ik slechts beperkte ervaring opgedaan.
Als ik zou moeten kiezen tussen deze drie opties zou ik WP nemen omdat het best gebruiksvriendelijk is en over veel opties beschikt.

- Ga voor het gehele overzicht naar WordPress.

HTML5 Scrollbar

HTML5 Scrollbar
Bron: W3schools.com: How TO - Custom Scrollbar

Validatie

- Ga voor het gehele overzicht naar Validatie van (X)HTML, SVG, XML.

+

Voorbeelden met validatie, beveiliging en SEO

Validators

Validatie van webpagina's

Beveiliging van HTML-Content

SEO

Voorbeelden met HTML5 elementen

Introductie tot Div-tag

Voorbeelden van Div-tag

Mogelijkheden met Block-elementen

HTML Elementen

HTML DOM = 'Object Model' voor HTML

Handleiding HTML DOM

Bron: W3schools.com: The HTML DOM (Document Object Model)

Editing van webcontent voor HTML

Introductie tot Markdown

Visualiseren met hulp van HTML: structureren/modelleren en brainstormen

Introductie tot Organigrammen / Organogrammen

Introductie tot Mindmaps

---

2. opmaak |
Inleiding tot de opmaak rond websites

Hieronder ga je naar informatie rond CSS (Cascading Style Sheets), de opmaaktaal die organisch nauw verbonden is met HTML, maar ook met XML en SVG.
Naast CSS komt een vijftal opmaaktalen aan bod die in de ontwerpfase van de opmaak respectievelijk als preprocessor, in JS (JavaScript) met CSS-code en als koppel van bijvoorbeeld PHP met CSS functioneren.

Info rond CSS en preprocessor-opmaaktalen

- Open hier Introductie tot CSS.
- Ga voor het gehele overzicht naar HTML: opmaak.

---

3. functies |
Inleiding tot de voorbeelden met JS (JavaScript)
Bij HTML kun je niet buiten Javascript. JS is een taal die binnen HTML uiteenlopende functies kan vervullen. Zo kun je automatisch de huidige datum inladen.
Kenmerkend is dat JS - in tegenstelling tot PHP - zowel 'server side' (op de webserver) als 'client side' (op de computer) functioneert en voor het ophalen van de recente datum de eigen interne klok aanspreekt.
Ook DHTML (zie hierboven) maakt gebruik van JS om zogenaamde 'dynamische' effecten te sorteren.
Het aardige aan JS is dat je de webpagina niet hoeft te herladen om opnieuw de functie uitgevoerd te krijgen. PHP vergt daarentegen wel een reload van de pagina.

W3.JS biedt de interessante optie om externe content via JS te includen in een webpagina. Ik zelf geef de voorkeur aan de includes van PHP. Ik heb de indruk dat PHP stabieler is bij deze functie.
Met Slideshows in W3.JS kun je zowel een reeks afbeeldingen als een opeenvolgende reeks tekst creëren. Als de doorlooptijd bij de afbeeldingen en de teksten synchroon loopt kun je aan elke afbeelding een synchroon lopende tekst koppelen.

Voorbeelden met JS

Introductie tot JavaScript

Voorbeelden van Javascript

Handleiding bij Javascript

Bron: W3schools.com: JavaScript Tutorial

Editor: JavaScript Online Editor

Voorbeelden met W3.JS

Voorbeeld met Includes in W3.JS

Voorbeeld met Slideshows in W3.JS

Bronnen:
W3schools.com: W3.JS HTML Includes
W3schools.com: W3.JS HTML Slideshows

---

Inleiding tot Java Applets
Zo rond 2014 werkten de Java Applets bij mij nog.
Ze worden inmiddels niet meer ondersteund. Java Applets met het element 'applet' zijn in 2017 afgekeurd.

Bronnen:
Wikipedia: Java-applet.
W3schools.com: Java-applets.
W3schools.com: Most browsers no longer support Java Applets and Plug-ins..

---

Inleiding tot de voorbeelden met PHP (Hypertext Preprocessor, eerder Personal Home Page)
Net als bij JS kun je bij PHP allerlei functies in de webpagina laten uitvoeren zoals de recente datum, tijd, laadsnelheid, grootte van een pagina.

PHP verschilt van JS hierin dat PHP alleen het resultaat van de uitvoering van het script toont. Het PHP-script zelf is nooit zichtbaar, in tegenstelling tot het JS-script.
Waar JS bijvoorbeeld een lopende klok laat werken zonder dat de pagina telkens opnieuw hoeft te worden geladen, is dat in PHP niet mogelijk. Het resultaat van een PHP-script is altijd de directe uitkomst van een reload van de webpagina.

In PHP heb je de include-functie waarbij je externe content (tekst en grafische elementen) op de gewenste plek in de webpagina kunt laden. Dit vind ik een heel nuttige functie van PHP omdat je op die manier de opbouw van een website kunt reguleren. Als je het ge-includede hoofdmenu aanpast geldt die aanpassing direct voor de gehele website.

PHP is ten slotte alleen uitvoerbaar op de webserver. Terwijl JS zowel op de webserver als op de computer werkt.

Voorbeelden met PHP

Introductie tot PHP

Voorbeelden van PHP met extensie .php ipv .html

Handleiding bij PHP

Bron: W3schools.com: PHP Tutorial

---

Inleiding tot ASP (Active Server Pages), ASP.NET (ASP.NET Web Pages) en CGI (Common Gateway Interface)
...
...

ASP (Active Server Pages), ASP.NET (ASP.NET Web Pages) en CGI (Common Gateway Interface)

Introductie tot ASP

Introductie tot ASP.NET

Introductie tot CGI

Bronnen:
W3schools.com: ASP and ASP.NET Tutorials
Wikipedia: Common Gateway Interface

---

4. hulpmiddelen |
Inleiding tot voorbeelden met hulpmiddelen bij beperkingen
...

Voorbeelden met hulpmiddelen bij beperkingen

SLECHTZIENDEN - info en hulpmiddelen

DYSLECTICI - info en hulpmiddelen

Introductie tot Accessibility

---

5. overig |
Inleiding tot de voorbeelden met overige items
...

Voorbeelden met overige items

Introductie tot RSS feeds

Introduction to text-only-Browsers

---