Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Archive for the ‘HTML’ Category

Mit „Postable“ HTML-eigene Zeichen maskieren

Posted by sura1 - 1. März 2009

silver01
Bookmark and Share

http://www.elliotswan.com/postable/

postable

Mit Postable können Sie HTML-eigene Zeichen maskieren

Wenn in Ihrem Text Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen Sie diese Zeichen maskieren. Die folgenden Zeichen müssen Sie zum Beispiel wie folgt maskieren:

Ersetzen Sie das Zeichen & durch die Zeichenfolge & ("Ampersand")
Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt; ("lower than")
Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt; ("greater than")

Am gefährlichsten sind die spitze öffnende Klammer (<) und die spitze schließende Klammer (>). Wenn Sie diese Zeichen nicht wie vorgeschrieben maskieren, bringen Sie den Web-Browser mit ziemlicher Sicherheit durcheinander, weil er glaubt, nun würde ein HTML-Tag folgen.

Elliot Swan stellt dafür in seinem Blog eine interessantes Online-Tool mit dem Name POSTABLE vor, mit dem Sie rasch und einfach diese HTML-Sonderzeichen umwandeln können.

Beispiel: Original Quellcode

postable11

Umgewandelter Code:

postable_2

Infos zum Thema:
http://de.selfhtml.org/html/allgemein/zeichen.htm
http://fwpf-webdesign.de/xhtml/ergaenzungen/html-eigene-zeichen
http://leftlogic.com/lounge/articles/entity-lookup/

Interessant in diesem Zusammenhang ist das Firefox Add-on „HTML Entity Character Lookup“, welches Sie hier downloaden können:

http://www.yining.org/firefox/extensions/html-entity-char-lookup/

Nach der Installation können Sie mit einem Klick auf die rechte Maustaste direkt Ihr gesuchtes Sonderzeichen umwandeln.

a) Klick rechte Maustaste – Add-on mit Klick aktivieren!

html_entity

b) gewünschtes Sonderzeichen eintippen – Ergebnis erscheint sofort!

html_entity_1

Ähnliche Artikel:
VideoDownloadHelper 3.2: Firefox Add-on
www.cooliris.com: Firefox Add-on
Firefox Erweiterung Picnik
16 tolle Firefox Themes
Flagfox: Firefox Add-on gibt Standort der besuchten Webseite an

Posted in HTML | Verschlagwortet mit: , , , , , , , | Leave a Comment »

Standard-Buttons in HTML definieren

Posted by sura1 - 9. November 2008

09nov
Bookmark and Share

Standard-Buttons in HTML definieren

standard-buttons-in-html_1226258308937

grun_demo_ansehen

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="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" />
</form>

Unter <form action=https://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!!

demo_ausfuhren

Quellcode in meinem Beispiel:

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 25px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 30px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 35px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 40px;" />
</form>

<form action="https://sura1.wordpress.com/">
<input type="submit" value="Sura 1 Artworks" style="cursor:pointer;
 font-size: 45px;" />
</form>

<form action="https://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

Posted in HTML | Verschlagwortet mit: , , , , , , , | Leave a Comment »

HTML-Listen einmal anders: Schwebende Listenkisten

Posted by sura1 - 9. August 2008

Bookmark and Share

Ich möchte Ihnen hier in einem Beispiel zeigen, was Sie mit einer ungeordneten Liste (ul) und ein wenig CSS alles „anstellen“ können.

Beispieldateien (zip-file: 1oKB): Button anklicken oder hier(!) downloaden

Beispiel: (bitte Grafik anklicken oder hier(!) ansehen)

Idee und Inspiration:

Auf die Idee gebracht hat mich Dozent Peter Müller, welcher in seinem Buch „Little Boxes“ (Teil 2, Kapitel III, Absatz 12.2) ein entsprechendes Beispiel vorstellt. Leseproben und Beispieldateien können Sie auf der Webseite http://little-boxes.de/ herunterladen.

Die zweite wichtige Inspiration ist von Stu Nicholls von CSSplay. Ich habe auf seiner Seite nach einfachen CSS-Menüs gesucht und bin dabei auf folgendes (englisch-sprachige) Tutorial gestoßen: http://www.cssplay.co.uk/menus/tutorial.html .

Stu Nicholls erklärt in seinem Workshop, wie man eine vertikale Navigation erstellt, ohne (!) auf Listenelemente zurückgreifen zu müssen ( A Vertical Button Menu – The EASY Way).

Umsetzung:

Nach eingehender Beschäftigung mit den Vorlagen von Peter Müller und Stu Nicholls ging ich daran, das Muster-Beispiel an meine Bedürfnisse anzupassen.

Listen sind sehr flexibel, und oft genug sieht man ihnen den Ursprung als Liste nicht an.Ich beabsichtige, eine XHTML-Referenz zu erstellen und die XHTML-Elemente auf der Startseite in sieben Themengebiete aufzuteilen.

Die sieben Boxen im Textbereich gehören inhaltlich zusammen und sollen deshalb in einer ungeordneten Liste untergebracht werden.

Herausgekommen ist dabei folgendes:

Schwebende Listenkisten

Schritt 01:

Das HTML als Grundlage (schwebende_listenkisten.html)

