Strukturierung von Inhalten mit HTML

Bevor Sie mit diesem Modul beginnen, benötigen Sie keine Vorkenntnisse in HTML, aber Sie sollten zumindest eine grundlegende Vertrautheit mit der Verwendung von Computern und der passiven Nutzung des Internets (d.h. einfaches Betrachten und Konsumieren von Inhalten) haben. Sie sollten eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Installieren grundlegender Software beschrieben) und verstehen, wie man Dateien erstellt und verwaltet (wie im Umgang mit Dateien beschrieben). Beide sind Teile unseres vollständigen Anfängermoduls Erste Schritte mit dem Web.

Grundlegende HTML-Syntax

Deckt die absoluten Grundlagen von HTML ab, um Ihnen den Einstieg zu erleichtern — wir definieren Elemente, Attribute und andere wichtige Begriffe und zeigen, wo sie in die Sprache passen. Wir zeigen auch, wie eine typische HTML-Seite strukturiert ist und wie ein HTML-Element aufgebaut ist, und erklären weitere wichtige grundlegende Sprachmerkmale. Unterwegs werden wir mit ein wenig HTML spielen, um Ihr Interesse zu wecken!

Was ist im Kopf? Metadaten von Webseiten

Der Kopf eines HTML-Dokuments ist der Teil, der nicht im Webbrowser angezeigt wird, wenn die Seite geladen wird. Er enthält Metadaten wie den <title> der Seite, Links zu CSS (wenn Sie Ihren HTML-Inhalt mit CSS gestalten möchten), Links zu benutzerdefinierten Favicons und Metadaten (Daten über das HTML, wie z.B. wer es geschrieben hat, und wichtige Schlüsselwörter, die das Dokument beschreiben).

Überschriften und Absätze

Eine der Hauptaufgaben von HTML besteht darin, Text zu strukturieren, damit ein Browser ein HTML-Dokument so anzeigen kann, wie es der Entwickler beabsichtigt. Dieser Artikel erklärt, wie HTML genutzt werden kann, um grundlegende Seitenstrukturen zu definieren, indem Überschriften und Absätze erstellt werden.

Betonung und Wichtigkeit

Der vorherige Artikel hat erklärt, warum Semantik in HTML wichtig ist und sich auf Überschriften und Absätze konzentriert. Dieser Artikel führt das Thema Semantik fort und betrachtet HTML-Elemente, die Text betonen und als wichtig kennzeichnen (analog zu Kursiv- und Fettdruck in Printmedien).

Listen

Listen sind überall im Leben — von Ihrer Einkaufsliste über die Liste der Anweisungen, denen Sie unbewusst folgen, um täglich nach Hause zu kommen, bis zu den Anweisungen, denen Sie in diesen Tutorials folgen! Es wird Sie nicht überraschen, dass HTML eine praktische Menge von Elementen besitzt, die es uns ermöglichen, verschiedene Arten von Listen zu definieren. Im Web haben wir drei Arten von Listen: ungeordnete, geordnete und Beschreibungslisten. Diese Lektion zeigt Ihnen, wie man die verschiedenen Arten verwendet.

Strukturierung von Dokumenten

Zusätzlich zur Definition einzelner Teile Ihrer Seite (wie „ein Absatz“ oder „ein Bild“) bietet HTML auch eine Reihe von Blockelementen, die zur Definition von Bereichen Ihrer Website verwendet werden (wie „der Header“, „das Navigationsmenü“, „die Hauptinhalts-Spalte“). Dieser Artikel beschreibt, wie man eine grundlegende Website-Struktur plant und das HTML schreibt, um diese Struktur darzustellen.

Erweiterte Textfunktionen

Es gibt viele weitere Elemente in HTML zur Definition von Textsemantik, die wir im Artikel Betonung und Wichtigkeit nicht behandelt haben. Die in diesem Artikel beschriebenen Elemente sind weniger bekannt, aber dennoch nützlich zu wissen (und dies ist noch lange keine vollständige Liste). Hier lernen Sie, wie man Zitate, Computercode und andere verwandte Texte, Tief- und Hochstellungen, Kontaktinformationen und mehr auszeichnet.

Erstellen von Links

Links (auch bekannt als Hyperlinks) sind wirklich wichtig — sie sind das, was das Web zu einem Netz macht. Dieser Artikel zeigt die erforderliche Syntax zum Erstellen eines Links und diskutiert die besten Praktiken für Links.

Einen Brief auszeichnen ^{Herausforderung}

Wir lernen alle früher oder später, wie man einen Brief schreibt; es ist auch ein nützliches Beispiel, um unsere Fähigkeiten zur Textformatierung zu testen. In dieser Herausforderung haben Sie einen Brief, den es zu markieren gilt, um Ihre HTML-Textformatierungsfähigkeiten sowie Hyperlinks und die richtige Verwendung des HTML-<head>-Elements zu testen.

Eine Inhaltsseite strukturieren ^{Herausforderung}

Eine Seite so zu strukturieren, dass sie für die Gestaltung mit CSS bereit ist, ist eine sehr wichtige Fähigkeit, die es zu meistern gilt. In dieser Herausforderung wird Ihr Können getestet, wie Sie darüber nachdenken, wie eine Seite aussehen könnte, und geeignete strukturelle Semantiken wählen, um darauf ein Layout aufzubauen.

