Galerie

Sourcen und Listings: 5 Profitipps - I mmer noch modern: Ein vergrößerter Anfangsbuchstabe macht auf neue Inhalte aufmerksam

I mmer noch modern: Ein vergrößerter Anfangsbuchstabe macht auf neue Inhalte aufmerksam

Tipp 2: Vergrößerte Anfangsbuchstaben

Es erhöht die Aufmerksamkeit des Lesers, wenn Sie eine Initiale anzeigen lassen.

Als Initial bezeichnet man den vergrößerten und speziell formatierten Anfangsbuchstaben eines Abschnitts. Um auf Ihrer Webseite Initiale darzustellen, fassen Sie den ersten Buchstaben zunächst in ein span-Element ein.

Mit dem Style Sheet-Attribut float:left sorgen Sie dafür, dass der nachfolgende Text rechts an dem Buchstaben vorbeifließt. Den Buchstaben können Sie nun nach Belieben formatieren, z.B. mit den CSS-Attributen font-size für die Größe, color für die Schriftfarbe und font-weight für den Schriftschnitt. Zumeist verwenden Designer für den Anfangsbuchstaben den Wert font-weight:bold;, um eine fette Schrift festzulegen. Mit dem Attribut margin-right passen Sie gegebenenfalls den Abstand zum rechten Buchstaben an. Hier das Style Sheet des Beispiels:

.Init {
margin-right:-5px;
font-weight:bold;
font-size:33px;
color:blue;
}

Dem Anfangsbuchstaben weisen Sie den Stil mit dem class-Attribut zu: <span class="Init">V</span>. Wenn Sie das Style Sheet nur an einer Stelle, also nur für einen Buchstaben, benötigen, bietet sich eventuell eine Inline-Definition an. <span style="margin-right:-5px; font-weight:bold; font-size:33px; color:blue;">V</span>.