<ul>
<li>
<h3><a href="#">XHTML-Struktur</a></h3>
<div class="list1">
<a class="nav" href="description.html#body">body</a>
<a class="nav" href="description.html#head">head</a>
<a class="nav" href="description.html#html">html</a>
<a class="nav" href="description.html#meta">meta</a>
<a class="nav" href="description.html#noscript">noscript</a>
<a class="nav" href="description.html#script">script</a>
<a class="nav" href="description.html#style">style</a>
<a class="nav" href="description.html#title">title</a>
<a class="nav" href="description.html#frame">frame</a>
<a class="nav" href="description.html#frameset">frameset</a>
<a class="nav" href="description.html#noframes">noframes</a>
<a class="nav" href="description.html#iframe">iframe</a>
</div>  <!-- list1 ende -->
</li>
<li>
<h3><a href="#">Logische Auszeichnung</a></h3>
<p>Donec varius lacus a leo. Pellentesque habitant morbi tristique
senectus etnetus et malesuada fames ac turpis egestas.</p>
<p>Luptatum repudiare gloriatur ex quo. Ei sale deserunt qui, at vis
velit efficiendi, ea usu graeci takimata. Ne veritus minimum pro.</p>
</li>
</ul>

<p class="clear_ie6">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In feugiat malesuada urna. Morbi et dui quis tortor convallis
facilisis. Morbi metus arcu,ultrices quis, tristique eu,vehicula a,
risus. Ut condimentum ultrices lacus. Morbi quis dolor.
Donec varius lacus
a leo. </p>

Sie sehen hier den Quellcode der ersten beiden Boxen und den ersten Textabsatz unterhalb der schwebenden Listenkisten (p class=“clear_ie6″). Die restlichen fünf Boxen sind genauso aufgebaut (siehe Originalcode im zip-file!!).

Schritt 02:

CSS: Listenelemente floaten, Liste clearen (schwebend.css)

/* Liste und Listenelemente floaten */

ul {
   float: left; /* Zum Umschließen der gefloateten Listenelemente */
   list-style-type: none;
   padding: 0;
   margin: 0 0 1em 2.5em; } /* Abstand zum nachfolgenden Fließtext */
ul li {
   float: left;
   width: 12em; /* Breite den Umständen anpassen */
   background: #ffeda0;
   border: 1px solid #000;
   margin: 0 0 0.5em 0.5em;
}
ul p { margin: 0.5em; }
ul h3 { font-size: 110%;
        margin-top: 0;
        border-bottom: 1px solid #000;
       }
ul + * { clear: both; }
.clear_ie6 { clear: both; }

In Schritt 2 wird im Stylesheet schwebend.css zuerst die ungeordnete Liste <ul> mit den Listenelementen <li> bearbeitet und entsprechend formatiert.

Danach werden die ungeordnete Liste und die Klassee .clear_ie6 mit dem CSS-Attribut clear:both; versehen   ( siehe http://www.css4you.de/clear.html, http://fwpf-webdesign.de/css/float-und-clear ). Die Auswirkungen der float-Eigenschaft sind nicht immer intuitiv verständlich. Diverse Darstellungsfehler des Internet Explorer im Zusammenhang mit Float erschweren dies zusätzlich. Benutzen Sie bitte zum Betrachten und Nachvollziehen der Float-Beispiele nicht den Internet Explorer.

Schritt 03:

CSS: Links in der Überschrift (Listenkiste) gestalten

/* Die Links in der Überschrift */

ul h3 a {
   display: block;
   text-decoration: none;
   padding: 0.5em; }
ul h3 a:link {
   background: #f3c600;
   color: #000;
}
ul h3 a:visited {
   background: #f3c600;
   color: #ffeda0;
}
ul h3 a:hover,
ul h3 a:focus,
ul h3 a:active {
   background: #d90000;
   color: white;
}

Im dritten Schritt werden die Links in der Überschrift der schweben Boxen formatiert (display: block; Link-Unterstreichung entfernen, Hintergrundfarbe, Innenabstand, Schriftfarbe, Pseudoklassen).

Schritt 04:

Links (Hyperlinks) innerhalb der schwebenden Boxen gestalten

/* Hyperlinks innerhalb der schwebenden Boxen gestalten */

.list1 { padding: 0;
         margin: 0 0 1em 1em; }

a.nav:link, a.nav:visited {
     padding: 0 0 0 1em;
     display: block;
     width: 9em;
     background: #f3c600;
     color: #000;
     font-weight: bold;
     border: 1px solid #000;
     margin-top: 2px;
     text-align: left;
     text-decoration: none;
     overflow: hidden;
    }
a.nav:hover,
a.nav:focus,
a.nav:active {
     background: #d90000;
     color: #fff;
     border: 1px solid #000; }

Im abschließenden Punkt 4 bearbeite ich zuerst die div-Box mit der Klasse .list1 ( Innen- und Außenabstände anpassen!).

In dieser div-Box befinden sich die Links (Hyperlinks) für die einzelnen XHTML-Elemente. Mit dem CSS-Befehl display:block ordne ich die Links untereinander an, ohne ein Listenelement einsetzen zu müssen!

Entsprechende Innen- und Außenabstände, eine Anpassung der Hintergrund-Farben an die Farbgestaltung aus Punkt 3 und die Angleichung der Schriftfarbe an die Listenkisten-Überschriften geben den 7 Boxen ein einheitliches Bild.

Posted in HTML | Verschlagwortet mit: , , , , , , | Leave a Comment »

XHTML-Übung: Anker und Sprungmarken definieren

Posted by sura1 - 21. Juli 2008

Bookmark and Share

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!

Link: anker_1.html

Quellcode: hier 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!

Link: anker_2.html

Quellcode: hier anklicken!!

Download Beispieldateien: (9,50 KB zip-Datei) – Bitte Download-Button anklicken!!

Posted in HTML | Verschlagwortet mit: , , , , , , , | Leave a Comment »

XHTML/CSS-Übungen: Element blockquote

Posted by sura1 - 25. Juni 2008

Bookmark and Share

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

Posted in HTML | Verschlagwortet mit: , , , , , | Leave a Comment »