Website mit Tabellen

DeDaffid · 12 Mai 2009

Hallo miteinander,
ich mache momentan eine Website für unseren Sportverein. Ich habe eine mit FrontPage gemacht was mich aber gar nicht überzeugt hat.
Jetz versuche ich mich selbst dran.
Ich habe das Layout als Bild angehängt wie ich es mir vorstelle.
Meine Version sieht aber ganz anders aus deswegen bitte ich um eure Hilfe.
Ich komme nicht so recht mit valign und align zurecht.

Hier noch meine Version:

HTML:

  <body>

<table height="200" width="200" border="1" bordercolor="#000000" cellpadding="0" cellspacing="0">
 <tr>
  <td>Hier kommt ein Logo rein</td>
 </tr>
</table>

<table height="200" width="650" border="1" bordercolor="#000000" bgcolor="#FFFF00" cellpadding="0" cellspacing="0">
 <tr>
  <td>Hier kommt TSV Bobstadt 1926 e.V. als Grafik rein evtl mit einem link zur index.html</td>
 </tr>
</table>

<table height="550" width="200" border="1" bordercolor="#000000" bgcolor="#FFFF00" cellpadding="0" cellspacing="0">
 <tr>
  <td>Hier kommt eine nested Navigation rein</td>
 </tr>
</table>


<table height="550" width="650" border="1" bordercolor="#000000" bgcolor="#FFFF80" cellpadding="0" cellspacing="0">
 <tr>
  <td>Das ist der Teil der sich beim klicken der Links ändert</td>
 </tr>
</table>


<table width="850" border="1" bordercolor="#000000" bgcolor="#FFFF80" cellpadding="0" cellspacing="0">
 <tr>
  <td>text</td>
 </tr>
</table>

</body>
</html>

Vielen Dank
DeDaffid

tarik02 · 12 Mai 2009

Hi,
Und Willkommen im Forum!

Wenn ich mich nicht irre sieht das aus wie Tabellenlayout das ist genasuo schlimm wie Frontpage oder sogar Frames!
Am besten ist das du CSS lernst und die Seite dann mit Divs UND css realisierst. Mach bloß nicht den Fehler und fang gleich mit Tabellenlayout an.

Tabellen sind nicht für das Layout gedacht. HTML ist einzig und allein für die logische Auszeichnung des Textes. Und CSS ist dafür zuständig das Aussehen der Seite zubestimmen!

Mfg Tarik

fiedel · 12 Mai 2009

Hallo DeDaffid!

Das hat zwei Gründe:

du hast die Syntax von Tabellen nicht verstanden
du weißt nicht was CSS ist und dass HTML nicht für's Layout zuständig ist

Zu erstens:

Code:

<table>

   <tr><!-- dies öffnet die erste Zeile -->
     <td>Dies ist eine Spalte in der ersten Zeile</td>
     <td>Dies ist eine weitere Spalte in der ersten Zeile</td>
   </tr><!-- dies schließt die erste Zeile -->

   <tr><!-- dies öffnet die zweite Zeile -->
     <td>Dies ist eine Spalte in der zweiten Zeile</td>
     <td>Dies ist eine weitere Spalte in der zweiten Zeile</td>
   </tr><!-- dies schließt die zweite Zeile -->

</table>

Ach und nicht zu vergessen, das hier ist ein Kommentar: <!-- Kommentar -->

Zu zweitens:
Wie bereits erwähnt, ist HTML nicht fürs Layout zuständig, sondern zum auszeichnen von Elementen einer Homepage, z.B.

Überschriften mit <h1></h1> bis <h6></h6>
geordnete Listen mit <ol><li>Listenpunkt</li></ol>
ungeordnete Listen mit <ul><li>Listenpunkt</li></ul>
Absätze mit <p></p>

usw...

Was ich dir also empfehle: Lerne alle HTML-Tags und verstehe ihre Bedeutung!
Dann baust du anhand dieser deine Homepage auf, ohne dabei in geringster Weise an das Aussehen zu denken.
Wenn alles soweit fertig ist, kannst du mit CSS ein richtig schönes Design erstellen!

CSS-Hilfe: CSS 4 You - The Finest in Stylesheets
HTML lernen: HTML lernen und die eigene Homepage erstellen - HTML Kurs / Seminar
HTML Tags: HTML 4.01 / XHTML 1.0 Reference

Gruß,
fiedel

Edit: Oh, Tarik war schneller! ^^

_Thor_ · 12 Mai 2009

tarik02 schrieb:
Am besten ist das du CSS lernst und die Seite dann mit Divs UND css realisierst.