HTML-Bilder

Am Anfang war das Web nur Text, und es war wirklich ziemlich langweilig. Glücklicherweise dauerte es nicht lange, bis die Fähigkeit hinzugefügt wurde, Bilder (und andere interessante Inhaltstypen) in Webseiten einzubetten. In diesem Artikel untersuchen wir die Verwendung des <img>-Elements im Detail, einschließlich der Grundlagen, der Annotation mit Bildunterschriften mittels <figure>, und wie es sich zu CSS-Hintergrundbildern verhält.

HTML-Video und -Audio

Jetzt, da wir uns mit dem Hinzufügen einfacher Bilder zu einer Webseite wohlfühlen, besteht der nächste Schritt darin, Video- und Audioplayer zu Ihren HTML-Dokumenten hinzuzufügen! In diesem Artikel betrachten wir genau das mit den <video>- und <audio>-Elementen; wir enden dann mit dem Hinzufügen von Untertiteln zu Ihren Videos.

Mozilla Splash-Seite ^{Herausforderung}

In dieser Herausforderung testen wir Ihr Wissen über einige der in den letzten Lektionen behandelten Techniken, indem wir Sie auffordern, einige Bilder und Videos zu einer funky Splash-Seite über Mozilla hinzuzufügen!

HTML-Tabellen-Grundlagen

Dieser Artikel hilft Ihnen beim Einstieg in HTML-Tabellen und behandelt die Grundlagen wie Zeilen, Zellen, Überschriften, das Spannen von Zellen über mehrere Spalten und Zeilen hinweg und das Gruppieren aller Zellen in einer Spalte zu Stylingzwecken.

Barrierefreiheit von HTML-Tabellen

In diesem Artikel untersuchen wir weitere Funktionen zur Barrierefreiheit von HTML-Tabellen wie Bildunterschriften/Zusammenfassungen, das Gruppieren Ihrer Zeilen in Kopf-, Körper- und Fußzeilenabschnitte und das Festlegen von Geltungsbereichen für Spalten und Zeilen.

Eine Planetendatentabelle strukturieren ^{Herausforderung}

In dieser Herausforderung stellen wir Ihnen einige Daten über die Planeten in unserem Sonnensystem zur Verfügung. Ihre Aufgabe ist es, diese in eine zugängliche HTML-Tabelle zu strukturieren.

Formulare und Schaltflächen in HTML

HTML-Formulare und -Schaltflächen sind mächtige Werkzeuge zur Interaktion mit Benutzern — am häufigsten werden sie zum Sammeln von Daten von Benutzern oder zur Steuerung einer Benutzeroberfläche verwendet. In diesem Artikel bieten wir eine Einführung in die Grundlagen von Formularen und Schaltflächen.

Debugging von HTML

HTML zu schreiben ist in Ordnung, aber was, wenn etwas schief geht und Sie nicht herausfinden können, wo der Fehler im Code liegt? Dieser Artikel stellt Ihnen einige Werkzeuge vor, die Ihnen helfen können, Fehler in HTML zu finden und zu beheben.

Testen Sie Ihre Fähigkeiten: HTML

Diese Seite listet HTML-Tests auf, die Sie ausprobieren können, um zu überprüfen, ob Sie den Inhalt dieses Moduls verstanden haben.

Diese Tutorials sind nicht Teil des Lernpfades, aber dennoch interessant — Sie sollten sie als weiterführende Ziele betrachten, die Sie optional studieren können, wenn Sie mit den Hauptartikeln des Kernmoduls fertig sind.

Einbinden von Vektorgrafiken in HTML

Vektorgrafiken sind in vielen Fällen sehr nützlich — sie haben kleine Dateigrößen und sind hochskalierbar, sodass sie beim Heranzoomen oder in großer Größe nicht verpixeln. In diesem Artikel zeigen wir Ihnen, wie Sie eine in Ihre Webseite einbinden können.

Von Objekt zu Iframe — allgemeine Einbettungstechnologien

Entwickler denken oft an das Einbetten von Medien wie Bildern, Videos und Audio in Webseiten. In diesem Artikel machen wir einen kleinen Seitenschritt und betrachten einige Elemente, die es ermöglichen, eine Vielzahl von Inhaltstypen in Ihre Webseiten einzubetten: die <iframe>, <embed> und <object>-Elemente. <iframe>s sind zum Einbetten anderer Webseiten gedacht, während die anderen beiden es Ihnen ermöglichen, externe Ressourcen wie PDF-Dateien einzubetten.

Lernen Sie HTML und CSS, Scrimba ^{MDN Lernpartner}

Der Lernen Sie HTML und CSS-Kurs bei Scrimba lehrt Sie HTML und CSS, indem Sie fünf beeindruckende Projekte erstellen und bereitstellen, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von sachkundigen Lehrern vermittelt werden.

Lernen Sie HTML, Codecademy

Eine weitere nützliche Ressource zum Lernen der HTML-Grundlagen.

Die Grundlagen von semantischem HTML, Scrimba ^{MDN Lernpartner}

Diese interaktive Lektion bietet eine nützliche Beschreibung von HTML, mit besonderem Schwerpunkt darauf, warum der semantische Aspekt wichtig ist.

• Übersicht: Kernlernmodule
• Weiter