HTML5 – die neusten Beiträge

html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

Bild zum Beitrag
HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

  • Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
  • Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
  • Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
  • Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
  • Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
  • Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

Bild zum Beitrag
HTML, Webseite, programmieren, CSS, HTML5, Code, Informatik, Programmiersprache, Webdesign, Webentwicklung, Website Design

flask: jinja2.exceptions.TemplateNotFound: index.html | Wie fixen?

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>
HTML, Webseite, HTML5, Programmiersprache, Python, Webentwicklung, Python 3, Flask

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>
Browser, Linux, HTML, IT, Webseite, JavaScript, Ubuntu, HTML5, Informatik, Programmiersprache, Webentwicklung, Frontend, React, node.js, React Native

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)
Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html> 

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

Netzwerk, HTML, Webseite, JavaScript, HTML5, Code, Netzwerktechnik, Port, Programmiersprache, Python, Webentwicklung, JSON, Flask

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>
HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung, Visual Studio Code

stimmt dieser code?

ich hab was ausprobiert aber da scheint was falsch zu sein, sieht man einen Fehler auf den ersten blick?

schreibe den javascript code für ein spiel und erkläre hinterher wie es funktioniert
// variablen
let score = 0;
let time = 10;

// Elemente im HTML-Dokument auswählen
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const startButton = document.getElementById('start-button');
const gameArea = document.getElementById('game-area');

// Start
startButton.addEventListener('click', startGame);

function startGame() {
  startButton.disabled = true;
  score = 0;
  time = 10;
  scoreDisplay.textContent = score;
  timeDisplay.textContent = time;
  gameArea.addEventListener('click', increaseScore);
  countdown();
}

// Punktzahl erhöhen
function increaseScore() {
  score++;
  scoreDisplay.textContent = score;
}

// Countdown-Funktion
function countdown() {
  const timer = setInterval(() => {
    time--;
    timeDisplay.textContent = time;
    
    if (time === 0) {
      clearInterval(timer);
      endGame();
    }
  }, 1000);
}

// ende
function endGame() {
  gameArea.removeEventListener('click', increaseScore);
  startButton.disabled = false;
  alert('Deine Punktzahl: ' + score);
}

Der Code beginnt mit der Initialisierung einiger Spielvariablen:

(Punktzahl) und

(Zeit). Diese Variablen werden später im Spiel verwendet, um den Fortschritt des Spielers zu verfolgen.

Als Nächstes werden einige Elemente im HTML-Dokument ausgewählt, die zur Anzeige und Interaktion mit dem Spiel verwendet werden. Dazu gehören das Element, das die Punktzahl anzeigt (

), das Element, das die verbleibende Zeit anzeigt (

timeDisplay

), der Startbutton (

startButton

) und das Spielfeld (

gameArea

).

startButton

erhält einen Eventlistener, der auf das Klicken des Buttons reagiert. Sobald der Startbutton geklickt wird, wird die Funktion

startGame

aufgerufen.

Die Funktion

startGame

wird aufgerufen, wenn das Spiel gestartet wird. Sie deaktiviert den Startbutton, setzt die Punktzahl und die verbleibende Zeit auf ihre Ausgangswerte zurück und aktualisiert die Anzeige entsprechend. Ein Eventlistener wird dem Spielfeld hinzugefügt, um auf Klicks des Spielers zu reagieren und die Punktzahl zu erhöhen. Die Funktion

countdown

wird aufgerufen, um den Countdown zu starten.

Die Funktion

increaseScore

wird aufgerufen, wenn der Spieler auf das Spielfeld klickt. Sie erhöht die Punktzahl um eins und aktualisiert die Anzeige entsprechend.

Die Funktion

countdown

startet den Countdown von 10 Sekunden. Dazu wird ein Timer mit

setInterval

verwendet, der alle 1000 Millisekunden (1 Sekunde) die verbleibende Zeit um eins verringert und die Anzeige aktualisiert. Wenn die Zeit auf 0 reduziert wird, wird der Timer mit

clearInterval

gestoppt, und die Funktion

endGame

wird aufgerufen.

Die Funktion

endGame

beendet das Spiel. Sie entfernt den Eventlistener vom Spielfeld, aktiviert den Startbutton wieder und zeigt eine Benachrichtigung an, die die erreichte Punktzahl des Spielers anzeigt..

Bild zum Beitrag
JavaScript, HTML5

Java Script wird nicht ausgeführt?

hallo, und zwar wird bei mir nicht Java Script ausgeführt. Könnt ihr mir helfen woran dass liegt???

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Quiz Wuiz</title>

<link rel="stylesheet" href="/quiz.css">

</head>

<body>

  <img src="/logo.png" alt="img" id="img" class="img">

  <h1 id="title">Today's Quiz</h1>

  <div id="quiz-container">

    <div class="questions">

      <h2 id="question"></h2>

      <ol type="A">

        <li class="option"><span id="option0" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option1" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option2" onclick="calcScore(this)"></span></li>

        <li class="option"><span id="option3" onclick="calcScore(this)"></span></li>

      </ol>

      <h4 id="stat"></h4>

    </div>

    <div class="buttons">

      <button type="button" class="next">Next</button>

    </div>

  </div>

  <!-- scoreboard section -->

  <div id="scoreboard">

    <img src="/logo.png" alt="">

    <h2 id="score-title">Your Score</h2>

    <h2 id="score"></h2>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

    <button type="button" id="check-answer" onclick="checkAnswer()">Check Answers</button>

  </div>

  

  <div id="answerBank">

    <h2>Answers :</h2>

    <ol type="1" id="answers">

    </ol>

    <button type="button" id="score-btn" onclick="backToQuiz()">Back to Quiz</button>

  </div>

  

  <script src="/quiz.js"></script>

</body>

</html>

JAVA SCRIPT:

Bild zum Beitrag
HTML, Webseite, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung, Frontend

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

  jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung

Pinball-Game / JavaScript: Wie kann ich die Kollisionserkennung implementieren?

Hallo zusammen,

ich muss für die Uni ein kleines Single Page 2D-Spiel entwickeln. Die Backend REST-API mit Python, das Frontend mit HTML/CSS, die Logik mit JavaScript. Die Animationen sollen wir selbst entwickeln und nicht z.B. von canvas-Objekten übernehmen.

Ich versuche zurzeit ein Pinball-Spiel (Flipper-Automaten) und habe das Grundgerüst mit CSS gebaut. Nur habe ich mir die Kollisionserkennung deutlich leichter vorgestellt, als sie wahrscheinlich ist.

So sieht das Spielfeld momentan aus:

Die JavaScript-Logik sodass der Ball im Spielfeld bleibt, ist ja recht simpel:

  var ball = document.getElementById('ball');
  var playArea = document.getElementById('play-area');
  var ballRadius = 10;
  var playAreaWidth = playArea.offsetWidth; // 600
  var playAreaHeight = playArea.offsetHeight; // 820
  var ballX = playAreaWidth / 2; // Startposition des Balls in der Mitte des Spielfelds
  var ballY = playAreaHeight / 2; // X = 300, Y = 410
  var ballSpeedX = 3; // Geschwindigkeit des Balls in horizontaler Richtung
  var ballSpeedY = 3; // Geschwindigkeit des Balls in vertikaler Richtung
  
  function updateBallPosition() {
    // Aktualisiere die Position des Balls basierend auf der aktuellen Geschwindigkeit
    ballX += ballSpeedX;
    ballY += ballSpeedY;
  
    if (ballX + ballRadius > playAreaWidth || ballX - ballRadius < 0) {
      ballSpeedX *= -1; // Richtungswechsel in der horizontalen Richtung
    }
  
    if (ballY + ballRadius > playAreaHeight || ballY - ballRadius < 0) {
      ballSpeedY *= -1; // Richtungswechsel in der vertikalen Richtung
    }
  
    // Setze die neue Position des Balls
    ball.style.left = ballX + 'px';
    ball.style.top = ballY + 'px';
  }
  
  // Aktualisiere die Position des Balls alle 16 Millisekunden (ca. 60 Frames pro Sekunde)
  setInterval(updateBallPosition, 16);
}

