HTML: Artikelgestaltung 2

Mittwoch 18. März 2020 von Torsten

Die Grafik für den Artikel bekommt jetzt einen Zoomfaktor und es werden weitere Artikelgestaltungen vorgenommen…

Die Grafik für den Artikel mit Zoomfaktor:

Mit dem bisherigen Artikel Layout haben wir schon eine Grafik linksbündig und rechtsbündig ausgerichtet, doch es geht noch mehr…

Die Grafik wird per img-Element in den Artikel eingebunden. Es werden hier auch Angaben zu Breite und Höhe des Bildes vorgenommen.

Die 115 Pixel mal 115 Pixel stimmen auch mit der Bildgröße überein, doch das liegt nur daran, dass das Bild extra für diese Webseite erstellt wurde…Dem Bild fehlt noch eine gewisse Flexibilität.

Wenn man den Grafiklink etwas ändert, dann wird die Grafik zoomfähig – passt sich also in der Größe der Webseite an.

  • <img src=“02_Bilder/02.png“ style=“width: 100%; max-width: 800px“ title=““ alt=““ class=“bildlinks“ />

Wenn das Browserfenster verkleinert wird, wird die zoomfähige Grafik mit-verkleinert. Die andere Grafik ohne Zoom wird abgeschnitten…

Grafik als Hyperlink:

Es ist auch möglich eine Grafik als Hyperlink zu benutzen. Im Grunde ist es nur die Verschachtelung des img-Elementes in das a href-Element.

  • <a href=“Zielpfad“><img src=“Bildpfad“ width=““ height=““ title=““ alt=““ class=“bildlinks“ /></a>

CSS Gestaltung für die Überschriften

Die Gestaltung der Überschriften erfolgt nun in der CSS-Datei für die Artikel. Für alle Überschriftebenen gilt es nun einen passenden Prozentwert zu ermitteln.

h1 {

font-size: 150%;

}

h2 {

font-size: 130%;

}

Die Anpassung ergibt nun folgende Überschriften:

h1 = 150 %

h2 = 130 %

h3 = 110 %

h4 = 80 %

h5 = 60 %

h6 = 40 %

Dieser Beitrag wurde erstellt am Mittwoch 18. März 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben