Grundgerüst einer Homepage Juergen Kneller

HTML: Das Grundgerüst einer Homepage

Eine HTML-Datei enthält Text, Textauszeichnungen und Präsentationsanweisungen. Die Auszeichnungen und Anweisungen (auch "tags" genannt) stehen in spitzen Klammern. Es gibt meist ein beginnendes und ein beendendes "tag", wobei das beendende tag einen slash "/" enthält. (Bsp.: <tag-an>Hier steht ein Text</tag-aus>)

Zunächst benötigt jede HTML-Datei ein HTML-Grundgerüst, das aus HTML-tags besteht:

Das Grundgerüst einer HTML-Datei:

  <html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
  </html>

Eine HTML-Datei wird immer von einem öffnenden <html> -Tag und einem schließenden </html> -Tag eingerahmt. Dazwischen gibt es den HTML-Kopf <head>...</head> (enthält z.B. den Titel einer HTML-Seite) und den HTML-Körper <body>...</body> (enthält alles, was im Browserfenster angezeigt werden soll, also Texte, Bilder,...).

Eine kleine HTML-Datei könnte so aussehen:

  <html>
    <head>
      <title>Meine Homepage</title>
    </head>
    <body bgcolor="red" text="white">
      <h1>Willkommen</h1>
      <hr>
      Dies ist meine
      <b><i>erste</i></b> kleine Homepage!
    </body>
  </html>

Im head-Bereich wird ein Titel definiert. Zwischen dem öffnenden <title> und schließenden </title> steht der Text, der oben in der Browserleiste angezeigt wird. Im body-Tag stehen zwei Einstellungen/Attribute, die für die gesamte HTML-Seite gelten. Hintergrundfarbe rot (bgcolor="red") und Textfarbe weiss (text="white"). Im body-Bereich folgen die Inhalte, die im Browserfenster angezeigt werden sollen. Als Überschrift (headline) der Größe "1" den Text "Willkommen" darstellen, dann eine Trennlinie (horizontal rule) zeigen, anschließend Text ausgeben, wobei das Wort "erste" fett (bold) und kursiv (italic) erscheinen soll.

Vorgehensweise zum Testen einer Homepageseite:
Das HTML-Grundgerüst in einen ASCII-Editor (Bsp.: Notepad) eingeben und als HTML-Datei z.B. als "C:\temp\test.html" speichern. Dann den Browser starten und dort als Adresse (URL) "C:\temp\test.html" eingeben. Es sollte die HTML-Datei angezeigt werden. Nun im Editor Änderungen/Erweiterungen vornehmen, die HTML-Datei speichern und im Browser auf Aktualisieren klicken. Die Änderungen werden im Browser angezeigt...