Eine vollständige Webseite mit HTML


Eine vollständige HTML-Datei


Betrachten wir nun den Quelltext einer vollständigen HTML-Datei, um die Funktionsweise von HTML zu verstehen. Der Quelltext lässt sich so wie hier abgedruckt in einem Texteditor eingeben und als Datei mit der Endung .html oder .htm abspeichern. Aus Gründen der Übersichtlichkeit ist der abgedruckte Quelltext mit Einrückungen versehen. Die Einrückungen verdeutlichen die Struktur der HTML-Datei.


Quelltext und Verschachtelungsstruktur



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
      <head>
         <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
         <title>Gemeinden mit A...</title>
      </head>
      <body>
         <div id="Kopf">
            <h1>Gemeinden mit A...</h1>
         </div>
         <div id="Inhalt">
            <p>Die Links führen zu den offiziellen Internet-Präsenzen der jeweiligen Gemeinden!</p>
            <ul>
               <li><a href="http://www.aachen.de/">Aachen</a> - Regierungsbezirk Köln</li>
               <li><a href="http://www.aalen.de/">Aalen</a> - Regierungsbezirk Stuttgart</li>
               <li><a href="http://www.achern.de/">Achern</a> - Regierungsbezirk Freiburg</li>
               <li><a href="http://www.ahaus.de/">Ahaus</a> - Regierungsbezirk Münster</li>
               <li><a href="http://www.ahlen.de/">Ahlen</a> - Regierungsbezirk Münster</li>
            </ul>
         </div>
      </body>
</html>


Eine vollständige Webseite mit HTML
Eine vollständige Webseite mit HTML

Markup-Sprachen wie HTML sind für die Abbildung von verschachtelten Datenstrukturen ausgelegt. Der Quelltext ist am leichtesten nachvollziehbar, wenn er als Schachtelstruktur verstanden wird. Die äußerste Schachtelebene stellt das html-Element dar, markiert durch den Anfang mit der Zeichenfolge <html> und das Ende mit </html>. Die Dokumenttypangabe vor <html> lassen wir an dieser Stelle außen vor.

Das html-Element schließt zwei bedeutende Elemente ein. Das erste dieser Elemente ist das head-Element, markiert durch den Anfang <head> und das Ende </head>. Das head-Element ist für HTML-Kopfdaten gedacht, wie zum Beispiel den Titel des Dokuments, markiert durch den Anfang <title> und das Ende </title>. Das zweite Element innerhalb des html-Elements ist das body-Element für die im Browser sichtbaren Inhalte, markiert durch <body> bzw. </body>.

Innerhalb des body-Elements enthält das Beispiel-Listing weitere Elemente, auf die wir an dieser Stelle nicht weiter eingehen. Zu erkennen ist jedoch, dass die Verschachtelung der Elemente den gleichen Gesetzen folgt: Elemente beginnen und enden innerhalb anderer Elemente.


Kontakt

Email: Diese E-Mail-Adresse ist vor Spambots gesch├╝tzt! Zur Anzeige muss JavaScript eingeschaltet sein!
Tel : 038305 / 564 989
Erstellt mit HTML5 und CSS3 - © 2019  HTML-Lernen