wie kann ich mein bild im html code verändern?
wie kann ich mein bild verändern um es passend meiner seite zu machen lerne gerade das programieren und wage mich heute an mein erstes projekt
2 Antworten
wie kann ich mein bild verändern (...)
Hauptsächlich über CSS. Rahmen, Deckkraft, Breite, Höhe - für all das gibt es CSS-Properties.
Beispiel:
<!doctype html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<style>
.my-image-style {
border-radius: 100%;
width: 100%;
}
</style>
</head>
<body>
<img alt="Some image description ..." class="my-image-style" src="some-image.jpg">
</body>
</html>
In diesem Beispiel würde eine CSS-Regel my-image-style definiert und dem Bild zugeordnet werden. Sie würde dafür sorgen, dass das Bild die volle Inhaltsbreite der Seite einnimmt und abgerundete Ecken hat. Weitere CSS-Properties (bzw. eine komplette Referenz) findest du hier. Auf derselben Seite werden ein paar Grundlagen zu CSS-Regeln (Selektoren, etc.) erklärt. Einführend dafür ist dieser Artikel hilfreich.
Es gibt noch andere Wege, CSS einzubinden. Man könnte sich ebenso den style-Tag sparen und stattdessen dem Element ein style-Attribut geben, in welchem die CSS-Properties aufgelistet werden.
<img alt="Some image description ..." src="some-image.jpg" style="border-radius: 100%; width: 100%">
Lies Weiteres dazu hier.
Im besten Fall trennst du CSS und HTML voneinander. Es verbessert unter anderem die Lesbarkeit des Codes, es können wiederverwendbare Regeln definiert werden und für den Produktivbetrieb kann man die Ressourcen separat cachen.
Neben CSS verfügt das img-Element über ein paar HTML-Attribute. Eine Auflistung findest du hier.
Beachte, dass im Unterschied zu CSS bei den Attributen height und width keine Einheitsangabe (px, %, o.ä.) zulässig ist. Der Wert wird automatisch als Pixelangabe gewertet.
Beispiel für ein 100 x 100px großes Bild:
<img alt="Some image description ..." height="100" src="some-image.jpg" width="100">
Noch ein paar weitere Hinweise:
Vergleiche deinen Code mit meinem obersten Snippet. Dir sollten Unterschiede auffallen:
1) Das lang-Attribut gibt an, in welcher Sprache der Seiteninhalt vorliegt. Bei dir ist es deutsche Sprache, daher wäre de eine korrekte Angabe, statt en.
2) Der html-Knoten stellt das Wurzelelement eines Dokuments dar. Unter diesem dürfen nur zwei Kindknoten liegen: head und body. Der style-Tag gehört in den head (er definiert zusätzliche Ressourcen). Solltest du ein Tutorial o.ä. verfolgen, in dem es so gezeigt wird, wie bei dir (denn ich sehe diesen Fehler in letzter Zeit dauernd), würde ich deutlich dazu raten, eine andere Lernquelle zu suchen. MediaEvent ist eine gute Option.
3) Jedes img-Element erhält ein alt-Attribut. Der Wert ist abhängig von der Bedeutung des Bildes für die Webseite. Wenn es beispielsweise nur einen dekorativen Zweck hat, also inhaltlich nichts beiträgt, bleibt das Attribut ohne Wert.
<img alt src="some-image.jpg">
In deinem Fall scheint es aber dem Inhalt aktiv beitragen zu sollen, in dem es ein Foto vom Anwalt / seinem Team präsentiert. Also sollte der Wert eine kurze Beschreibung des Fotos enthalten.
<img alt="Das Team der Anwaltskanzlei" src="some-image.jpg">
Es gibt mehrere Gründe, weshalb das Attribut eine Pflichtangabe darstellt. Zum einen ist kein technischer Verlass darauf, dass das Bild vom Browser dargestellt ist und zum anderen kannst du nicht davon ausgehen, dass jeder Seitenbesucher körperlich dazu in der Lage ist, den Bildinhalt zu erfassen.
Mit den Attributen width und height kannst du das Bild im HTML Code anpassen, ansonst wird das aber normalerweile per CSS (im HTML Tag, im HTML Head oder normalerweise in externen CSS Dateien) gelöst
Beispiel:
img width="" height=""
img style="height:wert;width:wert;"
<style>
img{height:wert;width:wert;}
</style>