HTML-Kurs Grundlagen zum Erstellen von Web-Seiten Weg zur eigenen Homepage HTML Webseiten

Anordnung mehrerer Objekte, Tabellen

Erstellen Sie einen neuen Ordner mit dem Namen w3 neben den vorhandenen Ordner w1 und w2. Kopieren Sie jetzt die Dateien
bild01.jpg und bild03.jpg in den Ordner w3.

Als nächstes starten Sie das Editor-Programm (z.B. über das Startmenü - Programme - Zubehör). Kopieren Sie den folgenden blau geschriebenen Text:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>Startseite</TITLE>
</HEAD>

<BODY BACKGROUND="bild03.jpg">
<IMG SRC="bild01.jpg" WIDTH=103 HEIGHT=168 ><IMG SRC="bild01.jpg" WIDTH=103 HEIGHT=168 ><IMG SRC="bild01.jpg" WIDTH=103 HEIGHT=168 ><IMG SRC="bild01.jpg" WIDTH=103 HEIGHT=168 ><IMG SRC="bild01.jpg" WIDTH=103 HEIGHT=168 ><IMG SRC="bild01.jpg" WIDTH=103 HEIGHT=168 ></BODY></HTML>

und fügen Sie diesen im Editor ein. Wählen Sie im Editor-Menü
Speichern unter...

Wählen Sie als Dateityp Alle Dateien(*.*) , geben Sie den Namen page4.htm ein und speichern Sie im Ordner w3.
Öffnen Sie page4.htm (durch Doppelklick der Datei im Ordner w3 oder durch Öffnen... aus dem Datei-Menü des Browsers) und ordnen Sie das Browser-Fenster und das Editor-Fenster (das vielleicht in die Taskleiste gerutscht ist) so an:

Die Bilder sitzen dicht an dicht linksbündig ausgerichtet (Standard-Anordnung). Man kann erweitern durch die Angaben
 für rechtsbündig,
 für mittig,
 für linksbündig.
Ein Browser kennt vor allem diese drei Ausrichtungen. Um einen Überblick zu gewinnen, ordnen Sie im Editor den Body-Text durch Zeilenumbrüche wie folgt an:

Dies sollte den Browser nicht stören, aber wenn Sie im Text-Editor aus dem Datei-Menü "Speichern" wählen und anschließend im Browser "Aktualisieren" so sehen Sie wie die Bilder auseinanderrücken. Weitere Zeilenumbrüche ändern jedoch nichts mehr. Um die Bilder weiter auseinanderrücken zu lassen können Sie aber dem Browser mit
  die Anweisung eines Leerzeichens und mit
 die Anweisung eines Zeilenumbruches geben.
Diese Zeichen können Sie so oft wiederholen bis Ihr gewünschtes Ergebnis vorliegt. Um nicht so viele Zeichen verwenden zu müssen wählen Sie eine große Schriftart mit und . Am besten kopieren Sie den folgenden Text komplett, markieren Sie im Editor alles zwischen <P........./P> und wählen aus dem Bearbeiten-Menü des Editors Einfügen .

Wählen Sie im Text-Editor aus dem Datei-Menü "Speichern". Dann wählen Sie im Browser "Aktualisieren".
Wenn Sie verschiedene Bilder benutzen und den Bildern Hyperlinks im Web zuordnen (wie auf der Vorseite gezeigt) können Sie sich eine eigene Startseite für den Browser mit Bild-Links zu Ihren Lieblingsseiten basteln, z.B.:

Wenn Sie eine solche Startseite gebastelt haben, so öffnen Sie diese mit Doppelklick. Dann klicken Sie im Browser auf Extras

und Internetoptionen

Auf der Karteikarte Allgemein sehen Sie welche Startseite bei Ihnen eingestellt ist. Um diese Startseite (die Sie vielleicht nicht aus den Augen verlieren wollen) zu erhalten, klicken Sie mit der rechten Maustaste auf das Feld neben Adresse. Wählen Sie kopieren und fügen Sie es z.B. in eine neue Word-Datei ein und speichern Sie diese ab, vielleicht unter dem Namen "Alte Startseite". Dann können Sie später diese Adresse wieder in das obige Adress-Feld zurückkopieren.
Nachdem Sie Ihre alte Startseite-Adresse konserviert haben klicken Sie auf der Karteikarte Allgemein auf Aktuelle Seite und dann auf Übernehmen und OK. Damit ist Ihre persönliche Startseite im Internet-Explorer festgelegt.

