Wacker Art | Homepagebau |
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
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:
Die kleine HTML-Schule | (PDF-Format) |
Wenn man diesen Einführung durchgearbeitet hat, sollte man danach den Grundlegenden Artikel über Cascading Style Sheets lesen:
Styling für Webseiten | Kurzeinführung in CSS für Anfänger. |
Weiterführende Informationen zum Thema HTML findet man über die folgenden Links:
Self HTML | Die wohl umfangreichste deutschsprachige Online-Dokumentation zum Thema HTML | |
HMTL-Kurzreferenz für Profis | Eine Kurzreferenz zum schnellen Nachschlagen (vom gleichen Autor wie Self HTML) | |
W3C World Wide Web Consortium | Der HTML-Standard wird vom "World Wide Web Consortium" (W3C) definiert. Hier findet man die aktuell gültigen HTML-Standards. |
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:
Styling für Webseiten | Kurzeinführung in CSS für Anfänger. |
Weiterführende Tutorials und Vorlagen zum Thema CSS findet man über die folgenden Links:
Webdesign Tutorials | Weiterführende Turotials zum Thema Cascading Style Sheets | |
Vertige CSS-Layouts | Einfache Vorlagen für CSS Design | |
CSS Layout zum mitnehmen | Anspruchsvolle Vorlagen für CSS-Design | |
Little Boxes | Beispiele für CSS Layout. |
Weitere interesante Links zu Thema CSS findet man über die folgende Tabelle:
WebsiteTipps | "CSS - Cascading Style Sheets" Eine umfangreiche Linksammlung. | |
friendly bit | Artikel über CSS, HTML und JavaScript. Tolle Internetpräsenz, sehr schönes Seiten Layout. | |
glish.com | CSS Layout Techniques |
Die Cascading Style Sheets Standards des "World Wide Web Consortiums" findet man über die folgenden Links:
W3C CSS Cascading Style Sheets | Home Page | |
Cascading Style Sheets Level 1 | "CSS Level 1 Specification" des W3C. | |
Navigieren Level 1 | Leichtes navigieren durch die "Level 1 Specification" des W3C. | |
Cascading Style Sheets Level 2 | "CSS Level 2 Specification" des W3C. Achtung CSS Level 2 wird nicht von allen Browsern vollständig unterstützt. | |
Navigieren Level 2 | Leichtes navigieren durch die "Level 2 Specification" des W3C. |
Anspruchsvolle Beispiele zu Thema Cascading Style Sheets findet man auf der folgenden Seite:
CSS Zen Garden | The Beauty of CSS Design Verschiedene CSS-Layouts werden für das selbe HTML-Template verwendet. Nur durch die Verwendung von anderen CSS-StyleSheets und anderer Grafiken, werden die unterschiedlichsten, Internet-Seite (mit gleichem Text) erzeugt. |
|
CSS Zen Garden | Die deutsche Version des CSS Zen Garden. Es wird ein deutsches HTML-Template verwendet, aber die gleichen Style Sheets wie in der englischen Version. | |
css/edge | Eric Meyer erkundet die Grenzen, des mit Cascading Style Sheets machbaren. |
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.
Wacker Art Windows | Windows WA |
Tipp: Mit den Scrollbars durch das Bild manövrieren, damit die interessanten Effekte sichtbar werde.
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.
HTML Portal | Download Möglichkeit des Phase 5 Editors. | |
Nvu Composer und KompoZer DE | Ein aus dem Mozilla Projekt hervorgegangener kostenloser HTML Editor | |
Open Websuit | HTML-Editor (X)HTML und das Analyse Tool WebAnalyse |
Zur Farbdefinition und Farbauswahl für HTML und Cascading Style Sheets, gibt es auf den Wacker Art Internetseiten Farbtafeln und Java-Applets.
Wacker Art Farbtafeln zu den RGB Farben | Auf dieser Seite können Sie auf einen Farbnamen klicken und diese Farbe wird dann als Hintergrundfarbe gewählt. Dadurch bekommt man einen Eindruck von der großflächigen Wirkung einer Farbe. Insbesondere lässt sich mit Hilfe dieser Seite schnell eine passende Hintergrundfarbe für die eigene Homepage finden. |
Wacker Art RGB Color Mixer | (Java-Plugin im Browser ist erforderlich) |
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:
Wacker Art RGB Color Palette | (Java-Plugin im Browser ist erforderlich) |
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.
My Web site is standard! And yours? | ||
DOCTYPE And Browser Modes |
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.
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:
W3C HTML Validation Service | ||
W3C Cascading Style Sheets Validation | ||
W3C Link Checker | ||
WDG CSSCheck | Web Design Group - Überprüfen von CSS-Files |
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.
Firefox | HTML-Browser | |
Mozilla | HTML-Browser | |
Opera | HTML-Browser |
Diese HTML-Seite wird von den aktuellen Versionen dieser Browser und dem Microsoft Internet Explorer unter Windows XP, fast identisch dargestellt.
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:
1und1 |
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:
Vidoecinema |
Zum Transfer der HTML-Seiten vom eigenen Computer auf den Webspace bei seinem Provider benötigt man ein File Transfer Programm:
Filezilla | File Transfer Software | |
WS_FTP | File Transfer Software (kostenlos für den privaten Gebrauch) |
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:
Webcounter | Besucherzähler mit Statistik |
Denic | Betrieb des Primary-Nameservers für die Toplevel-Domain .de | |
Whois | Wer ist der Besitzer eines .de Domain Namens? | |
Who is | Hier kann man auch domainname.com abfragen. (kein www. am Anfang eingeben.) |
Stimator | Was ist meine Internetauftritt wert? |
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.
Eine Sammlung von Suchmaschinen und Webkatalogen findet man bei meiner Linksammlung
Wacker Art 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:
Suchmaschinen - Informationsdienst | ||
The Web Robots Pages |
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.
Webmaster Tool | von Google |
Kombiniert man HTML, Cascading Style Sheets und JavaScript, so kann man auf Internet Seiten dynamische Effekte erzeugen.
Wacker Art JavaScript | Auf dieser Seite habe ich Links und Informationen zu JavaScript und DHTML zusammengetragen. |
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.
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:
Wacker Art Java und Computerkunst | Informationen zur Programmiersprache Java und Java-Applets. |
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.
Übliche Plugins für Firefox | Häufig benötigte Plugins |
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.
Wacker Art JavaScript | Die im Browser installierten Plugins werden aufgelistet. |
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.
Wacker Art Videos und Animationen | Einige Beispiele. |
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.
GIMP Hompage | The GNU Image Manipulation Program |
|
GIMP Benutzerhandbuch | Deutsche Übersetzung des GIMP Benutzerhandbuches | |
Grokking the GIMP | Deutsche Onlineversion eines GIMP Buches | |
GIMP Savvy | Informationen und Resourchen zu GIMP. Englische Version von "Grokking the GIMP". Copyright freies Fotoarchive. |
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.
OpenOffice Homepage | ||
Dokumentation | Das OpenOffice Dokumentationsportal |
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.
Apache Homepage | Download des Apache Webservers | |
Dokumentation |
Quirks Mode | Informationen zu CSS und JavaScript | |
WellStyled | CSS & Webdesign Workshop | |
Bookmarks | Bookmarks for Web-Developers |
Eine sehr gute Sammlung vom Tutorials, über die verschiedensten Technologien des Homepagebaus, findet man über den folgenden Link. Diese Tutorials sind aber in Englisch:
W3 Schools |
Ü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.
On Mouse Over |
Über den folgenden Link läßt sich Latex Code in Grafiken umwandeln.
LaTex Converter |
& | & |
; | ; |
" | " |
' | ' |
# | # |
< | < |
> | > |
° | ° |
± | ± | ∓ | ∓ | ⊕ | ⊕ | ||||
· | · | ˙ | ˙ | × | × | ⊗ | ⊗ | ⊙ | ⊙ |
⊚ | ⊚ | ○ | ○ | ⋅ | ⋅ | ⋆ | ☆ | ⋄ | ⋄ |
⇔ | ⇔ | ⇒ | ⇒ | ⇐ | ⇐ | ⇑ | ⇑ | ⇓ | ⇓ |
≠ | ≠ | ≈ | ≈ | ∿ | ∿ | ||||
√ | √ | ∑ | ∑ | ∏ | ∏ | ||||
∫ | ∫ | ∬ | ∬ | ∭ | ∭ | ∮ | ∮ | ||
∂ | ∂ | ∇ | ∇ | ∆ | ∆ | ||||
¬ | ¬ | ∧ | ∧ | ∨ | ∨ | ∧ | ∧ | ||
≤ | ≤ | < | < | ≪ | ≪ | ||||
≥ | ≥ | > | > | ≫ | ≫ | ||||
∈ | ∈ | ∉ | ∉ | ∪ | ∪ | ∩ | ∩ | ∅ | ∅ |
⊂ | ⊂ | ⊃ | ⊃ | ⊆ | ⊆ | ⊇ | ⊇ | ⊄ | ⊄ |
† | † | ∝ | ∝ | ∞ | ∞ | ||||
∀ | ∀ | ∃ | ∃ | ∄ | ∄ | ⋀ | ⋀ | ⋁ | ⋁ |
∠ | ∠ | ∡ | ∡ | ∢ | ∢ | ⊥ | ⊥ | ∥ | ∥ |
⋮ | ⋮ | ⋯ | ⋯ | ⋰ | ⋰ | ⋱ | ⋱ | ||
→ | → | ← | ← | ↔ | ↔ | ↑ | ↑ | ↓ | ↓ |
⟶ | ⟶ | ⟵ | ⟵ | ⟷ | ⟷ | ⇋ | ⇋ | ||
ℂ | &Copf; | 𝔾 | &Gopf; | ℚ | ℚ | ℝ | ℝ | ℤ | ℤ | ℤ
ℕ |
α | α | Α | Α |
β | β | Β | Β |
γ | γ | Γ | Γ |
δ | δ | Δ | Δ |
ε | ε | Ε | Ε |
ζ | ζ | Ζ | Ζ |
η | η | Η | Η |
θ | θ | Θ | Θ |
ι | ι | Ι | Ι |
κ | κ | Κ | Κ |
λ | λ | Λ | Λ |
μ | μ | Μ | Μ |
ν | ν | Ν | Ν |
ξ | ξ | Ξ | Ξ |
ο | ο | Ο | Ο |
π | π | Π | Π |
ρ | ρ | Ρ | Ρ |
σ | σ | Σ | Σ |
τ | τ | Τ | Τ |
υ | υ | Υ | Υ |
φ | φ | Φ | Φ |
χ | χ | Χ | Χ |
ψ | ψ | Ψ | Ψ |
ω | ω | Ω | Ω |
Math Symbols |
Weitere HTML-Symbole zum Thema Mathematik |
Webseiten programmieren und gestalten von Mark Lubkowitz |
Das Grundlagenwerk von Mark Lubkowitz für Einsteiger und Profis. Dieses Buch bietet grundlegende Informationen zu fast allen Themen, die mit dem eigenen Internetauftritt zu tun haben: HTML, CSS, XML, PHP, JavaScript, Perl, MySQL, SVG, RSS, Weblogs |
Eric Meyer's CSS |
Eric Meyer's CSS In diesem Buch, werden zehn anspruchsvolle Beispiele, zum Thmea Webdesign mit HTML und CSS vorgestellt. Wenn man die Grundlagen des Webdesign mit CSS beherrscht, ist dies genau das richtige Buch, um sich mehr mit anspruchsvollem Webdesign auseinander zu setzen. |
28. Februar 2009 Version 2.5