HTML Tipps

»»» HTML Tipps «««

Hier werde ich eine Sammlung guter HTML Tipps rein stellen. Welche die ich selber versucht und andere von denen ich denke das sie auch sehr nützlich sein könnten. Ihr könnt mir natürlich auch jederzeit gute Tipps zukommen lassen. Am einfachsten einfach mit einer E-Mail an meine Person.

Rechtsklick vermeiden

<body oncontextmenu="return false">

Erklärung: Attribute namens "oncontextmenu", werden aufgerufen wenn man einen Rechtsklick ausübt. Trägt man hier nun den Wert "return false" ein, bewirkt es das nichts geschieht, so haben wir das gewünschte Ziel erreicht.

Rechtsklick, Markierschutz, Kopierschutz und Screenshot vermeiden

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

Erklärung: Die Attribute namens "oncontextmenu", "onselectstart" und "ondragstart" werden dabei aufgerufen. Trägt man hier nun den Wert "return false" ein, dann werden diese Attribute vermieden. Sie können jedoch, wenn sie das für eine bestimmt Seite wünschen, auch zugelassen werden indem sie den Wert auf "return true" umschreiben.

Kopierschutz mit Warnung

<script language=JavaScript> function click() {if (event.button==2) {alert("FENSTERTEXT")}} document.onmousedown=click </script>

Erklärung: Beim Versuch etwas aus einer fremden Homepage zu kopieren erscheint dann ein Fenster mit deiner Warnung bezüglich dem kopieren deiner Bilder etc.!

Textmarkierung vermeiden:

<script language="JavaScript1.2"> function disableselect(e){ return false } function reEnable(){ return true } //if IE4+ document.onselectstart=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script>

Erklärung: Wenn sie persönliche Texte vor dem Markieren und Kopieren schützen möchten, dann fügen sie den Code in die gewünschte Seite ein. So kann man den Text nicht mehr markieren und kopieren.

Hintergrund Musik für Homepage:

<bgsound src="musikdatei.wav" loop="infinite">

Erklärung: Mit dem Attribut src legen Sie die Musikdatei (beispielsweise mit der Endung .mid oder .wav) die abgespielt werden soll, mit dem loop - Attribut die Anzahl der Durchläufe fest. So steht beispielsweise "infinite" für unendlich und 1 für eine Wiederholung.

Automatische Weiterleitung

<html> <head> <meta http-equiv="refresh" content="10; URL="http://www.www.com"> <title>Text des Titels</title> </head> <body> </body> </html>

Erklärung: Unter content geben Sie den zeitlichen Rahmen der Weiterleitung an. Tragen Sie im URL-Bereich "http://" die Adresse ein, auf die weitergeleitet werden soll.

Bannercode

<a href="http://www.www1.com" target="_blank"><img src="http://www.www2/image.jpg" alt="text " border="0"></a>

Erklärung: Tragen Sie unter www1 die Adresse ein, auf die der Banner führen soll. Unter www2 geben sie den Pfad an, auf der Ihr Banner Online liegt.Unter "text" geben sie den Text an der Ersichtlich sein woll wenn man sich über dem Banner befindet. border="0" bewirkt, dass die Seite im neuen Fenster geöffnet wird.

Lauftext

<marquee scrollamount=1 scrolldelay=1 direction="down" bgcolor="#000000"><font size="4" face="Verdana" color="#FFFFFF">Hier kommt dein Lauftext rein</marquee>

Erklärung: Wählen Sie unter direction: "up" - "down" - "right" - "left". Die Laufgeschwindigkeit ist ebenfalls einstellbar. Die Farbeinstellung ist zur Zeit weiss (FFFFFF). Fügen Sie an den Anfang ein <center> und an das Ende ein </center>, so zentrieren Sie den Text.

Linktext

<a href="http://www.www1.com" target="_blank">Geben Sie hier den Linktext ein</a>

Erklärung: Unter www1 geben Sie den Zielpfad ein.

IFrame

<iframe name="I1" width="580" height="320" src="http://xxx.www.com"> Ihr Browser unterstützt Iframes nicht (oder zeigt sie in der derzeitigen Konfiguration nicht an.) </iframe>

Erklärung: Binden sie hiermit z.B. externe Seiten oder auch Java Apletts ein. width (Angabe der Breite) - height (Angabe der Höhe).

Einbinden von Flash Dateien

<html> <head> </head> <body> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=1,0,0,0" width="580" version=1,0,0,0" width="580" height="440" id="Unbenannt-1" align="middle"> <param name="allowScriptAccess" value="sameDomain"> <param name="movie" value="http://XXX11.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#000000"> <embed src="http://www.www1.swf" quality="high" bgcolor="#000000" width="580" height="440" name="Unbenannt-1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object> </body> </html>

Erklärung: Flashdateien haben die Endung ".swf". Geben Sie den Pfad zweimal ein unter www1. Der obere Pfad dient dem Browser Explorer, der untere Bereich z.B. Browsern wie Firefox, Opera etc. - width und height gibt Höhe und die Breite der Flashdatei an. (oben und unten eingeben). bgcolor stellt die Hintergrundfarbe dar (derzeit 000000 - schwarz). align="middle" (Bild wird mittig angezeigt). Das beste Resultat erzielen sie mit ausprobieren. Doch Rest bleibt nach meinem Wissen unberührt.

Füge ein Bild ein

<img src="http://www.www.com/images/mein_bild.gif">

Erklärung: Füge einfach die Adresse deines Bildes ein und schon hast dein Bild in der Homepage eingefügt.

Farbige Scrolleiste

<style type=text/css> body{scrollbar-base-color:#999999; scrollbar-track-color:#999999; scrollbar-face-color:#000066; scrollbar-highlight-color:#000099; scrollbar-3d-light-color:#FFFFFF; scrollbar-dark-shadow-color:#FFFFFF; scrollbar-shadow-color:#999999; scrollbar-arrow-color:#FFFFFF;} </style>

Erklärung: Fügen Sie dazu einfach den Quellcode in den <head> - Bereich Ihres HTML-Dokumentes ein und ersetzen Sie die entsprechenden Farben(gelb markiert) durch Ihre eigenen.

Schutz vor Spam-Bots

<script type="text/javascript" language="JavaScript">  </script>

Erklärung: Fügen Sie dazu einfach den Quellcode in den <head> - Bereich und ersetzen Sie im folgenden die Variable "nickname" durch Ihren Text vor dem @-Zeichen, und die Variable "domain" durch die Domain (also das was nach dem @-Zeichen folgt) Ihrer eMail-Adresse. Nachteil ist das User die JavaScript deaktiviert haben Ihre eMail-Adresse dann leider nicht sehen können.

Favicon für der Adresszeile

<link href="http://www.icon.com/images/favicon.ico" rel="SHORTCUT ICON">

Erklärung: Speichern sie ihr gewünschtes Icon (32 x 32 Pixel) in ein Verzeichnis auf den Server Ihrer Homepage (Standardname=favicon.ico). Sie können ihrem eigenen Icon auch einen eigenen Namen geben. Sie müssen dann einfach den richtigen Link bei ("href=") einfügen.

Kopieren Sie danach den gesamten Code in den HEAD-Bereich Ihrer Homepage.

ICQ Status

<img alt="momentaner ICQ Status - grün=online, rot=offline" border="0" src="http://online.mirabilis.com/scripts/online.dll?icq=MITGLIED&img=2">

Erklärung: Mit diesem Code sieht man bei ICQ Besitzern ob man online oder offline ist.

Monatskalender

<script type="text/javascript"> var d = new Date(); var dm = d.getMonth() + 1; var dj = d.getYear(); if (dj < 999) dj += 1900; Kalender(dm, dj); function Kalender (Monat, Jahr) { Monatsname = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"); Tag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"); var KSchrArt = "Verdana,Arial"; /* Schriftart Kalenderkopf */ var KSchrGroesse = 3; /* Schriftgroesse 1-7 Kalenderkopf */ var KSchrFarbe = "#FFFF00"; /* Schriftfarbe Kalenderkopf */ var Khgrund = "#000066"; /* Hintergrundfarbe Kalenderkopf */ var TSchrArt = "Verdana,Arial"; /* Schriftart Tagesanzeige */ var TSchrGroesse = 3; /* Schriftgroesse 1-7 Tagesanzeige */ var TSchrFarbe = "#000000"; /* Schriftfarbe Tagesanzeige */ var Thgrund = "#D0F0F0"; /* Hintergrundfarbe Tagesanzeige */ var SoFarbe = "#E00000"; /* Schriftfarbe f. Sonntage */ var Ahgrund = "#FFFF00"; /* Hintergrundfarbe f. heutigen Tag */ var jetzt = new Date(); var DieserMonat = jetzt.getMonth() + 1; var DiesesJahr = jetzt.getYear(); if (DiesesJahr < 999) DiesesJahr += 1900; var DieserTag = jetzt.getDate(); var Zeit = new Date(Jahr, Monat - 1, 1); var Start = Zeit.getDay(); if (Start > 0) { Start--; } else { Start = 6; } var Stop = 31; if (Monat == 4 || Monat == 6 || Monat == 9 || Monat == 11) --Stop; if (Monat == 2) { Stop = Stop - 3; if (Jahr % 4 == 0) Stop++; if (Jahr % 100 == 0) Stop--; if (Jahr % 400 == 0) Stop++; } document.write('<table border="3" cellpadding="1" cellspacing="1">'); var Monatskopf = Monatsname[Monat - 1] + " " + Jahr; SchreibeKopf(Monatskopf, Khgrund, KSchrFarbe, KSchrGroesse, KSchrArt); var Tageszahl = 1; for (var i = 0; i <= 5; i++) { document.write("<tr>"); for (var j = 0; j <= 5; j++) { if ((i == 0) && (j < Start)) { SchreibeZelle(" ", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } else { if (Tageszahl > Stop) { SchreibeZelle(" ", Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } else { if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) { SchreibeZelle(Tageszahl, Ahgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } else { SchreibeZelle(Tageszahl, Thgrund, TSchrFarbe, TSchrGroesse, TSchrArt); } Tageszahl++; } } } if (Tageszahl > Stop) { SchreibeZelle(" ", Thgrund, SoFarbe, TSchrGroesse, TSchrArt); } else { if ((Jahr == DiesesJahr) && (Monat == DieserMonat) && (Tageszahl == DieserTag)) { SchreibeZelle(Tageszahl, Ahgrund, SoFarbe, TSchrGroesse, TSchrArt); } else { SchreibeZelle(Tageszahl, Thgrund, SoFarbe, TSchrGroesse, TSchrArt); } Tageszahl++; } document.write("<\/tr>"); } document.write("<\/table>"); } function SchreibeKopf (Monatstitel, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) { document.write("<tr>"); document.write('<td align="center" colspan="7" valign="middle" bgcolor="' + HgFarbe + '">'); document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>'); document.write(Monatstitel); document.write("<\/b><\/font><\/td><\/tr>"); document.write("<tr>"); for (var i = 0; i <= 6; i++) SchreibeZelle(Tag[i], HgFarbe, SchrFarbe, SchrGroesse, SchrArt); document.write("<\/tr>"); } function SchreibeZelle (Inhalt, HgFarbe, SchrFarbe, SchrGroesse, SchrArt) { document.write('<td align="center" valign="middle" bgcolor="' + HgFarbe + '">'); document.write('<font size="' + SchrGroesse + '" color="' + SchrFarbe + '" face="' + SchrArt + '"><b>'); document.write(Inhalt); document.write("<\/b><\/font><\/td>"); } </script>

Erklärung: Mit diesem Code kannst du einen Monatskalender in deine Homepage einbauen. Schrift und Farben lassen sich beliebig anpassen, damit es in deine Homepage passt.

Auswählen und kopieren eines Code

Erklärung: Den gewünschten Code durch das Drücken auf "Markieren" markieren und danach mit Strg+C kopieren. Den ausgewählten Code mit Strg+V an die gewünschte Stelle einfügen.

So, das waren mal die wichtigsten Tipps die ich hier für euch bereit stellen wollte. Werde aber sicher noch den einen oder anderen Tipp und Trick hier einfügen, sollten sich neue ergeben die ich brauche!