Kategorie: HTML/CSS
Auf jeder gewerblichen Webseite befinden sich die Adressdaten der Firma, zu der die Webseite gehört. Die Daten können auf verschiedene Weise durch HTML-Code dargestellt werden. Im folgenden Artikel wird kurz beschrieben, worauf besonders geachtet werden sollte, damit der Browser die Kontaktdaten korrekt anzeigt.
Es gibt mit address ein speziell für Adressen gedachtes logisches HTML-Element, daher sollte es auch verwendet werden. Der Text innerhalb dieses Elements wird standardmäßig kursiv dargestellt, was von vielen als optisch unpassend empfunden wird und der Grund dafür ist, dass dieses HTML-Element von vielen Webentwicklern vermieden wird. Mit einer einzigen Zeile CSS-Code kann die kursive Schriftart jedoch leicht in eine normale Schriftart umgeändert werden.
<address> Max Mustermann <br/> Musterstrasse 123 <br/> 98765 Musterstadt <address>
Diesen CSS-Code hinzufügen und die Anschrift wird in normaler und nicht in kursiver Schrift dargestellt:
address {
font-style: normal;
}
Max MustermannWird mailto im a-Tag hinzugefügt, öffnet sich beim Klick auf diesen Link sofort das Standardmailprogramm des Users mit der hinterlegten Email-Anschrift als Empfänger und der Benutzer kann sofort die korrekte adressierte Email schreiben. Auf den meisten Seiten findet sich nur diese Minimalform des mailto Befehls, allerdings kann diese Funktion noch um einige durchaus nützliche Elemente erweitert werden.
<a href="mailto:info@einfache-internetseiten.de">Email an den Autor</a>
Ausprobieren: Email an den Autor
Es ist unter Umständen sinnvoll, direkt einen Betreff vorzugeben, besonders falls man auf mehreren Unterseiten seiner Webpräsenz einen mailto-Kontaktlink eingebaut hat. So vermeidet man Missverständnisse, auf einer Angebotsseite könnte man direkt den Betreff Angebotsanfrage einbauen. Oder zum Beispiel auf dieser Seite, gleich den Betreff „Kontaktdaten auf der Homepage mit HTML“ anhängen, dass direkt verständlich wird, um was es in der Anfrage geht.
<a href="mailto:info@einfache-internetseiten.de?subject=Kontaktdaten mit HTML">Email an den Autor</a>
Ausprobieren: Email an den Autor mit Betreff
Möchte man die Email in CC noch an andere Empfänger schicken, gilt folgende Syntax:
<a href="mailto:info@einfache-internetseiten.de?cc=abc@web.de">Email an den Autor</a>
Ausprobieren: Email an den Autor
Dadurch kann eine Email an mehrere Empfänger geschickt werden.
Durch diesen HTML-Code wird die Telefonnummer auf dem Smartphone direkt anklickbar gemacht und muss nicht mehr extra gewählt werden
<a href="tel:+49815123456">0815 123456</a>
Für deutsche Telefonnummer muss immer ein +49 als Ländervorwahl vorangestellt werden, die 0 der Vorwahl fällt weg und die Ziffern werden ohne Zwischenräume direkt hintereinander eingetragen. Auf dem normalen Desktop sind diese Telefonnummer auch anklickbar, was zu folgender Fehlermeldung führt, weil mit dem normalen PC ohne zusätzlich installierte Software normalerweise nicht telefoniert werdern kann.
Um diese sichtbare Verlinkung auf dem PC zu entfernen, kann für die Desktopversion die Formatierung als Link rückgängig gemacht werden und die Telefonnnumer erscheint als normale schwarze und nicht unterstrichene Schrift. Und ist somit für den User nicht mehr als Link erkennbar. Durch folgenden CSS-Code wird genau das erreicht. Die Telefonnummer ist nun auf Desktop PCs nicht mehr als Link zu erkennen, weil sie schwarz und ohne Unterstreichung dargestellt wird:
@media screen and (min-width: 600px) {
a[href^="tel:"] {
color: black;
text-decoration: none;
}
}
Auf einigen mobilen Geräten werden je nach Betriebssytem Telefonnummern auch ohne entsprechende Formatierung erkannt und somit automatisch verlinkt, ohne dass die oben beschriebene Syntax eingehalten werden muss. Ist diese Funktion nicht erwünscht oder soll verhindert werden, dass auch normale Ziffern irrtümlichwerweise in Telefonnummern umgewandelt werden, kann durch diese Angabe in den Metatags, die automatische Verlinkung von Telefonnummern verhindert werden.
<meta name="format-detection" content="telephone=no">
Die Telefonnummern müssen in diesem Fall, dann wie oben beschriebene manuell in den HTML-Code eingefügt werden.
Mit CSS transform verändern Sie die Objekte auf Ihrer Website. Verschieben, vergrößern, verkleinern, drehen oder scheren Sie HTML-Elemente. Inhalt CSS transform:translate – Objekte verschieben CSS transform:rotate – Objekte drehen CSS
Animationen bringen Bewegung auf die Seite und sorgen für das gewisse Etwas, um sich sich von der Konkurrenz abzuheben. Wählen Sie dezente Effekte und reduzieren Sie die Animationen auf wenige
Die HTML-Elemente mit denen Textabschnitte kursiv oder fett ausgezeichnet werden können sind allgemein bekannt. Es gibt jedoch auch einige weniger bekannte Elemente mit denen Textelemente formatiert werden können. Inhalt HTML
Es gibt in HTML zwei grundsätzliche Arten von Elementen: Block und Inline-Elemente. Beide Arten von Elementen haben unterschiedliche Eigenschaften. Die Kenntnis dieser Eigenschaften ist die Grundlage für einen korrekten HTML-Code
Der HTML-Quellcode einer Internetseite sollte übersichtlich, möglichst schmal und selbsterklärend sein. Ein übersichtlicher Quellcode kann leichter und vor allem schneller verändert werden. Je schmaler der Quellcode ist, umso geringer ist
