Snack: HTML

HTML = Hypertext Markup Language

HTML ist eine Auszeichnungssprache, um die Struktur einer Website zu beschreiben. Die aktuellste Version ist HTML5.

Dabei werden Elemente durch Tags mit geöffneten und geschlossene Klammern (<>) dargestellt und Attribute erweitern den Funktionsumfang, wie id im nächsten Beispiel.

<div id="Attribut-Wert">Hier steht der Textinhalt</div>

Das nachfolgende Beispiel wird fortlaufend erweitert. Falls ihr Verbesserungsvorschläge habt, schreibt uns gerne per Mail.

Live gerendert könnt ihr euch das Beispiel auf Stackblitz anschauen - Klick mich

<!-- Deklaration des HTML5-Dokumenttyps -->
<!DOCTYPE html> 

<!-- Die Wurzel des HTML-Dokuments -->
<html>

<!-- Enthält Metadaten wie Zeichencodierung und Titel der Webseite. -->
<head>
    <!-- Deklaration der Zeichencodierung -->
    <meta charset="UTF-8"> 
    <!-- Titel der Webseite im Browser-Tab -->
    <title>HTML5 Basics</title> 
</head>

<body>
    <!-- Enthält i.d.R. das Logo der Webseite und Navigationsleiste. -->
    <header>
        <h1>Willkommen bei der Startupscheune</h1>
        <!-- Ein Container für Navigationslinks. -->
        <nav> 
            <ul>
                <!-- Verknüpfung zur Startseite -->
                <li><a href="#">Startseite</a></li>
                <!-- Verknüpfung zur "Über uns"-Seite --> 
                <li><a href="#">Über uns</a></li>
                <!-- Verknüpfung zur "Kontakt"-Seite --> 
                <li><a href="#">Kontakt</a></li> 
            </ul>
        </nav>
    </header>

    <!-- Eigenständiger Artikel oder Inhalt -->
    <article>
        <h2>Neuigkeiten</h2>
        <p>Hier sind die neuesten Nachrichten und Updates.</p>
    </article>

    <!-- Abschnitt für thematisch zusammengehörenden Inhalt -->
    <section>
        <h2>Unsere Dienstleistungen</h2>
        <p>Wir bieten eine breite Palette von Dienstleistungen an.</p>
    </section>


    <!-- Enthält Fußzeileninformationen, wie das Impressum oder das Copyright-Datum -->
    <footer>
        <p>&copy; 2024 Startupscheune. Alle Rechte vorbehalten.</p>
    </footer>
</body>

</html>

Hilfreiche Links

https://wiki.selfhtml.org/wiki/HTML

Ausführliche Informationen zu HTML (Grundlagen, Getting Started, etc.)

https://www.w3schools.com/html/

Umfassender Kurs zu allen HTML-Basics (Try-It-Yourself und Quizze in den Lektionen)

https://developer.mozilla.org/en-US/docs/Web/HTML

Tutorials und ausführliche Dokumentation zu HTML von Mozilla