XHTML M. Gaiser

Transkript

1 XHTML M. Gaiser Inhaltsverzeichnis Basiswissen Sprachelemente: Tags Grundgerüst Dokument-Kopf Dokument-Körper Absätze Verknüpfungen (Links) Schriftbild Überschriften Zeilenumbruch Horizontale Linie Bilder Bilder mit Verknüpfungen (Image Map) Listen Tabellen Code-Beispiel Weitere Möglichkeiten Rahmen (Frames) und Frameset Formulare Scripts (Programmcode) Objekte Stylesheets Tutorials und Software Basiswissen XHTML ist eine Beschreibungssprache, die festlegt, wie ein Dokument in einem Web-Browser (einem Anzeigeprogramm) dargestellt werden soll. Dazu werden die Befehle zusammen mit dem Text eingegeben - auf derselben Ebene, im Klartext. Daher kann man XHTML mit jedem beliebigen Text-Editor lesen und schreiben. XHTML ist eine Weiterentwicklung der ursprünglichen WWW-Darstellungssprache HTML und zum zukünftigen Dokument-Standard XML kompatibel. Sprachelemente: Tags Die Befehle werden Tags genannt (engl. Kennmarken, vgl. "dog tag" - Hundemarke). Die meisten Tags bestehen aus zwei Teilen: einem Anfangs-(opening-)Tag und einem Abschluss-(closing-)Tag: z. B. <b>fettdruck</b>. Das Abschluss-Tag hebt die Formatierung wieder auf, die durch das Tag vorgenommen wurde. Einige Tags besitzen kein Abschluss-Tag; diese müssen intern geschlossen werden, z. B. <br /> (Zeilenumbruch). Tags können ineinander verschachtelt werden. Dann ist es sehr wichtig, sie immer korrekt zu schließen: von innen nach außen, z. B. <p><u><b>hier fett</b>, <i>hier schräg</i>, alles unterstrichen</u></p>. Die meisten Tags lassen sich durch so genannte Attribute näher bestimmen; diese geben genauer an, wie das Tag die Darstellung beeinflussen soll. Attribute bestehen aus einem Schlüsselwort, einem Gleichheitszeichen und einem Wert in Anführungszeichen, z. B. size="-1". Im Folgenden werden jeweils nur die wichtigsten Attribute angegeben. Oft muss man dabei nicht alle verwenden - die meisten sind ohnehin optional. Grundgerüst Jede XHTML-Datei weist dasselbe Grundgerüst auf: <html> <head>... Dies ist der Textkopf. Hier stehen Informationen über das Dokument. </head> <body>... Dies ist der Textkörper. Er enthält die Inhalte und Formatierungs-Elemente. </body> </html>

2 Um dem Browser mitzuteilen, welche Art von Datei er vor sich hat, wird außerdem eine Deklaration des Dokumententyps (DTD) vorgenommen; sie lautet für XHTML 1.0 (die gerade aktuelle Sprachvariante): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> Diese Angabe steht in einem XHTML-Dokument vor dem eigentlichen Dokument (zuoberst). Dokument-Kopf Im Dokument-Kopf werden vor allem Hintergrundinformationen untergebracht: <title>... </title> <meta name="..." content="..." /> <link rel="..." href="..." type="..." /> <base href="..." target="..." /> Titel des Dokuments Hintergrundinformationen Eingebundene Dokumente (s. Stylesheets) Basis-Verzeichnis Die Werte der Attribute sind ziemlich streng standardisiert, so dass man einiges über sie wissen muss, um sie zu benützen - das wird aber erst bei einem größeren Projekt wirklich wichtig und daher hier nicht weiter diskutiert. Von Beginn an muss man nur <title>...</title> einsetzen. Zudem können im Dokument-Kopf in einem eigenen Bereich Formatierregeln, so genannte Stylesheets, abgelegt werden: <style>... </style> Zu diesem Thema kommt mehr im Kapitel Stylesheets. Grundsätzlich gilt, dass es langfristig besser ist, alle Formatierungen als Stylesheets festzulegen, weil sie sich dann viel leichter für ein ganzes Dokument oder gar für mehrere Dokumente gleichzeitig verändern und anpassen lassen. Für Anfänger empfiehlt es sich aber, zunächst darauf zu verzichten und die Attribute der einzelnen Tags erst etwas näher kennen zu lernen. Dokument-Körper Im Anfangs-Tag des Dokument-Körpers werden vor allem die Farben festgelegt: <body background="..." bgcolor="..." text="..." link="..." alink="..." vlink="..."> background ermöglicht das Einfügen eines Hintergrundbildes, bgcolor die Einstellung der Hintergrundfarbe, text bestimmt die Textfarbe, link, alink und vlink die Farben für Links, aktive Links (angeklickte Verknüpfungen) und besuchte Links. Farbwerte gibt man am besten als R(ot)G(rün)B(lau)-Werte im Format #rrggbb im 16-er-System (hexadezimal) an; der höchste Wert ist ff (255=15x16+15), der niedrigste 00 (0), Beispiele: #ffffff weiß # schwarz #ff0000 rot #00ff00 grün #0000ff blau #ffff00 gelb usw. Es gibt auch die Möglichkeit, bestimmte (gebräuchliche) Farbwerte mit ihren englischen Bezeichnungen aufzurufen; für die oben angegebenen Farben wären das white, black, red, green, blue und yellow. Es gibt noch weitere solche Farbbezeichner die RGB-Werte sind aber wesentlich flexibler und präziser. Absätze Texte werden in Absätze, so genannte Paragraphen, eingeteilt: <p align="...">...</p> align bestimmt die Ausrichtung des Absatzes. Absätze erzeugen außerdem entsprechende Umbrüche und Durchschüsse (Abstände zwischen den einzelnen Absätzen).

3 Verknüpfungen (Links) Links sind mit die wichtigste Eigenheit von XHTML sie macht XHTML-Dokumente zu Hypertexten (XHTML heißt extensible HyperText Markup Language). Sie ermöglichen das Anspringen von Adressen im Dokument selbst oder den direkten Wechsel zu einem anderen Dokument (oder sogar zu einem bestimmten Ort innerhalb des anderen Dokuments). <a name="..." href="..." target="...">... </a> name bezeichnet dabei ein Sprung-Ziel, href eine Sprung-Adresse; Letztere entspricht entweder einem name-attribut eines anderen <a>-tags in der Form href="#[name]" oder einem URI (Unified Resource Identifier - eine Internet-Adresse) oder einer Kombination von beidem. target gibt das Zielfenster an (voreingestellt ist in der Regel dasselbe Browser-Fenster, aber es lassen sich auch andere anwählen). Schriftbild Einige Tags sind sehr einfach gemacht und nur dazu gedacht, Text direkt zu formatieren: <b>... </b> fett <i>... </i> schräg <u>... </u> unterstrichen <s>... </s> durchgestrichen Auch die Größe lässt sich leicht verändern: <big>... </big> größer <small>... </small> kleiner Man kann auch hoch- und tiefgestellt schreiben: <sup>... </sup> hochgestellt <sub>... </sub> tiefgestellt Die Größe wird durch XHTML eher grob angegeben: von 1 (kleinste) bis 7 (größte) Schrift. Als Basiswert wird 3 angenommen; dies entspricht in den meisten Browsern einer 12-Punkte-Schrift. Per Stylesheet lässt sich der Schriftgrad sehr viel genauer einstellen. Die Schriftart lässt sich über folgenden Befehl angeben: <font face="..." size="..." color="...">... </font> face bezeichnet dabei die Schriftart selbst, size die Größe, color die Farbe. size kann auch negative Werte annehmen; wenn ein Vorzeichen gesetzt wird, dann werden die Werte zum voreingestellten Basiswert addiert (size="-1" ergibt also in der Regel dasselbe wie size="2"). Überschriften XHTML bietet sechs verschiedene Überschriftengrößen an, von 1 (größte) bis 6 (kleinste); diese weden jeweils fett gedruckt. <h1>... </h1> <h6>... </h6> größte kleinste Zeilenumbruch Um einen Zeilenwechsel zu erzwingen (auch dort, wo er nicht durch die Bildschirmbreite ausgelöst wird), gibt es den unbedingten Zeilenumbruch: <br /> Horizontale Linie XHTML kennt keine Seitenumbrüche; dafür lassen sich Abschnitte durch Linien voneinander trennen: <hr align="..." width="..." size="..." noshade /> width gibt dabei die Breite an, size die Dicke; noshade erzwingt eine einfache Linie (Browser zeigen oft 3D-Linien an). Mit align kann man die Linie positionieren.

