HTML Befehle Kurzreferenz und HTML Einführung

Nachdem wir uns damit beschäftigt haben, welche Möglichkeiten es gibt um Websites zu erstellen, uns Tools und Literatur bereitgelegt, über den Sinn und Unsinn von validem Quellcode ausgelassen und uns die ein oder anderen Webdesign/Webentwicklungs-Begriffe zu Gemüte geführt haben, geht es nun endlich los mit den HTML-Grundlagen.

Wer hier einsteigt und sich fragt was HTML überhaupt ist, der sollte sich ein paar Minuten Zeit nehmen und die ersten Kapitel dieses Tutorials durchlesen.

Doch nun genug geschwafelt – nun soll es endlich beginnen.

Wie wir bereits wissen, ist HTML eine Auszeichungssprache, die dazu dient Inhalte auf der Website zu strukturieren.

Für diese Strukturierung werden sogenannte HTML-Tags oder auf schnödem Deutsch, HTML-Befehle genutzt. Die HTML-Befehle lassen sich je nach Verwendung in folgende Kategorien einteilen.

Befehle für Formulare
Befehle für Hyperlinks und Sprungmarken (Anker)
Befehle für Tabellen
Befehle für Listen
Befehle für Grafiken
Befehle zur Zeichenformatierung
Befehle für Container und Absätze
Allgemeine Befehle

HTML-Tags für Formulare

HTML-Tag	Attribute (Auszug)	Beschreibung
<form> </form>	method, action	Definiert ein Formular
<input />	id, type, checked, length	Definiert veschiedene Eingabemöglichkeiten
<textarea></textarea>	rows (Zeilen), cols (Spalten)	Definiert ein mehrzeiliges Eingabefeld
<button></button>	name, type, value	Definiert einen Button (reset, submit)
<select></select>	disabled, multiple, size, name	Definiert eine Auswahlliste
<option></option>	class, id, dir, lang	Auswahlmöglichkeiten der Auswahlloste
<fieldset></fieldset>	title, d, class	Umschließt Feldgruppen mit einem Rahmen
<legend></legend>	class, id, lang, style	Beschriftet das Formular

HTML-Tags für Anker und Hyperlinks

HTML-Tag	Attribute (Auszug)	Beschreibung
<a> </a>	href	Definiert einen Hyperlink oder Sprungmarke (Anker)
<link />	rel	Definiert einen Verweis auf ein anderes Dokument (z.B CSS)

HTML-Tags für Tabellen

HTML-Tag	Attribute (Auszug)	Beschreibung
<table></table>	border, cellpadding, cellspacing	Definiert eine Tabelle in HTML
<th></th>	class, id, dir, lang	Definiert einen Tabellenkopf
<thead></thead>	class, id, dir, lang	Gruppiert einen Tabellenkopf
<tbody></tbody>	class, id, dir, lang	Gruppiert den Tabellenkörper
<tfoot></tfoot>	class, id, dir, lang	Gruppiert den Tabellenfuß
<tr></tr>	class, id, dir, lang	Definiert eine Zeile in der Tabelle
<td></td>	class, id, dir, lang	Definiert den Zeileninhalt der Tabelle

HTML-Tags für Listen

HTML-Tag	Attribute (Auszug)	Beschreibung
<ol></ol>	class, id, dir, lang	Definiert eine nummerierte Liste
<ul></ul>	class, id, dir, lang	Definiert eine Aufzählungsliste
<dl></dl>	class, id, dir, lang	Definitionsliste in HTML
<dt></dt>	class, id, dir, lang	Definiert einen Ausdruck
<dd></dd>	class, id, dir, lang	Beschreibung in der Definitionsliste
<li></li>	class, id, dir, lang	Inhalt eines Listeeintrags

HTML-Tags für Grafiken

HTML-Tag	Attribute (Auszug)	Beschreibung
<img />	alt, src	Bindet eine Grafik ein
<map></map>	class, id, lang	Definiert eine Grafik mit anwählbaren Bereichen
<area />	alt, coords, href, shape	Definiert die Bereiche in der Map

HTML-Tags zur Zeichenformatierung

(Die Nutzung von CSS ist hier jedoch eher zu empfehlen!)

HTML-Tag	Attribute (Auszug)	Beschreibung
<strong></strong>	class, id, dir, lang	Betont semantisch den Text und stellt ihn (meistens) fett dar
<b></b>	class, id, dir, lang	Stellt Text fett dar
<em></em>	class, id, dir, lang	Betont semantisch den Text und stellt ihn kursiv dar
<i></i>	class, id, dir, lang	Stellt Text kursiv dar
<del></del>	class, id, dir, lang	Stellt gelöschten Text dar – Text wird duchgestrichen
<ins></ins>	class, id, cite	Stellt eingefügten Text dar – Text wird untestrichen
<blockquote></blockquote>	class, id, cite	Definiert einen Bereich für Zitate
<address></address>	class, id, cite	Definiert einen Bereich für Adressen

HTML-Tags für Container und Absätze

HTML-Tag	Attribute (Auszug)	Beschreibung
<p></p>	class, id, dir, lang	Blockbildendes Element. das einen Zeilenumbruch + Absatz erzeugt
<div></div>	class, id, dir, lang	Blockbildendes Element. das einen Zeilenumbruch aber keinen Absatz erzeugt
<span></span>	class, id, dir, lang	Inlineelement zur Textformatierung / Gruppierung von Text
<br />	class, id, dir, lang	Erzeugt einen Zeilenumbruch
<hr />	class, id, dir, lang	Definiert eine horizontale Linie mit Zeilenumbruch
<h1></h1>	class, id, dir, lang	Überschrift erster Ordnung mit Absatz
<h2></h2>	class, id, dir, lang	Überschrift zweiter Ordnung mit Absatz
<h3></h3>	class, id, dir, lang	Überschrift dritter Ordnung mit Absatz
<h4></h4>	class, id, dir, lang	Überschrift vierter Ordnung mit Absatz
<h5></h5>	class, id, dir, lang	Überschrift fünfter Ordnung mit Absatz
<h6></h6>	class, id, dir, lang	Überschrift sechster Ordnung mit Absatz

Allgemeine HTML-Tags

HTML-Tag	Attribute (Auszug)	Beschreibung
<!DOCTYPE>		Dokumenttypdeklaration – Beschreibt welche HTML Version genutzt wird
<html></html>		Definiert den HTML Bereich
<body></body>		Definiert den Textbereich der HTML-Datei
<title></title		Definiert den Titel des HTML-Dokuments
<!–– ––>		Kommentarfunktion für HTML

Damit wären wir am Ende unserer Kurzreferenz der HTML-Befehle. Natürlich gibt es noch weitaus mehr HTML-Befehle, jedoch sind die hier aufgeführten HTML-Tags mit ihren Attributen quasi das Grundhandwerkszeug für jeden der mit HTML arbeitet.

Wenn Du eine komplette HTML-Befehlsreferenz suchst, empfiehlt sich auch hier das Quasi-Standardwerk selfHTML von Stefan Münz als Neuauflage inkl. HTML5:

HTML 5 Handbuch – Die neuen Features von HTML5, umfangreicher Referenzteil für HTML und CSS zum Nachschlagen.

Im nächsten Teil des Tutorials Webseiten erstellen leicht gemacht, widmen wir uns den Grundlagen von CSS.

About The Author

Andreas Meyhöfer

Wirtschaftsinformatiker (B.Sc.), Fachinformatiker (AE), Verlagskaufmann, Blogger, BTX-Kind und Käsekuchenliebhaber. Immer auf der Suche nach der nächsten Herausforderung. Du findest mich auch bei Google+ oder abonniere unseren RSS-Feed.

Comments are closed.