HTML: Artikelgestaltung 1

Mittwoch 11. März 2020 von Torsten

Jetzt geht es an die Artikelgestaltung. Neben der Überschrift werden auch Bilder für den Artikel eingerichtet und gestaltet…

Die Artikelüberschrift:

Die Überschriften sollten auf “h1“ eingestellt sein. Für die Überschriften sind bisher auch noch keine CSS Anweisungen angelegt. Die Gestaltung der Artikelüberschriften übernimmt also immer noch der eingebaute Browser Stylesheet.

HTML kennt 6 verschiedene Überschriftsebenen (h1 bis h6). Um alle mal gesehen zu haben, könnten jetzt mal 6 entsprechende Artikel mit den verschiedenen Überschriften angelegt werden. Wie schon erwähnt, wird die Gestaltung noch durch den Browser vorgenommen…

<article>

<h1>Artikelüberschrift:</h1>

<p>

Text des Artikels…

</p>

</article>

<br />

Artikel mit Bild:

Ein Bild sagt mehr als tausend Worte. Also fügen wir dem Artikel jetzt ein Bild zu…

<article>

<h1>Artikelüberschrift:</h1>

<p>

<img src=“Bild.abc“ width=“115″ height=“115″ title=“Bild“ class=“bildlinks“ />

Text des Artikels…

</p>

</article>

<br />

Die Pfadangabe zum Bild muss dann natürlich angepasst werden und auch die Angaben für Breite und Höhe sollten dem echten Bild entsprechen…

Wichtig ist hier die Zuweisung der Klasse (class=“bildlinks“). Das Prinzip für 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ür die verschiedenen Artikel-Layouts schon die Gestaltungsanweisungen hinterlegt und warten nur darauf abgerufen zu werden.

Für die Bildposition sind innerhalb von “artikel.css“nun die zwei Anweisungen „bildlinks“ und „bildrechts“ zuständig. Das Bild zum Artikel kann jetzt also wahlweise linksbündig oder rechtsbündig positioniert werden…

Artikel mit Clearingtext:

Das Konzept von „clearingtext“ besteht darin, dem p-Element (also dem Absatz) eine entsprechende Klasse zuzuweisen. Doch was macht diese Klasse?

.clearingtext {

clear: both;

background-color: lightsteelblue;

}

Der Blick in die CSS-Datei zeigt, dass per Befehl clear: both der float Zustand aufgehoben wird.

Wenn wir die Hintergrundfarbe umstellen (etwa auf „red“), sehen wir den Effekt.

Clearintext hatte wohl – als ich ihn vor vielen Jahren entwickelt hatte – das Ziel Blocktext vor und hinter der Grafik zu erzeugen. Also Textblöcke die nicht um die Grafik fließen.

Ausblick:

Im nächsten Artikel gibt es die Grafik mit Zoomfaktor…

Dieser Beitrag wurde erstellt am Mittwoch 11. 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