Prof. Andreas Büsch KH Mainz Medienpädagogik
HTML 5- und CSS-Grundlagen
Inhalt
1. Was ist (X)HTML? ...... 2 2. Wie erstelle oder bearbeite ich HTML-Dokumente? ...... 2 3. Wo finde ich Hilfe und Informationen? ...... 2 4. Wie werden HTML-Elemente notiert? ...... 2 5. Welche Angaben zu den Elementen gibt es noch? ...... 3 6. Wie sind HTML-Dokumente aufgebaut? ...... 3 7. Was ist bei Datei- und Verzeichnisnamen für Webprojekte zu beachten? ...... 4 8. Wie werden Farben im Internet angegeben? ...... 12 9. Welche absatzweiten Formatierungen kann ich nutzen, um Text zu strukturieren? ...... 4 10. Wie wird eine Tabelle in HTML erstellt? ...... 4 11. Wie werden Listen in HTML erzeugt? ...... 6 12. Wie werden Links erstellt?...... 6 13. Wie kommen Bilder auf eine Webseite? ...... 7 14. AV-Daten ...... 9 15. Wie strukturiere ich eine Website? ...... 9 16. CSS – verschachtelte Gestaltungsangaben ...... 10 17. Wie erstelle ich ein Menü mit CSS? ...... 13 18. Menülisten mit verschachtelten Menüs (Untermenü-Punkten) ...... 15 19. Wie baue ich eine Webseite auf? ...... 18 20. Tipps, Tricks und Konventionen ...... 19 21. „Qualitätsmanagement“ ...... 19
Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 2 von 20 1. Was ist (X)HTML? (X)HTML = (extensible) Hypertext Markup Language = Hypertext-Auszeichnungs- Sprache Hypertext: ein Text, der mittels strukturierender Kommandos „ausgezeichnet“ (mar- kiert) ist. HTML ist ein Dialekt der SGML (standard generalized markup language) XHTML ist ein Dialekt der SGML-Teilmenge XML (extensible markup language), die auch für andere Aufgaben des Datenaustauschs verwendet wird.
In (X)HTML wird dabei nur die Struktur bzw. der Inhalt einer Seite beschrieben; sämtliche Formatierungen und Positionierungen werden in einer verknüpften CSS- Datei abgelegt. Für diese „Sprachen“ gibt es Versionen; aktuell (seit 2009) ist bei HTML Version 5 Standard, nachdem 4.01 über 10 Jahre gültig war; XHTML steht bei Version 1.1.
2. Wie erstelle oder bearbeite ich HTML-Dokumente? HTML-Dokumente können in jedem beliebigen Editor (Notepad, Wordpad) bearbeitet werden, da sie im Prinzip aus „nacktem“ Text (plain text) mit zusätzlichen Befehlen bestehen. Die Befehle sind immer in spitzen Klammern < > angegeben. Auch eine Textverarbeitung wäre einsetzbar, die Dokumente müssen aber dann als HTML oder ASCII gespeichert werden; da die meisten Textverarbeitun- gen aber eigene HTML-Befehle (proprietäre tags) einfügen ist dies nicht empfehlens- wert. Sinnvoller ist es, einen speziellen HTML-Editor zu benutzen, da dieser zahlrei- che unterstützende Funktionen bietet. Neben kommerziellen Produkten (z.B. Adobe Dreamweaver) gibt es auch Freeware-Editoren wie den BlueGriffon (Freeware/GPL) oder Microsoft Expression Web (Freeware).
3. Wo finde ich Hilfe und Informationen? Stefan Münz hat seit den 90er unter Jahren eine kostenlose (!) Dokumentation zu HTML in‘s WWW gestellt (ursprünglich unter de.selfhtml.org; seit 2005 wird die Seite https://wiki.selfhtml.org/ getragen von einem e.V.). Sein Buch zu HTML 5 hat er wieder kostenfrei in’s Netz gestellt unter http://webkompetenz.wikidot.com/docs:html-handbuch. Eine übersichtliche Systematik aller unter HTML5 gültigen Elemente finden Sie unter http://www.selfhtml5.org/html5-tag-systematik/ (die Seite steht trotz ähnlichen Namens in keiner Verbindung zu der „alten“ Selfhtml-Seite).
Zu allen Adobe-Produkten gibt es eine umfangreiche Online-Hilfe (https://helpx.adobe.com/de/dreamweaver/topics-cs6.html) sowie ein Referenz-PDF (engl.) http://help.adobe.com/archive/en/dreamweaver/cs6/dreamweaver_reference.pdf
4. Wie werden HTML-Elemente notiert? Bis auf die feste Zeilenschaltung
(in XHTML:
) gibt es für jedes Element (tag) einen Anfang und ein Ende, wobei sich das Ende vom Anfang nur durch einen vorangestellten Schrägstrich unterscheidet, z.B. für einen Absatz (paragraph):
Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 3 von 20 5. Welche Angaben zu den Elementen gibt es noch? Diese Elemente können durch verschiedene Parameter ergänzt werden, die nähere Angaben zur Formatierung oder anderen relevanten Maßen enthalten, z.B. zur Aus- richtung eines Absatzes Links| Rechts| Zentriert:
.
Die Angabe eines Parameters erfolgt immer (im Editor farblich anders dargestellt) durch den Parameter selbst und den Wert, den dieser Parameter annimmt mit Gleichheits- und Anführungszeichen. Allerdings sollten Sie solche „direkten“ Formatierungen nach Möglichkeit vermeiden und stattdessen über CSS Formatierungen vornehmen!
6. Wie sind HTML-Dokumente aufgebaut? Alle (X)HTML-Dokumente (= Webseiten) haben eine gleichbleibende Struktur: • In der ersten Zeile wird angegeben, welcher Version des (X)HTML-Standards das Dokument folgt. Eine korrekte Angabe zum aktuellen Standard 5 lautet schlicht
Für HMTL 4.01 war dies bzw. für XHTML wobei die zusätzliche Angabe “Strict” (bzw. „loose“ oder „transitional“) dem jeweili- gen Browser Aufschluss darüber gibt, wie streng er sich an die Dokumenttyp- Definition(en) halten soll – mit bisweilen weitreichenden Folgen für die Darstellung der Elemente! Ich empfehle nach Möglichkeit „strict“ für eine konsistente Darstel- lung in möglichst vielen Browsern.
• Es folgt die Angabe, wo der eigentliche HTML-Bereich beginnt: bzw. für XHTML und das letzte Kommando einer Seite lautet entsprechend • Die Seite wird immer unterteilt in einen Kopf-Bereich, der nicht im Browser ange- zeigt wird und zusätzliche Informationen, Skripte usw. enthält,
… und einen Body genannten Bereich, der sämtliche anzuzeigenden Informationen enthält: …Eine korrekt programmierte HTML 5-Seite hat also immer folgende Struktur:
Die Einrückungen wie im Code-Beispiel sollten Sie im Editor der Übersichtlichkeit halber einfügen; sie haben ebenso wie zusätzliche Leerzeichen oder Zeilenschaltun- gen keinen Einfluss auf die Darstellung der Seite im Browser (vgl. unten, 9.)! Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 4 von 20 7. Was ist bei Datei- und Verzeichnisnamen für Webprojekte zu beachten? Um Schwierigkeiten mit Nicht-Windows-Servern zu umgehen, speichern Sie Doku- mente bitte immer mit Dateinamen und in Verzeichnissen, deren Namen keine Um- laute und keine Leerzeichen enthalten und klein geschrieben sind, also z.B. nicht /unsere geänderte Webseite/Hännes mit Yüksel am Strand.html) sondern: /mainpage/indexneu.html
Früher war es außerdem wichtig, dass die Namen max. acht Zeichen und max. vier Zeichen für die Dateiendung lang sind. Dies ist heute technisch vernachlässigbar, so- lange Sie 255 Zeichen für den Namen der Datei mit allen (Unter-)Verzeichnissen nicht überschreiten. Praktisch sinkt aber die Übersichtlichkeit in Verzeichnislisten mit langen Dateinamen.
8. Welche absatzweiten Formatierungen kann ich nutzen, um Text zu strukturieren? Ein Absatz (paragraph) unterteilt Fließtext in (logisch zusammenhängende) Ab- schnitte mi einer Leerzeile dawischen. Der Text kann mit dem CSS-Befehl „text- align“ (vgl. unten 17.) links- oder rechtsbündig bzw. zentriert ausgerichtet werden. 1
Eine feste Zeilenschaltung (bold return) ergibt das Gleiche wie die Enter-Taste beim Textprogramm: der Text hinter dem
steht in einer neuen Zeile.
Mit der Enter-Taste im Editor bzw. Code-Fenster erzeugte Leerzeilen werden im Browser nicht angezeigt. Leerzeilen in HTML können nur über Absatz oder Zeilen- schaltung erzeugt werden!
9. Wie wird eine Tabelle in HTML erstellt? Tabellen 2 können außer Text auch Bilder, Listen u.a. enthalten! Tabellen in HTML haben immer folgende Struktur: Eine Tabelle (engl.: table)
| bzw. | definiert werden. Der komplette Code für diese Tabelle lautet: Überschrift 1 Überschrift 2 Überschrift 3
bordercolor=„#3F3F3F“ Gibt eine Farbe für den äußeren Rahmen sowie die Umrandung der Zellen an. bordercolorlight=„#FF0020“ und bordercolordark=„#9F00FF“ ergeben eine Art 3D-Effekt, da der linke und obere äußere Rahmen sowie die rechten und unteren Zellenrahmen in einer „helleren“ Farbe eingefärbt werden. Gleichzeitig werden der rechte und untere äußere Rahmen sowie die linken und oberen Zellen- rahmen in einer „dunkleren“ Farbe dargestellt. Diese Parameter werden offiziell nur vom Internet Explorer unterstützt! cellpadding=„10“ definiert den Abstand zwischen dem Inhalt einer Zelle (dem Text oder Bild) und dem umgebenden Zellenrand; Angabe in Pixeln cellspacing=„10“ gibt den Abstand zwischen den einzelnen Zellen und damit die Breite der Gitterli- nien einer Tabelle an; Angabe in Pixeln title=„Meine erste Tabelle“ Der Parameter title findet sich bei einer Reihe von HTML-Befehlen und ermöglicht es Sprachausgabeprogrammen z.B. für Sehbehinderte eine Zusammenfassung des In- halts zu geben. Folgende Parameter gelten sowohl für die Tabelle als Ganzes als auch für Zeilen und Zellen: align=„left|right|center“ zur horizontalen Ausrichtung der Tabelle auf der Seite bzw. des Inhalts einer Zeile oder Zelle valign=„top|middle|bottom“ zur vertikalen Ausrichtung width und height (Angaben jeweils in Pixel) legen die Breite bzw. Höhe der Tabelle bzw. einer Reihe oder Zelle fest (width gilt sinnvollerweise nicht für eine Reihe). bgcolor=„#0000DF“ legt eine Hintergrundfarbe für die Tabelle, Reihe oder einzelne Zelle fest → 6. Farben im Internet background=„bildchen.jpg“ Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 6 von 20 legt für die ganze Tabelle oder für eine einzelne Zelle ein Hintergrundbild fest Für komplexere Tabellen können Zellen waagerecht oder senkrecht zusammenge- fasst werden, und zwar werden mit colspan=„2“ zwei nebeneinander liegende Zellen zu einer zusammengefasst, während rowspan=„2“ zwei untereinander (in zwei Reihen) liegende Zellen zusammenfasst. Achtung: Die so zusammengefasste Zelle zählt quasi „doppelt“! D.h. bei Verwendung eines der beiden Parameter muss die nächste Reihe bzw. Spalte eine Zelle weniger enthalten, damit die Gesamtzahl der Zellen stimmt! 10. Wie werden Listen in HTML erzeugt? Grundsätzlich gibt es zwei Sorten von Listen in HTML: Mit
Bei unsortierten Listen steht ein Blickfangpunkt (bullet) am Beginn der Zeile, dessen Aussehen mit dem Parameter type=„circle|disc|square“ als Kreis (bzw. Punkt oder Viereck) bestimmt werden kann. Eine nummerierte Liste kann über den Parameter type=„1|I|i|A|a“ mit arabischen oder römischen Zahlen oder mit Buchstaben gegliedert werden – letztere beide jeweils klein oder groß. Außerdem kann mit start=„1“ festgelegt werden, dass die Zählung der Liste bei 1 (oder eben einer anderen Zahl) beginnt. Einträge in die Liste werden als Listenelemente (list item) mit 11. Wie werden Links erstellt? Eines der wichtigsten Merkmale von HTML ist die Fähigkeit, über Verknüpfungen (= links) Elemente in eine Seite einbinden zu können, bzw. Seiten untereinander zu verknüpfen. Der dazu nötige Befehl lautet anchor (= Anker), abgekürzt Die meist verwendete Form nutzt den Anker als Verweis auf eine Hypertext- Referenz, abgekürzt href: Hier gibt‘s die Listen Mit dem gleichen Befehl, der in diesem Beispiel auf eine andere Datei im gleichen Projektverzeichnis verweist, können auch andere HTML-Dateien im WWW verknüpft werden: Die Seiten der KFH Der zusätzliche Parameter target=„_blank“ erzwingt, dass ein neues Browser-Fenster geöffnet wird, um die gewünschte Datei anzuzeigen; ohne diesen Parameter würde die bestehende Datei im geöffneten Browserfenster „überschrieben“. Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 7 von 20 Darüber hinaus kann auch ein bestimmter Punkt auf der Seite angesprungen wer- den, und zwar indem ein Verweisname (benannter Anker) festgelegt wird: legt ein Sprungziel in einer Datei fest, das dann wie folgt erreicht werden kann: Mit Hier geht‘s zum Ziel wenn es sich um ein Ziel in der gleichen Datei handelt, bzw. über Hier geht‘s zum Ziel wenn es sich um ein Ziel in einer anderen Datei im Web handelt. Ein Sonderfall ist die Verknüpfung mit einer Mailadresse: Hier können sie mir mai- len Wenn eine Mail-Software auf dem Rechner des Betrachters korrekt installiert ist, öffnet ein Klick auf diesen Link das Email-Programm des Anwenders und erstellt da- rin eine neue Mail, in der die Mailadresse des Empfängers bereits eingetragen ist. Die Angabe des Parameters ?subject=Nachfrage ist optional und gibt zusätzlich einen Betreff (= subject) für die Mail vor. Zur Vermeidung von Spam (um Harvestern keine Angriffsfläche zu bieten) sollten Sie NIE- MALS Maildressen als verlinkten Klartext in HTML-Code notieren. Benutzen Sie statt des- sen eine nicht direkt ausführbare Umschreibung wie andreas.buesch(at)kh-mz(punkt)de die der Nutzer dann in sein Mailprogramm kopieren kann, wobei die Angaben im Klammern durch die bekannten richtigen Zeichen ersetzt werden müssen. Eine komfortablere Lösung wie http://www.derwok.de/service/email_stopspam/ ar- beitet mir Javascript und lässt sich leicht in jede Website integrieren. 12. Wie kommen Bilder auf eine Webseite? Ein wesentliches Element des WWW sind visuelle Gestaltungselemente – Fotos, Gra- fiken, Formen, Linien etc. Der Nachteil solcher Elemente ist, dass sie die Datenmenge, die mit einer Seite im Web übermittelt werden muss, signifikant erhöhen. Daher sollte sich jede/r Webde- signerIn darum bemühen, Bilder so gut wie möglich zu komprimieren. Die wichtigsten Grafik-Formate im Web sind die verlustbehaftet komprimierenden GIF und JPEG sowie das verlustfrei komprimierende PNG. • Das Format GIF (graphics interchange format) wurde in den 1980er Jahren von der Firma Compuserve entwickelt, um die Datenmenge in ihrem Netzwerk zu reduzie- ren. Größter Vorteil dieses Formats (bzw. eines Unterformats von GIF) ist die Fä- higkeit, eine Farbe als transparent zu definieren, so dass sie beim Aufruf des Bil- des nicht angezeigt wird, sondern statt dessen der Hintergrund der Seite, auf der das Bild steht. Außerdem können in GIF mehrere Teilbilder abgespeichert werden, die nacheinander dargestellt werden und so den Eindruck eines bewegten Bildes (animated gif) ergeben. Allerdings ist GIF beschränkt auf max. 256 Farben und kann daher kaum Abstufungen und Farbverläufe darstellen, wie sie in Fotos häufig vorkommen. Dagegen hat es deutliche Vorteile gegenüber JPEG, wenn es darum geht, klare Kontraste abzubilden, z.B. in Linien-Grafiken, Comics etc. • JPEG wurde von der Joint Photographic Experts Group entwickelt und ist das sinn- vollste Format für Fotos, Graustufenzeichnungen u.ä. im Web. Die – in der Stärke einstellbare – Kompression fasst benachbarte ähnliche Bildanteile zusammen, mit den bekannten Nachteilen, dass Vergrößerungen oder Ausdrucke stark kompri- mierter JPEG-Dateien deutliche Artefakte aufweisen. Am Bildschirm fällt dies aber meist nicht so stark auf, da er lange Zeit nur eine Auflösung von 72 pixel/inch (Bildpunkte pro 2,54cm Bildschirm) bot. Erst aktuelle Smartphones und Tablets sowie High-End-Notebooks weisen eine deutlich höhere Auflösung auf. (Zum Ver- gleich: Farbtintenstrahl-Drucker haben heute üblicherweise eine Auflösung von Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 8 von 20 300 bis 600 dpi, übliche Laserdrucker gehen bis 2400 dpi, Offset-Druckmaschinen liegen bei ca. 2500 dpi). • Portable Network Graphics ist das jüngste Format und arbeitet im Gegensatz zu den beiden anderen Formaten mit verlustfreier Kompression, bietet also den bes- seren optischen Eindruck. I.d.R. ist die Datei bei gleichem Bildmaterial dafür grö- ßer – hier ist also jeweils eine Abwägung Qualität vs. Dateigröße (Datenmenge) zu treffen. Um ein gescanntes Bild, das i.d.R. als TIFF-Datei vorliegt, oder ein Bild einer höher- wertigen Digitalkamera (TIFF oder RAW) in das gewünschte Format zu bringen, muss es in einem Bildbearbeitungsprogramm konvertiert werden. Der Standard dafür ist Adobe Photoshop, aber auch kostenlose Bildbetrachtungs-Programme wie Irfan View oder XNView bieten bereits rudimentäre Funktionen zur Bildbearbeitung. Dabei sollte dann auch die angestrebte Größe festgelegt werden - wenn ein zu klei- nes Bild vergrößert werden muss, kommen die Nachteile der Kompression zum Tra- gen; wenn ein zu großes Bild verkleinert werden muss, werden nur unnütze Daten- mengen durch‘s Netz bewegt. Sollten Sie im Ausnahmefall eine Bildgröße nachträglich in HTML definieren müs- sen, geht dies über die Parameter width oder height – wenn Sie beide benutzen, müssen sie die Größe präzise umrechnen, da es sonst zu Verzerrungen des Bildinhalts kommt. Besser: nur einen von beiden Parametern nutzen und den anderen löschen! Bei der Wahl der „richtigen“ Bildgröße ist zu beachten, dass es mittlerweile eine gro- ße Vielfalt von Monitor- bzw. Screengrößen und –formaten gibt. Aus Sicht der Nutz- barkeit (usability) sollten Nutzer nicht ständig scrollen müssen, um die Seite be- trachten zu können. Aber auch das gesamte Design der Website sollte auf möglichst vielen Geräten ohne Probleme einerseits und Platzverschwendung andererseits nutzbar sein. Zur Orientierung eine kurze Übersicht über die gebräuchlichen Abmessungen (diver- se andere und Zwischengrößen, vor allem bei Notebooks, Smartphones und Tablets sind möglich; (s. dazu ausführlich http://de.wikipedia.org/wiki/Bildauflösung ): Bezeichnung Breite (px) Höhe Seitenver- typisch für … (px) hältnis QVGA 240 320 3:4 3,5“ TFT (PDA/Smartphone) VGA 640 480 4:3 Mittelklasse-Smartphone; Röhren- Monitore NTSC 720 480 3:2 div. (TV US) PAL 768 576 4:3 div. (TV Europa, DVD-Video) SVGA 800 600 4:3 15“ CRT (Röhre), Smartphones 960 640 3:2 Apple iPhone 4/4S (326 dpi) XGA 1024 768 4:3 15“ LCD/TFT, 17“ Röhre, Netbooks, Tab- lets HDTV 1280 720 16:9 div. LCD-TV („HD ready“, 720p), Samsung Galaxy S III (306 dpi) SXGA 1280 1024 5:4 17“ LCD/TFT, 19“ Röhre UXGA 1600 1200 4:3 19“-21“LCD/TFT HDTV 1920 1080 16:9 div. Plasma- / LCD-TV („full HD“, 1080p) WUXGA 1920 1200 16:10 24“TFT 4K 4096 3072 4:3 digitale Highend-Monitore und Kino Mit folgendem Befehl wird ein Bild in den HTML-Code eingefügt (die meisten Edito- ren unterstützen drag and drop oder bieten eine entsprechende Schaltfläche): Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 9 von 20 Den Parameter alt sollten Sie immer mit einer sinnvollen Kurzbeschreibung versehen, damit Menschen, die keine Bilder sehen können oder wollen dennoch eine Informa- tion über den Seiteninhalt bekommen. Wenn ein Bild als link fungieren soll, wird die img-Angabe als „Betreff“ in einen link eingefügt: 13. AV-Daten Theoretisch ist es möglich, jede Audio- oder Videodatei als link in eine Seite einzu- binden: Das Problem eines solchen Vorgehens: wie kann ich als Webdesigner angesichts ei- ner Vielzahl von Audio- und Video-Formaten sicherstellen, dass diese auf dem Sys- tem des Users auch dargestellt bzw. abgespielt werden können? Hat der Betrachter überhaupt eine geeignete Software? Und die passenden Codecs für die verschiede- nen AV-Formate? Bestenfalls erhält der Nutzer bei diesem Befehl sonst einen Down- load-Link, schlimmstenfalls passiert gar nichts. Um AV-Daten in eine HTML-Seite einzubinden, gelten ähnliche Befehle wie für Fotos bzw. für links – allerdings bisher mit etlichen Einschränkungen, da es keinen für alle Browser geltenden Standard gab. Dies versucht erst HTML 5 mit zwei neuen Elemen- ten durchzusetzen: audio und video Allerdings ist bei der Verwendung der entsprechenden Elemente immer noch zu prüfen, welche Browser-Versionen diese unterstützen. Außerdem ist das Problem der Codecs nach wie vor nicht gelöst, zumal unterschiedliche Browser(-versionen) unterschiedliche Formate unterstützen. Daher empfiehl es sich, im Zweifelsfall meh- rere Formate parallel zu notieren, z.B.: Grundsätzlich ist jedoch zu überlegen, ob eine Seite überhaupt zwingend mit ent- sprechendem Material „belastet“ werden muss (Datenmenge; daraus folgender Traf- fic, der aus ökonomischen Gründen dem Nutzer nicht aufgezwungen werden sollte). Nervige Spielereien wie Selbststartende Audiodateien im Hintergrund sind nach Usability-Grundsätzen in jedem Fall zu vermeiden! 14. Wie strukturiere ich eine Website? Anders als im Desktop Publishing (DTP; Erstellen von Druckvorlagen am PC) gibt es bei HTML keine Möglichkeit eines exakten (pixelgenauen) Layouts. Vor HTML 4 wur- den daher teilweise Tabellen und andere „Tricks“ genutzt, um die Elemente einer Webseite strukturiert und übersichtlich anzuordnen. Mit HTML 4 in Verbindung mit CSS bekam das Element Unterteilung (division) eine herausragende Bedeutung, das in Verbindung mit einer eindeutigen Bezeich- nung „id“ gezielt ansprechbare Bereiche einer Seite ermöglichte: HTML 5 bringt nun demgegenüber die neuen Elemente section, nav, article, aside, hgroup, header und footer die nicht nur „leere“ Bereiche sind, sondern syntaktisch auch angeben, welcher In- halt in dem entsprechenden Bereich zu finden ist, z.B. nav für ein Menü oder footer für einen Seitenfuß. Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 10 von 20 15. CSS – verschachtelte Gestaltungsangaben Ab HTML Version 4 ist die (projektweite) Festlegung von Formaten in einem cascading style sheet (CSS) verbindlich vorgeschrieben; Angaben zu Farben, Schriftgrößen und -arten bei Ab- sätzen oder anderen Elementen sind damit „unerwünscht“ (deprecated). Die wesentlichen Vorteile dieser Vorgehensweise sind • Als Programmierer brauchen Sie notwendige Änderungen für das gesamte Projekt nur an einer zentralen Stelle vornehmen. • Der Browser „erfährt“ durch die Einbindung der entsprechenden Seite im Datei- kopf frühzeitig, wie er die nach und nach zu ladenden Inhalte der Seite darzustel- len hat – das Laden geht schneller und die Darstellung wird früher korrekt aufge- baut. Eine CSS-Datei ist eine „nackte“ (plain) Textdatei und muss mit der Endung .css (nicht mit der Endung .html) abgespeichert werden! D.h. für das erstmalige Erstellen einer css-Datei müssen Sie ein leeres Dokument erstellen; eine vorhandene Datei können Sie je nach Editor verknüpft mit der zugehörigen HTML-Seite oder einzeln bearbeiten; u.U. können Sie die einzelnen CSS-Formate auch direkt aus der HTML- Datei heraus definieren oder bearbeiten. Damit die Angaben in einer css-Datei für eine HTML-Seite wirksam werden, muss die CSS-Datei mit folgendem Befehl im Head-Bereich der Seite verknüpft werden : ...Wenn die css-Datei schon besteht und das richtige Verzeichnis dafür in den Pro- jekteinstellungen des Editors eingetragen ist, kann die gewünschte CSS-Datei schon beim Erstellen der Seite ausgewählt werden. Selbstverständlich können im Rahmen eines Projektes für verschiedene Bereiche auch verschiedene CSS-Dateien zum Einsatz kommen. In dieser Datei wird das Aussehen aller benötigten HTML-Elemente über Selektoren in CSS in einem festgelegten Format bestimmt. Welche Elemente bzw. Eigenschaften Sie dabei nutzen können, hängt u.a. von der verwendeten CSS-Version ab und der Frage, welcher Browser welche Version unterstützt.3 Eine Übersicht dazu bietet z.B. http://caniuse.com/ Ein Beispiel für die Formatierung aller Absätze und aller Listen eines Projektes (die Einrückungen dienen nur der Übersichtlichkeit; alle Angaben können auch in einer Zeile notiert werden): p,ul,ol,li { font-family:Times New Roman,Garamond; font-size:13pt; line-height:15pt; } Mehrere Elemente können also durch Kommata getrennt zusammengefasst werden. Solche zusammenfassenden Angaben – z.B. gleiche Schrift für alle Überschriften – 3 Im Gegensatz zu HTML (und CSS bis Version 2.1) gibt es keine eine, umfassende Spezifikation aller Ele- mente. Mit CSS 3 wurde vielmehr eine Aufteilung in verschiedene „Module“ (z.B. für Bilder, Rahmen, Hin- tergrund, die Vererbung von Elementen und das Box-Modell) eingeführt, die unterschiedlich weit entwi- ckelt sind. Die Entwicklung von CSS 4 wurde eingestellt, da die einzelnen Module unterschiedliche Versi- onen haben können. „CSS“ ist also alles nach CSS 2.1. (s. http://www.xanthir.com/b4Ko0) Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 11 von 20 können durch weitere Angaben für die einzelnen Absätze ergänzt werden. Grund- sätzlich „gilt“ die jeweils letzte Angabe zu einem Selektor in einer CSS-Datei: h1,h2,h3 { font-family:Avantgarde,Arial,Sansserif; } h1 { font-size:24pt; color:#2E0F88; } h2 { font-size:20pt; font-weight: bold;} h3 { font-size:14pt; font-weight: bold; } * ist ein Universal-Selektor, der für alle Elemente in einem Bereich gilt, z.B. für eine rote Linie um alle Elementen eines Bereichs namens content (s. 15.): #content * { Border: 1px solid #f00 } Neben diesen Selektoren, die unmittelbar HTML-Elementen entsprechen, gibt es auch noch Klassen (class), IDs und „Pseudo-Selektoren“: • Class: Mit der Formatierung .small { font-size:8pt; } weisen Sie allen (beliebigen!) Elementen in HTML, die den Parameter „class=small“ haben diese Schriftgröße zu. Statt dieser allgemeinen Klasse können Sie auch gezielt Klassen für bestimmte Ele- mente definieren, z.B. img.links { float: left; margin-right: 25px; margin-bottom: 12px; } für ein linksbündiges Bild mit einem rechten und unteren Rand von 25 bzw. 12 Pixel. Alle übrigen Bilder Ihres Projekts, denen Sie nicht diese Klasse zuweisen, werden auch nicht damit formatiert. Merke: class-Angaben in HTML mit „class=name“ und dazu passend in CSS mit „.name“ • IDs: Damit können Sie gezielt Elemente oder Bereiche (divisions; div, s. Kap. 15, S. 9) in HTML formatieren. Merke: ID-Angaben in HTML mit „id=name“ und in CSS mit „#name“ • Pseudo-Selektoren beziehen sich auf Elemente, die als solche nicht eigens in HTML vorkommen, aber einen wichtigen und wahrnehmbaren Inhalt darstellen, z.B. der Unterschied zwischen bereits besuchten (angeklickten; visited) und noch nicht besuchten links. Beide werden in HTML gleich definiert, vom Browser aber unterschiedlich dargestellt: Standardmäßig sind besuchte links lila, noch nicht be- suchte aber blau gefärbt. Mit a:link { color: #EE0000; text-decoration: none; } a:visited { color: #EEAAAA; text-decoration: none; } a:hover { color: #EE0000; text-decoration: underline; } Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 12 von 20 a:active { color: #0000EE; text-decoration: underline; } können Sie diese unterschiedlichen „Zustände“ von links bzw. deren Anzeige ge- zielt formatieren. Das „kaskadierende“ bei CSS bedeutet, dass Eigenschaften von übergeordneten Ele- menten auf nachgeordnete „vererbt“ werden, solange diese nicht eigens entspre- chende Eigenschaften zugewiesen bekommen. Dies gilt es vor allem bei (relativen) Größenangaben zu beachten! 16. Wie werden Farben im Internet angegeben? … sind immer als Angabe von R (Rot), G (Grün) und B (Blau) definiert, und zwar durch 1 Byte je Farbe (in hexadezimalen Werten; s.u.) 1 Byte = 8 bit = 28 = 256 „Stufen“ auf einer Farbskala von ganz hell bis ganz dunkel. Diese Werte werden zusammengeschrieben und als Wert eines Parameters mit füh- rendem # angegeben, z.B. für „alles aus“ = schwarz: „#000000“ oder „alles an“ = weiß: „#FFFFFF“ Hinweis 1: Bei identischen Werten für R, G und B sind Abkürzungen zulässig, z.B. für Schwarz #000 Hinweis 2: Identische Werte für R, G und B kennzeichnen immer eine von 254 Grau- stufen zwischen Schwarz („Stufe 0“) und Weiß („Stufe 255“) Zum Verständnis eine kleine Umrechnungstabelle; in der Regel nimmt der HTML- Editor Ihnen aber diese Arbeit durch entsprechende Auswahlwerkzeuge (Farbfelder; Schieberegler für R, G und B mit Vorschau etc.) ab: Dezimal Hex H Z E H Z E 0 0 9 9 1 0 A 1 5 F 1 6 1 0 1 7 1 1 1 0 0 6 4 1 0 1 6 5 2 0 0 C 8 2 5 5 F F 2 5 6 1 0 0 Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 13 von 20 17. Wie erstelle ich ein Menü mit CSS? Anhand der folgenden Beispiele werden die Grundzü- ge der Formatierung (und Positionierung) von Menüs dargestellt. Zunächst das Beispiel eines einfachen, einstufigen Menüs (ohne Unterpunkte), links positioniert, zu fin- den unter www.swampmoon.net (s. Abb. 1.). Daran anschließend ein Beispiel für ein mehrstufiges (verschachteltes) Menü nach dem gleichen Schema (siehe S. 15). Der entsprechende HTML-Code (s. Abb. 2) umfasst in jedem Fall eine ungeordnete Liste, in der die einzelnen Menüpunkte wiederum als Sprungverweise ausge- zeichnet sind (beachten Sie bitte auch die Verschach- telung „von außen nach innen“!). Damit diese Liste nun als Menü formatiert werden kann, ist es notwendig zunächst einen Bereich zu be- nennen, der das Menü umfasst: In Zeile 15 findet sich dazu das Tag mit dem Pa- ; in Zeile 33 beginnt dann der eigentliche Inhalts-Bereich der Seite, wiederum mit einem diversi- on – Befehl rameter id=“Name des Bereichs“, in diesem Beispiel „me- Abb. 1: swampmoon.net - Menü nue“. In Zeile 16 bzw. 30 findet sich ein Eintrag von Dreamweaver: das Programm erlaubt es, solche wiederkehrenden Elemente einer Website in einer Art Bibliothek (library) zentral zu verwalten und Änderungen an jeder Website, die das Menü enthalten soll, damit zu vereinfachen . In Zeile 26 findet sich ein auskommentierter Menüpunkt, für den erst später Inhalte ergänzt werden sollen. Dazu wird einfach ein HTML-Kommentarzeichen eingefügt: In Zeile 31 wird der Bereich des Menüs beendet durch den Befehl Achtung: mit Blick auf Suchmaschinenoptimierung wie auf Ausgabe für Sehbehin- derte sollte der Code für das Menü am Ende einer jeden HTML-Seite, nach dem In- halt stehen! Die Reihenfolge der verschiedenen -Bereiche hat nichts mit der Reihenfolge im Code zu tun, sondern wird ebenfalls über CSS-Angaben festgelegt (vgl. Abb. 3).
Abb. 2: HTML-Code für ein einfaches Menü Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 14 von 20 Die verschiedenen Bereiche, die im HTML-Code mit angesprochen werden, müssen in CSS mit # mar- kiert werden, also in unserem Bei- spiel #menue und #content.
Zunächst wird in Zeile 17 festgelegt, wo das Menü angezeigt werden soll (in der Reihenfolge der Angaben je Zeile): es soll - fixiert auf der Seite stehen blei- ben (also nicht parallel zum Inhalt mitscrollen), - vom oberen Rand 20 Pixel Ab- stand halten - und vom linken Rand 15 Pixel Abstand. - Die Breite des Menü-Blocks be- trägt 150 Pixel. - Schriftfamilie Arial etc. - Schriftgröße 1em 4 - Der Menü-Block steht links und wird von den folgenden Elementen rechts umflossen. - „inline“ bewirkt, dass das Menü- Element keine neue Zeile bzw. einen eigenen Block erzwingt (display:block), sondern im Fließtext dargestellt wird. Diese Formatierungen gelten für das gesamte Menü, sofern nicht bei den folgenden Einträgen etwas anderes definiert wird (Vererbungsregel)! In Zeile 28 wird nun grundsätzlich die ungeordnete Liste, die unsere Abb. 3: CSS-Formatierung für das Menü aus Abb.1 Menüpunkte enthält formatiert, und zwar - ohne jegliche Blickfangpunkte (Kreis, Scheibe oder Quadrat), - ohne Rand und - ohne Abstände zu allen Seiten. In Zeile 34 beginnt schließlich die „eigentliche“ Formatierung der Menüpunkte, und zwar für alle Listenelemente, die entweder einen Anker (a:link) oder einen bereits „besuchten“ (angeklickten) Anker (a:visited) enthalten (vgl. Abb.2: andere 4 Es gibt verschiedene Möglichkeiten der Schriftgrößenangabe. Aus Designer-Sicht ist die Angabe über Pixel (px) oder typographische Punkt (pt) wünschenswert, damit die Schrift so aussieht, wie beim Ent- wurf. ABER es kann beim Webdesign im Gegensatz zum Druckbereich keine Sicherheit darüber geben, mit welcher Bildschirmauflösung welcher Browser unter welchem Betriebssystem (um nur drei Einflüsse auf die tatsächliche Darstellung der Schriftgröße zu nennen) ein Nutzer die Website betrachtet. Daher sollten entweder nur Prozentangaben oder die relative Maßeinheit em verwendet werden, da die Schriften dann auch über generelle Angaben skaliert werden können - 1em ist immer 1em, auch wenn der Nutzer seinen Bildschirm anders einstellt oder wenn im CSS durch Prozent-Angaben die gesamte Schriftgröße vergrößert oder verkleinert wird. – Der Begriff em stammt aus der Typographie und bedeutet „ein Geviert“, die Breite ist also gleich der gegebenen Schrifthöhe. Kurz gesagt: 1 em ist immer gleichbe- deutend mit 100% der Schriftgröße. Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 15 von 20 • der Rand um diesen Block (also „zwischen“ den Menüpunkten) beträgt allseits 10 Pixel • der Innen-Abstand zwischen dem Text und dem Rand um die Menüpunkte beträgt (im Uhrzeigersinn zu lesen) oben, rechts und unten jeweils 5px und links 0.5em (zu- gleich ein Beispiel für kombinierte Angabe von Werten statt vier Einzelangaben für padding-top, padding-right etc.) • Die Hintergrundfarbe ist gleich der Grundfarbe der Seite (definiert im body), ein dunkles Blau. • Die Schrift ist fett und hat eine gelbliche Farbe („viel Rot“ und „viel Grün“ ergibt Gelb) • Mittels text-decoration: none wird verhindert, dass die Links wie üblich unterstri- chen dargestellt werden. • Schließlich der Rand: 1 Pixel breit, durchgehende Linie, in beigebraun Wie an dem Menüpunkt „Die Band“ in Abb. 1 zu erkennen, gibt es in dem Menü ei- nen „hover“-Effekt, der durch das Überfahren des entsprechenden links mit der Maus ausgelöst wird. Die Erzeugung solcher Effekte mit Javascript ist vergleichsweise komplizert; in CSS werden - in diesem Beispiel - einfach die Farben für Hintergrund und Schrift ausgetauscht. Komplexere Variationen von Rändern, Abständen etc. sind selbstverständlich auch möglich. Ab Zeile 51 beginnt dann die Definition für den Inhalts-Bereich, wiederum zunächst mit der Festlegung der Position und Anzeige. 18. Menülisten mit verschachtelten Menüs (Untermenü-Punkten) Das folgende Beispiel zeigt eine Menüstruktur mit scheinbar „aufklappenden“ Untermenüs, die aus eine verschachtelten ungeordneten Liste gebildet werden. Die Grundstruktur ist dabei identisch mit Bsp. 1, so dass ich im Folgenden nur auf die Be- sonderheiten für diese Untermenüs eingehe. Der Menü-Code in HTML (s. Abb.5) enthält in Zei- le 25 noch das Logo der DGCC als Bild, was für unser Beispiel aber unerheblich ist. Das eigentliche Menü beginnt wiederum in Zeile 27 als
Abb. 5: HTML-Code zum Menü aus Abb.4 Prof. Andreas Büsch – Handout HTML 5-Grundlagen Seite 17 von 20 Das „Entscheidende“ für die Darstellung der Listen als verschachteltes Menü findet wie- derum in der CSS-Formatierung statt (s. Abb 6): Die Schriftgradangabe „100.01%“ für den gesamten umgeht ein Problem in der Darstellung mit früheren Versionen des In- ternet-Explorers.Ab Zeile 5 bis Zeile 37 entspricht die Menü-Formatierung im Grunde dem o.g. Beispiel 1. Die Farben für Schrift und Hinter- grund der Menüpunkte erster Ordnung wurden direkt den Lo- go-Farben entnommen. In Z. 22 erhalten die Menü- Punkte mit borderbottom einen unteren Rand (vergleichbar dem umlaufenden Rand im oberen Beispiel, aber eben als „Trennli- nie“ nach unten, da hier keine Abstände zwischen den Menü- punkten definiert wurden). In Zeile 39 wird mit
Diese Untermenü-Punkte erhal- ten nun in Z. 44 mit borderbot- tom wiederum einen unteren Rand. Die Linienfarbe wurde auf die Schriftfarbe der Unterpunkte abgestimmt, um einen dezenten Gesamteindruck zu erhalten. In Zeile 48 bis 51 werden dann analog zu den Menüpunkten ers- ter Ordnung die Unterpunkte formatiert: für alle |
|---|