Schnellkursus - Eigene Homepage erstellen.

Dies ist ein kleiner bzw. kurzer HTML-Einführungskurs zum Webpublishing (für solche, die selber eine Website gestalten wollen und dies noch nie gemacht haben, oder auch für solche, die ganz einfach einmal wissen möchten, wie das funktioniert mit der Gestaltung von diesen Webseiten). Es gibt grundsätzlich drei Möglichkeiten: 1. man erstellt die ganze Website selber und lernt dabei die HTML-Websitegestaltungssprache (von mir empfohlen, da man dabei jeden einzelnen HTML-Schritt selber erlernt und danach auch kennt), 2. man kauft sich ein Website-Erstellungsprogramm (das kostet etwas und jedes Programm hat auch so seine kleinen Nickligkeiten in der Codierung), 3. man macht rasch online eine Seite auf einer Website-Erstellungsseite mit einem vorgegebenem Muster (rasch gemacht, aber wenig dabei gelernt, und natürlich kann man solche Seiten dann auch nicht beliebig anpassen). Ich bin der Handwerker und mache alles selber. Hier eine kurze Anleitung für das Erstellen einer eigenen Website. Man kann das auch, wenn man den Text gelesen hat, gleich nachmachen und bei jedem Abschnitt das Resultat ansehen (wie sich die Website mit dem entsprechenden Schritt verändert). Zum Arbeiten kann man entweder den ganz einfachen Windows-Texteditor (Editor) verwenden oder auch das Word-Programm. Ich arbeite meist mit den einfachsten Programmen, d.h. Editor plus Paint (für grafische Sachen, sofern es kein besseres Grafikprogramm benötigt).

1. Der HEAD. Jeder Webseitencode besteht aus zwei Teilen: HEAD und BODY. Im HEAD erscheinen die Website-Informationen, die auf dem Bildschirm nicht sichtbar sind, im BODY erscheinen die Befehle für die Anzeige der Gestaltung. Man wird sehen: alle Befehle (engl. Tags) stehen in eckigen Klammern und müssen nach der Angabe des Inhalts auch wieder geschlossen werden, mit einem Schrägstrich vor dem Befehl. Man muss jetzt den HEAD-Befehl schreiben, dann kommt mit dem TITLE-Befehl eine Angabe des Titels der Website in den Head hinein (und die Befehle immer wieder schliessen). In den Head-Teil werden ferner etwa weitere informelle Informationen geschrieben (u.a. etwa auch Informationen für die Suchmaschinen) sowie auch Programm- oder Gestaltungsskripte, die verschiedene weitere Effekte auf der Webseite ermöglichen (z.B. in den Programmierungs- oder Gestaltungssprachen JavaScript, CSS oder Perl, aber davon ist hier nicht die Rede). Der HEAD kommt zusätzlich zwischen die grundlegende Seitenbezeichnung HTML, welche eigentlich zuallererst zu machen ist.

P.S. Zur besseren übersichtlichkeit macht man zwischen den einzelnen Befehlsteilen oder -abschnitten noch eine Leerzeile; darauf habe ich hier aus Platzgründen verzichtet.

<html>
<head>
<title>Testwebsite</title>
</head>
</html>

2. Der BODY. Unter den HEAD- schreiben wir den BODY-Teil.

<html>
<head>
<title>Testwebsite</title>
</head>
<body>
</body>
</html>

