HTML5

Markup Language für Webseiten

PROJEKT1/EDV/HTML5/c_html5.html V 0.3 23.02.2026 8:00

Inhaltsverzeichnis

Dateiliste (php-Datei; nur im Server-Modus)

1. Einleitung
2. Editor Atom
3. Tutorials und Referenzen
4. HTML5 und Scripte einbinden (.svg-Dateien)
5. https:// statt http://
6. mathematische Formeln

 
1.

Einleitung

Information, die im Internet vorhanden ist, wird in den meisten Fällen durch ein Progammm (App) auf dem Bildschirm (Screen) dargestellt, das Browser genannt wird.

ind es Länderkennungen wie .de für Deutschland, .eu für Europa oder .com für komkerzielle Quellen.

Der Browser entschlüsselt die Daten gemäß dem vorangestellten Protokolls. Der Text mit einer Script-Srache übermittelt. Zur Zeit 1.1.2026 ist das HTML5. Erkenntlich ist der Typ der Daten an der Endung der Information nach einem Punk (.txt für Text; .css für Darstellungsart; .gif für Rasterbild; .svg für Vektorbild un v. a.m.)

Die Umsetzung der Daten geschieht individuell, meist von Hand mit einem Editor. Wenn es sich um Informationen aus Datenbanken handelt, die sich auf einem Computer des Absenders (Server) handelt, trägt die Datei eine entsprechende Endung, häufig .php. In diesem Fall wandelt der Server die Daten um in HTML-Code und sendet sie dann an den Computer (Client) des Nutzers.

 

  
2.

Editor

Atom

Der Editor Atom (nur englisch!) ist kostenlos und unterstützt HTML5 mit CSS. für WINDOWS und APPLE (mit Anleitung für die Installation) geeignet. Atom kann aber keine Live-Vorschau zeigen. Dazu benötigt man einen beliebigen Browser.

Phlow: Atom Texteditor für HTML & CSS (Eine Einführung)

Um HTML5-Seiten anzuzeigen, zieht man einfach eine Seite oder einen Ordner in den Editor. Die Menuleiste erhält man mit [ALT]. Die einstellungen über files->settings

w3Schools

Der Editor von W3Schools ermöglicht HTML, CSS und JAVA-Code zu schreiben und dabei gleichzeitig eine Live-Vorschau zu erhalten.

Außerdem unterstützt er das Lernen und Arbeiten mit JAVASCRIPT, PYTHON, MYSQL, SQL, JQuery, PHP, C, C++, C#, Excel, XML und vieles andere mehr. Ein Besuch lohnt sich!

 

  
3. Tutorial und Referenzen

https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F

Hier findet man Dokumentation und Hilfestellung für HTML (Markup-Sprache, CSS (Layoutbescheibung), Javascript (Finktionsschripte)und SVG (Bildformat). Es gibt Tutorials und einzelne Scriptbeispiele.

 

4. HTML5 und Scripte einbinden (.svg-Dateien)

[copilot]: Wie bindet man Script-code in HTML5-Text ein, so dass Zeichen und Zeilenumbrüche wie im Originalscript erhalten bleiben?

Sichtbarer Script-Code (z.B. als Text anzeigen)
Standard: <pre><code class="codeblock" > scriptcode </code> </pre>

Eigenschaften:

  • Zeilenumbrüche bleiben erhalten
  • Leerzeichen bleiben erhalten
  • Sonderzeichen werden nicht interpretiert
  • Ideal für Dokumentation, Tutorials, technische Beschreibungen

[copilot]: Um ein SVG-‑Script (also JavaScript, das ein SVG manipuliert) in eine HTML‑-Seite einzubinden, hast du im Grunde drei saubere Möglichkeiten. Welche man wählt, hängt davon ab, ob das SVG inline im HTML5 steht oder als externe Datei geladen wird.

Variante A: Script unverändert, aber nur lesbar.
Beispiel:

function hallo() {
    console.log("Hallo Welt");
}

Variante B: Script wird ausgeführt und ist nur im Quelltext unverändert lesbar.

hier steht im HTML-Quellcode der code-Text.

Um den Text nicht auszuführen, aber lesbar zu machen, müssen im Text < > und & durch &lt; &gt; und &amp; ersezt werden.

Beispiel:

< pre > < code > &lt; script &gt; function test() { alert("Hallo"); } &lt; /script &gt; </ code > </ pre>

Wenn du Script‑Code sichtbar anzeigen willst (z. B. Dokumentation, Tutorials, technische Beschreibungen), und jede Zeile exakt wie im Original erhalten bleiben soll, dann:

1. Code in HTML einbetten

Du musst nur die HTML‑kritischen Zeichen ersetzen:

  • < → &lt;
  • > → &gt;
  • & → &amp;

Dann in <pre><code> einbetten und in diers Schreibweise in den HTML-Quellcode einbinden:

<pre><code>
&lt;script&gt;
function test() {
console.log("Hallo Welt");
}
&lt;/script&gt;
</code></pre>

Alternative: Automatisches Escaping per JavaScript (für große Scripts)

Wenn du große Scriptdateien einbetten willst, ohne sie manuell zu escapen, kannst du sie dynamisch laden:

<pre id="codebox"></pre>

<script>

	      fetch("meinScript.js")

  .then(r => r.text())

  .then(txt => {

  document.getElementById("codebox").textContent = txt;

  });

</script>

1. Inline-SVG + Script im HTML
Das ist die flexibelste und modernste Methode.

html
<!DOCTYPE html>
<html>
<body>

<svg id="meinSVG" width="200" height="200">
<circle id="kreis" cx="100" cy="100" r="50" fill="red"></circle>
</svg>

<script>
const kreis = document.getElementById("kreis");
kreis.addEventListener("click", () => {
kreis.setAttribute("fill", "blue");
});
</script>

</body>
</html>
Vorteil:
Du kannst direkt mit document.getElementById() auf SVG‑Elemente zugreifen.

2. Externes SVG + Script im HTML (per <object> oder <embed>)
Wenn dein SVG eine separate Datei ist, z. B. bild.svg, und du willst es per Script manipulieren:

html
<object id="svgObj" type="image/svg+xml" data="bild.svg"></object>

<script>
const obj = document.getElementById("svgObj");
obj.addEventListener("load", () => {
const svgDoc = obj.contentDocument;
const kreis = svgDoc.getElementById("kreis");
kreis.setAttribute("fill", "green");
});
</script>
Wichtig:
Manipulation geht erst, wenn das SVG vollständig geladen ist → deshalb das load‑Event.

Hier ist ein grüner Kreis.

3. Script direkt im SVG (nur wenn SVG als Datei geladen wird)
SVG unterstützt <script> intern:

svg
<svg xmlns="http://www.w3.org/2000/svg">
<circle id="kreis" cx="50" cy="50" r="40" fill="red" />

<script type="application/ecmascript"><![CDATA[
const kreis = document.getElementById("kreis");
kreis.addEventListener("click", () => {
kreis.setAttribute("fill", "yellow");
});
]]></script>
</svg>
Hinweis:
Viele Browser verlangen CDATA, damit das Script nicht als SVG‑Markup interpretiert wird.

Welche Methode ist für dich am besten?
Da du viel mit automatisierten SVG‑Exports und technischen Zeichnungen arbeitest, ist meist Variante 1 (Inline‑SVG) am saubersten:

volle DOM‑Kontrolle

keine Cross‑Origin‑Probleme

ideal für dynamische Workflows

Wenn du willst, zeige ich dir auch, wie du ein SVG‑Script modular auslagerst, z. B. in script.js, und sauber bindest.
5.

https:// statt http://

Was muss man mit seiner Website machen,
damit sie als https:// statt http:// übertragen wird?

Damit eine Website über https:// statt http:// ausgeliefert wird, braucht sie drei Dinge: ein SSL/TLS‑Zertifikat , eine korrekte Server‑Konfiguration und eine Weiterleitung von HTTP auf HTTPS . Die Schritte unterscheiden sich je nachdem, ob du einen eigenen Server betreibst oder einen Webhoster nutzt, aber die Grundprinzipien sind immer gleich.

Warum HTTPS überhaupt nötig ist

HTTPS sorgt dafür, dass:

  • die Verbindung verschlüsselt ist,

  • niemand Daten mitlesen oder manipulieren kann,

  • Browser die Seite nicht als „unsicher“ markieren,

  • Suchmaschinen die Seite besser bewerten.

🧩Die drei Bausteine für HTTPS

1) SSL/TLS‑Zertifikat installieren

Ein Zertifikat bestätigt, dass deine Domain echt ist. Es gibt drei Wege:

  • Let's Encrypt (kostenlos) – heute Standard bei fast allen Hostern

  • Zertifikat vom Hoster – oft 1‑Klick‑Installation

  • Manuell kaufen – nur nötig für Spezialfälle

Bei den meisten Hostern (Strato, IONOS, All-Inkl, Netcup usw.) reicht:

  • Domain auswählen

  • „SSL aktivieren“

  • „Let's Encrypt“ einschalten

Der Hoster erledigt den Rest.

2) Webserver für HTTPS konfigurieren

Je nach Servertyp:

Apache

