Example HTML

HTML

Bron: Wikipedia

'[ HTML ] is een op SGML
gebaseerde opmaaktaal
'

Zie verder »

Example HTML

HTML

Bron: Handleiding HTML

'HTML (...) is de taal
waarmee je webpagina's maakt.
'

Zie verder »

Example HTML4

HTML4

Bron: Geeksforgeeks

'Difference between Transitional
and Strict doctype
'

Zie verder »


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 (rendering 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 in HTML geplaatst 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.
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.
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 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.


Inleiding tot de weergave-voorbeelden
Hieronder vind je voorbeelden met HTML en aanverwante weergavetalen zoals SHTML, WML en SVG.


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


HTML5 Skeleton & Scrollbar

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

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


Voorbeelden met Boilerplates

Boilerplate Templates

HTML5 Boilerplate


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 (met voorbeelden in code)

Introductie tot Markdown


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.


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


Inleiding tot voorbeelden met hulpmiddelen bij beperkingen
...


Voorbeelden met hulpmiddelen bij beperkingen

SLECHTZIENDEN - info en hulpmiddelen

DYSLECTICI - info en hulpmiddelen

Introductie tot Accessibility


Inleiding tot de voorbeelden met overige items
...


Voorbeelden met overige items

Introductie tot RSS feeds

Introduction to text-only-Browsers


Example HTML4

HTML4

Bron: w3resource

'DOCTYPE HTML 4.01 tutorial
three types of DOCTYPES
'

Zie verder »

Example HTML5

HTML5

Bron: Wikipedia

'HTML5 is een W3C-standaard
(recommendation) sinds oktober 2014.'

Zie verder »

Example HTML6

HTML

Bron: Invensis

'HTML6 provides XML-type namespaces
and allows using only the required tags'

Zie verder »