3. Der BODY-Inhalt, mit Text. Der BODY ist noch leer und muss jetzt mit Inhalt gefüllt werden. Wir machen zuerst einen Text, mit dem FONT-Befehl, und darin legen wir die Attribute fest: mit FACE die Schriftart (z.B. arial, verdana oder times - meist gibt man eine durch Komma getrennte Schriftenfolge ein, v.a. wenn man seltenere Schriften verwendet, dann interpretiert der jeweilige Browser die erste Schrift davon, die er erkennt: ich habe hier jetzt einmal nur die sichere Schrift arial angegeben), mit SIZE die Schriftgrösse, mit COLOR die Schriftfarbe*. Mit den Befehlen B für fett, I für kursiv oder U für unterstrichen kann man den Text zusätzlich formatieren (ich mache hier einmal den Anfang des ersten Satzes fett). Mit dem DIV-Befehl kann man einen Absatz machen, den man mit dem Attribut ALIGN ebenfalls formatieren kann: JUSTIFY für Blocksatz, CENTER für mittig, LEFT für linksbündig, RIGHT für rechtsbündig (ich mache hier einmal Blocksatz). Und ich füge zu diesem ersten Textblock noch zwei weitere Abschnitte mit Textblöcken dazu, damit es ein bisschen mehr Text hat auf der Seite: um einen Abschnitt zu beenden setzt man den BR-Befehl (Zeilenumbruch), und den selben Befehl verwendet man auch, um eine Leerzeile zu machen. Zusätzlich kann man noch eine überschrift machen: speziell dafür gibt es den H-Befehl, in den Varianten von H1 bis H7. Ich stelle die überschrift hier zentriert dar.

* Zu den Farbcodierungen: siehe im Web unter Webfarben, z.B. sogenannt sichere Webfarben, d.h. nach früherem Ermessen sind dies Farben, die in allen Browsern richtig interpretiert werden; die heutigen Browser interpretieren aber eigentlich alle Farben: Farbenspektrum, Farbnuancen.

<html>
<head>
<title>Testwebsite</title>
</head>
<body>
<div align="center">
<h1>Das ist eine kleine Probeseite</h1>
</div>
<br><br>
<div align="justify">
<font face="arial" size="3" color="#000000"><b>Dies ist ein Probetext</b>, bei dem man
irgend etwas hinschreiben kann, damit einfach etwas dasteht. Es spielt gar keine Rolle, was es ist:
Hauptsache, es steht einfach etwas da, damit man sehen kann, wie ein Text aussieht auf einer Website.
Ich muss aber schon ein bisschen etwas hinschreiben, damit es auch ein längerer Text ist, 
sonst sieht die Seite dann ziemlich leer aus, weil ich hier ja eine ganz einfache Seite mache,
auf welcher nur dieser Text erscheinen soll sowie noch ein Bild dazu. Die einfachste aller Websites
quasi: nur mit einem Text und einem Bild. So, das wär's: das reicht. Wir haben genug Text hier.<br>
</font>
</div>
</body>
</html>

4. Bild und Link einfügen. Nun kann man ein Bild einsetzen: mit dem IMG-Befehl und den Attributen SRC für die Dateiangabe (zeigt den Pfad auf zum Bild mit dem angegebenen Namen) sowie WIDTH und HEIGHT für die Bildgrösse, ALIGN für die Bildausrichtung (left, center, right), BORDER für die Rahmendicke und BORDERCOLOR für die Rahmenfarbe. Mein Bild (mit dem Namen 'bild.gif', aus einer Free-Clipart-Sammlung - die meistverwendetsten Bildformate sind '.gif', '.jpg' oder '.png') soll rechts oben erscheinen, und der Text soll das Bild umfliessen, daher setze ich zusätzlich die Attribute HSPACE und VSPACE: diese zeigen an, wieviel Abstand zwischen dem Bild und dem Text sein soll. Ferner kann man einen Link einsetzen: hier ist es ein Link ins Web hinaus, nämlich zur Suchmaschine Google (und ebenfalls gibt es hier auch noch einen Link zurück zur Ausgangsseite, damit man dann wieder auf dieser Seite hier landet). Der Befehl für einen Link lautet A HREF, und dann gibt man die entsprechende Webadresse ein. Das Attribut TARGET mit dem Wert BLANK bedeutet, dass die Seite in einem neuen Browserfenster dargestellt werden soll. Man sieht bei diesem Einsetzen des Links hier auch etwas Anderes, was wichtig ist: Ich habe hier einen neuen Abschnittsbereich gemacht (DIV), weil ich diesen Link zentriert unter dem Text haben möchte, und ebenso einen kurzen Text dazu: dieser wird in der gleichen Formatierung dargestellt wie der Text oben, denn die Befehle gelten solange, bis sie wieder geschlossen werden (man muss also diesen Text hier nicht wieder formatieren, sondern es wird die Formatierung von oben übernommen; man kann natürlich auch jeden Teil einzeln formatieren, aber je mehr Webpublishing man macht, desto mehr wird man sich alle Dinge, die nicht unbedingt nötig sind, ersparen wollen).

