Strukturierung von Inhalten mit HTML

Bevor Sie mit diesem Modul beginnen, benötigen Sie keinerlei HTML-Vorkenntnisse, sollten aber zumindest mit der grundlegenden Nutzung von Computern und der passiven Nutzung des Internets vertraut sein (d.h. nur betrachten und Inhalte konsumieren). Sie sollten eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Abschnitt Installation grundlegender Software beschrieben) und verstehen, wie man Dateien erstellt und verwaltet (wie im Abschnitt Umgang mit Dateien beschrieben). Beide sind Teile unseres Erste Schritte im 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, wo sie in der Sprache passen. Wir zeigen auch, wie eine typische HTML-Seite aufgebaut ist, wie ein HTML-Element strukturiert ist und erklären andere wichtige grundlegende Sprachfunktionen. Unterwegs werden wir mit etwas HTML spielen, um Ihr Interesse zu wecken!

Was steckt im Kopf? Webseiten-Metadaten

Der Kopf 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, 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, Text mit Struktur zu versehen, damit ein Browser ein HTML-Dokument gemäß den Absichten seines Entwicklers anzeigen kann. Dieser Artikel erklärt, wie HTML verwendet werden kann, um grundlegende Seitenstrukturen bereitzustellen, indem Überschriften und Absätze definiert werden.

Betonung und Wichtigkeit

Der vorherige Artikel hat erörtert, warum Semantik in HTML wichtig ist, und sich auf Überschriften und Absätze konzentriert. Dieser Artikel setzt das Thema Semantik fort und betrachtet HTML-Elemente, die Text betonen und wichtig machen (analog zu Kursiv- und Fettdruck in Printmedien).

Listen

Listen sind überall im Leben — von Ihrer Einkaufsliste bis zur Liste von Richtungen, denen Sie unbewusst folgen, um jeden Tag nach Hause zu kommen, bis zu den Listen von Anweisungen, denen Sie in diesen Tutorials folgen! Es überrascht 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 Beschreibungslisten. Diese Lektion zeigt Ihnen, wie Sie die verschiedenen Typen verwenden.

Strukturierung von Dokumenten

Zusätzlich zur Definition einzelner Teile Ihrer Seite (wie "ein Absatz" oder "ein Bild") verfügt HTML auch über eine Anzahl von Blockelementen, die verwendet werden, um Bereiche Ihrer Website zu definieren (wie "der Header", "das Navigationsmenü", "die Hauptinhaltskolumne"). Dieser Artikel untersucht, wie man eine grundlegende Website-Struktur plant und das HTML schreibt, um diese Struktur darzustellen.

Fortgeschrittene Textmerkmale

Es gibt viele weitere Elemente in HTML, um Textsemantik zu definieren, 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 das ist bei weitem noch keine vollständige Liste). Hier lernen Sie mehr über das Markieren von Zitaten, Beschreibungslisten, Computercode und anderen verwandten Text, Tief- und Hochstellungen, Kontaktinformationen und mehr.

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 Syntax, die erforderlich ist, um einen Link zu erstellen, und diskutiert Best Practices für Links.

Markieren eines Briefes ^{Herausforderung}

Wir alle lernen früher oder später, einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Fähigkeiten in der Textformatierung zu testen. In dieser Herausforderung haben Sie einen Brief zu markieren, um Ihre HTML-Textformatierungsfähigkeiten, Hyperlinks und den richtigen Einsatz des HTML-<head>-Elements zu testen.

Strukturierung einer Inhaltsseite ^{Herausforderung}

Das Strukturieren einer Inhaltsseite, die bereit für das Layout mit CSS ist, ist eine sehr wichtige Fähigkeit, die es zu meistern gilt. In dieser Herausforderung werden Sie auf Ihre Fähigkeit getestet, darüber nachzudenken, wie eine Seite enden könnte, und geeignete strukturelle Semantiken auszuwählen, auf denen ein Layout aufgebaut werden kann.

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 man das <img>-Element eingehend verwendet, einschließlich der Grundlagen, das Annotieren mit Bildunterschriften mit <figure>, und wie es sich zu CSS-Hintergrundbildern verhält.

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 sehen wir uns an, wie Sie genau das mit den <video>- und <audio>-Elementen tun können; anschließend sehen wir uns an, wie Sie Untertitel zu Ihren Videos hinzufügen.

Mozilla-Splash-Seite ^{Herausforderung}

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

HTML-Tabellen-Grundlagen

Dieser Artikel bringt Ihnen die Grundlagen von HTML-Tabellen bei, einschließlich der Grundlagen wie Zeilen, Zellen, Überschriften, über mehrere Spalten und Zeilen spannenden Zellen und wie man alle Zellen in einer Spalte für Stylingzwecke gruppiert.

HTML-Tabellen-Barrierefreiheit

In diesem Artikel betrachten wir weitere HTML-Tabellenbarrierefreiheitsfunktionen wie Bildunterschriften/Zusammenfassungen, das Gruppieren Ihrer Zeilen in Kopf-, Körper- und Fußbereich, und das Definieren des Geltungsbereichs von Spalten und Zeilen.

Strukturierung einer Planetendatatabelle ^{Herausforderung}

In dieser Herausforderung stellen wir Ihnen einige Daten zu den Planeten unseres Sonnensystems 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 leistungsstarke Werkzeuge zur Interaktion mit Benutzern — sie werden meist zum Sammeln von Daten von Benutzern oder zur Steuerung einer Benutzeroberfläche verwendet. In diesem Artikel geben wir eine Einführung in die Grundlagen von Formularen und Schaltflächen.

Fehlerbehebung bei HTML

HTML zu schreiben ist gut, aber was, wenn etwas schiefgeht und Sie nicht herausfinden können, wo der Fehler im Code ist? Dieser Artikel führt Sie in einige Werkzeuge ein, die Ihnen helfen können, Fehler in HTML zu finden und zu beheben.

Diese Tutorials sind nicht Teil des Lernpfads, aber dennoch interessant - Sie sollten diese als weiterführende Ziele betrachten, die optional studiert werden können, wenn Sie mit den Haupt-Core-Artikeln fertig sind.

Einbindung von Vektorgrafiken in HTML

Vektorgrafiken sind in vielerlei Hinsicht sehr nützlich — sie haben kleine Dateigrößen und sind hoch skalierbar, sodass sie beim Einzoomen oder Vergrößern nicht pixelig werden. In diesem Artikel zeigen wir Ihnen, wie Sie eine in Ihre Webseite einbinden.

Von Object zu Iframe — allgemeine Einbettungstechnologien

Entwickler denken in der Regel daran, Medien wie Bilder, Videos und Audios in Webseiten einzubetten. In diesem Artikel machen wir einen gewissen Seitenschritt 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 ermöglichen es Ihnen, externe Ressourcen wie PDF-Dateien einzubetten.

Lernen Sie HTML und CSS, Scrimba ^{MDN Curriculum-Partner}

Der Kurs Learn HTML and CSS von Scrimba lehrt Ihnen HTML und CSS, indem Sie fünf großartige Projekte erstellen und bereitstellen, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von erfahrenen Lehrern geleitet werden.

Die Grundlagen von semantischem HTML, Scrimba ^{MDN Curriculum-Partner}

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

HTML lernen, Codecademy

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

• Übersicht: Kernlernmodule
• Weiter