Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

Ein Grundgerüst für die Webseite erstellen

Bevor Sie das Grundgerüst für die Übungsseite erstellen, ein kurzer Hinweis vorweg: DOCTYPE ist ein undankbarer Einstieg in das Schreiben von HTML, denn der Befehl hat eine extrem unübersichtliche Syntax.

Falls Ihr Editor die Zeile nicht sowieso schon hingeschrieben hat, kopieren Sie sie am besten in den Quelltext, um Tippfehler zu vermeiden. Kopiervorlagen für DOCTYPE finden Sie zum Beispiel beim W3C:

Abbildung 2.2: Der korrekte DOCTYPE beim W3C
Abbildung 2.2: Der korrekte DOCTYPE beim W3C

Suchen Sie dort nach der Variante für XHTML 1.0 Transitional, denn diese HTML-Geschmacksrichtung wird in diesem Buch verwendet.

Oder kopieren Sie den DOCTYPE direkt hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Einfach beide Zeilen mit gedrückter Maustaste markieren, mit der rechten Maustaste auf die Markierung klicken, den Befehl KOPIEREN wählen und dann im Editor das Kopierte wieder EINFÜGEN.

ToDo: Ein HTML-Grundgerüst (mit Titel) erstellen
  1. Erstellen Sie zum Speichern der Übungsdateien einen neuen Ordner, den Sie z. B. littleboxes nennen.
  2. Starten Sie Ihren Lieblingseditor und erstellen Sie eine leere Datei.
  3. Speichern Sie die noch leere Datei im Übungsordner unter dem Namen index.html. Ohne Leerstellen und kleingeschrieben.
  4. Erstellen Sie das folgende HTML-Grundgerüst. Falls Ihr Editor bereits eines hingeschrieben hat, vergleichen Sie es mit dem folgenden Beispiel:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Startseite - Little Boxes (Webseiten gestalten mit HTML und CSS)</title>
    </head>
    <body>
    <!-- Sichtbarer Teil der Webseite, noch leer -->
    </body>
    </html>

  5. Speichern Sie die Datei erneut und betrachten Sie sie in einem Browser.

Wie Sie feststellen werden, sehen Sie im Browser (fast) nichts, nur links oben in der Titelleiste steht der von Ihnen vergebene Titel. Wenn Sie im Browserfenster selbst etwas sehen möchten, schreiben Sie einfach ein bisschen Text zwischen <body> und </body>, speichern die Webseite und laden sie im Browser noch einmal neu. Voilà! Da ist ihr Text.