Anwendungen und Beispiele

Ich beschränke mich hier auf die wichtigsten HTML-Elemente welche innerhalb von <body> und </body> (siehe HTML-Grundgerüst bei "Ueberblick") eingesetzt werden können:

 
Listen:
Ungeordnete Aufzählungslisten:
<ul>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ul> 		Beispiel:
  • Ananas
  • Bananen
  • Aepfel
Nummerierte Listen:
<ol>
<li>Listeneintrag</li>
<li>Listeneintrag</li>
</ol> 		Beispiel:
  1. Ananas
  2. Bananen
  3. Aepfel


Tabellen:
<table width="Breite" border="Dicke" cellspacing="Abstand" cellpadding="Innenabstand">
<tr>
<th>Kopfzelle</th>
<th>Kopfzelle</th>
</tr>
<tr>
<td>Datenzelle</td>
<td>Datenzelle</td>
</tr>
</table>
Beispiel: (Code)
Frucht Preis
Ananas 3.- Fr.
Bananen 2.50 Fr.
Aepfel 1.50 Fr.


Formulare:

<form action="Pfad zur Formularauswertungsdatei" method="Methode">
<!-- Formularelemente und andere Elemente innerhalb des Formulars -->
</form>

Webformulare ermöglichen es Benutzern zwischen Optionen zu wählen oder Daten wie Adressen, Termine und Texte einzugeben und diese zur Weiterverarbeitung abzusenden. Für jedes Formularelement wird ein Paar aus dem Namen und dem Wert der value-Eigenschaft dieses Elements gebildet, und kann so zur Formularauswertung an ein PHP-Skript übermittelt werden (dazu mehr unter "PHP"). Als Uebermittlungsmethode kann "GET" (Daten vom Server abrufen) oder "POST" (Übermitteln von Daten zum Server) verwendet werden.

Wichtige Formularelemente: (Code für ganzes Beispielformular)
Einzeilige Eingabefelder
<input type="text" placeholder="Platzhalter" name="Elementname">
Beispiel:
Mehrzeilige Eingabefelder
<textarea cols="Spalten" rows="Reihen" placeholder="Platzhalter" name="Elementname"></textarea>
Beispiel: 
Auswahlliste
<select name="Elementname" (multiple="multiple" bei Mehrfachauswahl)>
<option>Eintrag</option>
<option>anderer Eintrag</option>
</select>
Beispiel: Obstsorte: 
Radiobuttons
<input type="radio" name="Elementname" value="Wert"> Text
Beispiel: 
süss
säuerlich
fad
Checkboxen
<input type="checkbox" name="Elementname[]" value="Wert"> Text
Beispiel: 
Ich esse diese Frucht gerne
Ich kaufe diese Frucht öfters
Datums- und Zeitangabe
<input type="datetime-local" name="Elementname">
Beispiel: Terminwunsch:
Absendebutton
<button type="submit">Text auf Button</button>
Beispiel:

Multimedia einbinden:
Grafiken und Fotos
<img src="Pfad zur Bilddatei" alt="Alternativtext" width="Breite" height="Höhe">
Mögliche Raster-Grafik-Formate: PNG, JPEG und GIF. Das Vektor-Grafik-Format SVG kann mit eigenem <svg>-Element eingebunden werden (wird im SVG-Bereich genauer betrachtet).
Beispiel: 
Testfoto
Sounds
<audio controls src="Pfad zur Sounddatei" type="audio/mp3">..Alternativtext..</audio>
Mögliche Audio-Formate: MP3, WAV und OGG. Empfohlen: MP3.
Beispiel:
Videos
<video controls src="Pfad zur Videodatei">..Alternativtext..</video>
Mögliche Video-Formate: MP4, WEBM und OGG. Empfohlen: MP4.
Beispiel:


Block-Elemente:
Textabschnitt
<p>...</p>
Block-Level-Container
<div>...</div>

Andere wichtige Elemente:
Verweise (Links)
<a href="Pfad zur Webseite">Verweistext</a>
Zeilenumbruch
<br>
Geschütztes Leerzeichen
&nbsp;
Trennlinie
<hr>
Allgemeines Inline-Element
<span>Text</span>


Einen kompletten Ueberblick über alle HTML-Elemente mit detaillierten Beschreibungen finden Sie auf: SELFHTML


Auf der nächsten Seite finden Sie eine Auflistung empfohlener HTML-Tools und weiterführende Links