Diesen Tipp in Originalversion zeigen.

6. Lösungen [1]

1.Eine zweispaltige Tabelle können wir mit Hilfe des <table>-Tags erstellen, in welcher wir eine Zeile mit zwei Zellen integrieren.
Mit Hilfe des Attributes "width" können wir der ersten Zelle dann eine Breite von 200 Pixeln und der zweiten Zelle eine Breite von 300 Pixeln zuweisen.
Den Satz fügen wir in der zweiten Zelle zwischen <td> und </td> ein. Mit Hilfe des <font>-Tags und dem Attribut "color" können wir das Wort "das" rot ("red") einfärben; mit dem <i>-Tag das Wort "ist" kursiv (italic) darstellen; das Wort "ein" mit dem <b>-Tag fett (bold) hervorheben und das Wort "Testsatz" mit Hilfe von <u> unterstrichen.
Die derzeit kleinste Darstellung dieses Satzes erreichen wir mit dem "size"-Attribut des <font>-Tags. Dabei wird dem Attribut der Wert "-2" zugewiesen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table>
<tr>
<td width="200">
</td>
<td width="300">
<font size="-2"><font color="red">Das</font> <i>ist</i> <b>ein</b> <u>Testsatz</u></font>
</td>
</tr>
</table>
</body>
</html>
  > Listing 6.1: Lösung zu Übung 1 (Online-Beispiel / Download)

2.Eine dreispaltige Tabelle können wir mit Hilfe des <table>-Tags erstellen, in welcher wir eine Zeile mit drei Zellen integrieren. Indem wir dem Attribut "border" den Wert "1" zuweisen, erhalten wir eine Rahmendicke von 1 Pixel.
Mit cellpadding="3" wird ein Abstand von 3 Pixel zu allen Seiten von jeder Zelle aus erwirkt. Die Wörter "Schuh", "Stadt" und "Schuster" müssen zwischen das erste, zweite bzw. dritte <td> und </td> eingefügt werden.
Richten Sie die erste Zelle mittig aus, indem Sie dieser das Attribut "align" mit dem Wert "center" (dt. mittig) zuweisen. Die zweite Zelle können Sie nach rechts ausrichten, indem Sie dem Attribut "align" dort den Wert "right" (dt. rechts) zuweisen. Da links die Standard-Ausrichtung ist müssen Sie der 3.Zelle keine weiteren Einstellungen zuweisen.
Die Tabellengröße können Sie auf 80% der Browserbreite festlegen, indem Sie dem Attribut "width" (dt. Breite) im <table>-Tag den Wert "80%" zuweisen.
Um die Hintergrundfarbe der Tabelle gelb festzulegen, geben Sie bgcolor="yellow" im <table>-Tag an.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<table border="1" cellpadding="3" width="80%" bgcolor="yellow">
<tr>
<td align="center">
Schuh
</td>
<td align="right">
Stadt
</td>
<td>
Schuster
</td>
</tr>
</table>
</body>
</html>
  > Listing 6.2: Lösung zu Übung 2 (Online-Beispiel / Download)

3.Um der HTML-Seite den Titel "3.Übung" zu geben, müssen Sie diesen Text zwischen <title> und </title> (im <head>-Bereich) einfügen.
Binden Sie mit dem <img>-Tag (im <body>-Bereich) ein Bild in Ihre Seite ein, wobei Sie dem Attribut "src" (Abk. für "source") die Pfadangabe Ihres Bildes zuweisen. Denken Sie daran: Der <img>-Tag wird nicht geschlossen!
Fügen Sie um das Bild herum einen Link mit dem <a>-Tag ein, mit dem "href"-Attribut können Sie den Verweis auf "http://www.htmltut.de" setzen und mit target="_blank" geben Sie an, dass das Ziel in einem neuen Fenster geöffnet werden soll.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>3.Übung</title>
</head>
<body>
<a href="http://www.htmltut.de" target="_blank">
<img src="http://www.htmltut.de/images/beispiel.jpg">
</a>
</body>
</html>
  > Listing 6.3: Lösung zu Übung 3 (Online-Beispiel / Download)

Weiter zu Teil 7 (Adressierung) > (as)


Copyright (c) 2002-2005 by Andreas Schroth

URL: www.computer-tipps.net/webdesign167.html