</ul>
</pre>
%backtotop%

<h4><a name="ol">Nummerierte Auflistungen:</a></h4>
<p>Wenn Sie &#60;ol&#62;&#60;/ol&#62; anstatt &#60;ul&#62;&#60;/ul&#62; verwenden, 
erstellen Sie eine nummerierte Auflistung. Allerdings wird die Nummerierung nicht
in verschachtelte Listen fortgef&#252;hrt. Anstatt von 1,2,2.1,2.2,3 wird 1,2,1,2,3 
dargestellt.</p>
%backtotop%

<h4><a name="dl">Definitionslisten</a></h4>
<pre>
&#60;dl&#62;
	&#60;dt&#62;Wort&#60;/dt&#62;
	&#60;dd&#62;Erkl&#228;rung&#60;/dd&#62;
&#60;/dl&#62;
</pre>
<p>Eine Definitionsliste macht dann Sinn, wenn Sie Begriffe erkl&#228;ren m&#246;chten,
zum Beispiel das Glossar Ihrer Internetseite. Der &#60;dl&#62;&#60;/dl&#62; Befehl
kann ein Attribut compact=&#34;compact&#34; erhalten, das den Erkl&#228;rungstext
auf der gleichen Zeile darstellt, wie das Wort. Dies h&#228;ngt allerdings davon ab,
wie lang das zu erkl&#228;rende Wort ist.</p>
%backtotop%
<h3><a name="links">Verlinkungen</a></h3>
<p>Verlinkungen zu anderen Seiten ist das, was das Internet zu dem macht, was
es ist. Um eine Verlinkung in Ihrer Seite einzuf&#252;gen, verwenden Sie den &#60;a&#62;
Befehl.</p>
<pre>
&#60;a href=&#34;page2.php&#34; 
target=&#34;_blank&#34; 
title=&#34;Sehen Sie ein Beispiel&#34;&#62;Seite 2&#60;/a&#62;
</pre>
<p>Das href Attribut definiert welche Seite durch den Text innerhalb
der &#60;a&#62; und &#60;/a&#62; Befehle verlinkt wird. EasyCMS zeigt
Ihnen alle bereits erstellten Seiten in einer Auswahlliste im 
Werkzeugbereich an.</p><p> Das target Attribut beschreibt, wo die fertig
geladene Seite angezeigt wird. Dies kann ein Frame sein, oder ein 
ne&#252;s Fenster. Falls Sie die Seite im gleichen Fenster &#246;ffnen 
wollen, lassen Sie es weg. Um die Seite in einem ne&#252;n Fenster zu
&#246;ffnen, f&#252;gen sie ein target=&#34;_blank&#34; hinzu. EasyCMS 
macht das f&#252;r Sie, wenn Sie  &#34;Ne&#252;s Fenster&#34;
anhaken.</p><p>Wenn Sie dem Surfer extra Informationen &#252;ber die folgende
Seite geben wollen, f&#252;gen sie ein &#34;title&#34; Attribut ein.</p>
<p>Um den Surfer zu einem Ziel in der gleichen Seite zu schicken,
verwenden Sie das Doppelkreuz &#34;#&#34; mit einem Namen als href
und f&#252;gen Sie an der Zielstelle in der Seite einen Link mit 
name="Name" anstatt von href ein:</p>
<pre>
&#60;a href=&#34;#Neuigkeiten&#34;&#62;direkt den Neuigkeiten&#60;/a&#62;
&#60;a name=&#34;Neuigkeiten&#34;&#62;Neuigkeiten&#60;/a&#62;
</pre>
<p>Diese &#34;Skip links&#34; werden oft benutzt, um Tastaturnutzern 
das Navigieren der Seite zu vereinfachen. Diese Surfer k&#246;nnen durch
diese Verlinkungen schneller zum Inhalt der Seite gelangen, ohne 
per Tabulator Taste &#252;ber jeden einzelnen Link im Menu springen zu m&#252;ssen.</p>
%backtotop%

