Eigene HTML Seite erstellen?

[BobbyS]

Hallo. Ich würde gerne eine ganz simple HTML-Seite erstellen, wo nur eine Suchbox für Wörter aus einem Wörterbuch aufgeführt werden sollen. Die Suchbox sollte auch beim Eintippen oder falsch geschriebenen Wörtern erkennen und Vorschläge machen können. Ist so etwas mit wenig Aufwand und kaum bis keine HTML-Kenntnisse machbar? Zuletzt hatte ich HTML im EDV Unterricht und der ist schon knapp 15 Jahre her.

 

[CyborgBeta]

Ist so etwas mit wenig Aufwand und kaum bis keine HTML-Kenntnisse machbar?

Sicher ist das machbar, mit etwas Einarbeitung ...

Schau mal hier auf der ersten Seite nach, das ist quasi genau dein Anwendungsfall:
https://www.w3schools.com/html/

 

[Xes]

Das mit den falsch geschriebenen Wörtern wird zumindest etwas kniffeliger. Keinesfalls unschaffbar aber rein mit HTML wirst du da vermutlich nicht auskommen.

 

[cyberpirate]

Moin,

immer noch eine TOP Seite für HTML:

https://www.google.com/search?client=firefox-b-d&q=self+html

Bin selber noch Oldschool und benutze auf meiner Seite nur HTML- Einfach und gut. Und hier noch ein super Tool zum erstellen:

https://sourceforge.net/projects/kompozer/

findet sich auch als portable und auch in deutscher Version.

MfG

 

[Incanus]

Da muss man schon ein wenig weiter ausholen, z.B. wie liegt das Wörterbuch denn vor? Auf welchem Server soll diese 'simple HTML-Seite' laufen?
Und wie gesagt mit quasi KI wird das ganze deutlich aufwändiger.

 

[tollertyp]

Bin selber noch Oldschool und benutze auf meiner Seite nur HTML- Einfach und gut. Und hier noch ein super Tool zum erstellen:

Und wie setzt du damit genannten Use-Case vom TE um?

 

[CyborgBeta]

aber rein mit HTML wirst du da vermutlich nicht auskommen.

Ich denke, JavaScript wird auch benötigt werden ... aber ich wollte erst mal nur auf den ersten Teil seiner Frage antworten.

 

[Limit]

HTML ist eine "Markup-Language", d.h. damit beschreibst du die Struktur einer Seite. Die einzige Funktionalität, die du damit umsetzen kannst ist das Anzeigen von Informationen. Du kannst z.B. einen Button darstellen lassen, aber dieser hat erst einmal überhaupt keine Funktion. Die eigentliche Funktionalität, bei dir die Wörterbuchsuche wird durch andere Sprachen umgesetzt.

Dabei wird zwischen Server-seitigem und Client-seitigem Code unterschieden. Für einen absoluten Anfänger wäre vielleicht Python (Programmiersprache) und Flask (Web-Framework) eine gute Kombination. Damit solltest du deine Seite mit ein paar Zeilen Code umsetzen können sofern dein Wörterbuch in einem geeigneten Format vorliegt.

Die Suche nach ähnlichen Wörtern kann etwas schwieriger sein. Python hat eine passende Funktion in der Standardbibliothek, aber es gibt auch Bibliotheken mit alternativen Algorithmen, die je nach Anwendungszweck besser geeignet sein könnten.

 

[abcddcba]

Ist so etwas mit wenig Aufwand und kaum bis keine HTML-Kenntnisse machbar? Zuletzt hatte ich HTML im EDV Unterricht und der ist schon knapp 15 Jahre her.

Nein, allein schon dass du einen Fuzzy-Index brauchst, sowas wie z.B. Lucene + Hunspell als dict dann oder hunspell oder ähnliche Bibliotheken in Python (oder der Sprache deiner Wahl)
Was alle damit sagen wollen, nur mit HTML ist es nicht machbar. Aber dank ChatGPT und Co kann man sich diesen Code natürlich generieren lassen. Den generierten Code verstehen und deployen und deine Seite wo auch immer deployen ist dann die nächste Hürde für dich.

 

[MojoMC]

Hallo. Ich würde gerne eine ganz simple HTML-Seite erstellen, wo nur eine Suchbox für Wörter aus einem Wörterbuch aufgeführt werden sollen. Die Suchbox sollte auch beim Eintippen oder falsch geschriebenen Wörtern erkennen und Vorschläge machen können. Ist so etwas mit wenig Aufwand und kaum bis keine HTML-Kenntnisse machbar? Zuletzt hatte ich HTML im EDV Unterricht und der ist schon knapp 15 Jahre her.

