Wacker Art Homepagebau
Fachwerk

Bild: "Fachwerk" 56,4cm x 42cm

Homepage-Bau, HTML und CSS
Eine kommentierte Linksammlung

Diese Internetseite, war am Anfang eine kleine Linksammlung, mit nützlichen Links, die mir beim Entwickeln meiner Homepage geholfen haben. Diese Linksammlung ist im Laufe der Zeit immer mehr angewachsen, und es wurde Kommentare und beschreibende Texte hinzugefügt, so dass allmählich, eine auf verschiedenen Links beruhende Einführung in HTML, Cascading Style Sheets und den Homepagebau entstanden ist. Besonderen Wert habe ich darauf gelegt, kostelose Software zu empfehlen, die ich selber verwende.

Des weiteren habe ich ein neues Layout, für die Wacker Art Internetseiten, mit der Hilfe von Cascading Style Sheets, als erstes auf dieser Seite ausprobiert und weiterentwickelt.

Ich hoffe, dass diese Linksammlung, deshalb auch anderen Homepagebauern und Webmastern helfen wird, ihren eigenen Internetauftritt zu gestalten.

Moosburg, den 28. Mai 2006

Hermann Wacker

Tipps zum Bau der eigenen HomepageInhalt

Als Voraussetzung zum Bau der eigenen Homepage, sollte man sich mit den Grundlagen von HTML, der "Hyper Text Markup Language", auseinander setzen. Dies ist die Sprache, mit der die üblichen Internetseiten definiert werden.

Eine sehr schöne und leicht zu lesende Einführung in HTML ist: "Die kleine HTML Schule". Einem Anfänger empfehle ich deshalb, diese Einführung durchzuarbeiten, um sich so die Grundlagen für den Homepagebau zu erarbeiten. Über den folgenden Link der Uni-Hagen kann diese Einführung in HTML, herunter geladen werden:

Wenn man diesen Einführung durchgearbeitet hat, sollte man danach den Grundlegenden Artikel über Cascading Style Sheets lesen:

HTML Dokumentation Inhalt

Weiterführende Informationen zum Thema HTML findet man über die folgenden Links:

Cascading Style Sheets Inhalt

Neben HTML sollte man sich auch etwas mit Cascading Style Sheets befassen, um so auf seinen Internetseiten, schnell ein schönes und einheitliches Layout zu bekommen.

Für den Anfänger besonders empfehlenswert ist die folgende Internetseite. Auf dieser Seite werden kurz und kompakt die Grundlagen von Cascading Style Sheets vermittelt:

Weiterführende Tutorials und Vorlagen zum Thema CSS findet man über die folgenden Links:

Weitere interesante Links zu Thema CSS findet man über die folgende Tabelle:

Die Cascading Style Sheets Standards des "World Wide Web Consortiums" findet man über die folgenden Links:

Anspruchsvolle Beispiele zu Thema Cascading Style Sheets findet man auf der folgenden Seite:

Die Möglichkeiten des Zusammenspiels zwischen HTML und CSS habe ich auf der Internetseite Wacker Art Windows ausprobiert. Achtung es werden als Hintergrund einige große Bilder geladen. Deshalb kann der Aufbau dieser Seite einige Zeit in Anspruch nehmen.

windows

Tipp: Mit den Scrollbars durch das Bild manövrieren, damit die interessanten Effekte sichtbar werde.

HTML-Tools Inhalt

Für die ersten Gehversuche zum Erstellen einer HTML-Seite kann man natürlich jeden einfachen Editor wie den Notepad verwenden. Es empfiehlt sich aber nach den ersten Versuchen der Erstellung einer HTML-Seite auf einen HTML-Editor umzusteigen. Meine Empfehlungen sind der HTML-Editoren Phase 5 und der Nvu Composer aus dem Mozilla Projekt. Der Phase 5 HTML-Editor ist kostenlos für den privaten Gebrauch. Man beachte bei beiden Editoren die jeweiligen Lizenz Bedingungen.

Farbauswahl für die Homepage

Zur Farbdefinition und Farbauswahl für HTML und Cascading Style Sheets, gibt es auf den Wacker Art Internetseiten Farbtafeln und Java-Applets.

Java-Applets zur Farbdefinition

Auf der Wacker Art RGB Color Mixer Seite gibt es auch eine Einführung in die Theorie der RGB-Farben und die dazugehörenden Hexadezimal-Codes. Auch findet man hier Links zum Thema Farbenlehre, sowie eine Einführung in die Additive- und Subtraktive-Farbmischung.

Das folgende Java-Applet bietet weitere Möglichkeiten die RGB-Farbwerte zu definieren:

Browserunabhängige Darstellung von HTML Inhalt

Eine der großen Herausforderungen eines Webdesigners besteht darin, daß seine Internetseite, von möglichst vielen Browsern gleich dargestellt wird, oder daß die Abweichungen möglichst gering sind. Dies für alle Browser zu erreichen ist praktisch unmöglich. Ich habe mich deshalb auf die am weitesten verbreiteten Browser beschränkt.

Dies sind nach meiner Besucherstatistik der MS-Internetexplorer sowie Firefox/Mozilla. Aber schon wenn man versucht für die Browser MS-Internetexplorer und Firefox in den aktuellen Versionen eine einheitliche Darstellung zu bekommen, stößt man auf große Hindernisse.

Eines der Geheimnisse des MS-Internetexplorers ist, daß er verschiedene Modi für die Darstellung von HTML kennt. In der default Einstellung, wird versucht, eine Aufwärtskompatibilität der Darstellung, zu älteren Versionen des MS-Internetexplorers, zu erreichen (Quirk Mode).

Gibt man aber in der ersten Zeile eines HTML-Files den Dokumententype: als "-//W3C//DTD HTML 4.01 Strict//EN" an, so versucht der MS-Internetexplorer, sich an den entsprechenden W3C Standard zu halten.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Bei der Verwendung dieses DOCTYPE werden die Unterschiede in der Darstellung zwischen MS-Internetexplorer und Firefox sehr gering.

Des weiteren versuche ich, meine HTML-Seiten, entsprechend des W3C Standards zu validieren. (siehe Abschnitt: Überprüfung von HTML-Seiten) Da ich mit der Validierung sehr spät angefangen habe, gibt es in diesem Bereich, bei meinem Internetauftritt, noch sehr viel Arbeit.

Führt man die beschriebenen Schritte durch, so bekommt man auf den meisten modernen Browsern eine gute Darstellung der HTML-Seite. Ist dies nicht der Fall, so ist dies in der Regel ein Fehler des Browsers und nicht des HTML-Codes.

Überprüfung von HTML-Seiten Inhalt

Entspricht die von mir erstellte HTML-Seite den vom "World Wide Web Consortium" W3C definierten Standards? Sind Fehler in meinem HTML oder in meiner Cascading Style Sheet Definition?

Die Überprüfung kann mit der Hilfe der folgenden Links erfolgen:

Browser Links Inhalt

Die Darstellung von HTML-Seiten ist von Browser zu Browser unterschiedlich. Man sollte seine HTML-Seiten nicht nur mit dem Microsoft-Internetexplorer überprüfen, sondern auch mit anderen Browsern.

Diese HTML-Seite wird von den aktuellen Versionen dieser Browser und dem Microsoft Internet Explorer unter Windows XP, fast identisch dargestellt.

Wie macht man eine HTML-Seite zu einer Homepage? Inhalt

Domain Provider:

Bei einem Domain Provider kann man den Web-Space für die eigene Internetseite bekommen und kann in der Regel auch einen Domainnamen (z.B. www.mein-name.de) anmelden lassen:

Bei 1und1 bekommt man zu seiner Domain auch entsprechende E-Mail Adressen. Für diese lassen sich dann effective Spam-Filter konfigurieren, die Spam-Mails schon auf dem Server herausfiltern. Des weiteren bietet 1und1 einen Webmailer, der es ermöglicht, sich die E-Mails über einen Internet-Browser anzuschauen. Dadurch kann man sich seine E-Mails, über praktisch jeden Computer, mit Internetzugang und einem modernen Browser, anschauen. In diesem Webmailer kann man E-Mails als Spam markieren und damit sicherstellen, das diese garnicht erst, auf den eignen Rechener heruntergeladen werden.
Gegen einen Aufpreis kann man die eingehenden E-Mails auch nach Viren durchsuchen lassen. Damit werden die meisten Viren schon auf dem Server heraus gefiltert und gelangen nicht auf den eigenen Computer.

Da auf meiner E-Mail Adresse inzwischen auch viele Spam-Mails ankommen habe ich meine E-Mail Adresse nur noch als Grafik auf meiner Homepage. Dadurch können Robots, die das Internet nach E-Mail Adressen durchsuchen, meine E-Mail Adresse nicht mehr automatisch einsammeln. Eine Vorgehensweise, die ich jedem Homepagebesitzer, nur empfehlen kann.

Preiswerten Webspace für Videoanwendungen kann man über den folgenden Link bekommen:

File Transfer

Zum Transfer der HTML-Seiten vom eigenen Computer auf den Webspace bei seinem Provider benötigt man ein File Transfer Programm:

Besucherzähler

Man hat nun seine Internetseiten im Netz und möchte nun wissen wieviele Besucher wahren auf meiner Internetseite? Dafür benötigt man einen Besucherzähler oder Counter. Einen Besucherzähler bekommt man über den folgenden Link:

Domain Verwaltung:

Links rund um meine Domain

Internetseiten Promoten Inhalt

Es gilt die einfache Regel: "Je mehr Links auf meine Seite zeigen um so mehr Besucher kommen auf meine Seite." Für eine Internetseite, die viele Besucher haben möchte, ist es deshalb wichtig, daß möglichst viele andere Internetseiten einen Link auf diese Seite gesetzt haben. Fragen sie deshalb Webmaster von Internetseiten, die sich mit dem gleichen oder einem ähnlichen Thema wie ihre Internetseite, ob er einen Link auf Ihre Seite setzt.

Über einen Link, auf meine Homepage www.wackerart.de, würde ich mich natürlich auch freuen.