<h3><a name="textchanges">Text &#196;nderungen:</a></h3>

<h4><a name="strong">Fett</a></h4>
<pre>&#60;strong&#62;&#60;/strong&#62;</pre>
<p>Definiert einen Text als Fett. Browser stellen den Text als fett gedruckt dar
und Screen Reader erh&#246;hen die Lautst&#228;rke.</p>
%backtotop%


<h4><a name="emphasized">Sperrschrift</a></h4>
<pre>&#60;em&#62;&#60;/em&#62;</pre>
<p>Stellt einen Text gesperrt dar. HTML hat ebenfalls einen  
&#60;i&#62;&#60;/i&#62; Befehl, der scheinbar
das Gleiche bewirkt, allerdings ist dieser nur ein Darstellungsbefehl, keine 
logische Auszeichnung.</p>
%backtotop%


<h4><a name="acronyms">Abk&#252;rzungen</a></h4>
<pre>&#60;acronym&#62;&#60;/acronym&#62;</pre>
<p>Abk&#252;rzungen sollten f&#252;r Benutzer von Screen Readern und ne&#252;ren Browsers
mit einem titel Attribut erkl&#228;rt werden: &#60;acronym title=&#34;United States of America&#34;&#62;USA&#60;/acronym&#62;.</p>
%backtotop%


<h4><a name="pref">Vorformattierter Text</a></h4>
<pre>&#60;pre&#62;&#60;/pre&#62;</pre>
<p>Stellt einen Text als vorformatiert dar. Text innerhalb dieses Befehls wird
so dargestellt, wie er ist, mit Zeilenumbr&#252;chen, Leerzeichen und 
Tabulatoren. Genau so, wie Windows Textpad diese darstellt.</p>
%backtotop%


<h3><a name="tables">Tabellen</a></h3>
<p>Tabellen sind ein Werkzeug, um Daten darzustellen.</p><p>In HTML werden Sie jedoch
aufgrund von Browserschw&#228;chen als Darstellungswerkzeug missbraucht.</p><p>
Eine Datentabelle sieht folgendermassen aus:</p>

<pre>
&#60;table summary="Mitglieder der Arbeitsgruppe EasyCMS"&#62;
&#60;tr&#62;
	&#60;th scope=&#34;col&#34;&#62;Name&#60;/th&#62;
	&#60;th scope=&#34;col&#34;&#62;Vorname&#60;/th&#62;
&#60;/tr&#62;
&#60;tr&#62;
	&#60;td&#62;Alfred&#60;/td&#62;
	&#60;td&#62;Test&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
	&#60;td&#62;Sibylle&#60;/td&#62;
	&#60;td&#62;Demo&#60;/td&#62;
&#60;/tr&#62;
&#60;/table&#62;
</pre>

<p>Jedes &#60;tr&#62;&#60;/tr&#62; Paar beschreibt eine Tabellenreihe. &#60;th&#62;&#60;/th&#62;  sind &#34;Header&#34;, also Tabellen&#252;berschriften. Das Attribut scope definiert
welche Zellen mit diesem Header verbunden werden, col bedeutet alle Zellen vertikal unter
diesem Header, row alle Zellen horizontal neben diesem Header. Diese Verbindung ist 
n&#246;tig, um blinden Surfern die Tabelle lesbar zu machen. Da Screenreader die Tabelle als
Text vorlesen, w&#228;re es sp&#228;testens ab der dritten Reihe nicht mehr logisch nachvollziehbar,
was diese Daten sind. &#60;td&#62;&#60;/td&#62; sind die einzelnen Zellen der Tabelle.</p>
<p>Das summary Attribut in der Tabelle erlaubt es Nutzern von Screenreadern eine 
Zusammenfassung der Tabelle zu erhalten, um diese n&#246;tigenfalls zu &#252;berspringen.</p>

<p>Tabellen, die nur zur Darstellung verwendet werden, sind etwas komplexer. Nutzen Sie 
keine der Datentabellentechniken (summary, header, scope) in diesen Tabellen.</p>

<pre>&#60;table&#62;
&#60;tr&#62;
	&#60;td&#62;Inhalt 1_1&#60;/td&#62;
	&#60;td&#62;Inhalt 1_2&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
	&#60;td&#62;Inhalt 2_1&#60;/td&#62;
	&#60;td&#62;Inhalt 2_2&#60;/td&#62;
&#60;/tr&#62;
&#60;/table&#62;</pre>

<p>Der table Befehl kann die folgenden Attribute haben:</p>
<dl>
	<dt>width=&#34;x|x%&#34;</dt>
	<dd>Die Breite x der Tabelle, entweder in Pixeln &#34;400&#34; oder als Prozentangabe &#34;40%&#34;.</dd>
	<dt>border=&#34;x&#34;</dt><dd>Die Breite x des Tabellenrandes in Pixeln.</dd>
	<dt>cellpadding=&#34;x&#34;</dt><dd>Der Abstand x des Zelleninhalts zum Zellenrand 
	in Pixeln.</dd>
	<dt>cellspacing=&#34;x&#34;</dt><dd>Der Abstand x zwischen den einzelnen Zellen.</dd>
	<dt>bgcolor=&#34;#xxxxxx&#34;</dt><dd>Die Hintergrundfarbe in hexadezimaler 
	Schreibweise.</dd>
</dl>

<p>Tabllenzellen k&#246;nnen die folgenden Attribute besitzen:</p>
<dl>
	<dt>align=&#34;left|center|right&#34;</dt><dd>Die Textausrichtung innerhalb der
	Zelle (links, mittig oder rechts)</dd>
	<dt>valign=&#34;top|middle|bottom&#34;</dt><dd>Die vertikale Textausrichtung 
	innerhalb der Zelle (Oben, Mitte, Unten)</dd>
	<dt>bgcolor=&#34;#xxxxxx&#34;</dt><dd>Die Hintergrundfarbe in hexadezimaler 
	Schreibweise.</dd>
	<dt>colspan=&#34;x&#34;</dt><dd>gibt an, wieviele Zellen diese Zelle beinhaltet,
	l&#246;schen Sie die folgenden Zellen in dieser Tabellenreihe.</dd>
	<dt>rowspan=&#34;x&#34;</dt><dd>gibt an, wieviele Reihen diese Zelle beinhaltet,
	l&#246;schen Sie die Zellen an der gleichen Stelle in jeder folgenden Zellenreihe.</dd>
	<dt>width=&#34;x&#34;</dt><dd>Die Zellenbreite x in Pixeln. Sie k&#246;nnen dies nur 
	einmal pro Tabelle definieren, die Zellen in anderen Tabellenreihen werden immer
	genauso breit wie die breiteste Zelle sein.</dd>
</dl>

<p>Komplexes Beispiel:</p>

<pre>
&#60;table border=&#34;0&#34; cellspacing=&#34;1&#34; 
width=&#34;300&#34; cellpadding=&#34;4&#34; bgcolor=&#34;#000000&#34;&#62;
&#60;tr&#62;
	&#60;td colspan=&#34;3&#34; bgcolor=&#34;#cccccc&#34;&#62;Grosse Zelle&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
	&#60;td width=&#34;50&#34; bgcolor=&#34;#cc99ff&#34; 
	rowspan=&#34;2&#34;&#62;Zelle 1_1&#60;br /&#62;(und 1_2)&#60;/td&#62;
	&#60;td width=&#34;125&#34; bgcolor=&#34;#336699&#34;&#62;Zelle 1_2&#60;/td&#62;
	&#60;td width=&#34;125&#34; bgcolor=&#34;#6699cc&#34;&#62;Zelle 1_3&#60;/td&#62;
&#60;/tr&#62;
&#60;tr&#62;
	&#60;td bgcolor=&#34;#003399&#34;&#62;Zelle 2_2&#60;/td&#62;
	&#60;td bgcolor=&#34;#0033cc&#34;&#62;Zelle 2_3&#60;/td&#62;
&#60;/tr&#62;
&#60;/table&#62;
</pre>
%backtotop%

<h3><a name="tables">Bilder</a></h3>
<p>Bilder werden einer HTML Seite durch den &#34;img&#34; Befehl hinzugef&#252;gt. 
Bilder Dateien sollten m&#246;glichst klein sein, um langem Warten auf die 
Webseite vorzubeugen. Um die Dateigr&#246;sse von Bilder zu optimieren, speichern 
Sie diese in einem der folgenden Formate. (Die Optimierungsm&#246;glichkeiten 
beziehen sich auf Adobe Photoshop / Imageready als Grafikprogramm):</p>
<p>
<strong>JPEG (.jpg,.jpeg,.jpe)</strong> f&#252;r Bilder mit vielen Farben und 
nicht-geometrischen Umrissen - wie Photos. JPEG verkleinert Bilddateien, indem
Bildpunkte ausgelassen werden, und das Bild in kleine, ineinander verschobene
Rechtecke aufgeteilt wird. JPEGs die zu hoch komprimiert wurden, zeigen 
&#34;Artefakte&#34; auf, Schlieren und verschmierte Bildbereiche, in denen die
Rechtecke sichtbar sind. Um ein Ergebnis zu erhalten, das gut genug f&#252;r das 
Internet ist, nehmen Sie eine Kompression von 70%. JPEGs k&#246;nnen als 
&#34;progressive&#34; gespeichert werden, was bedeutet, das ihre Qualit&#228;t 
w&#228;hrend des Ladens immer besser wird. Diese Technik gibt dem Surfer schon
von Anfang an einen Eindruck, was das Bild darstellt.</p>
<p><strong>GIF (.gif)</strong> f&#252;r Bilder die animiert sind, durchsichtige 
Bereiche ben&#246;tigen oder wenige Farben, grosse einfarbige Fl&#228;chen oder 
geometrische Umrisse besitzen. GIF komprimiert Bilddateien, indem die Farben
des Bildes auf eine bestimmte Anzahl reduziert werden, und das Ergebnis 
&#228;hnlich wie bei ZIP gepackt wird. Photoshop erm&#246;glicht Ihnen, die Art der
Farbtabelle auf verschiedene Weisen zu bestimmen, probieren Sie mehrere 
M&#246;glichkeiten aus, um bessere Ergebnisse zu erhalten. Eine weitere M&#246;glichkeit,
Kilobytes zu sparen, ist die &#34;lossy&#34; Option. Diese ersetzt kaum 
benutzte Farben durch die am N&#228;hesten liegende. Sie k&#246;nnen die lossy 
Option auf 10 stellen, ohne gr&#246;ssere Qualit&#228;tsunterschiede zu bemerken.
GIF ist das perfekte Format f&#252;r Screenshots von Programmen. In den meisten 
F&#228;llen reichen 64 Farben aus, um sehr gute und kleine Ergebnisse zu erhalten.
</p>
<p><strong>PNG (.png)</strong> kombiniert die Vorteile von beiden Formaten. 
Leider wird es noch nicht von allen Browsern unterst&#252;tzt. Ausserdem ist 
PNG nicht urheberrechtlich gesch&#252;tzt und kann daher auch f&#252;r die Erstellung
von Bilder per Script benutzt werden. GIF ist urheberrechtlich gesch&#252;tzt.</p>

<p>Um ein Bild zu Ihrer Seite hinzuzuf&#252;gen, benutzen Sie den &#60;img&#62; Befehl:</p>

<pre>&#60;img src=&#34;papierkorb.gif&#34; 
width=&#34;20&#34; height=&#34;20&#34; 
alt=&#34;Papierkorb&#34; 
title=&#34;Datei l&#246;schen&#34; 
border=&#34;0&#34; 
align=&#34;middle&#34;/&#62;</pre>

