Cascading Style Sheets
ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente.(Gilt als Standard für Websites.) Neben diversen Fähigkeiten im Farb- und Schriftbereich bietet CSS die Möglichkeit, Elemente frei zu positionieren oder Hintergrundbilder festzulegen. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird. Mit CSS ist es möglich, für verschiedene Ausgabemedien eine unterschiedliche Darstellung anzugeben.
1. Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen
I: gute HTML-Struktur
Achten Sie auf das richtige Grundgerüst einer HTML-Seite und die richtige Schachtelung (Hierarchische Struktur) der HTML-Elemente. Entscheidend ist außerdem, dass Sie Elemente an der richtigen Stelle einsetzen (Head- oder Body-Bereich).
2. Du sollst darauf achten, „well-formed HTML“ Seiten zu erstellen
II: „HTML-Tags“
a. Ein Start-Tag wird immer mit dem dazugehörigen End-Tag geschlossen.
b. Aus Kompatibilitätsgründen zu XHTML wird empfohlen auch Elemente ohne Inhalt wie z.B. <br>, <img> immer zu schließen: <br />, <img />
c. Aus Kompatibilitätsgründen zu XHTML wird empfohlen Element- und Attributnamen IMMER klein zu schreiben
(z.B. <a href=http://www.ifmk.de >Das ist ein Link</a>)
d. Setzen Sie Attributwerte immer in Anführungsstriche
(z.B. src=“blume.jpg“ oder alt=“Das Photo zeigt eine Sonnenblume“)
e. Verwenden Sie immer Entitäten (z.B. für „ä“ > „ä“)
3. Du sollst darauf achten „well-formed HTML“ Seiten zu erstellen
III: korrekte Hyperlinks
a. Für die Verlinkung von elektronischen Dokumenten in einer HTML-Seite ist die korrekte Pfadangabe wichtig.
b. Hierbei werden absolute von relativen Pfaden unterschieden. Hyperlinks zu externen Webseiten müssen als absoluter Pfad gesetzt werden. Eingebundene Bilder hingegen können auch relativ verlinkt werden, um die Darstellung der HTML-Seite auf jedem System auch offline zu gewährleisten. Dasselbe gilt für interne Unterseiten eines HTML-Projektes.
c. Ebenfalls essentiell ist die Groß- und Kleinschreibung der verlinkten Dokumente.
4. Du sollst die strikte Trennung von Inhalt und Layout beachten.
HTML strukturiert eine Seite und beschreibt nicht wie sie aussieht. Ausschließlich CSS dient zur Gestaltung der Seite. Beachten Sie dies schon mit Beginn der Erstellung, eine nachträgliche Anpassung ist oft unnötig und zeitaufwendig.
5. Du sollst nicht mit Attributen oder Elementen formatieren, die den Status „deprecated“ haben.
Viele Formatierungselemente und Attribute in HTML verstoßen gegen die strikte Trennung von Inhalt und Layout. Demnach sollten sie nicht mehr verwendet werden und erhalten den Status „deprecated“ (z.B. „font-Tag“). Verwenden sie deshalb ausschließlich Logische Auszeichnungen (z.B. „em-Tag“ oder „strong-Tag“) anstatt Physikalischen Auszeichnung bzw. Visuellen Auszeichnung (z.B. „i-Tag“ oder „b-Tag“).
6. Du sollst eine HTML-Seite nicht mit Layouttabellen gestalten.
Die Verwendung von Layouttabellen verstößt gegen die strikte Trennung von Inhalt und Layout. Inzwischen ist es ohne Probleme möglich tabellenfreie Layouts mit CSS zu erstellen.
7. Du sollst auf zu viele Animationen, unterschiedliche Textfarben und Schriftarten verzichten.
Zu viel verschiedene Formatierungen und blinkende Layoutelemente können leicht Verwirrung schaffen, sind nicht immer lesbar und lenken vom Inhalt ab.
8. Du sollst für z.B. Grafiken und Formularelemente immer auch eine Beschreibung mittels „alt-Attribut“ hinzufügen.
Verwenden Sie stets das „alt-Attribut“ um Grafiken, Bilder, Formularelemente, applets etc. zu beschreiben, um jedem Nutzer die Chance zu geben, die Inhalte zu erfassen.
9. Du sollst Nutzergruppen nicht durch Aussagen wie: „optimiert für Internet Explorer 4.1, SeaMonkey 5.0, etc.“ oder die Verwendung von horizontalen Scrollleisten ausschließen.a. Nicht alle HTML-Eigenschaften und CSS-Regeln funktionieren in jedem Browser. Es handelt sich dabei meist um zusätzliche Layouteffekte. Versuchen Sie sich auf die gängigen CSS-Regeln zu beschränken, die auf allen Browsern funktionieren. Die ggf. ein wenig abweichende Darstellung einer Seite auf unterschiedlichen Browsern ist dabei nicht gemeint. (In den meisten Werken zu HTML & CSS sind CSS Referenzkarten enthalten, die anzeigen welche CSS-Regeln von den gängigen Browsern unterstützt werden).
b. Horizontale Scrollleisten sind nicht benutzerfreundlich. Durch Verwendung von h. S. kann nicht ausgeschlossen werden, dass der Inhalt teilweise oder gar nicht wahrgenommen wird. Abhilfe schafft eine feste horizontale Seitenbeschränkung und die automatische Verwendung von vertikalen Scrollleisten in CSS.
10. Du sollst Metainformationen sinnvoll einsetzen.
Erweitern Sie Ihre HTML-Seite mit sinnvollen Zusatzinformationen und vermeiden Sie überflüssige Informationen bzw. Wiederholungen. Unterlassen Sie den Missbrauch von Metainformationen zum eigenen Vorteil (z.B. Werbung, gezieltes Ranking, Spam).
Das Grundgerüst einer Website
1. HTML-Code:
Mit dem <html>-Tag beginnt und endet der Quellcode. Er beinhaltet keine weiteren Attribute, ist aber unerlässlich beim Programmieren einer Seite. Er umschließt alle anderen Tags.
Der <head>-Tag ist der "Kopf" der Seite. Hier hinein gehören z. Bsp. Metadaten, der Titel der Seite und die Verlinkung zu einer externen CSS-Datei. Diese Informationen sind im Browser nicht sichtbar und dienen meist nur zur Verlinkung in Suchmaschinen.
Der <body>-Tag umschließt letztlich alles, was man als User im Browser von der Seite sieht, sprich alles Inhaltliche. Im <body>-Tag kann man Angaben wie Hintergrundfarbe, Linkfarbe, Schriftart usw machen, also alles was zum Layout gehört (in der Grafik rot gekennzeichnet). Dies allerdings ist nicht zu empfehlen. Effektiver ist die Auslagerung aller gestalterischen Attribute in ein Stylesheet bzw. eine CSS-Datei (siehe <head>-Tag).
2. CSS-Code
Im CSS-Code werden alle Elemente, die das Layout einer Seite ausmachen, definiert. Man kann diesen Code so wie in der Grafik direkt in den HTML-Code einfügen (mittels <style>-Tag) oder in einer externen *.css-Datei auslagern. In CSS wird im Gegensatz zu HTML mit geschweiften Klammern gearbeitet. Eine Erklärung zu den gängisten Elementen und Defintionen findet man z. Bsp. hier.
Befehle (tags): WAS wird dargestellt Der HTML-Code besteht aus einer Aneinanderreihung von Befehlen. Um dem Browser mitzuteilen, daß es sich um einen HTML-Befehl handelt, muß dieser in eckige Klammern < > gesetzt werden. Ein typischer HTML-Befehl besteht aus einem Startwort, z. B. <FONT> für Textstart, dem darzustellenden Inhalt, z. B. "Dies ist ein Text" und der Endemarke, z.B. </FONT>.
Insgesamt also: <FONT>Dies ist ein Text.</FONT>
Eigenschaften (attributes): WIE wird es dargestellt Für viele der HTML-Befehle gibt es zusätzliche Eigenschaften, wie zum Beispiel Breite (=width), Höhe (=height), Farbe (=color), Schriftart (=face), Schriftgröße (=size) etc. Diese Eigenschaften werden innerhalb der eckigen Klammern zu dem Befehlswort dazu geschrieben.
Zwei typische Beispiele:
<IMG width height> IMG=image, also Bild
<FONT color face size> FONT, also Schrift
Die Eigenschaften müssen in der Regel durch Werte spezifiziert werden:
Werte (values): Die Ausprägung der Eigenschaften wird durch Werte ausgedrückt, die aus Zahlen oder aus Wörtern bestehen können. Diese werden an die Eigenschaft mit einem Gleichheitszeichen angehängt und stehen in Anführungsstrichen. Also müssen die Beispiele von oben heißen:
<IMG width="200" height="150">
Das Bild ist dann 200 Pixel breit und 150 Pixel hoch.
Websichere Farben:
In HTML werden Farben normalerweise im Hexadezimal-Code angegeben (alternativ einfach mit Farbnamen, also beispielsweise "color="black").
Die vorliegenden Grafiken geben einen Überblick über die wichtigsten Farben und ihre zugehörigen Codes.
Links zum Thema Ressourcen:
HTML-Editor zum Download:
Phase 5Bilderupload:
Myimg.deFTP-Upload-Programm:
Total Commander