Unter "Snippets" versteht man kleine funktioinelle HTML-Code-Schnipsel, die inline in eine Codeseite eingefügt werden und die eine gewisse Funktionalität aufweisen. Als einführendes Beispiel soll hier ein kleines Code-Snippet vorgestellt werden, welches dem Nutzer der Webseite erlaubt, einen Ort einzugeben, um eine Wegbeschreibung auf Google-Maps (wird auf einem separaten Tab geöffnet) zu erhalten. In diesem Beispiel ist der Ausgangspunkt der Flughafen Dresden-Klotzsche:
Diesen Code tragen Sie in das Feld "Einbettungscode" des iFrame / HTML - Elements ein und markieren zusätzlich das Markierungsfeld "inline".
1. Hinweis: Bitte beachten Sie hier und in allen anderen Snippets, dass Sie zuvor jeweils das Leerzeichen hinter dem "<" - Zeichen entfernen. Es musste hier in den Codetext eingefügt werden, weil ansonsten der Textinterpreter von Cheetah den Text als nativen HTML-Code interpretiert .
Das Ergebnis sieht folgendermaßen aus (und kann natürlich von Ihnen durch entsprechende Änderungen und Ergänzungen im Snippet-Code noch beliebig angepasst werden):
2. Hinweis: Beim Verschieben des Elements mit der Maus verschwindet manchmal der Inhalt. Um es wieder sichtbar zu machen, klicken Sie zweimal auf das Markierungsfeld "inline" im rechten Editierbereich des HTML-Elements.
Beispiele für weitere kleine Snippets
Im Folgenden sollen einige Snippets (in minimalistischer Form) vorgestellt werden, um als Anregungen für eigene Versuche zu dienen. Was die Sprache HTML betrifft, sei als Kompendium auf die Webseite SelfHTML verwiesen.
Kleines natives Eingabeformular für eMail-Adresse und Passwort
Dieses kleine Snippet kann als Ausgangspunkt zur Programmierung eigener kleiner Eingabemasken zu allen möglichen Zwecken dienen.
Das man in Builderall Cheetah auch sehr komplexe Inline-Codes einsetzen kann, zeigt dieses Beispiel:
Es wurde 1:1 aus einer Snippet-Bibliothek entnommen, die Sie im Web unter folgender Adresse finden (Bild anklicken):
Und hier nun das komplette Snippet (vor Verwendung bitte wieder Leerzeichen nach "<" entfernen). Beachten Sie, dass die Funktionlität (Aufruf der sozialen Netzwerke) noch fehlt.
< link href="//maxcdn.bootstrapcdn.com /bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
< script src="//maxcdn.bootstrapcdn.com /bootstrap/4.1.1/js/bootstrap.min.js">
< script src="//cdnjs.cloudflare.com /ajax/libs/jquery/3.2.1/jquery.min.js">
< !------ Include the above in your HEAD tag ---------->
< !DOCTYPE html>
< html>
< head>
< meta charset="utf-8" />
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< title>Animated
< meta name="viewport" content="width=device-width, initial-scale=1">
< link rel="stylesheet" href="https://cdnjs.cloudflare.com /ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
< link rel="stylesheet" type="text/css" media="screen" href="main.css" />
< script src="main.js">
Bilder mit Skalierungs- und Rotationseffekt bei Mausberührung
Mittels kleiner HTML-Snippets lassen sich leicht durchaus beindruckende Bildeffekte auf mit Builderall erstellten Webseiten erzeugen - wie dieses Beispiel zeigt...