HTML (HyperText Markup Language) ist eine Auszeichnungprache zur Strukturierung von Webseiten. Mit HTML werden Inhalte wie Bilder, Texte oder Tabellen strukturiert. HTML ist die “Sprache” oder das Format, in der alle Internetseiten geschrieben werden.
Offenlegungserklärung: Um Schulhomepage.de kostenlos anbieten zu können, verwende ich Affiliate-Links, die mit * gekennzeichnet sind. Falls Sie darüber eines der vorgestellten Produkte kaufen, erhalte ich eine Provision. Der Preis, den Sie zahlen, verändert sich dadurch nicht. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen.
HTML ist keine Programmiersprache, da HTML nicht mit Logik umgehen kann. In einer Programmiersprache werden Bedingungen miteinander verknüpft. Beispiel: Wenn Fall A, dann multipliziere mit 100. Wenn Fall B, dann multipliziere mit 200. Für HTML benötigen Sie keine Programmierkenntnisse.
In HTML können Sie keine Bedingungen setzen. Stattdessen strukturieren Sie Inhalte, indem Sie zum Beispiel Inhalte in eine Reihenfolge bringen, sie verschachteln oder ihnen eine Aufgabe zuordnen. HTML ist deshalb eine Auszeichnungssprache. Diese wird für Webdokumente verwendet.
Das World Wide Web Consortium (W3C) ist eine internationale Gemeinschaft, die Sprachstandards entwickelt, um das langfristige Wachstum des Internets zu gewährleisten. Das World Wide Web Consortium (W3C) setzt die Sprachstandards für das aktuelle HTML 5.2. So erhalten Browserhersteller beispielsweise Vorgaben für Dokumenttypdefinition (DTD), Texthervorhebung, Zeilenumbrüche oder bessere Lesbarkeit des Codes.
Das Grundgerüst einer HTML-Seite sieht so aus:
school website
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Seitentitel</title>
</head>
<body>
<h1>Erste Überschrift</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>
Erläuterung des HTML-Grundgerüsts:
Es gibt keine HTML-Befehle zur “Programmierung” einer Internetseite. Die korrekte Bezeichnung ist HTML-Elemente, die auch Tags genannt werden. HTML-Seiten werden nicht "programmiert", sonder Inhalte gekennzeichnet.
Neben den Block-Level-Elementen wie p oder div, die für die Strukturierung von Inhalten verwendet werden, spielen auch Inline-Elemente eine wichtige Rolle. Sie dienen dazu, Teile des Textes innerhalb von Block-Level-Elementen zu formatieren, ohne den Fluss des Inhalts zu unterbrechen. Beispiele für Inline-Elemente sind hervorgehobener Text, fett und kursiv gedruckte Schriften sowie Links. Beispiel:
<p>Sie hat <span class="blue">blaue</span> Augen.</p>In diesem Beispiel wird innerhalb des Block-Level-Elements p mit dem Inline-Element "span" dem Wort "blau" mit der Klasse "blue" eine Formatierung zugewiesen.
SELFHTML gibt eine strukturierte Übersicht über alle HTML-Elemente (Tags und "Befehle"). Die Übersicht der HTML-Elemente listet alle HTML5-Tags auf. Per Klick auf ein Element erhalten Sie eine detaillierte Erläuterung des Elements sowie Anwendungs-Beispiele. Veraltete ("obsolete") Tags werden durchgestrichen angezeigt.
Jedes HTML-Element (Tag) besteht aus einem öffnenden Tag und einem schließenden Tag. Beispiel für das Tag p:
<p>Dies ist ein Absatz.</p>Die Bedeutung des HTML-Codes p ist also diese: Mit <p> kennzeichnet den Anfang eines Absatzes und </p> das Ende des Absatzes.
HTML bietet auch eine Reihe von Sonderzeichen wie beispielsweise “&” für das Und-Zeichen: &. Eine umfassende Sonderzeichentabelle in Kategorien finden Sie bei Vioma.
So erstellen Sie einen HTML Download-Link:
<a href="/images/bild.jpg">Download der Datei bild.jpg</a>Das Download-Attribut gibt an, unter welchem Namen die Download-Datei gespeichert wird, wenn ein Benutzer auf den Hyperlink klickt. In diesem Beispiel wird das Bild "mond.jpg" heruntergeladen und als sonne.jpg gespeichert:
<a href="/images/mond.jpg" download="sonne.jpg">Download der Datei mond.jpg, die als sonne.jpg gespeichert wird</a>
HTML ist keine Software, die Sie downloaden können. Sie können jedoch einen HTML Editor kostenlos downloaden. Mit diesem können Sie Webseiten in HTML erstellen und diese mit einem Browser anzeigen.
"HTML Code" hat zwei Bedeutungen:
HTML Code meint den Quellcode einer Webseite mit den in der Auszeichnungssprache HTML geschriebenen Elementen, den Tags.
HTML Code Beispiel:
<html>
<head>
<title>HTML Code Beispiel</title>
</head>
<body>
<h1>HTML Code Beispiel</h1>
<p><a href="https://www.schulhomepage.de/">www.schulhomepage.de</a> gibt Tipps
rund um Schulwebsite und Digitalisierung von Schule</p>
</body>
</html>
Das HTML-Grundgerüst zeigt ein weiteres Beispiel für einen HTML Code.
Das Code-Element zeichnet einen Teil eines Fließtextes als Quelltext aus:
<pre>
<code>
Hier steht der Code.
</code>
</pre>
Code, der zwischen den Tags <pre><code> und </code></pre> steht, wird in HTML nicht ausgeführt, sondern als Text angezeigt.
Im HTML-Format lassen sich Webseiten strukturieren und formatieren. HTML ist somit das Format, in denen Webseiten als Datei gespeichert werden. Dateien im HTML-Format haben die Endung .html oder .htm.
HTML-Attribute hinterlegen weitere Informationen über Elemente in einem HTML-Tag. Sie bestehen aus einem Namen und einem Wert.
Beispiele:
<p class="rot">Die Schrift erhält die Formatieung der Klasse "rot"</p>Der Text innerhalb des HTML-Elements p erhält mit dem Attribut class="rot" die Formatierung der Klasse "rot". Der Name des Attributs ist hierbei "class", der Wert ist "rot".
<h2 id="Überschrift-4">Uberschrift 4</h2>Das HTML-Element h2 erhält mit dem Attribut id="Überschrift-4" eine eindeutige Identifizierung. Der Name des Attributs ist hierbei "id", der Wert ist "Überschrift-4".
HTML entstand in den 1990er Jahren. Damals war das Internet noch ganz am Anfang, so dass es kaum Wünsche zur Formatierung gab. Es reichte, wenn Inhalte strukturiert wurden. Eine einfache HTML-Webseite strukturierte die Inhalte beispielsweise so:
<h1>Dies ist die erste Überschrift</h1>
<p><img src="/bild1.jpg" alt="Jetzt folgt ein Absatz mit dem LINKS ausgerichteten Bild1"></p>
<p>Nun folgt ein Absatz mit Text.</p>Im Laufe der Weiterentwicklung von Websites entstanden immer mehr Wünsche zur Formatierung von Inhalten. Alles sollte schöner aussehen.
Beispielsweise sollte das Bild nicht mehr links auf der Webseite angezeigt werden, sondern mittig. Hierfür würde das Tag <center> neu zu HTML hinzugefügt. Und die Schriftart sollte ein Webdesigner auch festlegen können. Hierfür wurde das Tag <font> eingeführt.
Der obige Code konnte nun beispielsweise so abgeändert werden:
<h1>Dies ist die erste Überschrift</h1>
<center><p><img src="/bild1.jpg" alt="Jetzt folgt ein Absatz mit dem MITTIG ausgerichteten Bild1"></p></center>
<p><font face="Arial">Nun folgt ein Absatz mit Text in der SCHRIFTART ARIAL.</font></p>HTML war ursprünglich jedoch nur zur Strukturierung von Inhalten und nicht zur Formatierung ausgelegt. Da es immer mehr Formatierungswünsche gab, entschied sich das W3C, zur Formatierung von Inhalten CSS einzuführen. CSS ist die Abkürzung für Cascading StyleSheets, deutsch: "kaskadierende Stylesheets", also "verschachtelte Stilangaben". In einer CSS-Datei werden seitdem alle Formatierungen wie beispielsweise Farbe oder Schriftart und Schriftgröße gespeichert. Heute wird strikt zwischen HTML 5.2 und CSS 3 unterschieden.
Diese Trennung zwischen HTML und CSS hat mehrere Vorteile:
Mit JavaScript erweitern Sie eine Webseite um dynamische Elemente. Mit JavaScript können Besucher mit der Webseite interagieren, was mit statischem HTML nicht möglich ist. JavaScript ist sogenanntes "dynamisches HTML", mit dem zum Beispiel Navigationsmenüs verändert, Formulare überprüft oder Bildergalerien gestartet werden können. Hierfür wird in HTML ein Skript geladen, das dann die dynamischen Elemente ausführt.
Bei der Entwicklung von HTML-Webseiten wird ein einfacher Quelltext-Editor oder besser ein spezieller WYSIWYG HTML-Editor verwendet. Der HTML-Editor unterstützt den Webentwickler zum Beispiel durch automatische Code-Vervollständigung, farbliche Texthervorhebungen von Tags oder eine Live-Vorschau der Webseite mit WYSIWYG. Der beste HTML-Editor ist Visual Studio Code.
Der HTML-Validator des W3C überprüft den geschriebenen Code der Webanwendungen auf Fehler sowie Einhaltung der gültigen Sprachstandards und Dokumenttypdefinition. Findet er einen Fehler, weist er genau auf die Code-Zeile hin. Ebenso macht er Vorschläge zur Fehlerkorrektur und zur Einhaltung der Sprachstandards.
HTML ist sehr einfach zu lernen. Denn HTML ist eine Auszeichnungssprache und keine Programmiersprache. Die Sprache strukturiert lediglich Inhalte und es gibt keine komplexen Bedingungen.
Im Internet gibt es sehr viele hervorragende und kostenlose HTML-Tutorials. Dies sind die besten Anleitungen:
Das Buch "“Einstieg in HTML und CSS: Webseiten erstellen mit HTML und CSS – ganz ohne Vorwissen” bietet Ihnen eine exzellente Einführung in die professionelle Gestaltung von Webseiten mit HTML und CSS. Der erfahrene IT-Dozent Peter Müller erklärt Ihnen einprägsam und mit Humor, was Sie bei der modernen Webgestaltung mit HTML und CSS beachten müssen: von den grundlegenden Prinzipien bis hin zu den neuesten Entwicklungen. Immer kompetent, klar und verständlich.
Die anschaulichen Beispiele aus der Praxis können Sie leicht für eigene Projekte anwenden. Sie lernen sehr schnell, wie Sie mit HTML Ihre erste Internetseite erstellen. Mit vielen Abbildungen, die Ihnen das Verständnis der wichtigsten Webkonzepte leicht machen. Der komplette Beispielcode steht für Sie zum Lernen und Üben bereit. Perfekt für Einsteiger, die professionelles Webdesign lernen möchten. Meine Empfehlung!
Microsoft bietet kostenlos das Tutorial "“Erstellen einer einfachen Website mit HTML, CSS und Javascript” an. Dieses hervorragende Einsteiger-Tutorial zeigt Ihnen in 7 Schritten, wie Sie ganz einfach eine eigene Website in HTML erstellen können. In dieser HTML-Anleitung lernen Sie nicht nur die Grundlagen von HTML und CSS, sondern auch das Arbeiten mit dem besten kostenlosen HTML-Editor Visual Studio Code. Toll!
HTML ist die Grundlage des Internets und der Sprachstandard für jede Webseite. HTML ist sehr leicht zu lernen und es macht Spaß, Webseiten mit HTML5 zu entwickeln. Probieren Sie es aus!
Weitere Tipps zu HTML:
Was kann man mit HTML machen?
Mit der HyperText Markup Language (HTML) kann man eine Webseite mit Inhalten füllen und strukturieren. Man kann Inhalte wie Texte, Bilder und Tabellen zeigen und ihre Reihenfolge festlegen. Mit dem HTML-Element <img> wird zum Beispiel ein Bild angezeigt. Ebenso bestimmt man mit HTML, wie Inhalte untereinander verschachtelt sind und welche Aufgabe sie haben.
Was sind HTML-Tags?
Ein HTML-Tag ist ein Code-Element der Auszeichnungssprache HTML. Jedes Tag besteht aus einem öffnenden Tag und einem schließenden Tag. Beispiel: <p>Dies ist ein Absatz.</p>. Das HTML-Tag <p> weist dem Satz “Dies ist ein Absatz.” die Funktion “Absatz” zu.
Ist HTML eine Programmiersprache?
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. HTML nutzt keine Bedingungen beispielsweise für Fall A und Fall B. Stattdessen weist HTML Inhalten eine Funktion zu. Das Element p beispielsweise weist die Funktion “Absatz” zu.
Mit HTML können Sie deshalb keine Website programmieren, sondern Sie strukturieren die Inhalte der Webseite.
Was ist eine HTML-Datei?
Eine HTML-Datei ist eine Textdatei mit der Dateiendung .html für Webseiten. In der HTML-Datei wird HyperText Markup Language (HTML) zur Anzeige von Inhalten und Strukturierung gespeichert. Beispielsweise zeigt das HTML-Tag <p></p> einen Absatz und <img> ein Bild. Eine HTML-Datei können Sie mit einem HTML-Editor wie Notepad++ öffnen und bearbeiten.
Wie kann ich den HTML-Code anzeigen?
Klicken Sie mit der rechten Maustaste in einem freien Bereich auf der Webseite und dann auf "Seitenquelltext anzeigen". Anschließend sehen Sie den HTML-Code der Webseite.
Was heißt HTML?
HTML ist die Abkürzung für den Begriff Hypertext Markup Language, auf Deutsch "Hypertext-Auszeichnungssprache".
Was ist der Unterschied zwischen einer Webseite und einer Website?
Eine Webseite (auch "Web Page" genannt) ist eine einzelne Seite. Eine Website ist die Gesamtheit aller Seiten, die zu einer Domain wie schulhomepage.de gehören. Beispiel: schulhomepage.de/webdesign/html und schulhomepage.de/webdesign/html-link sind einzelne Webseiten. Sie gehören beide zur Website schulhomepage.de.
