Sprunglink zum Inhalt Sprunglink zur Service-Navigation

Andreas Borutta

Service Navigation

Suche siteweit

Tipps zu HTML und CSS

Schwerpunkt dieser Seite sind überschaubare, konkrete Aufgaben und Lösungen dazu: in validem XHTML plus CSS. Barrierearmut wird angestrebt.

Ähnliche Themen, die Sie vielleicht ebenfalls interessieren:
Kurzes Inhaltsverzeichnis:
Vollständiges Inhaltsverzeichnis:

Neuste Tipps

Standard-Merkmale der Beispiele auf dieser Seite

Verschiedenes

Überschriften-Hierarchie

Zwei lesenswerte Artikel zum Thema:

  1. von Thomas Caspers
  2. von Jan Eric Hellbusch

Zeilennummerierung für Codebeispiele

Aufgabe
Lösung

In CSS2 existiert keine Eigenschaft für eine Zeilennummierung. Daher muss improvisiert werden.

So sieht's aus

<table class="codebeispiel-mit-zeilennummerierung">
	<tr>
		<td class="zeilennummern"><pre>
1
2
3
4
</pre></td>
		<td><pre>
&lt;ul&gt;
	&lt;li&gt;Lorem&lt;/li&gt;
	&lt;li&gt;Ipsum&lt;/li&gt;
&lt;/ul&gt;
</pre></td>
	</tr>
</table>

Danke an Pablo Theissen für die Anregung.

Wasguckstdu – Box mit begrenzter Größe – 'overflow: auto'

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Box mit fester Größe
  3. Mehr Inhalt als die Box aufnehmen kann
Lösung

So sieht's aus

Fußnoten

Aufgabe
  1. Eine wissenschaftliche Arbeit liegt gedruckt vor. Sie enthält etwas Typisches für solche Arbeiten: Fussnoten.
    Der Inhalt soll auch als Webseite zugänglich gemacht werden. Das gedruckte Dokument und die Webseite sollen sich nicht wesentlich unterscheiden. Daraus folgt: sprechende Linktexte haben zwar in aller Regel eine höhere Gebrauchstauglichkeit auf einer Webseite als eine winzige Zahl als Linktext, aber es wird auf diese Änderung bewußt verzichtet.
  2. Standard-Merkmale der Beispiele
  3. Das Fußnotenzeichen ist nicht nur ein Link auf die Fußnote, sondern es ist selbst Ziel eines Link: Es existiert ein Link "zur Textstelle" in jeder Fußnote
    Dies Links erlauben es dem Leser, die zugehörige Textstelle auch dann zu finden, wenn er in den Fußnoten stöbert und nicht direkt von der Textstelle kommt.
  4. Das Element sup transportiert keine Semantik. Daher gebe ich dem Markupmuster
    <a id="fnz3" class="fnz" href="#fn3">3</a>
    gegenüber
    <sup id="fnz3" class="fnz"><a href="#fn3">3</a></sup>
    den Vorzug.
  5. Die Fußnotenzeichen besitzen eine kleine Polsterung, damit die Fläche des Links größer wird. So ist der Link etwas leichter für Mausnutzer zu treffen.
    Die Fußnotenzeichen erhalten beim Hovern eine Hintergrundfarbe, weil so Mausnutzer leichter feststellen können, ob sie Link bereits "getroffen" hat.
Lösung

So sieht's aus

Fußbereich am unteren Fensterrand ausrichten

Aufgabe
Zusatzaufgabe 1

Verwendung von div

Lösung 1

So sieht's aus

Die Variante mit DIVs stammt im Original von Manuel Bieh. Er beschreibt sie auf Einmal Erdgeschoss bitte. Nachteile der Methode: div class="wrapper" und br style="clear: both;" dienen allein dem Gestaltungsziel.

Zusatzaufgabe 2

Verwendung von table

Lösung 2

So sieht's aus

Nachteile der Variante mit TABLE: die Verwendung von TABLE dient allein der Gestaltung. Und der Fußbereich wird im IE nicht in minimaler Höhe dargestellt, weil dieser height: 1px nicht interpretiert. Die Variante mit TABLE kann also nur eingesetzt werden, wenn auf die Abgrenzung des Fußbereiches verzichten möchte.

Mikroformate – Einführung

Empfehlenswerter Artikel zum Thema von Michael Jendryschik

SFTP statt FTP: Zeitstempel übertragen

Beim FTP-Protokoll wird der Zeitstempel nicht übertragen. Nachdem eine Datei auf den Server übertragen wurde, steht in ihrem Zeitstempel der Zeitpunkt der Übertragung.

Werkzeuge, die der Synchronisation eines lokalen Verzeichnisses mit dem Verzeichnis auf einem Server dienen, bewerten solche Dateien dann als ungleich und schlagen - unnötigerweise - eine Synchronisation vor.

Im Protokoll SFTP (Secure File Transfer Protocol) dagegen wird der Zeitstempel exakt übertragen. Leider bieten nur wenige Webhoster dieses - auch unter anderen Gesichtspunkten zu bevorzugende - Protokoll an.

Suchmaschinenoptimierung (SEO)

Empfehlenswerter Artikel zum Thema von Jens Meiert

Buch in einem einzigen HTML-Dokument

Aufgabe
Lösung

So sieht's aus

Marginalien

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Oberkanten von Marginalie und zugehörigem Absatz fluchten
  3. Lange Marginalien brechen um
  4. Im Inhalt kommen verschiedene Elemente wie p, ul, pre etc. vor
Lösung

So sieht's aus

p.marginalie {
	width: 12em;
	float: left;
	text-align: right;    
	margin: 0;
}
div {
	margin: 0 0 0 14em;
}

<p class="marginalie">Marginalie</p>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
		veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
		ea commodo consequat.</p>
	<ul>
		<li>Lorem
			<ul>
				<li>ipsum</li>
			</ul>
		</li>
	</ul>
	<pre>Lorem ipsum dolor sit amet.</pre>
</div>
<p class="marginalie">Lange lange lange lange lange Marginalie</p>
<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
		veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
		ea commodo consequat.</p>
</div>

Das div um die Elemente mit Inhalt ist leider notwendig. Ein Grund: ein Element wie pre wird typischerweise mit einer Festbreitenschrift dargestellt. Die Größe für die Festbreitenschrift kann der Nutzer in seinem Browser selbst einstellen. Verschiedene Schriftgrößen für p und pre sind also möglich (und wahrscheinlich). Eine Randangabe mit margin: 14em würde also verschiedene Längen ergeben.
Da für eine geschmeidige Seite weder absolute Schriftgrößenangaben noch eine Randangabe in einer absoluten Größe angemessen ist, bleibt nur die Umhüllung mit einem div.

Stilvorlage für den Druck

Aufgabe

Keine (Farb)Tinte und kein Papier vergeuden.

Lösung
/*
Tinte sparen: schwarze Schrift, keine Hintergrundfarben
*/
	* { 
		background: white;
		color: black;
	}
/* 
Keine Raender, denn diese koennte der Nutzer nicht mehr in den 
Druckeinstellungen des Browsers reduzieren.
*/
	body {
		margin: 0; 
	}
/*
Unterstrich gepunktet: ein durchgezogener Unterstrich hebt stark hervor.
Ein gepunkteter Unterschricht ist dezenter. 
Warum lasse ich die Kennzeichnung von Hyperlinks für den Druck nicht ganz weg?
Ein Leser erfaehrt durch die Kennzeichnung, dass zu bestimmten 
Begriffen/ Themen weiterfuehrende Informationen existieren. Wenn diese
ihn interessieren, kann er zu einem spaeteren Zeitpunkt die Webseite
aufrufen und den Verweisen folgen.
*/
	a {
		border-bottom-style: dotted;
		border-bottom-width: 1px;
		text-decoration: none;
	}
/* 
Kein Umbruch direkt hinter Ueberschriften.
Koennen zwar nicht alle Browser, aber so nuetzt die Regel immerhin 
einigen Nutzern 
*/
	h2,
	h3,
	h4 {
		page-break-after: avoid; 
	}
/* 
Zeilenhoehe festlegen um die Lesbarkeit zu verbessern 
*/
	p,
	li,
	dd,
	td,
	th {
		line-height: 1.45em;
	}	
/*
Blockzitate absetzen von Fliesstext 
*/
	blockquote p {
		line-height: 1em;
		font-size: 0.9em;
	}
/* 
Groessen der Ueberschriften 
*/
	h1 {
		font-size: 2em;
		font-weight: bold;
	}
	
	h2 {
		font-size: 1.4em;
		font-weight: bold;
	}
	
	h3 {
		font-size: 1em;
		font-weight: bold;
	}
/*
Abstand zwischen Listenpunkten verbessert die Lesbarkeit, weil
so einzelne Listenpunkte leichter als Ganzes wahrgenommen werden koennen  
*/
	li,
	dt,
	dd {
		margin-top: 0.3em;
	}
/*
Bereiche ausblenden, die in der gedruckten Version nicht 
nuetzlich sind 
*/
	.nav.
	.news,
	.header {
		display: none;
	}
/*
URL der Seite einblenden, damit der Nutzer jederzeit zur Quelle findet 
*/
	.url {
		display: block;
	}

Vermeiden von clear: both für Elemente nach Floats

Aufgabe

Einem Bereich mit Floats folgt ein beliebiges Element, welches wieder im normalen Elementfluss dargestellt werden soll.

<div class="foo">
  <p>Float</p>
  <p>Float</p>
</div>
<p>Erstes Element nach dem Bereich mit Floats</p>

Der Nachbarschafts-Selektor

div.foo + * { 
	clear: both;
}

wird jedoch nicht breit unterstützt.

Damit also das Element p wieder im normalen Elementfluss dargestellt wird, müsste es mit der CSS-Eigenschaft clear: both versehen werden. Nur mit einer Ergänzung im Markup, könnte das erste p nach dem div class="foo" gezielt per CSS angesprochen werden. Zum Beispiel:

p.foo { 
	clear: both;
}
. . .
<div class="foo">
  <p>Float</p>
  <p>Float</p>
</div>
<p class="foo">Erstes Element nach dem Bereich mit Floats</p>

Das Ergänzen des Codes mit class="foo" würde nur dem Gestalten per CSS dienen:
es wäre ein Bruch des eleganten Prinzips der Trennung von Struktur und Gestaltung.

Lösung

So sieht's aus

div.foo{
  overflow: auto; /* Vermeidet "clear: both" für nachfolgende Elemente */
  width: 100%; /* Redundantes Layout - nötig für IE */
  }
div.foo p{
  float: left;
  margin: 1em;
  border: 1px solid black;
  }

Dreispalten-Layout

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Darstellung von drei Inhaltsbereichen in drei Spalten
  3. Darstellung eines Kopfbereiches, der sich über die gesamte Breite der drei Spalten erstreckt
  4. Darstellung eines Fussbereiches, der sich über die gesamte Breite der drei Spalten erstreckt
  5. die Spalten mit dem Bereich Navigation oder dem Bereich Nachrichten können umfangreicher sein (können mehr Höhe einnehmen) als der Bereich Inhalt
  6. alle Spalten besitzen die gleiche Höhe und können mit drei verschiedenen Hintergrundfarbe versehen werden
  7. die Hintergrundfarbe muss nicht auf einem Hintergrundbild beruhen
  8. der Inhalt jeder der drei Spalten kann linksbündig, zentriert oder rechtsbündig ausgerichtet werden
  9. keiner der drei Spalten muss eine vorgegebene Breite zugewiesen werden
  10. jeder der drei Spalten kann eine relative Breite in em oder % zugewiesen werden
  11. die Eigenschaft max-width für den Bereich Inhalt kann eingesetzt werden, ohne dass auf Browsern, die diese Eigenschaft unterstützen, Nachteile entstehen.
  12. bei großen Schriftgraden oder schmaleren Fenstern kommt es niemals zur Überlagung von Inhalten. Sobald die Inhalte nicht mehr in die Fensterbreite hineinpassen, erscheint ein horizontaler Scrollbalken. Der Scrollbalken soll so spät wie möglich erscheinen.
    Bei der Beispielseite erscheint er bei einem 1024px breiten Fenster erst ab einem Schriftgrad von etwa 37px.
Lösung

So sieht's aus

Warum führe ich kein Beispiel mit einem CSS-3-DIV-Layout auf?

Über Vorschläge zu eleganten Stilvorlagen freue ich mich und füge sie gerne hier ein.
Die Beispieldatei mit drei div steht dafür fertig bereit – noch ohne CSS. Besonders Punkt 12 muss erfüllt werden.
Bis dahin empfehle ich für Dreispalten-Layouts die Verwendung einer Tabelle mit drei Zellen.

Mozilla Standard-Stilvorlage

Fügen Sie resource:///res/html.css in die Adressleiste ein.

Vorteile von UTF-8

Empfehlenswerter Artikel zum Thema von Björn Hoehrmann

Konstanten im Stylesheet: serverseitig

Empfehlenswerter Artikel zum Thema von Klaus Langenberg

Übersichtlicher Aufbau von Stylesheets

Empfehlenswerter Artikel zum Thema von Klaus Langenberg

CSS-Editoren: Besprechungen

Empfehlenswerter Artikel zum Thema von Klaus Langenberg

Augenerkrankungen und barrierearme Gestaltung

Empfehlenswerter Artikel zum Thema von Jens Meiert

Element am unteren Rand eines DIV ausrichten

Aufgabe

Eine Seite besitzt ein DIV, welches mehrere Kindelemente enthält. Das letzte Kind soll am unteren Rand des DIV ausgerichtet werden.

Lösung

So sieht's aus

div.foo {
	position:relative;
	height: 10em;
	border: 1px solid black;
	}
p.bar {
	position:absolute;
	bottom:0;
	}

<div class="foo">
	<p>Lorem</p>
	<p class="bar">Ipsum</p>
</div>

Überlauf von Text in pre aus der Box verhindern

Aufgabe

Wenn pre breiter ist als seine Elternelement, läuft es darüber hinaus. Der überlaufende Teile erhält die Hintergrundfarbe des Elternelementes.

So sieht's aus

body { 
	margin-left: 10%;
	margin-right: 10%;
	background: white; color: black; 
}
pre { 
	background: yellow;
	color: black;
}

<body>
	<p>Ein kurzer Absatz in einem P-Element.</p>
	<pre>Ein langer Absatz in einem PRE-Element. [. . .] in einem PRE-Element.</pre>
</body>

Was passiert hier?

Die Eigenschaft color setzt die Farbe der Zeichen und der Rahmen. background setzt die Farbe des Hintergrundes der Box, nicht der einzelnen Zeichen.

In dem Beispiel wird die Box nicht breiter als ihr Elternelement, hier body.

Für das Element pre wurde die Eigenschaft overflow nicht gesetzt, daher steht sie auf ihrem Ausgangswert visible. Siehe dazu die CSS2 Spezifikation: Überlauf und Abschneiden.

Es sähe besser aus, wenn der überlaufende Teil seine eigenen Hintergrundfarbe behielte.

Lösung

So sieht's aus

pre { 
	display: table;
}

Automatische Nummerierung von Überschriften, Bildern und Tabellen

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Überschriften werden ab Ebene 2 im System 1.1.1 nummeriert
  3. Bilder und Tabellen werden fortlaufend nummeriert
  4. Verwendung der CSS-Eigenschaften content, counter-increment und counter-reset
  5. Opera interpretiert die verwendeten CSS-Eigenschaften - Firefox und Internet Explorer nicht
Lösung

So sieht's aus

Anwendungsdialog visualisieren

Aufgabe

Für eine Debatte über Usability soll eine Idee für einen Anwendungsdialog transportiert werden. Am anschaulichsten geht dies mit einer Skizze. Das Erstellen einer solchen Skizze in einer Grafikanwendung ist mühsam. Daher soll eine HTML-Vorlage erstellt werden.

Lösung

Vorlage

Widrigkeiten

URLs beim Drucken ausgeben

Wählen Sie die Druckvorschau in Ihrem Browser, um die Effekte im Beispieldokument zu betrachten.

Aufgabe

Es gibt diverse Verweistypen inmitten von Fließtext:

  1. Normaler externer Verweis mit sprechendem Verweistext
  2. Normaler externer Verweis mit URL als Verweistext (dieser Typ soll vermieden werden, muss aber möglich sein)
  3. Normaler interner Verweis mit sprechendem Verweistext auf einer andere Seite der Site
  4. Normaler interner Verweis mit sprechendem Verweistext auf dieselbe Seite
  5. Spezieller interner Verweis mit dem Verweistext [1] auf eine Anmerkung am Ende derselben Seite
  6. Spezieller interner Verweis mit dem Verweistext [Luhmann 1982] auf einen Literaturbeleg am Ende derselben Seite

Folgende Hauptmerkmale sollen erfüllt werden:

Nebenmerkmale, die nichts mit der spezifischen Aufgabe der Ausgabe von URLs zu tun haben:

Lösung

So sieht's aus

Nachteil:
Wenn die Seite ohne CSS genutzt wird, stören redundante Informationen auf dem Display.

Falls hier ein PHP-Programmierer mitliest, der dieses Konzept mit den Endnoten interessant findet, freue ich mich über eine Zusammenarbeit. Vielleicht lässt sich die skizzierte Ausgabe per PHP-Skript automatisieren.

Richtiges Vokabular

<a href="http://example.tld/page.html#part3">Linktext</a>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Verweis
                                             ^^^^^^^^     Quellanker
                                     ^^^^^^               Fragmentbezeichner 
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^                     Zielanker
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^                     URI 
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^                     Verweisziel 
                                        
<h2 id="part3">
        ^^^^^                                             Zielanker
Aufgabe

Auf einer Site werden für alle Verweise auf site-externe Dokumente absolute Pfade, für alle site-internen jedoch relative verwendet.

Per CSS soll diese Links mit einem Kennzeichen versehen werden und damit unterscheidbar sein.

Lösung

So sieht's aus

a[href^="http://"]:before { 
	content: "\2197\a0" 
}

Der Selektor foo[bar^="zot"] validiert nicht gegen CSS 2.1, entspricht aber der CSS3 W3C Candidate Recommendation http://www.w3.org/TR/css3-selectors/

Kanonische Adressen

Empfehlenswerter Artikel zum Thema von Christoph Schneegans

Hover-Hintergrundfarbe über die volle Höhe eines Links – bei höherem Schriftgrad eines Inlineelementes

Ihnen fällt eine kürzere Überschrift ein? Bitte melden!;)

Aufgabe

Gehoverte Links werden mit einer Hintergrundfarbe gekennzeichnet. In einer Sitemap sollen Schlagwörter durch einen höheren Schriftgrad hervorgehoben werden. Beim Hovern sollen diese Schlagwörter in ihrer vollen Höhe überdeckt werden.
Ein Blockdarstellung des Elementes a ist nicht erwünscht. Die Hoverfarbe soll nur den Linktext hinterlegen die volle Breite eines Blockelementes.

Lösung

So sieht's aus 

body { 
	background: white;
	color: black;
} 
a {
	font-size: 2em; 
	color: blue; 
}
a:hover{
	background : blue; 
	color: white;
}
span { 
	font-size: .5em; 
}

<p><a . . .><span>Lorem </span><strong>ipsum</strong></a></p>

Es scheint keine saubere Lösung zu existieren: Falls jemand eine ohne Layout-Markup, hier in Form von span, kennt, freue ich mich über eine Nachricht.

Aufgabe
Lösung

So sieht's aus

a:link:hover {
	background: rgb(251, 232, 57);
}
img {
	vertical-align: bottom;
	border: none;
}

<p>Bildlink: <a . . .><img . . . /></a></p>
<p>Textlink: <a . . .>Lorem</a></p>

Bilder

Bild skaliert mit Fensterbreite

Aufgabe

Bild skaliert abhängig von der Fensterbreite

div.skalierend {
	width: 40%;
}
div.skalierend img{
	width: 100%;
}

<div class="skalierend"><img src=". . ." /></div>
Lösung

So sieht's aus

Bilduntertitel maximal so breit wie Bild

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Bilder können verschieden groß sein
  3. Bild und Bilduntertitel stehen in einer gemeinsamen Box
  4. Bilduntertitel können beliebig lang sein – die Boxhöhe passt sich an
  5. Boxbreite entspricht der Breite des Bildes
  6. Angabe von width und height für das Bild
Zusatzaufgabe 1

Ohne Angabe für Breite der Box im HTML-Code - weder als Inline-Stilregel noch als Attribut

Lösung 1

So sieht's aus

table.bild-mit-untertitel {
	width: 1px;
}

<p>. . .</p>
<table class="bild-mit-untertitel">
	<tr><th><img . . . /></th></tr>
	<tr><td>Bilduntertitel</td></tr>
<table>
<p>. . .</p>
Zusatzaufgabe 2

Mit Angabe für Breite im HTML-Code – als Inline-Stilregel

Lösung 2

So sieht's aus

div.bild-mit-untertitel img {
	display: block;
}

<p>. . .</p> 
<div class="bild-mit-untertitel" style="width: 100px;"><img . . . />Bilduntertitel</div>
<p>. . .</p>
Aufgabe
  1. Standard-Merkmale der Beispiele
  2. funktioniert z.B. in Opera 9 oder Firefox 2.0, nicht jedoch im Internet Explorer
  3. zeigt ohne CSS das normale Bild
  4. Verwendung des Attributselektors, daher keine Klassenattribute oder IDs im Markup notwendig
Lösung

So sieht's aus

##div a[href="/bilder/html/wiebke-1-tag-alt-600x600.jpg"] {
	display: block;
	overflow: hidden;
	width: 150px;
	height: 142px;
	background-image: url(/bilder/html/wiebke-1-tag-alt-150x150-farbig.jpg);
}
div a[href="/bilder/html/wiebke-1-tag-alt-600x600.jpg"]:hover img {
	margin-left: 150px;
}
<div><a href="/bilder/html/wiebke-1-tag-alt-600x600.jpg"><img src="/bilder/html/wiebke-1-tag-alt-150x150-schwarzweiss.jpg" width="150" height="142" alt="" /></a></div>#

Galerieübersicht skalierend – vier Varianten

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Bilder können unterschiedlich groß sein
  3. Gitter als Anordnung – alle Gitterfelder sind gleich groß
    Was ist mit "Gitter" gemeint? Wie in einer Tabelle jede Zelle, ist auch jedes Gitterfeld einer Gitterspalte gleich breit bzw. jedes Gitterfeld einer Gitterzeile gleich hoch. Jedoch ist die Anzahl der Zellen in Tabellenzeilen fest. In einem Gitter nicht. Je schmaler das Fenster, desto weniger Gitterfelder werden pro Gitterzeile dargestellt.
    Beispiel: Angenommen ein Gitter zeigt bei einer bestimmten Fensterbreite die Anordnung 4x3. Bei einem hinreichend schmaleren Fenster wird es zu einem 3x4-Gitter, bei noch schmalerem Fenster zu einem 2x6, bis hin zu einem 1x12.
Zusatzaufgabe 1
  1. ohne Untertitel
  2. Bilder sind links oben ausgerichtet
  3. zusammenfallende Rahmen sind mit CSS für div nicht möglich
  4. Feste Maße werden manuell (oder per Skript) für div angegeben - als width und height Für die Bestimmung des Maßes ist die größte Breite und die größte Höhe von allen vorkommenden Bildern ausschlaggebend
Lösung 1

So sieht's aus

Zusatzaufgabe 2
  1. ohne Untertitel
  2. Bilder sind horizontal und vertikal zentriert
  3. zusammenfallende Rahmen sind mit CSS für div nicht möglich
  4. Feste Maße werden manuell (oder per Skript) für div angegeben - als width, height und line-height. Für die Bestimmung des Maßes ist die größte Breite und die größte Höhe von allen vorkommenden Bildern ausschlaggebend
  5. Vertikale Zentrierung funktioniert nicht im Internet Explorer
Lösung 2

So sieht's aus

Zusatzaufgabe 3
  1. Wie Variante 2, jedoch mit einzelligen Tabellen
  2. Vertikale Zentrierung funktioniert auch im Internet Explorer
Lösung 3

So sieht's aus

Zusatzaufgabe 4
  1. mit Untertitel
  2. Unterkanten der Bilder fluchten
  3. Oberkanten der Bilduntertitel fluchten
  4. Bilder und Bilduntertitel sind horizontal zentriert
  5. Länge des Bilduntertitels ist nicht beschränkt
    Untertitel sind gegebenenfalls nicht in voller Länge sichtbar um das Rastermaß nicht zu sprengen
  6. Feste Maße werden manuell (oder per Skript) für th und td angegeben - als width und height. Für die Bestimmung des Maßes ist die größte Breite und die größte Höhe von allen vorkommenden Bildern ausschlaggebend
Lösung 4

So sieht's aus

Listen

Automatische Nummerierung von verschachtelten Listen – Typ '1.1.1'

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Alle Ebenen einer verschachtelten Liste werden im Typ '1.1.1' nummeriert
  3. Verwendung der CSS-Eigenschaften content, counter-increment und counter-reset
  4. Opera und Firefox interpretieren die verwendeten CSS-Eigenschaften - Internet Explorer dagegen nicht
Lösung

So sieht's aus

Relativ große Matroschkas – Schriftgrößen in verschachtelte Listen

Aufgabe

Hier geht es um die Gestaltung von verschachtelten Listen mit relativen Schriftgrößen, eben um Matroschkas

li der ersten Schachtelungsebene sollen z.B. doppelt so groß dargestellt werden, wie die li der zweiten Schachtelungsebene.

Matroschkas der zweiten Ebene sollen dieselbe Größe haben wie P, welches genau wie das äußere ul Kind von body ist.

Lösung

So sieht's aus

ul { 
	font-size: 2em;
}
ul ul {
	font-size: 0.5em;
}

<body>
 <p>Lauter Matroschkas</p>
 <ul>
  <li>Matroschka 1 
   <ul>
    <li>Matroschka 2</li>
    <li>Matroschka 2</li>
   </ul>
  </li>
  <li>Matroschka 1 
   <ul>
    <li>Matroschka 2</li>
    <li>Matroschka 2</li>
   </ul>
  </li>
 </ul>
</body>

Ich danke Christoph Päper, der einen nützlichen Beitrag zu diesem Thema gepostet hat.

font-size: 1em bedeutet: "die gleiche Schriftgröße erzeugen, wie beim jeweils übergeordnetem (Eltern)Element, also html, body bzw. ul." Siehe auch die Definition in der CSS2-Spezifikation.

Nehmen wir an, der Benutzer hätte in seinem Browser eine Schriftgröße von 12,1 Pixel voreingestellt.

Es können am Bildschirm nur ganze Pixel dargestellt werden:

Angegebene, berechnete und angezeigte Werte
Angegeben
(specified)		 Berechnet
(computed)		 Angezeigt
(~actual)		 Angegeben
(specified)		 Berechnet
(computed)		 Angezeigt
(~actual)
html n/a 12.1px n/a html n/a 12.1px n/a
body n/a 12.1px 12px body n/a 12.1px 12px
p n/a 12.1px 12px p n/a 12.1px 12px
ul 2em 24.2px 24px ul 2em 24.2px 24px
li n/a 24.2px 24px li n/a 24.2px 24px
ul 1em 24.2px 24px ul 0.5em 12.1px 12px
li n/a 24.2px 24px li n/a 12.1px 12px

Listen: Abstände und Polsterung

Mit Hilfe dieses Testdokumentes können Sie sich leicht einen Überlick verschaffen, welche Änderung von margin oder padding in welchem Browser zu welcher Darstellung führt.

Ersten Teil eines Listenpunktes gestalten – bei schlankem Markup

Aufgabe

Ein Listenpunkt enthält mehr als einen Teil. Der erste soll sich von den nachfolgenden unterscheiden.

Lösung

So sieht's aus

li { 
 font-weight: bold;
 }
li p {
 font-weight: normal;
 margin: 0;
 }
 
<ul>
  <li>Erster Teil
    <p>Weiterer Text</p>
  </li>
  <li>Erster Teil
    <p>Weiterer Text</p>
  </li>
</ul>

Vertikale Navigation

Aufgabe
Zusatzaufgabe 1
Lösung 1

So sieht's aus 

.nav { 
	width: 11em;
	font-weight: bold;
}
.nav * {
	display: block;
}
.nav ul ul {
	font-weight: normal;
	padding: 0;
}
.nav ul {
	list-style: none;
	margin: 0;
	padding: 0.2em;
	line-height: 1.45em;
	background: rgb(252, 254, 226);
}
.nav ul ul li {
	background: rgb(254, 216, 137);
}
.nav a {
	text-decoration: none;
	background: rgb(252, 254, 226);
}
.nav a:hover {
	background: rgb(254, 216, 137);
}
.nav strong {
	font-weight: normal;
}

<div class="nav">
	<ul>
		<li>Lorem
			<ul>
				<li><a href="#a">Ipsum</a></li>
				<li><a href="#b">Dolor sit</a></li>
			</ul>
		</li>
		<li><em>Consectetur</em>
			<ul>
				<li><strong>Adipisicing</strong></li>
				<li><a href="#c">Elit sed</a></li>
				<li><a href="#d">Eiusmod tempor</a></li>
			</ul>
		</li>
		<li>Ut labore
			<ul>
				<li><a href="#e">Et dolore</a></li>
				<li><a href="#f">Magna aliqua</a></li>
				<li><a href="#g">Ut enim</a></li>
				<li><a href="#h">Ad minim</a></li>
				<li><a href="#i">Veniam quis</a></li>
			</ul>
		</li>
		<li>Exercitation
			<ul>
				<li><a href="#j">Ullamco</a></li>
				<li><a href="#k">Laboris nisi</a></li>
				<li><a href="#l">Nisi ut</a></li>
				<li><a href="#m">Aliquip ex ea</a></li>
			</ul>
		</li>
	</ul>
</div>
Zusatzaufgabe 2
Lösung 2

So sieht's aus 

.nav {
	width: 14em;
	line-height: 1.45em;
}
.nav ul {
	margin: 0;
	padding: 0 0.2em 0 0.2em;
	background: rgb(252, 254, 226);
	list-style: none;
}
.nav ul ul {
	padding: 0 0 0 1em;
}
.nav .aktiv {
	background: rgb(254, 216, 137);
}
.nav a {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	text-decoration: none;
}
.nav a:hover {
	border-bottom: none;
	background: rgb(254, 216, 137);
}
.nav strong {
	font-weight: normal;
}

<div class="nav">
	<ul>
		<li>Lorem
			<ul>
				<li><a href="#a">Ipsum</a></li>
				<li><a href="#b">Dolor sit</a></li>
			</ul>
		</li>
		<li><em>Consectetur</em>
			<ul>
				<li class="aktiv"><strong>Adipisicing</strong></li>
				<li><a href="#c">Elit sed</a></li>
				<li><a href="#d">Eiusmod tempor</a></li>
			</ul>
		</li>
		<li><a href="#e">Incididunt</a></li>
		<li>Ut labore
			<ul>
				<li><a href="#f">Et dolore</a></li>
				<li><a href="#g">Magna aliqua</a></li>
				<li><a href="#h">Ut enim</a></li>
				<li><a href="#i">Ad minim</a></li>
				<li><a href="#j">Veniam quis</a></li>
			</ul>
		</li>
		<li><a href="#k">Nostrud</a></li>
		<li>Exercitation
			<ul>
				<li><a href="#l">Ullamco</a></li>
				<li><a href="#m">Laboris nisi</a></li>
				<li><a href="#n">Nisi ut</a></li>
				<li><a href="#o">Aliquip ex ea</a></li>
			</ul>
		</li>
	</ul>
</div>
Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Navigationsbereich ist horizontal angeordnet
  3. Senkrechte Trenner "|" stehen sowohl ganz links und rechts der Liste, als auch zwischen den Listenelementen
  4. aktiver Punkt
    • ohne a
    • mit strong
    • mit anderer Hintergrundfarbe
Lösung

Achtung: Bei dieser Lösung müssen die Listenelemente ohne Umbruch im Quelltext stehen. Umbrüche werden in inzeilig dargestellten Elemente als Whitespace interpretiert.

So sieht's aus 

ul.nav li {
	display: inline;
	border-left: black 2px solid; 
	padding-left: 1em;
	padding-right: 1em;
	margin: 0 -2px 0 0;
	list-style-type: none;
}
ul.nav {
	display: inline;
	border-right: black 2px solid;
	padding: 0;
	margin: 0;
}

<ul class="nav"><li><a href="#a">lorem</a></li><li class="aktiv"><strong>ipsum</strong></li><li><a href="#c">doloret</a></li></ul>

Ein einziger Navigationsbereich versus mehrere

Aufgabe

Bei vielen Sites kommen Navigationslinks nicht nur in einem, sondern in mehreren Bereichen vor. Sehr typisch ist z.B. das Platzieren von Links wie "Startseite", "Kontakt", "Seitenübersicht", "Neu auf der Site" im Kopf.

Das gemeinsame Merkmal dieser Linkgruppe: sie sind auf ziemlich jeder Site nützlich (siteunabhängig) und sie sind es auch auf jeder Seite einer Site (seitenunabhängig).

Die zweite Gruppe von Links, diejenigen, die vom Typ und Inhalt der Site abhängen (siteabhängig), wird oft in einer vertikalen Leiste dargestellt.

Eine dritte Gruppe von Links erwähne ich der Vollständigkeit halber, sie soll uns jedoch hier nicht weiter beschäftigen: Links, die vom Inhalt der aktuellen Seite abhängen, also ein Inhaltsverzeichnis für die Überschriften der aktuellen Seite (seitenabhängig).

Da Sites sich stark in ihrem Umfang unterscheiden und der Umfang selbstverständlich bei der Gestaltung der Navigation als Faktor einfließt, grenze ich die Rahmenbedingungen für das Beispiel ein:

Wie verändert sich nun die Gebrauchstauglichkeit, wenn die Links aus Gruppe 1 und 2, also die siteunabhängigen und die siteabhängigen in einem einzigen Navigationsbereich liegen, wenn also entweder alle Links aus dem Kopf entfernt werden oder der Kopf gleich ganz rausgenommen wird?

Mir sind leider keine Usability-Fakten bekannt, die belegen, dass Nutzer bestimmte Typen von Navigationslinks vor allem im Kopf erwarten und sie diese Typen von Links daher schlechter finden, wenn sie in einer zentralen Navigationsleiste auftauchen, wo sich sämtliche Links befinden.

Falls jemand zu diesem konkreten Thema Usability-Fakten kennt, freue ich mich über Hinweise

Lösung

So sieht' aus

Typographie

Typographie für Webautoren

Empfehlenswerter Artikel zum Thema von Christoph Päper

Halbbreites geschütztes Leerzeichen

Aufgabe

Ein halbbreites geschütztes Leerzeichen &#x202F; wird kaum unterstützt. Das halbbreite ungeschützte Leerzeichen &thinsp; wird zwar breiter unterstützt, bietet aber keinen Trennschutz.

Lösung

So sieht's aus 

.masszahl-einheit {
	word-spacing: -0.5ex; 
	white-space: nowrap; 
}

<span class="masszahl-einheit">130 mg</span>

Mir selber schmeckt das Hinzufügen solchen Markups für einzelne Wert-Einheite-Paare nicht. Ich verzichte darauf.

Geschützter Bindestrich

Das dafür vorgesehene Zeichen &#8209; wird leider nicht breit unterstützt. Folgende Abhilfe ist möglich:

.komposita { 
	white-space: nowrap; 
}

Frau <span class="komposita">Däubler-Gmelin</span>

Mir selber schmeckt solches zusätzliches Markup nicht. Ich verzichte darauf.

Trennstrich (weicher/bedingter Trennstrich)

Browser können bisher keine automatischen Trennungen vornehmen. Bei langen Wörtern könnte man Sollbruchstellen einfügen. Das dafür vorgesehene Zeichen &shy; wird leider nicht breit unterstützt. Manche Browser zeigen den Strich immer an.

Eine akzeptable Lösung, eine Abhilfe, frei von Nebenwirkungen, ist mir nicht bekannt.

Zitate

Zitatblock – mit Quellenverweis

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Die Quellenangabe folgt dem Schema Autor, Jahr: Seitenzahl
    Zahlen (bei Fußnoten oder Endnoten) aus ein bis drei Ziffern als Linktext betrachte ich als eine Barriere. Die klickbare Fläche ist sehr klein.
  3. Typischerweise werden Zitatblöcke leicht eingerückt, mit geringer Zeilenhöhe und geringer Schriftgröße gesetzt. Das Beispiel ist ebenso gestaltet.
Lösung

So sieht's aus

Eingebettetes Zitat – mit Quellenverweis

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Die Quellenangabe folgt dem Schema Autor, Jahr: Seitenzahl
    Zahlen (bei Fußnoten oder Endnoten) aus ein bis drei Ziffern als Linktext betrachte ich als eine Barriere. Die klickbare Fläche ist sehr klein.
Lösung

So sieht's aus

Zitat aus Webseite – mit Quellenverweis

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Die Quellenangabe folgt dem Schema Autor, Jahr
    Zahlen (bei Fußnoten oder Endnoten) aus ein bis drei Ziffern als Linktext betrachte ich als eine Barriere. Die klickbare Fläche ist sehr klein.
    Falls das Erscheinungsjahr des zitierten Textes bekannt ist, wird diese Zahl im Ausdruck Autor, Jahr benutzt. Ansonsten wird als Jahreszahl diejenige vom Erstellen des Bildschirmfotos gewählt.
  3. Das Attribut cite wird nicht eingesetzt. Siehe dazu auch.
  4. Es wird bewußt auf das siteinterne Literaturverzeichnis und nicht auf die externe Webseite mit dem Original verwiesen. Warum?
    Der Zitierende hat keinen Einfluss auf die Verfügbarkeit der Webseite mit dem Original. Die Webseite kann vom Netz genommen werden, der URL oder der Inhalt kann sich verändern.
    Da Belegbarkeit von Quellen in wissenschaftlichen Arbeiten eine große Bedeutung zukommt, wird als Kompromiss ein Bildschirmfoto des zitierten Textes – als Ausschnitt aus der aus der Seite mit der Quelle – zusammen mit dem Datum vorgehalten.
Lösung

So sieht's aus

Literaturverzeichnis nach DIN 1505

Informationen zu anderen bibliographischen Stilen:
Überblick

Aufgabe
  1. Standard-Merkmale der Beispiele
  2. Verwendung des Systems Autor Jahr.
    Zahlen (bei Fußnoten oder Endnoten) aus ein bis drei Ziffern als Linktext betrachte ich als eine Barriere. Die klickbare Fläche ist sehr klein.
  3. Warum überhaupt ein zentrales Literaturverzeichnis, statt Fußnoten am Ende jedes Dokumentes?
    1. Die zentrale Bereitstellung der bibliographischen Daten auf einer einzigen Seite ermöglicht eine leichtere Pflege als beim System 'Fußnote', wo die Daten auf jeder Seite bereitgestellt werden – falls die Quelle mehrfach zitiert wird, sogar mehrfach. Eine unschöne Redundanz.
    2. In einem Buch leuchtet der Vorteil von Fußnoten ein: das Zurückblättern ans Ende des Buches bereitet mehr Mühe, als das Wechseln des Auges an den unteren Blattrand. Auf einer Webseite dagegen gelingt das Navigieren zu den bibliografischen Daten mühelos.
  4. Orientierung an der DIN, siehe:
    Das Literaturverzeichnis in wissenschaftlichen Arbeiten (PDF) – Erstellung bibliographischer Belege nach DIN 1505 Teil 2 von Klaus F. Lorenzen
  5. Die Auszeichnung und die Art des Eintrags mit einer Webseite als Quelle folgt keiner Norm. Sie ist ein Vorschlag. Ich bitte um Kritik dazu.Hier wurden folgende Teile aufgeführt:
    Autor, Vorname: Titel der Webseite. URL – Domaininhaber: Name des Domaininhabers, Stadt – Erstellt am – Zuletzt geändert am: … – Bildschirmfoto vom …
Lösung

So sieht's aus

Hilfsmittel

XHTML validieren: komplette lokale Verzeichnisse in einem Rutsch

Der Validator des W3C weist diverse technische Mängel auf. Christoph Schneegans stelllt kostenlos für die Prüfung der Validität von XHTML-Dokumenten ein hochwertiges Werkzeug bereit: http://schneegans.de/sv/

In dessen Formular lassen sich sowohl einzelne URLs als auch Code (aus der Zwischenablage) direkt eingeben.

Allerdings gibt es keine Möglichkeit ein komplettes lokales Verzeichnis zur Prüfung an den Online-Validator zu übergeben.

Christophs Validator steht jedoch auch für den lokalen Gebrauch (offline) zur Verfügung (Windows). Er muss nicht installiert werden und erwartet Eingaben auf der Kommandozeile.

Vorbereitung für die Nutzung:

  1. Anwendung herunterladen, zum bequemen Arbeiten in einem Unterordner des Standard-Programm-Verzeichnisses speichern, z.B. nach c:\Programme\SchemaValidator\ und dann dort entpacken.
  2. Eingabeaufforderung starten: Startmenü > Programme > Zubehör > Eingabeaufforderung

Validierung einer einzelnen Datei, z.B. d:\borumat.de\index.html:

  1. schemavalidator /file:"d:\borumat.de\index.html"
    Pfad (hervorgehoben) entprechend anpassen
  2. Enter

Validierung aller HTML-Dateien eines Verzeichnisses, auch wenn sie in Unterverzeichnissen liegen, z.B. d:\borumat.de\:

  1. for /R "d:\borumat.de\" %f in (*.html) do schemavalidator /file:"%f"
    Pfad (hervorgehoben) entprechend anpassen.
    Falls weitere Dateitypen geprüft werden sollen, z.B. *.php wird ein entsprechender Filter innerhalb der runden Klammern - per Leerzeichen getrennt - angehängt: (*.html *.php)
  2. Enter

Linkverfügbarkeit prüfen mit Xenu

Für Nutzer ist es eine besonders schwerwiegende Enttäuschung, wenn Links ins Leere laufen oder zur Anzeige von Fehlerseiten führen.

Tilman Hausherr offeriert kostenlos ein leicht zu bedienendes und sehr schnelles Werkzeug zur Überprüfung der Verfügbarkeit von Links: Xenu

Schnellstart-Anleitung:

Xenu speichert diese Einstellung automatisch. Wenn Sie das nächste Mal die Startseite oder die Einzelseite in dem Auswahlfeld bei Check URL auswählen, ist der Level voreingestellt, der bei der letzten Prüfung verwendet wurde.

Ebenso werden die Listen mit Verweisen gespeichert (genauer: einem zu checkenden URL zugeordet), die Sie in Datei > Check URL > Feld: Do not check any URLs beginning with this von der Überprüfung ausschließen können.

Bekannte Fehler:

Favicon aus Bildvorlage erzeugen - mit Online-Werkzeug

Beim Anbieter FavIcon from Pics kann aus einem beliebigen Bild in beliebiger Größe schnell und schmerzlos ein Favicon erzeugt werden. Der Dienst ist kostenlos.

Bildschirmfoto erstellen und hochladen mit einem Tastendruck

Sie erstellen öfter Bildschirmfotos?
Sie laden diese dann auf Ihren Webserver hoch und möchten danach die URL z.B. in einen Diskussionsbeitrag oder eine Mail einfügen?
Die Anzahl der Arbeitschritte ist Ihnen zu groß und das Ganze benötigt zu viel Zeit?

Mit Hilfe der kostenlosen Anwendung Hardcopy von Siegfried Weckmann genügt ein einziger Tastendruck um folgende Aufgaben auszuführen.

Ich danke dem Autor der Anwendung, der diese Funktionalität auf meine Anregung hin ergänzt hat.

Umsetzung:

Hardcopy bietet eine Vielzahl weiterer interessanter Optionen.

Blindtextgenerator – 'Lorem ipsum …'

Entwürfe werden plastischer, wenn sie blinden Text erhalten. Der Blindtextgenerator auf http://lipsum.com/ erleichtert das Erzeugen solcher Texte. Die gewünschte Größe kann in Worten, Zeichen, Absätzen oder Kilobytes angegeben werden.

Wer den Browser Firefox nutzt, kann ein sog. Schlüsselwort-Such-Lesezeichen anlegen um das Erzeugen von Blindtexten noch bequemer zu gestalten.

Bitte lesen Schlüsselwort-Such-Lesezeichen
Rechtsklick > Lesezeichen für diesen Link hinzufügen LI: Blindtext Generator
Vorschlag für Schlüsselwort li
Javascriptaktivierung nötig Nein
Gesucht wird auf http://lipsum.com
Kommentar li 12 gibt eine Seite mit 12 Absätzen mit Blindtext aus.

XHTML-Code in Wiki-Dialekt konvertieren

http://toolserver.org/~diberri/cgi-bin/html2wiki/

Mögliche Dialekte für die Ausgabe: DokuWiki, MediaWiki, Kwiki, MoinMoin, PbWiki, PhpWiki, PmWiki, SnipSnap, UseMod, WakkaWiki, WikkaWiki

MediaWiki-Dialekt in XHTML konvertieren

Konverter von Magnus Manske

Weitere mögliche Ausgabeformate sind: XML, DocBook XML, OpenOffice XML, OpenOffice ODT

Word-Dokument in HTML-Dokument umwandeln

Sie möchten ein mit Formatvorlagen strukturiertes Word-Dokument in ein HTML-Dokument mit umwandeln? Die Struktur soll dabei sinnvoll übertragen werden, ohne überflüssigen Ballast?

  1. Installation von OpenOffice.org
  2. Installation des Plugins Writer2XHTML
  3. Öffnen des Word-Dokumentes in OOo
  4. Datei > Exportieren > Speichern als: XHTML
  5. Konfiguration mit Hilfe des Dialoges
  6. Falls die Möglichkeiten der Konfiguration nicht weit genug reichen: Zusätzliche Konfiguration des Plugins mit Hilfe der Konfigurationsdatei writer2xhtml.xml in einem Texteditor. Pfad zu dieser Datei auf Windows XP: C:\Dokumente und Einstellungen\[Nutzername]\Anwendungsdaten\OpenOffice.org\3\user\writer2xhtml.xml Auf anderen Plattformen den entsprechenden Pfad für Anwendungsdaten suchen.
    Es gibt ein vorbereitete Konfigurationsdatei cleanxhtml.xml mit besonders strikten, puristischen Einstellungen. Wer diese verwenden möchte, lädt sich diese Datei herunter, kopiert ihren Inhalt und überschreibt den Inhalt von writer2xhtml.xml
    Die Konfigurationsdatei writer2xhtml.xml ist gut dokumentiert (PDF).

HTML-Tidy auf ganze Verzeichnisse anwenden

Empfehlenswerter Artikel zum Thema

.htaccess

Zugangsschutz für ein Verzeichnis einrichten

  1. Legen Sie eine TXT-Datei mit dem Namen .htaccess im zu schützenden Verzeichnis an
  2. Kopieren Sie folgenden Code in die Datei. Dabei sind Zeilen, die mit # beginnen, reine Kommentare. Fügen Sie Ihre Daten in den Code ein.
    Den sog. Document Root erfähren Sie von Ihrem Provider 
    # Verzeichnis schützen
AuthType Basic
# Beliebigen Namen angeben. Dieser wird im Dialogfeld angezeigt.

AuthName "Dein Name für den Bereich"
# Zu schützendes Verzeichnis angeben
# AuthUserFile [Document Root][zu schützendes Verzeichnis]/.htpasswd
AuthUserFile /www/dein-domain.de/htdocs/dein-verzeichnis/.htpasswd
# Benutzernamen angeben
# require user [Benutzername]
require user ernie
  3. Legen Sie eine TXT-Datei mit dem Namen .htpasswd im zu schützenden Verzeichnis an
  4. Erzeugen Sie ein sogenanntes "Crypt", z.B. mit Hilfe eines Passwortgenerators http://ihre-webhosting-domain.de/php/md5enc.php
  5. Geben Sie dort Ihr gewünschtes Passwort, z.B. lustig, ein und Sie erhalten eine Zeichenkette (Crypt), die z.B. so aussieht:
    $1$pR06oNAR$OaUQOMkzCn2XKiELTEewf0
  6. Fügen Sie eine einzige Zeile in .htpasswd ein:
    ernie:$1$pR06oNAR$OaUQOMkzCn2XKiELTEewf0
    Also: Benutzername, gefolgt von einem Doppelpunkt und dem Crypt.
  7. Laden Sie beide Dateien .htaccess und .htpasswd im sog. ASCII-Modus in das entsprechende Verzeichnis hoch. Meistens geschieht dies durch die FTP-Anwendung automatisch.
  8. Wenn Sie mehrere Nutzer erlauben möchten, fügen Sie einfach weitere Zeilen, wie z.B.
    require user bert
    an das Ende der .htaccess ein.
    Wenn bert dasselbe Passwort wie kermit erhalten soll, fügen Sie
    bert:$1$pR06oNAR$OaUQOMkzCn2XKiELTEewf0
    in .htpasswd ein:
    ernie:$1$pR06oNAR$OaUQOMkzCn2XKiELTEewf0
    bert:$1$pR06oNAR$OaUQOMkzCn2XKiELTEewf0
    Also: den zweiten Benutzernamen, gefolgt von einem Doppelpunkt und dem gleichen Crypt
  9. Wenn jeder Nutzer ein eigenenes Passwort (bert z.B. das Passwort ernst) erhalten soll, erzeugen Sie für jeden Nutzer ein eigenes Crypt und fügen Sie es wie zuvor beschrieben in .htpasswd ein:
    ernie:$1$pR06oNAR$OaUQOMkzCn2XKiELTEewf0
    bert:$1$WxuqExGq$/YdlXg9UA85tVr.ydy.XV1
    Beide Crypts sind hier verschieden.

Kurz-URLs ohne Dateiendungen

Fügen Sie eine Zeile mit Options +MultiViews ein.

Nicht alle Provider unterstützen dieses Merkmal.

Ein Verweis wie z.B. http://deine-domain.tld/page wird dann automatisch auf das erste passende Ziel gelenkt, welches mit dieser Angabe beginnt.

Wenn also http://deine-domain.tld/page.html existiert, wird dieses Ziel verwendet.

Falls http://deine-domain.tld/page.php stattdessen existiert, wird es zum Ziel.

In der Adressleiste des Browsers bleibt der Kurz-URL sichtbar.

Normalisierung von zurückgegebenen Links (Kanonizität)

Manchmal wird mit nicht-kanonischen Links auf Ihre Seiten verwiesen.

Mit einigen Anweisungen können sämtliche Varianten normalisiert zurückgegeben werden. 301 Moved Permanently wird als Statuscode ausgegeben.

Anfrage Rückgabe
Normale Dateien
http://deine-domain.de/foo.php http://deine-domain.de/foo
http://deine-domain.de/bar/foo.php http://deine-domain.de/bar/foo
http://deine-domain.de/bar/foo.html http://deine-domain.de/bar/foo
http://deine-domain.de/bar/foo.php?a=zot http://deine-domain.de/bar/foo?a=zot
Directory Index
http://deine-domain.de/index.php http://deine-domain.de/
http://deine-domain.de/bar/index.php http://deine-domain.de/bar/
http://deine-domain.de/bar/index.html http://deine-domain.de/bar/
http://deine-domain.de/bar/index.php?a=zot http://deine-domain.de/bar/?a=zot
"www."
http://www.deine-domain.de/foo.php http://deine-domain.de/foo

Fügen Sie dafür folgende Anweisungen in .htaccess ein und ersetzen Sie im ersten Anweisungsblock die Zeichenfolgen deine-domain und de durch ihre eigene Domain und Topleveldomain:

# Weiterleitung 301 von http://www.deine-domain.de/* auf http://deine-domain.de/*

	RewriteCond %{HTTP_HOST} ^www.deine-domain\.de$ [NC]
	RewriteRule ^(.*) http://deine-domain.de/$1 [NC,R=301]

# Weiterleitung 301 */index.php auf */

	RewriteCond %{THE_REQUEST} index\.(php|htm|html) [NC]
	RewriteRule (.*)index\.(php|htm|html) /$1 [NC,R=301]

# Weiterleitung 301 */foo.php auf */foo

	RewriteCond %{THE_REQUEST} (.*)\.(php|htm|html) [NC]
	RewriteRule (.*).(php|htm|html) /$1 [NC,R=301]

Danke an Daniel Müller für die Hilfe bei der Erstellung der Anweisungen.

Zur Gewährleistung von kanonischen Links beim Ausliefern existiert ein PHP-Skript. Vielleicht ist dies ebenfalls interessant für Sie?

Checklisten – Spezifikationen – Einführungen

Spezifikationen

Unterstützung der Standards durch Browser

Verfügbar sind Daten zu den Browsern: IE 4, 5, 5.5, 6, 7; Firefox 1.0, 1.5, 2.0; Opera 8.5, 9; Konqueror 3.5; Safari 2.0

Einführungen

Guter Standard – Designprinzipien des W3C

What is a good standard? An essay on W3C's design principles from Bert Bos. Übersetzung des Teils Readability ins Deutsche von Michael Jendryschik.

CSS-Bücher: Besprechungen

Empfehlenswerter Artikel zum Thema von Klaus Langenberg

Es werden englischsprachige und deutschsprachige Bücher besprochen

Checklisten zur Webseitengestaltung

Danksagungen

Ich danke den Teilnehmern des Usenet-Diskussionforums de.comm.infosystems.www.authoring.misc und des Webforums http://xhtmlforum.de für ihre Hinweise und Anregungen.