Die Syntax von CSS

Ein CSS-Befehlt besteht aus einem Selector, einem Property und einem Wert.

h2 { color: red; }

h2 ist der Selector, das HTML-Element auf den die Eigenschaft angewendet wird.

Property ist color, die Eigenschaft die zugewiesen wird.

Der Wert ist red. Diese Eigenschaft nimmt das HTML Element durch die CSS Anweisung an.
Jede Zuweisung steht in geschweiften Klammern und wird mit einem Semikolon abgeschlossen. Es können auch mehrere Zuweisungen innerhalb der Klammern stehen, aber alle müssen mit einem Semikolon enden.

Selector {
Eigenschaft1: Wert1;
Eigenschaft2: Wert2;
Eigenschaft3: Wert3;
}

Beispiel:  Festlegung von Vordergrundfarbe, Hintergrundfarbe und Rahmen.

h2 {
color: red;
background-color: black;
}

Der meist gemachte  Fehler bei CSS ist das Semikolon hinter der Zuweisung zu vergessen.
Es kommt dann keine Fehlermeldung, die Zuweisung funktioniert nur nicht und der Webentwickler wundert sich.

Also, wenn nichts ausgeführt wurde, immer zuerst prüfen ob ein Semikolon oder eine Klammer fehlt.

Einige Webbrowser stellen eine Fehlerkonsole zur Verfügung und auch einen Editor, mit der man ausprobieren kann, wie das Design aussieht.

Die neue CSS-Datei kann man dann auch herunterladen und in seine Website einfügen.

Der img-tag um Bilder einzubinden

Um eine Bildquelle (eng. Image Source) einzubinden gibt es in HTML den Tag img:

<img src="bild.png" />

Mit diesem Tag wird das Bild „bild.png“ eingebunden.

Dieses muss sich in diesem Fall im gleichen Verzeichnis wir die HTML Seite befinden.
Um ein Bild in einem anderen Verzeichnis anzusprechen braucht man einen Pfad, das heisst, den Weg in ein anderes Verzeichnis auf dem Server auf dem die Seite gespeichert ist, oder die Adresse eines anderen Servers im Netz.

Es sind hier realtive, und absolute Pfade. Relativ im Verhältnis zum Verzeichnis in dem die Seite ist oder die absolute Adresse der Bilddatei.

Ratsam ist ein realtiver Pfad, das es sonst beim Überspielen auf den Webserver Probleme geben kann.

Hier Beipiele für realtiven und absoluten Pfade. Wir gehen dabei einfach mal von der folgenden Situation aus:

• Webserver und Arbeitscomputer unter Linux
• Homeverzeichnis des Webserver „/var/www“
• Verzeichnis für Bilder „/var/www/bilder“
• Name des Bildes meinbild.png

Wenn wir dieses Bild mit einem absoluten Pfad einbinden wollen müssten wir folgenden Tag verwenden:

<img src="/var/www/bilder/meinbild.png" />

Soweit so gut, aber was ist wenn wir jetzt unsere Seite dann auf einen Server im Internet verschieben, inklusiver aller Unterordner. Dann müssten wir alle Pfade überprüfen.

Wenn wir einen relativen Pfad verwenden sieht der Tag so aus:

<img src="./bilder/meinbild.png" />

Hier bleibt das Verhältnis der Seite zum Bild erhalten und es ist völlig egal, wo wir die Seite abspeichern.

Du kannst das ja mal ausprobieren.

Es wird zwar bei dir funktionieren, wenn du die Seite auf deinem Computer noch nicht gelöscht hast. Aber bei anderen nicht, denn der Browser sucht das Bild lokal unter /var/www/bilder/meinbild.png und dort wird der Bowser in den meisten Fällen nichts finden.

Der absolute Pfad ist nur auf deinem Rechner gültig, auf einem anderen Rechner existiert wahrscheinlich unter dem absolten Pfad gar kein Bild.

