Die Struktur eines HTML-Dokuments besteht aus den Haupt-Tags. Korrekte HTML-Dokumentstruktur und Seitencode
Guten Tag, Leser und Gäste des Blogs. Ich bin wieder bei Ihnen, Ihrem bescheidenen Assistenten beim Erlernen der Grundlagen der Hypertext-Markup-Sprache HTML. In diesem Artikel möchte ich auf das Thema Strukturierung von Website-Seiten eingehen und Ihnen die wichtigsten Tags der Sprache näher vorstellen.
Das Thema Website-Struktur in HTML ist eines der wichtigsten und bildet die Grundlage für die Website-Erstellung. Nach der Beherrschung können Sie ganz einfach ein individuelles Design für Ihre Seiten und Websites erstellen. Für eine detaillierte Auseinandersetzung mit dem Thema bietet der Artikel nicht nur theoretisches Material, sondern auch ein konkretes Beispiel für die Erstellung eines Blogs. Jetzt ist es Zeit, mit dem Lernen zu beginnen!
Sieht gruselig aus, einfach zu programmieren
Für diejenigen, die besonders unruhig sind, beginne ich die Einleitung mit einem Beispiel. Nachfolgend finden Sie einen einfachen Programmcode, den ich speziell für diesen Artikel geschrieben habe. Mach dir keine Sorge. Jeder Schritt wird ausführlich erklärt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
Artikel 1Hier ist der Text des ersten Artikels. Artikel 2Hier ist der Text des zweiten Artikels. |
Erstellen einer Site-Struktur mit HTML
- Grundlegende Hypertext-Markup-Language-Tags
- Neue Tags, die mit HTML 5 geliefert wurden
- Beispiel für die Seitenstrukturierung
Artikel 1
Hier ist der Text des ersten Artikels.
Artikel 2
Hier ist der Text des zweiten Artikels.
Dieser Code erstellt eine Blog-Seite, die wiederum in eine Kopfzeile, ein Menü, ein Hauptfenster (Layout), das ein Inhaltsfenster (Inhalt) und eine Seitenleiste (Seitenleiste) enthält, sowie eine „Fußzeile“ (Fußzeile) unterteilt ist ).
Beginnen wir die Nachbesprechung mit der ersten Zeile.
ist ein Sprachelement, dessen Hauptaufgabe darin besteht, den Typ des Webdokuments anzugeben. Auf diese Weise bestimmt der Browser, nach welchem Standard die Seite angezeigt werden soll, da es heute mehrere Versionen von HTML gibt.
Es lohnt sich jedoch, auf eine neue Spracheinheit namens zu achten Stil. Wie Sie vielleicht anhand des Namens erraten haben, legt dieses Tag den Stil fest und passt die Anordnung von Objekten auf der Seite an.
Logischerweise kann ich davon ausgehen, dass Ihnen sofort die Frage in den Sinn kam: „Was für ein unverständlicher Code befindet sich in diesem Teil des Programms?“ Es sieht überhaupt nicht nach HTML aus!“ Und die Antwort lautet: Es ist nicht das HTML, das in den Style-Tag geschrieben wird, sondern der CSS-Code. Wie bereits erwähnt handelt es sich dabei um ein Tool zur Formatierung des Erscheinungsbilds von Websites.
Abt bezieht sich auf Markup-Language-Block-Tags. Es dient dazu, bestimmte Fragmente zu isolieren und weiter zu modifizieren.
Blöcke werden mithilfe von Cascading Style Sheets verwaltet, d. h. CSS-Sprache Die Beispielwebseite verfügt über drei Blöcke, die mithilfe von Klassenattributen gestaltet sind.
Somit enthält der Code:
- Layout – Block, der für den Hauptteil der Seite verantwortlich ist,
- Seitenleiste – Seitenleiste (normalerweise für die Navigation erstellt),
- Inhalt – der Block, in dem sich Blogbeiträge befinden.
Im Element mit der Sidebar-Klassendefinition definiere ich mithilfe der Elemente eine ungeordnete Liste
- Und
- . In einem Block mit einem Stilklasseninhalt – Überschriften-Tags
und Absatz
Schauen wir uns nun den Block genauer an
.HTML oder doch HTML 5? Wie erkennt man es?
In einem Div mit der Layout-Style-Klasse gibt es neben anderen Blöcken auch Tags wie Header, Menü und Footer. Im Gegensatz zu den anderen Elementen im Beispiel sind diese spezifisch für die HTML 5-Plattform.
Daher ist der Header ein Element der Hypertext-Markup-Sprache, das normalerweise den Header von Seiten oder Abschnitten einer Website erstellt, in die der Titel eingefügt wird. Es ist zu beachten, dass der Internet Explorer-Browser keine Header bis Version 8 unterstützt, sondern deren Inhalt anzeigt.
Der Hauptzweck des Menü-Tags besteht darin, Menüelemente anzuzeigen. Ähnlich wie bei den Elementen zum Erstellen nummerierter und nicht nummerierter Listen ist im Menücontainer jedes Inhaltselement in einem gepaarten Tag enthalten
- .
Und schließlich die Spracheinheit für die Fußzeile. Im Webentwickler-Jargon wird dies manchmal als „Fußzeile“ einer Seite bezeichnet. Dieses Tag befindet sich am Ende der Seite oder der Abschnitte. Die Fußzeile enthält normalerweise Informationen über die Urheberschaft einer bestimmten Ressource, das Erstellungsdatum des Dokuments, Hintergrundinformationen oder andere Materialien, die keine besondere Aufmerksamkeit der Leser der Webressource erfordern.
Tools zum Erstellen von Webressourcen
Zur Entwicklung von Internetseiten wurden zahlreiche Softwareprodukte entwickelt. Herkömmlicherweise lassen sie sich in einfache Editorprogramme und professionell ausgerichtete Softwareprodukte unterteilen.
Wenn Sie eine Website erstellen, müssen Sie sich zunächst vorstellen, wie die Webseite aufgebaut ist. Dies ist eine Art „Fundament“ beim Erstellen von Websites. Daher empfiehlt es sich, zumindest über Grundkenntnisse in HTML zu verfügen, bevor man sich mit komplexeren Technologien zur Website-Erstellung beschäftigt. In dieser Lektion werden wir uns mit ihnen vertraut machen HTML, lass es uns klären HTML-Dokumentstruktur und festigen Sie das erworbene Wissen anhand praktischer Beispiele.
Was ist HTML?
HTML steht für HyperText Markup Language. Diese Sprache ist dafür verantwortlich, wie Hypertext genau auf den Seiten der Website angezeigt wird. Lassen Sie uns nun herausfinden, was Hypertext ist. Es ist kein Geheimnis, dass eine einzelne Webseite viele verschiedene Arten von Informationen enthalten kann, sei es Text, einige Tabellen, Grafiken, Videos, Audio usw. Alle diese Informationen können also in einem Wort zusammengefasst werden – Hypertext.
Beachten Sie, dass HTML eine Auszeichnungssprache und keine Programmiersprache ist. Diese Sprache hat keine logischen Funktionen und es ist unmöglich, in ihr mathematische Berechnungen durchzuführen. HTML-Seiten haben eine Erweiterung .html oder .htm und werden von Browsern verarbeitet – IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera usw.
Lassen Sie uns nun herausfinden, wie der Browser versteht, was und wie auf einer Webseite angezeigt werden soll. Es ist sehr einfach. Die Hypertext-Auszeichnungssprache HTML verfügt über integrierte Befehle, die Tags genannt werden. An ihnen orientiert sich der Browser.
HTML-Dokumentstruktur
Jedes HTML-Dokument (Webseite) muss eine bestimmte Struktur haben. Dadurch werden mögliche Probleme beim Öffnen von Seiten in Browsern vermieden. Schauen wir uns als Beispiel eine Seite an, die den folgenden HTML-Code enthält:
HTML-Dokumentstruktur ...
- .