Auf der Suche nach HTML Umschreibungs Codes von exotischen Zeichen? Natürlich kann man diese in Zeichenreferenzen wie z.B. bei SelfHTML nachschlagen. Viel schneller und schicker geht es allerdings mit HTML Entity Character Lookup von Leftlogic.

Um die Umschreibung für ein beliebiges Symbol zu erhalten, muss dieses einfach in die Suchbox eingegeben werden. Gerade bei exotischen Symbolen reicht es auch aus, ähnliche Symbole einzugeben. So spuckt z.B. die Suche nach einem “a” auch alle verwandten Zeichen bis hin zu einem “alpha” und dem mathematischen “für alle” aus.

Besonders schick, für Mac-Benutzer gibt es das Ganze auch als Dashboard-Widget. Dem gemeine PC Benutzer bleiben die Möglichkeiten, sich den HTML Entity Character Lookup in das Suchfeld des Firefox einzubauen oder sich das FF-Plugin zu installieren.

Mir persönlich hat es schon immer mehr gebracht, Dinge am praktischen Beispiel zu erlernen. Daher finde ich das Konzept des HTML Playgronds schon einmal sehr einladend. Doch neben dem guten, wenn auch nicht neuen, Konzept ist vor allem die Umsetzung gelungen!

In fünf Feldern kann man die Möglichkeiten des Zusammenspiels von XHTML und CSS entdecken. Im ersten Bereich der Seite wird das Tag, welches man näher kennenlernen möchte ausgewählt. Daraufhin erscheint unten mittig ein Beispielcode und die Anzeige dessen, was der Browser dazu ausspuckt rechts daneben.

Klickt man im Beispielcode auf irgendeinen HTML-Tag (grün) erscheint unten links wahlweise eine Liste der möglichen HTML-Attribute oder CSS-Eigenschaften. Möchte man eines der Attribute, oder eine CSS Eigenschaft an Hand des ausgewählten Tags testen, muss man nur auf den runden Pluspunkt drücken und den Wert auswählen, on the Fly ändert sich nun die Anzeige im Minifenster.

Im Bereich oben rechts wird immer die Beschreibung dessen, was man als letztes anklickte angezeigt. Sehr nützlich ist, dass hier auch eine Notiz über Kompatibilität auftaucht.

[via Dr. Web Magazin Nachlese September 2007]

Peinlich sind mir meine ersten Werke nicht. Immerhin habe ich diese mit Liebe und per Hand in HTML gecoded und nicht, wie anderere zu der Zeit (= im Jahre 2000) zu Frontpage gegriffen.

Ok, ich gebe zu, das ist so nicht ganz richtig. Denn da gab es etwas, ein paar Monate zuvor. Meine wirklich allererste Internetseite habe ich nämlich *duck* mit dem MS Publisher erstellt *hüstel*. Quitschige Hintergrundbilder, Gifs (glücklicherweise keine Wackelgifs) und alles etwas unharmonischer.

Glücklicherweise habe ich schnell eine Anleitung für HTML in die Hände bekommen: “Marco Abrar’s HTML Wörterbuch“, in den Osterferien 2000 habe ich damit am Laptop meiner Schwester die erste Version von Mel’s Chaospage erstellt. Innerhalb eines Jahres machte diese Seite dann kleinere Entwicklungen und mehrere Verwandlungen durch: Version 2.??, Version 4.0 .

Interessant ist vielleicht auch die erste Version der Crazylounge – dem Vorzimmer für Privpages (Entstand im Herbst 2000). Achtung, Augenkrebs-Gefahr. Die Farben sind wirklich – grell. Zu meiner Verteidigung: Damals bin ich wenigstens schon auf die Probleme mit den Browsern eingegangen und hatte eine Netscape und IE-Version der Seite (Firefox Benutzer sollten sich unbedingt die IE-Version ansehen, da damals Netscape der Problem-Browser war und deswegen einiges in der Netscape-Version nicht so toll aussieht, einfach nur funktional ist).

Das waren sie also, die allerersten beiden Seiten. Dazwischen gab es eine Menge. Viele Projekte ohne wirklichen Inhalt. Ich hatte halt Spaß am Planen & Erstellen der Seiten.

Wie sieht es bei euch aus? Gibt es eure Erstlingswerke noch? Und was mich persönlich interessieren würde, liest hier eigentlich jemand mit, der mal in der Crazylounge war und dessen Homepage heute noch – in welcher Form auch immer – besteht (Immerhin umfasste das Verzeichnis zu seinen Hochzeiten um die 500 private Homepages *ein bißchen Stolz ist*)?

Rauslaufender Text

Nach dem das erste Mal der Rahmen eingesetzt wurde, rückt der Text immer weiter nach links. Mit Rand und Innenabstand hat das nichts zu tun. Und erst nach mühsamen auskommentieren und einzelnem wiedereinfügen meiner CSS-Definitionen habe ich den Übeltäter gefunden.

Glücklicherweise konnte ich damit auch googlen und eine Lösung finden. Bei Position is Everything ist dieser Bug als Magik Creeping Text bekannt. Und dort erhält man glücklicherweise eine Lösung für das Problem, auch wenn empfohlen wird, so stark verschachtelte Boxen nicht einzusetzen. Die Lösung ist letztendlich noch seltsamer: Im übergeordneten Element muss ein border-bottom gesetzt sein. *kopfschütteln*

Wer noch mehr seltsame Eigenheiten des IE’s ansehen möchte, sollte unbedingt bei den e-workers vorbeischauen. Dort gibt es nämlich eine nette Bloßstellung des M$-Browsers.

So sah das mich inspirierende Design aus, welches abgelehnt wurde.

Was daraus geworden ist, könnt ihr hier begutachten. Wie ihr allerdings feststellen werdet, ist das alles noch nicht wirklich gut durchdacht und fertig. Mein Webserver hat seinen Geist aufgegeben, besser gesagt, mein MySQL-Server funktioniert nicht mehr und ich muss online entwickeln.

So wird es hier also in nächster Zeit an allen Ecken bröckeln ^.~. Mir fehlen nämlich auch noch ein paar Ideen, vor allem, was die große Anzahl an Tags angeht. Mal schauen, vielleicht gibt es aber auch einfach gewichtete Clouds mit den Top-X Tags & Kategorien und für alles andere muss man im Archiv nachblättern.

Ich könnte mir auch vorstellen, in der unteren Fußleiste eine Liste der beliebtesten Artikel einzustellen oder aber jener, die ich gerne empfehlen möchte, weil ich sie wiederentdeckte. Mal schauen. Ich bitte auf jeden Fall um Geduld und Verzeihung. ^.~

Ähm… nur um es zu erwähnen. Weil ich beide Artikel fand und überflog. Auch das Markup-Journal schrieb über diese Lösungsmöglichkeit.

Übrigens: Falls man immer die gleiche Bildgröße verwendet (was vor allem bei umflossenen Bildern sinnvoll sein kann, weil die Float-Eigenschaft bei CSS immer eine Breitenangabe benötigt) ist es auch sehr einfach mit Hilfe der Definitionsliste das Bild mit einem Hintergrundbild (z.B. einer Schattengraphik) zu verschönern ;)). Bei Gelegenheit gehe ich darauf vielleicht mal näher ein. Ansonsten denke ich, dass es etliche Tutorials dazu bereits in den Weiten des Webs gibt.

Nachtrag Tja hmm, da gibt’s ja auch noch Levels of CSS-Knowledge. Würde mich auch da zwischen vier und fünf einordnen ^-^”… auch gegen fünf *lol*. Denn auch im CSS-Bereich habe ich noch viel zu lernen. Finde diese beiden Artikel allerdings auf jeden Fall sehr interessant.

Interessant und auch beruhigend ist der Prozess, in dem das Bild entsteht. Wabernde Punkte, Verbindungen… ganz so wie bei dieser anderen Seite *grübel*… wie hieß die doch gleich – irgendetwas mit Zoo??? Wie auch immer. Ich schweife ab. Wer interessiert ist an einer graphischen Aufbereitung des Quelltextes, kann dies bei aharef.info tun.

—

Es hat mir keine Ruhe gelassen… das Ding, was ich meinte heißt Sodaconstrutor ^-^”. Und damit kann man kleine lustige Roboter-Spinnen basteln. Bereits von anderen Menschen kreierte Wesen kann man sich dann im SodaZoo ansehen ^.~. Für all jene – wie z.B. mich – die nicht mit ganz so viel Geduld beseelt sind ^-^”.

Dann lohnt es sich definitiv bei Webdesign from Scratch vorbeizuschauen, gleich zwei interessante Artikel sind mir damals ins Auge gefallen. Zum einen Information Architecture Models, zum anderen ein Artikel über die Basics des Webdesigns. Etwas mehr Theorie, dennoch interessant: Five simple steps to typesetting on the web: printing the web, ein Thema, über das man normalerweise nicht so nachdenkt ^-^” – ich zumindest nicht. Wobei ich bei meiner Tutorialseite damals eine Druckansicht hinzugefügt habe.

Zwei Seiten habe ich dann noch, die sich mit dem Thema Formulare beschäftigen, zum einen eine Anleitung eine Suchbox so aussehen zu lassen, als sei es eine Safari Suchbox. Sieht schick aus und werde ich bestimmt irgendwann einmal ausprobieren ^-^”. Und der zweite Artikel: Using CSS to Create a Two-Column Layout.

Zuletzt noch ein paar Seiten, die sich mit den CSS-Codes auseinandersetzten. Perun verlinkt auf zwei Seiten, welche sich mit der Übersichtlichkeit des Codes beschäftigen. Bei Webstandart geht es um CSS shorthand properties, also wie man manche CSS-attribute bündeln kann.

Was sind Block-Elemente?
Was bedeutet das jetzt? ‘Block’-Elemente sind z.B. Layer oder Absätze. Sie sind abgeschlossen und nach ihnen wird automatisch die Zeile umgebrochen. Für genauere Beschreibungen verweise ich einfach mal auf einschlägige Literatur und begnünge mich mit Beispielen: <div>,<p> und <ul> oder <ol> sind ‘Block’-Elemente, während z.B. <b>,<i> oder besser <strong>,<em> oder aber auch <img>-Elemente es nicht sind. Sie sind ‘inline‘, das heißt, hinter ihnen geht es ganz normal, ohne einen Textumbruch, weiter.

Nun bietet CSS die Möglichkeiten, Elementen eine Anzeige-Eigenschaft (z.B. block oder inline) zuzuweisen. Dies geschieht mit der Angabe:display:block; bzw.display:inline;

Automatisches Zentrieren der Bilder via CSS
Für das automatisch zentrierte Bild, muss man dem <img>-Tag die Anzeigart block zuweisen, zentriert wird danach mit margin:auto:.storycontent img {
 display:block;
 margin-left:auto;
 margin-right:auto;
}
.storycontent  habe ich vor img gesetzt, da ich nur die Bilder innerhalb meines Postings ansprechen möchte. Und  das Posting befindet sich in einer Box der Klasse .stroycontent. Mit obrigem Code wirkt die CSS-Definition nur auf alle Bilder innerhalb dieser Boxen.

Jetzt kann man das Bild beliebig formatieren. Z.B. einen Bilderrahmen darum setzten. Hierfür benötigt man einen inneren Randabstand (padding), und einen Rahmen (border) und kann z.B. auch noch die Hintergrundfarbe (background) ändern.

Beispielcode
Ein Beispiel für solch einen Code ist: .storycontent img {
 display:block;
 margin:2px auto;
 padding:4px;
 border:1px dotted blue;
 background: white;
}

Nachtrag:
Diese Art zu zentrieren funktioniert natürlich auch mit jedem anderen Blockelement. Somit ist es z.B. die einfachste Möglichkeit, eine komplette Seite mit fester Breite, im Browser-Fenster zu zentrieren (Im Template Lavender habe ich noch meine alte und wesentlich umständlichere Methode verwendet, so als Vergleich ;)).