XHTML (eXtensible HyperText Markup Language) Syntax und
Werbung
XHTML (eXtensible HyperText Markup Language)
Syntax und Struktur von XHTML-Dokumenten
1
Ein XHTML-Befehl (element) besteht immer aus einer Anfangs- und
einer Endemarkierung (tag). Manche Befehle enthalten noch
Attribute (alles kleingeschrieben). Mehrere Attribute müssen durch
Leerzeichen getrennt werden!
Hier verwendete Notation: | = ODER, Beispiele blau.
Syntax:
< befehlswort attribut = " wert " attribut ...> Text </befehlswort >
In XHTML gibt es einige Befehle ohne eingeschlossenen Text,
z. B. <br />, <hr />, <img /> . Sie müssen mit /> enden!
Gerüst einer XHTML-Datei:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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-de">
<head> <title> Titelzeile des Dokuments </title> </head>
<body> Eigentlicher Inhalt des Dokuments </body>
</html>
Es gibt 3 Dokumenttypen: Strict für strenge XHTML-Prüfung,
Transitional zur Verwendung von alten HTML-Attributen (wie z.B.
target) und Frameset für Framesets.
Überprüfung von XHTML-Dokumenten: http://validator.w3.org
Grundlegende XHTML-Befehle
2
Block-Befehle erzeugen eine neue Zeile. Beispiele: ol, ul, p, div,
table,hr, h1 - h6
Inline-Befehle erzeugen keine neue Zeile im Textfluss.
Beispiele: a, strong, img, span
Überschriften (headings)
<h1> Überschriftenebene 1 </h1> bis
<h6> Überschriftenebene 6 </h6>
Absätze (paragraphs)
<p> Absatz </p> Innerhalb eines Blockes können neue Zeilen mit
<br /> (break) erzeugt werden. Blockbefehle sind innerhalb von
Blockbefehlen nicht erlaubt, also kein Absatz im Absatz!
Abschnitte <div> Abschnitte sind Absätzen übergeordnet </div>
Merke: Text, <br />, <img>, <a> nur in <p>, <td>, <div>, <li>
Horizontale Linie (horizontal rule): <hr />
Zeichendarstellung: Alle Zeichen können durch eine Nummernoder Zahlenangabe dargestellt werden. Beispiele: &#160; | &nbsp;
festes Leerzeichen, &lt; < (less than), &gt; > (greater than), &auml;
ä, &uuml; ü, &ouml; ö, &szlig; ß, &amp; &.
Schriftformatierung: <strong>fett</strong>, <em>kursiv</em>,
<sup>hochgestellt</sup> , <sub>tiefgestellt</sub >
CSS-Stilvorlagen
Listen: Die XHTML-Befehle <ul>, <ol> und <li>
5
Aufzählungsliste (unordered list)
<ul> <li> Listenelement </li> <li> ... </li> </ul>
Nummerierte Liste (ordered list)
<ol> <li> Listenelement </li> <li> ... </li> </ol>
Schachteln von Listen - auch gemischt - ist erlaubt.
Wichtige CSS-Eigenschaften
list-style-type: none | disc | circle | square | decimal |
decimal-leading-zero | lower-alpha | upper-alpha
list-style-image: none | url("URL-Angabe des Bildes")
list-style: Kurzform, alle Angaben kombiniert
Beispiel: ul {list-style: url("logo.gif") square;}
Das Quadrat erscheint, wenn das Bild nicht gefunden wird.
Bilder und Grafiken: XHTML-Befehl <img>
6
<img Attribute /> Bitte die Endemarkierung nicht vergessen!
alt = "Text" Kurze Beschreibung des Bildes
src = "URL" URL des Bildes, das angezeigt werden soll
width = "360" Breite des Bildes
height = "280" Höhe des Bildes. Höhe und Breite sollten immer
angegeben werden, damit der Browser beim Laden Platz freihält.
Weitere Einstellungen über CSS, z.B. style="border: 5px ridge red;"
Tabellen <table> <tr> <td> u.s.w.
3
Die Zusatzsprache CSS (cascading style sheets) zu XHTML erlaubt
es, Stilvorlagen (style sheets) zu definieren, die angeben, wie
XHTML-Elemente im Browser dargestellt werden sollen.
Stilvorlagen sollten in externen .css-Dateien definiert werden.
Syntax einer CSS-Stilvorlage:
XHTML-Befehlswort {CSS-Eigenschaftsname: CSS-wert ;}
Beispiel: /* Absatz mit großer gerader Schrift, linker Rand 20px */
p {margin-left: 20px; text-align: left; font-size: 14pt; font-family: "Arial
Black";} Werte mit Leerzeichen bitte in " setzen!
td{vertical-align: top;} Bilder oder Text beginnen in der Zelle oben.
Externe CSS-Dateien werden im XHTML-Kopf importiert:
<head>
<link rel="stylesheet" type="text/css" href="CSS-Datei.css" />
</head>
Stilvorlage innerhalb des Dokuments im <head>-Teil:
<style type = "text/css"> CSS-Stilvorlagen </style>
Das Standardattribut style
Tabellenelemente (table, tr, td) und auch andere Elemente
border-width: 1px; Rahmenbreite
border-color: black; Rahmenfarbe
border-style: none; ohne Rahmen | solid; durchgehend | dotted;
gepunktet | groove; vertieft 3D | ridge; erhöht 3D | inset; wie
gedrückter Button| outset; wie Button
Die Attribute können auch zusammengefasst werden:
border: 1px solid black; Rahmen: Breite, Linienart und Farbe
Die Rahmenlinien sind auch einzeln ansprechbar: border-top:,
border-bottom:, border-left: und border-right:
Beispiel: border-top: 2px solid red;
width: 180px; | 80%; Breite eines Elements
height: 180px; | 80%; Höhe eines Elements
padding: 20px; Raum zwischen Schrift und Zelle
padding-left: 20px; Raum zwischen Schrift und linkem Zellenrand
vertical-align: top; Der Text beginnt in einer Zelle ganz oben
4
style ermöglicht eine Vielzahl von Stilangaben, die zur Formatierung
von XHTML-Elementen dienen.
Beispiel: <p style = "text-indent: 20px; font-family: 'Arial Black'; fontsize: 14pt; color: blue;"> Bei Werten mit Leerzeichen ' statt "
Wichtige CSS-Eigenschaften, die man p, table, td, ul, div, span, ...
zuweisen kann:
Schrift:
font-family: serif; | sans-serif; Schriftart mit oder ohne Serifen
font-style: normal; | italic; Stil gerade oder kursiv
font-weight: normal; | bold; normale oder fette Schrift
font-size: 14pt; Schriftgröße in Punkten
Farbe und Hintergrund:
color: Farbname; z.B. blue; | Hex-Farbangabe; z.B. #2020FF;
background-color: Angaben wie bei color
background-image: url(URL); | none; URL=Pfad zum Bild
background-attachment: fixed; fixiertes Hintergrundbild
background: transparent; Der Hintergrund wird transparent.
Absatz:
text-indent: 20px; Erstzeileneinzug
margin-left: 30px; Linker Rand
text-align: left; | center; | right; linksbündig, zentriert, rechtsbündig
line-height: 150%; Zeilenabstand 1,5-fach
7
<table> definiert eine Tabelle
Attribute:
width="100%" | "400" Breite relativ zur Seite oder fest in Pixel
cellspacing = "20" Abstand zwischen den Zellen
summary="Text" Die Zusammenfassung wird nicht angezeigt
<tr> definiert eine Zeile der Tabelle (table row)
<td> definiert eine Zelle (table data)
weitere Formatierungen sollten über CSS-Befehle definiert werden.
<caption> Tabellenüberschrift, muss nach <table> stehen
<th> Spaltenüberschrift: wie <td>, jedoch fett und zentriert
<td colspan="3"> verbindet 3 Zellen horizontal
<td rowspan="3"> verbindet 3 Zellen vertikal
Links und Anker, XHTML-Befehl <a>
8
<a href = "Dateiname">Linktext oder Bild</a> springt zur Datei, die
im gleichen Ordner liegen muss wie das aktuelle XHTML-Dokument.
Datei im Unterverzeichnis: "Ordner/Dateiname" Datei im
übergeordneten Verzeichnis: "../Dateiname"
<a href = "URL">Linktext</a> springt zur angegebenen URL
<a id="Ankername"> </a>setzt einen Anker im body an einer
beliebigen Stelle
<a href = "#Ankername">Linktext </a> springt zum Anker
Nur bei Dokumenttyp "Transitional":
target gibt an, wo der Linkinhalt angezeigt werden soll:
target="Frame-id" Anzeige im benannten Frame eines Framesets
target="_blank" | "_parent" | "_top" | "_self" Anzeige in einem neuen
Fenster, im Eltern-Frame, im ganzen Browser, im gleichen Fenster.
Beispiel: <a href="Datei2.html" target="Hauptframe">Link zu
Datei2</a>
Rahmen (Frames) <frameset> und <frame>
9
Als Dokumenttyp muss"Frameset" angegeben werden!
Beispiel (muss nach </head> folgen):
<frameset cols="200,*">
<frame src="Inhalt.html" id="Linkfenster" noresize="noresize" />
<frame src="Startseite.html" id="Haupt" frameborder="0" />
</frameset>
<noframes> <body><p>Ihr Browser kann keine Frames anzeigen.
</p></body></noframes></html>
frameset-Attribute: cols="200" | "30%" | "*" Spalten und ihre Breite
rows="200" | "30%" | "*" Zeilen und ihre Höhe
framespacing="10" Breite des Rahmens zwischen den Frames
frameborder = "0" | "1" 3D-Effekt des Rahmens: ja oder nein
frame-Attribute: src="URL" Datei, die im Frame gezeigt wird
id="Framename" Name des Frames, wichtig für target!
noresize = "noresize" Die Rahmengröße ist nicht veränderbar
marginwidth = "10" Leerraum zwischen linkem und rechtem Rand
Framesets sind schachtelbar: Anstatt <frame> kann ein neues
<frameset> stehen.