CSS Kurs – Aufzählungen und Nummerierungen

Dieser Beitrag ist Teil des CSS Kurses.
In diesem Beitrag lernen Sie die Listen kennen. Man unterscheidet zwei Arten von Listen: Aufzählungen und Nummerierungen.
Aufzählungen stellen ungeordnete Listen dar. Das HTML-Element für diese lautet ul (engl. unordered list). Dieses enthält die einzelnen Listenelemente (Punkte) li (engl. list item).
Erstellen wir nun unsere Liste die die einzelnen Schritte dieses Kurses enthält.


<ul>
<li>Wie funktioniert HTML?</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ul>

Nummerierungen sind nichts anderes als geordnete Liste. Vom Aufbau her weisen diese sehr große Ähnlichkeit mit den ungeordneten Listen auf. Allerdings müssen Sie statt ul das Element ol (engl. ordered list) verwenden.


<ol>
<li>Wie funktioniert HTML?</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ol>


Probieren Sie es selbst aus und ändern Sie <ul> in <ol> um.
HTML Listen
Sie können die Listen auch verschachteln. Dazu müssen Sie innerhalb eines Listenelementes eine neue Liste erstellen. Wir wollen nun den ersten Punkt weiter untergliedern.


<ul>
<li>Wie funktioniert HTML?
<ul>
<li>Grundgerüst</li>
<li>Webseite mit div in Bereiche unterteilen</li>
<li>Überschriften und Absätze</li>
</ul>
</li>
<li>Kästchen mit CSS gestalten.</li>
<li>Kästchen mit CSS positionieren.</li>
</ul>


Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von

CSS Kurs – Block- und Inline-Elemente

Dieser Beitrag ist Teil des CSS Kurses.
Wenn Sie sich unsere Beispiel-Webseite mit Firefox anschauen, können Sie über Entwicklerwerkzeuge → 3D-Ansicht die einzelnen Elemente in 3D anschauen. In dieser Ansicht wird der Unterschied zwischen Block- und Inline-Elementen deutlich.

3D-Ansicht der HTML Elemente

Block- und Inline-Elemente

Die Block-Elemente gehen im Browserfenster von ganz links bis nach ganz rechts. Blockelemente sind zum Beispiel: div, h1, p. Sie werden so breit wie es nur geht und haben einen integrierten Zeilenumbruch. Das darauf folgende Kästchen beginnt in der nächsten Zeile.
Inline-Elemente dagegen haben keinen Zeilenumbruch. Wie Sie sehen fließt unser Text nach span, em und strong einfach weiter. Sie werden auch nur so breit wie sie sein müssen. Sie enden nach dem Text, der in dieser Kiste steckt.
Eine Übersicht über alle Block- und Inline-Elemente finden Sie auf SELFHTML.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von

CSS Kurs – Text hervorheben

Dieser Beitrag ist Teil des CSS Kurses.
Mit den HTML Elementen strong und em können Sie Textpassagen fett oder kursiv darstellen. Um es Ihnen an einem Beispiel präsentieren zu können füllen wir den Textbereich mit Inhalt.


<div id="textbereich">
<h2>Startseite</h2>

<p>Herzlich willkommen! Hier lernen Sie HTML und CSS.</p>
</div> <!-- textbereich -->

Nun stellen wir das Wort HTML kursiv und CSS fett dar.


<div id="textbereich">
<h2>Startseite</h2>

<p>Herzlich willkommen !
Hier lernen Sie <em>HTML</em> und <strong>CSS</strong>.</p>
</div> <!-- textbereich -->

Texte können kursiv oder fett dargestellt werden

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von

CSS Kurs – Überschriften und Absätze

Dieser Beitrag ist Teil des CSS Kurses.
Überschriften und Absätze helfen bei der Orientierung. In diesem Beitrag lernen Sie den Text Ihrer Webseite zu strukturieren.
HTML kennt sechs verschiedene Gliederungsebenen für Überschriften, von h1 bis h6.
Wir fügen nun im Kopfbereich eine Überschrift ein. Kümmern Sie sich zunächst nicht um das Aussehen, dieses gestalten wir später mit CSS. Unter der Hauptunterschrift fügen wir einen Slogan hinzu. Dazu verwenden wir das HTML Element p für Absatz (engl. paragraph). Innerhalb des Absatzes wollen wir später einen Satz besonders hervorheben. Daher wird dieser mit span umspannt. Dieser Satz bekommt also ein eigenes Kästchen innerhalb des Absatz-Kästchens.


<div id="kopfbereich">
<h1>CSS Kurs</h1>
<p>CSS ist einfach. <span>Das Wesentliche auf den Punkt gebracht</span>.</p>
</div> <!-- kopfbereich -->

Das Ergebnis sieht wie folgt aus.
Eine Überschrift und ein Absatz
Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von

CSS Kurs – Webseite mit „div“ in Bereiche unterteilen

Dieser Beitrag ist Teil des CSS Kurses.
In der Regel wird eine Webseite in verschiedene Bereiche unterteilt: Kopfbereich, Navigation, Text und Fußbereich. Ein zusätzlicher Bereich umschließt alle diese Bereiche wie ein Schutzumschlag und hält sie zusammen. So auch diese Webseite: im Kopfbereich sehen Sie das Logo, Sie sehen die Navigation, den Inhalt (dieser Text) und im Fußbereich können Sie den Slogan lesen. Diese Einteilung findet mit dem Element div (engl. Division, also Bereich) statt. Wir fügen in den body nun die einzelnen Bereiche ein. Damit wir diese später eindeutig unterscheiden können, bekommt jeder Bereich eine id. Diese Bereiche können Sie sich wie eine Kiste vorstellen, in die später andere Kästchen zur leichteren Aufbewahrung reinkommen. Da solche Verschachtelungen schnell übersichtlich werden können empfiehlt sich die Verwendung von Kommentaren wie z.B. <!-- kopfbereich --> um die Grenzen einer Kiste auf einen Blick zu erkennen.


<!DOCTYPE html>
<html>
<head>
<title>Denis Reis – CSS Kurs Beispiel</title>
</head>
<body id=”startseite”>
<div id="kopfbereich">
 
</div> <!-- kopfbereich -->
</body>
</html>

Wir legen nun die einzelnen Behälter für Kopf-, Navi-, Text-, und Fußbereich an. Anschließend packen wir diese Kästchen in eine andere Kiste, die diese Bereiche wie ein Schutzumschlag (engl. wrapper) umschlingt.


<!DOCTYPE html>
<html>
<head>
<title>Denis Reis – CSS Kurs Beispiel</title>
</head>
<body id=”startseite”>
<div id="wrapper">
<div id="kopfbereich">

</div> <!-- kopfbereich -->
<div id="navibereich">

</div> <!-- navibereich -->
<div id="textbereich">

</div> <!-- textbereich -->
<div id="fussbereich">

</div> <!-- fussbereich -->
</div> <!-- wrapper -->
</body>
</html>

Damit sie die einzelnen Kästchen besser erkennen können habe ich die Rahmen mit CSS sichtbar gemacht.
Die Webseite besteht aus verschiedenen Bereichen
Probieren Sie es selbst aus.

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

/0 Kommentare/von