Webdesign lernen: Grundlagen

Sie möchten Dokumente im Web veröffentlichen? Eine Materialsammlung, Arbeitsblätter, Links zu weiterführenden Quellen im World Wide Web? Welches Thema auch immer ihnen interessant erscheint, die Möglichkeit, eine eigene Website zu erstellen, um das Interesse z.B. an Schüler weiterzugeben, ist reizvoll. Doch wo und wie anfangen?
Der folgende Artikel möchte ihnen eine Starthilfe geben. Er beschreibt nicht, wie man Seiten erstellt oder auf einen Webserver hochlädt, sondern gibt Hinweise darauf, was sie zuallererst lernen sollten, wo sie Ressourcen dazu finden und wie sie von da an weitermachen können. Als Vorkenntnisse sollten sie lediglich ein wenig Erfahrung im Web mitbringen und die wichtigsten Begriffe des Webdesigns schon einmal gehört haben.

1. XHTML und CSS lernen
2. Trennung von Struktur und Präsentation verstehen
3. Die wichtigsten Browser installieren und nutzen
4. Editor-Software finden
5. Auf dem Laufenden bleiben

(1) XHTML und CSS lernen

XHTML (eXtensible Hyptertext Markup Language) und CSS (Cascading Style Sheets) sind die Basis einer modernen Website. XHTML dient dazu, die Inhalte zu strukturieren und ihnen eine Bedeutung zuzuweisen. Beispielsweise kennzeichnet man die Hauptüberschrift einer Seite, indem man sie in die XHTML-Tags <h1> und </h1> einschließt. Ein Textabsatz erhält demgegenüber die Tags <p> und </p>. Im Gegensatz zu dieser inhaltlichen Strukturierung legt CSS fest, wie die einzelnen Strukturelemente ausssehen sollen. Eine Website funktioniert auch ohne CSS. Dann sind die Seiten weiß mit schwarzer Schrift und der Browser bestimmt, wie groß die Überschriften und die Schriftgröße des Fließtexts ist. Mit CSS kann man auf diese und viele weitere Dinge Einfluss nehmen.

Um ins Webdesign einzusteigen, kann man sich zunächst XHTML widmen: das Ergebnis sieht dann zwar recht nüchtern aus, aber es funktioniert und jeder kann es lesen und benutzen. Da für die meisten Seiten eine Handvoll XHTML-Tags ausreicht, hat man sie schnell verinnerlicht und kann sich dann daran machen, den Seiten mit CSS etwas Farbe und andere Gestaltungselemente zu geben.

• Michael Jendryschik bietet eine umfassende Einführung in XHTML.
• Auch für CSS gibt es auf jendryschik.de eine gute Einführung.
• HTML Dog bietet ebenfalls gute Einsteiger Tutorials für XHTML und CSS an.
• Was macht XHTML gegenüber “normalem” HTML aus? Der Styleguide der New York Public Library gibt Auskunft.

(2) Trennung von Struktur und Präsentation verstehen

Warum sollten sie mit XHTML und CSS zwei Sprachen lernen? Reicht HTML nicht? Die Antwort ist, dass sich erst in den letzten Jahren die Erkenntnis langsam durchsetzt, dass alle Nutzer mehr von Websites profitieren, wenn diese nach den Grundsätzen der Webstandards erstellt sind. Die Trennung von Struktur und Präsentation ist ein Aspekt dieses Ansatzes.

Die Berücksichtigung von Webstandards bringt ihnen als Webseitenautor und ihren Lesern deutliche Vorteile, über die sie sich einen kurzen Überblick verschaffen sollten.

Sie können damit u.a. sicherstellen, dass ihre Seiten geringe Dateigrößen haben und somit zügig geladen werden und dass sie einer möglichst breiten Nutzergruppe zugänglich sind. Außerdem werden nach diesem Prinzip erstellte Seiten deutlich besser von Suchmaschinen gefunden. Nichtzuletzt verlangt diese Art der Vorgehensweise, dass man seine Gedanken und Inhalte vorstrukturiert, was ich für einen großen Vorteil halte. Zu oft sieht man Websites, in denen kein roter Faden, keine erkennbare Struktur vorhanden ist und die dadurch für den Nutzer wenig nützlich sind.

(3) Die wichtigsten Browser installieren und nutzen

Ein wichtiger Schritt beim Einstieg ins Webdesign ist die Erkenntnis, dass man Internet Explorer (IE) nur benutzt, weil er zufällig bei Windows mit dabei war und dass es weit bessere Browser gibt, mit denen man mehr Freude im Internet hat. Zunächst reicht es, zwei zusätzliche Browser zu installieren, um die neu erstellten Seiten darin testen zu können.

Firefox ist der Vorreiter aller Browser aus der “Gecko«-Familie (zu denen auch Netscape gehört). Er ist leicht zu bedienen und bietet eine Menge interessanter Erweiterungen (Extensions), die u.a. auch das Webdesign leichter machen. So sollte man die Webdeveloper Toolbar am besten gleich nach dem »Auspacken« nachinstallieren und sich damit vertraut machen. Sie können auch gleich hier auf Rete-Mirabile.net eine Einführung zu Firefox lesen.

Opera in der aktuellen Version (derzeit Version 7.54, 20.08.2004) ist der zweite ernstzunehmende Mitspieler im Browsermatch. Opera lässt sich extrem den eigenen Bedürfnissen anpassen, erfordert allerdings eine etwas längere Einarbeitungszeit.

Nachdem man die beiden auf seinem Rechner installiert hat, wird man kaum noch mit dem IE surfen und sich fragen, warum man nicht schon viel früher umgestiegen ist. Bei Browse Happy, einem neuen Projekt des Webstandards Project, kann man sich näher über den Browserwechsel informieren.

(4) Editor-Software finden

Prinzipiell kann man HTML– und CSS-Dateien im regulären Texteditor von Windows (Notepad) erstellen und bearbeiten. Das ist allerdings etwas mühsam, so dass es Sinn macht, sich einige kostenlose Editoren näher anzusehen.

Weaverslave ist ein kostenloser Editor, der viele nützliche Funktionen hat. XHTML ist in der aktuellen Version bereits teilweise eingebaut, so dass man einen problemlosen Start hat.

Phase 5 ist ebenfalls ein guter Freeware-Editor, der allerdings nicht von sich aus XHTML-bereit ist.

HTML Kit ist ein englischsprachiges Programm, das XHTML-Unterstützung von Haus aus mitbringt. Ich habe keine persönliche Erfahrung mit HTML Kit, so dass ich über Benutzerfreundlichkeit etc. nichts sagen kann.

(5) Auf dem Laufenden bleiben

Von Anfang an sollte man versuchen, aktuelle Entwicklungen sowie Tipps und Tricks nicht zu verpassen. Weblogs sind dafür bestens geeignet. Sowohl private Designer als auch größere Sites bieten hierzu gute Ressourcen an. Wenn die Begriffe »Weblogs«, »RSS« und »Newsreader« nur hochgezogene Augenbrauen auslösen, können sie sich bei About RSS erstmal grundlegend informieren

Interessante Weblogs und Informationssites:

• Sitepoint bietet dem Webdesigner einen umfassenden Service für jedes Stadium der Entwicklung. Auch die diversen Weblogs von Sitepoint sind einen Blick wert.
• Dr. Web ist eine gute deutsche Ressource für Webdesigner. Auch hier kann man per RSS-Feed auf dem Laufenden bleiben.
• CSS-Technik News ist ein Community Blog rund um das Thema CSS und Webdesign.
• D. Keith Robinson’s persönliches Weblog Asterisk ist eine hervorragend Quelle inspirierender Gedanken und Infos rund ums Webdesign.
• Simple Bits ist die persönliche Site von Dan Cederholm – ebenfalls ein hervorragender Webdesigner und Autor.
• mezzoblue ist das Blog von Dave Shea, dem Gründer von CSS Zen Garden.

Fazit

Diese fünf Punkte sollten eine gute Starthilfe für XHTML und CSS sein. Es gibt noch viele weitere Ressourcen und Informationsquellen und auch noch viele weitere Themen, denen man mit der Zeit Beachtung schenken muss.

Zunächst sollte man aber überschaubar beginnen und vor allem eines zur Gewohnheit machen: viel im Netz unterwegs sein, die Augen offen halten und regelmäßig die Browserfunktion »Ansicht« > »Seitenquelltext anzeigen« nutzen. Denn allein dadurch, dass man sich ansieht, wie andere Websites »gestrickt« sind, kann man schon viel lernen.