Wie & wo liegt das Wörterbuch denn vor, wieviele Einträge?
Beschreib den Projekt doch bitte ein wenig genauer.

Schau mal hier auf der ersten Seite nach, das ist quasi genau dein Anwendungsfall:
https://www.w3schools.com/html/

Wo genau "auf der ersten Seite" siehst du dort bitte quasi genau den Anwendungsfall des Threaderstellers? Das erste HTML-Eingabefeld wird weit unten besprochen und gibt so gar nicht den Anwendungsfall des TE wieder - ausser, dass er auch ein Eingabefeld haben möchte.

Und hier noch ein super Tool zum erstellen:

https://sourceforge.net/projects/kompozer/

Oldschool schön & gut, aber ein Tool aus 2005, was im Mai 2016 das letzte Mal aktualisiert wurde?
Dann doch lieber was aktuelleres, was Unterstützung bietet, wenn man gemäß halbwegs aktuellen HTML-Standards arbeiten möchte, und wenn es Atom oder VS Code ist.

 

[CyborgBeta]

@BobbyS Hier ist mal ein Beispiel/PoC (hab einfach 20 Substative, Adjektive und Verben aus dem Duden genommen):

<!DOCTYPE html>
<html lang="de">
  <meta charset="UTF-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    #links {
      float: left;
      width: 200px;
    }
    #rechts {
      float: right;
      width: 200px;
    }
  </style>
  <body>
    <h3>Wörtervorschläge:</h3>
    <div id="links">
      <textarea id="ta1" rows="10"></textarea>
    </div>
    <div>
      <textarea id="ta2" rows="10"></textarea>
    </div>
    <script>
      let words = [
        "Jahr",
        "Uhr",
        "Euro",
        "Prozent",
        "Mensch",
        "Tag",
        "Zeit",
        "Deutschland",
        "Kind",
        "Land",
        "Million",
        "Frau",
        "Stadt",
        "Mann",
        "Ende",
        "Woche",
        "Unternehmen",
        "Berlin",
        "Ander",
        "Foto",
        "neu",
        "groß",
        "erst",
        "viel",
        "ander",
        "weit",
        "deutsch",
        "gut",
        "klein",
        "eigen",
        "letzt",
        "alt",
        "hoch",
        "jung",
        "einig",
        "zweit",
        "vergangen",
        "lange",
        "nahe",
        "wenig",
        "sein",
        "haben",
        "werden",
        "können",
        "sagen",
        "müssen",
        "sollen",
        "geben",
        "wollen",
        "kommen",
        "gehen",
        "machen",
        "stehen",
        "lassen",
        "sehen",
        "finden",
        "bleiben",
        "liegen",
        "zeigen",
        "dürfen",
      ];
      function handler(e) {
        let word = e.target.value;
        if (!word.length) {
          return;
        }
        let candidats = [];
        if (word.length <= 3) {
          words.forEach((w) => {
            if (w.toLowerCase().startsWith(word.toLowerCase())) {
              candidats.push(w);
            }
          });
        } else {
            
        }
        candidats.sort((a, b) => {
          let c1 = b.length - a.length;
          if (c1 == 0) {
            let c2 = a.toLowerCase().localeCompare(b.toLowerCase());
            if (c2 == 0) {
              return a.localeCompare(b);
            }
            return c2;
          }
          return c1;
        });
        let ta2 = document.getElementById("ta2");
        ta2.value = "";
        for (let i = 0; i < candidats.length; i++) {
          const c = candidats[i];
          ta2.value += i + 1 + ": " + c + "\n";
        }
      }
      document.getElementById("ta1").addEventListener("input", handler);
    </script>
  </body>
</html>

Um den else-Teil in Zeile 100 müsstest du dich noch kümmern. Einfache Algorithmen reichen an dieser Stelle nicht aus, da man sich mit einer höheren Wahrscheinlichkeit vertippt, je länger ein Wort wird.

Du könntest die Wörter dann zum Beispiel anhand des prozentualen https://de.wikipedia.org/wiki/Hamming-Abstand vergleichen.

Es muss hier ja nicht "Googlesuchmaschinengenau" sein ...

Ergänzung (4. Oktober 2023)

Edit: Sorry, ich meinte https://de.wikipedia.org/wiki/Levenshtein-Distanz