Kurs:Die erste eigene Website/XHTML

Aus Wikiversity

< Kurs:Die erste eigene Website

Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

1 XHTML - Eine Sprache des World Wide Web
2 Editor
3 Dateiendung
4 Überschriften
5 Das Grundgerüst
6 Attribute
7 Dateiweite Einstellungen
8 Wichtige Tags
- 8.1 Hyperlinks
  - 8.1.1 XHTML 2.0
- 8.2 Objekte (Bilder, Musik, Filme, Flash usw.)

[Bearbeiten] XHTML - Eine Sprache des World Wide Web

Schon gewusst?

Was ist der Unterschied zwischen XHTML und HTML?

XHTML ist eine Weiterentwicklung von HTML, die auf XML, einer für den Computer leichter verarbeitbaren Computerhochsprache, basiert. XHTML-Dokumente sind auch HTML-Dokumente. Aber nicht umgekehrt.

XHTML steht für "Extensible HyperText Markup Language". "Extensible" ist englisch und heißt "erweiterbar". XHTML kann nämlich z.B. mit SVG, einem Vektorgrafikenformat, oder MathML, einem Format für mathematische Formeln, erweitert werden. Unter "Hypertext" versteht man einen Text, der mit einem anderen verknüpft ist. Daher nennt man das World Wide Web teilweise auch Netz. Die Verknüpfungen erfolgen u.A. durch Hyperlinks, in der Kurzform auch "Links" genannt.

XHTML ist die Sprache, die du in diesem Kurs erlernen wirst. Mit ihr sagst du dem Computer, was ein Absatz sein soll und was eine Überschrift oder eine Liste ist. Und natürlich, an welcher Stelle und wie du gerne dein Bild oder dein Video eingebunden haben möchtest.

XHTML ist eigentlich nur eine einfache Textdatei, in der zusätzlich Angaben für den Computer stehen.

[Bearbeiten] Editor

Entsprechend benötigt man nur einen einfachen Texteditor, um die Dateien zu bearbeiten.

[Bearbeiten] Dateiendung

HTML-Dokumente können unter verschiedenen Dateiendungen gespeichert werden. .html und .htm haben in etwa die gleiche Wirkung und können in jedem Fall verwendet werden, vorausgesetzt, dass das Betriebssystem mehr als 3-stellige Dateiendungen erlaubt. Für XHTML, der neueren auf XML-basierenden Auszeichnungssprache, die in der Version 1.0 zu großen Teilen mit der älteren Variante HTML 4.0 übereinstimmt, kann auch .xhtml verwendet werden. Das führt jedoch dazu, dass die Datei auch wirklich wie ein XHTML-Dokument behandelt wird, in älteren Versionen des Internet-Explorers zu Fehlermeldungen oder zumindest zu einer inkorrekten Darstellung.

[Bearbeiten] Überschriften

Aufgabe:

Öffne einen Texteditor und kopiere Folgendes in das Fenster:
```
<h1>Hallo Welt!</h1>
```
Speichere diese Datei unter dem Namen hallo.htm. Du kannst auch einen anderen Namen wählen. Wichtig ist dabei, dass die Dateiendung htm lautet.
Öffne diese Datei mit mit einem Browser.

Ergebnis: Du siehst in etwa Folgendes:

Hallo Welt!

Erklärung: "<h1>" gibt an, dass nun eine Überschrift der Ebene 1, also eine Hauptüberschrift, beginnt und "</h1>" dass hier diese Überschrift zu Ende ist.

Merke: So etwas wie "<h1>" nennt man Tag ([tæg], eingedeutscht [tɛk]). Ein solches Tag beginnt immer mit einem Kleiner-Als-Zeichen: < und endet immer mit einem >. Fehlt eines der beiden Zeichen, zeigt der Browser das Dokument falsch an.

Du kannst auch Unterüberschriften verwenden: h2, h3, h4, h5 und h6.

Schreibe nun Folgendes in das Textfeld und schaue es dir anschließend im Browser an:

 <h1>Das ist die Hauptüberschrift</h1>
  Hier steht was darüber
  <h2>Überschrift Stufe 2</h2>
   Bla, Bla
  <h2>Noch eine Überschrift</h2>

[Bearbeiten] Das Grundgerüst

Allein so eine Überschrift ist aber noch kein gütiges XHTML-Dokument. So sieht nämlich z.B. ein nach den Regeln des W3C gültiges Dokument aus:

<?xml version="1.0" encoding="ISO-8859-15"?>
<!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>Beispiel</title>
</head>
<body>
  <p>Hallo Welt!</p>
</body>
</html>

Das ist schon komplizierter als nur so eine Überschrift, oder? Auch wenn es in der Praxis oft nur kopiert wird, sollte man wissen, was die einzelnen Teile bedeuten. Daher schauen wir uns das Grundgerüst mal genauer an:

[Bearbeiten] Die XML-Deklaration

<?xml version="1.0" encoding="ISO-8859-15"?>

Dies ist eine XML-Deklaration. Die XML-Deklaration leitet ein XML-Dokument (XHTML ist z.B. ein XML-Dokument) ein. Sie beginnt mit <?xml und endet mit ?>. version="1.0" gibt die Versionsnummer der zugrundeliegenden XML-Spezifikation an, encoding="ISO-8859-15" die Zeichenkodierung. Wird die Zeichenkodierung nicht angegeben, wird UTF-8 genutzt. In der Zeichenkodierung UTF-8 sind nämlich die meisten Alphabete und Schriftzeichensysteme enthalten, die weltweit derzeit genutzt werden. Du kannst diese Angaben erstmal einfach so übernehmen.

[Bearbeiten] Die Dokumenttypdefinition (DTD)

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

Die Dokumenttypdefinition gibt bei SGML und XML an, um was für ein Dokument es sich handelt. In diesem Beispiel gibt die DTD z.B. an, dass es sich um XHTML der Version 1.0 in der Variante „Strict“ handelt.

[Bearbeiten] Das HTML-Tag

<html> ... </html>

Das HTML-Tag leitet die eigentliche Seite ein und darf auch am Ende des Dokuments als abschließendes Tag nicht vergessen werden. Das Attribut xmlns mit dem XML-Namensraum ist verpflichtend. Wenn du dich später mal über die Möglichkeiten von XML-Namensräumen informieren willst, frag einfach mal jemanden hier.

[Bearbeiten] Der Dateikopf

<head> ... </head>

Der Dateikopf ist das erste Element, das nach dem HTML-Tag folgt. Auch ist es wichtig, ihn am Ende mit </head> abzuschließen. In ihm stehen verschieden Elemente. Zum Beispiel:

<title>Beispiel</title>

Dieses Element gibt den Titel des Dokuments an und erscheint zum Beispiel in der Überschrift des Browsers, also bei Windows XP im Standard-Theme ist er blau hinterlegt.

[Bearbeiten] Der Körperbereich

<body> ... </body>

Der Körperbereich ist der zweite große Abschnitt eines XHTML-Dokuments. Er folgt immer nach dem Dateikopf. Alle Elemente, die in ihm stehen, kann man durch den Browser später sehen. So zum Beispiel auch unsere Überschrift, die wir am Anfang kennen gelernt haben.

[Bearbeiten] Der Absatz

<p> ... </p>

Absätze werden in p-Tags geschrieben. Du kannst auch einfach ein leeres p-Tag (<p/>) schreiben, wenn du Platz zwischen zwei bestimmten Absätzen einfügen möchtest. Allerdings ist diese Vorgehensweise unnötig, da mittels CSS-Anweisungen der Abstand unterhalb oder oberhalb eines Absatzes recht einfach definiert werden kann.

Aufgabe:: Speichere das Grundgerüst unter dem Namen grundgerüst.htm. (Du kannst aber natürlich auch einen anderen Namen wählen, da manche Webserver oder Webbrowser Probleme mit Umlauten haben.) Falls dir mal das Grundgerüst nicht einfallen sollte, kannst du es nun immer unter diesem Namen finden.

[Bearbeiten] Attribute

