Volksbildungswerk Klarenthal e.V.

Kurs 60/Herbst 2001:
Workshop: Wir erstellen die Homepage des Volksbildungswerkes Klarenthal e.V.

Zusammenfassung Doppelstunde 3 (17.9.2001)

Vorherige Doppelstunde

Index

Nächste Doppelstunde

1. Ergänzung
   Wenn Bilder von Text umflossen werden sollen mit <img src="..." align="...">, hebt <br clear="all"> dies wieder auf.
   
   
2. Verzeichnisstruktur Web-Server / Strato
   Empfehlung: Ihr PC sollte die gleiche Struktur haben wie der Server. Dies erleichtert das Hochladen der Webpräsenz.
   Bei Strato:

   Domain:		www.klarenthal.org
   Subdomain:		www.vbw-klarenthal.de

   Die Hauptdomain wird unter / (root) angesprochen.
   Die Startseite sollte index.htm oder index.html heissen.
   Darunter gibt es /vbw/ als Verzeichnis und index.html als Hauptseite. Die Subdomain zeigt direkt auf das Verzeichnis /vbw/ und somit direkt auf /vbw/index.html. Im Browser sind die Angaben http://www.vbw-klarenthal.de/ und http://www.klarenthal.org/vbw/ bzw. http://www.vbw-klarenthal.de/index.html und http://www.klarenthal.org/vbw/index.html identisch und zeigen die gleiche Seite.
   Alle Formulare müssen auf der Hauptdomain ausgeführt werden. Daher gibt es ein Verzeichnis /forms/.
   Das Shopsystem verlangt zwingend ein Verzeichnis /shop/ in der Hauptdomain.
   Unter /vbw/ soll es ein Vereichnis für alle Graphikdateien geben: /vbw/img/.
   Die Kursinhalte sollen in /vbw/p2001_1/ bzw. /vbw/p2001_2/ etc. stehen.
   Der Verein soll seine Seiten in /vbw/verein/ bekommen.
   Somit ergibt sich bis jetzt folgende Struktur auf dem PC (und später auf dem Strato Web-Server):

   /index.html    allgemeine Startseite
   /vbw/          Verzeichnis des VBW
   /vbw/img/      Graphiken
   /vbw/verein/   Verzeichnis des e.V.
   /vbw/p2001_2/  Programminhalte
   /forms/        Formulare wie vbw_mail.htm
   /shop/         Buchungssystem
   

   Empfehlungen:
   • Datei- und Verzeichnisnamen mit Kleinbuchstaben und _ (Unterstrich).
   • Keine Leerzeichen " " verwenden!
   • Sprechende Namen (aber nicht zu lang bei häufig genutzten Verzeichnissen/Dateien!)
   
   
3. Links
   Der <a>-Tag. wichtigstes Attribut: href="..." (und eigentlicher Inhalt des Tags!).
   Aufbau: <a href="seite.html">aussagekräftiger Verweistext</a>
   Seite auf Domain einfach mit Seitenname ansprechen, z.B. <a href="zwei.htm">.
   Externe Links mit vorangestelltem http://, z.B. <a href="http://www.hillschmidt.de/">
   Weitere wichtige Attribute:
   • target="...". Neues Fenster mit _blank. Wichtig für Frames!
   • name="...". Sprungmarke auf gleicher Seite. <a name="hugo"> wird angesprochen als <a href="#hugo">
   
   Relative Adressierung in anderen Verzeichnissen auf dem gleichen Server analog zu DOS/Unix cd-Kommando:
   ../ ein Verzeichnis zurück.
   Um von /vbw/ nach /vbw/verein/ zu springen: <a href="verein/seite.html">
   Um von /vbw/verein/seite.html zurück zur Hauptseite: <a href="../index.html">
   Um von der Hauptseite aus Bilder zu zeigen: <img src="img/logo.gif">
   Um von /vbw/verein/index.html aus Bilder zu zeigen: <img src="../img/logo.gif">
   
   
4. Navigation I: Listen/Menues
   Ohne Links kein Internet. Links untereinander anordnen und mit <br>-Tags gliedern - einfache Lösung.
   Mit Listen arbeiten:
   
   • Nummerierte Listen: <ol>-Tag (ordered list).
     Attribute: Standard (keine Angabe): Zahlen, automatisch hochgezählt.
     type="I" - römische Zahlen groß
     type="i" - dito klein
     type="A" - alphabetische Gliederung mit Großbuchstaben
     type="a" - dito mit Kleinbuchstaben
     start="zahl" - legt Startzahl fest.
     Beispiele:

     <ol type="i" start="2001"> nächster Eintrag

     <ol type="A"> nächster Eintrag

     <ol start="2001"> nächster Eintrag

   • Aufzählungslisten: <ul>-Tag (unordered list).
     Attribute: type="circle" oder type="square" oder type="disc"
     setzen unterschiedliche Aufzählungszeichen:

     <ul type="circle"> nächster Eintrag

     <ul type="square"> nächster Eintrag

     <ul type="disc"> nächster Eintrag

   
   Die einzelnen Punkte der Aufzählung werden mit dem <li>-Tag definiert.
   Beispiel:<li>nächster Eintrag</li>
   Attribut value="..." ändert die fortlaufende Nummerierung bei nummerierten Listen.
   
   Weitere Listentags sind <menu> und <dir> Tags, werden aber kaum verwendet.
   
   Für wissenschaftliche Arbeiten sind die Definitionslisten-Tags <dl><dt>Begriff</dt><dd>Beschreibung </dd> ... </dl> hilfreich.
   Beispiel:

   HTML HyperTextMarkupLanguage www World Wide Web

   <dl> <dt>HTML</dt> <dd>HyperTextMarkupLanguage</dd> <dt>www</dt> <dd>World Wide Web</dd> </dl>

   
   

Vorherige Doppelstunde

Index

Nächste Doppelstunde

---

© 2001 Andreas Schmidt