Verwandte Themen
Frage
von lschecker90gf
31.05.2023, 17:55
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
1 Antwort
Frage
von lschecker90gf
31.05.2023, 14:02
Html und Css; Einbinden von Bildern - Irgendwie klappt es nicht?

Hallo,

ich experimentiere gerade wieder ein wenig im Bereich html rum.

irgendwie funktioniert das mit dem EInfügen von Bildern nicht wirklich.

Kann mir irgendjemand sagen wo der Fehler liegt?

Hier der html-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"test.jpeg" alt="kurzbeschreibung">


        <!-- 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.-->

Das Bild wird auchnicht angezeigt, wenn ich den gesamten Link einfüge.
HTML, Webseite, CSS, HTML5, Programmiersprache, Webdesign, Webentwicklung
2 Antworten
Frage
von GPM23
26.05.2023, 20:36
Strato Web-Baukasten anpassen?

Noch einmal vorab, nicht ich habe mir den Mis... gekauft, wollte jemanden helfen, der die Seite benötigt. Wenn sich also jemand mit Tricks im Strato Baukasten auskennt und so lieb sein mag, konstruktive Ansätze mit mir zu teilen, wäre ich sehr dankbar.

Hallo,

Es geht um einfachste Abläufe, die sich im Strato Baukasten nicht verwirklichen lassen. Der Strato Service war sehr hilfreich (Ironie)! Wenn jemand selbst schon Ideen über Umwege gefunden hat, würde ich mich sehr über einen Ideenaustausch freuen.

Alle Fragen wurden beantwortet mit "Ja, das sehen Sie leider richtig, dies ist nicht vorgesehen" weitere Aussage "Aber schreiben Sie das bitte als Wunsch und Beschwerde, das hören wir seit Jahren." :-(

Zu den Problemen:

Also lange Texte kann man nicht einfach kürzen und mit beispielsweise ...weiter kürzen, dies geht nur über eine versteckte Seite im Untermenü! Ebenso auf dieser versteckten Seite mit einem ...zurück!

Soweit so Gut (Schlecht), denn die ...zurück Verlinkung, kann man intern nur auf den Hauptreiter oder Unterseite oder versteckte Seite lenken! Bin ich aber in der Mitte der "Home" Seite (habe also dort drüber schon verschiedene Themen) und möchte jetzt ein Produkt beschreiben.

Also binde ich dort den ...weiter Link ein und möchte dann zurück auf die gleiche Höhe, ist dies nicht möglich, sondern man fängt ganz oben bei "Home" wieder an, da man den Bereich nicht wählen kann, wohin es zurückgehen soll :-(

Es gibt noch nicht einmal die Möglichkeit eines simplen "Ziehharmonika Effektes!"

Mit dem “Embed-Widget” hatte ich die Hoffnung, eine Art von Code einbinden zu können, aber trotz richtiger Codes, versteht das Tool wohl nur bestimmte Codes von Fremdseiten?!

Sollte sich schon einmal jemand mit diesem furchtbaren Baukasten beschäftigt haben und Ideen oder Tricks benennen können, wäre ich sehr dankbar. Es kann ja nicht sein, dass ich, dem Service von Strato erkläre, wie man gewisse Sachen bei Ihnen “faken” kann und dies leider auch nonstop muss (Thema Mehrsprachigkeit).

Mein Kopf raucht und ist müde, also sollte es jemanden da draußen geben, der am besten einen Ordner mit allen Strato-Tricks besitzt, wie man den Strato-Baukasten nutzen kann, lasse es mich bitte wissen. 

Fragen, warum ich mir den Stress überhaupt antue?! Ich wurde leider gefragt, ob ich helfen kann, da diejenige es für ein Jahr gekauft hat (Geld weg und 14 Tage um), wurde ich um eine Lösung für das Produkt/Problem gebeten.

Ich freue mich auf hilfreiche Antworten.

Danke GPM

Homepage, HTML, Webseite, CSS, JavaScript, Strato, Webentwicklung
2 Antworten
Frage
von Tyylag
23.05.2023, 13:20
Wie kann ich eine Tabelle aus einem Array im local storage rendern?

Moin! Ich muss in HTML einen kleinen Blog erstellen. Ich habe es bereits geschafft Blog Beiträge zu den Favoriten hinzuzufügen und die relevanten infos im Local Storage zu speichern. Das Array sieht so aus:

titel: "TestArtikel1",

autor: "Max Mustermann",

url: "http://TestArtikel1.html",

bild_url: "http://img/Artikelbild1.jpg",

Nun geht es darum mit js eine funktion zu schreiben mit der man das Array aus dem local Storage auf der Seite zu rendern. Kennt sich zufällig jemand damit aus und kann mir helfen das ich die Tabelle gerendert bekomme? Hab garantiert nicht alle relevanten infos hier in der Frage drin falls noch was fehlt bitte gerne kurz bescheid sagen :) Die momentane Funktion sieht bei mir so aus:

function renderFavoriten() {

    const favoriten = JSON.parse(localStorage.getItem('favoriten'));

 

    const tableBody = document.getElementById('favoriten-body');

    tableBody.innerHTML = ''; // Lösche alle bestehenden Zeilen

 

    if (favoriten && favoriten.length > 0) {

      favoriten.forEach((favorit, index) => {

        const row = document.createElement('tr');

 

        const titelCell = document.createElement('td');

        titelCell.textContent = favorit.titel;

        row.appendChild(titelCell);

 

        const autorCell = document.createElement('td');

        autorCell.textContent = favorit.autor;

        row.appendChild(autorCell);

 

        const entfernenCell = document.createElement('td');

        const entfernenButton = document.createElement('button');

        entfernenButton.type = 'button';

        entfernenButton.textContent = 'Aus Favoriten entfernen ❌';

        entfernenButton.addEventListener('click', () => {

          entferneVonFavoriten(index);

          renderFavoriten();

        });

        entfernenCell.appendChild(entfernenButton);

        row.appendChild(entfernenCell);

 

        tableBody.appendChild(row);

      });

    } else {

      const emptyRow = document.createElement('tr');

      const emptyCell = document.createElement('td');

      emptyCell.colSpan = 3;

      emptyCell.textContent = 'Keine Favoriten vorhanden';

      emptyRow.appendChild(emptyCell);

      tableBody.appendChild(emptyRow);

    }

  }

 

  // Rufe die Funktion zum Rendern der Favoriten-Tabelle auf

  renderFavoriten();

Vielen Dank im vorraus!

HTML, Webseite, JavaScript, HTML5
1 Antwort
Frage
von Reyana
23.05.2023, 01:54
Wie kann man zwei Bedingungen in einen JQuery schreiben?

Guten Tag :)

Ich verzweifle an einem Problem bei einem Live Search Feldes in einer Art Telefonbuch. Ich suche einen Vornamen in dem Input, und er zeigt mir alle Personen die diesen Vornamen haben.

Hauptseite (gekürzt):

...jquery-3.5.1.min.js...
...jquery/1.11.3/jquery.min.js...

<script>$(document).ready(function(){  $('.Suchfeld input[type="text"]').on("keyup input", function(){    /* Bei Änderung des Feldes Daten übertragen */    var inputVal = $(this).val();    var resultDropdown = $(this).siblings(".Ergebnisse");    if(inputVal.length){      $.get("daten.php", {s: inputVal}).done(function(data){        // Zeige Ergebnisse        resultDropdown.html(data);        $("#Suchfeld").focusout(function () { → Hier das Problem          $('#Ergebnisse').css('display', 'none');        });        $("#Suchfeld").focusin(function () {          $('#Ergebnisse').css('display', 'block');        });      });    } else{      resultDropdown.empty();    }  });
  // Angeklicktes ins Feld  $(document).on("click", ".Ergebnisse p", function(){    $(this).parents(".Suchfeld").find('input[type="text"]').val($(this).text());    $(this).parent(".Ergebnisse").empty();  });});</script></head><body>
<div class="Suchfeld"><input type="text" autocomplete="off" placeholder="" name="Suchfeld" id="Suchfeld"><div class="Ergebnisse" name="Ergebnisse" id="Ergebnisse"></div></div>

So sieht das aus:

Funktionen:

Wenn ich den Focus verliere (also etwas anderes auf der Seite anklicke oder TAB drücke) wird das blaue Dropdown Menü geschlossen. Wenn ich es wieder anklicke, wird es wieder ausgeklappt.

Wenn einer der Namen angeklickt wird (z.B. Dennis in diesem Fall) soll der Name in das Input Feld übertragen werden.

Problem:

Das mit dem Namen anklicken hat nur so lange geklappt, bis ich das mit dem Focus verlieren eingebaut habe. Als das drin war, hat es nicht mehr geklappt. Wieso? Weil in dem Moment, wo ich einen Namen anklicke, der Focus von dem Input Feld verloren geht. Also ich klicke auf Dennis, und noch bevor er den Namen in das Input überträgt, verliert er den Focus und schließt das Dropdown Menü sofort wieder.

Daher brauche ich eine zweite Bedingung, nämlich dass das Dropdown Menü beim verlieren des Focus nur geschlossen werden soll, wenn die Maus gerade nicht über dem Dropdown Menü ist.

Also der Code hier:

$("#Suchfeld").focusout(function () {
$('#Ergebnisse').css('display', 'none');
});

Soll nur ausgeführt werden wenn focusout zutrifft und wenn die Maus NICHT drüber ist. Mouseout ist hierfür nicht so geeignet, weil es erst aktiviert wird, wenn man die Maus von drin rausbewegt. Es soll aber immer aktiviert werden wenn die Maus gerade nicht drüber ist, ohne sie erstmal rein und dann wieder raus zu bewegen.

Daher die Bedingungen

  1. Input Feld kein Focus
  2. Maus nicht drüber

Ich verzweifle echt an diesem Problem und wäre sehr dankbar für eine Lösung.

Vielen Dank an die Community <3

Wie kann man zwei Bedingungen in einen JQuery schreiben?
HTML, Webseite, JavaScript, JQuery, Programmiersprache, Webentwicklung
1 Antwort
Frage
von rothauerleon
18.05.2023, 20:28
Javascript Updatefunktion mittels API?

Hallo und zwar möchte ich mit meiner Javascriptdatei eine Notiz bearbeiten und dann die alte notiz durch die bearbeitete Notiz ersetzen. Meine Delete funktion und Add funktion funktioniert bereits, nur die Update funktion nicht, da immer eine neue Notiz erstellt wird obwohl es eigentlich sie ersetzen soll. Kann mir jemand helfen? 

editButton.addEventListener("click", () => {
   editNote();
  });
function editNote() {
  const listItem = document.querySelector("li.selected");
  const noteId = listItem.getAttribute("data-id");
  const noteTitle = listItem.querySelector("h3").textContent;
  const noteDescription = listItem.querySelector("p").textContent;
 
  noteTitleInput.value = noteTitle;
  noteDescriptionInput.value = noteDescription;
  addNoteButton.textContent = "Update Note";
 
  addNoteButton.addEventListener("click", () => {
   const updatedNoteTitle = noteTitleInput.value.trim();
   const updatedNoteDescription = noteDescriptionInput.value.trim();
 
   if (updatedNoteTitle !== "" && updatedNoteDescription !== "") {
    updateNoteInAPI(noteId, updatedNoteTitle, updatedNoteDescription);
    clearNoteInputs();
    popupBox.classList.remove("show");
    addNoteButton.textContent = "Add Note";
   } else {
    alert("Please fill in all fields.");
   }
  });
 
  popupBox.classList.add("show");
 }
 function updateNoteInAPI(noteId, title, description) {
  const updatedNote = {
   titel: title,
   notiz: description,
  };
 
  fetch(`http://localhost:3020/notiz/${noteId}`, {
   method: "PUT",
   headers: {
    "Content-Type": "application/json"
   },
   body: JSON.stringify(updatedNote)
  })
   .then(response => {
    if (response.ok) {
     fetchNotes();
    } else {
     throw new Error("Failed to update note in API.");
    }
   })
   .catch(error => console.log(error));
 }
HTML, Webseite, JavaScript, Programmiersprache, Webentwicklung
1 Antwort
Frage
von DrakeKL
16.05.2023, 08:10
HTML Kalender ohne JavaScript oder PHP erstellen?

Hallo zusammen,

ich möchte mit HTML einen Kalender erstellen, der allerdings nicht statisch sein soll. Damit meine ich nicht unbedingt, dass jeder manuell auf der Webseite Daten eintragen kann, sondern dass man zwischen den Monaten navigieren kann. Zum Beispiel innerhalb einer Zeitspanne von August 2022 bis August 2025 oder so. Dabei soll der Kalender beim Aufrufen der Seite, wenn möglich, den aktuellen Monat zeigen und durch Klicken auf ein Symbol (oder eventuell Drücken der Links- / Rechtstaste auf der Tastatur) kann man auf den vorherigen oder nächsten Monat wechseln.

Ich möchte das - verständlicherweise - nicht durch das Erstellen von 37 verschiedenen HTML-Dokumenten erreichen, durch die man dann mit Hyperlinks zwischen diesen Seiten hin und herwechseln kann.

Das Problem ist, dass ich sowohl von JavaScript als auch von PHP absolut keine Ahnung habe und auf keinen Fall irgendwo im Internet einen fünfzig-Zeilen-Code (JavaScript, PHP oder sonst irgendeine Programmiersprache) kopieren will, den ich zu 99,9% selbst nicht verstehen würde.

Weiß einer, wie ich so etwas nur mit HTML und CSS (und eventuell, wenn es sein muss, auch mit Java) hinbekomme?

P. S. Bitte gebt mir keine Antworten vom Stil "lerne einfach JavaScript". Das ist keine hilfreiche Antwort, da ich es eben ohne JavaScript erreichen will!

Computer, Technik, HTML, IT, Webseite, Kalender, CSS, JavaScript, Informatik, interaktiv, PHP, Programmiersprache, Softwareentwicklung, Technologie, Webdesign
7 Antworten

Meistgelesene Fragen zum Thema HTML
Mehr meistgelesene Fragen zu HTML