Strukturierung von Inhalten mit HTML

Vor Beginn dieses Moduls benötigen Sie keine Vorkenntnisse in HTML, aber Sie sollten zumindest grundlegende Kenntnisse im Umgang mit Computern und bei der passiven Nutzung des Internets (d.h. nur ansehen und konsumieren von Inhalten) haben. Sie sollten eine grundlegende Arbeitsumgebung eingerichtet haben (wie im Abschnitt Installation von Grundsoftware beschrieben) und verstehen, wie man Dateien erstellt und verwaltet (wie im Abschnitt Umgang mit Dateien beschrieben). Beides sind Teile unseres Erste Schritte mit dem Web Moduls für absolute Anfänger.

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 der Sprache passen. Wir zeigen auch, wie eine typische HTML-Seite strukturiert ist und wie ein HTML-Element aufgebaut ist, und erklären andere wichtige grundlegende Sprachmerkmale. Unterwegs spielen wir mit etwas HTML, um Ihr Interesse zu wecken!

Was ist im head? Metadaten von Webseiten

Der head eines HTML-Dokuments ist der Teil, der nicht im Webbrowser angezeigt wird, wenn die Seite geladen wird. Er enthält Metadateninformationen wie das Seiten-<title>, Links zu CSS (falls Sie Ihren HTML-Inhalt 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 so zu strukturieren, dass ein Browser ein HTML-Dokument so anzeigen kann, wie es der Entwickler beabsichtigt. Dieser Artikel erklärt, wie HTML verwendet werden kann, um grundlegende Seitenstrukturen bereitzustellen, indem es Überschriften und Absätze definiert.

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 der Semantik fort und betrachtet HTML-Elemente, die Text Betonung und Wichtigkeit verleihen (ähnlich wie Kursiv- und Fettdrucktexte in Printmedien).

Listen

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

Dokumente strukturieren

Neben der Definition einzelner Teile Ihrer Seite (wie "ein Absatz" oder "ein Bild") verfügt HTML auch über eine Reihe von Blocklevel-Elementen, die verwendet werden, um Bereiche Ihrer Website zu definieren (wie "der Header", "das Navigationsmenü", "die Hauptinhalts-Spalte"). Dieser Artikel untersucht, wie man eine grundlegende Website-Struktur plant und das HTML schreibt, um diese Struktur darzustellen.

Erweiterte Textfunktionen

Es gibt viele andere 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 bei weitem keine vollständige Liste). Hier lernen Sie, wie Sie Zitate, Beschreibungslisten, Computercode und andere verwandte Texte, Tief- und Hochgestellt, Kontaktinformationen und mehr kennzeichnen.

Links erstellen

Links (auch als Hyperlinks bekannt) 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.

Einen Brief auszeichnen ^Challenge

Wir alle lernen früher oder später, einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Fähigkeiten zur Textformatierung 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-<head>-Elements auszeichnen sollen.

Eine Seite mit Inhalten strukturieren ^Challenge

Das Strukturieren einer Seite mit Inhalten, die bereit für die Gestaltung 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 am Ende aussehen könnte, und geeignete strukturelle Semantiken zu 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 Möglichkeit, Bilder (und andere interessantere Arten von Inhalten) in Webseiten einzubetten, hinzugefügt wurde. In diesem Artikel betrachten wir, wie man das <img>-Element im Detail verwendet, einschließlich der Grundlagen, der Beschriftung mit <figure>, und wie es sich zu CSS-Hintergrundbildern verhält.

HTML-Video und -Audio

Jetzt, wo wir uns damit vertraut gemacht haben, einfache Bilder zu einer Webseite hinzuzufügen, ist der nächste Schritt, Video- und Audioplayer zu Ihren HTML-Dokumenten hinzuzufügen! In diesem Artikel werden wir uns genau damit beschäftigen, indem wir die <video>- und <audio>-Elemente verwenden; anschließend werden wir abschließend betrachten, wie Sie Ihren Videos Untertitel hinzufügen.

Mozilla Splash-Seite ^Challenge

In dieser Herausforderung testen wir Ihr Wissen über einige der Techniken, die in den letzten Lektionen besprochen wurden, indem wir Ihnen auftragen, einige Bilder und Videos zu einer funky Splash-Seite über Mozilla hinzuzufügen!

HTML-Tabellen-Grundlagen

Dieser Artikel bringt Ihnen die Grundlagen von HTML-Tabellen bei, darunter grundlegende Dinge wie Zeilen, Zellen, Überschriften, wie man Zellen über mehrere Spalten und Zeilen spannt und wie man alle Zellen in einer Spalte gruppiert, um sie zu stylen.

HTML-Tabellen-Zugänglichkeit

In diesem Artikel betrachten wir weitere HTML-Tabellen-Zugänglichkeit Funktionen wie Bildunterschriften/Zusammenfassungen, das Gruppieren Ihrer Zeilen in Tabellenkopf-, Körper- und Fußzeilenabschnitte und das Festlegen des Geltungsbereichs für Spalten und Zeilen.

Strukturierung einer Planetendatentabelle ^Challenge

In dieser Herausforderung liefern wir Ihnen einige Daten über die Planeten in unserem Sonnensystem. 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 — am häufigsten werden sie verwendet, um Daten von Benutzern zu sammeln oder ihnen die Steuerung einer Benutzeroberfläche zu ermöglichen. In diesem Artikel bieten wir eine Einführung in die Grundlagen von Formularen und Schaltflächen.

HTML debuggen

HTML zu schreiben ist in Ordnung, aber was passiert, wenn etwas schiefgeht 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 dennoch interessant — Sie sollten diese als zusätzliche Ziele betrachten, um sie optional zu studieren, wenn Sie mit den Hauptartikeln des Kerns fertig sind.

Einbinden von Vektorgrafiken in HTML

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

Von Object zu Iframe – allgemeine Einbettungstechnologien

Entwickler denken häufig daran, Medien wie Bilder, Videos und Audio in Webseiten einzubetten. In diesem Artikel machen wir gewissermaßen einen seitlichen Schritt 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 Lernen der HTML-Grundlagen.

Learn HTML and CSS, Scrimba ^{MDN Lernpartner}

Scrimbas Learn HTML and CSS Kurs lehrt Ihnen HTML und CSS durch den Bau und das Deployment von fünf großartigen Projekten, mit unterhaltsamen interaktiven Lektionen und Herausforderungen, die von erfahrenen 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