Verfasst von sura1 am 9. November 2008
Standard-Buttons in HTML definieren
HTML stellt zwei Standard-Buttons zur Verfügung, um Formulareingaben zu handhaben: einen Button zum „Absenden“ und einen zum „Abbrechen“. Mit dem Absendebutton kann der Anwender das ausgefüllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden <form>-Tag mit dem Attribut action festgelegt wurde. Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt, Eingaben werden gelöscht.
Erläuterung:
Mit <input type=“submit“> definieren Sie einen Absendebutton (input = Eingabe, submit = bestätigen). Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt, und es wird die Adresse aufgerufen, die im einleitenden <form>-Tag beim Attribut action angegeben ist. Zur unterschiedlichen weiteren Behandlung der übermittelten Daten können Sie mehrere Absendebuttons mit name-Attribut verwenden.
Mit <input type=“reset“> definieren Sie einen Abbrechen-Button (reset = zurücksetzen). Eingegebene Daten werden verworfen und nicht abgeschickt.
Mit dem Attribut value bestimmen Sie die Beschriftung der Buttons (value = Wert).
Genaue Informationen zu diesem Thema finden Sie unter:
http://de.selfhtml.org/html/formulare/definieren.htm
http://de.selfhtml.org/html/formulare/formularbuttons.htm
ERSTELLUNG ANKLICKBARE BUTTONS:
Wenn Sie nun auf einer Webseite ganz schnell und ohne Einsatz von Grafik-Buttons oder CSS-Dateien einen anklickbaren Button erstellen möchten, ist die oben beschriebene Methode ein gutes Beispiel dafür.
Setzen Sie einfachen folgenden HTML-Code ein:
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" />
</form>
Unter <form action=„http://sura1.wordpress.com/„> setze ich beim Attribut action meine Webadresse ein.
Mit <input type=“submit“ value=“Sura 1 Artworks“ /> wird mit dem Attribut value die Beschriftung des Buttons festgelegt.
Im Attribut value können Sie danach durch den CSS-Befehl style=„font-size: …px;“ die Größe des Buttons entsprechend einstellen (siehe Beispielcode! Font-size: bis 50px!!).
Wichtig:
Durch die Länge des Textes/Größe der Buchstaben definieren Sie die Länge/Größe des Buttons!!
Quellcode in meinem Beispiel:
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;" />
</form>
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
font-size: 25px;" />
</form>
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
font-size: 30px;" />
</form>
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
font-size: 35px;" />
</form>
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
font-size: 40px;" />
</form>
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
font-size: 45px;" />
</form>
<form action="http://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
font-size: 50px;" />
</form>
Ähnliche Artikel:
29 Free CSS Menus – 29 kostenlose CSS Menüs auf www.13styles.com
Free CSS Menüs – www13stylesscss
Free CSS Menus: 14 gratis CSS Menüs
9 Free CSS Menues – 9 kostenlose CSS-Menüs zum Mitnehmen
7 kostenlose CSS-Navigationsmenüs in Reiteroptik
Navigations-Menü mit Button-Effekt
Formatierung von horizontalen Navigationsleisten mit CSS
Veröffentlicht in HTML | Verschlagwortet mit : Absendebutton, Attribut action, Attribut value, Erstellung anklickbare Buttons, Formular in HTML, Formulardaten, HTML, Standard-Buttons in HTML | Kommentar schreiben »
Verfasst von sura1 am 21. Juli 2008
Anker (Sprungmarken) definieren:
Ein Anker bezeichnet eine Sprungmarke innerhalb eines HTML-Dokuments.
Sie können innerhalb einer HTML-Datei Anker definieren. Dann können Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb der angezeigten Seite ausgeführt. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker geladen hat, an die entsprechende Stelle innerhalb der Datei.
Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href notiert wird, sondern stattdessen ein Attribut name. Ein kompletter Anker sieht also so aus:
<a name=“ankername“>…</a>
Inhalt des Ankers
Was Sie zwischen <a name=“ankername“> und </a> als Inhalt notieren, ist das Sprungziel für Verweise, die zu diesem Anker führen. Es ist durchaus erlaubt, einen leeren Anker zu notieren, also <a name=“ankername“></a>. Einige ältere Browser führen Verweise zu leeren Ankern jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen.
Wenn Sie also beispielsweise eine Überschrift als Anker definieren wollen, was ja durchaus typisch ist, dann notieren Sie wie im obigen Beispiel in der Überschrift den Anker und darin den Text der Überschrift.
Hierzu zwei vollständige Beispiele:
1) Anker_1.html
Zu Beginn des Dokumentes steht ein Anker mit der id=“oben“. Dann folgen vier Punkte innerhalb einer ungeordneten Liste mit Links zu #kapitel1, #kapitel2, #kapitel3, #kapitel4. Darunter befinden sich 4 Absätze mit eben diesen Ankern.
So kann man mit einem Klick auf die einzelnen Kapitel zu den entsprechenden Stellen im Dokument springen, d.h. das Fenster wird nach unten gescrollt. Das funktioniert jedoch nur, wenn das Browserfenster kleiner ist als der dargestellte Inhalt. Am Ende eines jeden Kapitels befindet sich der Verweis wieder nach oben.
Zur Formatierung habe ich in den Beispielen im Head-Bereich ein CSS eingebaut:
Die Hintergrundfarbe des body ist #000 (schwarz), die Schriftfarbe ist ein helles Grau (color: #bfbfbf), der Innenabstand beträgt 20px (padding: 20px).
Über die in der Klammer angeführten CSS-Befehle (ul, ul li a, ul li a:hover, .top a, .top a:hover) werden die Anker und Sprungmarken optisch aufgewertet.
Fertiges Beispiel: Bitte Link oder Grafik anklicken!
1) Anker_2.html
Beispiel Nr. 2 ist im Prinzip genauso aufgebaut wie Beispiel Nummer 1. Die einzige Ausnahme findet sich im eingebetteten CSS. Innerhalb des body-tags (Hintergrundfarbe: background-color: 3f3f3f) gibt es eine div-Box mit der id=“wrapper“.
Diese hat eine Breite von 800 px (width: 800px) und wird über die Außenabstände margin (20px auto) mittig auf der Webseite angeordnet; außerdem erhält diese einen Rand in der Breite von 4px (border: 4px solid #fff;), eine Hintergrundfarbe (background-color: #000;), eine eigene Schriftfarbe (color: #bfbfbf) und einen Innenabstand von 20px (padding: 20px).
Durch diese zusätzliche Formatierung im Stylesheet ist es für Sie nicht mehr notwendig, das Browserfenster zu verkleinern, wenn Sie die Funktionsweise von Ankern innerhalb einer Datei sehen möchten. Sie klicken auf eines der vier Kapitel in der ungeordneten Liste am Seitenanfang und gelangen durch diese Sprungmarken sofort zur gesuchten Textstelle.
Fertiges Beispiel: Bitte Link oder Grafik anklicken!
Download Beispieldateien: (9,50 KB zip-Datei) – Bitte Download-Button anklicken!!
Veröffentlicht in HTML | Verschlagwortet mit : a-Element, Anchor, Anker, Ankerstelle, Sprungmarke, Sprungmarken, Sprunkmarke im HTML-Element, Verweise zu Ankern | Kommentar schreiben »
Verfasst von sura1 am 25. Juni 2008
Das Element blockquote zeichnet ein langes Zitat aus. Es erzeugt eine eigene Zeile und muss Blockelemente beinhalten.
Das blockquote-Element wird gerne verwendet, um Einrückungen zu realisieren. Da es sich jedoch um eine logische Textauszeichnung handelt, die keine bestimmte Art der Formatierung vorschreibt, ist der Einrück-Effekt nicht garantiert.
Wie Zitate und Adressen genau dargestellt werden, darauf haben Sie mit XHTML keinen Einfluss. Sie können solche Elemente jedoch ganz einfach mit CSS formatieren.
Beispiel: (ohne CSS-Formatierung)
<p>Lorem ipsum usu dicit adversarium ne. Ex cum option aperiri nostrum,
pro in altera audiam, in dico atomorum sed. Ut euismod takimata cum.
Putent mediocritatem his et, an mucius persius interpretaris ius.
Vis ex lorem assum, in est nihil doming noster. Congue libris aliquam no per,
ius in dicunt iuvaret fierent, eum modus civibus ne.</p>
<blockquote>
<p><span>»</span>Die Art, wie er das Spielgerät liebkoste,
<em>verzückte</em> seine Anhänger<span>«</span></p>
</blockquote>
<p>Lorem ipsum usu dicit adversarium ne. Ex cum option aperiri nostrum,
pro in altera audiam, in dico atomorum sed. Ut euismod takimata cum.
Putent mediocritatem his et, an mucius persius interpretaris ius.
Vis ex lorem assum, in est nihil doming noster. Congue libris aliquam no per,
ius in dicunt iuvaret fierent, eum modus civibus ne.</p>
Ergebnis:
Beispiel (mit CSS-Formatierung):
zip-file: 1.51KB ( Download Beispieldateien )
Hier wird das blockquote-Element in einen Fließtext eingebaut. Der dazugehörige CSS-Code sieht wie folgt aus:
blockquote {
color: #927B6B;
font: italic 2em/1.2 georgia, serif;
float: right;
margin: .3em 0 .7em .5em;
text-align: center;
width: 250px;
}
blockquote p {
margin: 0;
}
blockquote em {
color: #87420F;
}
blockquote span {
color: #BAB9B3;
font-size: 1.1em;
font-weight: bold;
line-height: 1.0;
padding: 0 .2em;
}
Ergebnis (zur Vorschau auf die Grafik klicken!)
Informationen:
http://de.selfhtml.org/html/text/zitate_adressen.htm
http://www.mediaevent.de/xhtml/blockquote.html
Veröffentlicht in HTML | Verschlagwortet mit : blockquote, langes Zitat, Textauszeichnung, Einrück-Effekt, Zitate darstellen, Blockelemente | Kommentar schreiben »
