Strukturierung von Inhalten mit HTML

Bevor Sie mit diesem Modul beginnen, benötigen Sie keine vorherigen HTML-Kenntnisse, aber Sie sollten zumindest grundlegende Vertrautheit mit dem Umgang mit Computern und der passiven Nutzung des Webs haben (d.h. es nur anzusehen und Inhalte zu konsumieren). Sie sollten eine grundlegende Arbeitsumgebung eingerichtet haben (wie in Installation grundlegender Software beschrieben) und verstehen, wie man Dateien erstellt und verwaltet (wie in Umgang mit Dateien beschrieben). Beides sind Teile unseres Einstieg ins Web Moduls für absolute Anfänger.

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, wo sie in die Sprache passen. Zudem zeigen wir, wie eine typische HTML-Seite strukturiert ist und wie ein HTML-Element aufgebaut ist, und erklären andere wichtige grundlegende Sprachmerkmale. Unterwegs werden wir mit etwas HTML herumspielen, um Ihr Interesse zu wecken!

Was ist im Kopf? Webseitendaten

Der Kopf eines HTML-Dokuments ist der Teil, der nicht im Webbrowser angezeigt wird, wenn die Seite geladen wird. Es enthält Metainformationen wie den Seiten-<title>, 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 ist es, Texten Struktur zu geben, damit ein Browser ein HTML-Dokument so anzeigen kann, wie es der Entwickler vorgesehen hat. Dieser Artikel erklärt, wie HTML verwendet werden kann, um eine grundlegende Seitenstruktur zu schaffen, indem Überschriften und Absätze definiert werden.

Betonung und Bedeutung

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 untersucht HTML-Elemente, die Texten Betonung und Bedeutung verleihen (analog zu Kursiv- und Fettschrift in Printmedien).

Listen

Listen sind überall im Leben zu finden — von Ihrer Einkaufsliste bis zur Liste der Anweisungen, denen Sie unterbewusst folgen, um jeden Tag zu Ihrem Haus zu gelangen, bis zu den Anweisungen, die Sie in diesen Tutorials befolgen! Es überrascht nicht, dass HTML eine praktische Reihe von Elementen hat, die es uns ermöglichen, verschiedene Arten von Listen zu definieren. Im Web gibt es drei Arten von Listen: ungeordnete, geordnete und Beschreibungslisten. Diese Lektion zeigt, wie Sie die verschiedenen Typen verwenden.

Dokumente strukturieren

Neben der Definition einzelner Teile Ihrer Seite (wie „ein Absatz“ oder „ein Bild“) verfügt HTML auch über eine Reihe von Blockelementen, die zur Definition von Bereichen Ihrer Website verwendet werden (wie „der Header“, „das Navigationsmenü“, „die Hauptinhalts-Spalte“). In diesem Artikel wird beschrieben, wie man eine grundlegende Website-Struktur plant und den HTML-Code schreibt, um diese Struktur darzustellen.

Erweiterte Texteigenschaften

Es gibt viele andere Elemente in HTML zur Definition von Textsemantik, die wir im Artikel Betonung und Bedeutung nicht behandelt haben. Die in diesem Artikel beschriebenen Elemente sind weniger bekannt, aber dennoch nützlich zu kennen (und dies ist bei weitem keine vollständige Liste). Hier lernen Sie, wie Sie Zitate, Beschreibungslisten, Computercode und andere verwandte Texte, Tief- und Hochzahlen, Kontaktinformationen und mehr markieren.

Links erstellen

Links (auch bekannt als Hyperlinks) sind wirklich wichtig — sie sind es, die das Web zu einem Netz machen. Dieser Artikel zeigt die Syntax, die erforderlich ist, um einen Link zu erstellen, und diskutiert bewährte 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 Fähigkeiten im Textformatieren zu testen. In dieser Herausforderung haben Sie einen Brief zu markieren, um Ihre HTML-Textformatierungsfähigkeiten sowie Hyperlinks und die richtige Verwendung des HTML-<head>-Elements zu testen.

