Rheinwerk Computing :: Einstieg in JavaScript

1.7 Eine erste HTML-Datei

Es werden nur wenige HTML-Kenntnisse zum Erlernen von JavaScript vorausgesetzt. Einige wichtige Markierungen habe ich im folgenden Beispiel zusammengestellt:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Das ist der Titel</title>
</head>
<body>
   <p>Ein Absatz mit Zeilenumbrüchen<br>
      Zweite Zeile<br>Dritte Zeile</p>
   <p>Ein <a href="einbetten.htm">Hyperlink</a></p>
   <p>Ein Bild: <img src="im_paradies.jpg" alt="Paradies"></p>

   <p>Eine Liste:</p>
   <ul>
      <li>Erster Eintrag</li>
      <li>Zweiter Eintrag</li>
   </ul>

   <p>Eine Tabelle:</p>
   <table border="1">
      <tr>
         <td>Zelle A</td>
         <td>Zelle B</td>
      </tr>
      <tr>
         <td>Zelle C</td>
         <td>Zelle D</td>
      </tr>
   </table>
</body>
</html>

Listing 1.1 Datei »erste.htm«

Mithilfe von <!DOCTYPE html> wird festgelegt, dass es sich um ein HTML-Dokument handelt. Je mehr Sie sich an die einheitlichen Definitionen für HTML-Dokumente halten, desto höher ist die Wahrscheinlichkeit, dass die Seite in allen Browsern fehlerfrei dargestellt wird. Sie können Ihre Seiten über http://validator.w3.org validieren lassen , also auf Übereinstimmung mit der Definition prüfen lassen.

Ein HTML-Dokument besteht aus Markierungen (auch Tags genannt) und Text. Die meisten Markierungen bilden einen Container (= Behälter). Das gesamte Dokument steht im html-Container, von der Start-Markierung <html> bis zur End-Markierung </html>. Darin liegen nacheinander ein head-Container mit Informationen über das Dokument und ein body-Container mit dem eigentlichen Dokumentinhalt.

Im head-Container finden Sie einen title-Container, der den Inhalt für die Titelleiste des Browsers bereitstellt. Außerdem stehen hier Metadaten über das Dokument. Im vorliegenden Beispiel sehen Sie, dass es sich um ein HTML-Dokument handelt, das den weit verbreiteten Zeichensatz UTF-8 nutzt, siehe Abschnitt 1.7.1. Er enthält viele Sonderzeichen, z. B. auch die deutschen Umlaute.

Absätze stehen in p-Containern. Ein einzelner Zeilenumbruch innerhalb eines Absatzes wird mithilfe der Markierung <br> gebildet.

Ein anklickbarer Hyperlink zu einem anderen Dokument steht in einem a-Container mit dem Attribut href. Der Wert eines Attributs steht in Anführungsstrichen. Ein Bild kann mithilfe der img-Markierung und dem Attribut src eingebunden werden. Das Attribut alt ist für die Validierung erforderlich. Es enthält einen erläuternden Text für den Fall, dass die Bilddatei nicht geladen werden kann.

Eine nicht nummerierte Liste steht in einem ul-Container, die einzelnen Listeneinträge stehen in li-Containern.

Eine Tabelle wird mithilfe eines table-Containers erstellt. Falls das (hier ausnahmsweise genutzte) Attribut border den Wert 1 hat, dann ist ein Rahmen sichtbar. Normalerweise werden Rahmeneigenschaften mithilfe von CSS (= Cascading Style Sheets) eingestellt. Mehr zu CSS in Kapitel 9. Innerhalb der Tabelle gibt es einzelne Zeilen; diese werden jeweils mithilfe eines tr-Containers erstellt. Innerhalb einer Zeile wiederum gibt es einzelne Zellen , die jeweils durch einen td-Container gebildet werden.

In Abbildung 1.1 sehen Sie das Dokument im Browser.

Abbildung 1.1 Erstes HTML-Dokument im Browser

Die Datei erste.htm wird mithilfe des Editors Notepad++ erstellt und auf meinem Windows-PC im Verzeichnis C:/js gespeichert. Sie können die Dateien auf Ihrem Rechner aber in jedem beliebigen Verzeichnis ablegen. Zur Darstellung der htm-Datei (oder html-Datei) in Ihrem Standardbrowser öffnen Sie den Windows-Explorer und führen Sie einen Doppelklick auf die htm-Datei aus.

Weitere HTML-Markierungen werde ich an der passenden Stelle erläutern. Auf einige zusätzliche Möglichkeiten von HTML5 gehe ich in Kapitel 17 ein.

1.7.1 Die Codierung UTF-8

In allen Dokumenten dieses Buchs wird die Codierung UTF-8 verwendet. UTF-8 steht abkürzend für das 8-Bit UCS Transformation Format. UCS steht abkürzend für Universal Character Set. UTF-8 ist die am weitesten verbreitete Codierung für Unicode -Zeichen .

Es ist wichtig, dass die Codierung, die im head-Container angegeben ist, mit der Codierung der Datei übereinstimmt. Sie können, falls noch nicht geschehen, die Codierung einer Datei im Editor Notepad++ wie folgt auf UTF-8 umstellen: Menü Kodierung • Konvertiere zu UTF-8. Anschließend ist in diesem Menü auch die Codierung UTF-8 markiert.

Sie können die Codierung im Editor Notepad++ wie folgt auch automatisch für alle Dateien wählen, die Sie neu erstellen: Menü Einstellungen • Optionen • Neue Dateien • Kodierung • UTF-8, Schaltfläche Schließen.