Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Archive for 4. Juli 2008

Warum nenne ich mich eigentlich SURA?

Posted by sura1 - 4. Juli 2008

Bookmark and Share

Erklärung meines Künstlernamens Sura 1

In meiner Blogstatistik interssieren sich in der Rubrik „SUCHBEGRIFFE“ offensichtlich immer mehr Personen dafür, wie ich eigentlich zum Namen „Sura 1“ komme.

Das Wort Sura ist im Arabischen weit verbreitet und wird dort als Namensbezeichnung geführt. Daneben bedeutet Sura aber auch einen Abschnitt oder ein Kapitel des Koran.

Wie bin ich nun zum Künstlernamen gekommen?

Es geschah im Jahre 1973. Wir waren damals in der Ortschaft Jaunstein ca. 20 junge Buben, die sich täglich auf dem Dorfsportplatz getroffen haben. Ein Junge in meinem Alter mit dem Namen Rudi Benetik war damals Spezialist im Vergeben von Spitznamen.

Mein Bruder Martin wurde zum Beispiel „Murke“ genannt (Bedeutung: Gurke /slowenisch!). Einen Cousin von mir nannten wir „Katze“, ein anderer hieß „Pedro“ usw.

Jener Benetik Rudi nannte mich eines Tages „Sura“ – und ich behielt den Name mein Leben lang. Der Name leitet sich von Slowenischen ab und bedeutet  „Jutesack“. Solche 50kg-Säcke wurden damals in der Landwirtschaft viel verwendet (z.Bsp. um Erdäpfel zu lagern).

Ich bekam jedoch nicht nur den Namen Sura, sondern dieser wurde auch noch lyrisch in ein kurzes slowenisches Gedicht (Dialekt) verpackt, welches wie folgt lautet:

«Sura pri riti knura, na glavo stopis, pa pri riti miga!»

Sie können den Sinn des Satzes nur erfassen, wenn Sie im 2-sprachigen Gebiet in Südkärnten leben!

Mein Spitzname hat sich so eingebürgert, sodaß ich jahrelang auf meinen richtigen Namen Franz gar nicht mehr reagiert habe. Die gesamten Bekannten und Freunde nannten mich so, und so kam ich im Jahre 2000 auf den Gedanken, mir ein Wunschkennzeichen zuzulegen. Dieses lautet:


VK-SURA 1


Als ich dann im Jahr 2005 mit der Acrylmalerei begann, war es nur logisch, dass ich mir auch einen entsprechenden Künsternamen zulegte.

Seit damals nenne ich mich „SURA 1“ – und habe konsequenterweise auch mein Weblog mit „SURA 1 ARTWORKS“ genannt.

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

XHTML/CSS-Übungen: Formulare

Posted by sura1 - 4. Juli 2008

Bookmark and Share

Von der Wiege bis zum Grabe – Formulare, Formulare

In der analogen Welt geht es Ihnen wohl auch genauso wie mir. Wenn man den Satz „Bitte füllen Sie dieses Formular aus“ hört, stellen sich den meisten Menschen die Haare auf. Man wird von der Geburt bis zum Tode mit Forumlare richtiggehend belästigt.

Ganz anders im Web:

Im Internet basieren praktisch alle Interaktionen mit dem Besucher darauf.

Es gilt, Kommentare abzugeben, Anfragen oder Bestellungen abzuschicken oder mit dem Betreiber der Webseite Kontakt aufzunehmen (und vieles mehr).

Ich möchte Ihnen hier ein einfaches Formular vorstellen:

(Beispieldatei: (17,7KB zip-Datei) hier downloaden )

¶ Das Formular im HTML-Quelltext ¶

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;

<html xmlns=“http://www.w3.org/1999/xhtml&#8220; lang=“de“ xml:lang=“de“>

<head>

<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />

<link href=“style.css“ rel=“stylesheet“ type=“text/css“ media=“screen“ />

<title>Kommentar-Formular</title>

</head>

<body>

<form action=“http://example.org/&#8220; method=“post“>

<div>

<span>Kommentar schreiben</span>

<label for=“name“>Name</label>

<input type=“text“ name=“name“ id=“name“ />

<label for=“e-mail“>E-Mail</label>

<input type=“text“ name=“e-mail“ id=“e-mail“ />

<label for=“homepage“>Homepage</label>

<input type=“text“ name=“homepage“ id=“homepage“ />

<label for=“kommentar“>Kommentar</label>

<textarea cols=“30″ rows=“15″ name=“kommentar“ id=“kommentar“></textarea>

<input type=“submit“ value=“Absenden“ id=“senden“ />

</div>

</form>

</body>

</html>

Sie haben hier die Möglichkeit, die obige html.datei als Word-Dokument herunterzuladen und ohne CSS zu testen.

Source: Beispiel-Quelltext als doc-datei herunterladen: formular_html

Dieser Quelltext erzeugt ohne den Einsatz von CSS folgendes Formular:

Zum Vergrößern auf die Grafik klicken!

„Das sieht doch etwas komisch aus!“ werden Sie sagen. Das stimmt. Mit einer kleinen Änderung im Quellcode sieht das Formular gleich besser aus:

<div>

<label for=“name“>Name</label>

<input type=“text“ name=“name“ id=“name“ />

</div>

<div>

<label for=“e-mail“>E-Mail</label>

<input type=“text“ name=“e-mail“ id=“e-mail“ />

</div>

<div>

<label for=“homepage“>Homepage</label>

<input type=“text“ name=“homepage“ id=“homepage“ /

</div>

<div>

<label for=“kommentar“>Kommentar</label>

<textarea cols=“30″ rows=“15″ name=“kommentar“ id=“kommentar“></textarea>

</div>

<div>

<input type=“submit“ value=“Absenden“ id=“senden“ />

</div>

Ersetzen Sie den ursprünglichen Quellcode mit dieser kleinen Korrektur, und das Formular sieht schon viel ansprechender aus.

Source: Beispiel-Quelltext als doc-datei herunterladen: formular1_html

Zum Vergrößern auf die Grafik klicken!

Das Formular jetzt sieht zwar einigermaßen aus, es fehlen jedoch noch die entsprechenden Formatierungen mit Cascading Style Sheets. (werden im ursprünglichen HTML-Quellcode (index.html) vorgenommen!)

a) Innen- und Außenabstände werden alle auf „0“ gesetzt:

* {

margin: 0;

padding: 0;

}

b) Formatierung von html und body

html {

background: #1B3582;

color: #5978A5;

font: 68.75%/1.1 verdana, arial, helvetica, sans-serif;

}

body {

padding: 30px;

}

c) Positionierung von <form> und <span>

form, span {

position: absolute;

}

form {

margin: 8em;

}

Durch die Festlegung von margin: 8em wird das Formular von der linken oberen Ecke mehr in die Seitenmitte gesetzt. Sie können den Seitenabstand zu Übungszwecken je nach Belieben austauschen.

d) Floaten von <label>, <input> und <textarea> und Formatierung derselben:

label, input, textarea {

float: left;

}

label {

clear: left;

padding-top: .5em;

width: 100px;

}

Durch das Floaten sind die einzelnen Elemente des Formulars nun untereinander angeordnet.

e) Formatierung der div-Box, des Eingabefeldes und des Kommentarfeldes

input, textarea {

border: 0;

color: #193076;

font: 1em/1.0 verdana, arial, helvetica, sans-serif;

margin-bottom: 1em;

padding: 5px 9px 3px;

}

input {

background: url(bilder/eingabefeld.gif);

height: 15px;

width: 212px;

}

textarea {

background: url(bilder/kommentarfeld.gif);

height: 220px;

width: 325px;

}

div {

background: #FFF url(bilder/ecke.gif) top left no-repeat;

overflow: hidden;

padding: 1em;

width: 470px;

}

span {

color: #FFF;

font-size: 2em;

line-height: 1.0;

left: 120px;

top: -1.5em;

}

#senden {

background: url(bilder/bestaetigung.gif) center right no-repeat;

color: #193076;

height: 2.5em;

margin-left: 100px;

padding: 5px 0;

text-decoration: underline;

width: 343px;

}

Das Eingabefeld und das Kommentarfeld erhalten eine eigene Hintergrund-Grafik (eingabefeld.gif und kommentarfeld.gif).

Die div-Box bekommt in der linken oberen Ecke auch eine kleine Grafik (ecke.gif). Dadurch kommt es hier zu einer Abrundung der Ecke und zu einer optischen Aufwertung.

Im Eingabefeld input#senden wird auf der rechten Seite die Grafik bestaetigung.gif (sieht toll aus!) eingesetzt.

Das HTML-Element <span> habe ich mit color:#fff und  font-size: 2em positioniert. Außerdem habe ich der Überschrift „Kommentar abgeben“ eine linken Seitenabstand von 120px zugeteilt.

Das fertige Stylesheet sieht dann folgendermaßen aus:

* {

margin: 0;

padding: 0;

}

html {

background: #1B3582;

color: #5978A5;

font: 68.75%/1.1 verdana, arial, helvetica, sans-serif;

}

body {

padding: 30px;

}

form, span {

position: absolute;

}

form {

margin: 8em;

}

label, input, textarea {

float: left;

}

label {

clear: left;

padding-top: .5em;

width: 100px;

}

input, textarea {

border: 0;

color: #193076;

font: 1em/1.0 verdana, arial, helvetica, sans-serif;

margin-bottom: 1em;

padding: 5px 9px 3px;

}

input {

background: url(bilder/eingabefeld.gif);

height: 15px;

width: 212px;

}

textarea {

background: url(bilder/kommentarfeld.gif);

height: 220px;

width: 325px;

}

div {

background: #FFF url(bilder/ecke.gif) top left no-repeat;

overflow: hidden;

padding: 1em;

width: 470px;

}
span {

color: #FFF;

font-size: 2em;

line-height: 1.0;

left: 120px;

top: -1.5em;

}

#senden {

background: url(bilder/bestaetigung.gif) center right no-repeat;

color: #193076;

height: 2.5em;

margin-left: 100px;

padding: 5px 0;

text-decoration: underline;

width: 343px;

}

(Beispieldatei: (17,7KB zip-Datei) hier downloaden )

Das fertige Kommentar-Formular sieht danach so aus:

(Bitte auf die Grafik klicken!)

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