Eine Seite mit Inhalten strukturieren ^{Herausforderung}

Das Strukturieren einer Seite mit Inhalten, die für die Gestaltung mit CSS bereit ist, ist eine sehr wichtige Fertigkeit, die es zu meistern gilt. In dieser Herausforderung werden Sie auf Ihre Fähigkeit getestet, darüber nachzudenken, wie eine Seite letztendlich aussehen könnte, und geeignete Struktursemantiken auszuwä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 Möglichkeit hinzugefügt wurde, Bilder (und andere interessantere Arten von Inhalten) in Webseiten einzubetten. In diesem Artikel schauen wir uns an, wie das <img>-Element eingehend genutzt werden kann, einschließlich der Grundlagen, der Annotation mit Bildunterschriften unter Verwendung von <figure> und der Details, wie es sich zu CSS-Hintergrundbildern verhält.

HTML Video und Audio

Nachdem wir nun damit vertraut sind, einfache Bilder in eine Webseite einzufügen, besteht der nächste Schritt darin, Video- und Audioplayer in Ihre HTML-Dokumente aufzunehmen! In diesem Artikel werden wir uns damit beschäftigen, wie das mit den <video> und <audio>-Elementen gemacht wird; dann schließen wir mit einem Blick darauf ab, wie Sie Ihren Videos Untertitel hinzufügen.

Mozilla Splash Page ^{Herausforderung}

In dieser Herausforderung prüfen wir Ihr Wissen über einige der in den letzten Lektionen behandelten Techniken, indem wir Sie dazu bringen, einige Bilder und Videos zu einer ausgefallenen Splash-Seite rund um Mozilla hinzuzufügen!

Grundlagen von HTML-Tabellen

Dieser Artikel führt Sie in HTML-Tabellen ein und behandelt die Grundlagen wie Zeilen, Zellen, Überschriften, Zellen, die sich über mehrere Spalten und Zeilen erstrecken, und wie man alle Zellen in einer Spalte zu Stilzwecken gruppiert.

HTML-Tabellen-Barrierefreiheit

In diesem Artikel betrachten wir weitere HTML-Tabellen-Barrierefreiheitsfunktionen wie Bildunterschriften/Zusammenfassungen, wie man Ihre Zeilen in Tabellenkopf-, Körper- und Fußzeilen-Bereiche gruppiert, und wie man Spalten und Zeilen abgrenzt.

Strukturierung einer Planetendaten-Tabelle ^{Herausforderung}

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

Formulare und Schaltflächen in HTML

HTML-Formulare und Schaltflächen sind mächtige Werkzeuge zur Interaktion mit Benutzern — sie werden am häufigsten zur Datenerfassung 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.

Fehlerbehebung in HTML

Das Schreiben von HTML 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.

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 Haupt-Core-Artikeln fertig sind.

Vektorgrafiken in HTML einbinden

Vektorgrafiken sind in vielen Fällen sehr nützlich — sie haben kleine Dateigrößen und sind hoch skalierbar, sodass sie nicht pixelig werden, wenn sie vergrößert oder auf eine große Größe aufgeblasen werden. In diesem Artikel zeigen wir Ihnen, wie man eine in Ihre Webseite einbindet.

Von Objekt zu iframe — allgemeine Einbettungstechnologien

Entwickler denken häufig daran, Medien wie Bilder, Videos und Audiodateien in Webseiten einzubetten. In diesem Artikel nehmen wir einen etwas anderen Ansatz und betrachten einige Elemente, die es Ihnen ermöglichen, 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 es Ihnen, externe Ressourcen wie PDF-Dateien einzubetten.

Learn HTML, Codecademy

Eine nützliche (und kostenlose) Ressource zum Erlernen der HTML-Grundlagen.

Learn HTML and 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 tollen Projekten, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von sachkundigen Lehrern unterrichtet werden.

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