Html Symbol mit Link versehen?
Wie kann ich ein Bild, zum Beispiel das Markenlogo, zu einem Link umwandeln, wenn man draufklickt, dann kommt man auf eine spezifische Seite
4 Antworten
das ist ziemlich einfach:
<a href="spezifische-seite.html"><img src="platzhalter.png"></a>
Wenn das Bild nicht geladen werden kann, wird im Browser der im Alt-Attribut definierte Text angezeigt. Manche Leute stellen auch Bilder aus um Daten zu sparen. Es hilft auch Leuten mit Screenreadern, also jene die z. B. nicht gut sehen können. Auch für SEO ist es wichtig.
Was ist das denn?
Eine Beschreibung, die die Bedeutung des Bildes im Kontext beschreibt. Bei einem Symbol, das zur Startseite verlinkt würde der Wert des alt-Attributs z. B. "Zur Startseite" lauten:
<img src=bild.gif alt="zur Startseite">
Damit ermöglicht man auch blinden Menschen, den Sinn eines Bildes zu erkennen.
Wie kann ich ein Bild, zum Beispiel das Markenlogo, zu einem Link umwandeln,
Die einfachste Lösung ist
<a href="https://www.daimler.de"><img src="mercedesstern.png" alt="dreigezackter Stern von einem Reif umschlossen"></a>
Alex
Das funktioniert mit href
bsp
<a href=„spezifischeseite.html“><img src:“Logo.png“ width=„auto“ height=„60“ alt=„logo“/></a>
Wenn du dein Bild in der Größe anpassen möchtest benötigst du die Parameter width (Breite) und height (Höhe)
Du kannst dann etwa beide Werte manuelle einstellen, jedoch verzerrst du soit dein Bild, also das Seitenverhältinis ist nicht mehr gleich
Wenn du einen Wert auf Auto stellst, bleibt das Seitenverhältnis gleich und es wird proportional dazu verkleinert oder vergrößert.
In meinen Fall: Die Breite passt sich automatisch zum Verhältnis der Höhe an.
Mein Bild bleibt zB im 16:9-Vormat, jedoch größer oder kleiner, je nachdem, wie ich meine Parameter setze.
Was bedeutet width=auto?
Nichts. Das ist falsch. In HTML 5 gibt es das Attribut width gar nicht.
Das Attribut ist in HTML enthaten. In HTML 5 kann es jedoch ohne Hochkomma geschrieben werden. Siehe : https://www.mediaevent.de/html/HTML-Attribute.html
<img src:“Logo.png“ width=„auto“ height=„60“ alt=„logo“/>
Das ist nicht richtig. Die Attribute width und height gibt es nicht. Den Attributwert Auto für das früher Mal existierende Attribut width gab es noch nie. Dem src-Attribit der Wert mit einem = und nicht mit einem : zugewiesen. Der Wert des alt- Attributs soll das Aussehen des Logos beschreiben und nicht nur das Wort LOGO enthalten.
Es handelt sich nur um ein Beispiel. Die Variablen width und height funktionieren dafür, dass es sie nicht geben sollte, bei mir sehr gut.
Und das alt - Attribut ist eben nur ein Besipiel
Würde aber vielleicht noch „px“ hinzufügen nach 60. Generell würde ich inline styling vermeiden. Mach das doch im externen Stylesheet!!!
Mit nem Stylesheet ist es eleganter. Da hast du Recht
Würde aber vielleicht noch „px“ hinzufügen nach 60
Nein, das war schon in HTML 4 falsch, als es das width-Attribut noch gab.
Ein Lichtblick xD
Diese Attribute können nicht nicht existieren. @EinAlexander wie würdest du sonst die Größe eines Bilds auf einer Website ohne solche Attribute anpassen?
wie würdest du sonst die Größe eines Bilds auf einer Website ohne solche Attribute anpassen?
Natürlich mit CSS. Denn dafür ist CSS da.
Einheitsangaben gehören nicht in die width- und height-Attribute.
Dort verwendet du die selben Attribute
Ja. Weil CSS genau dafür gedacht ist. Für die Angabe von Attributen, die die Darstellung regeln.
<a href=""><img></a>
Kleiner Hinweis: da fehlt das alt-Attribut.