Ausserdem ist auch noch eine URL als Bildadresse möglich, also eine Adresse im Internet.

Ein Beispiel dafür wäre:

<img src="http://chileconnected.com/bilder/bild.jpg" />

Alternativtext

Da man manchmal auf Grafiken etwas warten muss und auch Suchmaschinen eine Berschreibung des Bildes wünschen, weil Sie ja nicht so gut „sehen“ können. Gibt es ein Attribut, mit dem man einen alternativen Text für ein Bild angeben kann. Dieser wird angezeigt wenn das Bild nicht geladen werden kann, oder oft auch wenn man die Maus über das Bild bewegt.

Dieses Attribut ist „alt“. Das sieht dann so aus:

<img src="./bilder/meinbild.png" alt=“bild“/>

Desweiteren muss man an die Grösse und Ausrichtung denken.

Das kommt im nächsten Text.

Bilder un Grafiken im Netz

Bilder die in eine Webseite eingebunden werden sollen, müssen erstmal in dem Ordner der Webseite abgelegt werden.

Ich mache es immer so, dass ich für jede Webseite, die ich erstelle, einen eigenen Ordner anlege, in dem ich alle Bilder ablege (für die Stilbögen und javascripts die in der Seite verwendet werden mache ich es übrigens auch so).

So hat man immer schön Übersicht und vermeidet “tote“ Verweise.

Bildformate im Internet: 

Bilder werden meist komprimiert abgespeichert und dafür gibt es verschiedene Komprimierungsmethoden und somit verschiedene Bildformate:

JPEG – .jpg

Das JPEG Format ist besonders gut dazu geeignet Fotos zu komprimieren und das, nahezu verlusst frei. Aus diesem Grund wird das JPEG Format heutzutage auch gerne in digitalen Fotoapparaten eingesetzt.

GIF – .gif

Das GIF Format eignet sich besonders gut für das Speichern von Zeichnungen, Buttons etc, mit nicht ganz so vielen Farben wie in Fotos.

Darüber hinaus kann man mit gif transparente Bereiche stehen lassen, was an mit jpeg nicht kann.

Mit dem GIF Format kann man eine Animation aus mehreren einzelnen Bildern erstellen.

Aber auch den Einsatz zu vieler animierter GIF’s sollte man vermeiden.

Es ist kein guter Stil zu viele animierte GIF’s zu verwenden und die Bilder sind meistens auch eher Speicherintensiv.

Die Komprimierung bei gif erfolgt auf die Weise, dass die Farben in einer Farbtabelle abgespeichert werden und in dem Bildbereich die Koordinaten, in der die Farben angewendet werden.

So kommt man zu dem Schluss: Fotos mit vielen Farben: jpeg, Grafiken mit sehr wenigen Farben: gif.

PNG

Aus dem Grund das, das GIF Format einem Patent unterlag, wurde ein alternatives Format erschaffen was alle Vorteile des GIF Formats haben sollte. Dieses Format ist das PNG Format.

Es ist daher noch relativ neu, dieses Format, hat im Übrigen diesselben Funktionen wie gif.

Namen der Bilddatei

Für den Einsatz von Bildern, und generell ist es wichtig das man die genaue Schreibweise beachtet.

Auch Groß- und Kleinschreibung ist hierbei zu beachten.

Wenn du zuhause ein Windows Betriebssystem hast, ist das zwar egal weil unter Windows nicht zwischen Groß- und Kleinschreibung unterschieden wird.

Im Internet wird deine Seite aber meist auf einem Unix oder Linux System gespeichert.

Unix und Linux sind im Internet deshalb so verbreitet, das das Internet aus diesem Bereich kommt.

Diese Betriebssysteme haben ausserdem auch in Punkto Sicherheit große Vorteile.

Ich selber benutze fast nur noch Linux, da es für Webentwickler alles automatisch bereit hat und man sich nicht mit Zusatzinstallationen verkopfen muss.

