2.5.7 Codes mit <code> formatieren

1 Syntax

Syntax: ...<code>...</code>...

2 Beispiele ohne Rahmen

a) Beispiel 1: Im Text mit <code>

1) Im Stylesheet ist folgender Eintrag:

/* <code> Allgemein */
code {background:#EEEEEE;font-weight:bold;
padding:1px 0.5em;
}

2) Im Quelltext steht im Textbereich:

<p>
In diesem Text soll ein Code erklärt werden, 
der heisst:
<code>irgendetwas</code>
</p>

3) Im HTML-Dokument steht dann:

In diesem Text soll ein Code erklärt werden, der heisst: irgendetwas

3 Beispiele mit Rahmen

⇒ Siehe auch "Kasten/Rahmen"

a) Beispiel 1: Anwendung von code class="box-grau"

Bemerkungen zur Formatierung:

• Der Rahmen ist grau und der Hintergrund ist ebenfalls grau.
• Da die Schrift von code übernommen wird ist sie "monospace".
• Die Schrift ist mit "Fett" (bold) formatiert, weil der Code so formatiert ist, obwohl die "Box" nicht mit fett formatiert ist.

1) Ansicht des Eintrages im Stylesheet:

/* Grauer Hintergrund und Rahmen (vorne=outset)*/
.box-grau {
display:block; border:3px solid; padding:5px;
border-left-color:#CCCCCC; border-top-color:#CCCCCC;
border-right-color:#999999; border-bottom-color:#999999;
background:#EEEEEE; color:#000000;}

2) Im Quelltext steht im Textbereich:

<code class="code class="box-grau"p>
Dies ist ein Code
</div>

3) Im HTML-Dokument erscheint folgendes:

Dies ist ein Code

b) Beispiel 2: Rahmen mitten im Satz mit code class="box-grau"

Bemerkungen zur Formatierung:

• Dieser Rahmen kann auch mitten im Satz eingefügt werden.
• Die Schrift ist mit "Fett" (bold) formatiert, weil der Code so formatiert ist, obwohl die "Box" nicht mit fett formatiert ist.

1) Ansicht des Eintrages im Stylesheet:

/* Fuer Anleitung: Darstellung von Codes in Rahmen */
.box {display:block; border:3px solid;
border-top-color:#999999; border-right-color:#CCCCCC; 
border-bottom-color:#CCCCCC; border-left-color:#999999;
padding:5px; background:#EEEEEE;color:#000000;}

2) Im Quelltext steht im Textbereich:

<p>Dies ist ein <code class="box-grau">
Text mit einem eingefügten Rahmen</code>
mitten im Satz.</p>

3) Im HTML-Dokument erscheint folgendes:

Dies ist ein Text mit einem eingefügten Rahmen mitten im Satz.

↑