Wie baue ich in HTML das download-Attribut richtig ein?

Ich möchte auf meiner Webseite einen Link einbinden, über den man ein Bild herunterladen kann. Leider funktioniert das nicht, obwohl ich es genauso wie in den Tutorials mache. Das Bild wird erkannt und wenn man auf den Link klickt, wird bloß im selben Tab das Bild geöffnet, aber nicht heruntergeladen...

Source-Code:

<a href="media/img/restaurant.png" download> Download </a>

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

03.02.2022, 00:47

Sofern du deine Webseite testest, ohne sie dafür über einen Webserver ausspielen zu lassen (in der Adresszeile hättest du folglich eine file:///-Adresse), wird dein Browser die Anzeige des Download-Dialogs verhindern.

Benutze für Tests also auch einen Webserver. Sei es der IIS (Windows), der Apache Server aus dem Softwarepaket XAMPP, ein einfacher Node.js-Server oder irgendein anderer.

SalbertAmHof

Fragesteller

03.02.2022, 09:42

Warum funktioniert es nicht, wenn ich meine Webseite lokal aufrufe? Kostet ein Webserver nicht etwas?

regex9

03.02.2022, 11:56

@SalbertAmHof

Es dürfte mit der Same-Origin-Policy zusammenhängen. Der Download setzt voraus, dass die Datei von derselben Domain kommt. Wenn das HTML-Dokument allerdings über das file:///-Protokoll geladen wird, kann der Browser keine Domain erkennen.

Die von mir genannten Optionen sind allesamt kostenlos. Es handelt sich um Anwendungen, die du auf deinem Rechner installierst. Das heißt, die Webseite lässt sich durchaus lokal testen, aber eben nur über den Webserver.

Auf Windows reicht eine Standardinstallation der IIS-Features. Lediglich Abschnitt 1 und 3 dieses Artikels sind dafür relevant. Entweder du kopierst dir deine Seite danach in das Verzeichnis der Default-Webseite und rufst sie im Browser via http://localhost/deineseite.html auf oder du gehst noch weiter und erstellst im IIS Manager noch eine eigene Site (lies hier; nur Schritt 1-7, das HTTP-Protokoll sollte genügen) mit eigener Domain. Die gewählte Domain sollte in der hosts-Datei (lies hier) eingetragen werden:

127.0.0.1 deine-domain

Öffne danach deinen Browser und rufe die Seite über die Domain auf http://deine-domain/deineseite.html.

Noch zur zweiten Option (Apache-Webserver): XAMPP installieren und über das Control Panel den Apache Server starten. Deine Webseite legst du in das htdocs-Verzeichnis (das liegt im XAMPP-Installationsordner). Wenn du eine eigene Domain (statt localhost) verwenden möchtest, lies hier. Ansonsten erfolgt der Aufruf im Browser wie schon bei der IIS-Option über http://localhost/deineseite.html.

Alfi1986

03.02.2022, 00:07

Modernizer Javascript eingebunden? Kann sein, dass dies noch nicht von allen Browsern unterstützt wird.

SalbertAmHof

Fragesteller

03.02.2022, 09:41

Ich arbeite nicht mit JavaScript.

Alfi1986

03.02.2022, 09:47

@SalbertAmHof

Dann wird es meiner Meinung nach nicht funktionieren.

SalbertAmHof

Fragesteller

03.02.2022, 10:26

@Alfi1986

Hier im Video bei 2:21 hat es funktioniert. https://youtu.be/jlDfT57QzP4?t=141

Alfi1986

03.02.2022, 10:49

@SalbertAmHof

Hast du es so gemacht wie hier https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download2 - Falls nicht probier das. Ansonsten mach das über XAMP oder einen Server. Lokal kann nichts "heruntergeladen" werden.

SalbertAmHof

Fragesteller

03.02.2022, 11:50

@Alfi1986

Du meinst, einen Wert für das Attribut download angeben? Ja, das hab ich schon versucht. Funktioniert leider auch nicht. Im Video wird auch erklärt, dass das optional ist, wenn der Web-Entwickler möchte, dass die Datei unter einem bestimmten Namen gespeichert werden soll. (Auch Änderung der extension möglich) Ich denke wirklich, dass es nicht funktioniert, weil die Webseite nicht über einen Server aufgerufen wird. regex9 erklärte dies auch schon.

Hallo zusammen, seit kurzem bekomme ich diesen Fehler...

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://open.spotify.com/playlist/3RKBgf

(Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt). Statuscode: 200.

Weitere Infos

...wenn ich auf einen Link auf meiner Homepage klicke. Ich bin mir nicht sicher, ob ich das Problem richtig verstanden habe. Ist es so, dass Spotify verhindert, dass der Link quasi über Umwege (beispielsweise über eine Verlinkung eines images) aufgerufen werden kann? Wenn dem so ist, habe ich dann eine Chance den Link trotzdem auf meiner Homepage einzubinden? Oder missverstehe ich die Fehlermeldung vielleicht auch? Vor einigen Tagen hat der Link noch funktioniert, aber seit dem habe ich auch schon wieder viel an der Homepage geschraubt, ohne nun im Detail zu wissen, ab wann es nicht mehr funktioniert hat.

Mein Link sieht wie folgt aus:

<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="d-flex align-items-center">
    <a href="https://open.spotify.com/playlist/3RKBgfISwD(...)" style="margin-right: 15px;"><img height="35px" width="35px" src="img/spotify-icon.png" alt="spotify" id="spotify_logo">
    </a>
   </div>  
(...)
</nav>

Ich wäre euch sehr dankbar, wenn ihr mir helfen könntet.

...zur Frage

HTML style="" nur erster a href funktioniert?

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Autotuning</title>
<link rel="shortcut icon" href="T4Nissan 240 SX BR101.png" type="image/x-icon">
<meta name="description" content="">
<link href="styleSeite1.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br><br><center>
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/></a>
<a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235" style="align:/></a>
<a href="NFSUC.html"><img src="images/NFSUC.JPG" width="" height="241" style="align:/></a>
<a href="NFSC.html"><img src="images/NFSC.JPG" width="" height="237" style="align:/></a>
<a href="NFSMW2005.html"><img src="images/NFSMW2005.JPG" width="" height="230" /></a><br>
<a href="MC3DER.html"><img src="images/MC3DER.JPG" width="" height="250" style="vertical-align:/></a>
<a href="MCLACE.html"><img src="images/MCLACE.JPG" width="" height="250"/></a>
<a href="Gran Turismo 6.html"><img src="images/Gran Turismo 6.jpg" width="" height="250" /></a>
<a href="LEGO.html"><img src="images/LEGO.JPG" width="" height="250" /></a><br>
<a href="Modellbau.html"><img src="images/Modellbau.jpg" width="500" height="" align="top"/></a>
<a href="Sonstige.html"><img src="images/Sonstige.JPG" width="230" height="" align="top"/></a>
<a href="GTA5.html"><img src="images/Coil Cyclone.jpg" width="350" height="" align="top"/></a>
<a href="Silent Hill.html"><img src="images/Halo.JPG" width="185" height="" align="top"/></a>
</body>
</html>

durch ,,style=""´´ werden die Hyperlinks ohne Abstand platziert. Warum werden diese Hyperlinks gruppiert und alle außer dem erstem werden ignoriert? Die Frage ist leicht zu verstehen beim Blick auf den F12-Debugger im Browser. </style> löst das Problem nicht. autotuningyv.square7.ch/Seite1.html. Kann jemand den Quelltext bitte korrigieren?

...zur Frage

CSS-Datei einbinden: Was mache ich falsch?

Wenn ich die Seite lade, wird der Link quasi nicht beachtet, d.h. nur der <h1>-Teil wird angewandt, aber nicht die Farbe etc. geändert. Hab ich den href-Pfad nicht richtig angegeben?

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

SQL Datenbank in Webseite einbinden HTML

Hallo Leute,

ich muss für ein Schulprojekt eine MYSQL Datenbank erstellen (bereits erledigt) und diese nun auf eine Webseite einbinden. Wir haben dazu null Informationen bekommen und müssen uns das alles selbst irgendwie beibringen, allerdings habe ich davon überhaupt keine Ahnung. Bin gaar kein Programmierer! Hab jetzt keine Ahnung, was ich da wie genau machen muss. Alle "Tutorials" die ich bei google finde, sagen mir überhaupt nichts, weil ich einfach mit der Programmiersprache im Allgemeinen nichts anfangen kann (bin da nicht helle genug für oder so).

Kann mir bitte irgendeiner weiterhelfen? Tipps und Tricks, mögliche Infos und Hilfen wären super! Danke

...zur Frage

Jimdo Free - Link zu externer Seite wie einbinden?

Hallo,

ich habe mir bei Jimdo in der Free-Version eine kostenfreie Homepage für einen Blog zugelegt.

Nun habe ich versucht, den Link zu einer Veranstaltung, die hier in der Nähe stattfindet, dort zu verlinken, was aber leider nicht funktioniert.

Hat jemand Erfahrung damit und kann mir sagen, wie ich den Link so hinterlegen kann, dass, wenn man da drauf klickt, sich die andere Seite öffnet?

Vielen Dank schon mal.

...zur Frage

HTML - Wie lege ich verschiedene Bilder ebenen an?

Ich habe einen Hintergrund und will ein kleineres Bild im Hintergrund plazieren ..

wenn man auf das kleinere Bild klickt soll sich ein neuer Tab öffnen...

Finde keine passenden codes dafür..

...zur Frage

Wie kann ich eine Passwort geschützte PDF Datei per HTML in eine Webseite einbinden?

Hallo,

ich möchte eine Passwortgeschützte PDF Datei aus dem Internet in eine Webseite einfügen. Dies soll über eine Vorschau funktionieren und nicht als Link angezeigt werden. Normale PDF Dateien kann man ja per iframe einbinden, aber ich habe bisher keinen weg gefunden dies mit einer Passwortgeschützten PDF zu machen.

Beste Grüße

...zur Frage

Link hinter Bild per HTML?

Hi,

Ich würde gerne ein Bild auf einem HTML-Dokument einblenden. Beim Tipp/Klick auf das Bild soll zu einer anderen Seite (im Beispiel Google) weitergeleitet werden

Ist folgende Schreibweise richtig?

<a href=“https://www.google.de“><img src=“dateien/beispielbild.jpg“></a>

...zur Frage

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

<script>
        window.onscroll = function() {myFunction()};

        var navbar = document.getElementById("navbar");
        var sticky = navbar.offsetTop;

        function myFunction() {
        if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
    }
</script>

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

.content {
    padding: 16px;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .content {
    padding-top: 60px;
}

...zur Frage

Wie mache ich, dass wen man mit der mittleren Maustaste auf mein Div klickt, dass der vorhandene Link in einem neuen Tab öffnet?

...zur Frage

IMAGE Source dynamisch ändern in Xamarin Forms?

Ich möchte ein Bild in Code ändern wenn die App mit einem Tab geöffnet wird dann wird ein größeres Bild verwendet.

if (Device.Idiom == TargetIdiom.Tablet){
        HeaderImg.HorizontalOptions = LayoutOptions.Fill;
       HeaderImg.Source("LogoBG014LOONG.png"); //falscher Code, was kommt hier ?
      }

...zur Frage

Per Link Datei automatisch Downloaden?

Also ich bin eine Batch-Datei am Skripten und dazu benötige ich Dinge, welche nur in PowerShell funktionieren. Ich will es schaffen, dass mein Batch-Skript etwas von einer Webseite downloaded. Jedoch kann man mit einer Batch-Datei nur etwas öffnen:

z. B. start www.youtube.net

Gibt es irgendeine Webseite, bei der man ohne Download klicken muss, der Download gestartet wird sobald man auf der Webseite ist?

...zur Frage

Direkter Download Link zum File erstellen?

Moin!

Wie kann ich einen direkten downloadlink zu einem File erstellen? /sprich man klickt drauf und der Download startet direkt)

Vielen Dank für eure Antworten!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen