Inhalt
1. Einführung in HTML und das Grundgerüst
HTML, kurz für HyperText Markup Language, ist die grundlegende Sprache zur Strukturierung von Inhalten im Web. Es dient dazu, Webseiteninhalt wie Texte, Bilder, Links, Listen, Tabellen usw. zu definieren und zu strukturieren. Jedes Element auf einer Webseite wird durch HTML-Tags definiert. Tags sind Anweisungen, die besagen, was zwischen ihnen angezeigt werden soll. Zum Beispiel wird <h1> und </h1> verwendet, um einen Hauptüberschriftentext zu erstellen.
2. HTML Dokumentstruktur
Eine HTML-Datei beginnt immer mit der Deklaration <!DOCTYPE html>, um anzugeben, dass es sich um eine HTML5-Datei handelt. Anschließend folgt das <html>-Element, das das Wurzelelement der Seite darstellt.
Innerhalb des <html>-Elements gibt es zwei Hauptelemente: <head> und <body>.
Der <head>-Bereich enthält Informationen über das Dokument, die nicht direkt auf der Webseite angezeigt werden. Dies beinhaltet den Titel der Seite (der in der Titelleiste des Browsers angezeigt wird), die Metainformationen wie Zeichensatz und Ansichtsfenster, und Verweise auf externe Dateien wie CSS- und JavaScript-Dateien.
Der <body>-Bereich ist der Hauptteil der Webseite, in dem der tatsächliche Inhalt wie Text, Bilder, Videos, Links, Listen, Tabellen usw. platziert wird.
Hier ist ein einfaches Beispiel für die Struktur eines HTML-Dokuments:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Willkommen auf meiner Webseite!</h1>
<p>Dies ist ein Absatz.</p>
</body>
</html>
3. HTML Grundgerüst
Das HTML-Grundgerüst besteht aus einer Reihe von Elementen, die zusammen die Struktur einer Webseite bilden. In diesem Abschnitt werden wir einen Blick auf einige der grundlegendsten und häufig verwendeten HTML-Elemente werfen.
Die Überschriftentags <h1> bis <h6> werden verwendet, um Überschriften verschiedener Ebenen zu erstellen. <h1> ist die höchste (und in der Regel größte) Überschriftenebene, während <h6> die niedrigste ist.
Der <p>-Tag wird verwendet, um Absätze zu erstellen, und die Tags <b> und <i> können verwendet werden, um Text fett bzw. kursiv zu machen.
Mit dem <a>-Tag kannst du Hyperlinks erstellen, während das <img>-Tag zur Einbindung von Bildern dient.
Listen können mit den <ul>– (ungeordnet) und <ol>– (geordnet) Tags erstellt werden, wobei jedes Listenelement durch einen <li>-Tag definiert wird.
Schließlich können Tabellen mit den <table>, <tr>, <td> und <th>-Tags erstellt werden. Siehe HTML Tabellen
Jedes dieser Elemente spielt eine entscheidende Rolle in der Struktur deiner HTML-Seite und ermöglicht dir, eine Vielzahl von Inhalten auf effektive und organisierte Weise zu präsentieren. Beim HTML lernen ist das wichtig.
4. HTML Grundgerüst mit Beispielinhalt
In diesem Beispiel haben wir zusätzlich zu den Grundelementen des HTML-Grundgerüsts auch einige semantische Elemente wie <header>, <nav>, <main>, <section>, und <footer>, die helfen, den Inhalt der Seite besser zu strukturieren und zu interpretieren. Es verweist auch auf ein externes Stylesheet mit dem Namen „style.css“ für das Styling der Webseite.
<!DOCTYPE html>
<html>
<head>
<title>Meine Webseite</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Willkommen auf meiner Webseite!</h1>
<nav>
<a href="#about">Über mich</a> |
<a href="#contact">Kontakt</a>
</nav>
</header>
<main>
<section id="about">
<h2>Über mich</h2>
<p>Ich bin ein Web-Entwickler mit einer Leidenschaft für HTML und CSS.</p>
</section>
<section id="contact">
<h2>Kontakt</h2>
<p>Sie können mich per E-Mail unter <a href="mailto:example@example.com">example@example.com</a> erreichen oder unter dem Link <a href="https://html-einfach.de/" target="_blank">HTML lernen</a>.</p>
</section>
</main>
<footer>
© 2023 Meine Webseite
</footer>
</body>
</html>
5. Nice to know
- HTML ist nicht casesensitiv: HTML-Tags können in Groß- oder Kleinschreibung geschrieben werden, obwohl die Konvention ist, sie in Kleinbuchstaben zu schreiben.
- Verschachtelung von Tags: HTML-Tags können verschachtelt werden, d.h. du kannst ein Tag innerhalb eines anderen Tags verwenden. Es ist wichtig, dass die Tags korrekt geschlossen werden, um Fehler zu vermeiden.
- Leere Elemente: Einige HTML-Elemente, wie
<img>,<br>und<hr>, sind leere Elemente, d.h. sie haben keinen Inhalt und werden nicht mit einem End-Tag geschlossen. - Attribute: HTML-Tags können Attribute enthalten, die zusätzliche Informationen über das Element bereitstellen. Beispiele für Attribute sind
srcin<img>(gibt den Pfad zum Bild an) undhrefin<a>(gibt die URL für den Link an).
