Print
Mittwoch, 6. Juni 2007 |

Die erste Seite mit XHTML

Wie erstelle ich eine XHTML Datei?

Wenn du mit Windows arbeitest, öffne Notepad (Start - Zubehör).

Wenn du einen Mac verwendest öffne SimpleText.

Auf OSX nimm am besten TextEdit und ändere die folgenden Einstellungen: In dem Einstellungsfenster wähle "Plain Text" anstelle von "Rich Text" und wähle auch "Ignore rich text commands in HTML files".

Bei Linux öffne den Text Editor deiner Wahl (z.B. vi oder Emacs)

Nice to know: Es gibt auch eine Reihe sogenannter WYSIWYG (What you see is what you get) html editoren. Diese zu nutzen hat allerdings Nachteile:

  1. Man lernt kein xhtml.
  2. Der Code, der von diesen Editoren erzeugt wird ist oft sehr groß und teilweise auch für nur einen Browser optimiert.

Kopiere folgenden XHTML Code in deinen Texteditor:


<!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" lang="de" xml:lang="de">
    <head>
        <title>Meine erste Seite</title>
    </head>
    <body>
        HALLO WELT!!!
    </body>
</html>

Speichere die Seite als "index.htm" (achte darauf, das bei Notepad beim Filetype "All Files" angegeben ist).

Nice to know: Die Seite "index.htm" ist von den meisten Webhostern als Startseite festgelegt. Wenn du eine Seite mit diesem Namen auf deinem Webspace ablegst sollte sie von alleine erscheinen wenn du deine URL eingibst.

Öffne deinen Internetbrowser und gehe auf File - Open bzw Open File und öffne "MeineSeite.htm". Eine weiße Seite mit der Schrift "HALLO WELT!!!" links oben erscheint.
Deine erste Webseite ist fertig!

Erklärung:
Der DOCTYPE erzählt dem Browser, was für eine Seite er zu erwarten hat. Der Browser kann sich so schon mal auf das einstellen, was da kommen möge.
Das html Element umschließt die gesamte Webseite. Es ist der Rahmen. Mit den attributen lang und xml:lang erklären wir allen, die es wissen wollen oder sich nicht sicher sind, dass die Sprache auf dieser Seite Deutsch (de) ist.

Der Kopfbereich (head) ist für die Beschreibung der Seite zuständig.
Das title Element zum Beispiel definiert den Titel der Website. Es wird auch in den meisten Browsern noch gesondert (zum Beispiel als Titel bei Tabs) angezeigt.

Der Bodybereich definiert den Inhalt der Seite. Im aktuellen Fall "HALLO WELT!!!"

Erfahre im nächsten Teil, wie du Elemente auf der Seite formatieren kannst.