Tipp 0125

Es geht nicht darum, ganze Websites mit HTML und JAVA zu erstellen, sondern vielmehr darum, dir zu zeigen, dass du mit etwas selbstgebasteltem Code interessante Tools für deine Site kreieren kannst. Dabei muss nicht immer die Perfektion im Vordergrund stehen, sondern es darf auch einmal der Spass-Faktor sein!

Eine Laufschrift nur mit HTML
Zuerst machen wir etwas Einfaches – einen Newsticker in Form einer Laufschrift mit Links. Dabei lernst du den grundsätzlichen Aufbau einer HTML-Seite, das Setzen von Überschriften, schreiben von Text und verlinken eines Textes mit einer anderen Webseite kennen. Ich arbeite hier mit dem Editor Blue Griffon, du kannst aber jeden beliebigen Editor verwenden (sogar eine Textverarbeitung).
Im ersten Schritt erzeugst du das HTML-Gerüst für eine neue Seite. Im <head> legst du sinnvolle Angaben fest.

Dort, wo sich die Einfügemarke befindet, kannst du auch einen sichtbaren Seitentitel einfügen. Obwohl das bei der Laufschrift nicht unbedingt sein muss, setzen wir übungshalber eine Überschrift. Der Title-Tag beginnt immer mit <h1> (grosser Titel), oder <h2>, <h3>… (immer kleinere Titel). Mit dem Span-Tag und dem Style-Attribut kannst du noch die Schriftfarbe festlegen. Der Befehl für den Titel könnte dann etwa so aussehen.
<h3><span style="color:#297bad">Newsticker</span></h3>

Im zweiten Schritt geht's nun um die Laufschrift, die mit dem marquee-Befehl, rein in HTML realisiert werden kann. Der Befehl wird so eröffnet und seine Eigenschaften definiert:
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" behavior="scroll" scrollamount="3" scrolldelay="2" style="color: #297bad;font-size:17px;font-family:Arial; width="max-width">
"this.stop()" und "this.start()" bewirkt, dass die Laufschrift anhält, wenn du mit der Maus draufzeigst, direction ist die Laufrichtung, behavior mit den Möglichkeiten scroll, alternate oder slide, scrollamount gibt die Laufgeschwindigkeit an, scrolldelay die Startverzögerung, color die Schriftfarbe, font-size die Schriftgrösse, font-family die Schriftart und width gibt schliesslich noch die Breite des Lauftextfeldes an.
Wenn du nun diesen Code unterhalb der Zeile <body> einfügst, beginnt dein Titel zu laufen und unterhalb wird einiges an Code rot dargestellt. Das bedeutet, dass einer oder mehrere Befehle nicht abgeschlossen sind. Wir müssen also noch am Code arbeiten! Was fehlt denn noch?

Nicht der Titel soll laufen, sondern ein von uns definierter Text
Der marquee-Befehl ist nicht abgeschlossen

Wir ergänzen nun also den Code mit einem Laufschrifttext und schliessen den marquee-Befehl ab.
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" behavior="scroll" scrollamount="3" scrolldelay="2" style="color: #297bad;font-size:17px;font-family:Arial; width="max-width">++ meteo: Oktoberbericht zu Spezialtemperaturen</marquee>
Aha, jetzt läuft der richtige Text, aber kein Link, wenn man draufklickt und im Code hat's noch viel Rotes! Also muss nun der Link auf den Text gelegt werden, was mit dem <a href>-Tag erledigt werden kann. Vor dem Text kommt jetzt also die Referenz zu einer Website, die in einem neuen Fenster geöffnet werden soll.
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" behavior="scroll" scrollamount="3" scrolldelay="2" style="color: #297bad;font-size:17px;font-family:Arial"; width="max-width"> <a href="https://luck-cbs.ch/wettercomments" target="_blank">++ meteo: Oktoberbericht zu Spezialtemperaturen</a> </marquee>
Jetzt funktioniert alles perfekt, auch der Link! Dein gesamter Code sieht jetzt so aus und zeigt auch keine Fehler mehr an.

In einem dritten Schritt willst du nun sicher noch mehr Texte mit weiteren Links hinzufügen. Dazu baust du einfach weitere solche Codeschnipsel ein:
<a href="https://luck-cbs.ch/tipp1124" target="_blank">++ aktuell: Excel-Workshop Windrose mit Vorlagen und Lösungen</a>

Den Code einer fertigen, erweiterten Lösung findest du hier:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Laufschrift-ML</title>
    <meta name="author" content="Peter Luck">
</head>
<body> <br>
    <marquee onmouseover="this.stop()" onmouseout="this.start()" direction="left" behavior="scroll" scrollamount="3" scrolldelay="2" style="color: #297bad;font-size:17px;font-family:Arial"; width="max-width">
<a href="https://luck-cbs.ch/wettercomments" target="_blank">++ meteo: Oktoberbericht zu Spezialtemperaturen</a>
<a href="https://luck-cbs.ch/tipp1124" target="_blank">++ aktuell: Excel-Workshop Windrose mit Vorlagen und Lösungen</a> <a href="https://luck-cbs.ch/windows12" target="_blank">++ it-news: Windows 12 - vom Gerücht zu den Facts</a>
<a href="https://luck-cbs.ch/actuallinux" target="_blank">++ linux mint: neue Versionen bereit zur Installation!</a>
    </marquee>
</body>
</html>

Eine "Maschine" mit JAVA-Script
Im zweiten Beispiel wollen wir eine "Maschine" entwickeln, die uns eine Zufallszahl in einem bestimmten Zahlenbereich erzeugt. Also wenn du nicht entscheiden kannst, wie deine Lottozahlen sein sollen, dann lasse eben die "Maschine" dies Zahlen generieren.

Das geht nun nicht mehr allein mit HTML, da eine Funktion benötigt wird, die bestimmt, wie die Maschine eine Zufallszahl generieren kann. Um die Funktion zu schreiben, verwenden wir JAVA-Script. Mit JS kannst du alles Mögliche an Formeln erstellen, die dann für Berechnungen verwendet werden. Das Script allein nützt nichts, wenn es nicht entsprechend in HTML eingebunden wird. Das HTML-Gerüst hast du im letzten Beispiel kennen gelernt und ich gehe daher hier nicht mehr darauf ein. Untersuchen wir einmal den Quellcode:

hier wird die erste Funktion eröffnet. Beachte, dass sie einen eindeutigen Namen trägt und mit einer geschweiften Klammer beginnt { und } abgeschlossen wird.
var definiert die Variablen, die eingegeben werden können. Also die untere und die obere Zahl vom gewünschten Bereich. Es wird hier auch angegeben, wohin die Eingabe dann geschrieben wird.
Die mathematische Formel gibst du im var Ergebnis ein und sagst wieder, wohin das Ergebnis geschrieben werden soll.
Mit der zweiten Funktion steuerst du die Eingabe und Ausgabe. Dazu gehören die Felder zur Eingabe, die Buttons, woher das Ergebnis geholt werden soll und die Resultatausgabe.

Du siehst, auch hier gilt immer noch das uralte EVA-Prinzip (Eingabe – Verarbeitung – Ausgabe) der Informatik und findest wieder den gesamten Code zum Kopieren:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>zufall</title>
    <meta name="author" content="Peter Luck">
</head>
<body>
    <script type="text/javascript">

function Zufallszahl() {

    var min=Number(window.document.R.min.value);
    var max=Number(window.document.R.max.value);

    var Ergebnis=Math.round(Math.random() * ((max - min) + 1) + min);
    window.document.R.Ergebnis.value=Ergebnis;
}
function initMinMax() {
    document.write('<form name="R">');
    document.write('Gib Zahl 1 ein :<br />');
    document.write('<input type="Text" name="min" value="" size="50" tabindex="1" /><br />');
    document.write('Gib Zahl 2 ein :<br />');
    document.write('<input type="Text" name="max" value="" size="50" tabindex="2"><br />');
    document.write('<input type="Button" name="*" value="Zufallszahl" onclick="Zufallszahl()" tabindex="3" />');
    document.write('<input type="reset" value="RESET" tabindex="9" /><br />');
    document.write('<input type="Text" name="Ergebnis" value="Ergebnis" size="50" />');
    document.write('</form>');
}
</script> <h3><span style="color:#297bad">Zufall in einem Zahlenbereich</span></h3>
    <br>
    <script type="text/javascript">initMinMax();</script>
</body>
</html>

Weitere Beispiele zum Ausprobieren findest du auf meiner Codeseite, viel Spass!

deine Kommentare, Fragen und Kritik zu diesem Beitrag >> hier deponieren.

top

tipp 0125 HTML und JAVA