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 Meine Seite

Artikel 1

Hier ist der Text des ersten Artikels.

Artikel 2

Hier ist der Text des zweiten Artikels.

Autor dieses Blogartikels


Meine Seite

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.

    Autor dieses Blogartikels


    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 ...

      Schauen wir uns der Reihe nach an, was in dieser Struktur enthalten ist:

      1. Das erste, was in ein HTML-Dokument eingefügt wird, ist die Versionsangabe (erste Zeile). Für eine korrekte Funktion sollte diese Zeile beim Layouten der Webseite angegeben werden.

      3. Dann kommt der Bereich für den oberen Rand der Seite (Header). Hierzu wird der Tag verwendet . Im Header geben wir den Namen unserer Seite an, indem wir den Seitentitel zwischen den Tags platzieren Und. Als nächstes wird die Kodierung des HTML-Dokuments angegeben (fünfte Zeile). Dies geschieht, um das kyrillische Alphabet korrekt anzuzeigen. Schließen des Header-Bereichs mit einem Tag.

      4. Meta-Tag „Beschreibung“ – eine Zusammenfassung der Seite, gedacht für Suchmaschinen. Dieses Tag ist wichtig für die Suchmaschinenoptimierung und muss ausgefüllt werden.

      5. Meta-Tag „Schlüsselwörter“ – Schlüsselwörter, die auf der Seite erscheinen können. Dieser Tag ist auch für Suchmaschinen gedacht. Dieses Tag wird heutzutage nur noch selten verwendet.

      6. Der Hauptteil der Seite wird mit einem Tag geöffnet und schließt entsprechend mit dem Tag ab

      . Der Hauptteil einer Webseite enthält normalerweise den Hauptinhalt – Text, Video, Audio und andere Informationen.

      Damit haben wir die Frage beantwortet, was HTML ist, und die Struktur eines HTML-Dokuments untersucht. Die in dieser Lektion erhaltenen Informationen sind grundlegende Konzepte, auf die Sie nicht verzichten können. Über komplexere Dinge werden wir in anderen Lektionen sprechen.

      Heute werden wir über die Semantik in HTML5 sprechen. Ich habe bereits einen kurzen Rezensionsbeitrag darüber geschrieben. Ich empfehle Ihnen, sich damit vertraut zu machen, bevor Sie diesen Artikel lesen. Jetzt werden wir uns dieses Thema genauer ansehen, wie man die semantische Struktur eines HTML5-Dokuments richtig und kompetent zusammenstellt.

      In diesem Artikel werden wir nach und nach eine HTML-Seite erstellen und diese mit semantischen HTML5-Tags dekorieren.

      Abbildung – Semantische Struktur für eine HTML5-Seite.

      DOCTYPE und Meta-Tags im Seitentitel

      Beginnen wir mit einer Standard-HTML5-Dokumentvorlage und fügen dem Kopf Meta-Tags hinzu:

      Seitentitel

      Ich habe ein Tag hinzugefügt welches für Schlüsselwörter zuständig ist. Und markieren der für die Seitenbeschreibung verantwortlich ist. Für die SEO-Optimierung sind diese Tags erforderlich. Außerdem ist es notwendig, das Tag korrekt auszufüllen . Der Titel der Seite muss für die gesamte Website eindeutig sein und im Titel das gesamte Wesen der Seite enthalten, für die er angegeben wurde.</p><p>Gehen wir weiter. HTML5 führt neue Tags ein, die zum Erstellen semantischer Markups in einem Dokument verwendet werden. Dies sind Header-, Navigations-, Haupt-, Artikel-, Neben-, Fußzeilen-Tags usw. Hinsichtlich der Anzeige funktionieren sie genauso wie normale. <div>Tags, das heißt, es handelt sich um Blockelemente. Aber falls <div>keine semantische Last aufweist, sollten Header, Nav, Main und andere nur sinnvoll verwendet werden.</p><h3>Seitentitel</h3><p>Der Seitenkopf wird im Header-Tag formatiert. Bitte beachten Sie, dass der Seitentitel mit dem h1-Tag geschrieben wird.</p><p> <!-- Header страницы --> <header> <h1>Seitentitel</h1> </header> </p><p>Wenn wir neben dem Titel auch einen Slogan haben, dann platzieren wir ihn in einem p, div oder span.</p><p> <!-- Header страницы --> <header> <h1>Seitentitel</h1> <p>Website-Slogan</p> </header> </p><p><b>Ein Hinweis zum H1-Tag</b></p><p>Es ist zu beachten, dass in HTML5 das H1-Tag verwendet wird, um den Titel des Containers anzugeben, in dem es sich befindet (dies kann eine Kopfzeile, ein Abschnitt, ein Artikel usw. sein).</p><p>Vor dem Aufkommen von HTML5-Tags war die Semantik etwas anders und unterschiedlich. In HTML4 konnte es also nur eine H1-Überschrift pro Seite geben! In der Regel war dies der Titel des Artikels oder der Titel der Seite (z. B. wenn es sich um eine Kategorieseite handelt, auf der mehrere Artikel angezeigt werden). H2 wurde für Zwischenüberschriften oder für Abschnitte des Hauptartikels verwendet. H3 für Unterabschnitte usw.</p><h3>Seitennavigation</h3><p>Das Design der Hauptnavigation der Website sollte im Navigations-Tag enthalten sein. Sie sollten auch bedenken, dass es als bewährte Vorgehensweise gilt, die Navigation mit Listenelementen zu gestalten.</p><p> <!-- Главная Навигация по сайту --> <nav> <ul> <li>Heim</li> <li>Portfolio</li> <li>Galerie</li> <li>Kontakte</li> </ul> </nav> </p><h3>Inhalt auf der Seite</h3><p>Der Hauptinhalt der Seite wird im Haupt-Tag formatiert. Dies kann ein einzelner Artikel oder mehrere Artikelvorschauen sein, wenn es sich um eine Blogseite mit mehreren Einträgen handelt. Sie können im Haupt-Tag keine Seitenleiste, Seitenkopfzeile, Fußzeile oder Hauptnavigation platzieren!</p><p> <!-- Основное содержимое страниц --> <main>...Inhalt der Hauptseite...</main> </p><h3>Artikeldesign</h3><p>Das Artikel-Tag wird zum Umschließen von Artikeln verwendet. Im Allgemeinen enthält dieses Tag einen Inhaltsblock, der aus dem Kontext der Seite herausgenommen und an anderer Stelle separat verwendet werden kann. Dies kann ein Artikel (der vollständige Text des Artikels oder eine Vorschau), ein Beitrag im Forum usw. sein.</p><p>Im folgenden Beispiel habe ich das Design des Artikels im Kontext im Haupt-Tag gezeigt. Der Artikel verfügt über einen Kopfblock mit dem Titel des Artikels. Das Veröffentlichungsdatum des Artikels wird durch ein spezielles Zeit-Tag angegeben, das als reguläres Inline-Element angezeigt wird. Der Zeittag verfügt über ein spezielles Attribut, in dem der Veröffentlichungszeitpunkt im Maschinenformat angegeben werden muss. Dies kann nur datetime="2015-09-30" oder mit Stunden, Minuten und Sekunden datetime="2015-09-30T15:25:55" sein. Der Parameter pubdate gibt an, dass der Artikel gleichzeitig mit dem Schreiben veröffentlicht wurde. Wenn es sich um Nachrichten handelt, kann es sein, dass die Nachrichtenzeit eins und die Veröffentlichungszeit unterschiedlich ist. Dazu müssen Sie das Zeit-Tag zweimal angeben und pubdate nur in das Tag einfügen, in dem die Veröffentlichungszeit angegeben ist.</p><p> <main> ... <!-- Статья --> <article> <!-- Шапка статьи если в шапке у нас больше чем заголовок --> <header> <!-- Заголовок статьи --> <h1>Artikelüberschrift</h1> <!-- Дата публикации статьи --> <time datetime="2015-09-30T15:25:55" pubdate>30. September</time> </header> <!-- Подзаголовок страницы --> <h2>Untertitel des Artikels</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Aus dem obigen Beispiel können Sie ersehen, dass die Header- und Footer-Tags innerhalb des Artikels verwendet wurden, um den Titel und die Fußzeile des Artikels hervorzuheben.</p><h3>Seitenleiste oder Spalte mit Widgets</h3><p>Für jedes einzelne Sidebar-Element verwenden wir einen Aside-Block. Darin ist der Titel mit dem h1-Tag formatiert. Eine Seitenleistenspalte könnte also so aussehen:</p><p> <!-- Сайдбар --> <div class="sidebar"> <!-- Виджет в сайдбаре --> <aside> <h1>Widget-Titel</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Die letzten Notizen</h1> ... </aside> <!-- Виджет в сайдбаре --> <aside> <h1>Beliebte Kommentare</h1> ... </aside> </div> </p><h3>Abschnitts-Tag</h3><p>Das Abschnitts-Tag wird verwendet, um eine Gruppe oder einen Abschnitt thematisch verwandter Inhalte darzustellen. Seine Verwendung ähnelt dem Tag „Artikel“, mit dem Hauptunterschied, dass der Inhalt innerhalb des Elements keine Bedeutung haben darf <section>außerhalb des Kontexts der Seite selbst. Es wird empfohlen, Tags zu verwenden ( <h1> – <h6>), um das Thema des Abschnitts anzugeben.</p><p>Um ein Beispiel für den Artikel zu geben, den Sie gerade lesen, könnten Sie jeden Absatz in ein Tag einschließen <section>. Beispielsweise kann das Abschnitts-Tag verwendet werden, um Inhaltsblöcke auf einer Zielseite hervorzuheben. Das klingt ähnlich wie die Definition eines div-Elements, das häufig als Container für Inhalte verwendet wird. Der Unterschied besteht darin, dass ein Div keine semantische Bedeutung hat und nichts über den darin enthaltenen Inhalt aussagt. Das Abschnitts-Tag hingegen wird verwendet, um deutlich anzuzeigen, dass der darin enthaltene Inhalt in seiner Bedeutung verwandt ist. Sie können einige Ihrer div-Tags durch Abschnitts-Tags ersetzen, aber stellen Sie sich immer die Frage: „Ist dieser Inhalt verwandt oder nicht?“</p><p>Ein Beispiel für die Verwendung des Abschnitts-Tags in einer Liste mit Städten:</p><p> <h1>Ein Event für sich</h1> <section> <header> <h2>Städte</h2> </header> <p>Begleiten Sie uns 2010 in diesen Städten.</p> <section> <header> <h3>Seattle</h3> </header> <p>Folge der gelben Steinstraße.</p> <section> <header> <h3>Boston</h3> </header> <p>Das ist Beantown für seine Freunde.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>Es ist so <em>Hübsch</em>.</p> <small>Unterkunft nicht vorgesehen.</small> </p><h3>Site-Fußzeile - Fußzeile</h3><p>Die Fußzeile der Website wird mit dem Tag gestaltet <footer></p><p> <!-- Подвал сайта --> <footer> <p class="copyright">© 2015 Website Copyright</p> </footer> </p><h3>Abschluss</h3><p>Sie können das HTML5-Outliner-Tool verwenden, um die Seitenstruktur zu überprüfen. Es zeigt die Seitenstruktur nach Blöcken und Überschriften.</p><p>Die Semantik in HTML5 ist nicht auf die oben im Artikel angegebenen Tags beschränkt. Mithilfe der obigen Beispiele können Sie jedoch Ihr Markup aktualisieren und Ihre Website suchmaschinenfreundlicher gestalten, was zu einem höheren Ranking Ihrer Website in den Suchergebnissen führt.</p><p>Um dieses Thema fortzusetzen, können Sie andere neue HTML5-Tags erkunden. Sowie Mikroformate zum Entwerfen und Strukturieren von Daten, wie z. B. schema.org</p><p><b>Ein wichtiger Hinweis zur Verwendung von HTML5-Tags.</b> Die Spezifikation legt keine strengen Regeln für die Verwendung semantischer Tags fest, sondern gibt lediglich Empfehlungen für deren Verwendung. Wenn Sie nicht verstehen oder nicht wissen, wo und welches HTML5-Tag Sie verwenden sollen, ist es besser, ein div zu verwenden, um die Struktur des Dokuments nicht zu beschädigen oder zu zerstören.</p><p><b>Artikel und Materialien</b></p> <ul><li>1. HTML-Dokumente sind Strukturdokumente.</li> <li>2. Die Namen von Elementen können in jedem Fall geschrieben werden.</li> <li>3. Attributnamen können in jedem Fall geschrieben werden.</li> <li>4. Attributwerte hängen von der Groß- und Kleinschreibung ab, insbesondere von Adressen (ein Merkmal von Unix-Betriebssystemen ist die unterschiedliche Interpretation von Zeichen in verschiedenen Registern, also Dateien).</li> </ul><p>picture.gif und picture.GIF sind unterschiedlich!).</p> <ul><li>5. Elementnamen dürfen keine Leerzeichen enthalten.</li> <li>6. Wenn Attributwerte Leerzeichen enthalten, müssen sie in Anführungszeichen gesetzt werden.</li> <li>7. Zusätzliche Leerzeichen, Tabulatoren und Wagenrückläufe werden ignoriert und zu einem einzigen Leerzeichen komprimiert.</li> <li>8. Elemente können ineinander verschachtelt werden. In diesem Fall ist die Schachtelungsregel zu beachten. Innerhalb des verschachtelten Elements muss zusätzlich zum öffnenden Tag auch ein schließendes Tag vorhanden sein. Kreuzungen sind falsch:</li> </ul><h1>HTML-Dokumentstruktur</h1> <p>9. Unbekannte Elemente und Attribute werden von Browsern ignoriert („Fehlertoleranz“).</p> <p>Die meisten Dokumente verfügen über Standardelemente wie Überschriften, Absätze oder Listen. Mithilfe von HTML-Tags können Sie diese Elemente kennzeichnen und so Webbrowsern die Mindestinformationen zur Anzeige dieser Elemente bereitstellen, während im Allgemeinen die Gesamtstruktur und Informationsvollständigkeit der Dokumente erhalten bleibt. Zum Lesen eines HTML-Dokuments ist lediglich ein Webbrowser erforderlich, der die HTML-Tags interpretiert und das Dokument so anzeigt, wie es vom Autor beabsichtigt ist.</p> <p>Wenn ein Webbrowser ein Dokument empfängt, bestimmt er, wie das Dokument interpretiert werden soll. Das allererste Tag, das im Dokument erscheint, muss das Tag sein <HTML>. Dieses Tag teilt dem Webbrowser mit, dass das Dokument mit HTML geschrieben wurde.</p> <p><b>Kommentare in HTML.</b> Wie jede Sprache ermöglicht Ihnen HTML das Einfügen von Kommentaren in den Hauptteil eines Dokuments, die bei der Übertragung des Dokuments über das Netzwerk gespeichert, aber nicht vom Browser angezeigt werden. Oft sind bestimmte Tags oder ganze syntaktische Strukturen in Kommentaren älterer Browserversionen „versteckt“, die diese nicht verarbeiten können. Kommentare können überall in einem Dokument und in beliebiger Menge erscheinen. Es ist zu beachten, dass Kommentare die Größe des Dokuments und damit die Ladezeit erhöhen.</p> <p><b>Der allgemeine Kopfteil des Dokuments.</b> Das Dokumentkopf-Tag sollte unmittelbar nach dem Tag verwendet werden <HTML>und nirgendwo sonst im Hauptteil des Dokuments. Dieses Tag stellt eine allgemeine Beschreibung des Dokuments dar. Start-Tag <HEAD>direkt vor dem Tag platziert <TITLE>und andere Tags, die das Dokument beschreiben, sowie das End-Tag</head> unmittelbar nach dem Ende der Dokumentbeschreibung platziert.</p> <p><b>Dokumenttitel.</b> Die meisten Webbrowser zeigen den Inhalt des Tags an <TITLE>im Titel des Fensters, das das Dokument enthält, und in der Lesezeichendatei, sofern dies vom Webbrowser unterstützt wird. Titel durch Tags begrenzt <TITLE>Und, in Tags platziert . Der Dokumenttitel erscheint nicht, wenn das Dokument selbst im Fenster angezeigt wird.

      Dokumenttext-Tags. Dokumentkörper-Tags identifizieren die Komponenten eines HTML-Dokuments, das in einem Fenster angezeigt wird. Der Hauptteil des Dokuments kann Links zu anderen Dokumenten, Texten und anderen formatierten Informationen enthalten.

      Hauptteil des Dokuments. Der Hauptteil des Dokuments muss zwischen den Tags stehen Und. Dies ist der Teil des Dokuments, der als Text und grafische (semantische) Informationen Ihres Dokuments angezeigt wird.

      Überschriftenebenen<Нх>. Die erste Überschriftenebene (die größte) wird mit der Nummer 1 bezeichnet, die nächste mit 2 usw. bis zur Nummer 6. Die meisten Browser unterstützen die Interpretation von sechs Überschriftenebenen und definieren jede davon mit ihrem eigenen Stil. In den meisten Fällen wird der Text einer solchen Kopfzeile fett dargestellt und nach dem Text steht eine Leerzeile. Es ist wichtig, dass diese Tags die logische Struktur des Dokuments bestimmen und an der Indexierung durch Internet-Suchmaschinen teilnehmen. Header über Ebene sechs sind kein Standard und werden vom Browser möglicherweise nicht unterstützt.

      Absatz-Tag<Р>. IN Im Gegensatz zu den meisten Textverarbeitungsprogrammen werden Wagenrückläufe in einem HTML-Dokument ignoriert. Der Browser teilt Absätze nur, wenn ein Tag vorhanden ist<Р>. Wenn Sie Absätze nicht mit einem Tag trennen<Р>, dann sieht das Dokument wie ein großer Absatz aus.

      Vorformatiertes Text-Tag

      .
       Etikett 
      Ermöglicht die Darstellung von Text mit einer bestimmten Formatierung auf dem Bildschirm.  Vorformatierter Text endet mit einem End-Tag
      . Innerhalb von vorformatiertem Text können Sie Folgendes verwenden: Zeilenvorschub, Tabulatorzeichen (Verschiebung um acht Zeichen nach rechts), unverhältnismäßige Courier-Schriftart, die vom Browser installiert wird.

      Listen Sie Tags auf. Es gibt drei Haupttypen von Listen in einem HTML-Dokument: nummerierte Listen, Aufzählungslisten und Beschreibungslisten.

      Sie können verschachtelte Listen erstellen, indem Sie verschiedene Listen-Tags verwenden oder diese in anderen Listen-Tags wiederholen. Dazu müssen Sie lediglich ein Tag-Paar (Anfang und Ende) in das andere einfügen. Ob verschachtelte Listenelemente dieselben Markierungen haben, die das Listenelement kennzeichnen, hängt vom Browser ab.

      Nummerierte Listen. IN In einer nummerierten Liste fügt der Browser die Artikelnummern automatisch der Reihe nach ein. Das heißt, wenn Sie ein oder mehrere Elemente aus einer nummerierten Liste löschen, werden die verbleibenden Nummern automatisch neu berechnet.

        und endet mit dem Tag
    • .

      Listen mit Aufzählungszeichen. Für Bei Listen mit Aufzählungszeichen verwendet der Browser normalerweise Aufzählungszeichen für das Listenelement. Der Markertyp wird normalerweise vom Browserbenutzer konfiguriert.

      Eine nummerierte Liste beginnt mit einem Start-Tag

        und endet mit dem Tag
      . Jedes Listenelement beginnt mit einem Tag<ы>.

      Schriftartformatierung. HTML ermöglicht zwei Ansätze zur Schriftartenauswahl von Textfragmenten. Einerseits können Sie direkt angeben, dass die Schriftart in einem bestimmten Textabschnitt fett oder kursiv sein soll, also Ändern Sie den physischen Stil des Textes. Andererseits ist es möglich, einen Text mit einem nicht normalen logischen Stil zu markieren und die Interpretation dieses Stils dem Browser zu überlassen.

      Grafiken in einem HTML-Dokument. Eine der attraktivsten Funktionen des WEB ist die Möglichkeit, grafische und andere Datentypen in ein HTML-Dokument einzubinden.

      Es gibt zwei Möglichkeiten, Grafiken in HTML-Dokumenten zu verwenden. Die erste besteht darin, grafische Bilder in ein Dokument einzubetten, wodurch der Benutzer Bilder direkt im Kontext anderer Elemente des Dokuments sehen kann. Dies geschieht über das Tag . Dieses Tag ist gepunktet, d. h. es schließt nicht. Tag-Syntax:

      Der erforderliche Parameter hat dieselbe Syntax wie eine Standard-URL. Diese URL teilt dem Browser mit, wo die

      Zeichnung. Die Zeichnung muss in einem vom Browser unterstützten Grafikformat gespeichert werden. Heute sind dies die Formate GIF, JPG, PNG. Sie werden von den meisten Browsern unterstützt.

      ALT="Text"

      Dieses optionale Element gibt Text an, der in einem Browser angezeigt wird, der keine Grafiken unterstützt oder Bildgrafiken deaktiviert ist. Typischerweise handelt es sich hierbei um eine kurze Beschreibung des Bildes, das der Benutzer auf dem Bildschirm sehen könnte oder sehen wird. Fehlt dieser Parameter, zeigen die meisten Browser anstelle des Bildes einen leeren Rahmen an. Etikett Empfohlen, wenn Benutzer einen nicht-grafischen Browser wie Lynx verwenden und für die Suchmaschinenindizierung. Der Text ist auch sichtbar, wenn Sie den Mauszeiger einige Zeit gedrückt halten, ohne über das Bild zu fahren, als System-Tooltip unter dem Cursor.

      In den meisten Browsern können Sie ein Hintergrundbild in Ihr Dokument einfügen, das wie Badezimmerfliesen dupliziert wird und als Hintergrund des gesamten Dokuments erscheint. Dies ist der zweite Weg. Einige Benutzer mögen Hintergrundgrafiken, andere nicht. Als Hintergrund für die meisten Dokumente eignet sich in der Regel ein unauffälliges, durchscheinendes Muster (Tapete).

      Hypertext-Links sind eine Schlüsselkomponente, die das WEB für Benutzer attraktiv macht. Durch das Hinzufügen von Hypertext-Links (im Folgenden „Links“ genannt) sorgt der Benutzer dafür, dass die Dokumentenmenge verknüpft und strukturiert wird, sodass er die benötigten Informationen so schnell und bequem wie möglich erhalten kann.

      Links haben ein Standardformat, das es dem Browser ermöglicht, sie zu interpretieren und je nach Art des Links die erforderlichen Funktionen (Aufrufmethoden) auszuführen. Links können auf ein anderes Dokument oder eine bestimmte Stelle innerhalb eines Dokuments verweisen oder andere Funktionen ausführen, beispielsweise das Anfordern einer Datei. Sie können Text, ein Bild oder beides als Hyperlink verwenden.

      Linkstruktur in einem HTML-Dokument. Damit der Browser einen Link zu einer URL anzeigt, müssen Sie Text oder ein Bild innerhalb des Hyperlink-Tags platzieren. Die HTML-Syntax lautet wie folgt:

      <А HREF="URL">Text-oder-Bild-das-als-Link-hervorgehoben-wird

      Etikett<А HREF="URL">öffnet die Beschreibung des Links und des Tags– schließt es. Jeder Text, der sich zwischen diesen beiden Tags befindet, wird vom Webbrowser auf besondere Weise hervorgehoben. Normalerweise wird dieser Text unterstrichen und hervorgehoben angezeigt. Das Bild wird von einem rechteckigen Rahmen eingerahmt. Der Text, der die URL darstellt, wird vom Browser nicht angezeigt, sondern nur zur Ausführung der beabsichtigten Aktionen verwendet, wenn der Link aktiviert wird (normalerweise durch Klicken auf hervorgehobenen oder unterstrichenen Text).

      Links zu Tags im Dokument. Sie können Links zu verschiedenen Bereichen oder Abschnitten desselben Dokuments erstellen, indem Sie spezielle ausgeblendete Beschriftungen für diese Abschnitte verwenden. Dadurch können Sie innerhalb eines Dokuments schnell von Abschnitt zu Abschnitt wechseln, ohne den Bildschirm scrollen zu müssen. Sobald der Benutzer auf den Link klickt, wird er vom Browser in den angegebenen Abschnitt des Dokuments verschoben und die Zeile mit der Beschriftung für diesen Abschnitt wird in der ersten Zeile des Browserfensters platziert (sofern die „Länge“ von das Dokument im Browserfenster genügt).

      Jedes HTML-Dokument muss mit dem Tag beginnen < HTML> und enden Sie mit dem Tag HTML> . Diese Tags geben an, dass die Zeilen zwischen ihnen ein einzelnes HTML-Dokument darstellen. Darüber hinaus können Sie erkennen, dass eine HTML-Datei als Ganzes ein Element der HTML-Sprache ist.

      Außerdem muss das HTML-Dokument die Elemente HEAD (Dokumentinformationen) und BODY (Dokumenthauptteil) enthalten.

      DokumentbereichKOPF

      Der HEAD-Abschnitt eines Dokuments definiert seinen Titel und enthält außerdem zusätzliche Informationen über das Dokument für den Browser. Dieser Abschnitt ist optional, es wird jedoch empfohlen, ihn immer in Ihren HTML-Dokumenten zu verwenden, da ein gut geschriebener Header sehr nützlich sein kann.

      Der Header-Abschnitt beginnt mit dem Tag < KOPF> und folgt sofort dem Tag . Zwischen den öffnenden und schließenden Tags des HEAD-Elements befinden sich weitere Header-Elemente.

      Titel des Dokumenttitels

      Um einem HTML-Dokument einen Namen zu geben, ist das Tag < TITEL> . Dieser Name wird im Titel des Browserfensters angezeigt. Der Titel wird zwischen die Tags geschrieben Und und ist eine Textzeile. Die Länge dieser Zeile kann beliebig sein, es wird jedoch empfohlen, nicht mehr als 60 Zeichen zu haben. Das TITLE-Element sollte nur im HEAD-Abschnitt erscheinen.

      DokumentbereichKÖRPER

      Dieser Abschnitt des Dokuments enthält die Informationen, die im Browserfenster angezeigt werden. Der BODY-Abschnitt muss mit dem Tag beginnen < KÖRPER> und enden Sie mit dem Tag KÖRPER> , zwischen denen sich die HTML-Elemente befinden, die den Inhalt des Dokuments bilden.

      ArtikelspezifikationKÖRPER

      Etikett verfügt über eine Reihe von Attributen, die das Erscheinungsbild des Dokuments bestimmen. Nachfolgend finden Sie die Tag-Spezifikation .

      TEXT="Textfarbe"

      BGCOLOR="Hintergrundfarbe"

      BACKGROUND="Adresse des Hintergrundbildes"

      Das TEXT-Attribut gibt die Schriftfarbe für das gesamte Dokument in RGB- oder Zeichennotation an. Standardmäßig (wenn dieses Attribut nicht angegeben ist) werden die Browsereinstellungen verwendet.

      Das BGCOLOR-Attribut gibt die Hintergrundfarbe des Dokumentbrowserfensters in RGB oder symbolischer Notation an. Standardmäßig werden die Browsereinstellungen verwendet.

      Mit dem BACKGROUND-Attribut können Sie die Adresse und den Namen des als Hintergrund verwendeten Bildes angeben. Diese Zeichnung wird im Hintergrund des Dokuments reproduziert und verteilt.

      Die Attribute LINK, VLINK und ALINK geben die Farben von Hyperlinks in RGB oder symbolischer Notation an. Standardmäßig werden die Browsereinstellungen verwendet. Ein nicht besuchter Hyperlink ist ein Hyperlink, der noch nicht zum Navigieren zu einem anderen Dokument verwendet wurde. Ein besuchter Hyperlink ist ein Hyperlink, der bereits zum Navigieren zu einem anderen Dokument verwendet wurde. Aktiver Hyperlink – ein Hyperlink zu dem Dokument, zu dem gerade navigiert wird.

      Tipps zur Verwendung von BODY-Tag-Attributen

       Wenn Sie im BODY-Tag mindestens eine Farbe angeben, geben Sie auch die anderen an. Dies liegt daran, dass der Benutzer die Farbeinstellungen seines Browsers so einstellen kann, wie es für ihn bequemer ist. Die Angabe nur einer Farbe kann bei manchen Benutzern dazu führen, dass der Text mit der Hintergrundfarbe verschmilzt. Daher wird es schwierig sein, das Dokument anzuzeigen.

       Wählen Sie die Textfarbe so, dass sie mit der Hintergrundfarbe oder den Hauptfarben des Bildes „funktioniert“. Beispielsweise kann Rot auf Grün für eine beträchtliche Anzahl von Menschen zu ernsthaften Problemen führen.

       Sowohl BGCOLOR als auch BACKGROUND können im BODY-Element angegeben werden. In diesem Fall gibt der Browser BACKGROUND den Vorzug, wenn das Hintergrundbild jedoch nicht geladen werden kann, wird BGCOLOR verwendet. Versuchen Sie daher, die Hintergrundfarbe so einzustellen, dass sie der Farbe des Hintergrundbilds ähnelt, um die Farbbalance des Dokuments nicht zu beeinträchtigen.



       

      Es könnte nützlich sein zu lesen: