Projekt: Bilder aufnehmen

Als nächsten Schritt integrieren wir das Logo.

In das bisherige Grunddesign kommt das Logo ganz oben platziert:

Wenn Sie Befehle nicht mehr auswendig kennen (was vorkommen kann) - kann unter Einsteiger -> Grafiken 1 nachgeschlagen werden.

<table height="100%" cellpadding="10" border="1" >

  <tr>

    <td width="175" bgcolor="yellow" >

      <!--  Logo -->

      <img src="schach_logo.jpg"
      width="175" height="137" border="0" alt="">

      Adresse <br>
      <br>

      <!--  Steuerung -->

      <a href="index.htm"> Startseite </a>
      <br>
      <a href="termine.htm"> Termine  </a>
      <br>

      <a href="mitglieder_neue.htm"> mitspielen?  </a>
      <br>
      <a href="lageplan.htm"> Lageplan  </a>
      <br>

      <a href="kontakt.htm"> Kontakt  </a>
      <br>
      <a href="impressum.htm"> Impressum  </a>

    </td>

    <td width="*" >
      Inhalte
    </td>

  </tr>

</table>

Hinweis: Nach dem Tabellen-End-TAG folgt sofort ohne Leerzeichen das Bild. Somit wird das Bild ganz oben in der Tabelle dargestellt.

Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser

Damit Sie mit demselben Bild probieren können, klicken Sie in der Browser-Ansicht auf dem Bild mit der rechten Maustaste und wählen aus dem Menü "Bild speichern unter..." und speichern es auf Ihre Festplatte in das entsprechende Verzeichnis, in dem Sie Ihre HTML-Daten lagern.

Nun kommt noch die Anschrift des Vereins dazu:

<table height="100%" cellpadding="0" border="1" >

  <tr>

    <td valign="top" width="175" bgcolor="yellow" >

      <!--  Logo -->

      <img src="schach_logo.jpg"
      width="175" height="137" border="0" alt="">

      <!--  Adresse -->
      
      Patt e.V. <br>
      Springer-Weg 12 <br>
      77777 Turmstadt <br>

      Tel. 555-555-0 <br>
      <br>

      <!--  Steuerung -->

      <a href="index.htm"> Startseite  </a>

      <br>
      <a href="termine.htm"> Termine  </a>
      <br>
      <a href="mitglieder_neue.htm"> mitspielen?  </a>

      <br>
      <a href="lageplan.htm"> Lageplan  </a>
      <br>
      <a href="kontakt.htm"> Kontakt  </a>

      <br>
      <a href="impressum.htm"> Impressum  </a>

    </td>

    <td width="*" >

      Inhalte
    </td>

  </tr>

</table>

Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser

Im nächsten Schritt integrieren wir Text.