3.3.Zeichenformatierung

3.3. Zeichenformatierung

3.3.1 Sonderzeichen

Sonderzeichen, Umlaute und die für Formatierungsanweisungen reservierten Zeichen werden nach der folgenden Tabelle verschlüsselt:

Sonderzeichen HTML-Code
" "
& &
< &lt;
> &gt;
Leerzeichen &nbsp;
ß &szlig;
ä &auml;
ö &ouml;
ü &uuml;

Beispiel:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.3.1</title>
        </head>
        <body>
         <p>Auf den h&ouml;chsten &Auml;sten sa&szlig;en gro&szlig;e Affen und 
         beschimpften  mich mit uns&auml;glichen Ausdr&uuml;cken wie z.B. &quot;&amp;
         &amp;&amp;&amp;&quot; .</p>  
        </body>
       </html>

3.3.2 Überschriften

Überschriften werden nach der folgenden Tabelle verschlüsselt:

Eingabe Darstellung
<h1>...</h1> Überschrift 1
<h2>...</h2> Überschrift 2
<h3>...</h3> Überschrift 3
<h4>...</h4> Überschrift 4

Beispiel:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.3.2</title>
        </head>
        <body>
         <h1>&Uuml;berschrift&nbsp;1</h1>
         <h2>&Uuml;berschrift&nbsp;2</h2>
         <h3>&Uuml;berschrift&nbsp;3</h3>
         <h4>&Uuml;berschrift&nbsp;4</h4>
        </body>
       </html>

Aufgabe 3.3.1

Formuliere den Quelltext für das folgende HTML-Dokument und speichere es unter dem Titel Aufgabe 3.3.1.

3.3.3 Schriftart und -grösse

Schriftart und -grösse einzelner Buchstaben und Wörter lassen sich am einfachsten mit Hilfe des span -Elementes und der font-Eigenschaft verändern. Der allgemeine Aufbau ist folgendermaßen:

<span style="font:font-style font-weight font-size font-family;">...</span>

Die möglichen Werte dieser Eigenschaften sind in der folgenden Tabelle aufgelistet. Die Werte werden mit einem Doppelpunkt an die entsprechende Eigenschaft gehängt und durch Leerzeichen voneinander getrennt. Den Abschluss bildet immer ein Semikolon: Eigenschaft:Wert Wert Wert; Die Eigenschaften können die folgenden Werte annehmen:

Eigenschaft mögliche Werte
font-style italic, normal
font-weight bold, normal
font-size 8pt, 10pt, 12pt, usw.
font-family Times New Roman, Arial, Courier, usw.

Beispiel:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.3.3</title>
        </head>
        <body>
         <p>
          Dieser Text enthät <span style="font:italic 12pt Times New Roman;">
          kursive</span>, <span style="font:bold 12pt Times New Roman;">
          fettgedruckte</span>und <span style="font:normal 14pt Times New Roman;
          ">vergrößerte</span> Wörter. <span style="font:normal 12pt Arial;
          ">Dieser Satz ist in Arial geschrieben.</span> Alles lässt sich kombinieren 
          wie z.B. <span style="font:bold 12pt Courier;">fettgedruckter Courier-Zeichensatz.
          </span>
         </p>
        </body>
       </html>

3.3.4 Farben

Farben werden mit den Eigenschaften color und background-color definiert. Als Werte kann man die RGB (Rot/Grün/Blau)-Anteile in Prozent einsetzen. color:rgb(50%,0%,0%) bedeutet 50% rot, 0% grün und 0% blau. Grautöne erhält man durch gleiche Gewichtung aller Farbanteile. color:rgb(0%,0%,0%) bedeutet schwarz, color:rgb(50%,50%,50%) bedeutet mittelgrau und color:rgb(100%,100%,100%) bedeutet weiß. color und background-color müssen mit Hilfe des style-Elementes in das span-Element integriert werden:

<span style="color:rgb(x%,y%,z%); background-color:rgb(u%,v%,w%);">...</span>

Beispiel:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.3.4</title>
        </head>
        <body>
         <p>
          Dieser Text enthät einen <span style="color:rgb(0%,0%,100%); 
          background-color:rgb(100%,100%,0%);">blauen Teil auf gelbem Grund</span>
          und einen <span style="color:rgb(100%,100%,0%); background-color:rgb(0%,0%,100%);
          ">gelben Teil auf blauen Grund</span>.
         </p>
        </body>
       </html>

3.3.5 Rahmen

Rahmen werden mit der Eigenschaft border:border-width border-style border-color; definiert:

<span style="border:border-width border-style border-color;">...</span>

Die möglichen Werte für border-width, border-style und border-color sind in der folgenden Tabelle aufgelistet.

Eigenschaft mögliche Werte
border-width 1px, 2px, 3px, usw.
border-style double, solid, dashed, dotted
border-color rgb(x%,y%,z%)

Beispiel:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.3.5</title>
        </head>
        <body>
         <p>
          Dieser Text enthät einen <span style="color:rgb(0%,0%,100%); background-color:rgb(100%,100%,0%); border:2px double rgb(0%, 100%, 0%)">
          blauen Teil auf gelbem Grund mit grünem doppelten Rahmen (Würg)</span> und einen <span style="color:rgb(100%,100%,0%); 
          background-color:rgb(0%,0%,100%);border:2px dashed rgb(100%, 0%, 0%)">gelben Teil auf blauen Grund mit rotem gestrichelten Rahmen 
          (auch nicht besser)</span>.
         </p>
        </body>
       </html>

Aufgabe 3.3.2

Formuliere den Quelltext für das fogende HTML-Dokument und speichere es unter dem Titel Aufgabe 1.3.2.