Artikel: Grundlagen
HTML steht für "Hypertext Markup Language" und ist die Sprache, die verwendet wird, um Webseiten im Internet zu erstellen. HTML funktioniert wie das Gerüst einer Webseite und ermöglicht es uns, Texte, Bilder, Links und andere Inhalte zu strukturieren und anzuzeigen. HTML basiert auf sogenannten "Tags" oder "Markup-Tags". Diese Tags werden verwendet, um den Browsern mitzuteilen, wie der Inhalt auf der Webseite angezeigt werden soll. Ein Tag besteht aus spitzen Klammern ("<" und ">") und wird normalerweise in einem Paar verwendet, das aus einem Anfangs- und einem Endtag besteht. Der Inhalt, der zwischen diesen Tags liegt, wird entsprechend formatiert. Hier ist ein einfaches Beispiel, um das Konzept von HTML-Tags zu erklären:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite</h1>
<p>Das ist ein Absatz mit Text.</p>
<img src="mein-bild.jpg" />
<p>Klicke <a href="andere-seite.html">hier</a>, um mehr zu erfahren.</p>
</body>
</html>In diesem Beispiel haben wir verschiedene HTML-Tags verwendet:
<!DOCTYPE html>
Dies gibt an, dass es sich um ein HTML Document handelt.
<html>...</html>
Dies ist das Hauptelement und umschließt den gesamten Inhalt der Webseite.
<head>...</head>
Enthält Informationen über die Webseite.
<title>Meine erste Webseite</title>
Der Titel gehört in den Head der Seite und ist der Text, der oben in als Tabs-Text angezeigt wird.
<body>...</body>
Der Body-Tag enthält alle Inhalte der Webseite, wie Text, Bilder,... und so weiter.
In der Beispiel-Webseite haben wir diese Inhalte eingefügt, um das Prinzip zu verdeutlichen:
<h1>...</h1>
Mit dem h-Tag werden Überschriften (engl. Headlines) beschrieben, wobei h1 die Hauptüberschrift ist.
<p>...</p>
Die p-Tags sind Textabsätze.
<img src="https://www.4eyescoding.de/project/4ec/assets/img/logo/logo.svg" />
Bilder werden mit dem img-Tag eingefügt, wobei man im Attribut src="..." angibt wo das Biild zu finden ist. Es muss als Datei auch neben der Webseite zur Verfügung stehen.
<a href="https://www.4eyescoding.de">ein Link</a>
Mit a-Tags kann man Seiten untereinander verknüpfen, man spricht von "verlinken". So kann man von einer Seite zur anderen kommen.
Tags werden verschaltelt
Die Tags werden verschachtelt, das bedeutet, dass sie ineinander geschachtelt werden können, um eine hierarchische Struktur zu erstellen. Zum Beispiel wird der head-Tag innerhalb des html-Tags platziert, und der title-Tag befindet sich innerhalb des head-Tags.
Mit HTML können wir auch Attribute verwenden, um zusätzliche Informationen zu den Tags hinzuzufügen. In dem Beispiel oben haben wir das `src`-Attribut verwendet, um den Pfad zum Bild anzugeben, und das `alt`-Attribut, um eine alternative Textbeschreibung des Bildes anzugeben. Wenn man den HTML-Code in einem Webbrowser öffnet, interpretiert der Browser den Code und zeigt die Webseite entsprechend an. Die Tags und Attribute helfen dem Browser dabei, den Inhalt richtig darzustellen.
Das ist nur ein grundlegender Einblick in HTML, aber es gibt noch viele weitere Tags und Möglichkeiten, um Webseiten zu gestalten. Mit HTML als Grundlage könnt ihr eure eigenen Webseiten erstellen und sie mit CSS (Cascading Style Sheets) und JavaScript weiter anpassen und interaktiver gestalten.
Zurück