Alle Kategorien
Suche

Coole HTML-Codes für die Website verwenden - so gelingen kleine Effekte

Coole Effekte mit HTML erstellen
Coole Effekte mit HTML erstellen
Um Ihre Website kreativ zu gestalten, können Sie dafür einfache HTML-Codes verwenden. Welche Möglichkeiten Sie dabei haben, ohne zusätzliche Skripte coole Effekte zu erstellen, erfahren Sie hier.

Coole Bewegungen erzeugen

Wenn Sie für Ihre Website Ihre Texte einmal etwas anderes gestalten möchten, können Sie mit kleinen HTML-Codes coole Bewegungseffekte erzeugen, ohne dabei auf Script-Sprachen wie zum Beispiel jQuery oder JavaScript zurückgreifen zu müssen.

  • Wenn Sie zum Beispiel einen Text bewegen lassen möchten, können Sie dies mit dem Tag "marquee" machen, wobei Sie bei "direction" die Richtung angeben müssen. Möchten Sie also zum Beispiel den Text "Ich bewege mich" von links nach rechts bewegen lassen, schreiben Sie:
    <marquee direction="right">Ich bewege mich</marquee>.
  • Dabei würde der Text am rechten Bildrand verschwinden und dann links wieder erscheinen. Wenn Sie lieber einen Text gestalten möchten, der sich immer hin und her bewegt, schreiben Sie stattdessen:
    <marquee behavior="alternate">Ich bewege mich</marquee>.
  • Sie können "marquee" auch für Bilddateien verwenden, indem Sie innerhalb der beiden Tags eine Bilddatei einbinden, also zum Beispiel für das Bild "bewegung.jpg" schreiben:
    <marquee><img src="bewegung.jpg" width="120" height="60" alt="Bewegtes Bild">
    </marquee>.
  • Zudem können Sie einen coolen Blinkeffekt erstellen, indem Sie den Text mit "scrolldelay" verzögert und mit "scrollamount" sehr schnell einblenden lassen:
     <marquee scrolldelay="480" scrollamount="410">Ich blinke</marquee>.

HTML-Codes für Hintergründe und Links

Auch den Hintergrund Ihrer Website oder einzelner Textpassagen können Sie mit kleinen HTML-Codes eindrucksvoll gestalten.

  • Wenn Sie zum Beispiel für Ihre Website ein Hintergrundbild verwenden, können Sie dafür ganz einfach den HTML-Code: <body background="hintergrund.jpg"> verwenden. Dabei sollten Sie darauf achten, dass das ausgewählte Bild entsprechend groß ist und Sie den ursprünglichen body-Tag mit dem Code ersetzen.
  • Auch für bestimmte Textpassagen können Sie ein Hintergrundbild anzeigen lassen oder eine bestimmte Hintergrundfarbe einstellen. Um zum Beispiel das Bild "text.jpg" als Hintergrund für den text "Hintergrundtext" zu verwenden, schreiben Sie <span style=”background-image: url(text.jpg);”>Hintergrundtext</span>. Für eine schwarze Hintergrundfarbe verwenden Sie <span style=“background-color: black″>Hintergrundtext</span>. 
  • Falls Sie bei einem Text, Bild oder Link einen Text anzeigen lassen möchten, sobald der Besucher mit der Maus über diesen fährt, können Sie dies mit dem Attribut "title" einstellen. Bei einem Text verwenden Sie wieder den Span-Tag, also zum Beispiel <span title=”Angezeigter Text”>Ihr Text</span>. Bei einem Link oder Bild müssten Sie den jeweiligen Tag jeweils nur mit "title" erweitern, also zum Beispiel <a href="website" title=”Angezeigter Text”>Ein Link</a> oder <img src="bild.jpg" width="120" height="60" alt="Ein Bild" title=”Angezeigter Text” />.
helpster.de Autor:in
Kevin Höbig
Kevin HöbigKevin ist ein alter Hase bei HELPSTER. Als Webdesigner und Mediengestalter, der auch auf journalistische Erfahrung zurückblicken kann, beschäftigt er sich nicht nur privat mit technischen Themen. Dank seines Wissens hilft er anderen oft mit praktischen Tipps weiter.
Teilen: