{"id":4098,"date":"2013-05-04T19:58:26","date_gmt":"2013-05-04T17:58:26","guid":{"rendered":"https:\/\/basic-tutorials.de\/?p=4098"},"modified":"2020-04-29T22:39:05","modified_gmt":"2020-04-29T20:39:05","slug":"bildunterschrift-mit-html","status":"publish","type":"post","link":"https:\/\/basic-tutorials.de\/ratgeber\/software\/bildunterschrift-mit-html\/","title":{"rendered":"Bildunterschrift mit HTML"},"content":{"rendered":"<p>Du m\u00f6chtest deinen Internetauftritt ein wenig aufmotzen und deshalb deinen Bildern eine Bildunterschrift hinzuf\u00fcgen? Ich zeige dir eine einfache M\u00f6glichkeit, wie das realisiert werden kann.<!--more--><\/p>\n<h2>HTML-Teil der Bildunterschrift<\/h2>\n<p>Es wird einfach eine Definitionsliste erstellt, bei der die Bildunterschrift dann der beschreibende Teil ist.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;dl class=\"bildunterschrift\"&gt;\r\n &lt;dt&gt;&lt;img src=\"bildname.jpg\" alt=\"Bildbeschreibung\" title=\"Bildbeschreibung\"&gt;&lt;\/dt&gt;\r\n &lt;dd&gt;Bildunterschrift&lt;\/dd&gt;\r\n&lt;\/dl&gt;<\/pre>\n<p>Das sieht jetzt zum Beispiel so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4099\" src=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2013\/05\/Definitonsliste-f\u00fcr-Bildunterschrift-nutzen.jpg\" alt=\"Definitonsliste f\u00fcr Bildbeschreibung nutzen\" width=\"192\" height=\"206\" srcset=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2013\/05\/Definitonsliste-f\u00fcr-Bildunterschrift-nutzen.jpg 192w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2013\/05\/Definitonsliste-f\u00fcr-Bildunterschrift-nutzen-139x150.jpg 139w\" sizes=\"auto, (max-width: 192px) 100vw, 192px\" \/><\/p>\n<p>Dabei ist jedoch anzumerken, dass die Beschreibung nicht mittig unter dem Bild erscheint, wie es hier aussieht, sondern einfach ein paar Pixel einger\u00fcckt ist, deshalb m\u00fcssen wir diese noch nach unseren W\u00fcnschen formatieren.<\/p><div class=\"losgehts-inhalt losgehts-entity-placement\" style=\"text-align: center;\" id=\"losgehts-1404187473\"><div class=\"losgehts-adlabel\">Anzeige<\/div><script type=\"text\/plain\" data-tcf=\"waiting-for-consent\" data-id=\"405718\" data-bid=\"1\">PGRpdiBpZD0ibG9zZ2VodHMtMTE4NzgyNTY0MyIgY2xhc3M9Imdhc19mYWxsYmFjay1hZF80MDU3MTgtLXBsYWNlbWVudF8zNDgzODMiPjxzY3JpcHQgYXN5bmMgc3JjPSIvL3BhZ2VhZDIuZ29vZ2xlc3luZGljYXRpb24uY29tL3BhZ2VhZC9qcy9hZHNieWdvb2dsZS5qcz9jbGllbnQ9Y2EtcHViLTgxNDg3Njg4MjM4MDczMzAiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0PjxpbnMgY2xhc3M9ImFkc2J5Z29vZ2xlIiBzdHlsZT0iZGlzcGxheTpibG9jazsiIGRhdGEtYWQtY2xpZW50PSJjYS1wdWItODE0ODc2ODgyMzgwNzMzMCIgCmRhdGEtYWQtc2xvdD0iODY0MTc4NTI2NSIgCmRhdGEtYWQtZm9ybWF0PSJhdXRvIj48L2lucz4KPHNjcmlwdD4gCihhZHNieWdvb2dsZSA9IHdpbmRvdy5hZHNieWdvb2dsZSB8fCBbXSkucHVzaCh7fSk7IAo8L3NjcmlwdD4KPC9kaXY+<\/script><\/div>\n<h2>\u00a0CSS-Teil der\u00a0<strong>Bildunterschrift<\/h2>\n<p>Das hier ist nur ein Beispiel, wie man es machen k\u00f6nnte. Dabei wird die Bildbeschreibung dann immer links unter dem Bild angezeigt.<\/p>\n<pre class=\"lang:css decode:true\">dl.bildunterschrift {float: left; margin:10px 10px 10px 0;}\r\ndl.bildunterschrift dd {margin:0; font-size:90%;}<\/pre>\n<p>Hier auch wieder ein Beispiel, wie es mit dieser Formatierung nun aussehen w\u00fcrde:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4100\" src=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2013\/05\/Definitonsliste-f\u00fcr-Bildunterschrift-nutzen1.jpg\" alt=\"Definitonsliste f\u00fcr Bildbeschreibung nutzen\" width=\"197\" height=\"209\" srcset=\"https:\/\/basic-tutorials.de\/wp-content\/uploads\/2013\/05\/Definitonsliste-f\u00fcr-Bildunterschrift-nutzen1.jpg 197w, https:\/\/basic-tutorials.de\/wp-content\/uploads\/2013\/05\/Definitonsliste-f\u00fcr-Bildunterschrift-nutzen1-141x150.jpg 141w\" sizes=\"auto, (max-width: 197px) 100vw, 197px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Ich hoffe euch hat dieser simple Codetipp geholfen und ich w\u00fcrde mich freuen wenn ihr mir verratet, wie ihr eure Bildbeschreibungen macht! \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Du m\u00f6chtest deinen Internetauftritt ein wenig aufmotzen und deshalb deinen Bildern eine Bildunterschrift hinzuf\u00fcgen? Ich zeige dir eine einfache M\u00f6glichkeit, wie das realisiert werden kann.<\/p>\n","protected":false},"author":198,"featured_media":4100,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[85444],"tags":[120],"class_list":["post-4098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-html","infinite-scroll-item"],"acf":[],"lang":"de","translations":{"de":4098},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/posts\/4098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/users\/198"}],"replies":[{"embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/comments?post=4098"}],"version-history":[{"count":0,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/posts\/4098\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/media\/4100"}],"wp:attachment":[{"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/media?parent=4098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/categories?post=4098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/basic-tutorials.de\/wp-json\/wp\/v2\/tags?post=4098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}