Webmaster Tipps: Gestaltung und Programmierung (Seite 3)

Um die Listen-Punkte oder Bullet-Points einer <ul> Liste einzufärben, muss man auch die Textfarbe der Liste ändern. Möchte man dies nicht, kann man mit CSS eigene, andersfarbige Listen-Punkte definieren: Mit dem Befehl "li::before" definiert man ein Element, dass vor dem <li> Element angezeigt wird: Dies ist ein Listen-Punkt, dessen Farbe und Größe man per CSS definieren kann. Damit nicht zwei Bullet-Point Punkte angezeigt werden, muss ... Weiterlesen...

Ein Hintergrundbild muss nicht zwingen ein schönes Foto sein, das tatsächlich im Hintergrund angezeigt wird: Stattdessen lässt sich mit der CSS Eigenschaft "background-image" auch ein Button erstellen: Dies ist zum Beispiel ein klickbares DIV Element, dass statt einem IMG Bild ein Hintergrundbild enthält. Das muss aber nicht zwingend den ganzen Bereich ausfüllen, sondern kann auch als ein Icon mittig in dem Element platziert werden: Das ist mit ein... Weiterlesen...

Wer Webseiten mit HTML und CSS programmiert, kennt das Problem bestimmt: Wenn man die Größe eines Elements mit "width" und "height" angibt, werden die Werte für den Rahmen "border" und den Innenabstand "padding" noch hinzu addiert. Das kann oft störend sein, wenn man eine feste Breiten- oder Höhen-Vorgabe hat. Wer trotzdem nicht auf padding und border verzichten möchte, kann einen einfachen Trick nutzen.   Box Sizing: Padding und Border von ... Weiterlesen...

iFrames sind praktische kleine Erfindungen in HTML: Damit lassen sich Inhalte von einer anderen Seite auf der aktuellen Seite anzeigen. Das zeigen wir zum Beispiel in diesem Smart Home Artikel: Während auf dem Bildschirm die Übersicht des Smart Home Servers angezeigt wird, sorgen kleine iFrames oben links und rechts dafür, Datum und Uhrzeit anzuzeigen. <iframe name="zwei" id="zwei" src="zwei.html"></iframe> Ein iFrame sollte einen Name... Weiterlesen...

Die HTML Tags für Audio- und Video besitzen eigentlich ein Attribut für die Lautstärke: Mit "volume" lässt sich die Lautstärke zwischen 0.1 und 1 festlegen: Dieses Attribut wird aber zur Zeit von keinem Browser unterstützt. Das macht aber nichts: Die Lautstärke von Audio- und Video-Inhalten einer Webseite lässt sich auch per Javascript steuern! Tipp: So baut man Audio-Elemente und Musik in die Webseite ein! Dazu greift man direkt auf die ... Weiterlesen...

Statt einem transparenten oder halbtransparentem Hintergrundbild kann man mit CSS auch eine mehr oder weniger stark transparente Hintergrundfarbe mit background-color wählen: Die verdeckt dann ein Hintergrundbild nur leicht: So ist sowohl der Hintergrund als auch Text im Vordergrund noch zu erkennen. Statt der sonst üblichen RGB-Werte im HEX-Format gibt man diese als RGBA an: Neben den drei RGB-Farbwerten gibt der letzte Wert die Transparenz an. Dies ... Weiterlesen...

SymLinks, auch Soft-Links oder symbolische Links genannt, sind eine praktische Funktion unter Linux: Wie die Verknüpfung unter Windows oder der Alias unter macOS verweisen sie auf eine Datei oder ein Verzeichnis: Das hilft, um nicht gleiche Kopien von Daten an mehreren Stellen zu haben. Einen Symlink erstellt man ganz einfach: Hierbei ist es egal, ob es sich um einen Link auf eine Datei oder ein Verzeichnis handelt: ln -s /media/pi/USB/text.txt text... Weiterlesen...

