[edit] [comment] [remove] |2006-03-23| e1 # Vorbereitung

Wir öffnen innerhalb von EditPlus eine neue HTML-Datei (first.html) und erzeugen folgendes HTML-Grundgerüst:

<html>
  <head>
    <title>1. HTML-Dokument</title>
  </head>
  <body>
    Als Online-Tutorial benutzen wir SELFHTML.
  </body>
</html>
 

[edit] [comment] [remove] |2006-03-23| e2 # Aufgabe 1

Geben Sie Ihrem HTML-Dokument eine Überschrift.

  1. Verändern Sie die Überschriftgrösse.
  2. Zentrieren Sie die Überschrift
  3. Geben Sie der Überschrift die Farbe 'rot'.

Wie verändert man die Schriftfarbe?

beispielsweise mittels 

<h2 style="color:red">Überschrift</h2>

[edit] [comment] [remove] |2006-03-23| e3 # Aufgabe 2

  1. Wir verändern die Hintergrundfarbe des Dokuments Benutzen Sie zur Farbauswahl die Farbpalette von EditPlus.
  2. Erzeugen Sie unterhalb der Überschrift eine horizontale Trennlinie.
  3. Wir generieren einen Hyperlink auf die Seite http://de.selfhtml.org
 

[edit] [comment] [remove] |2006-03-24| e4 # Aufgabe 3

Erzeugen Sie eine Aufzählungsliste mit drei Web-Adressen Ihrer Wahl.

  1. Verändern Sie das Listensymbol der vorhergehenden Liste.
  2. Geben Sie den Listenelementen einen besonderen Stil.
 

[edit] [comment] [remove] |2006-03-24| e5 # Aufgabe 4

Erzeugen Sie eine nummerierte Liste.

  1. Gestalten Sie diese Liste als alphanumerische Liste.
  2. Verwenden Sie nun römische Ziffern.
  3. Geben Sie den Listenelementen einen besonderen Stil.
 

[edit] [comment] [remove] |2006-03-24| e6 # Aufgabe 5

Erzeugen Sie eine Definitionsliste mit den Begriffen HTML, CSS und Javascript.

Testen Sie dabei das Listenattribut compact.

 

[edit] [comment] [remove] |2006-03-24| e7 # Aufgabe 6

Erzeugen Sie nun folgende Tabelle

HTML-Tabelle

  1. Fügen Sie eine Tabellenbeschriftung hinzu.
  2. Wenden Sie CSS Stile auf die Tabellen an.

Hallo,

ich hab da ein kleines Problem: ich bekomme das B. nicht vor die Rose. Weiß vielleicht jemand, wie's funktioniert? Hier mein bisheriger Quelltext. Wäre super 

<html><body>
<table border="1">
<th bgcolor=blue>Blume</th>
<th bgcolor=blue>Kleidung</th>
<tr><td><ol type="A"><li>Tulpe</li></ol></td><td><ul type="disc"><li>Hemd</li></td></tr>
<tr><td><ol type="A"><li>Rose</li></ol></td><td><ul type="disc"><li>Hose</li></ul></td></tr>
</table>
</body></html>

Probier mal das 

<BODY>


<table border="1">
<tr>
<th bgcolor=blue>Blume</th>
<th bgcolor=blue>Kleidung</th>
</tr>

<tr>
<td><dt>A.  </dt>Tulpe</td>
<td><li>Hemd</li></td>
</tr>
<tr>
<td><dt>B.  </dt>Rose</td>
<td><li>Hose<dt>
</tr>



</table>

Besser ist 

<html><body>
<table border="1">
 <tr>
  <th bgcolor=blue>Blume</th>
  <th bgcolor=blue>Kleidung</th>
 </tr>
 <tr>
  <td>
   <ol type="A">
     <li>Tulpe</li>
     <li>Rose</li>
   </ol>
  </td>
  <td>
   <ul type="disc">
    <li>Hemd</li>
    <li>Hose</li>
   </ul>
  </td>
 </tr>
</table>
</body></html>

(sg)

[edit] [comment] [remove] |2006-03-24| e8 # Aufgabe 7

Erzeugen Sie bitte folgende Ascii-Figur mittels eines vorformatierten Bereichs. 

***********
 *       *
  *     * 
   *   * 
     * 
   *   * 
  *     * 
 *       *
***********

Wie geht es?

mittels 

<pre>
***********
 *       *
  *     * 
   *   * 
     * 
   *   * 
  *     * 
 *       *
***********
</pre>