HTML – die neusten Beiträge

Programmiermentor, Aspergerautismus?

Guten Tag,

Ich bin 24 Jahre alt und habe einen Asperger-Autismus, wegen welchem es mir sehr schwer fällt, einen normalen Job zu behalten, da mich die meisten als Arrogant, Komisch, o.Ä. empfinden.

Daher will ich mir ein Fundament aufbauen im Bereich Programmieren, damit ich so eventuell dann irgendwann, in einem für mich erträglichen Arbeitsumfeld, arbeiten kann.

Von der Intelligenz her reicht es vollkommen, jedoch habe ich ein kleines Defizit; Wenn ich ein ganzes Thema neu anfange, habe ich viele Fragen, welche ich meist, von einem Mentor, beantwortet bekommen muss, sonst überstrapaziert es mich und ich krieg keinen klaren Kopf mehr. Sobald ich ein solides Fundament aufgebaut habe, kann ich selbstständig darauf aufbauen. Jedoch besitze ich noch kein derartiges Fundament. Lediglich HTML kann ich sagen, dass mein Fundament relativ gut ist. CSS jedoch merke ich, dass mir dieser Mentor fehlt.

Ich würde einen engagieren und bezahlen, jedoch fehlen mir die finanziellen Mitteln, weswegen das keine Option ist…

Lange Rede, kurzer Sinn: Kennt Ihr jemanden, der eventuell bereit wäre, ein solcher Mentor zu sein?

Ich könnte mich anderweitig revanchieren, indem ich Aufträge für ihn erfülle, sobald ich dazu fähig bin.

Ich wäre froh über eine Antwort und bitte nur Antworten, wenn Ihr eine Lösung habt. Ich will kein Mitleid oder sonstiges, sondern einfach eine Lösung finden.

vielen lieben Dank und ich freue mich auf eine Rückmeldung!

Lernen, HTML, IT, programmieren, CSS, JavaScript, Asperger-Syndrom, Autismus, mentor, Umschulung, Asperger-Autimus

Upload API mit NextJS und Azure Portal funktioniert nicht?

Hallo, ich bekomme wenn ich Videos über die API in Azure Portal hochlade immer eine Fehlermeldung. Manchmale sieht sie so aus:

Parsed files: {
  videoFile: [
    PersistentFile {
      _events: [Object: null prototype],
      _eventsCount: 1,
      _maxListeners: undefined,
      lastModifiedDate: 2024-12-17T10:12:37.964Z,
      filepath: 'C:\\Users\\thoma\\AppData\\Local\\Temp\\19612948a7cd7d81f78632e00.mp4',
      newFilename: '19612948a7cd7d81f78632e00.mp4',
      originalFilename: 'sample-2.mp4',
      mimetype: 'video/mp4',
      hashAlgorithm: false,
      size: 30424618,
      _writeStream: [WriteStream],
      hash: null,
      [Symbol(shapeMode)]: false,
      [Symbol(kCapture)]: false
    }
  ]
}

Manchmal (gefühlt oft bei kleineren Dateien) funktioniert es auch der Log sieht dann so aus:

Uploading file from path: C:\Users\thoma\AppData\Local\Temp\19612948a7cd7d81f78632e00.mp4
Request timed out!
File uploaded to Azure successfully: sample-2.mp4

Hier lade ich noch den API Code hoch:

import { BlobServiceClient, generateBlobSASQueryParameters, BlobSASPermissions } from '@azure/storage-blob';
import formidable from 'formidable';
import fs from 'fs/promises';
import { v4 as uuidv4 } from 'uuid';


export const config = {
  api: {
    bodyParser: false, // Disable default body parsing for file uploads
  },
};


// Azure Storage connection string
const AZURE_STORAGE_CONNECTION_STRING =
  'DefaultEndpointsProtocol=https;AccountName=innowesovideos;AccountKey=uyJz3dlCW/hd+t3Y48pSfuk1Q+pV63S1Hs48uvGIJW3ubaO/ngtSMrzoKRvBE4so7MP9zz73uaLl+AStwmS6EA==;EndpointSuffix=core.windows.net';


export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Only POST requests are allowed' });
  }


  let filePath = ''; // Variable to track the file path for cleanup


  try {
    // Set a timeout to prevent stalls
    const timeout = setTimeout(() => {
      console.error('Request timed out!');
      if (!res.writableEnded) {
        res.status(504).json({ message: 'Request timed out. Please try again.' });
      }
    }, 15000); // 15-second timeout


    // Initialize formidable for file parsing
    const form = formidable({
      keepExtensions: true, // Keep file extensions
      maxFileSize: 5000 * 1024 * 1024, 
    });
    console.log('New filesize')


    // Parse the incoming form data
    const { files } = await new Promise((resolve, reject) => {
      form.parse(req, (err, fields, files) => {
        if (err) {
          console.error('Error parsing form:', err);
          reject(err);
        } else {
          resolve({ fields, files });
        }
      });
    });


    console.log('Parsed files:', files);


    // Normalize videoFile input (handle single and multiple files)
    const fileData = Array.isArray(files.videoFile) ? files.videoFile[0] : files.videoFile;


    // Validate file presence and format
    if (!fileData || !fileData.filepath) {
      throw new Error('No video file provided.');
    }


    filePath = fileData.filepath;
    if (!filePath) throw new Error('No valid file path found.');
    if (fileData.mimetype !== 'video/mp4') throw new Error('Only MP4 files are allowed.');


    console.log('Uploading file from path:', filePath);


    // Generate a unique file name for Azure Blob Storage
    const fileName = fileData.originalFilename || `${uuidv4()}.mp4`;


    // Load the file as a buffer
    const fileBuffer = await fs.readFile(filePath);


    // Initialize Azure Blob Storage Client
    const blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);
    const containerClient = blobServiceClient.getContainerClient('videos');
    const blockBlobClient = containerClient.getBlockBlobClient(fileName);


    // Upload the file to Azure Blob Storage
    await blockBlobClient.uploadData(fileBuffer, {
      blobHTTPHeaders: { blobContentType: 'video/mp4' },
    });
    // Generate a SAS token for the uploaded file
    const sasToken = generateBlobSASQueryParameters(
      {
        containerName: 'videos',
        blobName: fileName,
        permissions: BlobSASPermissions.parse('r'), // Read permissions
        startsOn: new Date(),
        expiresOn: new Date(new Date().valueOf() + 3600 * 1000), // Token valid for 1 hour
      },
      blobServiceClient.credential
    ).toString();
    const videoUrl = `${blockBlobClient.url}?${sasToken}`;
   
    clearTimeout(timeout);

    return res.status(200).json({ message: 'Video uploaded successfully', videoUrl });
  } catch (error) {
    console.error('Error during upload:', error.message);
    return res.status(500).json({ message: 'File upload failed', error: error.message });
  } finally {
    
    if (filePath) {
      try {
        await fs.unlink(filePath);
        console.log(`Temporary file deleted: ${filePath}`);
      } catch (cleanupErr) {
        console.error(`Failed to delete temporary file: ${filePath}`, cleanupErr);
      }
    }
  }
} 

Danke!

HTML, JavaScript, Programmiersprache, Webentwicklung, azure, React

Problem mit HTML?

Hallo, ich habe ein Problem mit meiner Login page:
-"Haben Sie schon einen Account?" wird einf nicht angezeigt. Ich habe keine Ahnung woran es liegt. Hier der Code:

<!DOCTYPE html>
<html lang="de">
<head>
<title>LOGIN</title>
<meta charset="UTF-8">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="css/style_Login.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up">
<form action="signup-check.php" method="post">
<h1>Neuer Account</h1>
<?php if (isset($_GET['error'])) { ?>
<p class="error"><?php echo $_GET['error']; ?></p>
<?php } ?>
<?php if (isset($_GET['success'])) { ?>
<p class="success"><?php echo $_GET['success']; ?></p>
<?php } ?>
<span>Registrieren</span>
<!-- Name-->
<?php if (isset($_GET['name'])) { ?>
<input type="text"
name="name"
placeholder="Name"
value="<?php echo $_GET['name']; ?>">
<?php }else{ ?>
<input type="text"
name="name"
placeholder="Name">
<?php }?>
<!-- Benutzername-->
<?php if (isset($_GET['uname'])) { ?>
<input type="text"
name="uname"
placeholder="Benutzername"
value="<?php echo $_GET['uname']; ?>">
<?php }else{ ?>
<input type="text"
name="uname"
placeholder="Benutzername">
<?php }?>
<!-- Passwort-->
<input type="password"
name="password"
placeholder="Passwort">
<input type="password"
name="re_password"
placeholder="Passwort wiederholen">
<!--submit-->
<button type="submit">Los gehts</button>
</form>
</div>
<div class="form-container sign-in">
<form action="login.php" method="post">
<h1>Anmelden</h1>
<span>Einloggen mit Benutzernamen und Passwort</span>
<?php if (isset($_GET['error'])) { ?>
<p class="error"><?php echo $_GET['error']; ?></p>
<?php } ?>
<input type="text" name="uname" placeholder="Benutzername">
<input type="password" name="password" placeholder="Passwort">
<a href="#">Passwort vergessen?</a>
<button type="submit">Los gehts</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Haben Sie schon <br>einen Account?</h1>
<p>Einloggen mit Name & Passwort</p>
<button class="hidden" id="login">Los gehts</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hii, </h1>
<p>erstellen Sie einen Account bei "PROX", um für alle Situationen vorbereitet zu sein</p>
<button class="hidden" id="register">Registrieren</button>
</div>
</div>
</div>
</div>
<script src="js/script_Login.js"></script>
</body>
</html>
HTML, Frontend

Website lädt Datei nicht hoch, warum?

Moin, kennt sich vielleicht jemand mit PHP und Html aus und weiß warum beim Upload der Datei nicht das Script "upload.php" ausgeführt wird? Versuche mich gerade beim Scripten, stehe allerdings gerade voll auf dem Schlauch... Danke!

<?php include 'header.php'; ?>
<?php
if(!isset($_SESSION['email'])){
  header('location:login.php');
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
}
 ?>
      <div class="breadcrumb">
        <div class="container">
            <a class="breadcrumb-item" href="index.php">Home</a>
            <span class="breadcrumb-item active">Welecome <?php echo $_SESSION['email'] ?></span>
            <span class="breadcrumb-item active">Upload Video</span>
        </div>
    </div>
    <section class="static about-sec">
        <div class="container">
            <h1>Upload Video</h1>
            <div class="form">
                <form class="" action="videoUpload.php" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="hidden" name="id" value="">
                            <label for="name">Name of Video:</label>
                            <input type="text" name="name" value="" placeholder="Fantasy World" required>
                            <label for="video_url">Video URL</label>
                            <input type="file" name="video_url" required>
                            <label for="description">Description</label>
                            <input type="text" name="description" value="" placeholder="">
                            <label for="category">Category</label>
                            <select name="category">
                              <option value="Classic">Classic</option>
                              <option value="Adventerous">Adventerous</option>
                              <option value="Nature">Nature</option>
                              <option value="Others">Others</option>
                            </select>
                          </div>
                        </div>
							<div class="col-lg-8 col-md-12">
							<form action="upload.php" method="post" enctype="multipart/form-data">
							<input type="submit" class="btn black" value="Upload Image" name="submit">
							</form>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>


    <?php include 'footer.php';?>
HTML, Webseite, HTML5, Code, Datenbank, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung

Warum wirft htmlspecialchars einen Syntaxfehler in meinem PHP-Webshop-Code?

<?php
include 'db.php';

$query = "SELECT * FROM products";
$result = $conn->query($query);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Webshop</title>
    <style>
        /* Basic styling for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Styling for the main heading */
        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        /* Container for all products */
        .products-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
        }

        /* Individual product card */
        .product-card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 200px;
            text-align: center;
            padding: 15px;
            transition: transform 0.2s;
        }

        .product-card:hover {
            transform: scale(1.05);
        }

        /* Styling for the product image */
        .product-card img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            transition: opacity 0.2s;
        }

        .product-card img:hover {
            opacity: 0.8;
        }

        /* Styling for product name */
        .product-card h2 {
            font-size: 1.2em;
            color: #333;
            margin: 10px 0;
        }

        /* Styling for product description and price */
        .product-card p {
            color: #666;
            font-size: 0.9em;
            margin: 5px 0;
        }

        .product-card .price {
            font-weight: bold;
            color: #2a9d8f;
        }

        /* Link styling */
        a {
            text-decoration: none;
            color: inherit;
        }
    </style>