Noch besser wäre es, wenn du HTML nur für die Auszeichnung deines Inhaltes verwendet, Stichwort Semantik, und dann für das Layout CSS verwendest. div's sind dafür meistens nur sehr wenige nötig. Semantisch korrektes HTML ist viel sinnvoller.

DeDaffid · 12 Mai 2009

WOW erstmal danke für die sehr schnelle Hilfe.

@fiedel
Ok ich denke nicht ans Aussehen...aber Navigation kann/soll ich schon mit reinbauen oder nicht?

@all
Was meintihr mit Auszeichnen des Inhalts?

grüße
David

_Thor_ · 12 Mai 2009

DeDaffid schrieb:
Was meint ihr mit Auszeichnen des Inhalts?

Damit ist gemeint, dass du dem Inhalt auch die passende Bedeutung gibst, dafür gibt es jeweils die richtigen Tags.

Überschriften <h1> bis <h6>,
Listen <ul>, <ol> oder <dl>,
Menüs <ul>,
Text <p>,
tabellarische Daten <table>,
Zitate <blockquote>,
Adressen <address>,
wichtiges <em>,
sehr wichtiges <strong>

Für mehr ist HTML nämlich nicht zuständig, für das Aussehen ist alleine CSS zuständig.

DeDaffid · 12 Mai 2009

Sooo, fiedel, jetzt habe ich mal meine index.html gebaut ohne aufs Aussehen zu achten.
Wie muss ich jetzt weiter verfahren?
Diese inhalte die ich jetzt auf der Seite hab kann ich komplett mit CSS meinen bedürfnissen anpassen die ich ganz oben als Bild hochgeladen habe?

Ist meine index so weit gut?

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TSV Bobstadt 1926 e.V.</title>
<meta name="author" content="David Mach">
<meta name="publisher" content="David Mach">
<meta name="copyright" content="David Mach">
<meta name="description" content="Website des TSV Bobstadt mit aktuellen Fußballergebnissen der Mannschaften - Termine - Bilder uvm">
<meta name="keywords" content="TSV, Bobstadt, Fußball, Verein">
<meta name="page-topic" content="Sport">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">

</head>
<body>

<img src="../../../Users/David/Pictures/Wappen_Bobstadt.png">

<h1>TSV Bobstadt 1926 e.V.</h1>
<br>
Herzlich Willkommen auf der Website des TSV Bobstadt 1926 e.V. <br>
Auf dieser Seite finden Sie die aktuellen Fußballergebnisse der Mannschaften,<br>
desweiteren können Sie Termine verschiedener Veranstaltungen im Sportheim nachlesen, <br>
sich in unserem Gästebuch verewigen oder die verschieden Bilder anschauen. <br>
Viel Spaß!

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="Bilder.html">Bilder</a></li>
<ul id="menu_level_2">
<li><a href="oberhof.html">Oberhof 09</a></li>
<li><a href="AHLampertheim.html">AH-Turnier Lampertheim</a></li>
</ul>
</ul>
<ul>
<li><a href="Mannschaften.html">Mannschaften</a></li>
</ul>
<ul>
<ul id="menu_level_2">
     <li><a href="1Mannschaft">1. Mannschaft</a></li>
     <li><a href="Jugendabteilung.html">Jugendabteilung</a></li>
     <li><a href="AHAbteilung.html">AH-Abteilung</a></li>
</ul>
</ul>
<ul id="menu_level_1">
<li><a href="guestbook.html">Gästebuch</a></li>
<li><a href="about.html">Wir über Uns</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressunm.html">Impressum</a></li>
</ul>
</ul>

</body>
</html>

Grüße
David

XraYSoLo · 12 Mai 2009

valide ist sie zwar nicht, aber so passts schonmal. jetzt nur noch anständig formatieren...

Nils aka XraYSoLo

_Thor_ · 12 Mai 2009

Das liegt mit am HTML-Tag des Forums, das spinnt, nutze lieber den für PHP oder Code.

DeDaffid · 12 Mai 2009

So hier nochmal mit der PHP-Einstellung
Mit valide ist gemeint ob die Einrückungen korrekt sind oder?

Und nochmal ne Frage: Sollte ich die Formatierung über eine externe CSS-Datei machen oder direkt reinschreiben was ist einfacher für den Anfang?

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TSV Bobstadt 1926 e.V.</title>
<meta name="author" content="David Mach">
<meta name="publisher" content="David Mach">
<meta name="copyright" content="David Mach">
<meta name="description" content="Website des TSV Bobstadt mit aktuellen Fußballergebnissen der Mannschaften - Termine - Bilder uvm">
<meta name="keywords" content="TSV, Bobstadt, Fußball, Verein">
<meta name="page-topic" content="Sport">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">

</head>
<body>

<img src="../../../Users/David/Pictures/Wappen_Bobstadt.png">

<h1>TSV Bobstadt 1926 e.V.</h1>
<br>
Herzlich Willkommen auf der Website des TSV Bobstadt 1926 e.V. <br>
Auf dieser Seite finden Sie die aktuellen Fußballergebnisse der Mannschaften,<br>
desweiteren können Sie Termine verschiedener Veranstaltungen im Sportheim nachlesen, <br>
sich in unserem Gästebuch verewigen oder die verschieden Bilder anschauen. <br>
Viel Spaß!

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="Bilder.html">Bilder</a></li>
<ul id="menu_level_2">
<li><a href="oberhof.html">Oberhof 09</a></li>
<li><a href="AHLampertheim.html">AH-Turnier Lampertheim</a></li>
</ul>
</ul>
<ul>
<li><a href="Mannschaften.html">Mannschaften</a></li>
</ul>
<ul>
<ul id="menu_level_2">
     <li><a href="1Mannschaft">1. Mannschaft</a></li>
     <li><a href="Jugendabteilung.html">Jugendabteilung</a></li>
     <li><a href="AHAbteilung.html">AH-Abteilung</a></li>
</ul>
</ul>
<ul id="menu_level_1">
<li><a href="guestbook.html">Gästebuch</a></li>
<li><a href="about.html">Wir über Uns</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressunm.html">Impressum</a></li>
</ul>
</ul>

</body>
</html>

fiedel · 12 Mai 2009

Mit valide ist gemeint ob die Einrückungen korrekt sind oder?

