HTML steht für Hypertext Markup Language . Es ist eine spezielle Sprache zum Erstellen von Webseiten. Wenn Sie eine Website besuchen, liest der Computer HTML, um Ihnen die Wörter, Bilder und Links anzuzeigen. Stellen Sie sich HTML als die Bausteine einer Website vor. So wie Sie Legosteine verwenden, um ein Haus oder ein Auto zu bauen, verwenden wir HTML-Tags zum Erstellen einer Webseite.
HTML ist der Code, der einem Computer mitteilt, wie er Text, Bilder, Videos und Links auf einer Webseite darstellen soll. Es ist, als würde man einem Freund Anweisungen geben, der ein Bild für einen malt. HTML verwendet Wörter in spitzen Klammern, sogenannte Tags , um den Anfang und das Ende eines Teils der Webseite zu markieren.
Jede Website, die Sie besuchen, verwendet in irgendeiner Form HTML. Ohne HTML gäbe es keine Webseiten. HTML hilft, Inhalte zu organisieren und teilt dem Computer mit, wie die Seite angezeigt werden soll. Es ist das Allererste, was man in der Webentwicklung lernt, denn es ermöglicht das Funktionieren des Internets!
Ein HTML-Dokument hat eine spezielle Struktur. Es beginnt mit einer Deklaration namens <code><!DOCTYPE html></code>, die dem Computer mitteilt, dass die Seite HTML verwendet. Anschließend wird das Dokument in zwei Hauptteile unterteilt: den Kopf und den Hauptteil.
Ein sehr einfaches HTML-Dokument sieht folgendermaßen aus:
<code><!DOCTYPE html>
<html>
<Kopf>
<title>Meine erste Webseite</title>
</Kopf>
<Text>
<p>Hallo Welt!</p>
</body>
</html> </code>
In diesem Beispiel gibt der Abschnitt <head> den Titel der Seite an und im Abschnitt <body> fügen Sie den Inhalt ein, der auf dem Bildschirm angezeigt wird.
HTML verwendet Tags, um verschiedene Teile einer Webseite zu kennzeichnen. Ein Tag ist ein Wort in spitzen Klammern. Beispielsweise teilt <code><p></code> dem Computer mit, dass ein Absatz folgt. Wenn Sie den Absatz beendet haben, markieren Sie mit dem schließenden Tag <code></p></code> das Ende.
Ein Element in HTML besteht aus einem öffnenden Tag, etwas Inhalt und einem schließenden Tag. Zum Beispiel:
<code><p>Dies ist ein Absatz.</p></code>
Jedes Tag weist den Webbrowser an, wie der Inhalt angezeigt werden soll.
HTML enthält zahlreiche Tags. Zu den häufigsten gehören:
Attribute liefern zusätzliche Informationen zu einem HTML-Element. Sie werden dem öffnenden Tag in den spitzen Klammern hinzugefügt. Die gängigsten Attribute sind src und alt, die zusammen mit dem Image-Tag verwendet werden.
Um beispielsweise ein Bild hinzuzufügen, könnten Sie schreiben:
<code><img src="picture.jpg" alt="Ein schönes Bild"></code>
Dabei teilt src dem Browser mit, wo sich die Bilddatei befindet, und alt liefert eine Beschreibung des Bildes, wenn es nicht angezeigt werden kann.
Das HTML-Dokument ist in zwei Teile aufgeteilt:
Mit Links können Sie von einer Seite zur anderen springen. In HTML erstellen wir Links mit dem <a> -Tag. Das Attribut href im Tag teilt dem Browser das Ziel des Links mit.
Zum Beispiel:
<code><a href="https://www.example.com">Besuchen Sie Example.com</a></code>
Wenn Sie auf diesen Link klicken, öffnet Ihr Browser die Website example.com .
Bilder verschönern eine Webseite und machen sie interessanter. Um ein Bild hinzuzufügen, verwenden Sie den <img> -Tag. Beachten Sie, dass der <img> -Tag kein schließendes Tag hat.
So fügen Sie ein Bild hinzu:
<code><img src="sunflower.jpg" alt="Eine leuchtende Sonnenblume"></code>
Dieser Code weist den Browser an, ein Bild einer Sonnenblume anzuzeigen. Das src -Attribut verweist auf den Bildspeicherort und das alt- Attribut liefert eine Beschreibung des Bildes.
Listen organisieren Informationen in einem übersichtlichen Format. In HTML gibt es zwei Haupttypen von Listen:
Hier ist ein Beispiel für eine ungeordnete Liste:
<code><ul>
<li>Apple</li>
<li>Banane</li>
<li>Kirsche</li>
</ul> </code>
Und hier ist ein Beispiel für eine geordnete Liste:
<code><ol>
<li>Erste</li>
<li>Zweite</li>
<li>Drittens</li>
</ol> </code>
Tabellen dienen der Anzeige von Informationen in Zeilen und Spalten. Sie sind nützlich, wenn Sie Daten vergleichen oder Elemente in einem Raster auflisten müssen.
Hier ist ein einfaches Beispiel einer HTML-Tabelle:
<code><table border="1">
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
<tr>
<td>Alice</td>
<td>10</td>
</tr>
</Tabelle> </Code>
In dieser Tabelle definiert <tr> eine Tabellenzeile, <th> wird für die Tabellenüberschrift (fettgedruckter Text) und <td> für die Tabellendaten (die Zellen) verwendet.
HTML ermöglicht auch das Hinzufügen von Multimedia-Inhalten wie Ton und Video. Mit dem <audio> -Tag können Sie Audiodateien einbinden. Mit dem <video> -Tag können Sie Videoplayer in Ihre Webseite einbetten.
Hier ist ein Beispiel für einen Video-Einbettungscode:
<code><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video> </code>
Dieser Code erstellt einen Videoplayer mit Schaltflächen zum Abspielen, Anhalten und Ändern der Lautstärke. Das Attribut „controls“ weist den Browser an, diese Schaltflächen anzuzeigen.
Jede Website im Internet basiert auf HTML. Stellen Sie sich vor, Sie besuchen die Website Ihrer Schule, eine Spieleseite oder lesen eine Online-Geschichte. HTML arbeitet im Hintergrund und ordnet Text, Bilder und andere Inhalte so an, dass Sie sie klar und deutlich sehen können.
Wenn Sie beispielsweise online ein Bild Ihrer Lieblingszeichentrickfigur sehen oder auf einen Link klicken, um mehr über ein unterhaltsames Thema zu erfahren, ist HTML dafür da, dies zu ermöglichen.
Schauen wir uns ein einfaches Projekt an. Stellen Sie sich vor, Sie möchten eine kleine Webseite über Ihr Lieblingstier, zum Beispiel eine Katze, erstellen. Sie können einen Titel, einen Absatz über Katzen, ein Bild und sogar einen Link zu einer Website mit lustigen Fakten über Katzen einfügen.
Ihr HTML-Code könnte folgendermaßen aussehen:
<code><!DOCTYPE html>
<html>
<Kopf>
<title>Mein Lieblingstier</title>
</Kopf>
<Text>
<h1>Alles über Katzen</h1>
<p>Katzen sind verspielt und sanft. Sie schlafen und schnurren gern. Viele Menschen halten Katzen gern als Haustiere.</p>
<img src="cat.jpg" alt="Eine süße Katze">
<a href="https://www.catfacts.com">Mehr über Katzen erfahren</a>
</body>
</html> </code>
Dieses Projekt verwendet Überschriften, Absätze, Bilder und Links. Es zeigt, wie HTML verwendet wird, um eine vollständige Webseite mit vielen Teilen zu erstellen.
Während HTML die Struktur einer Webseite erstellt, gibt es andere Tools, die dafür sorgen, dass Websites auf unterhaltsame Weise aussehen und sich verhalten.
Auch wenn wir heute HTML lernen, hilft uns das Wissen über CSS und JavaScript dabei, zu verstehen, wie Websites erstellt werden.
Beim Erkunden von HTML werden Sie auf viele weitere Tags stoßen. Hier sind einige weitere, die Sie kennen sollten:
Diese Tags geben Ihnen mehr Kontrolle darüber, wie Ihre Inhalte auf einer Webseite angezeigt werden.
HTML hat sich seit seiner Entstehung stark verändert. Im Laufe der Zeit sind viele neue Tags und Funktionen hinzugekommen. Jede neue HTML-Version erleichtert die Erstellung komplexer und ansprechender Websites. Heute arbeitet HTML mit CSS und JavaScript zusammen, um moderne Websites zu erstellen, die Spaß machen und gut aussehen.
Diese Entwicklung bedeutet, dass HTML sowohl leicht zu erlernen als auch leistungsstark genug ist, um alles von einfachen Webseiten bis hin zu komplexen Webanwendungen zu erstellen.
HTML zu lernen macht zwar Spaß, aber es ist immer wichtig, im Internet sicher zu sein. Wenn du Webseiten besuchst oder Online-Inhalte durchsuchst, bitte immer einen Erwachsenen um Hilfe, wenn du unsicher bist. Deine Sicherheit steht an erster Stelle, und HTML zu lernen sollte immer Spaß machen und sicher sein.
Sehen wir uns einige wichtige Begriffe an, die Sie heute gelernt haben:
HTML wird in vielen realen Situationen verwendet. Hier sind einige Beispiele:
Diese Beispiele zeigen, dass HTML in vielen Bereichen des täglichen Lebens ein sehr nützliches Werkzeug ist.
Heute haben wir gelernt, dass HTML die Abkürzung für Hypertext Markup Language ist. Es ist die grundlegende Sprache zum Erstellen von Webseiten. Hier sind die wichtigsten Punkte, die Sie sich merken sollten:
HTML ist die Grundlage jeder Website im Internet. Mit einfachen Bausteinen wie Tags und Attributen können Sie ansprechende und interaktive Seiten erstellen. Mit zunehmender Erfahrung werden Sie erkennen, wie HTML Webseiten zum Leben erweckt und das Internet zu einem nützlichen und spannenden Ort macht.