<p>Bilder k&#246;nnen die folgenden Attribute besitzen:</p>
<dl>
<dt>src=&#34;Pfad/zu/Dateiname&#34;</dt>
<dd>ist die einzige notwendige Angabe, Sie sagt dem Browser, welche Bilddatei
er darstellen soll.</dd>
<dt>width=&#34;x|x%&#34; height=&#34;x|x%&#34;</dt>
<dd>sind die Abmessungen des Bildes, entweder in Pixeln oder in Prozentangaben.
Diese sind nicht notwendig, erleichtern allerdings dem Browser die Arbeit und 
f&#252;hren dadurch dazu, das die Seite schneller dargestellt wird. Wenn Sie die 
Abmessungen weglassen, kann es sein, das das Seitenlayout w&#228;hrend des Ladens
hin und her springt. Sie k&#246;nnen per Prozentangaben und anderen Werten, als den
originalen, Bilder verkleinern und vergr&#246;ssern. HTML macht dies allerdings auf
eine sehr grobe Weise, sodass die Ergebnisse nur in seltenen F&#228;llen gut 
aussehen. Kleine Voransichtsbilder, sogenannte Thumbnails, sollten keinesfalls
per width und height erstellt werden, da die Hauptaufgabe eines Thumbnails ist, 
die Ladezeit zu verk&#252;rzen, indem ein kleineres Bild anstatt des gro&#223;en geladen
wird.</dd>
<dt>border=&#34;x&#34;</dt>
<dd>die Breite x des Bildrahmens. Wenn ein Bild verlinkt wird, erscheint ein
Rahmen in der Verlinkungsfarbe um das Bild herum, um dies zu verhindern, geben
sie eine Breite von 0 an: border=&#34;0&#34;.</dd>
<dt>alt=&#34;x&#34;</dt>
<dd>is der Ersatztext f&#252;r das Bild. Sollte das Bild auf dem Computer nicht 
gefunden werden, oder es entsteht ein Fehler beim Laden, erscheint dieser 
Text anstelle des Bildes. Textbrowser und Screen Reader zeigen, bzw. sprechen
diesen Text anstelle des Bildes. Falls ihr Bild nur Versch&#246;nerung ist, und 
keinerlei Funktion in der Seite hat, dann f&#252;gen Sie ein leeres alt Attribut ein,
um dieses Bild vor Screenreadern zu verstecken.</dd>
<dt>title=&#34;x&#34;</dt><dd>erlaubt Ihnen eine l&#228;ngere Beschreibung des 
Bildes anzugeben. Sie k&#246;nnen bis zu 1024 Zeichen verwenden. Diese Angabe 
erleichtert blinden Surfern, ihre Seite zu nutzen, und Spass daran zu haben,
wenn der Text richtig geschrieben ist.</dd>
<dt>longdesc=&#34;Beschreibung.html&#34;</dt>
<dd>Longdesc erlaubt es Screenreadern das Bild mit einem HTML Dokument zu
verkn&#252;pfen, welches detailierte Informationen &#252;ber das Bild enth&#228;lt. 
Verwenden Sie longdesc wenn die 1024 Zeichen von title nicht mehr ausreichen,
zum Beispiel bei komplexen Schemata.</dd>
<dt>align=&#34;left|right|top|middle|bottom&#34;</dt>
<dd>Align richtet das Bild relativ zum umgebenden Text aus. Wenn Sie 
align=&#34;left&#34; angeben, wird da Bild links vom Text ausgerichtet, und der
Text fliesst um es herum. Top,middle und bottom richten das Bild vertikal aus. 
Es ist nicht m&#246;glich in HTML ein Bild mittig innerhalb eines Textes auszurichten.
Align ist ein veraltetes HTML attribut, wenn Sie anstatt HTML xHTML verwenden 
wollen, benutzen Sie anstatt von align Stylesheets.</dd>
</dl>
%backtotop%

</help>
</config>