HTML - Einführung

Was ist HTML?

HTML (Hypertext Markup Language) ist die Standard-Auszeichnungssprache zur Erstellung und Strukturierung von Inhalten im Web. Es ist die Grundlage aller Webseiten und wird verwendet, um die Struktur und das Layout der Inhalte zu definieren, die auf einer Website erscheinen.

HTML verwendet ein System von Tags und Attributen, um Inhalte zu kennzeichnen, wie zum Beispiel:

Diese Tags teilen Webbrowsern mit, wie sie den Inhalt anzeigen sollen, sodass Benutzer Webseiten einfach lesen und damit interagieren können.

In der Webentwicklung arbeitet HTML zusammen mit:

• CSS (Cascading Style Sheets): Wird zur Gestaltung und zum Layout der Inhalte verwendet
• JavaScript: Wird verwendet, um Interaktivität und Funktionalität zu Webseiten hinzuzufügen

HTML ist eine wesentliche Fähigkeit für jeden, der in der Webentwicklung tätig ist, da es die grundlegende Struktur für alle Webinhalte bereitstellt. Das Erlernen von HTML ist der erste Schritt zur Erstellung von Websites und eine wertvolle Fähigkeit für Webdesigner, Entwickler und Content-Ersteller.

<p>Dies    ist   ein   Absatz   mit    zusätzlichen   Leerzeichen.</p>

Dies ist ein Absatz mit zusätzlichen Leerzeichen.

<p>Dies ist ein Absatz.</div>

<p>Dies ist ein Absatz.</p>

Geschichte von HTML

HTML hat eine Geschichte, die bis zu den Anfängen des World Wide Web zurückreicht. Es wurde Ende der 1980er Jahre von Tim Berners-Lee, einem britischen Informatiker, während seiner Arbeit am CERN (Europäische Organisation für Kernforschung) entwickelt. Berners-Lee schuf HTML als Möglichkeit, Dokumente im Internet zu strukturieren und zu teilen.

Die erste Version von HTML wurde 1991 veröffentlicht und war sehr einfach. Sie enthielt nur wenige Tags zur Strukturierung von Text, wie Überschriften und Absätze. Im Laufe der Zeit entwickelte sich HTML weiter und umfasste mehr Funktionen und Möglichkeiten.

Hier sind einige wichtige Meilensteine in der Geschichte von HTML:

HTML5 ist rückwärtskompatibel mit älteren HTML-Versionen, sodass Websites, die mit früheren HTML-Versionen erstellt wurden, weiterhin mit modernen Webbrowsern funktionieren. Viele Webentwickler verwenden jedoch jetzt HTML5 aufgrund seiner neuen Funktionen und verbesserten Möglichkeiten.

Heute entwickelt sich HTML weiter und verbessert sich ständig, wobei regelmäßig neue Funktionen und Technologien hinzugefügt werden. Als Rückgrat des Webs spielt HTML eine wichtige Rolle bei der Erstellung der interaktiven und ansprechenden Websites, die wir täglich nutzen.

Warum HTML lernen?

HTML ist die Grundlage aller Websites und eine wichtige Fähigkeit für alle, die in der Webentwicklung tätig sind. Ob Sie ein professioneller Webentwickler sind oder gerade als Hobbyprogrammierer anfangen, das Erlernen von HTML ist für die Erstellung und Pflege von Websites notwendig.

Ein Hauptgrund für das Erlernen von HTML ist seine Bedeutung in der Webentwicklung. HTML liefert die Struktur und den Inhalt einer Website, die dann mit CSS gestaltet und mit JavaScript verbessert wird. Ohne HTML gäbe es keine Websites, wie wir sie heute kennen. Das Verständnis von HTML ist notwendig, um gut strukturierte, semantische und barrierefreie Websites zu erstellen, die in verschiedenen Browsern und auf verschiedenen Geräten funktionieren.

Das Erlernen von HTML bietet auch viele Vorteile sowohl für Webprofis als auch für Hobbyprogrammierer. Für Profis ist die Kenntnis von HTML eine grundlegende Fähigkeit, die für die meisten Webentwicklungsjobs erforderlich ist. Es ermöglicht Ihnen, Webseiten zu erstellen und zu ändern, Probleme zu beheben und mit Content-Management-Systemen (CMS) und Web-Frameworks zu arbeiten. Für Hobbyprogrammierer eröffnet das Erlernen von HTML Möglichkeiten zur Erstellung persönlicher Websites, Blogs und Online-Portfolios. Es bietet auch eine solide Grundlage für das Erlernen anderer Webtechnologien und kann ein unterhaltsames und lohnendes Hobby sein.

