Kennst Du nicht HTML5?
Dieser Beitrag basiert auf HTML 5.
Wie das funktioniert und was genau HTML 5 ist, erkläre ich Dir in diesem Beitrag.
Beginnen wir!
Was ist HTML?
HTML steht für Hypertext Markup Language.
HTML ist eine Auszeichnungssprache und keine Programmiersprache. Sie formatieren Text, Bilder, Überschriften, Videos und Audiodateien auf einer Webseite.
Diese Dateien enthalten das Gerüst, an der sich die Webseitendarstellung orientiert.
Grundlage – Extensible Markup Language (XML)
HTML basiert auf der Extensible Markup Language (XML).
XML nutzt die <> und </> um Objekte zu kennzeichnen. HTML spezifiziert XML und verfeinert die Document Type Definition (DTD). Die DTD schränkt die Möglichkeiten der XML ein, sodass eine einheitliche Syntax hilft, die Elemente korrekt im Browsern darzustellen.
Mehr Farbe – Cascading Style Sheets (CSS)
Entwickler nutzten die Cascading Style Sheets, um systematisch die Farben und Formen in eine HTML-Datei einzubinden. CSS erlauben die Größe, Farbe, Form, Transparenz von fast jedem Objekt einzustellen.
Die Cascading Style Sheets sind eine Erweiterung und ein Muss für jede moderne Webseite auf HTML. Sie nutzte die Selektoren, um Element der HTML ihre Farben und Formen zu geben. CSS ermöglicht den „Maus Zeiger Nicht Klick“-Effekt (Hover) oder den Besuchter-Link-Effekt (Visted).
CSS platziert die Elemente Pixel genau auf dem Bildschirm. Die Stylesheet-Sprache ändert die Darstellung der Webseite, wenn Du statt auf Deinem Desktop (1920px Breite) auf Deinem Smartphone die Webseite besuchst (400px).
Wenn die gleiche Webseite auf Desktop wie Smartphone gut lesbar ist, nennt sich diese Webseite responsive. Dies ist nicht selbstverständlich und muss ein Entwickler durchtesten und anpassen.
Steffn Lippke
Der Motor – JavaScript
Die HTML-Datei ist ein statisches Konstrukt.
Einmal aufgerufen ändert sich die Darstellung nicht. Wenn der Browser einen anderen Inhalt darstellen soll, dann muss der Browser eine neue HTML aufrufen / neu laden. JavaScript ermöglicht das dynamische Nachladen und ändern einer geladenen Seite.
Syntax und Aufbau von HTML
HTML nutzt Tags zu Beschreibung. Tags kapseln Text, um sie anderes darzustellen, …
<b>Das ist ein fett geschriebener Text</b>… oder stellen selbst ein Objekt dar wie ein Bild:
<img src=“image.png“></img>src=“image.png“ ist ein Attribut, welches den Tag näher beschreibt. Jeder Tag Typ hat eigene und / oder geteilte Attribute. Leere Tags kannst Du auch mit der Kurzschreibweise abkürzen:
<img src=“image.png“ />Ein HTML Dokument besteht aus einem Kopfelement mit dem Tab-Title, Script-Dateien, Beschreibungen und Metainformationen und dem sichtbaren Körper, der die Inhalte wie Texte, Bilder, Videos und Audio-Spuren enthält.
<html>
<head>
<title>Tab-Title>
<script src=“myscript.js“ />
<meta name="description" content="Deine erste Webseite">
</head>
<body>
<p>Das ist Text</p>
<img src=“image.png“></img>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>Version Historie
HTML 4 – Der alte Standard
Version 4 wurde 1997 veröffentlicht. Diese Version erlaubt viele alte Tags nicht mehr und parst diese nicht. HTML 4 ist die Grundlage für HTML 5.
HTML 4 ermöglicht alle Stile von Überschriften und Texte zu entfernen und mit Cascading Style Sheets selbst zu ersetzen.
HTML 5 – Der neue Standard
Die 5. Version fügt neue Tags dazu. Diese mussten vorher händisch zusammengebaut werden bzw. waren uneinheitlich bei allen Webseiten
- Neue Blocktypen ähnlich zum DIV:
header, footer, main, section– diese sollten auch das beinhalten, nachdem sie benannt sind. - Formular Element:
datalistfür DropDown Listen und Progress - Multimedia:
audio, video, source, track(Untertitel), sowie einecanvasfür das Zeichen von Objekten (Games, Graphen und alle anderen Formen,svgfür Vektor-basierte Bilder.
- Setzen von Querverweisen
<h1 id=“games“>Games</h1>und mit dem Link meienwebseite.de/text.html#games kann die Person direkt zur Überschrift springen
HTML 6 – Die lebende Zukunft
HTML 6 wird nie veröffentlicht. Die Version 6 ist ein lebender Standard, der von Zeit zu Zeit erweitert wird.
- Kamera Integration: Früher war der Browser abgekapselt von den meisten Sensoren, Konektoren und Features unserer heutigen Geräte. HTML konnte lediglich ein Dokument darstellen. Mit HTML 6 ändert sich das. Du kannst die Kamera nutzen, um eine Videochat App zu entwickeln.
- Single Page Apps auf HTML6 Basis: Ein W3C Geek wollte eine HTML6 App vorschlagen, die dynamische Inhalte austauschen kann, ohne JavaScript zu nutzen. Diese Idee hat sich bis heute nicht durchgesetzt (2021). Riesige JavaScript Dateien stellen bei den meisten Single Page Applications ein Ladeproblem dar. https://github.com/mozumder/HTML6
- Neue Dialoge: Für Dialoge braucht der Entwickler JavaScript und CSS oder muss die hässlichen Browser generierten Dialoge verwenden. Jetzt geht es auch so:
<dialog>
<form method="dialog">
<input type="submit" value="Oh ja" />
<input type="submit" value="Ne" />
</form>
</dialog> Vorverarbeitung und Generierung von HTML
Die meisten Webseiten im Internet sind nicht von Hand geschrieben.
Steffen Lippke
Ein Pre Prozessor übernimmt die Aufgabe. Statt eine HTML für z. B. jede News-Webseite zu schreiben, generiert eine PHP-Scriptdatei ….
- mit HTML-Elementen (p), (h1), (h2), .. und
- den Nachrichtentext aus einer externen Datenbank
… die HTML-Webseiten, die der Nutzer aufrufen kann.
Statisches verändern – HTML 5 Manipulation
HTML ist ein statisches Dokument, aber bietet den Programmiersprachen eine Anwendungsschnittstelle für eine dynamische Nutzung.
- Füge neue Elemente hinzu (z. B. das Nachladen von Links)
- Ändere das Aussehen und die Form von Elementen (z. B. Das Neueinfärben eines Buttons)
- Lösche Elemente (z. B. eine Todo aus einer Todoliste)
Diese Änderungen sind über JavaScript möglich. Um einzelne Objekte in der HTML zu adaptieren, spricht der Entwickler die Elemente über die Document Object Model (DOM) Anwendungsschnittstelle an (API). Die „Adressierung“ kann über verschiedene Wege funktionieren. Entweder selektiert der Entwickler.
- über den Knotentypen p – Abschnitt, div – Boxen, input – Eingabefeld
- über einen der Attribute
<p class=“important“-→ important<input class=“test“→ test - über einen ID
<h1 id=“meineID“→ meinID
Der Entwickler kann mit den Selektoren die HTML Seite gezielt gestalten.
Systematische Lesen von Webseiten – Scraper
Die gleiche Anwendungsschnittstelle verwenden die lesenden Scraper zum Extrahieren von Inhalten.
Scraper sind Programme, die automatisch aus einem Berg aus HTML-Dokumenten relevante Inhalte suchen. Dazu verwenden sie die gleichen Selektoren. Scraper können z. B….
… mit einer Selektion auf h1 alle Überschrift der Webseiten extrahieren und in eine Tabelle schreiben. Suchmaschinen verwenden Scraper, um Inhalte von Webseiten zu verstehen und zu katalogisieren.
HTML FAQ
Ist HTML eine Programmiersprache?
Nein, HTML ist eine Auszeichnungssprache. Sie beschreibt, wie der Browser z. B. den Text darstellen soll. Programmierern kannst Du mit JavaScript oder PHP.
Ist HTML für Anfänger einsteigerfreundlich?
Auf jeden Fall! HTML garantiert schnelle Erfolge und ist ein gefragtes Gut auf den Arbeitsmarkt (Jeder sollte es beherrschen).
