home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

Elemente/Tags einer HTML-Seite

Dies sind die wichtigsten Elemente/Tags einer HTML-Seite.

Eine komplette Liste aller möglichen HTML-Elemente ist unter diesem Link zu finden.

Mit Hilfe von CSS kann man das Layout (Größe, Position etc.) bzw. die Erscheinung (Farbe, Hintergrund etc.) dieser Element ändern.

Wichtig ist, dass die Formatierung immer getrennt von den Daten sein sollte: Formatierungen sollten demnach durch die Manipulierung

durch JavaScript oder durch ein CSS-Stylesheet geschehen.

Überschriften:

 

<h[1-6]>Text</h[1-6]>

 

Sechs Überschriftenebenen sind erlaubt, also z.B. <h1>Text</h1>.

Aber es ist meistens nicht sinnvoll mehr als 3 Ebenen zu verwenden.

Textabsätze:

 

<p>Text</p>

 

Erzeugt einen Text mit Absatz.

Zeilenumbruch erzwingen:

 

Text alte Zeile<br>Text neue Zeile

 

Beispiel:

Text alte Zeile
Text neue Zeile

Aufzählungslisten:

 

<ul>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul>

 

Beispiel:

  • Listeneintrag
  • Listeneintrag

 

Nummerierte Listen:

 

 <ol>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ol>

 

Beispiel:

  1. Listeneintrag
  2. Listeneintrag

Tabellen:

 

<table border="Dicke">
<tr>
<th>Kopfzelle</th>
<th>Kopfzelle</th>
</tr>
<tr>
<td>Datenzelle</td>
<td>Datenzelle</td>
</tr>
</table>

 

Beispiel:

KopfzelleKopfzelle
DatenzelleDatenzelle

Hyperlinks:

 

<a href="http://www.htwg-konstanz.de">Webseite der HTWG</a>

 

Grafiken einbinden:

 

<img src="http://www.johner.org/logo.gif" alt="GoogleLogo">

 

 

Formulare:

 

<form action="URI" method="Methode" enctype="MIME-Typ">
<!-- Formularelemente und andere Elemente innerhalb des Formulars-->

<!-- Einzeilige Formularfelder-->

<input type="text" size="Länge" maxlength="MaxLänge" name="Name">

<!-- Passwortfeld -->

<input type="password" size="Länge" maxlength="MaxLänge" name="Name">

<!-- Auswahlliste -->

<select size="Höhe" name="Name">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</select>

<!-- Radiobuttons -->

<input type="radio" name="Name" value="Wert"> Text

<!-- Checkboxen -->

<input type="checkbox" name="Name" value="Wert"> Text

<!-- Absende und Resetbutton -->

<input type="submit" name="Name" value="Abschicken">
<input type="reset" name="Name" value="Zurücksetzen">
</form>

 

Beispiel: Ein mögliches Web-Formular mit oben genannten Techniken

Vorname

Nachname

Email

Kommentar

Priorität sehr wichtig wichtigeilt nicht