====== HTML Attribute ======

HTML Attribute beinhalten zusätzliche Informationen über das jeweilige HTML-Element.

  * Alle HTML Elemente können Attribute besitzen.
  * Attribute beinhalten Zusatzinformationen
  * Attribute sind immer nur im Start-Tag
  * Attribute sind normalerweise immer eine Kombination aus Name und Wert - z.B.: src="Pfad"


===== href =====

Das href-Attribut spezifiziert eine URL eines Links.

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-134856.png?700}}


===== src =====

Das src-Attribut spezifiziert beim img-Tag den Pfad zum Bild, welches angezeigt werden soll.

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-135015.png?700}}


Dabei gibt es zwei Methoden wie man Pfad angeben kann:

=== Absolute URL ===
Links zu externen Bildern, welche auf anderen Webserver gehosted liegen, müssen natürlich absolut angegeben werden:

<code html>
src="https://www.w3schools.com/images/img_girl.jpg".
</code>

Achtung: Externe Bilder sind womöglich geschützt (Copyright). Falls man dafür nicht die notwendigen Berechtigungen erhält, begeht man womöglich eine Datenschutzverletzung. Außerdem können externe Bilder jederzeit gelöscht bzw. geändert werden.

=== Relative URL ===

Links zu Bildern, welche am selben Server liegen wie die Webseite selbst. Hier benötigt man nicht die ganze URL, sondern man betrachtet den Pfad ausgehend von der jeweiligen HTML-Datei. Gibt man zum Beispiel als Pfad nur bild.jpg an, so muss die Datei im selben Verzeichnis wie die HTML-Datei selbst liegen.

Tipp: Verwende wenn möglich immer relative Pfadangaben, da diese auch bei einem etwaigen Server- bzw. Domainumzug noch weiter funktionieren.

===== width und height =====

Mithilfe von width and height - Attributen kann man die Breite und die Höhe eines Bildes bereits in HTML ohne CSS spezifizieren.


===== alt =====

Mithilfe des alt-Attributes kann man für Bilder <img> einen alternativen Text spezifizieren, der dann angezeigt wird, falls das Bild nicht angezeigt werden kann bzw. bei Screenreader vorgelesen wird.

{{:inf:inf5ai_202324:07_webentwicklung:7_03:pasted:20240423-135925.png?700}}