HTML – die neusten Beiträge

Wie richte ich ein ein Repository für ein Projekt auf Github ein?

Hallo Freunde
Ich will mich für das Programmieren und die Programmiersprache mehr interessieren.
Und dazu gehört auch das Einrichten eines Repository.
Weil ich Anfänger bin, bitte ich um euer Verständnis und die Geduld mit mir.
Peinlicherweise sitze ich schon 2 Tage. Vor meinen Rechner Um ein Repossality korrekt einzurichten. Aber in der Zeit sind wir mehr Fragen aufgekommen als mir lieb ist. Fang ich am besten von ganz vorne an.
1. Mit welchem Tool soll ich am besten arbeiten?
Montan habe ich das so gelassen, wie es schon eingetragen ist "Notepad".
2.Diese Reihenfolge muss ich einhalten:

-Projekt lokal vorbereiten (Erstelle einen Ordner mit der Struktur.)
-Ein GitHub-Repository erstellen & Dateien hochladen
- Lade die Dateien hoch (manuell oder per Git)
- GitHub Pages aktivieren (für Hosting)
-manifest.json datei erstellen

Ich habe versucht, mit Videos Tutorials selber zu helfen. Aber ich kam so durcheinander, dass ich schon nicht mehr den Anfang wusste. Das Schlimmste fand ich eine manifest.json zu erstellen. Da hab ich komplett versagt.
Daher brauche ich bitte eure Professionele hilfe.

Wenn ihr bitte ein bisschen Zeit für mich aufbringen könntet, würde ich mich über ein Video -Tutorial, passend zu mein Problem freuen.
Ich habe alles vorhanden was ich brauche
-Die Struktur
-Bash
-Den HTML-Code(?) für die manifest.json Datei.
Die Codes für Github habe ich in 3 abschnitten, kopierbereit vor mir liegen.
Muss ich alle 3 Codes in einer Datei, untereinander einfügen?

Ich wäre dankbar das ihr mich nicht auslacht, wenn ich was falsches sage.
Ich wäre euch noch dankbarer wenn ihr mir stattdessen den richtigen Weg weißt und mich korrigiert.
Ihr werdet hinter manchen Wörter ein (?) sehen, dass heißt das ich mir nicht sicher bin ob es richtig ist was ich geschrieben habe.
Ich brauche bitte professionelle Antworten und kein "ich glaube /vielleicht oder ein Ähhm"
Ach so, die Desktop App habe ich auch von Github heruntergeladen und installiert. In ein Tutorial habe ich auch gesehen wie er eine Datei von der App in sein Github im Browser Syncronisiert(?) hat
Ich habe das nicht auf die reihe gekriegt.
Und welche Lizens wäre am besten geeignet, ich will nicht dass mir vielleicht jemand irgendwann die idee klaut. Bis jetzt habe ich nur Lizensen gesehen wo ich die erlaubnis gebe das die mit meine idee machen können was die wollen(wenn ich das richtig verstanden habe).

Vielen dank schon mal.😉

PC, HTML, IT, CSS, JavaScript, Code, Programmiersprache, Softwareentwicklung, github, Windows 11 Pro

Offline Hash-Lookup mit 55 Mio. Datensätzen – wie löst man das ohne Datenbank?

Hallo zusammen,

ich stehe aktuell vor einer Herausforderung, bei der ich hoffe, dass mir jemand aus der Community weiterhelfen kann.

Für ein berufliches Projekt habe ich eine offlinefähige HTML-Seite mit einer eingebetteten Datenstruktur entwickelt. Ziel ist es, Kennziffern zu speichern und daraus mittels eines Hash-Verfahrens nicht umkehrbare Output-Werte zu generieren. Beispiel:

Eingabe (Kennziffer): 9000

Ausgabe (gehashter Wert): 14194901194611390735

Die Hashing-Methode ist bewusst so gewählt, dass keine Rückrechnung möglich ist. Soweit funktioniert alles.

⚠️ Das Problem

Die Suche innerhalb der Seite funktioniert aktuell nur über die ursprüngliche Kennziffer. Das Problem ist: der Nutzer kennt in der Praxis nur den Output-Wert, z. B. 14194901194611390735, und möchte wissen, welche Kennziffer dahintersteckt. Da der Hash nicht umkehrbar ist, ist ein direkter Lookup aktuell nur auf der aktiven Seite mit den angezeigten Daten möglich.

  • Und genau hier liegt der Haken:
  • Ich habe 55 Millionen solcher Kennziffern
  • Pro HTML-Seite werden 500 Datensätze generiert
  • Das ergibt über 110.000 Seiten