Aber wie man es implementiert, sodass der Ball von den Hindernissen und Banden richtig abprallt, sodass ein Richtungswechsel entsteht, habe ich noch nicht wirklich verstanden. Hätte da jemand eine Idee oder Erfahrung, wie man hier an die Kollisionserkennung herangehen könnte?

LG und danke im Voraus. :)

Bild zum Beitrag
HTML, CSS, Java, JavaScript, HTML5, Informatik, Programmiersprache, Webentwicklung

Html und Css; Wieso wird der Text am Ende als Link dargestellt?

Hallo,

es geht um folgenden Code:

<!doctype html>
<html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="widt=device-width, initale-scale=1">
        <meta name="description" content="Beschreibung">
        <title>Test html Grundgeruest</title>
    </head>
    <body>
    </body>
</html>

</br>
</br>
</br>

ERSTELLUNG EINES LINKS</br>
<a href="irgendwohin.html">Hier Klicken</a>
Nach "href=" steht die Datei, die aufgerufen werden soll, diese muss in Gänsefüsschen stehen.</br>
"Hier Klicken" ist der für den Benutzer sichtbare Text, der angeklickt </br>
werden soll. Achtung Attribute wie href stehen immer nur im Start-Tag, nie im End-Tag.</br>
</br>
</br>
</br>

EINFÜGEN VON BILDERN</br>
<img src="https://localhost/Schulung_Html_und_Css/Html/Vorgang_02_HTML_Grundgeruest/Bilder/test.jpeg" alt="kurzbeschreibung" width="50px" height="50px">
</br>
</br>



    <!--
    - Beachte dass das Bild im selben Ordner liegen muss oder ein eindeutiger Link erzeugt werden muss.
    Wobei darauf zu achten ist, in welche die "/" schauen.
    -->
</br>
</br>
</br>
</br>



<p> Hier kann ein Text dargestellt werden </P>
<p> Hier kann ein weiterer Text dargestellt werden </p>
    <!--
    - Hat den Vorteil dass mit einem Stylesheet alle mit <p> gekennzeichneten "Container" mit einer Eingabe oder Umstellung Formatiert werden können.
    -->



<ul>
    <li><a href="https://www.google.com/">Google</></li>
    <li><a href="https://www.youtube.com/">Youtube</></li>
    <li><a href="https://www.bing.com/">Bing</></li>
    <li><a href="https://www.y-informer.com">y-informer.com</></li>
</ul>    

</br>
</br>
</br>

<p> Dies ist die Xampp installation</p>


    <!-- so wird ein Kommentar eingefügt. Dieser ist für den Besucher der Webseite nicht lesbar.
        Innerhalb des kommentars können auch html Befehle  eingegeben werden. Diese sollen zumindest
        keine auswirkungen auf die Eingabe haben.
        
        - Fehler der mir unterlaufen ist. Beim Einfügen von Bildern, sofern dieser im selben Ordner liegt muss hinter dem
        <img src noch ein "=" Zeichen. Wenn das Bild in einem leserlichen Format ist klappt es.
        -- Sofern das Bild an einem anderen Ort liegt, klappt es aber nicht, an der Lösung wird noch gearbeitet.
        
        Beachte:
        - Dateifadsangaben im internet -> "/"
        - Dateifadsangaben im Betriebssystem -> "\"
        - Die Angabe "localhost" beinhaltet bereits die "htdocs" entsprehcend ist im weiteren nur noch der Projektordner anzugeben.
        
        Merke: bei dem eigentlichen Turtorial:
        - Die Xamp Installation und Konfiguration durchgehen
        - kurze einführung wie das funktioniert mit dem Webspace -> PC -> Server -> Webspace -> Domain und so weiter.
        
    -->     


Wenn ich mir den Code im Browser ansehe wird der Teil unten:


<p> Dies ist die Xampp installation</p>

als Link dargestellt wieso ist das so?

HTML, Webseite, HTML5, Programmiersprache, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema HTML5