Ich habe hier auf dem Rechner Linux Mint, ist gut für Einsteiger und hat alles was man für das Büro braucht vorinstalliert.

Absätze in HTML

Ein wichtiger HTML-TAG ist der für Absätze <p> </p>

Das <p> steht für das englische „paragraph“ = Absatz

Absätze strukturieren Texte, so dass sie besser lesbar sind und Inhalte voneinander trennen.

In der Ausgabe hält ein Absatz einen Abstand zum nachfolgenden Element.

Es gibt ein CSS-Element, mit dem man bestimmte Absatzabstände definieren kann.

Sollen 2 Textabschnitte getrennt werden, sieht das wie folgt aus:

<p>Erster Absatz</p>

<p>Zweiter Absatz</p>

Das End-Tag </p> ist in HTML optional, d. h., es muss nicht zwingend angegeben werden.

In XHTML hingegen ist es Pflicht.

Es gehört auch zum guten Stil, das </p>-Tag anzugeben.

Das verdeutlicht zugleich auch die Bedeutung dieses Tags: Es umfasst einen Textblock – es steht nicht für den Zwischenraum zwischen zwei Absätzen.

Beachten Sie für später im Kurs:

Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente wie z. B. Überschriften, Textabsätze oder Listen enthalten.

Das bedeutet für HTML

Beim ersten Auftreten eines Tags, welches nicht mehr im akuellen Textabsatz erlaubt ist (beispielsweise <ul> oder <table>), wird der Textabsatz vom Browser im geschlossen – ein eventuell später folgendes schließendes </p> steht dann ohne Start-Tag allein und ist ein Fehler.

In XHTML muss das schließende </p> zwingend vor den anderen blockerzeugenden Elementen notiert werden.

Vorgehensweise beim Erstellen einer Webseite

Damit wir wissen, was wir machen, erkläre ich schonmal wie ich beim Erstellen der Webseite vorgehe.

1. Schritt planen was gemacht werden soll

Diesen Schritt mache ich an meiner Tafel, ich analysiere, was ich auf der Webseite posten möchte und erstelle die Navigationsmenüs. Dabei zeichne ich auch die Aufteilung der Seite auf

2. Farbabgleich

Ich lege fest, welche Farben ich verwenden möchte und nehme Grafikprogramme zur Hilfe um zu sehen, ob die Farben harmonieren. Das Grafikprogramm nehme ich dann auch oft dazu her, die Webseite zu zeichnen und zu sehen, ob alles harmonisch aussieht oder ob ich noch anpassen muss.

Falls schon ein Logo existiert nehme ich natürlich die Farben des Logos und eventuell noch eine zweite Farbe die harmonisiert. Drei oder mehr Farben nehme ich eigentlich nie, da es schnell aussieht, als sei ich bei der Erstellung in den Farbtopf gefallen.

Manchmal bin ich auch ober kreativ und nehme Webmuster her, die ich selber erstellt habe. Bei einer Seite fotografierte ich mal einen Topf mit gekochtem Reis und nahm das Muster dann her, Aquarelle eignen sich immer und machen einen schönen strukturierten Farbhintergrund.

Letztendlich muss ich entscheiden, was die Seite repräsentieren soll: Lebendigkeit und Kreativität oder Nüchternheit und Schlichtheit.

3. Seitenfunktion kodieren

Danach geht es an den Rechner. Ich erstelle den Rahmen der Seite und kodiere das Navigationsmenü. Ich lege für jeden Link eine Datei an und versichere mich, dass jeder Link auch auf eine Datei verweist und nicht ins Leere geht.

4. Inhalt schreiben

Dann schreibe ich den Inhalt der Seite, erstmal nur mit Absätzen, noch ohne Bilder.

Falls ich in den Inhalt nochmal einen Link eingefügt habe, dann muss ich auch prüfen dass er nicht ins Leere läuft und gleich die Datei mit anlegen.

