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:
Im nächsten Teil des Tutorials Webseiten erstellen leicht gemacht, widmen wir uns den Grundlagen von CSS.