4 Bilder XHTML kann Bilder anzeigen und positionieren allerdings nur in vom Browser unterstützten Formaten: <img src="..." alt="..." width="..." height="..." align="..." border="..." /> src gibt den Speicherort der Bild-Datei an, alt den Text, der während des Ladens angezeigt wird (oder dann, wenn das Bild aus irgendwelchen Gründen nicht angezeigt werden kann). width und height stehen für Breite und Höhe des Bildes, align ermöglicht die Positionierung im Verhältnis zu umgebenden Elementen, z. B. Paragraphen. Mit border stellt man die Rahmendicke ein. Bilder mit Verknüpfungen (Image-Map) Bilder können auch als Links genutzt werden; dazu gibt es die Möglichkeit, auf einem Bild einen oder mehrere Bereiche (oder das ganze Bild) als Links zu nutzen, und zwar mit Hilfe von so genannten Image- Maps. Diese muss man zuerst definieren mit zwei Tags, die zusammen verwendet werden müssen: <map name="..."> <area shape="..." coords="..." href="..." alt="..." target="..." /> </map> name ist dabei die Kennung der Image-Map. Mit shape wird die Form des als Link aktiven Bereichs angegeben, mit coords seine genaue Position auf dem Bild. href gibt die Sprung-Adresse an. Mit jedem weiteren <area>-tag kommt ein aktiver Bereich dazu. Der Aufruf einer Image-Map erfolgt mit dem zusätzlichen Attribut usemap im <img />-Tag: <img src="..." usemap="#[name]" /> Listen Mit XHTML lassen sich auf einfache Weise Listen erstellen. Dazu deklariert man zuerst eine Listenart (Attribut type) und trägt nachher die Listenpunkte ein. Die unsortierte Liste hat folgende Struktur: <ul type="..."> <li>... </li> </ul> Die sortierte (nummerierte) Liste bietet zusätzlich den Startwert: <ol type="..." start="..."> <li>... </li> </ol> Tabellen Tabellen sind das wohl wichtigste Gestaltungselement in XHTML. Man kann sie nicht nur ziemlich ausgiebig gestalten, sondern auch ineinander verschachteln, also innerhalb einer Tabellenzelle eine weitere Tabelle einfügen. So ist es möglich, komplexe Seitenaufteilungen zu erreichen. Allerdings ist es dabei wichtig, genau zu wissen, welche Attribute wie einsetzbar und gestaltbar sind. Daher ist dieser Abschnitt etwas ausführlicher als die bisherigen. Eine Tabelle hat folgende Grundstruktur: <table> Beginn der Tabelle <tr> Tabellenzeile <td> Tabellenzelle... Inhalt der Zelle (alle bisher diskutierten Elemente können vorkommen!) </td> Abschluss Zelle Abschluss Zeile </table> Abschluss Tabelle Eine Tabellenzeile kann mehrere Zellen enthalten, jede Zelle steht dabei für eine Spalte. Die Tabellenzellen lassen sich miteinander verbinden, entweder zeilen- oder spaltenübergreifend.

