Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 1 - Basisdefinitionen

1. Die Abschnitte

2. Grundgerüst

Wie ihr sehen könnt, sind beide Dateien leer, und das ist auch gut so. Als Allererstes nehmen wir uns die urquhart.htm vor und legen das Grundgerüst an: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
      Schottlandurlaub - Schlösser - Urquhart Castle
    </title>
    <meta http-equiv="content-type" content="text/html;
      charset=ISO-8859-1">
    <link rel="stylesheet" href="../../styles.css"
      type="text/css">
  </head>
  <body>
  </body>
</html>

Erläuterung

DOCTYPE

Als DTD-Definition nehmen wir erst mal HTML 4.01 Strict. Mit XHTML setzen wir uns im zweiten Tutorial auseinander.

title

Achtet darauf, dass ihr im Titel eine kurze aber doch aussagekräftige Beschreibung der Seite unterbringt, Google wird es euch danken.

meta

Hier binden wir als Zeichensatz ISO-Latin 1 ein. Der umfasst größtenteils alle westeuropäischen Sprachen und Buchstaben, also zum Beispiel auch französisch mit all den komischen Haken und Ösen, die die in ihrem Alphabet benutzen. Mit dieser Definition müssen spezielle Sonderzeichen nicht mehr HTML-kodiert werden (z.B. &Uuml; für ein Ü), so wie es früher üblich war.

link

Hiermit binden wir unsere zentrale CSS-Datei ein. Achtet auf die relative Verlinkung.

3. CSS-Anweisungen

Zuerst müsst ihr auf Folgendes achten. Browser beginnen mit der Darstellung der Inhalte nicht links oben im Fenster, sondern halten immer einen gewissen Abstand ein, der auch noch jeweils unterschiedlich ist. Früher half man sich mit den Microsoft- und Netscape-spezifischen HTML-Tags marginwidth, marginheight bzw. topmargin und leftmargin. Heute macht man das so. 


body
{
  margin: 0px;
  padding: 0px;
}

Damit kann man gewiss sein, dass das folgende Element da steht, wo es hingehört. Jetzt definieren wir noch unsere Standardschriften und deren Standardgröße in der styles.css, und hätten damit das Grundgerüst fertig. 


body
{
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

Erläuterung

Unter dem Punkt Vererbung habe ich euch schon erklärt, dass bestimmte CSS-Eigenschaften von HTML-Elementen auf deren "Kinder" vererbt werden können. Das gilt in diesem Fall für font-family und natürlich auch für font-size.

Bei der Schriftgröße arbeiten wir hier der Einfachheit halber mit absoluten Größen, auch wenn man das nicht mehr machen sollte. Über die Verwendung relativer Größen erfahrt ihr im zweiten Tutorial mehr.

Normalerweise sollte man auch noch die Hintergrund- und Schriftfarbe definieren. Wenn die, wie in unserem Beispiel aber weiß und schwarz sind, so werden diese Angaben nicht benötigt, da sie die Standardwerte sind. Damit ihr auch mal was im Browser zu sehen bekommt, wagen wir uns nun an den Aufbau.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt