Strukturierung von Inhalten mit HTML

Vor Beginn dieses Moduls benötigen Sie keine vorherigen HTML-Kenntnisse, aber Sie sollten zumindest eine grundlegende Vertrautheit mit der Nutzung von Computern und der passiven Nutzung des Internets haben (d.h. einfach nur anschauen und Inhalte konsumieren). 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). Beides sind Teile unseres Einstieg ins Web Einsteiger-Moduls.

Grundlegende HTML-Syntax

Behandelt die absoluten Grundlagen von HTML, um Ihnen den Einstieg zu erleichtern — wir definieren Elemente, Attribute und andere wichtige Begriffe und zeigen deren Rolle in der Sprache auf. Außerdem zeigen wir, wie eine typische HTML-Seite strukturiert ist und wie ein HTML-Element strukturiert ist, und erklären weitere wichtige grundlegende Sprachmerkmale. Dabei experimentieren wir mit etwas HTML, um Ihr Interesse zu wecken!

Was steht im head? Metadaten der Webseite

Der head eines HTML-Dokuments ist der Teil, der nicht im Webbrowser angezeigt wird, wenn die Seite geladen wird. Er enthält Metadateninformationen wie den Seiten <title>, Links zu CSS (wenn Sie Ihre HTML-Inhalte mit CSS gestalten möchten), Links zu benutzerdefinierten Favicons und Metadaten (Daten über das HTML, 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 verwendet werden kann, um eine grundlegende Seitenstruktur bereitzustellen, indem Überschriften und Absätze definiert werden.

Betonung und Wichtigkeit

Der vorherige Artikel behandelte, warum Semantik in HTML wichtig ist, und konzentrierte sich auf Überschriften und Absätze. Dieser Artikel setzt das Thema Semantik fort und betrachtet HTML-Elemente, die Text Betonung und Wichtigkeit verleihen (vergleichbar mit Kursiv- und Fettdruck in Printmedien).

Listen

Listen sind im Leben allgegenwärtig — von Ihrer Einkaufsliste bis zur Liste der Wegbeschreibungen, denen Sie unbewusst folgen, um jeden Tag zu Ihrem Haus zu gelangen, bis zu den Listen von Anweisungen, die Sie in diesen Tutorials befolgen! Es überrascht Sie vielleicht nicht, dass HTML eine praktische Sammlung von Elementen hat, die es uns ermöglichen, verschiedene Arten von Listen zu definieren. Im Web haben wir drei Arten von Listen: ungeordnete, geordnete und Definitionslisten. Diese Lektion zeigt Ihnen, wie Sie die verschiedenen Typen verwenden.

Dokumente strukturieren

Neben der Definition einzelner Teile Ihrer Seite (wie "ein Absatz" oder "ein Bild") bietet HTML auch eine Anzahl von Block-Level-Elementen, die zum Definieren von Bereichen Ihrer Website verwendet werden (wie "der Header", "das Navigationsmenü", "die Hauptinhaltsspalte"). Dieser Artikel betrachtet, 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 Textsemantiken, die wir im Artikel Betonung und Wichtigkeit nicht behandelt haben. Die in diesem Artikel beschriebenen Elemente sind weniger bekannt, aber dennoch nützlich zu kennen (und dies ist immer noch keine vollständige Liste). Hier erfahren Sie, wie Sie Zitate, Computercode und andere verwandte Texte, Tief- und Hochstellung, Kontaktinformationen und mehr markieren.

Links erstellen

Links (auch als Hyperlinks bekannt) sind wirklich wichtig — sie sind es, die das Web ein Netz machen. Dieser Artikel zeigt die erforderliche Syntax, um einen Link zu erstellen, und diskutiert beste Praktiken für Links.

Ein Brief markieren ^{Herausforderung}

Wir alle lernen früher oder später, einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Textformatierungsfähigkeiten zu testen. In dieser Herausforderung haben Sie einen Brief, den Sie als Test für Ihre HTML-Textformatierungsfähigkeiten sowie Hyperlinks und die richtige Verwendung des HTML-Elements <head> markieren müssen.

Die Strukturierung einer Inhaltsseite ^{Herausforderung}

Das Strukturieren einer Inhaltsseite zur Vorbereitung auf die Layout-Erstellung mit CSS ist eine sehr wichtige Fähigkeit, die Sie beherrschen müssen. In dieser Herausforderung wird Ihre Fähigkeit getestet, darüber nachzudenken, wie eine Seite aussehen könnte, und geeignete strukturelle Semantiken auszuwählen, um darauf ein Layout aufzubauen.

HTML-Bilder

Am Anfang bestand das Web nur aus Text, und es war wirklich ziemlich langweilig. Glücklicherweise dauerte es nicht lange, bis die Möglichkeit hinzukam, Bilder (und andere interessantere Inhaltstypen) in Webseiten einzubetten. In diesem Artikel sehen wir uns an, wie das <img>-Element in der Tiefe verwendet wird, einschließlich der Grundlagen, der Anmerkung mit Bildunterschriften mit <figure> und der Beschreibung, wie es sich auf CSS-Hintergrundbilder bezieht.

HTML-Video und -Audio

Nachdem wir nun mit dem Hinzufügen einfacher Bilder zu einer Webseite vertraut sind, besteht der nächste Schritt darin, Video- und Audioplayer zu Ihren HTML-Dokumenten hinzuzufügen! In diesem Artikel werden wir uns genau damit befassen, mit den <video>- und <audio>-Elementen; wir schließen damit ab, indem wir uns ansehen, wie Sie Ihren Videos Untertitel/Captions hinzufügen.

Mozilla-Splash-Seite ^{Herausforderung}

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

Grundlagen von HTML-Tabellen

Dieser Artikel führt Sie in HTML-Tabellen ein, indem er die absoluten Grundlagen wie Zeilen, Zellen, Überschriften, das Spannen von Zellen über mehrere Spalten und Zeilen hinweg und das Gruppieren aller Zellen in einer Spalte zu Styling-Zwecken abdeckt.

HTML-Tabellen-Zugänglichkeit

In diesem Artikel behandeln wir weitere Funktionen zur Zugänglichkeit von HTML-Tabellen, wie zum Beispiel Titel/Summaries, das Gruppieren Ihrer Zeilen in Tabellenkopf-, -körper- und -fußbereiche sowie das Scope von Spalten und Zeilen.

Strukturierung einer Planetendatentabelle ^{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 Buttons in HTML

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

HTML debuggen

HTML zu schreiben ist in Ordnung, aber was, wenn etwas schiefgeht und Sie nicht herausfinden können, wo der Fehler im Code ist? Dieser Artikel wird Ihnen einige Werkzeuge vorstellen, 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 Lernpfads, aber sie sind dennoch interessant — Sie sollten diese als zusätzliche Ziele betrachten, die Sie optional studieren können, wenn Sie mit den Hauptartikeln der Kernmodule fertig sind.

Vektorgrafiken in HTML einbinden

Vektorgrafiken sind in vielen Situationen sehr nützlich — sie haben kleine Dateigrößen und sind hoch skalierbar, sodass sie nicht pixelig werden, wenn sie vergrößert oder in großem Maßstab dargestellt werden. In diesem Artikel zeigen wir Ihnen, wie Sie eine in Ihre Webseite einbinden.

Vom Objekt zum iframe — allgemeine Embedded-Technologien

Entwickler denken häufig daran, Medien wie Bilder, Videos und Audio in Webseiten einzubetten. In diesem Artikel machen wir einen etwas seitlichen Schritt und schauen uns einige Elemente an, die es Ihnen erlauben, eine Vielzahl von Inhaltstypen in Ihre Webseiten einzubetten: die <iframe>, <embed> und <object> Elemente. <iframe>s dienen zum Einbetten anderer Webseiten, und die anderen beiden erlauben Ihnen, externe Ressourcen wie PDF-Dateien einzubetten.

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

Der Learn HTML and CSS-Kurs von Scrimba lehrt Ihnen HTML und CSS durch das Erstellen und Bereitstellen von fünf großartigen Projekten, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, gelehrt von kompetenten Lehrern.

HTML lernen, Codecademy

Eine weitere nützliche Ressource zum Erlernen der HTML-Basics.

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 davon wichtig ist.

• Übersicht: Kernlernmodule
• Weiter