5 Die jeweiligen Anfangs-Tags bieten eine Vielzahl von Attributen; zuerst zur Tabelle selbst: <table align="..." width="..." border="..." cellpadding="..." cellspacing="..."> Mit den ersten beiden Attributen werden Ausrichtung und Breite relativ zum Bildschirm bzw. zum übergeordneten Element (z. B. einer anderen Tabellenzelle) oder absolut bestimmt. Wichtig: Eine Möglichkeit, die Höhe einzustellen, gibt es hier nicht! border stellt die Randdicke ein; cellpadding ist für den Abstand des Inhalts vom Zellenrand zuständig, cellspacing für den Abstand der Zellen voneinander. Man könnte der Tabelle auch eine Hintergrundfarbe zuweisen (Attribut bgcolor). Nun zur Zeile: <tr align="..." valign="..." bgcolor="..."> Für eine Tabellenzeile kann die Ausrichtung innerhalb der Zellen einheitlich bestimmt werden, sowohl horizontal (align) als auch vertikal (valign). Auch hier lässt sich die Hintergrundfarbe anpassen. Besonders umfangreich sind die Einstellmöglichkeiten für die Zellen; daher hier mehrere Beispiele, die verschiedene Möglichkeiten hervorheben (alle Attribute könnten in einem einzigen Tag vorkommen!). <td align="..." valign="..." width="..." height="..." bgcolor="..."> Neben der Möglichkeit, innerhalb einer Zelle noch einmal Ausrichtung und Hintergrundfarbe zu verändern, bietet die Zelle nun die Möglichkeit, Breite und Höhe einzustellen - allerdings nicht relativ, sondern in absoluten Werten, nämlich Pixeln (Bildschirmpunkten). Um dieses Angebot zu nutzen, muss man sich aber darüber im Klaren sein, dass es Bildschirme mit sehr unterschiedlicher Auflösung gibt - und ist ein Wert größer als der entsprechende des Bildschirms, dann geht die Seite unter Umständen beim Anzeigen über den Bildschirmrand hinaus. Das sieht nicht nur schlecht aus, sondern zwingt auch zum Scrollen (also zum Bewegen der Anzeige, damit man alles zu Gesicht bekommt) in mehrere Richtungen. Nun zu weiteren wichtigen Gestaltungsmöglichkeiten: <td colspan="..." rowspan="..." nowrap> Wie oben schon erwähnt, kann man Zellen über mehrere Spalten oder Zeilen zusammenfassen, um eine differenzierte Struktur zu ermöglichen; colspan gibt an, über wie viele Spalten eine Zelle geht, rowspan bezeichnet die Zeilen. Diese Eigenschaft macht Tabellen sehr flexibel, aber sie zwingt auch dazu, diese genau zu planen. Wenn man nämlich Zellen zusammenfasst, muss man das über alle betroffenen Zeilen hinweg berücksichtigen, denn für jede Zelle wird automatisch Platz einberechnet, den man nachher auch füllen muss. Einfach weglassen darf man Zellen, die man nicht braucht, nicht! nowrap schließlich verhindert, dass innerhalb der Zelle ein Zeilenumbruch vorkommt. Das kann nützlich sein, ist aber häufig auch etwas problematisch - es kann wieder dazu führen, dass die Tabelle über den Bildschirmrand hinausgeht. Anstelle des <td>-tags kann auch das <th>-tag verwendet werden. Es ist für Überschriften innerhalb von Tabellen gedacht und wird von Browsern entsprechend angezeigt, in der Regel fett und zentriert. Bis hierher muss man kommen, um Seiten befriedigend gestalten zu können. Abschließend für diesen Teil nun eine komplette XHTML-Datei mit gliedernder Tabelle; das Listing lässt sich exakt so eingeben und dann im Browser anzeigen. An dieser Stelle noch ein paar Hinweise zum Vorgehen bei der Programmierung: Es empfiehlt sich, strukturierten Code zu erstellen. Es ist zwar möglich, ohne eine einzige Zeilenschaltung Befehl an Befehl zu reihen, aber das erschwert das Kontrollieren und Vervollständigen des Codes bei Fehlern oder Problemen enorm. Generell gilt, dass jede Maßnahme, die zur Übersichtlichkeit des XHTML-Textes beiträgt, in Ordnung geht. Ob dazu mehr oder weniger Zeilenschaltungen notwendig sind, ist jeder und jedem Einzelnen überlassen. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>tabula Rasa</title> <meta name="author" content="m. Gaiser"> </head>