P.S. Wenn man später die Breite oder Höhe des Bildes verändern will, kann man auch nur die Breite oder nur die Höhe angeben: der andere Wert wird dann automatisch angepasst (sicherer ist es aber, beide Werte anzugeben: man kann auch den einen Wert festlegen und den anderen mit einer Dreisatzrechnung schnell im Rechner ausrechnen).

<html>
<head>
<title>Testwebsite</title>
</head>
<body>
<div align="center">
<h1>Das ist eine kleine Probeseite</h1>
</div>
<br><br>
<div align="justify">
<font face="arial" size="3" color="#000000"><b>Dies ist ein Probetext</b>, bei dem man
irgend etwas hinschreiben kann, damit einfach etwas dasteht. Es spielt gar keine Rolle, was es ist:
Hauptsache, es steht einfach etwas da, damit man sehen kann, wie ein Text aussieht auf einer Website.
Ich muss aber schon ein bisschen etwas hinschreiben, damit es auch ein längerer Text ist, 
sonst sieht die Seite dann ziemlich leer aus, weil ich hier ja eine ganz einfache Seite mache,
auf welcher nur dieser Text erscheinen soll sowie noch ein Bild dazu. Die einfachste aller Websites
quasi: nur mit einem Text und einem Bild. So, das wär's: das reicht. Wir haben genug Text hier.<br>
</font>
</div>
<br><br>
<div align="center">
Dieser Link führt zur Suchmaschine <a href="http://www.google.ch" target="_blank">Google</a>.
Zurück zur <a href="Webpublishing.htm">Ausgangsseite</a>.<br>
</div>
</font>
</body>
</html>