Promotion über Suchmaschinen und Webkataloge

Eine Sammlung von Suchmaschinen und Webkatalogen findet man bei meiner Linksammlung

Bei den meisten diser Suchmaschinen kann man seine Hompage anmelden. Die angemeldeten Seiten werden dann von den Robots der Suchmaschinen besucht und in den Index aufgenommen. Weitere Informationen zum Thema Suchmaschinen gibt es auf den folgenden Seiten:

Google bietet die Möglichkeit, über seine Webmaster Tools, den eigenen Internetauftritt, für die Suchmaschine Google zu optimieren. Dafür muss man aber einen Google Account anlegen.

Dynamic HTML (DHTML) Inhalt

Kombiniert man HTML, Cascading Style Sheets und JavaScript, so kann man auf Internet Seiten dynamische Effekte erzeugen.

Viele der auf dieser Seite aufgeführten Links, enthalten auch Informationen zu JavaScript, da JavaScript ein wichtiges Element, bei der Gestaltung von Internetauftritten geworden ist.

Java Applets

Eine weitere Möglichkeit dynamische Effekte zu erziehlen oder den Benutzer Interaktiv mit einer Web-Seite agieren zu lassen sind Java-Applets. In der Form von Java-Applets lassen sich Java Programme in Internetseiten einbauen. Über JavaScript ist es möglich von einer HTML-Seite aus Java-Applets anzusprechen. Informationen zu Java-Applets gibt es auf meiner Java-Seite:

Videos und Animationen

Will man Videos und Animationen in HTML-Seiten einbinden und zur Anzeige bekommen, so ist es vor allem notwendig, das im Browser die notwendigen Plugins vorhanden sind.

Die wichtigsten und am weitesten verbreiteten Plugins bekommt man am einfachsten über die Firefox/Mozilla Internetseite.

Werden diese Plugins installiert, so erfolgt die Installation in der Regel nicht nur für den Firefox-Browser, sondern auch für alle anderen Browser.

Über meine JavaScript-Seite kann man für die Browser Firefox und Opera herausbekommen, welche Plugins installiert sind, wenn man diese Internetseite mit einem dieser Browsern aufruft.

Einige Beispiele für Videos und Animationen, die in eine HTML-Seite eingebunden sind findet man über meine Internetseite Wacker Art Videos und Animationen. Die aktuell notwendigen HTML-Tags und notwendige Konfigurationen entnimmt man am besten den Internetseiten der entsprechenden Hersteller.

Animationen

Weitereführende Tools zum Homepagebau Inhalt

Grafik Tools

Um die eigene Homepage mit Grafiken und Fotos zu verschönern benötigt man Programme mit dehnen sich Grafiken erstellen oder Fotos bearbeiten lassen.

Mit dem Grafikprogramm GIMP lassen sich Pixel Grafiken erstellen oder Fotos und Grafiken bearbeiten. Ein sehr mächtiges Progamm, das aber einige Zeit für die Einarbeitung benötigt, bis man es beherscht.

OpenOffice

Open Office enthält ein sehr schönes Zeichenprogramm, mit dem Namen Draw, zur Erstellung von Vektorgrafiken.

Desweiteren enthält die OpenOffice Software das Programm Math, mit dem sich Formeln und Gleichungen erstellen lassen. Die Gleichungen auf meiner Quantenmechanik Seite wurden z.B. mit Math erstellt.

Texte die man mit OpenOffice Writer erzeugt hat, kann man im HTML-Format abspeichern. Also auch eine weitere Möglichkeit eine HTML-Datei zu erzeugen oder bestehende Textdateien in HTML umzuwandeln.

Webserver

Ein kostenloser und der am weitesten verbreitete Webserver, ist der Apache Webserver. Dieser Server läst sich sehr schnell auf dem eigenen Rechner installieren und ausprobieren (auch auf Rechnern mit Microsoft Betriebssystemen). Mit einem Webserver auf dem eigenen Rechner, kann man dann auch Internetseiten, die über Script Sprachen wie Perl und PHP oder über Java dynamisch vom Server erzeugt werden, selber entwickeln. Auch die Anbindung von Datenbanken, die sich auf dem Server befinden, an interaktive Websites ist dann möglich.

Weitere Links Inhalt

Eine sehr gute Sammlung vom Tutorials, über die verschiedensten Technologien des Homepagebaus, findet man über den folgenden Link. Diese Tutorials sind aber in Englisch:

Über den folgenden Link kann man, für private Homepages kostenlos, HTML-Templates für die eigene Homepage, herunter laden. Man muß dann nicht das gesamte Layout, einer Internetseite, selber entwickeln.

Über den folgenden Link läßt sich Latex Code in Grafiken umwandeln.

Literatur Inhalt

Literatur HTML - Hyper Text Markup Language

Literatur CSS - Cascading Style Sheets

28. Februar 2009 Version 2.5

Copyright: Hermann Wacker Uhlandstraße 10 D-85386 Eching bei Freising Germany Haftungsausschluß
HTML 4.01 Validierung Valid CSS!