Jetzt geht es an die Artikelgestaltung. Neben der \u00dcberschrift werden auch Bilder f\u00fcr den Artikel eingerichtet und gestaltet\u2026<\/p>\n\n\n\n\n\n\n\n
Die Artikel\u00fcberschrift:<\/strong><\/p>\n\n\n\n Die \u00dcberschriften sollten auf \u201ch1\u201c eingestellt sein. F\u00fcr die \u00dcberschriften sind bisher auch noch keine CSS Anweisungen angelegt. Die Gestaltung der Artikel\u00fcberschriften \u00fcbernimmt also immer noch der eingebaute Browser Stylesheet.<\/p>\n\n\n\n HTML kennt 6 verschiedene \u00dcberschriftsebenen (h1 bis h6). Um alle mal gesehen zu haben, k\u00f6nnten jetzt mal 6 entsprechende Artikel mit den verschiedenen \u00dcberschriften angelegt werden. Wie schon erw\u00e4hnt, wird die Gestaltung noch durch den Browser vorgenommen\u2026<\/p>\n\n\n\n <article><\/p>\n\n\n\n <h1>Artikel\u00fcberschrift:<\/h1><\/p>\n\n\n\n <p><\/p>\n\n\n\n Text des Artikels\u2026<\/p>\n\n\n\n <\/p><\/p>\n\n\n\n <\/article><\/p>\n\n\n\n <br \/><\/p>\n\n\n\n Artikel mit Bild:<\/strong><\/p>\n\n\n\n Ein Bild sagt mehr als tausend Worte. Also f\u00fcgen wir dem Artikel jetzt ein Bild zu\u2026<\/p>\n\n\n\n <article><\/p>\n\n\n\n <h1>Artikel\u00fcberschrift:<\/h1><\/p>\n\n\n\n <p><\/p>\n\n\n\n <img src=\u201cBild.abc\u201c width=\u201c115\u2033 height=\u201c115\u2033 title=\u201cBild\u201c class=\u201cbildlinks\u201c \/><\/p>\n\n\n\n Text des Artikels\u2026<\/p>\n\n\n\n <\/p><\/p>\n\n\n\n <\/article><\/p>\n\n\n\n <br \/><\/p>\n\n\n\n Die Pfadangabe zum Bild muss dann nat\u00fcrlich angepasst werden und auch die Angaben f\u00fcr Breite und H\u00f6he sollten dem echten Bild entsprechen\u2026<\/p>\n\n\n\n Wichtig ist hier die Zuweisung der Klasse (class=\u201cbildlinks\u201c). Das Prinzip f\u00fcr die Artikel-Layouts ist jetzt relativ einfach. In der HTML-Datei wird dem img-Element die passende Klasse zugewiesen. In der CSS-Datei sind f\u00fcr die verschiedenen Artikel-Layouts schon die Gestaltungsanweisungen hinterlegt und warten nur darauf abgerufen zu werden.<\/p>\n\n\n\n F\u00fcr die Bildposition sind innerhalb von \u201cartikel.css\u201cnun die zwei Anweisungen \u201ebildlinks\u201c und \u201ebildrechts\u201c zust\u00e4ndig. Das Bild zum Artikel kann jetzt also wahlweise linksb\u00fcndig oder rechtsb\u00fcndig positioniert werden\u2026<\/p>\n\n\n\n Artikel mit Clearingtext:<\/strong><\/p>\n\n\n\n Das Konzept von \u201eclearingtext\u201c besteht darin, dem p-Element (also dem Absatz) eine entsprechende Klasse zuzuweisen. Doch was macht diese Klasse?<\/p>\n\n\n\n .clearingtext {<\/p>\n\n\n\n clear: both;<\/p>\n\n\n\n background-color: lightsteelblue;<\/p>\n\n\n\n }<\/p>\n\n\n\n Der Blick in die CSS-Datei zeigt, dass per Befehl clear: both der float Zustand aufgehoben wird.<\/p>\n\n\n\n Wenn wir die Hintergrundfarbe umstellen (etwa auf \u201ered\u201c), sehen wir den Effekt.<\/p>\n\n\n\n Clearintext hatte wohl \u2013 als ich ihn vor vielen Jahren entwickelt hatte \u2013 das Ziel Blocktext vor und hinter der Grafik zu erzeugen. Also Textbl\u00f6cke die nicht um die Grafik flie\u00dfen.<\/p>\n\n\n\n Ausblick:<\/strong><\/p>\n\n\n\n Im n\u00e4chsten Artikel gibt es die Grafik mit Zoomfaktor\u2026<\/p>\n","protected":false},"excerpt":{"rendered":" Jetzt geht es an die Artikelgestaltung. Neben der \u00dcberschrift werden auch Bilder f\u00fcr den Artikel eingerichtet und gestaltet\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-249","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\/249","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=249"}],"version-history":[{"count":4,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/249\/revisions\/357"}],"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=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}