Der Start jeder Webseite sollte ein gut optimierter Header sein, jetzt fragt sich der eine oder andere vielleicht was ein Header ist. Ein Header ist eine Art Unsichtbare Kopfzeile im Kopf der Webseite. Im Header übergebt ihr dem Browser und den Suchmaschinen wichtige Informationen über eure Webseite. Hier ein Musterbeispiel für den Header aus unserem Code-Bereich:

Jetzt gehen wir einmal den Header Schritt für Schritt durch, zumindest die relevanten Teile.

Hier übergebt ihr den Webseiten den Title eurer Webseite, der Title wird eingeschlossen von einem öffnenden title-Element und einem schließendem /title-Element. Dieser Title wird auch in den Suchergebnissen bei Suchmaschinen wie Google als Überschrift angezeigt.

In diesem Bereich übergebt ihr dem Browser die Sprache die Ihr in eurer Website benutzt und verweist ihn an die entsprechende Zeichenkodierung, dies ist besonders wichtig damit alle Sonderzeichen einer Sprache erkannt werden, wie im Deutschen das ß,ä,ö,ü und viele weitere.

In der Description, was zu deutsch Beschreibung heist, übergebt ihr vorallem Suchmaschinen relevante Informationen über eure eigene Homepage, diese Beschreibung taucht zu meist auch bei den Suchmaschinen als Beschreibender Text unter der Überschrift auf. Ein kleiner Tipp von mir, die Description sollte maximal um die 160 Zeichen lang sein.

Die Keywords (Schlüsselwörter) übergeben an die Suchmaschinen Informationen in welcher Kategorie eure Homepage gehört. Aber Achtung, verwendet nicht mehr als etwa 6 Keywords, ich habe bereits Homepages gesehen die über 300 Keywords aufgewiesen haben und deshalb von den Suchmaschinen aus dem Index(Auflistung aller Webseiten in der jeweiligen Suchmaschine) entfernt wurden, da es sich hierbei um das sogenannte Keyword-stuffing handelt. Zu trennen sind die Keywords jeweils mit einem “;”.

Die restlichen Angaben sind mehr oder weniger freiwillig. Jetzt müsst ihr euren Header nur noch wieder schließen, und zwar mit einem “</head>”

In diesem Bereich bindet ihr euren Stylesheet ein. Kurz zur Erklärung für Einsteiger, ein Stylesheet ist eine externe Datei in der ihr das Aussehen eurer Homepage steuert, im Stylesheet werden Dinge wie Schriftgrößen, Schriftfarben, Textfluss, Größe bestimmter Bereiche und vieles mehr festgelegt. Der Sinn dieser Auslagerung ist einfach, ihr haltet eure Homepage übersichtlich und für Suchmaschinen auslesefreundlicher. Deshalb muss im Head-Bereich der Stylesheet für eure Seite verlinkt werden und zwar mit

Der nächste Schritt ist nun euer Favicon einzubinden, ein Favicon ist ein kleines Symbol was oben links neben der Adresszeile eingeblendet wird, ist zwar nicht zwingend Notwendig aber auf jeden Fall benutzerfreundlicher, da dieses Symbol auch im Lesezeichen oder im jeweiligen Tab eures Browsers abgebildet wird. Das Ganze sieht dann so aus:

Das war der erste Teil eures Grundgerüstes.

Wenn es um Abstände von Texten oder Divs geht, dann handelt es sich hierbei meistens um Bestandteile des Boxmodells. Bestandteile des Boxmodells sind die Befehle “margin”, “padding”, und “border”. Diese Elemente Regeln Abstände innerhalb und ausserhalb eines Divs, ausgenommen hiervon ist border, dieser Befehl verschaft einem Div einen Rahmen, der für jede Seite des Divs seperat eingestellt werden kann. Um euch die Zusammenhänge zwischen Margin und Padding deutlich zu machen hier einmal das Boxmodell:

Margin sind die Abstände die außen ausserhalb des Divs bestehen und padding sind Abstände die innerhalb einer Div bestehen. Border hingegen ist der Rahmen des Divs selbst.

Jeder dieser Befehle hat noch zusätzliche Attribute wie left, right, top, und bottom. Diese Attribute steuern auf welcher Seite die jeweiligen Abstände bzw. der Rahmen erscheinen soll, werden sie nicht angegeben wird der jeweilige Pixelabstand für alle Seiten genutzt.

/* Hier einmal ein Beispiel für Margin:*/
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
 
/* Und hier Beispiele für Padding:*/
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
 
/* Und ein weiteres für Border:*/
border-top: 10px;
border-right: 10px;
border-bottom: 10px;
border-left: 10px;

Border hat hierbei noch weitere Attribute die die Eigenschaften des Rahmens einstellen.
Ein Beispiel hierfür ist:

border-bottom:1px solid #dadada;

Das “1px solid” dient der regulierung der Dicke des Rahmens, der Wert nach der # ist schlichtweg eine Farbangabe.

Je es ist soweit, viele von euch haben mehr oder weniger darauf gewartet, Adobe hat jetzt die Creative Suite 4 (CS4) veröffentlicht. Die CS4 gibt es, wie passend, in vier verschiedenen Versionen, die jeweils unterschiedliche Programme beinhalten. in der Master Collection sind unter anderem enthalten: Indesign, Photoshop, Illustrator, Flash, Dreamweaver und viele mehr.

Die Vollversion der Master Collection ist schon ab läppischen 3.568,81€ zu haben, aber keine Sorge wenn ihr ein Update macht kostet Sie nur 1.188,81€.

Für diejenigen die nicht einfach mal dreieinhalbtausend Euro in der Tasche haben, die können Sie auch die Web Premium Edition holen für “nur” 2.259,81€.Auch hier für Besitzer des Vorgängers für nur 772,31 € als Update Verfügbar

Häufig bietet es sich bei langen Texten an am anfang des Texte ein Inhaltsverzeichnis zu integrieren, weches die Themengebiete des aktuellen Html-Dokumentes auflistet.  Hierbei ist es möglich bestimmte Textpassagen am besten in einer Div mit einer entsprechenden ID zu versehen, so zum Beispiel bei einem Text über einem Stylesheet die ID stylesheet zu vergeben.

An dieser Stelle ein Tipp für diejenigen die sich noch nicht mit dem Thema Klassen und Id´s beschäftigt haben, nähere Informationen findet ihr hier: ID´s und Klassen

Wenn ihr nun diese Id´s entsprechend innerhalb eures Inhaltsverzeichnisses verlinkt, erhaltet ihr sogenannte Anker- oder Sprungpunkte. Durch einen Klick auf die Verlinkung “springt” ihr zu dem jeweiligen Div.

Was ihr beachten solltet, ist dass ihr die Verlinkung zur Div mit einem # ankündigen müsst.

Ein Beispiel findet ihr hier:

1
2
3

<ul>
<li><a href="#stylesheet">Stylesheet</a></li>
</ul>

Die Elemente ul und li gehören allerdings zu einer Liste, für intressierte gibts hier mehr.