HTML Button erstellen: HTML Version ermitteln
Die Auszeichnungssprache HTML wird in verschiedenen Versionen und Erweiterung seit Jahren für Webseiten verwendet. Leider existiert eine Vielzahl verschiedener Standards. Um mit HTML einen Button zu erstellen, kann es daher notwendig sein, die Version vorab festzustellen. Unterscheiden können Sie diese über die Definition des Doctypes. Vergleichen Sie hierzu die folgende Liste.
Im Code Ihrer Webseite finden Sie den Doctype für gewöhnlich in der ersten Zeile:
<!DOCTYPE html> - Hierbei handelt es sich um HTML 5. Dies ist die neuste Version von HTML und sollte bei neuen Webseiten bevorzugt werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ...> - Hierbei handelt es sich um HTML 4.01. Es existieren drei Untertypen: Strict, Transitional und Frameset. Im Gegensatz zu Strict, erlaubt Transitional die Verwendung von überholten Elementen wie beispielsweise font. Frameset ermöglicht es zusätzlich Frames in Webseiten zu verwenden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...> - Hierbei handelt es sich um XHTML 1.0. Auch hier existieren die Unterversionen Strict, Transitional und Frameset. Die Möglichkeiten, um Elemente und Attribute zu verwenden, entsprechen jeweils denen von HTML 4.01. Allerdings unterscheidet sich hier die Syntax zu der in HTML.
Es existiert noch eine Vielzahl anderer Doctypes. Diese sind jedoch eher exotisch und werden nur selten verwendet. Sollten Sie dennoch einen abweichenden Doctype finden, verwenden Sie eine Suchmaschine, um die korrekte Version von HTML zu ermitteln.
HTML Button erstellen: Input-Elemente oder Grafik-Schaltflächen
Grundsätzlich haben Sie drei Möglichkeiten, um Buttons und Schaltflächen zu realisieren: Die einfache Möglichkeit besteht darin, eine Grafik einzubinden und diese mit einem Link zu versehen. Ebenfalls einfach, jedoch etwas aufwendiger, ist die Kombination eines einfachen Links in Verbindung mit CSS Attributen. Die letzte Möglichkeit besteht in der Verwendung des Input-Elements. Diese Möglichkeit bietet sich jedoch nur in Verbindung mit Formularen an und ist daher schwieriger umzusetzen.
HTML und XHTML: Grafik-Schaltflächen definieren
Folgen Sie diesen Schritten, um eine Grafik-Schaltfläche einzubinden:
- Website öffnen. Öffnen Sie die Webseite mit Ihrem bevorzugten Editor.
- Codestelle finden. Navigieren Sie zur gewünschten Stelle im Code.
- Code einfügen. Fügen Sie den folgenden Code ein: <a href="link.html"><img src="Button.jpg" alt="Alternativer Text"></a>
- Umbennen. Ändern Sie "link.html" und "Button.jpg" auf die entsprechenden Werte um. "link.html" verweist auf die Webseite, die die Schaltfläche aufrufen soll. "Button.jpg" steht für den Namen der Grafikdatei. Beachten Sie: Falls die Dateien in einem anderen Verzeichnis liegen, müssen Sie diese Verzeichnisse ebenfalls angeben. Der Eintrag "Alternativer Text" ermöglicht, dass auch Browser, die keine Grafiken anzeigen, eine Beschreibung der Schaltfläche anzeigen.
HTML und XHTML: Button mit HTML und CSS Attribut
Das Vorgehen ist ähnlich zum Einbinden einer Grafik-Schaltfläche. Allerdings verwenden Sie hierzu nur HTML und CSS. Dadurch lädt Ihre Webseite deutlich schneller und Sie müssen keine Grafiken erstellen. Allerdings könnten ältere Browser Probleme mit der Darstellung des Buttons haben. Sowohl Farbe, Form als auch Schattenwurf bestimmen Sie über entsprechende CSS Attribute. Falls Sie vorab schon einen Eindruck gewinnen möchten, können Sie auf einen der zahlreichen CSS Button Generatoren im Internet zurückgreifen.
Dies hat den Vorteil, dass Ihnen der Code für die gängigen Browser gleich generiert wird und Sie den Code nur noch in Ihrer Webseite einfügen müssen:
- Website öffnen. Öffnen Sie die Webseite mit Ihrem bevorzugten Editor.
- Codestelle finden. Navigieren Sie zur gewünschten Stelle im Code.
- Code einfügen. Fügen Sie den folgenden Code ein: <a href="link.html" class="button">Name des Links</a>
- Umbennen. Ändern Sie "link.html" entsprechend Punkt 4 des vorhergehenden Abschnittes ab. Die Klasse "button" können Sie frei benennen, sollte jedoch mit dem entsprechenden CSS Code übereinstimmen.
- Dateien einfügen. Fügen Sie den CSS Code in Ihre CSS Datei ein. Alternativ können Sie Ihn unmittelbar unter dem Eintrag "<!--" unter der Zeile "<style type="text/css">" einfügen.
Das Input-Element: Informationen absenden
Wie bereits erwähnt, findet das Input-Element bei Formularen Anwendung. Sofern Sie Informationen erfassen möchten, können Sie auf das Input-Element zurückgreifen. Es eignet sich jedoch nicht, um Schaltflächen für die Navigation zu erstellen. Falls Sie Formulare verwenden möchten, benötigen Sie einen Formular-Handler. Hierfür werden meist PHP-Scripte eingesetzt, aber auch andere Scriptsprachen sind möglich.
Das Input-Element übernimmt innerhalb des Formulars drei Funktionen:
<input type="text" ...> - Der Typ "text" des Input-Elementes ermöglicht die Eingabe von Texten durch den Nutzer.
<input type="radio" ...> - Der Typ "radio" des Elementes stellt Optionsfelder zur Verfügung.
<input type="submit" ...> - Dieser Typ ist für das Absenden der Informationen notwendig. Er übermittelt sie an den Handler, der im Element "<form action= ...>" definiert wird.
HTML Button per Input-Element definieren
Nachdem Sie ein Formular erstellt haben, benötigen Sie noch den eigentlichen Button:
- Zum Formular navigieren. Navigieren Sie zum Formular im Code.
- Code einfügen. Fügen Sie in der Zeile über "</form>" folgenden Code ein: <input class="button" type="submit" value="Ihr Text auf dem Button">
- Aussehen anpassen. Das Aussehen des Buttons können Sie nun über CSS definieren. Auch hierfür finden Sie im Internet CSS Generatoren. Den entsprechenden Code können Sie analog zu Punkt 5 im Abschnitt "HTML und XHTML: Button mit HTML und CSS Attribut" in Ihre Webseite aufnehmen.
XHTML Button per Input-Element definieren
Das Vorgehen in XHTML ist analog zum Vorgehen im vorhergehenden Abschnitt. Allerdings muss das Input-Element hier geschlossen werden. Daher lautet der korrekte Code hier:
<input class="button" type="submit" value="Ihr Text auf dem Button"><input />
Eine andere (alte) Alternative
Neben den hier beschriebenen Methoden, Grafik-Schaltlfächen, Buttons über HTML und CSS oder mittels Input-Elementen, existieren noch andere Möglichkeiten. Noch immer häufig, gerade bei älteren Webseiten, sind Flash-Objekte. Obwohl Sie zwar eher eine der vormals beschriebenen Methoden verwenden sollten, könnte Flash bei der Pflege älterer Webseiten notwendig sein. Sofern Sie also die Wahl haben, meiden Sie Flash. Falls Sie es dennoch verwenden müssen, helfen Ihnen die folgenden Informationen weiter, sodass Ihnen die Umsetzung schnell von der Hand gehen sollte:
Button mittels Flash: Adobe Flash kommt zwar noch bei vielen Webseiten zum Einsatz, verliert jedoch seit Erscheinen von HTML 5 an Bedeutung. Zudem hat Adobe die Entwicklung für verschiedene Plattformen eingestellt. Daher könnten Sie Nutzer aussperren.
Sollten Sie dennoch Schaltflächen mittels Flash umsetzen wollen, benötigen Sie ein Programm, beispielsweise Flash, um eine entsprechende Datei zu erstellen. Mittels der Exportfunktion der einschlägigen Softwarepakete können Sie zudem den notwendigen HTML Code generieren. Diesen müssen Sie nun nur noch an der gewünschten Stelle in Ihre Webseite einfügen.
Wie hilfreich finden Sie diesen Artikel?
