php-homepage.com

X-HTML (wird nicht mehr weiterentwickelt und fließt in HTML5 ein)

Der Doctype

Grundgerüst eines html/xhtml-Dokuments, in diesem Fall xhtml 1.0 strict:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Dokument-(Seiten) Titel</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head>

<body> im body steht der Inhalt der Seite, der ausgegeben wird. </body>
</html>

gehen wir nun Schritt für Schritt auf die einzelnen Elemente und Angaben ein... Soweit zur Theorie, nun erstellen wir uns mithilfe obiger Vorlage ein html-Dokument. Dazu erstellen Sie mit einem Texteditor ihrer Wahl (Notepad, Notepad+,...) eine leere Textdatei und speichern Sie unter dem Namen index.html! als Zeichenkodierung Utf-8, da sonst Umlaute und andere Sonderzeichen nicht dargestellt werden.
Der Dateiname index.html wird als Standard für Startseiten verwendet, das heißt auf dem Webserver muss eine Datei mit dem Namen"index" liegen, die Dateiendung .html, .htm,.php,... kommt auf die verwendete Technologie an, darauf gehen wir vorerst nicht ein.
Wir öffnen diese leere "index.html" nun mit einem browser (firefox, Internet Explorer,...) und erhalten klarerweise als Ausgabe ein leeres, weißes Fenster. Sie könnten nun ein beliebigen Text ohne weitere Angaben und Bezeichnungen eingeben und der browser wird diesen auch anzeigen, aber wenn Sie diesen Text nun formatieren wollen brauchen wir html:
Wir kopieren nun folgenden Text unseres Beispiels in die"index.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Dokument-(Seiten) Titel</title>
  <meta http-equiv="content-type" 
    content="text/html;charset=utf-8" />

</head>

<body>

    Im body steht der Inhalt der Seite, der ausgegeben wird.

</body>
</html>
        


speichern und schauen uns die Ausgabe an, Sie sehen nun:
"Im body steht der Inhalt der Seite, der ausgegeben wird."
Nun sollten Sie das Grundverständnis für den Aufbau von html-Dokumenten verstanden haben können zum nächsten Schritt übergehen:
Da das Arbeiten mit einem reinen Texteditor natürlich nicht jedermanns Sache ist, gibt es für die Erstellung von Webseiten unzählige Werkzeuge:

html-tags

Was sind html-tags und wie verwendet man diese?
html ist eine Auszeichnungssprache, das heißt Elemente bzw. Text werden mit sogenannten tags ausgezeichnet.Das bedeutet, dass man jedes Element/Text, das man speziell formatieren/auszeichen will, mit entsprechenden tags umschließt. Zum Beispiel wollen wir das Wort "Inhalt" in unserem body Text fett hervorheben, also umgeben wir es mit dem html-tag bold <b></b>
Wir zeichen nun das Wort "Inhalt" in unserem html-Beispieldokument mit dem tag <b> aus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>Dokument-(Seiten) Titel</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body> Im body steht der <b>Inhalt</b> der Seite, der ausgegeben wird.
/ </body>
</html>

Im weiteren Verlauf des tutorials verzichten wir auf die Angabe des Doctypes, header usw. und konzentrieren uns nur auf die eigentliche Ausgabe im body unseres Dokuments. Wie im Beispiel mit bold können wir nun alle Elemente im body nach diesem Schema formatieren. Ob unterstrichen<u></u>, in einer anderen Schriftfarbe(zB. rot)<font color="red">, anderen Schriftgröße <font-size="120%"> usw.
Soweit zur grundsätzlichen Vorgehensweise in der Verwendungung von html-tags, da wir aber unsere Elemente in Zukunft mittels CSS formatieren wollen, gewöhnen wir uns diese schlampige Auszeichnung direkt im Text gar nicht erst an:-) Im nächsten Schritt des Tutorials lernen wir deshalb gleich mittels CSS zu formatieren bevor wir uns auf Klassen und Pseudoklassen stürzen!
CSS Tutorial