Nein, Einrückungen können völlig willkürlich gesetzt werden! Valide bedeutet, dass das HTML-Dokument der Norm des W3C entspricht, welche du ganz am Anfang festgelegt hast (in deinem Fall: HTML 4.01 Transitional).
Ob dein Dokument valide ist, kannst du ganz einfach testen: The W3C Markup Validation Service
(es gibt aber auch ein Firefox Addon, mit dem man sich dann noch leichter tut, da die Validität und kleine Hilfen gleich beim Betrachten des Quellcodes angezeigt werden: https://addons.mozilla.org/de/firefox/addon/249)

Und nochmal ne Frage: Sollte ich die Formatierung über eine externe CSS-Datei machen oder direkt reinschreiben was ist einfacher für den Anfang?

Beides ist gleich einfach, aber es ist empfehlenswert die CSS-Eigenschaften in eine extra Datei auszulagern, da man sich später bei Änderungen dadurch leichter tut, weil man dann nur in einer Datei herumschreiben muss und nicht jedes HTML Dokument nochmal abändern muss!

Gruß,
fiedel

Efchen · 13 Mai 2009

DeDaffid schrieb:
Ist meine index so weit gut?

Gut für einen Anfänger, aber noch verbesserungswürdig.

Code:

<h1>TSV Bobstadt 1926 e.V.</h1>
<br>
Herzlich Willkommen auf der Website des TSV Bobstadt 1926 e.V. <br>

Du solltest Textabsätze immer in <p>...</p> einpacken. <br> sollte sparsam eingesetzt werden, da gibt es Diskussionen, ob man das überhaupt benutzen darf. Tatsache ist, meistens baucht man es nicht. Außer vielleicht bei Adressen, Gedichten, o.ä.

Dein Menü ist gut gedacht, aber an einer Stelle syntaktisch falsch:

Code:

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="Bilder.html">Bilder</a></li>
<ul id="menu_level_2">

Ein <ul> darf nicht innerhalb eines <ul> vorkommen, wohl aber innerhalb eines <li>. Also verschiebe Dein ul#menu_level_2 entsprechend.

Code:

<ul>
<li><a href="Mannschaften.html">Mannschaften</a></li>
</ul>

Alles, was zum Menü dazugehört, würde ich sinnvollerweise besser in einer Liste machen.

Gruß,
-Efchen

DeDaffid · 13 Mai 2009

So ich habe alle Fehler korrigiert.
Ist das so gemeint beid er Liste wie ich es gemacht habe, Efchen?
Jetzt habe ich nämlich die Aufzählungspunkte alle in einer Reihe was ich eigentlich nicht will.

index.html

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TSV Bobstadt 1926 e.V.</title>
<meta name="author" content="David Mach">
<meta name="publisher" content="David Mach">
<meta name="copyright" content="David Mach">
<meta name="description" content="Website des TSV Bobstadt mit aktuellen Fußballergebnissen der Mannschaften - Termine - Bilder uvm">
<meta name="keywords" content="TSV, Bobstadt, Fußball, Verein">
<meta name="page-topic" content="Sport">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<img src="../../../Users/David/Pictures/Wappen_Bobstadt.png" width="224" height="257" alt="Wappen von Bobstadt">

<h1>TSV Bobstadt 1926 e.V.</h1>
<p>
Herzlich Willkommen auf der Website des TSV Bobstadt 1926 e.V.
Auf dieser Seite finden Sie die aktuellen Fußballergebnisse der Mannschaften,
desweiteren können Sie Termine verschiedener Veranstaltungen im Sportheim nachlesen,
sich in unserem Gästebuch verewigen oder die verschieden Bilder anschauen.</p>
<p>Viel Spaß!</p>
<div id="navi">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="Bilder.html">Bilder</a></li>

     <li><ul id="menu_level_2"><a href="oberhof.html">Oberhof 09</a></ul></li>
     <li><ul id="menu_level_2"></a><a href="AHLampertheim.html">AH-Turnier Lampertheim</a></ul></li>

<li><a href="Mannschaften.html">Mannschaften</a></li>
     <li><ul id="menu_level_2"><a href="1Mannschaft">1. Mannschaft</a></ul></li>
     <li><ul id="menu_level_2"><a href="Jugendabteilung.html">Jugendabteilung</a></ul></li>
     <li><ul id="menu_level_2"<a href="AHAbteilung.html">AH-Abteilung</a></ul></li>

<li><a href="guestbook.html">Gästebuch</a></li>
<li><a href="about.html">Wir über Uns</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressunm.html">Impressum</a></li>
</ul>
</div>
</body>
</html>

mfg
David

Efchen · 14 Mai 2009

DeDaffid schrieb:
Jetzt habe ich nämlich die Aufzählungspunkte alle in einer Reihe was ich eigentlich nicht will.

Das hat aber nichts mit HTML zu tun. HTML ist nur für die logische Auszeichnung da, d.h. mit HTML legst Du fest, dass es sich um eine Liste (Menü) handelt. Wie das am Ende aussehen soll, legst Du mit CSS fest.

Code:

<img src="../../../Users/David/Pictures/Wappen_Bobstadt.png" width="224" height="257" alt="Wappen von Bobstadt">

Hier fehlt auf jeden Fall noch etwas, was beschreibt, wie das Image zu verstehen ist. Falls es eine Überschrift ist, dann mit <h1> (oder einer anderen Überschrift passender Ordnung), wenn es nur Zierde ist, sollte es als Hintergrundbild eingebunden werden. Als Wappen vermute ich eher letzteres.

Code:

<div id="navi">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="Bilder.html">Bilder</a></li>

Bis dahin okay, bis auf das div#navi, das ist überflüssig. Du Gruppierst hier ja nicht mehrere Elemente.

Code:

     <li><ul id="menu_level_2"><a href="oberhof.html">Oberhof 09</a></ul></li>
     <li><ul id="menu_level_2"></a><a href="AHLampertheim.html">AH-Turnier Lampertheim</a></ul></li>

Das ist vermutlich aber nicht so gemeint. Deine #menu_level_2 (eine ID darf übrigens nur einmal vorkommen!) sollen doch sicher Unterkategorien von "Bilder" sein, oder? Du hast eine solche Beziehung aber nicht hergestellt. Besser so:

Code:

<li><a href="Bilder.html">Bilder</a>
    <ul>
      <li><a href="oberhof.html">Oberhof 09</a></li>
      <li><a href="AHLampertheim.html">AH-Turnier Lampertheim</a></li>
    </ul>
</li>

Damit stellst Du die Liste der zweiten Ebene als zum Listenelement mit dem Link "Bilder" gehörig ein.
Vielleicht fällt Dir auf, dass ich die ID (die hier eigentlich eine Klasse sein müsste) ganz weggelassen habe, weil Du die zweite Ebene in CSS auch so ansprechen kannst:

Code:

ul#navi ul {
    ...
}

