Websiteentwicklung: XHTML: Erste Seite
Aus Wikibooks
[Bearbeiten] Ein leeres XHTML-Dokument erstellen
Am besten verwenden Sie einen HTML-Editor oder den einfachsten Texteditor, den es gibt, den Notepad-Editor. Starten Sie nun Ihren Editor und erstellen Sie ein leeres Dokument. Speichern Sie das leere Textdokument mit der Endung .xhtml ab und öffnen Sie es mit Ihrem Browser. Das war’s! Jetzt sehen Sie vor sich eine leere XHTML-Seite.
Wie immer gilt aber auch hier Murphys Gesetz: Es kann die Meldung angezeigt werden, dass Sie ein Programm zum Öffnen der Datei auswählen müssen. Wenn dies erscheint, machen Sie kurzen Prozess: Klicken Sie auf abbrechen und laden Sie sich den Browser Firefox herunter. Dieser öffnet das XHTML-Dokument ganz sicher und ohne Murren.
Wichtig für Benutzer von Microsoft Windows: Wenn Sie bei Ihren Dateien solche Dateiendungen nicht angezeigt bekommen, liegt das vielleicht daran, dass sie die Option „Erweiterungen bei bekannten Dateitypen ausblenden“ eingeschaltet haben. Öffnen Sie in Ihrem Arbeitsplatz das Menü „Extras“ -> „Ordneroptionen“. Dort wählen Sie den Reiter „Ansicht“. Überprüfen Sie, dass beim Eintrag „Erweiterungen bei bekannten Dateitypen ausblenden“ kein Häkchen steht.
[Bearbeiten] Das Dokument mit Inhalt füllen
Jetzt möchten Sie aber nicht eine leere Seite anzeigen lassen, sondern eine Seite, in der auch etwas Text steht. Gehen Sie dazu zurück zu Ihrem Editor mit dem leeren Dokument. Sie könnten jetzt irgend einen Text in das Dokument schreiben, speichern und das Resultat mit dem Browser betrachten. Normalerweise würde jetzt aber eine Fehlermeldung angezeigt. Das liegt daran, dass der XHTML-Standard einen bestimmten Aufbau des Dokuments verlangt. Im Dokument muss es einen Kopf-Bereich mit Informationen zum Dokument und einen Körper-Bereich (Body-Bereich) mit dem Inhalt der Seite geben. Und das gesamte Dokument muss noch in eine Art globalen Bereich eingefasst werden. Für alle diese Bereiche gibt es spezielle Befehle oder Elemente, wie sie von Experten genannt werden. Wir verwenden hier in Zukunft auch das Wort „Element“, um korrekt zu bleiben.
Damit der Browser erkennt, was jetzt ein Element ist und was Text sein soll, werden alle Elemente mit spitzen Klammern gekennzeichnet. Vor dem Elementnamen kommt die öffnende Klammer < und nach dem Elementnamen die schließende Klammer >. Da ein Element - wie Sie oben gesehen haben - einen Bereich markiert, muss es auch wieder abgeschlossen werden. Dazu schreiben Sie einfach den Elementnamen wie oben mit den spitzen Klammern, setzen aber nach der öffnenden Klammer noch einen Schrägstrich /. Und fertig ist der Bereich:
<element>Irgendein Inhalt von Ihnen</element>
Zu beachten ist auch noch, dass Sie alle Elementnamen klein schreiben müssen.
Wir müssen jetzt also unsere drei Bereiche erstellen. Der globale Bereich heißt html. In diesen Bereich kommen alle weiteren Elemente und Texte. In diesen Bereich kommt nun der Kopf-Bereich, der mit dem Element head erstellt wird. Nach diesem Bereich definieren Sie nun noch den Körper der Datei mit dem Element body. Jetzt gibt es nur noch ein letztes Hindernis zu bewältigen: Sie müssen dem html-Element noch eine Information anhängen, ein sogenanntes Attribut. Schreiben Sie dazu direkt nach dem Namen und noch vor der schließenden Klammer folgenden Text:
xmlns="http://www.w3.org/1999/xhtml"
Beachten Sie, dass zwischen html und xmlns noch ein Leerzeichen stehen muss. Diese Angabe müssen Sie nicht verstehen, sie dient nur dazu, dem Browser zu sagen, wie er die Seite darstellen soll. Solche Zusätze zu einem Element müssen sie im abschließenden Element nicht mehr schreiben. Innerhalb des body-Elements können Sie nun irgend einen Text schreiben, er sollte dann im Browser angezeigt werden.
Versuchen Sie nun als erste Aufgabe, diese drei Bereiche zu definieren und irgend einen Text im Browser anzeigen zu lassen. Sollten Sie nicht weiterkommen sehen sie unten die Lösung:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> Irgend ein Text, der angezeigt werden soll. </body> </html>
Da es jetzt alles ziemlich schnell ging, nochmals eine kurze Zusammenfassung:
- Ein Bereich wird mit Elementen gekennzeichnet.
- Ein Element wird mit spitzen Klammern gekennzeichnet:
<element> - Jedes Element muss abgeschlossen werden. Dies geschieht mit dem selben „Befehl“ wie zum Starten des Bereichs, jedoch steht zwischen der öffnenden Klammer und dem Namen noch ein Querstrich:
</element> - Eine Seite hat einen globalen
html-Bereich, in dem alle anderen Angaben kommen. - Eine Seite ist zusätzlich in einen Kopf- und einen Körper-Bereich unterteilt.
- Ein Attribut ist ein Zusatz zu einem Element.
Wenn Sie sich diese sechs Merksätze eingeprägt haben, kennen Sie schon das Grundwissen von XHTML. Die schwierigste Hürde ist genommen, von nun an geht's zum Glück einfacher weiter.