Wenn Sie mit dem Kurs weitermachen wollen, so stellen Sie das Projekt mit Ihrer persönlichen Startseite noch ein wenig zurück, und öffnen im Browser die page4.htm (die Sie auf Ihrem Computer abgespeichert haben) wieder. Wenn Sie jetzt die Breite des Browser-Fensters immer mehr verkleinern, werden Sie sehen, daß die sorgfältige Anordnung der Objekte durcheinandergeworfen wird.
Manchmal bewirkt auch die Änderung der Schriftgröße aus dem Ansicht-Menü

ein Durcheinander auf einer Web-Seite. Um im Internet bestimmte Design-Anordnungen auch bei unterschiedlichen Browser-Einstellungen zu wahren und um mehr Möglichkeiten der Anordnung zu gewinnen, verwendet man oft Tabellen.

Schließen Sie alle Browser- und Editor-Fenster und starten Sie das Word-Programm. Wählen Sie mittige Ausrichtung und klicken Sie aus dem Tabelle-Menü auf Tabelle einfügen

Nehmen Sie eine Tabelle mit 2 Spalten und 2 Reihen und klicken Sie OK.
Füllen Sie die Tabelle so aus:

1.Zeile links	1.Zeile rechts
2.Zeile links	2.Zeile rechts

Speichern Sie die Datei als page5.htm im Ordner w3 (vergessen Sie nicht den Dateityp HTML Document einzustellen). Schließen Sie Word und öffnen Sie page5.htm im Browser. Wählen Sie Quelltext anzeigen und verschieben Sie die beiden Fenster wieder so wie zuvor für die page4.htm mit Ihrem Editor-Fenster.
Die Tabelle wird mit den Tags <table> und </table> erzeugt, die einzelnen Zellen mit <td> und </td> wobei <tr> und </tr> die eingeschlossenen Zellen nebeneinander in einer Zeile zusammenfaßt. Da Sie die einzelnen Zellen beschriftet haben ist der Überblick nicht schwierig. Eine Anordnung mit Zeilenumbrüchen ergibt für den Body-Text:

<BODY>
<TABLE BORDER CELLSPACING=1 CELLPADDING=4 WIDTH=614>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
 1.Zeile links
</TD>
<TD WIDTH="50%" VALIGN="TOP">
 1.Zeile rechts
</TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
 2.Zeile links
</TD>
<TD WIDTH="50%" VALIGN="TOP">
 2.Zeile rechts
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

(Die rot markierten Zeilen sind nur zur besseren Übersicht hier farbig hervorgehoben, sie geben den Inhalt der jeweiligen Zellen wieder und können vielleicht bei Ihnen ein wenig anders aussehen)

Ersetzen Sie (Sie können die Texte in den Editor Kopieren)
1.Zeile links
durch
<IMG SRC="bild01.jpg" WIDTH=103 HEIGHT=168 >

Ersetzen Sie
1.Zeile rechts
durch
Strickmodelle von Gedifra

Ersetzen Sie
2.Zeile links
durch
 Edle Optik - selbst gestrickt

Ersetzen Sie
2.Zeile rechts
durch
<IMG SRC="../w1/bild02.jpg" WIDTH=94 HEIGHT=175>

Wählen Sie im Text-Editor "Speichern" und im Browser "Aktualisieren".
Jetzt können Sie durch WIDTH="500" die Breite der Tabelle anders festlegen und durch BORDER="0" die Tabelle für den Browser unsichtbar machen. Meist wählt man noch CELLSPACING=0 CELLPADDING=0
Sie können ja einmal andere Werte eingeben, aber aktivieren Sie hierzu wieder BORDER (z.B. BORDER="2") sonst sehen Sie nicht sehr viel. Und natürlich gibt es für Tabellen viele andere Formatierungseigenschaften. Wahrscheinlich können Sie inzwischen selbst auf Entdeckungsreise gehen.

Wenn Sie jetzt im Editor von page4.htm den ganzen "Body-Bereich" (also alles zwischen ) in eine Tabelle mit einer Zelle einschließen (also <table border="0" cellspacing="0" width="800"><td></td></table> ) so wird eine Änderung der Breite des Browser-Fensters Ihr Design nicht mehr durcheinanderwerfen (haben Sie an Speichern... im Editor und Aktualisieren im Browser gedacht?).