</head>
<body>
    <h1>Products</h1>
    <div class="products-container">
        <?php while ($product = $result->fetch_assoc()): ?>
            <div class="product-card">
                <a href="product.php?id_product=<?= htmlspecialchars( $product['id_product']) ?>">
                    <h2><?= htmlspecialchars( $product['produktname']) ?></h2>
                    <!-- Make the image clickable to open the product details page -->
                    <img src="<?= htmlspecialchars($product['image_url']) ?>" alt="<?= htmlspecialchars($product['produktname']) ?>">
              
                <p><?= htmlspecialchars($product['produktbeschreibung']) ?></p>
                <p class="price">Price: €<?= htmlspecialchars($product['preis_pro_prod']) ?></p>
                  </a>
            </div>
        <?php endwhile; ?>
    </div>
</body>
</html>
HTML, CSS

Fokus-Keyphrase Yoast SEO - Beispiel?

Bin noch relativ neu mit SEO obwohl ich schon lange Webentwicklung mache und WordPress nutze und da ist das bekannteste wahrscheinlich Yoast SEO (oder Rank math). Ich hatte Yoast installiert und überall mit ChatGPT lesbare Titel erstellen lassen zb. Startseite – Fitnessstudio Firma XY | Fitness in Dortmund, Essen & Hamburg
Bei Fokus-Keywords habe ich [Firma XY Fitness Dortmund Essen Hamburg Kraftsport Kardio Zirkeltraining Bodybuilding Gruppentraining Personal Training Sauna [bekannter Inhaber]] ohne Komma.
(Als einfaches Beispiel, es geht nicht um Fitness).
Ich denke mal dass ich das Fokus Keyword falsch verstanden habe und das man auch nur 1 einziges Fokus Keyword haben darf wie [Personal Training]?
Und man stark auf einen Vorteil gegenüber der Konkurenz gehen soll mit dem Keyword wie das Personal Training im Vordergrund steht und nichts anderes oder nichts anderes als Erholungssport (Zumindest im Free Plan glaube ich).
Die Sache ist aber das dieses Unternehmen beispielsweise einfach "nur" besser ist (ist nicht mein unternehmen deswegen sag ich die wahrheit) als die anderen.

Es ist klar das Fitness Studios alle dasselbe anbieten, ähnliche Preise haben und alle wahrscheinlich gut sind. Nur wenn dieses Unternehmen allgemein besser ist und nicht das Rad neu erfindet oder mit irgendeinem Quatsch wirbt was macht man da ? Einfach "Premium" oder "Hochwertig" nutzen ? Das machen schon die Konkurenz obwohl es garnicht so ist anhand der Website Qualität.
Gibt es Gruppen wo man andere Leute mal drüber gucken lassen kann und nach der Meinung Fragen kann ?
Englisch Sprachige Foren kenne ich bringt mir aber nicht viel wenn sie die Sprache nicht können und ich möchte nicht Outsourcen sondern SEO besser verstehen und erlernen als Webentwickler. Die Technische Seite kenne ich schon wie Performance und Ladezeiten, Nutzerfreundlichkeit darauf habe ich geachetet. Nur ist Yoast SEO und Wordpress etwas anders als wenn man mit React/Next.js arbeitet

Computer, Marketing, Homepage, Internet, Browser, Web, HTML, IT, Webseite, CSS, WordPress, JavaScript, Suchmaschine, CMS, Drupal, Informatik, PHP, Programmiersprache, SEO, Typo3, Webdesign, Webentwicklung, React, SEO-Tool, Laravel

2 DIV mit CSS responsiv nebeneinander platzieren?

Hallo allerseits, ich versuche gerade seit zwei Tagen verzweifelt den gleichen Look zu kriegen wie der FAQ-Bereich auf folgender Seite ganz unten: https://rlax.me/

