Sonderzeichen, Umlaute und die für Formatierungsanweisungen reservierten Zeichen werden nach der folgenden Tabelle verschlüsselt:
Sonderzeichen | HTML-Code |
" | " |
& | & |
< | < |
> | > |
Leerzeichen | |
ß | ß |
ä | ä |
ö | ö |
ü | ü |
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öchsten Ästen saßen große Affen und beschimpften mich mit unsäglichen Ausdrücken wie z.B. "& &&&" .</p> </body> </html>
Ü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 1</h1> <h2>&Uuml;berschrift 2</h2> <h3>&Uuml;berschrift 3</h3> <h4>&Uuml;berschrift 4</h4> </body> </html>
Formuliere den Quelltext für das folgende HTML-Dokument und speichere es unter dem Titel Aufgabe 3.3.1.
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>
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>
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>
Formuliere den Quelltext für das fogende HTML-Dokument und speichere es unter dem Titel Aufgabe 1.3.2.