HTML ist nicht nur für sich genommen wichtig, sondern dient auch als Grundlage für andere Webtechnologien. Sobald Sie HTML gut verstanden haben, können Sie leicht CSS lernen, um Ihre Webseiten zu gestalten und visuell ansprechend zu machen. Sie können auch JavaScript lernen, um Ihren Websites Interaktivität und dynamische Funktionalität hinzuzufügen. Andere Webtechnologien wie serverseitige Programmiersprachen (z.B. PHP, Python) und Datenbanken (z.B. MySQL) verlassen sich ebenfalls auf HTML, um Inhalte für Benutzer anzuzeigen.

Darüber hinaus ist das Verständnis von HTML wertvoll für die Arbeit mit beliebten Content-Management-Systemen wie WordPress, Drupal und Joomla. Diese Plattformen verwenden HTML-Templates und Themes, um die Struktur und das Erscheinungsbild von Websites zu steuern. Die Kenntnis von HTML ermöglicht es Ihnen, diese Templates anzupassen, eigene Themes zu erstellen und auftretende Probleme zu beheben.

<p>Dies    ist   ein   Absatz   mit    zusätzlichen   Leerzeichen.</p>

Dies ist ein Absatz mit zusätzlichen Leerzeichen.

<p>Dies ist ein Absatz.</div>

<p>Dies ist ein Absatz.</p>

Erste Schritte mit HTML

Um mit HTML zu beginnen, benötigen Sie einige grundlegende Werkzeuge: einen Texteditor und einen Webbrowser. Ein Texteditor ist ein Programm, mit dem Sie Textdateien erstellen und bearbeiten können, wie zum Beispiel Notepad (Windows) oder TextEdit (Mac). Für eine bessere Programmiererfahrung möchten Sie vielleicht einen speziell für Webentwicklung konzipierten Code-Editor verwenden, wie:

• Visual Studio Code
• Sublime Text
• Atom
• Brackets

Diese Code-Editoren verfügen über Funktionen wie Syntaxhervorhebung, automatische Vervollständigung und Dateiverwaltung, die das Schreiben von HTML einfacher und schneller machen.

Um Ihre HTML-Seiten anzuzeigen, benötigen Sie einen Webbrowser wie Google Chrome, Mozilla Firefox, Apple Safari oder Microsoft Edge. Webbrowser lesen den HTML-Code und zeigen den formatierten Inhalt den Benutzern an.

Ein einfaches HTML-Dokument zu erstellen ist unkompliziert. Öffnen Sie Ihren Texteditor und erstellen Sie eine neue Datei. Beginnen Sie mit dem Schreiben der HTML-Dokumentstruktur, die folgende Elemente enthält:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste HTML-Seite</title>
</head>
<body>
    <h1>Hallo, Welt!</h1>
    <p>Dies ist meine erste HTML-Seite.</p>
</body>
</html>

Lassen Sie uns die Struktur eines HTML-Dokuments aufschlüsseln:

Speichern Sie die Datei mit der Erweiterung .html (z.B. index.html) und öffnen Sie sie in Ihrem Webbrowser. Sie sollten die Überschrift "Hallo, Welt!" und den Absatz "Dies ist meine erste HTML-Seite." auf der Seite angezeigt sehen.

Während Sie HTML weiter erlernen, werden Sie herausfinden, wie Sie weitere Elemente, Attribute und Inhalte hinzufügen können, um strukturierte und optisch ansprechende Webseiten zu erstellen. Denken Sie daran, immer mit der grundlegenden Dokumentstruktur zu beginnen und darauf aufzubauen.

HTML-Elemente und Tags

HTML-Dokumente bestehen aus Elementen, die durch Tags definiert werden. Elemente sind die Grundbausteine einer HTML-Seite und strukturieren Inhalte wie Überschriften, Absätze, Listen, Links und Bilder. Tags markieren den Anfang und das Ende eines Elements und geben Informationen über dessen Zweck und Inhalt.

Ein HTML-Element besteht aus drei Hauptteilen:

1. Öffnendes Tag: Beginnt ein Element und wird in spitze Klammern (< >) eingeschlossen. Das öffnende Tag enthält den Namen des Elements, wie <p> für einen Absatz oder für ein Bild.

2. Inhalt: Der Inhalt des Elements, der Text, andere Elemente oder beides sein kann.

3. Schließendes Tag: Beendet ein Element, ebenfalls in spitze Klammern eingeschlossen, mit einem Schrägstrich (/) vor dem Namen des Elements. Zum Beispiel schließt

   ein Absatzelement.

<p>Dies ist ein Textabsatz.</p>

Einige Elemente, die als leere oder Void-Elemente bezeichnet werden, haben kein schließendes Tag oder Inhalt. Diese Elemente sind selbstschließend und fügen Inhalte in die Seite ein, ohne sie zu umschließen. Beispiele für leere Elemente sind:

<img src="bild.jpg" alt="Ein Beispielbild">
<br>
<hr>
<input type="text" name="benutzername">

Hier sind einige gängige HTML-Elemente, die Sie sehen werden:

Je mehr Sie über HTML lernen, desto mehr Elemente werden Sie kennenlernen, jedes mit seinem eigenen Zweck und Attributen. Durch das Verschachteln von Elementen und das Anwenden entsprechender Tags können Sie gut strukturierte und aussagekräftige HTML-Dokumente erstellen.

HTML-Attribute

HTML-Attribute liefern zusätzliche Informationen über ein Element und verändern dessen Verhalten oder Aussehen. Attribute befinden sich im öffnenden Tag eines Elements und bestehen aus einem Namen und einem Wert, die durch ein Gleichheitszeichen (=) getrennt sind. Der Attributwert steht immer in Anführungszeichen, entweder einfachen ('') oder doppelten (").

Attribute sind wichtig für die Anpassung und Verbesserung von HTML-Elementen. Sie können verwendet werden, um:

Hier sind einige gängige HTML-Attribute, die Sie sehen werden:

<img src="logo.png" alt="Firmenlogo" width="200" height="100">
<a href="https://www.beispiel.de" target="_blank">Besuchen Sie Beispiel.de</a>
<input type="text" name="benutzername" required>
<p class="einleitung" style="font-weight: bold;">Dies ist ein einleitender Absatz.</p>

Nicht alle Attribute funktionieren mit jedem Element. Jedes Element hat seinen eigenen Satz gültiger Attribute, und die Verwendung ungültiger Attribute wird das Element nicht verändern.

Bei der Arbeit mit HTML werden Sie mehr über die verschiedenen verfügbaren Attribute und deren Einsatzmöglichkeiten zur Erstellung dynamischer und interaktiver Webseiten lernen. Durch die geschickte Kombination von Elementen und Attributen können Sie Ihre Inhalte strukturieren und deren Erscheinungsbild steuern, um ansprechende und benutzerfreundliche Websites zu erstellen.

HTML-Dokumentstruktur

Jedes HTML-Dokument folgt einer Grundstruktur, die die Doctype-Deklaration und die Elemente <html>, <head> und <body> umfasst. Diese Struktur hilft Browsern und anderen Tools, den Inhalt korrekt zu verstehen und anzuzeigen.

Die Doctype-Deklaration ist die erste Zeile eines HTML-Dokuments und teilt dem Browser mit, welche HTML-Version verwendet wird. In HTML5 lautet die Doctype-Deklaration einfach <!DOCTYPE html>. Diese Deklaration ist kein HTML-Tag, sondern eine Anweisung an den Browser.

Nach der Doctype-Deklaration folgt das <html>-Element, das Wurzelelement einer HTML-Seite. Es enthält den gesamten Inhalt und die Struktur des Dokuments. Das lang-Attribut im <html>-Tag gibt die Sprache des Dokuments an, z.B. "de" für Deutsch oder "en" für Englisch.

Innerhalb des <html>-Elements gibt es zwei Hauptbereiche: <head> und <body>.

Das <head>-Element enthält Meta-Informationen über das Dokument, die nicht auf der Seite selbst angezeigt werden. Dazu gehören:

• <title>: Legt den Titel der Webseite fest, der in der Titelleiste oder dem Tab des Browsers erscheint.
• <meta>: Stellt Metadaten über das Dokument bereit, wie Zeichenkodierung, Viewport-Einstellungen, Schlüsselwörter und Beschreibungen.
• <link>: Verbindet das Dokument mit externen Ressourcen wie CSS-Stylesheets oder Favicons.
• <script>: Fügt JavaScript-Code ein oder verlinkt auf externe Skripte.

Das <body>-Element enthält den Hauptinhalt des HTML-Dokuments, der im Browserfenster angezeigt wird. Dazu gehören Text, Bilder, Links, Tabellen, Formulare und andere Elemente, die den sichtbaren Teil der Webseite ausmachen.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Willkommen auf meiner Webseite</h1>
        <nav>
            <ul>
                <li><a href="#">Startseite</a></li>
                <li><a href="#">Über mich</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Über mich</h2>
        <p>Hallo, ich bin Max Mustermann. Ich bin Webentwickler und Designer.</p>
    </main>
    <footer>
        <p>&copy; 2023 Meine Webseite. Alle Rechte vorbehalten.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Eine angemessene Dokumentstruktur ist aus mehreren Gründen wichtig:

Wenn Sie die Standard-HTML-Dokumentstruktur befolgen und geeignete Elemente und Attribute verwenden, können Sie gut organisierte, semantisch aussagekräftige und barrierefreie Webseiten erstellen, die für alle Nutzer gut funktionieren.