Volksbildungswerk Klarenthal e.V.

Kurs 232/Herbst 2002:
Workshop: Wir erstellen eine Homepage!

Zusammenfassung Doppelstunde 4 (23.09.2002)

[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]

  1. Navigation II: Listen/Menues
    Ohne Links kein Internet. Links untereinander anordnen und mit <br>-Tags gliedern - einfachste Lösung.
    Mit Listen arbeiten (z.B. in einem Framefenster):
    Die einzelnen Punkte der Aufzählung werden mit dem <li>-Tag definiert.
    Beispiel:<li>nächster Eintrag</li>
    Attribut value="..." ändert die fortlaufende Nummerierung bei nummerierten Listen.

    Weitere Listentags sind <menu> und <dir> Tags, werden aber kaum verwendet. Hier darf jeder <li>-Eintrag nur eine Zeile beinhalten, keine Absatzformatierung etc.

    Für wissenschaftliche Arbeiten sind die Definitionslisten-Tags <dl><dt>Begriff</dt><dd>Beschreibung </dd> ... </dl> hilfreich.
    Beispiel:
    HTML
    HyperTextMarkupLanguage
    www
    World Wide Web
    		 
    <dl>
<dt>HTML</dt>
<dd>HyperTextMarkupLanguage</dd>
<dt>www</dt>
<dd>World Wide Web</dd>
</dl>
  2. Einbau von Bildern oder Graphiken - der <img>-Tag
    Browser unterstützen (meist bei den moderneren Browsern ohne plug-ins [kleine Zusatzprogramme]) die Graphikformate .gif (Graphics Interchange Format), .jpeg / .jpg (Joint Photographic Expert Group) und .png (Portable Network Graphic).
    Für das <img>-Tag sind folgende Attribute von Bedeutung:
    Hinweis: Beim <img>-Tag immer die Attribute height=, width= und alt= benutzen.
    Wenn Bilder von Text umflossen werden (<img src="..." align="...">), so hebt <br clear="all"> dies wieder auf.

    Beim Einsatz von Graphiken gilt es vor allem auf die Dateigröße zu achten - diese bestimmt die Ladezeit.
    Mit Hilfe von Graphikprogrammen (z.B. der Freeware IrfanView [http://www.irfanview.com/]) lassen sich vorhandene Bilder bearbeiten, so daß sie webgeeigneter werden. Dies geschieht im Wesentlichen durch Darüber hinaus lassen sich Bilder durch Effekte verfremden, z.B. durch eine Negativdarstellung oder durch Reliefdarstellung.
    Bestimmte Bildbereiche (z.B. Ränder) lassen sich durch Freistellen wegschneiden.
    Mehr Hinweise zur Grafischen Gestaltung im Internet finden sich z.B. im Grafik-Kurs von Birgit Bachmann (http://ourworld.compuserve.com/homepages/Birgit_Bachmann/1htmkurs.htm) oder im bereits bekannten SelfHTML (siehe erste Stunde).

  3. Kombination von Tags
    Nun könnte eine typische Kombination von Tags in einem Auswahlmenu so aussehen:
    <ul>
<li>
<a href="http://www.vbw-klarenthal.de" target="_blank">
<img src="links.gif" width="37" height="26" border="0" alt="Rechter Pfeil"> VBW</a>
</li>
<li>... und so weiter ...</li>
</ul>
  4. Tabellen
    Tabellen bestehen aus Zeilen und Spalten. Tabellen ohne Rahmen (border="0") nennt man "blinde Tabellen".
    Einzelne Zellen können sich auch über mehrere Zeilen/Spalten erstrecken.
    Die Basistags:
    <table border="#" summary="Kurzinhaltsangabe einer Tabelle">
       <tr>    TableRow (Zeile)
          <th>TableHeader: Kopfzeile einer Spalte, zentriert und Fettschrift</th>
          <td>TableData (Spalte): Zelleninhalt</td>
       </tr>
    </table>
    Anmerkung: Das Tag <th> ist gleichbedeutend mit <td align="center"><b>Text</b></td>.

    Beliebte Attribute:
    width="#" Breite der Zelle/Tabelle in Pixel oder %
    height="#" Höhe der Zelle/Tabelle in Pixel oder %
    align="center|left|right" horizontale Ausrichtung der Tabelle/Zelle
    valign="top|bottom|middle" vertikale Ausrichtung der Zelle
    nowrap kein Zeilenumbruch in einer Zelle
    colspan="#"
    rowspan="#"    		 verbindet Spalten bzw. Zeilen miteinander
    bgcolor="#" definiert Hintergrundfarben der Tabellen und/oder einzelner Zellen

    Beispiel: ein Bild wird von zwei Seiten von Text umflossen:
    Browser HTML-Code
    Dieser Text steht oberhalb der Tabelle.
    Text vor dem Bild, rechtsbündig Pfeil1Pfeil2 Text nach dem Bild, linksbündig
    Dieser Text steht unter der Tabelle.    		 
    Dieser Text steht oberhalb der Tabelle.
<table cellspacing="10" summary="Text um Bild">
<tr>
<td align="right">Text vor dem Bild, rechtsbündig</td>
<td><img src="rechts.gif" width="37" height="26" border="0" alt="Pfeil1">
<img src="links.gif" width="37" height="26" border="0" alt="Pfeil2"></td>
<td>Text nach dem Bild, linksbündig</td>
</tr>
</table>
Dieser Text steht unter der Tabelle.

    Der HTMLEditor Phase 52 verfügt über einen Tab Tabelle, der sowohl alle Tags einer Tabelle zur Verfügung stellt, aber auch einen Eingabeassistenten anbietet.
[zurück] Vorherige Doppelstunde  Index Nächste Doppelstunde [weiter]
© 2002 Andreas Schmidt