{"id":252,"date":"2022-11-09T08:00:00","date_gmt":"2022-11-09T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=252"},"modified":"2023-08-30T10:37:43","modified_gmt":"2023-08-30T08:37:43","slug":"html-artikelgestaltung-2","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2022\/11\/09\/html-artikelgestaltung-2\/","title":{"rendered":"HTML Artikelgestaltung 2"},"content":{"rendered":"\n<p>Die Grafik f\u00fcr den Artikel bekommt jetzt einen Zoomfaktor und es werden weitere Artikelgestaltungen vorgenommen\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Die Grafik f\u00fcr den Artikel mit Zoomfaktor:<\/strong><\/p>\n\n\n\n<p>Mit dem bisherigen Artikel Layout haben wir schon eine Grafik linksb\u00fcndig und rechtsb\u00fcndig ausgerichtet, doch es geht noch mehr\u2026<\/p>\n\n\n\n<p>Die Grafik wird per img-Element in den Artikel eingebunden. Es werden hier auch Angaben zu Breite und H\u00f6he des Bildes vorgenommen.<\/p>\n\n\n\n<p>Die 115 Pixel mal 115 Pixel stimmen auch mit der Bildgr\u00f6\u00dfe \u00fcberein, doch das liegt nur daran, dass das Bild extra f\u00fcr diese Webseite erstellt wurde\u2026Dem Bild fehlt noch eine gewisse Flexibilit\u00e4t.<\/p>\n\n\n\n<p>Wenn man den Grafiklink etwas \u00e4ndert, dann wird die Grafik zoomf\u00e4hig \u2013 passt sich also in der Gr\u00f6\u00dfe der Webseite an.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;img src=\u201c02_Bilder\/02.png\u201c style=\u201cwidth: 100%; max-width: 800px\u201c title=\u201c\u201c alt=\u201c\u201c class=\u201cbildlinks\u201c \/&gt;<\/li>\n<\/ul>\n\n\n\n<p>Wenn das Browserfenster verkleinert wird, wird die zoomf\u00e4hige Grafik mit-verkleinert. Die andere Grafik ohne Zoom wird abgeschnitten\u2026<\/p>\n\n\n\n<p><strong>Grafik als Hyperlink:<\/strong><\/p>\n\n\n\n<p>Es ist auch m\u00f6glich eine Grafik als Hyperlink zu benutzen. Im Grunde ist es nur die Verschachtelung des img-Elementes in das a href-Element.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;a href=\u201cZielpfad\u201c&gt;&lt;img src=\u201cBildpfad\u201c width=\u201c\u201c height=\u201c\u201c title=\u201c\u201c alt=\u201c\u201c class=\u201cbildlinks\u201c \/&gt;&lt;\/a&gt;<\/li>\n<\/ul>\n\n\n\n<p><strong>CSS Gestaltung f\u00fcr die \u00dcberschriften<\/strong><\/p>\n\n\n\n<p>Die Gestaltung der \u00dcberschriften erfolgt nun in der CSS-Datei f\u00fcr die Artikel. F\u00fcr alle \u00dcberschriftebenen gilt es nun einen passenden Prozentwert zu ermitteln.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\nfont-size: 150%;\n}\nh2 {\nfont-size: 130%;\n}<\/code><\/pre>\n\n\n\n<p>Die Anpassung ergibt nun folgende \u00dcberschriften:<\/p>\n\n\n\n<p>h1 = 150 %<\/p>\n\n\n\n<p>h2 = 130 %<\/p>\n\n\n\n<p>h3 = 110 %<\/p>\n\n\n\n<p>h4 = 80 %<\/p>\n\n\n\n<p>h5 = 60 %<\/p>\n\n\n\n<p>h6 = 40 %<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Grafik f\u00fcr den Artikel bekommt jetzt einen Zoomfaktor und es werden weitere Artikelgestaltungen vorgenommen\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-252","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=252"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/252\/revisions"}],"predecessor-version":[{"id":332,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/252\/revisions\/332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}