 |
|||
| HSG |
|
Ein valides "Hallo Welt"-Dokument
hallo.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ein erstes HTML-Dokument</title>
</head>
<body >
<p>böser Test</p>
</body>
</html>
Erläuterungen
In der Zeile
<?xml version="1.0" encoding="utf-8" ?>
wird angezeigt, dass das Dokument ein xml-Dokument ist, das mit dem Zeichensatz utf-8 codiert ist. Durch die Verwendung dieses Zeichensatzes ist z.B. ein Umschreibung der deutschen Umlaute unnötig. Auf der Seite zu XML-Grundlagen kann man mehr über diese Zeile erfahren.
Verwendet der Webserver PHP, so wird '<?' als der Anfang einer PHP-Anweisung gesehen und führt zu einer Fehlermeldung. Die Zeile
<?php echo "<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n"; ?>
veranlasst den PHP-Präprozessor, die richtige Zeile auszugeben.
Die beiden Zeilen (wer möchte kann auch nur eine Zeile verwenden)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
geben den sogenannten DOCTYPE des Dokumentes an. Im vorliegenden Fall wird die Einhaltung der XHTML1.0-Regeln 'versprochen'. Details zum DOCTYPE findet man auf einer Extra-Seite.
Das Attribut 'xmlns="http://www.w3.org/1999/xhtml' in der Zeile
<html xmlns="http://www.w3.org/1999/xhtml">
legt den sogenannten Namensraum fest.
Ein Dokument mit CSS
css0.html mit CSS-Datei style0.css :
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>ein HTML-Dokument mit CSS und einigen Grundelementen</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="lehrer account" />
<link rel="stylesheet" type="text/css" href="style0.css" />
</head>
<body >
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<p>Dies ist der Text im ersten Absatz.</p>
<h3>Überschrift 3</h3>
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
<p>Absatz mit <a href="http://de.wikipedia.org">Link</a></p>
<p>Absatz mit Bild
<img src="staufine.gif" alt="Staufine mit transparentem Hintergrund" />
</p>
</body>
</html>
</pre>
<pre>
body { font-family:verdana; color:#0000FF; background-color:#DDDDFF; }
h1 { color:#FF0000; text-align:center; }