5. Erster Test

Wenn der Rahmen, die Navigation und die Links auf den einzelnen Seiten stehen, kann ich schonmal den ersten Test durchführen.

Ich mach mir immer eine Exceldatei, in die ich die Namen aller Unterdateien kopiert habe und kreuze ab was ok ist, bzw. schreibe einen Kommentar hinein was gemacht werden muss.

Es empfiehlt sich erst durchzutesten und danach anzufangen die Fehler zu korrigieren.

5. Bilder und Grafiken einbinden

Wenn die Seite einigermassen steht, geht es daran, die Bilder und Grafiken herauszusuchen und einzubinden. Ich lege sie alle in Ordner ab, die bilder, grafiken, flashs usw. heissen, damit nicht das Chaos im Verzeichnis entsteht.

Für die Einbindung nehme ich relative Verweise, dass ich nichthttp://meineseite.com/bilder/meinbild.jpg schreibe, sondern ../bilder/meinbild.jpg. Dadurch kann ich die Seite schnell auf einen anderen Server umziehen, ohne dass ich alles ändern muss.

6. Nochmal testen zusammen mit der Kundschaft

Da die Seite jetzt so gut wie fertig ist, kann ich sie der Kundschaft vorlegen, dass sie nochmal durchgucken und auch Kommentare in meine Excel Datei schreiben, was sie gerne geändert haben möchten.

7. Veröffentlichen

Wenn der Kunde bestätigt hat, dass er zufrieden ist mit der Arbeit, geht es in Betrieb.

Webhosting und Domain kaufen und dann mit einem Filetranspher Protokoll hochladen. Bei Linux nehme ich den Filezilla her, bei Windows hatte ich früher den FTP-Commander benutzt

Webseite sauber gestalten

Ich kann ohne weiteres HTML, javascript und CSS in einer Datei mischen, wenn es sein muss, auch noch php dazu.

Ich kann auch in dem Verzeichnis, das ich für meine Webseite verwende das absolute Chaos anrichten, aber derjenige, der einen sauberen, übersichtlichen Code abliefert, trennt alles fein voneinander.

In der Schule ging mit der EDV-Lehrer auf den Zeiger, da er verlangte, dass jede Arbeit auch sauber dokumentiert werden muss, aber selbst wenn man kleine Sachen wie HTML erstellt, ist es wichtig, dass man ein paar Kommentare einfügt um zu wissen was passiert und für die Dateinamen möglichst sprechende oder standartisierte Namen verwendet.

Wenn ich eine Seite erstelle, dann lege ich die HTML-Dateien, für jede Sprache in einem Verzeichnis ab, die Bilder in einem Verzeichnis, ebenso habe ich für die CSS-Dateien und die Javascripte alle ein gesondertes Verzeichnis. Das macht die Arbeit übersichtlich und ich verzweifle nicht, wenn ich nach Jahren an einer Seite nochmal eine Änderung vornehmen soll.

Barrierefreiheit

Alte Hasen im Webdesign wissen, dass es sehr wichtig ist, auf den Endbenutzer Rücksicht zu nehmen.

Früher waren da eher Themen interessant, wie Modemgeschwindigkeit, Endgerät usw.

In der heutigen technisierten Welt ist das weniger ein Thema. Was aber sehr wohl wichtig ist, ist die Barrierefreiheit beim Webgestalten, da heute auch behinderte Menschen auf den Service des Internets nicht verzichten möchen.

Was bedeutet Barierrefreiheit?

Im Netz gibt es eine große Gruppe von Benutzern mit verschiedenen Arten von Behinderungen, die auch einen Teil der Besucher Ihrer Webseite ausmachen.

Falls sie zur Zielgruppe Ihrer Webseite gehören, dann müssen Sie auch an diese Personengrppe denken.

Wenn Sie zum Beispiel Konzertkarten auf Ihrer Seite verkaufen, dann muss es für derjenigen, der schwer sehen kann auch möglich sein, seine Karte bei Ihnen zu buchen.

Sie  sollten auch an ältere Menschen denken, für die es nicht leicht ist, sich im Internet zurecht zu finden und Ihre Seite so gestalten, dass die Informationen, die für diese Gruppe wichtig sind, schnell verfügbar sind, ohne dass sie lange suchen müssen.

Warum ist die Barrierefreiheit so wichtig?

Das Web wird immer wichtiger in unserem Leben, wenn es darum geht, Angebote für Bildung, Finanzen und Freizeit zu benutzen.

Wir nutzen das Web unter anderem, wenn wir unsere Rechnungen bezahlen, Waren einkaufen, Eintrittskarten für Veranstaltungen  buchen, Kontakt mit der Gesundheitsversorgung aufnehmen , um Radio zu hören, Fernsehen zu schauen, Chatten, Informationen  suchen und vieles mehr.

Im gleichen Masse nimmt für viele Bereiche der Kundenservice vor Ort ab.

Einige Firmen verzichten bewusst auf den Kundenservice vor Ort oder lassen ihn sich teuer bezahlen, wie zum Beispiel Ryan Air, die für das einchecken vor Ort fast genauso viel berechnen wie für das Flugticket und jeder der mit ihnen reist, den Eincheck zuhause am Rechner machen sollte.

Bewerten Sie die Barrierefreiheit ihrer Seite

Wenn neue Websites entwickelt oder aktualiert werden um auf den neuesten Stand gebracht zu werden, dann muss die Barrierefreiheit im Entwicklungsprozess ständig untersucht und geprüft werden.

Je früher man erkennt, dass wichtige Funktionen für die Verbesserung der Barrierefreiheit fehlen, desto schneller kann man eingreifen und die Seite anpassen.

Einige einfache Tipps, um die Barrierefreiheit zu verbessern

• Die Bilder die sie verwenden, sollten in Bezug zu dem Textinhalt sein, damit Sie den Besucher der Webseite zu dem was er sucht hinleiten.
• Verwenden Sie Attribut „alt“, um die Bilder zu beschreiben. Auch Videos und Audios sollten mit Alternativtext ausgestattet sein.
• Stellen Sie sicher, dass es ein guter Kontrast zwischen Text und Hintergrund besteht (Kontrastprüfungsprogramme gibt es online oder als Zusatz für den Browser).
• Verwenden Sie einen Schriftsatz der gut zu lesen ist und formulieren Sie kurze Sätze. Generell gilt, Sans-Serif Schriften sind besser zu lesen als Serif-Schriften
• Verwenden Sie aussagekräftige und verständliche Texte und Hypertext-Links, vermeiden „hier klicken“.
• Formulieren Sie aussagekräftige Überschriften.
• Verwenden Sie ein ordnungsgemäßes und semantisches Markup, (<h1> – <h6> für Schlagzeilen, <ul> <ol> <dl> <li> Listen <p> Fließtext, der <table> für tabellarische Daten etc.)
• Gestalten Sie alle Seiten der Website einheitlich, damit sie ruhig wirkt.
• Stellen Sie sicher, dass es möglich ist, die Seite auch ohne CSS benutzen zu können, da einige Browser das CSS unterschiedlich interpretieren. Die Seite sollte auch ein gutes Erscheinungsbild geben, wenn die Skripte, Plug-Ins usw. nicht funktionieren.
• Rahmen (Frames) werden heutzutage nicht mehr verwendet, da sie auf verschiedenen Endgeräten nicht richtig interpretiert werden und im responsiven Design Schwierigkeiten machen. Heute arbeitet man mit Boxen und html5 stellt dafür tags wie <nav> oder <aside> bereit.
• Validieren Sie Ihre Seiten vor der Veröffentlichung.