Bei den Dateinamen von Webseiten, bei Bildern oder verlinkten Dokumenten gibt es einige Regeln zu beachten: Da der Webmaster nicht weiß, auf welchem Betriebssystem der Nutzer die Webseite später anschaut, sollte man Sonderzeichen vermeiden. Das ist auch schon auf dem Webserver wichtig: Dateien mit Umlauten und Sonderzeichen, die unter Windows funktionieren, können auf dem Linux Server Probleme verursachen. Dateinamen lassen sich aber auch für die Such... Weiterlesen...

Der ALT-Tag bei Bildern nicht nur für Suchmaschinen wichtig: Er hilft auch bei Fehlern im Webdesign! Die Bilder auf Webseiten lassen sich mit verschiedenen zusätzlichen Attributen versehen: Zu den wichtigsten gehören ALT und TITLE. Das ALT Attribut (kurz für "Alternate") erlaubt es, einen alternativen Text anzugeben: Dieser wird dann angezeigt, wenn das Bild nicht geladen werden konnte. Das ist gerade bei Dateiproblemen wichtig: So sieht man direkt,... Weiterlesen...

Wenn eine Webseite unter der Adresse https://webseite.de und https://www.webseite.de zu erreichen ist, kann das ungünstige Auswirkungen bei den Suchmaschinen haben: Unter Umständen werden dann manche Seiten mit, andere ohne das "www" in der Adresse (URL) indiziert. Auch bei den eingehenden Links kommt es dann darauf an, worauf der andere Webmaster verwiesen hat. Die Lösung ist einfach: Man sollte sich für eine Adresse (zum Beispiel mit "www") en... Weiterlesen...

Wenn der Browser statt der eigenen Webseite plötzlich eine weiße, leer Seite anzeigt, ist meist ein PHP Fehler Schuld daran. Bei den meisten Servern kann der Administrator einstellen, ob die PHP Fehlermeldungen angezeigt werden: Wird dies verhindert, zeigt der Webserver eine leere, weiße Seite an statt der eigentlichen Webseite.   Weiße Webseite beheben: PHP Fehler anzeigen Um die leere, weiße Webseite zu beheben, muss man den PHP Fehler f... Weiterlesen...

PHP Notice und Warning abschalten: Damit zeigt man die Webseite ohne Fehlermeldungen an! Wenn ein PHP Skript Fehler enthält, gibt es in der Regel einen Hinweis aus: Je nach Art des Fehlers ist das ein "Notice", eine "Warning" oder ein "Error". Wenn die Ausgabe der Fehlermeldungen nicht abgeschaltet ist, kann die Ausgabe aber beim Testen störend sein. Der beste Weg ist immer, den Fehler zu prüfen und zu beheben. Für kurze Demonstrationen lässt sich die... Weiterlesen...

Mit der CSS-Eigenschaft "box-shadow" lassen sich ganz einfach Schatten zu einem Objekt hinzufügen: Dazu braucht man neben der Farbe nur die Größe und sowohl die vertikale als auch die horizontale Position. So lässt sich der Schatten auch nur nach unten positionieren, ohne eine Verschiebung nach rechts oder links! Der Code für einen hell-grauen Schatten mit nur leichtem Versatz sieht also so aus: box-shadow:1px 1px 5px #333333; Der erste Wert ... Weiterlesen...

Für manche Web-Projekte ist es praktisch, den Mauszeiger zu verstecken: Nicht um den Besucher zu ärgern, sondern um ihn nicht zu verwirren. Bei einem Touch-Screen stört der Mauszeiger, da man die Elemente mit dem Finger antippt. Das ist dann praktisch, wenn man eine "Kiosk-Anwendung" programmiert, bei der der Nutzer die Eingaben nur über den Bildschirm machen soll. Mit CSS lässt sich der Mauszeiger ganz einfach ausblenden: Hier gibt man dem Wer... Weiterlesen...

Mit HTML5 lassen sich auch Videos ganz einfach in Webseiten einbinden. Man braucht dazu jetzt weder Flash noch externe Player im iFrame: HTML5 hat einen eigenen Video-Tag, mit dem man Videos ganz einfach in die Webseiten einbauen kann. Neben dem Video selbst kann man auch verschiedene Option mit angeben: Etwa ob das Video automatisch gestartet oder stumm sein soll, oder ob man Player-Buttons anzeigen möchte. Außerdem kann man das Video per JavaScript... Weiterlesen...