Es gibt keine zentrale Datenbank zur Suche, weil aus Speicher- und Performancegründen alles offline und möglichst klein gehalten werden soll

🔒 Einschränkungen

Das gesamte Projekt (HTML, CSS, JavaScript + Datenstruktur) soll offline lauffähig und unter 100 MB bleiben

Der Einsatz eines Server-Backends oder großer Datenbanken (>5 GB) ist nicht möglich oder gewünscht

Die Datenstruktur wächst jährlich um mehrere Millionen Datensätze

🤔 Was ich bisher versucht habe

Ich habe überlegt, beim Laden jeder Seite 500 neue Kennziffern zu erzeugen und deren gehashte Outputs direkt clientseitig berechnen zu lassen. Das funktioniert gut für die Anzeige – aber nicht für die Suche nach einem bestimmten Output-Wert.

Eine umgekehrte Hash-Suche ist natürlich ausgeschlossen, da das Verfahren absichtlich keine Rückwärtsauflösung erlaubt.

❓Meine Frage

Gibt es eine effiziente Möglichkeit, mit der ein Nutzer bei Eingabe eines Output-Werts wie 14194901194611390735 die zugehörige Kennziffer offline ermitteln kann – ohne dass ich eine vollständige Datenbank mit allen 55 Millionen Hash-Paaren speichern oder laden muss?

Mir ist klar, dass eine vollständige Map (Kennziffer → Hash) dafür nötig wäre – aber gibt es ggf. ein smarteres Vorgehen wie:

  • Bloomfilter mit Rückverweis?
  • Gezielte Partitionierung?
  • Hash-Index mit gezieltem Zugriff?

Ich bin für jeden technischen Denkanstoß oder Lösungsansatz offen – auch gerne minimalistische Kompressionsverfahren oder Lookup-Strategien.

Vielen Dank im Voraus für jede Unterstützung! Ich tüftele jetzt seit Tagen an diesem Ding und komme nicht weiter.

Hier nur ein Beispiel, wie die Kennziffern und deren Ergebnisse aussehen:

  • 9000     | 14194901194611390735
  • 9001     | 1420772774969051074
  • 9002     | 16576014318843989704
HTML, Datenbank, Webdesign, Webentwicklung

HTML/CSS: Wie mache ich Abstände zwischen "div container"?

Hallo zusammen,

ich bin auf Arbeitssuche und arbeite an einer "Projektseite" für meine Bewerbung. Das ganz große Problem ist, dass ich nichts mit Webdesign am Hut habe. Ich hatte zwei Monate lang einen Basickurs belegt aber nun muss ich diese Seite machen, weil ich sie für Bewerbungsgespräche brauche. (Ich will da meine Blogbeiträge vorstellen, bin Texterin)

Das Problem: Ich arbeite nur mit HTML/CSS also kein Java oder so. Ich mache eine Blogseite (bzw. mehrere Seiten).

In der Mitte der Seite steht (mittig) ein div class= "blog-page-container" dort steht eben mein Blogbeitrag und ich möchte von diesem Beitrag aus, auf der rechten Seite, einen Kasten erstellen, wo dann kurze Zusatzinfos stehen. Dieser Kasten ist aktuell eine div class = "sidebar". Auf dem Foto kann man das sehr schön erkennen.

Meine Frage lautet also: Wie kann dieser Infokasten ganz leicht nach rechts geschoben werden und so mit Abstand zu meinem Blogbeitrag stehen, ohne dass der Kasten komplett rechts klebt? Der Infokasten soll eben rechts sein aber nicht ganz am Rand der Webseite sondern nur etwas weiter vom Blogbeitrag weg. Ich will eben diese Textblöcke hier auf dem Foto voneinander trennen aber so, dass der Textblogbeitrag in genau der gleichen Position bleibt. Der dünne Kasten rechts soll nur verschoben werden aber da ich gerade nicht weiterkomme, wollte ich fragen wie das geht.

Das steht gerade im HTML body, main:

<div class="blog-page-container">
 <div class="blog-content">
  <h1>Blogtitel: Mein erster Blogeintrag</h1>
  <p><strong>Lorem Ipsum Lorem</strong> Lorem ipsum dolor sit amet, copraesent...</p>
 </div>
 <div class="blog-right-gap"></div>
 <div class="blog-info-sidebar">
  <h2>Infos & Werbung</h2>
  <p>Hier steht was über dich, Werbung, Links, etc.</p>
 </div>
</div>

Und das im CSS:

/* Haupttext */
.blog-content {
 flex: 3;
 padding: 40px;
}
/* Abstand zum Recht */
.blog-right-gap {
 width: 20px;
}
/* Weiße Infospalte ganz rechts */
.blog-info-sidebar {
 flex: 1;
 background-color: white;
 padding: 20px;
 border-left: 1px solid #ffb6c1;
 margin-right: 20px;
}
/* Responsiv auf kleinen Bildschirmen */
@media (max-width: 1024px) {
 .blog-page-container {
  flex-direction: column;
  max-width: 95%;
  margin: 20px auto;
 }
 .blog-right-gap {
  display: none;
 }
 .blog-info-sidebar {
  margin-right: 0;
  border-left: none;
  border-top: 1px solid #ffb6c1;
 }
}
.blog-content p {
 font-size: 1.1rem;
 line-height: 1.7;
 margin-bottom: 1.2rem;
 max-width: 70ch;
}
.blog-content h2 {
 line-height: 1.3;
 margin-bottom: 1em;
}
/* Textblock exakt unter das Bild setzen */
.blog-content {
 padding-left: 0 !important;
 margin-left: 0 !important;
}

Wie gesagt, ich bin nicht vom Fach und habe auch mit KI gearbeitet also würde mich freuen, wenn jemand eine Lösung hat.

Danke im Voraus.

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung, Frontend, Visual Studio Code

HTML Website - Kontaktformular zurücksetzen nach Abschicken?

Hallo zusammen,

ich will, dass mein Kontaktformular nach dem Abschicken wieder zurückgesetzt wird mithilfe von Javascript. Leider kenne ich mich mit Javascript null aus und ChatGPT findet hierfür auch kein Skript, dass bei mir funktioniert (oder ich bin einfach zu dumm das korrekt im html Code einzufügen )

Folgend die HTML-Seite dazu. (Head hab ich weggelassen, da sonst zu viele Zeichen)

    <body>
        <header>
            <h1>
                <div class="logo">
                    <a href="index.html"><img src="bilder/Logo_Tierhilfe.png"></a>
                </div>
                Tierhilfe Europa e.V. - Mitglied werden
            </h1>


            <nav>
                <ul>
                    <li><a href="index.html">Startseite</a></li>
                    
                    <li><a href="ueber-uns.html">Über uns</a></li>
                        
                    <li class="dropdown">
                        <a href="unterstuetzung.html">Unterstütze uns</a>
                            <ul class="dropdown-content">
                                <li><a href="mitglied_werden.html">Mitglied werden</a></li>
                                <li><a href="spenden.html">Spenden</a></li>
                            </ul>
                    </li>
                </ul>
            </nav>
        </header>
        
        <main class="background">
            <div class="container">
                <h3>Mitglied werden - jetzt registrieren</h3>
                <h6>*Pflichtfelder</h6>
                <br>
                <div class="aufzaehlung">
                    <form>
                        <label for="mail">*E-Mail:</label>
                            <input type="email"name="input_mail_field"id="mail" required>
                                <br>


                        <label for="username">*Benutzername:</label>
                            <input type="text"name="input_username_field"id="username" required>
                                <br>


                        <label for="birthday">Geburtsdatum:</label>
                            <input type="date"name="input_birthday_field"id="birthday">
                                <br>


                        <label for="password">*Passwort:</label>
                            <input type="password"name="input_password_field"id="password" required>
                                <br>


                        <label for="confirmpassword">*Passwort bestätigen:</label>
                            <input type="password"name="input_confirm_password_field"id="confirmpassword" required>
                                <br>


                        <label for="sex">Geschlecht: </label>
                            <select type="select" name="input_sex_field" id="sex">
                                <option>keine Angabe</option>
                                <option>Männlich</option>
                                <option>Weiblich</option>
                            </select>
                                <br>


                        <label for="checkdataprotection">*Ich akzeptiere die <a href="datenschutz.html">Datenschutzbestimmungen von Tierhilfe Europa e.V.: </a></label>
                            <input type="checkbox" name="check_data_protection" id="checkdataprotection" required>
                                <br>
                                <br>
                                <br>


                        <input type="reset" name="reset_field" id="reset" value="Zurücksetzen">
                        <input type="submit" name="submit_field" id="submit" value="Absenden">
                                <br>
                    </form>
                </div>
            </div>
        </main>


<script>
    const form = document.querySelector("form");


    form.addEventListener("submit", function(event) {
        event.preventDefault(); // verhindert echtes Absenden


        alert("Vielen Dank! Dein Formular wurde erfolgreich abgeschickt. Du erhältst in Kürze eine Bestätigung per E-Mail von uns.");


        // Wichtiger Trick, damit das Reset nach dem Alert wirklich ausgeführt wird
        setTimeout(() => {
            form.reset();
        }, 0);
    });
</script>


        <a title="Zurück nach oben" class="back-to-top" href="#top">&#8593</a>



        <footer>
            <p>&copy; 2025 Tierhilfe Europa e.V. </p>
            <a href="datenschutz.html">Datenschutz</a>
            <a href="impressum.html">Impressum</a>
        </footer>


    </body>
        
</html>

Hat jemand von euch einen Tipp, wie ich das mit Javascript machen muss, damit das Formular nach dem Absenden automatisch zurückgesetzt wird?

Sonstige Tipps zu meinem HTML nehme ich auch dankend an. :-)

Liebe Grüße

HTML, Webseite, Programmiersprache, Webdesign, Webentwicklung

Informatik mündliche Prüfung unfair?

Hallo zusammen,

ich habe kürzlich meine mündliche Abiturprüfung in Informatik hinter mich gebracht – und bin ehrlich gesagt ziemlich frustriert über die Themenverteilung. Vielleicht sind hier ein paar Informatiker oder Informatik-Lehrkräfte unterwegs, die mir eine ehrliche Einschätzung geben können, ob das aus fachlicher Sicht so gerecht ist.

Folgende Themenbereiche standen für die Prüfung zur Auswahl:

  1. HTML
  2. Datenbanken
  3. JavaScript

Jedem Prüfling wurden zwei dieser drei Bereiche zugewiesen – aber anscheinend völlig zufällig. Einige Mitschüler hatten HTML und Datenbanken, andere (wie ich) JavaScript und Datenbanken. Und das ist meiner Meinung nach nicht ansatzweise gleichwertig.

Zur Verdeutlichung:

HTML-Aufgabe: Eine Webseite war vorgegeben, und man musste die HTML-Datei so anpassen, dass sie genau dieser Seite entspricht. Es ging um Dinge wie background-color, font-color, etc. Außerdem mussten lediglich zwei kleinere Fehler gefunden werden – zum Beispiel ein fehlendes Anführungszeichen oder ein falscher Tag.

JavaScript-Aufgabe: Deutlich komplexer. Es sollten Sprit-Kosten (fiktive Pflegestufe-Kosten) für fünf verschiedene Stufen berechnet werden. Man musste also mit Bedingungen und Formeln arbeiten – z.B. „Wenn die Kilometeranzahl über 30 liegt, dann gelten andere Preise als unter 30“. Dazu kamen Variablen, Rechenoperationen, Verzweigungen etc.

JavaScript hatten wir gerade mal ein Quartal lang (nicht mal 6 Monate), HTML hingegen haben wir über mindestens drei Quartale behandelt, auch als Teil anderer Blöcke – inklusive begleitender Praxis in HTML-Dateien.

Mehrere meiner Mitschüler, die eigentlich sehr gut in Informatik sind (11–13 Punkte), hatten ebenfalls JavaScript und Datenbanken – und haben in der mündlichen Prüfung gerade mal 5 Punkte erreicht. Selbst diejenigen, die das „leichtere“ Thema hatten, meinten, dass die Verteilung ungerecht war.

Meine Frage an euch:

Haltet ihr als Informatiker*innen oder erfahrene ITler diese Verteilung für fachlich fair? Kann man HTML und JavaScript überhaupt als gleichwertige Prüfungsthemen bewerten – gerade unter schulischen Bedingungen?

Danke im Voraus für eure Meinungen!

HTML, Noten, JavaScript, Abitur, Informatik, Informatiker

Meistgelesene Beiträge zum Thema HTML