Nun kannst du bereits Tags erstellen und kennst das Grundgerüst. Es gibt aber nicht nur Tags, die eine einfache Zeichenkombination wie h1, head, title oder body haben. Zusätzlich kann man den Tags auch noch weitere Informationen zuordnen. Eine mögliche Information ist beispielsweise die Zieladresse eines Links. Solche Informationen nennt man Attribute. Die Attribute werden innerhalb "<" und ">" geschrieben und durch ein oder mehr Leerzeichen vom Tag-Namen getrennt. Das sieht dann so aus: <Tagname Attribut>. Im Falle eines Links ist das passende Tag a. Das Attribut für die Zieladresse lautet href. Du kannst das folglich so schreiben:

<a href="http://www.wikipedia.org">Linktext</a>

Wie du siehst, enthält das Tag das Attribut mit dem Namen "href", welches durch ein Gleichheitszeichen (=) den Attributwert in Anführungsstrichen zugewiesen bekommt. In dem Fall ist der Attributwert die Adresse des Linkziels.

[Bearbeiten] Dateiweite Einstellungen

Öffne einen Texteditor und schreib das Grundgerüst einer XHTML-Datei hinein. In das <head>-Tag schreibst du folgendes:
```
<style type="text/css">h1, h2, h3, h4, h5, h6 { font-variant: small-caps; }</style>
```
Speichere diese Datei.
Öffne die Datei nun genau wie beim letzten Mal mit einem Browser.

Ergebnis: Die Buchstaben der Überschriften werden wie Großbuchstaben ausgegeben (Kapitälchen). Großbuchstaben, wie zum Beispiel bei Namen, werden noch größer angezeigt. Sie heben sich also ab.

Erklärung: Wenn bestimmte Eigenschaften für das gesammte Dokument gelten sollen, müssen sie in den <head>-Tag geschrieben werden.

Zur Erinnerung: Das ist der Bereich zwischen <head> und </head>. Da mehr als ein Leerzeichen und Zeilenumbrüche vom Browser ignoriert werden ist es egal ob du

<head><style type="text/css">h1, h2, h3, h4, h5, h6 { font-variant: small-caps; }</style></head>

oder

<head>
<style type="text/css">h1, h2, h3, h4, h5, h6 { font-variant: small-caps; }</style>
</head>

geschrieben hast.

[Bearbeiten] Wichtige Tags

[Bearbeiten] Hyperlinks

Das ist z.B. ein Link: Wikipedia. Du kannst einfach den Link anklicken und schon wird die entschprechende Seite aufgerufen. Der Tag eines Hyperlinks lautet a. Das Attribut, welches das Ziel angibt, href.

Beispiel:

<a href="http://www.wikipedia.org">Wikipedia</a>

[Bearbeiten] XHTML 2.0

In XHTML 2.0 soll es möglich sein, jedes Tag zu verlinken. Eine Linkliste sähe dann z.B. so aus:

<ul>
  <li href="http://www.wikipedia.org">Wikipedia</li>
  <li href="http://www.wikiversity.org">Wikiversity</li>
  <li href="http://www.wikibooks.org">Wikibooks</li>
</ul>

Bei XHTML 1.0, musst du folgendes schreiben:

<ul>
  <li><a href="http://www.wikipedia.org">Wikipedia</a></li>
  <li><a href="http://www.wikiversity.org">Wikiversity</a></li>
  <li><a href="http://www.wikibooks.org">Wikibooks</a></li>
</ul>

[Bearbeiten] Objekte (Bilder, Musik, Filme, Flash usw.)

Bilder, Musik, Filme, Flash usw. kannst du mit dem object-Tag einbinden. Der Dateiname wird ins data-Attribut und der Mime-Typ mit type. Das Attribut type gibt an, um was für eine Datei es sich handelt, damit der Browser weiß, ob er jetzt einen Film oder ein Bild oder etwas Anderes darzustellen hat. Wenn du den MIME-Typ der Datei nicht kennst, kannst du ihn auch weglassen. Mit width und height wird die Anzeige-Größe eingestellt. Nach ein bischen Herumexperimentieren findest du sicher eine geeignete Größe für deine Datei. Zwischen <object> und </object> kannst du einen Text angeben, der erscheint, wenn die Datei nicht angezeigt werden konnte.