6 <body bgcolor="#888888"> <h3 align="center">beispiel für eine HTML-Seite mit einer gliedernden Tabelle</h3> <table width="100%" border="1" bgcolor="#bbbbbb"> <tr> <th colspan="3"><font color="#ff0000">der Titel der Tabelle in Rot</font></th> <tr valign="top"> <td rowspan="3" align="left" bgcolor="#ffff00">linke Spalte<br />über drei Zeilen<br /> mit Zeilenumbruch</td> <td align="center">erste Zeile Mitte</td> <td align="right">erste Zeile rechts<hr width="80%" />Rechtsbündig</td> <tr valign="middle"> <td align="center">zweite Zeile Mitte<hr width="80%" />Die Zelle links ist belegt!</td> <td align="right">zweite Zeile rechts</td> <tr valign="bottom"> <td align="center"> <h5>kleines Schachbrettmuster</h5> <hr size="3" noshade />  <table align="center" bgcolor="#ffffff"> <tr> <td height="20" width="20"> </td> <tr> <td height="20" width="20"> </td> <td height="20"" width="20"> </td> <tr> <td height="20" width="20"> </td> </table> <hr size="3" noshade /> <p>das war eine eingeschobene Tabelle!</p> </td> <td align="right" valign="bottom">dritte Zeile rechts</td> </table> </body> </html> Weitere Möglichkeiten In den folgenden Abschnitten werden weitere Layout-Elemente sowie Möglichkeiten beschrieben, HTML interaktiv oder dynamisch einzusetzen sowie Multimedia-Effekte einzubauen. Letztere setzen jedoch größere Vertrautheit mit der Sprache an sich voraus und sind nicht einfach zu handhaben. Deshalb sollte man sich intensiver mit ihnen befassen, bevor man sie einsetzt - eine ausreichend präzise Beschreibung ist hier nicht realisierbar. Rahmen (Frames) und Frameset Wenn man jeweils nur einen Teil einer Bildschirmanzeige verändern will, lohnt es sich oft, den Bildschirm in mehrere Bereiche einzuteilen; dabei wird in jedem Teil des Bildschirms ein eigenes Dokument angezeigt, das sich unabhängig von anderen oder aber im Zusammenspiel mit diesen aufrufen lässt. Die einzelnen Bereiche nennt man Frames. Als Basis-Datei für ein in Frames gegliedertes Dokument (bzw. ein in Frames verteiltes Bündel von Dokumenten) wird das so genannte Frameset verwendet. Dabei ist es wichtig, bei der Beschreibung die Reihenfolge einzuhalten. Im Frameset-Dokument steht das <frameset>-tag anstelle des <body>-tags. Ein Vorteil des Framesets ist, dass man (anders als bei Tabellen) wirklich alle Bereiche des Bildschirms belegen kann. Frames können relativ zur Bildschirmfläche oder absolut definiert werden. Framesets

7 können ineinander verschachtelt werden, um Verbindungen zu erreichen (ähnlich wie bei Tabellen). Anders als bei den differenzierter beschriebenen Dateien werden Framesets "der Reihe nach" abgearbeitet: zuerst alle Bereiche der ersten Zeile, dann alle Bereiche der zweiten usw. Bei der Beschreibung von Frames kann als "Wildcard", also quasi zur Verwendung von "Restposten" an Flächen, das Zeichen "*" eingesetzt werden; so lassen sich einfach flexible Layouts erstellen. Das folgende Frameset ist zweizeilig: Der Bildschirm wird in einen oberen und einen unteren Bereich geteilt. Der obere Bereich ist 150 Pixel hoch, der untere hat keine feste Höhe. Im unteren Teil des Bildschirms wurde nochmals eine Einteilung vorgenommen; der schmale linke Bereich hat eine feste Breite, der rechte ist unlimitiert; er nimmt also den gesamten Bereich ein, den die anderen beiden definierten Bereiche freilassen: <frameset rows="150,*"> <frame name="top" src="top.html" marginwidth="5" marginheight="5" frameborder="1" /> <frameset cols="200,*"> <frame name="menu" src="menu.html" frameborder="1" /> <frame name="main" src="home.html" scrolling="auto" /> </frameset> </frameset> Hier die vollständigen Befehle mit den entsprechenden Attributen: <frameset rows="..." cols="..."> <frame name="..." src="..." frameborder="..." scrolling="..." /> <frame name="..." src="..." marginwidth="..." marginheight="..." /> </frameset> Mit rows und cols werden durch Eingabe von Werten, die mit Kommas getrennt werden, Angaben zur Einteilung der Frames gemacht. Die Attribute name und src sind obligatorisch. frameborder zeigt die Begrenzungslinien der Frames an, scrolling ermöglicht es, die Bildlaufleiten entweder ein- oder auszublenden. marginwidth und marginheight setzen am Rand Abstände. Formulare Formulare sind neben Image-Maps die am häufigsten eingesetzte Form, um XHTML interaktiv zu benutzen. Grob gesagt ermöglicht ein Formular es den Besuchern einer Seite, Daten einzugeben und zur Weiterverarbeitung an ein Programm oder Script zu schicken. Dazu muss ein solches natürlich zunächst einmal verfügbar sein. Formulare funktionieren also nur sinnvoll mit zusätzlichen Scripts oder externen Programmen. Daher werden sie hier nicht ausführlicher behandelt. Scripts Scripts sind entweder Programmdateien oder interne Code-Segmente, die verschiedene Funktionen ausführen können. Diese können unterschiedlicheste Zwecke erfüllen, die über die reine Darstellung hinausgehen, und werden vor allem für dynamische und interaktive Teile eines Dokuments genutzt. Da zu deren Nutzung Kenntnisse in anderen Programmiersprachen notwendig sind, werde ich hier nicht näher auf Scripts eingehen. Objekte In XHTML können auch Elemente und Objekte angezeigt bzw. eingebunden werden, die der Browser nicht alleine darstellen kann, sondern nur mit Hilfe von Plugins oder externer Programme. Da hier viel Hintergrundwissen erforderlich ist, können Objekte hier ebenfalls nicht eingehend vorgestellt werden. Stylesheets Nun noch zu einer zusätzlichen Möglichkeit, um XHTML-Dateien graphisch aufzumöbeln: Stylesheets. CSS (Cascading StyleSheets), die verwendete Sprache, ist inhaltlich eng verwandt mit XHTML, enthält aber keine eigenen Tags, sondern nur eine Vielzahl von Attributen. Innerhalb einer Tag-Definition können Stylesheets im style-attribut eingegeben werden. In diesem Fall sind sie aber nur für den aktuellen Tag gültig. Will man ein bestimmtes Stylesheet mehrfach nutzen, muss man es entweder im <style>-bereich im Dokument-Kopf unterbringen oder in einer externen Datei - dies ist über das <link>-tag im Dokument-Kopf möglich. Diese Angabe muss folgendermaßen gestaltet werden: <link rel="stylesheet" type="text/css" href="[name].css" /> Der Name der externen Datei ist frei wählbar;.css-dateien sind aber üblich.