5. Tabelle machen. Für die Positionierung der Elemente benötigt man Tabellen, in welche der Inhalt hineingetan wird (sonst erscheint alles einfach am linken oberen Rand. Diese macht man mit dem TABLE-Befehl und den zusätlichen Befehlen TR für die Zeilenbezeichnung und TD für die Spaltenbezeichnung (diese sind v.a. relevant bei komplizierteren Tabellenstrukturen) und den Attributen ALIGN für die Ausrichtung (left, right, center) sowie WIDTH und HEIGHT für die Tabellengrösse (dies kann man in absoluten [Pixel-] oder relativen [Prozent-] Werten angeben), BORDER für den Rahmen, BORDERCOLOR für die Farbe, BGCOLOR für die Hintergrundfarbe (oder BACKGROUND für ein Hintergrundbild) sowie für die Tabellenzellenjustierung CELLPADDING (für den Zelleninnenabstand) und CELLSPACING (für den Abstand zwischen den Zellen untereinander; tönt ein bisschen kompliziert: für einfache Tabellen kann man das Cellspacing auf 0 setzen und mit Cellpadding den Abstand vom Tabelleninhalt zum Tabellenrand angeben). Für diese kleine Probewebseite genügt eine ganze einfache Tabelle mit bloss einer Zelle.

P.S. Mit einem kleinen bisschen Erfahrungen macht man die Tabellen bzw. die Tabellenstruktur, wenn es mehrere ineinander verschachtelte Tabellen sein sollen, meist zuerst (vor dem anderen Inhalt). Die Tabellenstruktur zeichnet man sich am Besten vor der Erstellung einer umfangreicheren Webseite zuerst auf einem Blatt Papier auf. Ich habe die Tabellen hier an den Schluss gesetzt, weil ich zuerst die anderen (noch grundlegenderen) Inhalte zeigen wollte.

<html>
<head>
<title>Testwebsite</title>
</head>
<body>
<br><br><br><br>
<table align="center" width="1000" height="100%" border="0" bordercolor="#ffffff"
bgcolor="#ffffff" cellpadding="25" cellspacing="0"> 
<tr>
<td>
<div align="center">
<h1>Das ist eine kleine Probeseite</h1>
</div>
<br><br>
<div align="justify">
<img src="bild.gif" align="left" width="125" height="75" border="1" bordercolor="#333333" hspace="25" vspace="12">
<font face="arial" size="3" color="#000000"><b>Dies ist ein Probetext</b>, bei dem man
irgend etwas hinschreiben kann, damit einfach etwas dasteht. Es spielt gar keine Rolle, was es ist:
Hauptsache, es steht einfach etwas da, damit man sehen kann, wie ein Text aussieht auf einer Website.
Ich muss aber schon ein bisschen etwas hinschreiben, damit es auch ein längerer Text ist, 
sonst sieht die Seite dann ziemlich leer aus, weil ich hier ja eine ganz einfache Seite mache,
auf welcher nur dieser Text erscheinen soll sowie noch ein Bild dazu. Die einfachste aller Websites
quasi: nur mit einem Text und einem Bild. So, das wär's: das reicht. Wir haben genug Text hier.<br>
</font>
</div>
<br><br>
<div align="center">
Dieser Link führt zur Suchmaschine <a href="http://www.google.ch" target="_blank">Google</a>.
Zurück zur <a href="Webpublishing.htm">Ausgangsseite</a>.<br>
</div>
</font>
</td>
</tr>
</table>
</body>
</html>

Webseite anschauen: die kleine Webseite ist bereits fertig! Jetzt muss man sie nur noch abspeichern mit einem Namen und der Endung '.htm' oder '.html' (ich habe sie hier gespeichert unter: Webseite.htm). Dann kann man sie im Browser öffnen: dazu muss man nur auf die Datei gehen in der Ordnerstruktur auf dem Computer und doppelklicken, und schon wird die Webseite im Browser geöffnet. Natürlich kann man jetzt weiter daran herumbasteln: zuerst ein bisschen die Attribute verändern und schauen, was passiert, dann sich weiterbilden über weitere Elemente, die man noch dazufügen kann. Es ist gut möglich, dass es dann mit der Zeit ein bisschen komplizierter werden könnte, aber Schritt für Schritt ist es auch nicht so schwierig, wie es anfangs aussieht (natürlich aber braucht es ein bisschen Zeit, um die ganze Sache zu erlernen). So, damit ist also nun hier bereits die erste Website (selber) erstellt!

Und so sieht diese Webseite nun aus (dieser Link öffnet ein neues Browserfenster, ebenso der Link auf der geöffneten Webseite). Wenn man also dies eingibt wie hier beschrieben, resultiert diese Webseite (man kann den fertigen Quelltext unter Punkt 5. markieren und kopieren, diesen im Editor einsetzen und als Website abspeichern (mit '.htm'- oder '.html'-Dateiendung): dann hat man die fertige Probe-Webseite bereits auf dem Computer und kann im Editor ein bisschen am Code herumbasteln, ohne das Bild natürlich, was man aber auf der angegebenen Probewebsite auch auf den eigenen Computer laden kann [und eben: die Website in den Browser laden und nach jeder änderung die Seite im Browser aktualisieren und schauen, was sich dabei getan hat]). Diese Seite könnte man nun eigentlich bereits ins World Wide Web hineinstellen: dazu benötigt man ein Programm, um die Dateien ins Internet hochzuladen (FTP-Programm) sowie einen Server, welcher die Dateien für die Website hostet (Hoster bzw. Hosting-Provider); darüber kann man sich je im Web informieren (und beides ist gratis zu haben, notabene, oder auch in etwas besseren Varianten [beim FTP-Programm würde ich auf jeden Fall anfangs ein ganz simples Freeware-Programm vorschlagen und beim Webspace-Anbieter muss man halt schauen]). Zuerst aber einmal ein bisschen am eigenen Computer üben.

Möchte man gleich mehrere Seiten machen und benötigt eine entsprechende Navigation dazu, so empfiehlt es sich wahrscheinlich, bevor man eine komplexere Navigation macht ich habe das anfangs auch so gemacht die einzelnen Links zu den verschiedenen Seiten einfach oben an der Seite aufzureihen: so kann man rasch eine ganz einfache eigene Navigation machen; nicht vergessen, auf jeder Seite auch einen Backlink zur Homepage einzufügen). Die Websites, oder viele oder manche, sind heute immer professioneller gemacht: das kann einen abschrecken, überhaupt mit kleinen Schritten in das Webpublishing einzusteigen. Man hat vielleicht das Gefühl, man müsse gleich eine perfekte Website hinzaubern, auch sollte man nicht meinen, aber das stimmt überhaupt nicht, auch sollte man nicht meinen, dass eine Privatwebsite aussehen muss wie eine Verwaltungs-, Firmen- oder Künstlerwebsite (eine private Website darf und sollte sogar einen individuellen und speziellen Touch haben): gerade bei einer privaten Website kann man ruhig einmal ganz klein anfangen und dann nach und nach diese ein bisschen ausbauen. Nachfolgend eine kleine Navigation mit drei Seiten, welche man ganz oben im Body einsetzen kann. Man beachte: alle Dateien dieser Probewebseite sind hier im gleichen Ordner abgelegt: ist dies nicht der Fall, dann muss man den entsprechenden Pfad zur Datei angeben (wenn man aber noch nicht so viele Dateien hat, kann man ruhig alles in den selben Ordner tun [wenn es mehr Dateien sind, empfiehlt es sich natürlich eine Ordnerstruktur für die Website einzuführen]).

