Html Web Page Examples
HTML (HyperText Markup Language) ist das Grundgerüst jeder Webseite. Es definiert die Struktur und den Inhalt einer Seite, von Text über Bilder bis hin zu Links und Formularen. Anstatt bloß die Theorie zu besprechen, wollen wir uns einige konkrete HTML Webseiten Beispiele ansehen, um ein besseres Verständnis dafür zu bekommen, wie HTML in der Praxis funktioniert.
Grundlegende HTML Struktur
Jede HTML-Seite beginnt mit einer bestimmten Struktur. Diese Struktur bildet das Fundament für den gesamten Inhalt. Hier ist ein sehr einfaches Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen!</h1>
<p>Dies ist meine erste Webseite mit HTML.</p>
</body>
</html>
* <!DOCTYPE html>: Deklariert das Dokument als HTML5.
* <html>: Das Wurzelelement der Seite. Das lang Attribut gibt die Sprache der Seite an.
* <head>: Enthält Metadaten über die Seite, wie den Titel und die Zeichenkodierung. Der Inhalt innerhalb des <head> Tags wird nicht direkt im Browser angezeigt.
* <body>: Enthält den sichtbaren Inhalt der Seite.
Must Read
HTML für Textformatierung
HTML bietet verschiedene Tags zur Formatierung von Text. Diese Tags ermöglichen es, Text hervorzuheben, Absätze zu erstellen und Überschriften zu definieren.
Beispiel:
<p>Dies ist ein <strong>wichtiger</strong> Satz. <em>Beachten Sie</em> ihn.</p>
<h2>Ein Untertitel</h2>
<p>Ein weiterer Absatz mit <br> einem Zeilenumbruch.</p>
* <p>: Definiert einen Absatz.
* <strong>: Hebt Text hervor (wird oft fett dargestellt).
* <em>: Hebt Text hervor (wird oft kursiv dargestellt).
* <h1> bis <h6>: Definieren Überschriften unterschiedlicher Ebenen.
* <br>: Fügt einen Zeilenumbruch ein.
Bilder und Links
Bilder und Links sind essentielle Bestandteile des Webs. Sie ermöglichen die visuelle Gestaltung der Seite und die Navigation zwischen verschiedenen Seiten.
Beispiel:
<img src="bild.jpg" alt="Ein schönes Bild" width="500" height="300">
<a href="https://www.example.com">Besuche Example.com</a>
* <img>: Fügt ein Bild ein. Das src Attribut gibt den Pfad zum Bild an, das alt Attribut bietet eine alternative Beschreibung für Suchmaschinen und Screenreader. Die Attribute width und height definieren die Breite und Höhe des Bildes.
* <a>: Erstellt einen Link. Das href Attribut gibt das Ziel des Links an.
Listen
Listen sind nützlich, um Informationen strukturiert darzustellen. HTML bietet zwei Arten von Listen: geordnete und ungeordnete Listen.
Beispiel:
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
<ol>
<li>Erster Schritt</li>
<li>Zweiter Schritt</li>
<li>Dritter Schritt</li>
</ol>
* <ul>: Definiert eine ungeordnete Liste (mit Aufzählungszeichen).
* <ol>: Definiert eine geordnete Liste (mit Nummern).
* <li>: Definiert ein Listenelement.
Tabellen
Tabellen werden verwendet, um Daten in Zeilen und Spalten darzustellen. Obwohl Tabellen heutzutage weniger für das Layout verwendet werden (dafür gibt es CSS), sind sie immer noch nützlich, um tabellarische Daten anzuzeigen.
Beispiel:
<table>
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
</thead>
<tbody>
<tr>
<td>Max Mustermann</td>
<td>30</td>
</tr>
<tr>
<td>Erika Müller</td>
<td>25</td>
</tr>
</tbody>
</table>
* <table>: Definiert eine Tabelle.
* <thead>: Definiert den Tabellenkopf.
* <tbody>: Definiert den Tabellenkörper.
* <tr>: Definiert eine Tabellenzeile.
* <th>: Definiert eine Tabellenkopfzelle.
* <td>: Definiert eine Tabellenzelle.
Zusammenfassung
Diese Beispiele geben einen Einblick in die grundlegenden HTML-Elemente. HTML ist jedoch viel mehr als das. Es bietet viele weitere Elemente und Attribute, mit denen komplexe und dynamische Webseiten erstellt werden können. Das Erlernen von HTML ist der erste Schritt für jeden, der sich mit Webentwicklung beschäftigen möchte.
Nächste Schritte: Experimentieren Sie mit diesen Beispielen, modifizieren Sie sie und versuchen Sie, Ihre eigenen Webseiten zu erstellen. Es gibt viele Online-Ressourcen und Tutorials, die Ihnen beim Lernen von HTML helfen können. Lassen Sie Ihrer Kreativität freien Lauf und entdecken Sie die Möglichkeiten, die HTML bietet!
