3.2. Grundelemente

Beispiel eines einfachen HTML-Dokumentes:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.2</title>
        </head>
        <body>
         <p>Hello World!</p>  
        </body>
       </html>  
      

Dokumententyp-Definition: Zu Beginn des HTML-Dokumentes muss dem Browser mitgeteilt werden, um welche Version von HTML es sich handelt. Wir verwenden die folgende Kopfzeile: <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. Wir verwenden also die öffentlich (PUBLIC) verfügbare HTML-Version des World-Wide-Web-Konsortiums (W3C). Die von und benutzte Dokumententyp-Definition (DTD) Version ist HTML 4.01 Transitional in der Sprache Englisch (EN). Achtung: Die Sprachangabe bezieht sich nicht auf den Text, sondern auf die Formatierungsangaben!

html-Element: Das Element <html>...</html> schließt alle html-Anweiseungen ein. Nur Anweisungen, die innerhalb dieses Elementes liegen, werden als html interpretiert.

head-Element: Das Element <head>...</head> schließt alle html-Anweisungen ein, die sich auf den gesamten folgenden Textkörper beziehen. Hier finden sich vor allem Verweise auf Dateien für Formatierungsvorlagen, Scripte und Applets, die im Text verwendet werden.

title-Element: Das Element <title>...</title> schließt den Speichernamen des Dokumentes ein, der in der blauen Kopfzeile des Browserfensters erscheint.

body-Element: Das Element <body>...</body> schließt den kompletten Textkörper ein.

p-Element: Das Element <p>...</p> schließt einen Absatz (Paragraphen) ein.

Aufgabe 3.2

  1. Öffne das Programm Editor unter Start/Programme/Zubehör.
  2. Schreibe das listing 3.2 in das Textfenster
  3. Speichere den Text unter dem Namen listing3.2.html. Dazu muss im Dialogfenster die Option Textdateien durch die Option alle Dateien ersetzt werden, sonst wird automatisch die für uns unbrauchbare Endung .txt angehängt.
  4. Beende Editor und öffne anschließend die gespeicherte Datei listing3.2.html wieder durch Doppelklick. listing3.2.html wird nun durch den Browser geöffnet. Dieser zeigt zunächst nur den Text Hello World! an.
  5. Wähle im Browser die Option Ansicht/Quelltext. Der Browser startet selbstä:ndig den Editor und zeigt das vollständige Listing an. Ersetze im Listing den Text Hello World! durch Hallo Ihr! und wähle die Option Datei/Speichern.
  6. Wechsle wieder zum Browserfenster und wähle die Option Ansicht/Aktualisieren. Der Browser zeigt jetzt den gänderten Text Hallo Ihr! an.