BSI: CSS, Tabellen & Listen

Basissysteme der Informationsverarbeitung 1 - BSI 1
BSI: CSS, Tabellen & Listen

BSI: CSS, Tabellen & Listen

Inhaltsangabe:

Tabellen
Listen
CSS
CSS - Ein Beispiel

Tabellen

Es gibt eine Reihe von Tags, die "zusammenarbeiten", um komplexere Effekte zu erzielen. Ein Beispiel dafür bietet die Definition von Tabellen:

Jede Tabelle wird durch <table> ... </table> umgrenzt.
Innerhalb jeder Tabelle wird jede Zeile durch <tr> ... </tr> begrenzt. (tr= "table row")
Innerhalb jeder Zeile wird jedes Feld durch <td> ... </td> umrahmt. (td = table definition)

Also beispielsweise:

<table> 
<tr><td>1. Zeile, 1. Spalte </td><td>1. Zeile, 2. Spalte</td></tr> 
<tr><td>2. Zeile, 1. Spalte </td><td>2. Zeile, 2. Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

1. Zeile, 1. Spalte	1. Zeile, 2. Spalte
2. Zeile, 1. Spalte	2. Zeile, 2. Spalte

Tabellen gewinnen ein wesentlich anderes Aussehen, wenn Sie mit einem Rahmenumgeben werden. Das geschieht durch das Attribut border im table-tag, das als Wert die Dicke des Rahmens in Pixeln erwartet.

Also beispielsweise:

<table border="3"> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Erste Zeile, Erstes Spalte	Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte	Zweite Zeile, Zweite Spalte

Beziehungsweise:

<table border="20"> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Erste Zeile, Erstes Spalte	Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte	Zweite Zeile, Zweite Spalte

Innerhalb von Zeilen können manche Eintragungen, z.B. Überschriften, mehrere Spalten überspannen. Dies wird duch das colspan - Attribut beim td-Tag vereinbart, das als Wert die Anzahl der zu überspannenden Spalten erwartet.

Also beispielsweise:

<table border="3"> 
<tr><td colspan="2">Eine Überschrift</td></tr> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Eine Überschrift
Erste Zeile, Erstes Spalte	Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte	Zweite Zeile, Zweite Spalte

Innerhalb von Tabelleneinträgen sind die bisher im laufenden Text besprochenen Auszeichnungen voll anwendbar.

Also beispielsweise:

<table border="3"> 
<tr><td colspan="2"><i><center>Eine Überschrift</center></i></td></tr> 
<tr><td>Erste Zeile, Erstes Spalte</td><td>Erste Zeile, Zweite Spalte</td></tr> 
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr> 
</table>

was folgende Darstellung durch den Browser ergibt:

Eine Überschrift
Erste Zeile, Erstes Spalte	Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte	Zweite Zeile, Zweite Spalte

Der Tabellen-Kopf

Oft ist es sinnvoll, den Tabellenkopf (z.B. die erste Zeile) gesondert zu formatieren oder formatiert auszugeben. Dazu gibt es grundsätzliche mehrere Möglichkeiten. Eine einfache ist:

<table border="2">
<tr><th>Erste Zeile, Erstes Spalte</th><th>Erste Zeile, Zweite Spalte</th></tr>
<tr><td>Zweite Zeile, Erstes Spalte</td><td>Zweite Zeile, Zweite Spalte</td></tr>
</table>

was folgende Darstellung durch den Browser ergibt:

Erste Zeile, Erstes Spalte	Erste Zeile, Zweite Spalte
Zweite Zeile, Erstes Spalte	Zweite Zeile, Zweite Spalte

Weitere Informationen zum Thema Tabellen auf w3schools.

Zum Seitenanfang

Listen

Analog zu den Tabellen arbeiten auch die Tags zum Erstellen von Nummerierungen und Aufzählungen (Listen) zusammen: So arbeitet <ol> ... </ol> mit den dazwischen liegenden <li> ... </li> (list item) Tags zusammen, um eine nummerierte Liste (ordered list) aufzubauen: HTML Code: Kategorien von Tags, die wir besprochen haben:

<ol>
  <li>Tags zum Formatieren von Text</li>
  <li>Tags zum Einbinden von Bildern</li>
  <li>Tags zum Erzeugen von Tabellen</li>
</ol>

wird durch Browserinterpretation zu:

Tags zum Formatieren von Text
Tags zum Einbinden von Bildern
Tags zum Erzeugen von Tabellen

Wird <ol> ... </ol> durch <ul> ... </ul> ("unordered list") ersetzt, wird im Browser folgendes dargestellt:

Darstellung einer unsortierten Standardliste

Die meisten Tags akzeptieren innerhalb des Paares spitzer Klammern sogenannte Attribute, die immer die Form: "Attribut-Name" "Ist-gleich-Zeichen" "Attribut-Wert" (name="value") haben und ggf. durch Leerstellen voneinander getrennt sind. Sie legen Variationen der Art und Weise fest, in der ein bestimmtes Tag bearbeitet wird. Was mit Variationen gemeint ist, wird am besten durch Beispiele deutlich:

<ol type="1">

1. Tags zum Formatieren von Text 2. Tags zum Einbinden von Bildern 3. Tags zum Erzeugen von Tabellen

<ol type="1" start="3">

3. Tags zum Formatieren von Text 4. Tags zum Einbinden von Bildern 5. Tags zum Erzeugen von Tabellen

<ol type="I">

I. Tags zum Formatieren von Text II. Tags zum Einbinden von Bildern III. Tags zum Erzeugen von Tabellen

<ol type="I" start="57">

LVII. Tags zum Formatieren von Text LVIII. Tags zum Einbinden von Bildern LIX. Tags zum Erzeugen von Tabellen

<ol type="i">

i. Tags zum Formatieren von Text ii. Tags zum Einbinden von Bildern iii. Tags zum Erzeugen von Tabellen

<ol type="A">

A. Tags zum Formatieren von Text B. Tags zum Einbinden von Bildern C. Tags zum Erzeugen von Tabellen

<ul type="disc">

Darstellung einer unsortierten Standardliste

<ul type="square">

Darstellung einer unsortierten Liste mit Quadraten

<ul type="circle">

Darstellung einer unsortierten Liste mit ausgefüllten Punkten

Einen Sonderfall stellten Description Lists dar, die zu jedem Listeneintrag eine eingerückte Beschreibung ermöglichen:

<dl>
<dt>BSI</dt>
<dd>- Basissysteme der Informationsverarbeitung </dd>
<dt>BIT</dt>
<dd>- Basisinformationstechnologie</dd>
</dl>

Weitere Informationen zum Thema Listen auf w3schools.

Zum Seitenanfang

CSS

Die Basics

CSS (Cascading Style Sheets) ist eine Formatierungssprache für strukturierte Dokumente, wie HTML oder XML-Dokumente. Sie ermöglicht eine Trennung von Form und Inhalt und bewirkt somit eine vereinfachte Wartung strukturierter Dokumente.

Siehe dazu: Sinn und Zweck von Stylesheets und die Auswirkungen in einem eindrucksvollen Beispiel: csszengarden

Mehr zu den Basics auf w3schools.

CSS-Code kann auf drei unterschiedliche Art und Weisen in das HTML-Dokument eingebunden werden:

1. Als externe Ressource.

<link rel="stylesheet" type="text/css" href="beispiel.css">

Diese Anweisung steht im <head></head>-Bereich des XHTML-Dokuments und bindet eine normale ASCII-Text-Datei, eben das Stylesheet mit dem Namen beispiel.css in das aufrufende Dokument ein.

2. Als eingebettetes Stylesheet. Das CSS-Dokument wird in einem speziell dafür vorgesehenen tag <style></style> gespeichert.

Beispiel:

<head><title>Dokument mit Formatierungen</title>
<style type="text/css">
body { color: purple; background-color: #d8da3d }
</style></head>

3. Die letzte (und unsauberste) Art ist das Einbetten der Stildefinitionen in den jeweiligen (X)HTML-Elementen über das Attribut style="".

Beispiel:

<p style="font-size: small;">Text</p>

Für die Einbidung des Stylesheets als Ressource gilt: rel="stylesheet" Art der Beziehung; auch andere "Ressourcen", wie externe Definitionen dieser Art generell genannt werden, könnten u.U. hier angegeben werden. type="text/css" "Das ist ein Stylesheet nach den 'CSS' Konventionen" - Auch andere Regeln für Stylesheets sind denkbar. href="../meins.css" Eine URL; gibt an, wo das Stylesheet zu finden ist.

Die Datei "beispiel.css" hat folgenden Inhalt:

h1 {
color: blue;
font-family: helvetica;
}

p {
color: green;
}

body {
background: yellow;
}

b {
color: red;
font-weight: 100;
font-size: 30pt;
}

u {
font-family: mono-space;
font-weight: 100;
font-size: 3pt;
text-decoration:none;
}

Mehr zum Einbinden der CSS-Datei auf w3schools.

Der Aufbau einer CSS-Regel

Ein Stylesheet besteht aus einer oder mehreren Regeln, die beschreiben, wie ein bestimmtes Seitenelement dargestellt werden soll. Jede Regel besteht aus zwei wesentlichen Teilen: dem Selektor und dem Deklarationsblock.

Eine Darstellung der Regelstruktur hier als Beispiel:

selektor {
eigenschaft1: wert1;
eigenschaft2: wert2;
}

h1 {
color: blue;
font-family: helvetica;
}

Der Inhalt der geschweiften Klammern wird als "Deklarationsblock" bezeichnet, ein Eigenschaft-Wert-Pärchen als Deklaration. Der Selektor steht auf der linken Seite der Regel und ist dafür verantwortlich das Element des HTML-Dokuments auszuwählen, auf das sich die Regel beziehen soll (in unserem Beispiel die Überschrift <h1></h1>). Jeder Deklarationsblock kann beliebig viele Deklarationen enthalten. Ressourcen Wir sprechen von Ressourcen, wenn wir einem Programm für seinen abstrakten Ablauf nicht notwendige Angaben, wie etwa visuelle Attribute, durch einen externen Mechanismus zur Verfügung stellen. Anders ausgedrückt: Ressourcen (im IT Bereich) sind augelagerte Text-Dateien die, wie ein Cascading Style Sheet, bestimmte Informationen für das aufrufende HTML-Dokument beinhalten. White Space Mit "White Space" bezeichnen wir beliebig lange Sequenzen von nicht signifikanten Zeichen in einer Zeichenfolge, d.h. in der Regel Leerzeichen, Tabulatoren und ähnliche Zeichen.

Mehr zum Aufbau einer CSS-Regel auf w3schools.

Zum Seitenanfang

CSS - Ein Beispiel

h1 {
color: blue;
font-family: helvetica;
}

p {
color: green;
}

body {
background: yellow;
}

b {
color: red;
font-weight: 100;
font-size: 30pt;
}

u {
font-style: italic;
font-family: mono-space;
font-weight: 100;
font-size: 3pt;
text-decoration:none;
}

Mit diesem Testbeispiel sehen wir uns nun die Wirkungen der wichtigsten Property / Wert Paare an.

1. Die Properties color und background-color (auch abgekürzt: background akzeptieren als Werte die Namen der wichtigsten Farben in Englischer Sprache.

2. Das Property font-size regelt die Schriftgröße und erwartet als Wert eine von mehreren möglichen Größenangaben. Die wichtigsten Varianten sind:

Absolute Angaben, als Zahlen mit "pt" am Ende. ("Druckerpunkte".) z.B: 12pt
Einen Prozentwert: 150%
Eine "Längenangabe", bezogen auf die Länge des Buchstabens "m" in der eingestellten Schriftart:

3. Das Property font-family wählt die Schriftart aus.

Entweder durch Angabe eines Namens einer auf dem jeweiligen Rechner vorhandenen Schrift, z.B. times oder helvetica
oder durch Angabe einer "Familienbezeichnung" - am wichtigsten serif und sans-serif.

4. Das Property font-style wählt zwischen normal und italic. 5. Das Property font-weight wählt aus wie fett die Schrift sein soll: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 sind die wichtigsten Werte. 6. Das Property text-decoration wählt spezielle, selbsterklärende Darstellungsmodi: none, underline, overline und blink. Hier zwei Einführungen / Übersichten im Web:

Zum Seitenanfang