24. Oktober 2017 in Tutorials
In unserem Tutorial „HTML für Einsteiger“ haben wir Ihnen bereits einige Grundzüge dieser Auszeichnungssprache vermittelt, etwa das Setzen von Überschriften, Bildern oder Hyperlinks. Mit Hilfe dieser Befehle kann eine Website grundlegend strukturiert werden, für eine wirklich gute Übersichtlichkeit braucht es aber weitere Elemente. Mit verschiedenen Farben wird das Auge des Betrachters auf die richtigen Bereiche gelenkt, mit Hilfe von Tabellen lockern Sie das Design ebenfalls auf und bieten Ihren Besuchern optisch ein angenehmeres Gesamterlebnis.
Wie Sie diese Elemente per HTML-Code auf Ihrer Website implementieren, erklären wir Ihnen in unserem heutigen Blogbeitrag.
Es gibt verschiedene Voreinstellungen, mit denen sich Felder, deren Zellwert eine bestimmte Grenze unter- oder überschreitet, optisch hervorheben lassen. Für den Fall, dass Sie Zellen formatieren wollen, sich die Bedingung aber nicht auf ihren Inhalt bezieht, wenden Sie statt dieser Voreinstellungen eine eigene Formel an.
In unserem Beispiel, einer Bestandsliste, sollen diejenigen Artikel hervorgehoben werden, von denen noch mindestens 250 auf Lager sind:
Mit Hilfe von HTML-Farbcodes lassen sich alle möglichen Farben erstellen und in das Designkonzept einer Website eingliedern. Der Hintergrund kann dabei genauso angepasst werden wie die Textfarbe oder der Farbton, in dem Links vom Browser angezeigt werden.
HTML-Farbcodes bestehen aus sechs Stellen und einer einleitenden Raute, sehen also etwa so aus:
Diese auf den ersten Blick vielleicht willkürlichen Kombinationen folgen äußerst strengen Regeln. Die Buchstaben stehen dabei für Zahlen, diese werden aber im Hexadezimalsystem angegeben. FF, die höchste Sättigungsstufe, steht im gängigen numerischen System für 255.
Unterteilen lassen sich die Farbcodes in jeweils drei Zeichenpaare, mit deren Hilfe die jeweilige Intensität der Grundfarben Rot, Grün und Blau angegeben werden. Mit diesem RBG-System lassen sich alle Farben darstellen. „00“ ist dabei der niedrigste Wert, „FF“ der höchste.
Unser erstes Beispiel, #FF0000, steht demnach für ein sehr kräftiges Rot, während #00FF00 ein reines Grün erzeugt. #FFFF00 kombiniert diese beiden Farben, das Resultat ist ein sattes Gelb.
Anker Werbeblock
In unserem Beispiel soll ein gelber Text auf rotem Hintergrund erscheinen. Im Editor sieht das Ganze so aus:
„Body Style“ in der dritten Zeile legt die Hintergrundfarbe fest – in diesem Fall handelt es sich eben um ein kräftiges Rot. „Span Style“ legt eine Zeile darunter die Textfarbe fest. Der besseren Lesbarkeit wegen haben wir zudem die Schriftgröße mit „Font Size“ auf das Maximum von 7 erhöht. Speichert man diese Datei nun mit der Endung .htm und öffnet sie per Doppelklick, wird die Webversion im Standardbrowser angezeigt:
Wollen Sie einen Link in einer anderen Farbe setzen, geht das selbstverständlich ebenfalls. Wir haben uns für Blau entschieden, der entsprechende Code sieht folgendermaßen aus:
Zur Erklärung:
So sieht die fertige Datei im Editor aus:
Hinweis: Mit „p“ haben wir einen Absatz eingefügt, mit „h2“ die Größe geändert, indem wir den Linktext als Überschrift formatiert haben. Als Website sieht die Datei folgendermaßen aus:
Es gibt neben den Farbcodes noch eine weitere Möglichkeit, eine Website per HTML bunt zu gestalten, nämlich die Farbnamen zu verwenden. Das Prinzip ist eigentlich genau das gleiche, nur dass eben statt dem Code der Name eingefügt wird. Blau lässt sich also auf zwei verschiedenen Arten darstellen:
Nach diesem Muster funktionieren auch alle anderen Farben. Im Internet gibt es zahlreiche Tabellen, anhand derer Sie sehen können, wie die Farbe heißt, die Sie verwenden möchten.
Um eine Website mit viel Inhalt übersichtlich zu gestalten, bietet es sich an, mit Tabellen zu arbeiten. Sie sind als Layout-Elemente zwar nicht mehr so beliebt wie noch vor einigen Jahren, haben aber einen großen Vorteil: Sie machen Informationen auf einen Blick verfügbar, und man muss sich nicht mühsam durch den Fließtext „kämpfen“.
Dabei kann man per HTML genau festlegen, wie viele Spalten es geben soll und wie die Hintergrundfarbe aussehen soll, damit sie optisch ins Gesamtkonzept der Website passt.
In unserem Beispiel gestalten wir eine sehr übersichtliche Tabelle, die dennoch alle wichtigen Elemente enthält. In HTML sieht sie folgendermaßen aus:
Zur Erklärung:
Im Browser sieht das Ergebnis so aus:
Die Anzeigensprache HTML ist ein idealer Weg, um erste Schritte im Webdesign zu gehen. Schon mit ein wenig Einlesen ist es kein Problem mehr, ein ansprechendes Grunddesign zu entwickeln, das es dem Leser einfach macht, die Inhalte einer Website schnell zu überblicken und das zu finden, was er sucht. Mit Farbcodes und Tabellen kann das Gesamtbild aufgelockert werden – und das sehr individuell. Für den Einstieg ist diese Anzeigensprache also bestens geeignet.
Sie kennen die Trainerstunde nur vom Tennis, Golf oder anderen Sportarten? Dabei liegt es doch nahe, dass auch bei MS Office (Excel, Teams, …) oder anderen Computerthemen (Windows, Photoshop, Facebook,…) ein Experte, den man fragen kann, der einem die spezielle Sache erklärt, von großem Nutzen sein kann.
Wir unterstützen Sie bei Ihrer individuellen Aufgabenstellung. Gemeinsam mit dem online Trainer lösen Sie Ihr Problem und erlernen dabei wichtige Kniffe in der jeweiligen Anwendung.
Wir erklären Ihnen in einer Schritt-für-Schritt Anleitung, wie Sie mit wenigen Mausklicks Kuchen-, Balken- und…
Mit Hilfe gelungener PowerPoint-Animationen in Ihren Präsentationen können Sie die Aufmerksamkeit Ihres Publikums hervorragend auf…
Briefe, Artikel, Hausarbeiten - wenn Sie am PC einen Text schreiben, verwenden Sie dafür höchstwahrscheinlich…
Der SVerweis und große Datenmengen gehören einfach zusammen. Niemand hat schließlich Lust 300 oder 400…
Mit einer Pivottabelle lassen sich wesentliche Werte aus großen Datenmengen filtern und analysieren. In einem…
Das Tabellenkalkulationsprogramm Excel hat einen großen Funktionsumfang, den Sie mithilfe von VBA (Visual Basic für…