Strukturierung mit HTML
Wenn man es mal ganz genau nimmt, ist HTML keine richtige Programmiersprache, sondern nur da, um Websites zu strukturieren. Aus diesem Grund ist sie auch nicht schwer zu lernen, da man sich ledeglich einige, wenige Begriffe merken muss.
Das Grundgerüst
Jede HTML-Datei ist von Grund auf gleich aufgebaut. Wenn später im einzelnen die Elemente noch variieren, bleibt trotzdem das Grundgerüst erhalten.
<html>
<head>
<title>Meine Website</title>
</head>
<body>
Hier steht der Inhalt.
</body>
</html>Das ist die ganz minimal gehaltene Grundstruktur eines jeden HTML-Dokuments. Wie man schon sehen kann, werden alle Tags also die Elemente in spitzen Klammern geschrieben.
Sprich: <Tag-Name></Tag-Name>
Das „Tag-Name“ wird dabei durch das jeweilige Element ersetzt. Bei dem ersten Beispiel oben lernen wir schon mal die wichtigsten 4 kennen.
<html> ist ganz wichtig, damit der Browser erkennt, dass dies eine HTML-Datei ist. Alles, was außerhalb dieses Elements steht, wird ignoriert.
Der <head> ist der Kopfbereich einer Internetseite. Während der ganze, sichtbare Inhalt im <body> zu finden ist, sucht man im <head> eher nach zusätzlichen Angaben zur Verarbeitung und für die Darstellung, die nicht im Hauptfenster des Browsers zu sehen sind. Dazu gehört zum Beispiel der Titel der Website, also <title>, oder Meta-Angaben, die Auskunft über das Erstellungsdatum oder den Urheber geben. Außerdem wird im <head> das CSS eingebunden. Dazu kommen wir aber später noch.
Der besagte Titel der Website ist unter <title> im Kopfbereich der Seite zu finden. Das ist quasi der Tag um euere Seite mit einem Namen zu taufen. Er wird später oben im Tab stehen.
Zu guter letzt kommen wir noch zum <body> Element. Alles, was sich in diesem Element befindet, wird später auf der Seite zu sehen sein. Das kann ein Text sein, aber auch ein Bild, ein Button ein Textfeld oder ein Menü.
Weitere Tags
Struktur
<header></header>
|
Meistens der erste Abschnitt einer Website, also die "Hero-Section". Nicht zu verwechseln mit |
<nav></nav>
|
Navigation |
<section></section>
|
Gruppierung von Elementen / Abschnitt einer Website |
<footer></footer>
|
Footer der Seite |
Text
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>
|
Überschriften. |
<p></p>
|
Textabsatz (engl. paragraph) |
<br>
|
Erzwungener Zeilenumbruch (muss nicht geschlossen werden) |
<hr>
|
Trennlinie (muss nicht geschlossen werden) |
Hervorhebungen
<b></b>
|
Fetter Text (blabla) |
<i></i>
|
Kursiver Text (blabla) |
<sup></sup>
|
Hochgestellter Text (m2) |
<sub></sub>
|
Tiefgestellter Text (H2O) |
<small></small>
|
Für das "Kleingedruckte" (blabla) |
Listen
|
Ungeordnete Liste
|
|
Geordnete Liste
|
<li></li>
|
Listen Element (Siehe Beispiele oben) |
Link
<a href="https://example.com/">Link Text</a>
Mit einem Hyperlink kann man auf andere Seiten verweisen und weiterleiten.
Previous Post