8 Man kann fast alle Tags mit einem Stylesheet belegen; zudem lassen sich Klassen und Unterklassen generieren, die entweder direkt an ein Tag gebunden werden oder aber allgemein nutzbar sein können. In XHTML-Tags können sie über das class-attribut aufgerufen werden; um innerhalb eines bereits klassifizierten Tags ein weiteres Stylesheet aufzurufen, gibt es das <span>-tag, das ähnlich wie das <font>-tag funktioniert, aber nur das class-attribut hat. Ein Stylesheet hat folgende Grundstruktur: tag.class:state { attribute1: value x ; attribute2: value x;.. ; } Dieser Aufbau ist unabhängig vom Ort der Ablage ob im style-attribut oder in einer externen Datei, spielt für die Formatierung keine Rolle. class und state sind nicht obligatorisch (state gibt es nur bei interaktiven Elementen wie Links); eine Klasse kann als.class auch alleine als allgemeine Unterklasse definiert werden. Es folgt eine Übersicht über wichtige Attribute; nähere Angaben und viele weitere Attribute finden sich in entsprechenden Tutorials und Anleitungen. Für einige der Befehle existieren auch Sammelbegriffe, so genannte Shorthands. color width height line-height word-spacing letter-spacing vertical-align text-decoration text-transform text-align text-indent font-family font-style font-variant font-weight font-size font background-color background-image background list-style-type list-style-image list-style-position list-style border-color border-style border-top-width border-right-width border-bottom-width border-left-width border-width border-top border-right border-bottom border-left border Textfarbe Breite Höhe Zeilenhöhe Wortabstand Buchstabenabstand Anordnung auf der Seite (oben, Mitte, unten) Textausstattung (unterstrichen) Textumwandlung (Groß- oder Kleinbuchstaben) Ausrichtung (Absätze oder Elemente) Absatzeinzug Schriftart (bzw. Schriftartenfamilie) Schriftgestalt (kursiv) Schriftvariante (Kapitälchen) Schriftgewicht (fett oder auch fein) Schriftgröße Hintergrundfarbe Hintergrundbild Art der Liste Bildvorlage für das Listensymbol Positionierung der Liste (Einrückung) Randfarbe Randart Randdicke oben Randdicke rechts Randdicke unten Randdicke links Rand oben Rand rechts Rand unten Rand links

9 margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left padding position top right bottom left Abstand oben Abstand rechts Abstand unten Abstand links Freiraum oben Freiraum rechts Freiraum unten Freiraum links Positionierung des Objekts (absolut oder relativ) Objektstartpunkt oben Objektstartpunkt rechts Objektstartpunkt unten Objektstartpunkt links Tutorials und Software Das beste Tutorial, um die Kenntnisse, die diese Einführung vermittelt, auszubauen, ist SelfHTML von Stefan Münz; dieses Tutorial ist nicht nur umfassend und präzise, sondern steht auch sowohl online zum Lesen als auch gepackt zum Download zur Verfügung: Nützliche Editoren, um XHTML zu schreiben und zu kontrollieren, gibt es zuhauf. Hier sollen nur einige besonders gute Programme Erwähnung finden, die auch weiterentwickelt oder zumindest gut gepflegt werden. Alle hier angegebenen Programme sind zudem Freeware, also im Internet kostenlos erhältlich. Ich habe auch Wert darauf gelegt, Editoren mit deutschsprachigen Bedienoberflächen auszusuchen. Alle Programme bieten Syntaxhervorhebung für HTML und weitere Programmier- und Arbeitshilfen. Scribe! von Jan Uhlenbrok: Scribe! ist eigentlich eher eine Entwicklungsumgebung für XHTML-Seiten als ein reiner Editor. Er stellt verschiedenste Hilfen und Assistenten zur Verfügung und bietet außerdem Werkzeuge zur Kontrolle ganzer Projekte. Ein FTP-Client zum Hochladen der fertigen Files ist eingebaut. HTML-Editor Phase 5 von Ulli Meybohm, jetzt betreut von Lars Meyer: Phase 5 bietet eine aufgeräumte Oberfläche und viele sehr gute Assistenten an. Für Fortgeschrittene ist er ideal, da er sich umfassend anpassen und konfigurieren lässt. Er versteht sich auf XHTML und bietet die Möglichkeit, SelfHTML einzubinden. Allerdings bietet er kein integriertes FTP-Tool. SuperEdi von WoLoSoft (Wolfgang Loch): SuperEdi ist einfach aufgebaut und bietet nur die notwendigsten Hilfen; dafür ist das Programm sehr kompakt und anspruchslos und bietet dennoch einen integrierten FTP-Client. SuperEdi ist damit ein sehr guter Editor für Gelegenheitsschreiber, die mit einem einzigen Programm auskommen wollen. 2ndEditor von sixdots (Steffen Schirmer): 2ndEditor ist extrem kompakt und weist dennoch als einziger der vorgestellten Editoren eine HTML- Vorschau auf (vgl. das Bild auf der ersten Seite). Diese nutzt zwar keine Stylesheets, aber für das rasche Entwerfen, das Ausprobieren einer Idee oder das Überprüfen von Seiten eignet sich 2ndEditor vorzüglich.