Das heißt ich möchte auf beiden Seiten mehrere Slide-Elemente haben, die unabhängig voneinander auf und zu gehen. Auf kleineren Displays soll es dann zusammengerückt werden, sodass der rechte Bereich dann unter dem unteren angezeigt wird. Aber irgendwie bekomme ich es einfach nicht hin. Ich hoffe Ihr könntet mir vielleicht etwas auf die Sprünge helfen. Hier mein Code aktuell:

<html>
<head>
<style>
	
	#left { display:block; }
	#right { display:block; }
  
  .slides {padding:0px; margin:0px auto;} 
  
  .show {display:grid; grid-template-rows:0; overflow:hidden; transition:0.75s; width:100%; margin:5px 0;}
  .show-start {min-height:0;}
  .show-end {min-height:0; align-self:end;}
  .show p {margin:0; padding:0; text-align:justify; color:#121212;}
  details.more[open] + div {grid-template-rows:10fr; padding-bottom:10px; outline:0;} 
  details summary {cursor:pointer; -webkit-tap-highlight-color:#000000; color:#121212; background-color:lightgrey; padding:10px}
  details summary:focus {outline:none !important;}
</style>
</head>




<body>
<div class="slides" id="left">
	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>


	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>
</div>


<div class="slides" id="right">
	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>


	<details class="more"><summary>The Night Café</summary></details>
	<div class="show">
		<div class="show-start">
			<p>The Night Café (French: Le Café de nuit) is an oil painting created by Dutch artist Vincent van Gogh in September 1888 in Arles.[1] Its title is inscribed lower right beneath the signature. The painting is owned by Yale University and is currently held at the Yale University Art Gallery in New Haven, Connecticut.</p>
			<br>
			<p>The interior depicted is the Café de la Gare, 30 Place Lamartine, run by Joseph-Michel Ginoux and his wife Marie, who in November 1888 posed for Van Gogh's and Gauguin's Arlésienne; a bit later, Joseph Ginoux evidently posed for both artists, too.</p>
			<p><a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikepedia</a></p>
		</div>
	</div>
</div>

</body>
</html>  
HTML, CSS, Webdesign, Responsive Webdesign

Datenbank SQL Lite hilfe?

Hallo,

ich bin dabei Python zu lernen und wollte ein Ticket system erstellen womit man nur die Maus benutzen braucht ich bin auch schon fast fertig alles funktioniert wunderbar allerdings gibt es ein Problem und zwar will ich das 2 Nutzer gleichzeitig Tickets bzw. zeilen inder Tabelle ausfüllen können. das funktioniert nicht so ganz wenn 2 benutzer Angemeldet sind und beide das Programm gestartet haben (Beide Computer sind an gleiches Lokales Netzwerk verbunden) ist es so das der eine Nutzer seine EInträge macht der 2te Nutzer kann entweder keine Einträge machen oder er macht welche aber in seiner Tabelle entstehen zeilen vom anderen nutzer die leer sind. Das Problem scheint SQL Lite zu sein. Ist wohl nicht ganz ausgelegt das 2 nutzer gleichzeitig arbeiten. ich wollte aber das ganze Offline belassen ohne My SQL oder so davon habe ich ehh keine ahnung.

Jetzt habe ich CHAT GPT gefragt und er sagt mir es gibt eine möglichkeit mit Warteschlange um genau zu sein hat er das gesagt :

Datenbank-Verwaltung im Code: Falls du SQLite unbedingt verwenden möchtest, kannst du im Python-Programm sicherstellen, dass nur ein Nutzer gleichzeitig schreibend auf die Datenbank zugreift. Du könntest dazu eine Warteschlange einrichten, die Schreibanforderungen von verschiedenen Nutzern entgegennimmt und nacheinander ausführt.

also das hört sich genau richtig an und daher wollte ich fragen ob sich jemand damit auskennt da Datenbank für mich so 0 Ahnung.

SQL, HTML, JavaScript, Datenbank, Programmiersprache, Python, Python 3

Wie kann ich einen Button nach dem Laden einer Webseite aktiviert aussehen lassen?

Ich habe mir für mein Intranet ein kleines Video-Portal programmiert - das eigentlich ganz gut funktioniert.
Oben gibt es eine aufklappbare Ansicht mit Haupt und Unterkategorien und wenn eine Unter-Kategorie angeklickt wird öffnet sich die Seite mit einer Übersicht relevanter Videos.

Die Haupt-Kategorie gebe ich als URL-Parameter mit -> das funktioniert auch und es wird verdeckt die zu letzt verwendete Hauptkategorie angewählt.

Was nicht funktioniert, ist den Button für die aktuelle Hauptkategorie im Reitermenü so hervor zu heben als wenn er angeklickt wurde - bzw. den Button zu aktivieren.

JavaScript:

function openCity(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;


  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }


  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

PHP-Script:


$cat = "Musik";
if (isset($_GET['cat']))
{
$cat = ($_GET['cat']);
}

echo '<details><summary> Kategorien: </summary>';
echo '<div class="tab">';

echo '<button type="button" name="Musik" class="tablinks" onclick="openCity(event, \'Musik\')">Musik</button>
<button type="button"  name="Anleitungen" class="tablinks" onclick="openCity(event, \'Anleitungen\')">Anleitungen</button>
<button type="button"  name="Kochen" class="tablinks" onclick="openCity(event, \'Kochen\')">Kochen</button>
<button type="button"  name="Backen" class="tablinks" onclick="openCity(event, \'Backen\')">Backen</button>
<button type="button"  name="Heimwerken" class="tablinks" onclick="openCity(event, \'Heimwerken\')">Heimwerken</button>';
  
echo '</div>';

echo '<!-- Tab content -->
<div id="Musik" class="tabcontent">
<div style="column-count: 5;">
'.$category_Musik.'
</div>
</div>

<div id="Anleitungen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Anleitungen.'
</div>
</div>

<div id="Kochen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Kochen.'
</div>
</div>

<div id="Backen" class="tabcontent">
<div style="column-count: 5;">
'.$category_Backen.'
</div>
</div>

<div id="Heimwerken" class="tabcontent">
<div style="column-count: 5;">
'.$category_Heimwerken.'
</div>
</div>';

echo '</details>';

echo '<SCRIPT type="text/javascript" language="JavaScript">
openCity(event, \''.$cat.'\'); 
</SCRIPT>';

CSS-Definitionen:



/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

so sieht es aus:

so soll es nach dem Laden der Seite aussehen:

Hat jemand eine Idee wie ich den Button für die aktuelle Kategorie beim Laden der Seite automatisch aktivieren kann?

Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Webdesign, Webentwicklung

Wie erstelle ich eine simple HTML Website mit Github Pages?

Moin,

ich verstehs wirklich nicht. Habs jetzt online als auch mit dem Github Desktop Client versucht und ich kriegs nicht hin. Es gibt Videos von vor 3 Jahren die das erklären, dann die offizielle Erklärung von Github selbst und die Erklärung von ChatGPT und nichts scheint zu funktionieren.

Ich versuch mal zu erklären was ich versucht habe: Scheinbar muss ich meinen Benutzername als Name meines Repositories angeben und in diesem Format schreiben: username.github.io. Mein Username ist beispielsweise jetzt Johannes623, das heißt meine Repository soll johannes623.github.io heißen. Außerdem soll die Repository öffentlich sein und eine README-File enthalten. Soweit so gut.

Als nächstet aktiviert man Github Pages in den Einstellungen. Dort wählt man dann "Deploy from a branch" und dann "main und /root" als Branch aus. Jetzt geht man zurück zur README-Datei und fügt dort den Code der Website ein. Danach geht man zurück zur Github Pages Seite und schaut ob die Website unter der Domain erreichbar ist.

So wurde es mir erklärt. Problem ist nur, dass all das hier nicht funktioniert.

Kann mir jemand sehr simpel und strukturiert erklären, wie ich es hinbekomme eine Website zu erstellen? Und am besten noch dazu erklären, wie ich eine Custom Domain zu dieser Website hinzufügen kann? (Hab eine bei einem anderen Anbieter gekauft).

Vielen vielen Dank schonmal im Vorraus!!

Homepage, HTML, Webseite, CSS, JavaScript, Code, Webdesign, Webentwicklung, Webhosting, github

Meistgelesene Beiträge zum Thema HTML