(Hier hab ich gleich das div#navi weggelassen und stattdessen die Liste so benannt).

Das selbe gilt natürlich dann auch für die andere Stelle mit der zweiten Menüebene.

DeDaffid · 14 Mai 2009

1. Ok
2. Ich hab gesucht bin fündig geworden aber es funktioniert nicht so wie ich das will. Siehe CSS-Datei EDIT: HAT DOCH GEKLAPPT
3. div id="navi" hab ich gemacht damit ich dieses Menü später in CSS formatiern kann oder ist das so nicht richtig?
4. Jup sollen unterkategorien darstellen.
5. DAnke :) ich bin einfach nicht auf einen grünen zweig gekommen :) Jetz ist genauso wie ich es wollte :)
6.soll ich div id="navi" durch ul#navi ul{...} erstzen? Habi ch gemacht klappte aber nicht.

Vielen Vielen Dank
David

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TSV Bobstadt 1926 e.V.</title>
<meta name="author" content="David Mach">
<meta name="publisher" content="David Mach">
<meta name="copyright" content="David Mach">
<meta name="description" content="Website des TSV Bobstadt mit aktuellen Fußballergebnissen der Mannschaften - Termine - Bilder uvm">
<meta name="keywords" content="TSV, Bobstadt, Fußball, Verein">
<meta name="page-topic" content="Sport">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<img class="Wappen" src="Wappen_Bobstadt.jpg" width="224" height="257" alt="Wappen von Bobstadt">

<h1>TSV Bobstadt 1926 e.V.</h1>
<p>
Herzlich Willkommen auf der Website des TSV Bobstadt 1926 e.V.
Auf dieser Seite finden Sie die aktuellen Fußballergebnisse der Mannschaften,
desweiteren können Sie Termine verschiedener Veranstaltungen im Sportheim nachlesen,
sich in unserem Gästebuch verewigen oder die verschieden Bilder anschauen.</p>
<p>Viel Spaß!</p>
<div id="navi">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Veranstaltungen.html">Veranstaltungen</a></li>
<li><a href="Bilder.html">Bilder</a>
     <ul>
       <li><a href="oberhof.html">Oberhof 09</a></li>
       <li><a href="AHLampertheim.html">AH-Turnier Lampertheim</a></li>
     </ul>
</li>
<li><a href="Mannschaften.html">Mannschaften</a>
     <ul>
       <li><a href="1Mannschaft">1. Mannschaft</a></li>
       <li><a href="Jugendabteilung.html">Jugendabteilung</a></li>
       <li><a href="AHAbteilung.html">AH-Abteilung</a></li>
     </ul>
</li>
<li><a href="guestbook.html">Gästebuch</a></li>
<li><a href="about.html">Wir über Uns</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressunm.html">Impressum</a></li>
</ul>
</div>
</body>
</html>

Die CSS-Datei:

PHP:

#Wappen  {
         background-image:url(Wappen_Bobstadt.jpg);
         background-repeat:no-repeat;
         }


#navi    {
         background:yellow;
         border:2px dotted black;
         float:left;
         }

Efchen · 14 Mai 2009

DeDaffid schrieb:
3. div id="navi" hab ich gemacht damit ich dieses Menü später in CSS formatiern kann oder ist das so nicht richtig?

Was spricht dagegen, die Liste selbst zu formatieren? Wer hat das Gerücht in die Welt gesetzt, zur Formatierung mit CSS bräuche man ein div? div und ul sind beides Block-Elemente, sie verhalten sich genau gleich und können mit den selben Eigenschaften formatiert werden.

6.soll ich div id="navi" durch ul#navi ul{...} erstzen? Habi ch gemacht klappte aber nicht.

Nein. Du sollst <div id="navi"> ersatzlos streichen und stattdessen die ul mit der id belegen. Und "ul#navi ul" bezieht sich auf alle <ul>, die innerhalb von der ul#navi stehen. Also all das, was Du vorher mit dem level2 bezeichnet hattest.

DeDaffid · 14 Mai 2009

Jiha
Jetzt versteh ich das mit der Liste.
Einwandfrei.

Und das Layout kann ich dann mit <div #....> machen oder?

_Thor_ · 14 Mai 2009

DeDaffid schrieb:
Und das Layout kann ich dann mit <div #....> machen oder?

Nein, das Layout machst du mit CSS indem du deiner Liste die Eigenschaften gibst, dafür brauchst du kein <div>.

DeDaffid · 15 Mai 2009

Aber ich muss doch einen Bereich festlegen den ich formatieren will, oder?

_Thor_ · 15 Mai 2009

Ja, aber du willst doch die Liste formatieren, oder?

Website mit Tabellen

Neues Mitglied

Anhänge

Mitglied

Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Senior HTML'ler

Aktives Mitglied

Neues Mitglied

Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Efchen

Guest

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied