Die wichtigsten HTML Befehle

Was sind die wichtigsten HTML Befehle, die ein erfolgreicher Affiliate kennen muss? Dieser Artikel bietet Ihnen eine Auflistung und Beschreibung der wichtigsten HTML Befehle. Mit diesen wird Ihre Webseite im Browser optimal dargestellt. HTML steht für HyperText Markup Language, was übersetzt Hypertext Auszeichnungssprache bedeutet. Diese Sprache bzw. Syntax dient der Beschreibung und Strukturierung von digitalen Inhalten wie Texten, Tabellen, Grafiken und Verlinkungen. HTML bietet zahlreiche Gestaltungsmöglichkeiten, wie etwa Absätze, Zeilenumbrüche und Abstände, jeweils inklusive der Definition wie Format, Schriftgröße, Höhe und Breite von Elementen.

Alle Browser verstehen das HTML Format und interpretieren die Beschreibung der einzelnen HTML Befehle um Webseiten entsprechend auf dem Bildschirm darzustellen.
HTML Dokumente können in Texteditoren erstellt werden und müssen am Ende als Dateiformat die Endung .html aufweisen. Nur so kann der Browser die HTML Datei interpretieren und anzeigen.
Die im Folgenden beschriebenen HTML Elemente dienen lediglich der Strukturierung von einem Dokument. Für Design und Layout ist die Sprache CSS (Cascading Stylesheets) zuständig.

Grundgerüst der HTML-Seite

Das Grundgerüst jeder HTML-Seite beinhaltet die Aufteilung in einen Kopfteil (auch Head Bereich oder Header genannt) mit Metainformationen und den Teil, der die Inhalte der Seite enthält. Der Head Bereich einer HTML Datei dient der Beschreibung wesentlicher Angaben. Hier gibt es HTML Befehle für den Titel der Seite, Keywords für Suchmaschinen, verlinkte Stylesheets und weitere Informationen, wie zum Beispiel die Beschreibung der verwendeten HTML-Version.
Im folgenden Beispiel sehen Sie die HTML Elemente, die für den grundsätzlichen Aufbau einer Seite nötig sind:

 <html>
 <head>
 <title>Titel ihrer Seite</title>
 </head>
 <body>
 </body>
 </html>

Zwischen diesen beiden Body Tags stehen die eigentlichen Inhalte der Seite.

   Online Geld verdienen

Durch <div>-Tags wird der Seite Struktur verliehen. Dies dient der Beschreibung und Definition einzelner Teilbereiche, auf die später per Stylesheet (CSS) zugegriffen werden kann:

<div id="Kopfleiste"> Hier könnte ein Bild oder ein Untermenü mit Links stehen </div>
<div id="rechts"> Hier stehen Links auf andere Seiten </div>
<div id="hauptteil">Beispieltext für den Hauppteil der Seite </div>
<div id="footer">Die Fußzeile, in der sich z.B. das Impressum finden lässt.</div>

Eine so aufgeteilte Seite hat also eine Kopfspalte, einen mittleren Teil mit zwei Spalten für Links auf Unterseiten und Text sowie eine Fußzeile.
<div>-Tags können auch verschachtelt sein und bieten so ein mächtiges Werkzeug, um eine Seite in Bereiche aufzuteilen.

Im Head Bereich können Sie auch direkt eine Beschreibung der Stylesheetangaben für einzelne Seiten machen (wichtig für einfaches und schnell zu änderndes Webdesign) sowie Javascript einbauen. Eine detaillierte Beschreibung zum Aufbau und zu den Kopfdaten einer HTML-Seite sowie weitere HTML Befehle finden Sie auf SelfHTML.

HTML5 Dokumentstruktur

Die Hypertext Markup Language Version 5 (HTML5) stellt den neuen Standard im Web 2.0 dar. Deshalb ist es wichtig, die damit verbundenen neuen HTML Elemente zu kennen. Das HTML5 Grundgerüst wird so aufgebaut:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Titel des Dokumentes</title>

</head>

<body>

</body>

</html>

Um ein Dokument mit HTML5 zu strukturieren, stehen einige neue Elemente zur Verfügung. Die Wichtigsten sind hier aufgelistet:

Kopf-Bereich
Das <header>-Element beschreibt den Kopfteil einer Seite und enthält oft den Titel sowie ein Logo:

<header>

Navigation
Mit dem <nav>-Element wird ein Abschnitt beschrieben, der Links zur Navigation enthält:

<nav>

Abschnitte definieren
Mithilfe des <section>-Tag  können Abschnitte beschrieben und Elemente gruppiert werden:

<section>

Inhalt
Das <main>-Element definiert den Hauptinhalt einer Seite und ist nur einmal im Dokument zulässig:

<main>

Hingegen beschreibt das <article>-Element einen bestimmten, eigenständigen Inhalt:

<article>

Zusätzliche Information
Mit dem <aside>-Tag lässt sich eine Zusatzinformation oder Randbemerkung einfügen:

<aside>

Fußbereich
Der Fußbereich wird mit dem <footer>-Element definiert. Hier finden sich oft das Impressum oder weitere Links wieder:

<footer>

HTML Befehle für den Inhalt der Seite

Nachfolgend finden Sie eine genaue Beschreibung wichtiger HTML Befehle.

Überschriften
Mit dem Tag kann man sechs verschiedene Überschriften angeben:

<h1>Große Überschrift</h1>
 <h3>Unterüberschrift</h3>
 <h6>Eine besonders kleine Überschrift</h6>

Formatierungen innerhalb von Texten
Für Formatierungen innerhalb von Absätzen (so genannte Inline-Elemente) sind die folgenden HTML Befehle relevant:

<b>Schreibt einen Text fett</b>
<i>Stellt den Text in kursiver Schrift dar</i>
<font color="#FF0000">Farbige Schrift in rot kann mit diesem Tag erzeugt werden</font>

Die Farben werden mit Codes im Hexadezimalsystem angegeben und in der Form #xxxxxx notiert. Zwei Zeichen stehen dabei jeweils für eine der drei Farben Rot (#FF0000), Grün(#00FF00) und Blau(#0000FF). Zahlreiche Tabellen mit Farbnamen und Codes finden Sie durch weitere Recherche im Internet, zum Beispiel auf Selfhtml.
Einige der Farben lassen sich auch einfach mit ihrem Namen angeben: „grey“,“black“,“white“,“red“ und „blue“ sind nur einige Beispiele.
Auch in diesem Wiki bieten wir Ihnen in dem Artikel HTML Farben eine Auflistung und Beschreibung der HTML Befehle die die wichtigsten Farben definieren.

   Mit Webseite Geld verdienen

Ähnlich der HTML Tags ,die für die Beschreibung der Farben zuständing sind, sind die Tags aufgebaut, die Größe und Schriftarten definieren :

<font size="3">Text in Schriftgröße 3</font>
<font face="Schriftart">Text in ausgewählter Schriftart</font>

Zeilenumbrüche
Ein einfacher Zeilenumbruch erfolgt mit dem Befehl:

<br />

Soll hingegen in einem längeren Textbereich ein Zeilenumbruch vermieden werden, wird mit dem Nobreak Befehl gearbeitet:

<nobr>Dies ist ein Beispieltext, der als Beschreibung dient und die Funktion und  des HTML Befehl "Nobreak"erläutern soll. Mit diesem Befehl wird ein Zeilenumbruch verhindert, solange der Text zwischen dem öffnenen und dem schließenden Nobreak Tag geschrieben ist.</nobr>

Absatz
Mit dem Befehl

 <p>

ensteht ein einfacher Absatz. Das <p>-Element dient der Gliederung des Dokuments.

Verlinkungen
Mit diesem HTML-Befehl werden Links, also Verweise auf andere projektinterne oder externe URLs gesetzt:

<a href="http://www.meineverlinkteseite.de/" title="Alternativtext">Text des Links</a>

Ein alternativer Text kann durch das title-Attribut gesetzt werden. Zusätzlich empfiehlt es sich heutzutage aus Gründen der Suchmaschinenoptimierung (SEO), den Großteil der externen Verweise mit dem rel=“NoFollow“ Attribut zu versehen.  Diese Attribut Beschreibung wird von Google empfohlen um den Bots der Suchmaschinen mitzuteilen, dass mit diesem Attribut versehene Links nicht gefolgt werden soll. Somit kann man auf seiner Webseite eine große Anzahl von externen Links einbauen ohne befürchten zu müssen, deshalb von Suchmaschinen in den SERPs (Search Engine Responses = Ranglistenplätze bei den Suchergebnissen) abgestraft zu werden.
Der HTML Befehl für den Link Verweis aus dem obigen Beispiel lautet um das rel=“NoFollow“ Attribut ergänzt wie folgt:

<a href="http://www.meineverlinkteseite.de/" rel="NoFollow" title="Alternativtext">Text des Links</a>

Medien einbinden
Um Bilder einzubinden, geben Sie die Quelldatei des Bildes sowie die Größe (width/height) und Ausrichtung (align) im <img>-Tag an:

<img src="/link/zu/ihrem/bild/meinbild.jpg" width="100" height="50" align="top" border="0" alt="Home">

Dies kann auch mit dem HTML Befehl für Links kombiniert werden:

<a href="http://www.meineverlinkteseite.de/" title="Alternativtext"><img src="/link/zu/ihrem/bild/meinbild.jpg" width="100" height="50" align="top" border="0" alt="Home"></a>

Mit HTML5 gibt es auch einen HTML Befehl zum Einbinden von Videos:

 <video src=/link/zur/videodatei/meinvideo.ogv width=320 height=240 controls poster=/link/zum/vorschaubild/meinbild.jpg.jpg></video>

Aufzählungen/ Listen
Listen können mit folgendem HTML Befehl erstellt werden:

<li> Liste </li>

Die „unordered list“ (unsortierte Liste) ermöglicht den Aufbau einer Seitennavigation oder einer einfachen Aufzählung. Es umschließt alle  <li> Elemente:

<ul>
<li> Navigation 1 </li>
<li> Navigation 2 </li>
</ul>

Zusätzlich bietet der HTML Befehl <ol> die Möglichkeit, eine nummerierte Liste zu erstellen. Die „ordered list“ (nummerierte Liste) wird wie die „unordered list“ aufgebaut:

<ol>
<li> Aufzählung 1 </li>
<li> Aufzählung 2 </li>
</ol>

HTML Befehle für Tabellen und Formulare

Beschreibung von HTML Befehlen die für Tabellen und Formulare wichtig sind.

Tabellen
Tabellen lassen sich durch die in der folgenden Beschreibung angegebenen HTML-Tags erzeugen:

<table>
 <table border="2px">
 <tr>
 <th>Überschrift</th>
 <th>Überschrift</th>
 </tr>
 <tr>
 <td>Zelle 1</td>
 <td>Zelle 2</td>
 </tr>
 <tr>
 <td>Zelle 3</td>
 <td>Zelle 4</td>
 </tr>
 </table>

Mit dem „border“ Befehl wird definiert, wie dick die Linien der Tabelle sein sollen. Im oberen Beispiel sind es 2 Pixel. Die Beispieltabelle hat eine Kopfzeile („<th>“ für „table head“), zwei Zeilen („<tr>“, „table row“) und zwei Zellen. Aus der Anzahl der Zellen pro Zeile ergibt sich die Spaltenzahl („<td>“).
In der Tabellendefinition können Sie weitere HTML Befehle zur Formatierung der Tabelle angeben. So können etwa Farbe, Schriftart oder Ausrichtung global für die gesamte Tabelle festgelegt werden.

Formulare einbinden:

<form>
 <input name="Feldname" type="text" size="30" maxlength="30"value="Vorname">
 <input name="Feld2" type="text" size="30" maxlength="40">
 <input type="submit" value="Senden">
 <input type="reset" value="Abbrechen">
 </form>

Das „value“-Attribut gibt dem Feld eine Vorbelegung.
Im Internet gibt es weitere Informationen zum Erzeugen von Auswahlbuttons, Checkboxen und verschachtelten Listen sowie zur Verarbeitung der eingegebenen Informationen.

Kommentare und Sonderzeichen

Ein Kommentar im HTML-Dokument wird zwischen den öffnenden Tag „<!–“ und  den schließenden Kommentartag „–>“ gesetzt.
Hier eine beispielhafte Beschreibung für den Kommentar:

<!--dieser Text erscheint nicht auf ihrer Webseite -->. Mit ihm kann man auch HTML Befehle zum Testen verschiedener Varianten ausklammern: <!-- <b>Diese Fett-Tags und alle weiteren HTML Befehle</b> werden jetzt ignoriert -->

Umlaute und Sonderzeichen, wie das deutsche „ß“ oder „&“, müssen durch spezielle HTML Befehle angegeben werden. Die hierzu entsprechenden Regeln gibt es in der folgenden Beschreibung:

&auml; = kleines "ä"
&ouml; = großes "Ö"
ßszlig; = "ß"

Eine Liste und Beschreibung aller dafür notwendigen HTML Befehle finden Sie in der Selfhtml-Zeichenreferenz sowie hier im Wikibeitrag über HTML Sonderzeichen.

Zudem kann man auch auf weiteren Webseiten zum Thema „HTML Befehle“ und „HTML Codes“ oder „HTML Progammierung“ fündig werden.

   Jetzt Affiliate werden

Menü