<br>
<div align="center">
<a href="Seite1.htm" target="_blank">Seite 1</a>, <a href="Seite2.htm" target="_blank"
>Seite 2</a>, <a href="Seite3.htm" target="_blank">Seite 3</a>.<br>
</div>
<br>

P.S. Warum mache ich auch das hier noch, wenn doch schon sonst viel auf meiner Website ist und es ja auch diverseste Einführungen schon gibt im Web zu diesem Thema? Ganz einfach: ich glaube, dass ich mit meiner Erfahrung den Einstieg hier ganz simpel und rasch erklären kann, und der Einstieg ist etwas vom Wichtigsten. Daher sind hier auch wirklich nur ein paar ganz wenige Grundbegriffe gegeben, aber wie man sieht, kann man damit bereits auch etwas anfangen. Fast alle weiteren Informationen zum Webpublishing gibt es auf der Website von Selfhtml (und wer grösser einsteigen will, sollte sich auch das Einführungsbuch von Stefan Münz kaufen, welches zu dieser Website gehört). Das war schon die beste Referenz zur HTML-Einführung im deutschsprachigen Raum vor über zehn Jahren, und ich glaube, daran hat sich nichts geändert bis heute. Es gibt auch sonst diverseste Einführungskurse auf anderen Websites oder auch verschiedene Video-Serien zum Thema (auf Youtube nachschauen; dies scheint z.B. eine brauchbare Video-Serie zu sein [ich habe mir aber nicht das ganze Video bzw. die ganze Serie angeschaut]). Zu (fast) jeder Frage bezüglich des Webpublishings findet man im Web (natürlich) die geeignete Antwort (es kann aber auch sein, dass man Gestaltungsideen hat, die über das eigene aktuelle Vermögen hinausgehen: dann muss man es halt einfach doch ein bisschen einfacher machen; und am Anfang auf jeden Fall: ganz einfach anfangen). Schliesslich: mit rechtem Mausklick kann man auf jeder Webseite deren Quellcode oder Quelltext einsehen (siehe im entsprechenden Menüpunkt, der bei jedem Browser ein bisschen anders heisst), d.h. auf jeder Webseite, auf welcher das Aufrufen des Quelltextes nicht unterbunden ist (solches kann man tun, das ist aber unter Webpublishern verpönt, da man damit dem anderen die Möglichkeit nimmt, etwas aus dem entsprechenden Quelltextes zu lernen [natürlich gibt es trotzdem Wege, um zu einem Quelltext heranzukommen: so viel bringt also eine Unterbindung des Aufrufs auch gar nicht]).