Sie sehen sich momentan die Weblog-Einträge zur Kategorie "HTML & CSS" an.
25. April 2009
Schon vor einigen Tagen offiziell fertig gestellt, habe ich erst jetzt Zeit gefunden, meine erste Website, die ich für Geld gemacht habe, auch hier im Blog anzukündigen: camerata-koeln.de.
Vorher äußerst unstrukturiert (unabsichtlich wechselnde Hintergründe bei manchen Seiten oder keinen Rahmen als Begrenzung – um nur mal ein paar Beispiele zu nennen) und auch sonst nicht sehr schön (häßlich unformatierte Tabellen …), geht diese Website jetzt auf den Pfad der CSS- Tugend.
Zur technischen Umsetzung
- So sieht die Grundstruktur des Markups, die sich schon bei meinen beiden anderen Referenzen bewährt hat, aus:
<div id=”wrapper”>
<div id=”kopfbereich”></div>
<div id=”textbereich”></div>
<div id=”fussbereich”></div>
</div>
- Das CSS besteht aus einer einzigen Datei
bildschirm.css. Auf ein Stylesheet für eine druckbare Version der Seite wurde verzichtet.
- Die Navigation oben rechts wurde im Registerkarten- Stil (“Sliding doors”) umgesetzt.
- Für diverse Seiten wurden PHP/mySQL- Skripte von Johann- Christian Hanke eingesetzt (beispielsweise bei der Diskographie seine raffinierte Blätterklasse).
Auf irgendwelche Spielereien mit Javascript wurde diesmal verzichtet.
Was gibt es hier (bzw. dort)?
Die Präsenz camerata-koeln.de ist sozusagen die Firmenpräsenz vom Musikensemble Camerata Köln. Hier gibt es:
- Einen Übersichtstext zur Geschichte von Camerata Köln
- Lebensläufe und Bilder der einzelnen Mitglieder
- Eine Diskographie
- Einen Blog
- Die Möglichkeit, einen Newsletter, der über Neuigkeiten informiert, zu abonnieren
- Die Möglichkeit, über ein Kontaktformular – na ja – Kontakt zu Camerata Köln aufzunehmen.
Feedback zur Website sind erwünscht.
31. March 2009
Eins steht für mich inzwischen fest: Für das nächste Relaunch meiner Website wird das CMS “Expression Engine” zum Einsatz kommen. Grund: Ich habe gerade die kostenlos verfügbare Core- Version zum Test- Zwecke in einem Unterverzeichnis auf meinem Webserver installiert und ich bin vom Konzept her schon einmal begeistert. Dass man nämlich machen kann, was man nur will. Einzelne Inhaltselemente an beliebiger Stelle auf der Website ausgeben. Dabei können die Designs auch schon mal wechseln. Mit einem CMS wie Wordpress, das momentan auf meiner Hauptseite läuft, könnte ich so etwas nicht machen.
Wann allerdings dieses Relaunch durchgezogen wird, steht noch nicht fest. In einem oder zwei Jahren vielleicht, wenn ich mich etwas eingehender mit Expression Engine beschäftigt habe. Das dauert nämlich seine Zeit, denn momentan gibt es noch kein deutsches Einführungsbuch zur Expression Engine. Und bis man auf den englischen Dokumentationsseiten alles verstanden hat … Das braucht seine Zeit!
Fest steht (oder wie man in der Umgangssprache sagt: “Feststehen tut nur …” ), dass auch alle bisherigen Blogeinträge, die mit Wordpress gemacht wurden, in die neue Website eingepflegt werden werden ( – klingt zwar komisch, ist aber glaube ich richtig so.)
8. January 2009
Es macht echt Sinn, sein Stylesheet in mehrere kleine Stylesheets aufzuteilen. Statt einem großen hat man dann viele kleine. Sehr sinnvoll. Wenn man dann schnell mal eine Änderung machen möchte, kann man das recht fix erledigen.
Wenn man eine Website von Hand erstellt, geht das Zerlegen des Stylesheets recht einfach. Man macht einfach aus der einen großen Datei (im Beispiel styles.css genannt) viele kleine Dateien (zum Beispiel fundament.css für radikales Reset, layout.css für grobes Layout, sonstige-styles.css für die Feinheiten). Wie das geht, ist klar: Man öffnet die styles.css, erstellt eine neue CSS- Datei und kopiert bestimmte Code- Abschnitte in die neue CSS- Datei hinein, die man dann am Ende zum Beispiel fundament.css nennt. Diese vielen kleinen Stylesheets kann man dann entweder direkt im HTML einbinden, nach dem Motto:
<head>
...
<link rel="stylesheet" type="text/css" href="fundament.css">
...
</head>
Auf diese Weise kann man dann alle CSS- Dateien nacheinander im HTML einbinden.
Möglichkeit zwei ist aber viel eleganter: Man erstellt eine CSS- Datei, nennt sie zentrale.css (oder so ähnlich) und bindet in dieser zentrale.css die einzelnen Stylesheets mit der @import- Regel ein:
@import url("fundament.css"); ...
Im HTML wird dann nur (mit dem <link>- Element, siehe oben) die zentrale.css aufgerufen, der Quellcode wird dadurch ein wenig übersichtlicher gehalten.
Tipp: In Wordpress mit mehreren Stylesheets arbeiten
Natürlich kann man auch in Wordpress mit mehreren Stylesheets arbeiten. Bei meinen Versuchen, mein Stylesheet aufzuteilen, stellte sich heraus, dass es nicht mit der @import- Regel, die ich in styles.css eingebunden hatte, klappt.
Nach ein wenig googeln habe ich allerdings folgendes herausgefunden:
- Die fertigen kleinen Stylesheets werden in den Hauptordner deines Themes, wo auch die
styles.css liegt, abgelegt und mit dem FTP- Programm deiner Wahl (mein persönlicher Favorit ist der Filezilla, ein Open-Source- Programm, das es auch für Linux gibt) in den Hauptordner deines Themes auf dem Webserver hochgeladen.
- Öffne nun in Wordpress die Datei header.php in dem Wordpress- eigenen Editor.
- Gehe zu der Zeile, wo das Hauptstylesheet styles.css eingebunden wird:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
Füge – am Besten direkt unter dieser Zeile – folgende Zeile ein:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/comments.css" media="screen"/>
comments.css soll hier nur als Beispiel dienen. Füge stattdessen die Namen deiner Stylesheets ein – für jedes Stylesheet ein solches <link>- Element. Fertig.
11. December 2008
Die Aussprache von « AJAX ». Ein schwieriges Thema. Ein Thema, bei dem man sich heute noch, nachdem es AJAX schon recht lange gibt, immer noch streitet und bei dem sich selbst die Profis uneins sind. Aber, was ist AJAX eigentlich?
Nein, ich rede nicht vom Scheuermilch Ajax. Ich rede auch nicht von Ajax, dem Helden aus der Ilias von Homer. Nein, ich rede von AJAX, Asynchronous JavaScript and XML. Schon einmal davon gehört? Nein? Müssen Sie ja auch nicht. Es reicht eigentlich, wenn ich Ihnen nur dieses mitteile: AJAX ist die Technik, die eine heutige Web 2.0- Website erst wie eine richtige Web 2.0- Website aussehen lässt. Alles unklar? Also, ich hole etwas weiter aus: AJAX (wobei man meist nur JavaScript meint und nicht XML) ist die Technik, die zum Beispiel dafür sorgt, dass man bei den Referenzen meines Vaters auf einen sogenannten Slider (damit meint man in unserem Falle jetzt zum Beispiel “CD- Aufnahmen u.a. mit” oder auch “Folgende Institute …”) klicken kann und dann ohne lästiges Neuladen einer neuen Seite mit AJAX- Technik ein weiterer Bereich aufgleitet. Auch bei der Diskographie meines Vaters habe ich AJAX angewandt: Die Tabelle kann per Klick auf einen Spaltenkopf ohne lästiges Neuladen einer neuen Seite sortiert werden. Ist zwar eigentlich unnötig, ist aber schön, nicht wahr? Ich meine, wozu soll man denn bitte eine Diskographie- Tabelle sortieren können? Aber egal.
Halten wir fest: AJAX ist eine Technik, des es erlaubt, neuen Inhalt ohne lästiges Neuladen einer komplett neuen Seite sofort ohne Verzögerung darzustellen. Wenn Sie sich näher mit AJAX befassen wollen, finden Sie bei der Wikipedia einen ganz guten Einstieg. Weitere Quellen gibt es im Internet zu hauf (groß oder klein? – Ich weiß es nicht …). Ansonsten – es geht doch nichts über ein schönes Buch, oder?
Schön. Aber wir waren ja bei der Aussprache von AJAX. Wie wird das also jetzt ausgesprochen?
Die Frage, wie AJAX ausgesprochen wird, kam bei einer kleinen Wanderung mit einigen Leuten aus unserer Straße auf. Unter diesen Leuten befand sich nämlich auch unser Nachbar von gegenüber. Dieser Nachbar von gegenüber – jetzt nicht denken, ich meine den Dackelmann , nein, den meine ich nicht – hat schon lange mit Programmierung zu tun. Auch wenn er nicht auf die Programmierung fürs Web (PHP, Javascript …) spezialisiert ist, hat er doch schon mal was von AJAX gehört.
Er hat es “EI-CHECK” ausgesprochen (ich kann keine Lautschrift schreiben, also mache ich es in einer inoffiziellen Variante – diese gibt es allerdings wirklich!). Er beteuerte auch, dass AJAX bei Seminaren, die er besucht hatte, immer “EI-CHECK” ausgesprochen wurde.
Weitere Recherchen meinerseits zu dem Thema « Aussprache von AJAX » ergaben allerdings die Aussprache ˈeɪdʒæks. Wobei, glaube ich, diese Variante die Richtige ist, weil sie u.a. auch in der Wikipedia steht.
31. October 2008
Heute habe ich es endlich geschafft: Die Website von meiner Schwester Annika Griewisch ist gerade fertig gestellt worden. Unter http://www.annikagriewisch.lima-city.de können Sie meine zweite selbst erstellte Website bewundern.
Im Gegensatz zu meiner ersten Referenz http://www.griewisch.de ist diese Website eine Website ohne viel Effekte: Einfach nur HTML- Seiten, die CSS gestylt wurden. Kein Javascript, kein SSI, kein Garnichts (schreibt man das zusammen oder auseinander, groß oder klein?). Das schöne an der Webseite ist, dass meine Schwester damit auf jeden Webserver kann, wenn sie später einmal von ihrem jetzigen kostenlosen lima-city- Server umzieht auf einen kostenpflichtigen (wie zum Beispiel all- inkl, wo ich jetzt meine Website hoste); der jeweilige Server muss dann kein PHP unterstützen, nur HTML und CSS, und das tun heutzutage alle Webserver.
Von der Struktur her ist die Website meiner Schwester so aufgebaut:
- Einen Header, wo das Logo drin Platz findet, das natürlich mit einem HOME- Link versehen ist, sodass man durch einen einfachen Klick auf es immer wieder zur Startseite kommt.
- Ein
<div id=“content”>, wo der eigentliche Inhalt drin ist.
- Und natürlich einen Footer, eine Fußzeile, wo eine kurze Copyright- Angabe sowie ein Link zu dem Autor, dem Ersteller dieser Website (mir) drin ist. Außerdem können Sie im Footer nochmal nachlesen, dass diese Website ausschließlich « mit HTML und CSS realisiert » ist.
Das Stylesheet habe ich diesmal, nicht wie bei http://www.griewisch.de in mehrere Stylesheets aufgeteilt, sondern in eine einzige Datei default.css gesteckt, die dementsprechend auch ziemlich lang ist.
So, das wär’s zur technischen Seite der Website. Nun interessiert vielleicht noch den ein oder anderen: « Was findet man eigentlich auf der Website? »
« Nun, », würde ich ihm antworten, « meine Schwester ist Grafikdesignerin (sie hat mir ja auch schon die Hotzenplotz- Fortsetzung und die Kleine- Hexe- Fortsetzung illustriert), die jetzt als Weiterbildung noch Innenarchitektur studiert. Das kann man so sagen, denke ich. Und auf dieser Website sind dementsprechend einige Werke von ihr ausgestellt. Außerdem gibt es einen kurzen Lebenslauf sowie eine Kontaktseite (leider ohne Formular) für Fragen und Anregungen. »
Am Besten sage ich einfach:
Have a look and then: Enjoy. And then leave a comment here: Did you like the homepage? What can I do better? Let me know. Leave a comment. Thank you.
26. October 2008
Jawohl, ich gestehe: Wenn ich eine Website sehe, die mir gut erscheint, dann schaue ich auch gerne mal in den Quelltext. So habe ich auch bei http://bertkiewiet.nl/, einer Website von einem Freund meines Vaters, einen Blick hinter die Kulissen gewagt, weil ich wissen wollte, wie er diese Foto- Galerien hinbekommt.
Jawohl, ich gestehe: Wenn ich eine Website sehe, die mir gut erscheint, dann schaue ich auch gerne mal in den Quelltext. So habe ich auch bei http://bertkiewiet.nl/, einer Website von einem Freund meines Vaters, einen Blick hinter die Kulissen gewagt, weil ich wissen wollte, wie er diese Foto- Galerien hinbekommt.
- Wenn im <title> nichts steht, wird der Domain-Name als Seitentitel ausgegeben.
Also schaue ich im <head> der Seite nach: Außer einem <meta>- Element und einem leeren <title>- tag gibt es dort nichts zu sehen. Interessant und neu für mich: Wenn <title></title> (in genau dieser Schreibweise) im <head> steht, dann wird der Domain- Name als Titel für die Browserzeile genutzt.
Wenn dagegen aber kein <title> im <head> angegeben ist, erscheint « Unbenanntes Dokument » oder ähnliches als Seitentitel. Haben Sie schon mal nach diesem Stichwort gegoogelt? Erschreckend, dieses Suchergebnis: Etwa 1.930.000 Seiten haben im Netz den Titel « Unbenanntes Dokument ». Naja, wie auch immer. Ich war etwas abgeschwoffen (falls es dieses Wort gibt; es soll mir hier als Partizip von « abschweifen » dienen).
Jedenfalls: Leider war kein <meta name=“Generator” content=”...”> vorhanden, was mir das Programm verraten hätte, womit Bert seine Website gemacht hat. Jetzt habe ich erfahren, dass er diese Foto- Galerie, die leider auf Flash aufsetzt, mit SimpleViewer gemacht hat. Aber darauf wollte ich nicht hinaus.
Erstmal ist mir schon beim Überfliegen aufgefallen, dass dieser Quelltext sehr unstrukturiert ist. Warum schreibt er mühsam:
<big><span style="font-family: Verdana;">Welcome ...</span></big>
Warum nicht einfach:
<h1>Welcome to the photo website of Bert Kiewiet</h1>
und legt dann im <head> fest:
<style type="text/css">
h1 {
font-size: 130%; /* Oder irgendein anderer Wert,
der dem HTML- tag <big> in etwa entspricht */
font-family: Verdana;
}
</style>
oder (noch besser): Er lagert seine Styles in eine (oder auch mehrere) CSS- Datei (-en) aus:
h1 {
font-size: 130%; /* Oder irgendein anderer Wert,
der dem HTML- tag <big> in etwa entspricht */
font-family: Verdana;
}
Als ob das schon nicht schlimm genug ist (der Code jetzt, an der Website habe ich vom Aussehen her nichts ), legt unser Bert dann auch noch für einen Zeilenumbruch eine Schriftart fest:
<br style="font-family: Verdana;">
Warum nur? Warum muss man für einen Zeilenumbruch eine Schriftart festlegen? Welcher Sinn steckt dahinter? Aber die große Frage bleibt immer noch: Wie hat er es überhaupt geschafft, einem Zeilenumbruch die Schriftart Verdana mit auf den Weg zu geben?
12. September 2008
Heute ist die neue Website von meinem Vater Matthias Griewisch online gestellt worden; die von mir erstellte page wurde ein wenig mit modernen Techniken aufgepeppt.
Heute ist die neue Website von meinem Vater Matthias Griewisch online gestellt worden; die von mir erstellte page wurde ein wenig mit modernen Techniken aufgepeppt. Während zum Beispiel der Quellcode der alten Website, die mit dem WYSIWYG- Editor Frontpage erstellt wurde, entsprechend grausam aussah (immer wieder die selbe Formatierungsanweisung in jedem neuen Absatz <p>; meist sogar nicht mal mit CSS, sondern umschrieben mit <strong>, <b> …), die Webseite die inzwischen veralteten Frames benutzte und als Kontaktformular eine Frontpage- Servererweiterung nutzte (was hieß, dass der Server extra eine Erweiterung braucht, dass er dieses Tool ausführen kann), ist die neue Homepage nun bedeutend professioneller: Der Quellcode ist, weil wir in von Hand erstellt haben, äußerst übersichtlich und gut struktiert; <strong> oder <b> werden nun nicht mehr als Umschreibung für fett genutzt, sondern eine kleine CSS- Regel, die, wie alle CSS, die diese Website verwendet, ausgelagert ist, sorgt nun für diese fette Darstellung:
font-weight: bold;
Wie gesagt, gut struktierter Quelltext, ausgelagerte CSS (Cascading Style Sheets – dienen zum Gestalten von Websiten) … Aber nein, das war noch lange nicht alles: Immer wieder kehrende Elemente – wie zum Beispiel der Header – wurden mit SSI (Server Side Includes) in externe Dateien ausgelagert; das macht es für den Administrator der Website – also mein Vater – später einmal leichter, zum Beispiel einen neuen Punkt in der Navigation hinzuzufügen. Auf Frames wurde komplett verzichtet; das Kontaktformular wird nun auch nicht mehr über Frontpage- Servererweiterungen gehandhabt, sondern schön mit einem einfachen PHP- Formmailer gesteuert.
Ein Originalzitat aus dem Rundbrief, den mein Vater über ein neues Instrument verfasst hat und an dessen Ende er auch ein wenig auf seine Homepage aufmerksam macht:
Wie ich von meinem 15- jährigen Sohn Hans erfahren musste, entsprach meine alte website nun überhaupt nicht mehr modernem Standard. Ich hatte gedacht, daß HTML die Sprache des webs und mithin ausreichend sei, aber von ihm weiß ich nun, dass man heute auch CSS, SSI, PHP, MooTools, jQuery und vieles andere mehr braucht, wenn man auf eine halbwegs zeitgemäße Darstellung aus ist. Wohlan denn, besuchen Sie ‘unsere’ neue website: hoffentlich klarer, strukturierter, dynamischer!Matthias Griewisch, Rundbrief “Gregori”
Kleine Anmerkung meinerseits: HTML ist die Sprache des webs (Originalzitat W3C: “What is HTML? HTML is the publishing language of the World Wide Web.”), nur ist sie allein halt einfach nicht zum Gestalten von Websiten gedacht; dazu braucht man dann CSS.
Aber was ist jetzt dynamischer an der neuen Website? Was sind MooTools, was ist jQuery? Die Antwort: Javascript- Frameworks. Für den Englisch- Hasser: Javascript- Bibliotheken. Ich habe sie bei Referenzen (“Accordion- Effect”) und bei Diskographie (“Tablesorter- Plugin”) zum Einsatz kommen lassen.
Nun, ich hoffe, Ihnen gefällt die website. Feedback erwünscht!
Vielen Dank.
3. August 2008
Ich bin ein äußerst aufmerksamer Leser des Blogs von Eric Meyer, einem international anerkannten Guru für HTML und CSS. Dieser Eric Meyer hat in den letzten Tagen und Monaten ziemlich häufig die Weiterentwicklung von HTML 5 angesprochen, genauer genommen die Tatsache, jedes Element zu verlinken.
Bei XHTML 2, das bisher – wie HTML 5 – nur in Form von Arbeitsentwürfen (Working Drafts) existiert, wird dieses “all-linking” vermutlich auf jeden Fall erlaubt sein. Man kann dann also schreiben:
<ul>
<li href="test.html">Test</li>
</ul>
Da HTML 5 allerdings versucht, abwärtskompatibel zu sein, wird diese Möglichkeit, das href- Attribut jedem Element hinzuzufügen, aller Wahrscheinlichkeit nach in HTML 5 nicht gegeben werden. Außerdem würde es keine neue Funktionalität hinzufügen, die nicht schon mit dem a- Element gelöst werden könnte, hieß es in einem Zitat bei Eric Meyer.
Ich hingegeben bin ausgesprochen dafür, dass es erlaubt sein sollte, jedes Element zu verlinken. So würde man sich zum Beispiel in Navigationen einigen Code sparen. Da ich gerade die Website von meinem Vater neu gestalte, merke ich das des öfteren. Momentan muss man noch schreiben:
<ul>
<li><a href="test.html">Test</a></li>
</ul>
Dabei wäre es doch viel praktischer, wenn man es wie oben mit einem href- Attribut in dem <li>- Element (wie oben im ersten Codebeispiel) lösen können; das würde den Code um einiges verkürzen.
Eric Meyer hat in einem Dokument (auf englisch) eine Liste aller HTML 5- Elemente zusammengestellt und für alle kurze Beispiele zusammengetragen, wie eine Verlinkung aussehen könnte. Aber: Macht es überhaupt Sinn, das Verlinken aller Elemente zu erlauben? Macht es Sinn, dem tag <ul> einen Link zu verpassen? Im Endeffekt sieht man nämlich nur die einzelnen Listenelemente <li>. Ebenso stellt sich diese Frage bei geordneten Listen <ol> und bei Definitionslisten <dl>. Diese Fragen und noch andere hat sich Eric Meyer auch schon gestellt. Vor wenigen Tagen hat Eric Meyer eine kleine Demo unter dem Einsatz von Javascript, das HTML 5 simulieren soll, verfasst, die dieses “href-everywhere” an praktischen Beispielen aufzeigt.
Halten wir fest: Für die Webdesigner unter uns könnte HTML 5 ernstzunehmende Erleichterungen bringen.
10. July 2008
Einen Monat läuft dieser Blog auf HTML- Basis (!) schon. Eigentlich dumm, denke ich jetzt so im Nachhinein, den Blog auf HTML aufzubauen; besser hätte ich eine mySQL- Datenbank genutzt und diese mit PHP dann immer abgefragt. Dann hätte ich ebenso gut einen Blog mit Wordpress hochziehen können. Aber da mein Provider ja leider kein PHP, mySQL oder dergleichen unterstützt, heißt die Devise, erst einmal bei sturem HTML zu bleiben. Und auf einen anderen Provider, der PHP, mySQL, Perl, Python und andere serverseitige Skriptsprachen unterstützt, umzusteigen, lohnt sich momentan noch nicht. Auf meinem heim.at- Server, für den ich einmal 15 Euro bezahlt habe und der jetzt dann aber kostenlos für mich ist (und werbefrei!!!), bin ich erst seit ungefähr Dezember letzten Jahres. Allerdings, wenn ich später einmal umsteige, werde ich all-inkl als Hoster nehmen. Von all-inkl wird auch der Blog von dem Mann, dem ich meine inzwischen ziemlich großen CSS- Kenntnisse verdanke, Peter Müller, gehostet.
Wie auch immer. Ich sagte, dass ich einen Fehler gemacht hatte, diesen Blog mit HTML aufzubauen. Jetzt stellt sich dem gemeinen Leser natürlich die Frage: Warum? Antwort: Ich habe heute mal meinen Quelltext von Inline-Style befreit und diesen Inline-Style in ein externes CSS gepackt. Und da ich meinen Blog nur mit einem Editor – nicht mit einem WYSIWYG- Editor – also einer graphischen Oberfläche – wie Frontpage, allenfalls habe ich mit Weaverslave gearbeitet – pflege, merkte ich jetzt, dass ich mich durch einige 100 Zeilen durchzukämpfen hatte, als ich den Inline-Style herauslöschen wollte. Darum werde ich irgendwann diesen Blog einmal auf PHP- Basis laufen lassen, wenn ich den Provider wechsele. Genau deswegen.