In der Datei 000-default.conf oder deiner VirtualHost‑Datei: 

<Apache:> 
<VirtualHost *:443>
    ServerName deine-domain.de
    DocumentRoot /var/www/html
    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/deine-domain.de/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/deine-domain.de/privkey.pem
</VirtualHost>

Nginx

In /etc/nginx/sites-available/deine-domain :

nginx server { listen 443 ssl; server_name deine-domain.de; ssl_certificate /etc/letsencrypt/live/deine-domain.de/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/deine-domain.de/privkey.pem; root /var/www/html; }

3) Automatische Weiterleitung von http:// auf https://

Damit Besucher nicht versehentlich die unverschlüsselte Version nutzen.

Apache (.htaccess)

apache RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https:// %{HTTP_HOST} %{REQUEST_URI} [L,R=301]

Nginx

nginx server { listen 80 ; server_name deine-domain.de; return 301 https:// $host $request_uri ; }

�� Was du bei einem Webhoster tun musst (Kurzfassung)

Wenn du keinen eigenen Server betreibst:

  1. Im Kundenmenü SSL aktivieren

  2. Let's Encrypt einschalten

  3. HTTPS erzwingen (oft ein Schalter wie „SSL erzwingen“ oder „HTTPS Redirect“)

  4. Fertig – der Hoster kümmert sich um Zertifikat & Erneuerung

Testen, ob alles funktioniert

Nach der Einrichtung:

  • https://deine-domain.de im Browser öffnen

  • Schloss‑Symbol prüfen

  • https://www.ssllabs.com/ssltest/ nutzen, um die Konfiguration zu testen

Wenn du mir sagst, bei welchem Anbieter oder Servertyp deine Website liegt (z. B. Strato, IONOS, Apache, Nginx, Raspberry Pi, eigener Root‑Server), kann ich dir die exakten Schritte für deine Umgebung geben.

 

 
6. mathematische Formeln

MathJax, Java-basiert;

wird von https://leifiphysik.de benutzt.

KaTeX-Kommandos, Java basiert;

wird von RemNote benutzt.

 
  was muss man mit seiner Website machen, damit sie als https:// statt http:// übertragen wird

Damit eine Website über https:// statt http:// ausgeliefert wird, braucht sie drei Dinge: ein SSL/TLS‑Zertifikat , eine korrekte Server‑Konfiguration und eine Weiterleitung von HTTP auf HTTPS . Die Schritte unterscheiden sich je nachdem, ob du einen eigenen Server betreibst oder einen Webhoster nutzt, aber die Grundprinzipien sind immer gleich.

🔐 Warum HTTPS überhaupt nötig ist

HTTPS sorgt dafür, dass:

  • die Verbindung verschlüsselt ist,

  • niemand Daten mitlesen oder manipulieren kann,

  • Browser die Seite nicht als „unsicher“ markieren,

  • Suchmaschinen die Seite besser bewerten.

🧩 Die drei Bausteine für HTTPS

1) SSL/TLS‑Zertifikat installieren

Ein Zertifikat bestätigt, dass deine Domain echt ist. Es gibt drei Wege:

  • Let's Encrypt (kostenlos) – heute Standard bei fast allen Hostern

  • Zertifikat vom Hoster – oft 1‑Klick‑Installation

  • Manuell kaufen – nur nötig für Spezialfälle

Bei den meisten Hostern (Strato, IONOS, All-Inkl, Netcup usw.) reicht:

  • Domain auswählen

  • „SSL aktivieren“

  • „Let's Encrypt“ einschalten

Der Hoster erledigt den Rest.

2) Webserver für HTTPS konfigurieren

Je nach Servertyp:

Apache

In der Datei 000-default.conf oder deiner VirtualHost‑Datei: 

<Apache:> 
<VirtualHost *:443>
    ServerName deine-domain.de
    DocumentRoot /var/www/html
    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/deine-domain.de/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/deine-domain.de/privkey.pem
</VirtualHost>

 

Wenn du keinen eigenen Server betreibst:

  1. Im Kundenmenü SSL aktivieren

  2. Let's Encrypt einschalten

  3. HTTPS erzwingen (oft ein Schalter wie „SSL erzwingen“ oder „HTTPS Redirect“)

  4. Fertig – der Hoster kümmert sich um Zertifikat & Erneuerung

🧪 Testen, ob alles funktioniert

Nach der Einrichtung:

  • https://deine-domain.de im Browser öffnen

  • Schl

 

Literatur

Autor:

Klaus-G. Häusler; haeusler[at]muenster[dot]de
Quelle:

Copyright 2005-2015 HMTC Halbmikrotechnik Chemie GmbH; www.halbmikrotechnik.de