Diesen Tipp in Originalversion zeigen.

13. Elementtypen und Weiteres

Es gibt in HTML allgemein zwei unterschiedliche Typen von Elementen: - Block-Elemente

Block-Elemente sind Elemente, die automatisch einen eigenen Absatz erzeugen. Die Absatzgröße variiert dabei je nach Art des Block-Elementes.
Einfacher Text und Inline-Elemente können in Block-Elementen eingebunden sein. Viele Block-Elemente (z. B. <center> und <form>) erlauben es auch, dass darin weitere Block-Elemente platziert sind.

Beispiele für Block-Elemente:

<center>, <form>, <h1> bis <h6>, <table>

- Inline-Elemente

Bei Inline-Elementen wird kein automatischer Absatz dargestellt. Inline-Elemente sind sozusagen die "untergeordneten" Elemente der Block-Elemente.
In Inline-Elementen können normalerweise nur Text und weitere Inline-Elemente platziert werden, keine Block-Elemente.

Beispiele für Inline-Elmente:

<a>, <b>, <br>, <font>, <i>, <img>, <input>, <select>, <textarea>


Anklickbare eMail-Adressen

Nun wissen Sie bereits wie man einen Link (bzw. einen Anker) erstellt und wie man diesem ein bestimmtes Ziel zuweisen kann.
Allerdings gibt es auch noch die Möglichkeit diesem keine Website als Ziel zuzuweisen, sondern eine eMail-Adresse.
Dabei wird die eMail-Adresse nach "mailto:" in das "href"-Attribut des <a>-Tags geschrieben.

...
<a href="mailto:webmaster@htmltut.de">eMail-Adresse</a>
...
  > Listing 13.1: Anklickbare eMail-Adresse (Online-Beispiel / Download)

Beachten Sie jedoch bitte, dass zum Versenden von eMails beim Internetbenutzer ein eMail-Programm wie Outlook installiert sein muss.

Schreibrichtung

Die Schreibrichtung können Sie mit dem HTML-Tag <bdo> angeben. Dabei gibt das Attribut "dir" letztendlich an, in welcher Richtung der Text geschrieben wird.
Der Standardwert ist "ltr" (left to right; von links nach rechts). Mit dem Wert "rtl" (right to left) im Attribut wird der Text von rechts nach links angezeigt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Text von links nach rechts</title>
</head>
<body>
<bdo dir="rtl">Beispieltext...interessant, oder?</bdo>
</body>
</html>
  > Listing 13.2: Text von rechts nach links (Online-Beispiel / Download)

Weitere Informationen zu Tabellen

Nun kennen Sie bereits das Attribut "cellpadding", mit welchem Sie den Abstand innerhalb einer Zelle zu allen umliegenden Seiten festlegen können.
Jedoch gibt es auch noch das Attribut "cellspacing", welches den Abstand zu den umliegenden Seiten außerhalb der Zellen in Pixeln angibt.
Sie können beide Attribute für den <table>- und <td>-Tag verwenden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Zellenabstände</title>
</head>
<body>
<table border="2" width="100%" cellspacing="3" cellpadding="7">
<tr>
<td>1-1 Zelle</td>
<td>1-2 Zelle</td>
</tr>
<tr>
<td>2-1 Zelle</td>
<td>2-2 Zelle</td>
</tr>
</table>
</body>
</html>
  > Listing 13.3: Beispiel für den Einsatz von "cellpadding" und "cellspacing" (Online-Beispiel / Download)

In einer Tabelle muss die Tabellenstruktur immer gleich sein (z. B. 2 Zellen in der ersten Zeile bedeutet, dass in der zweiten Zeile auch 2 Zellen sein müssen).
Um diese etwas abändern zu können, gibt es die zwei Attribute "rowspan" und "colspan".
Dabei bestimmt das Attribut "rowspan", über wieviele Zeilen (= von links nach rechts eine Reihe) sich eine Zelle erstrecken soll.
Das Attribut "colspan" gibt an, über wieviele Spalten (von oben nach unten) sich eine Zelle erstrecken soll.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"Gespannte" Zellen</title>
</head>
<body>
<table border="2" width="100%" cellspacing="3" cellpadding="7">
<tr>
<td colspan="2">1-1 + 1-2 Zelle</td>
<td>1-3 Zelle</td>
</tr>
<tr>
<td>2-1 Zelle</td>
<td>2-2 Zelle</td>
<td rowspan="2">2-3 + 3-3 Zelle</td>
</tr>
<tr>
<td>3-1 Zelle</td>
<td>3-2 Zelle</td>
</tr>
</table>
</body>
</html>
</form>
</body>
</html>
  > Listing 13.4: Beispiel für den Einsatz von "rowspan" und "colspan" (Online-Beispiel / Download)

ZusammengefasstFormulare sind ein wichtiger Bestandteil des Internets, da Sie die Kommunikation mit dem Benutzer ermöglichen.
Jedes Formular wird mit dem <form>-Tag eingeleitet, welcher das ganze Formular umschließt.
Das "action"-Attribut eines <form>-Tags gibt die Zieldatei an, die das Formular verarbeitet und wohin das Formular letztendlich gesendet wird.
Die Methode (Art und Weise), wie das Formular versendet werden soll, gibt das "method"-Attribut des <form>-Tags an. Mögliche Werte sind "post" (für den Benutzer unsichtbare Übertragung) und "get" (für den Benutzer sichtbare Übertragung; Daten werden an Adresszeile angehängt).
Formularelemente werden durch den <input>-Tag ausgedrückt. Das "type"-Attribut gibt an, welches Formularfeld letztlich dargestellt werden soll ("text" = Textfeld; "password" = Passwortfeld; "checkbox" = Checkbox; "radio" = Radiobox; "submit" = Absende-Button).
Zur späteren Verarbeitung des Formulars muss jedes Formularfeld einen einzigartigen Namen über das "name"-Attribut erhalten. Das "value"-Attribut gibt den voreingestellten Wert des Formularfelds an bzw. welcher Wert gesendet wird, je nach Benutzereingaben.
(as)


Copyright (c) 2002-2005 by Andreas Schroth

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