Guten Morgen,
aber kannst du mir dann noch sagen was ich dann soll lernen wenn nicht mit Tabellen?
auf die Frage antworte ich Dir gerne!
Ich bin jetzt im 1.Lehrjahr Informatiker und in einem unserer Module haben wir Html und CSS. Natürlich können wir dabei nicht alles anschauen da wir nur 2h pro woche haben. Und für das Layout einer Website hat uns unser Lehrer die Variante vorgeschlagen mit tabellen (<tr>,<td>,...)zu arbeiten oder eben wie oben erwähnt mit DIV-Tags alles anzuordnen.
Sowas zu hören macht mich alles von traurig über verzweifelt bis hin zu sauer und rasend :-)
Aber ich muss gestehen, dass es bei mir ähnlich war. Ich habe von 92-95 DV-Kaufmann gelernt und in der Berufschule hat man uns Festplattenstapel mit einem Durchmesser von 50cm gezeigt und uns an 286ern arbeiten lassen. Das war mindestens genauso lächerlich.
Aber zurück zu Dir. Wenn Ihr Website-Entwicklung so beigebracht bekommt, dann hast Du entweder nicht zugehört oder der Lehrer ist völlig inkompetent und macht HTML/CSS nur so als Hobby nebenbei ohne zu wissen, was er tut. So ähnlich wie bei mir in der Schule Ende der 80er...einer von drei Informatiklehrern wusste, was er sagt, die anderen haben sich von den Schülern berichtigen lassen.
wäre froh wenn du mir weiter helfen kann um die website zu optimieren.
Das Problem ist, wenn das die Dir bekannten Vorgehensweisen sind (Tabellen oder divs), dann muss ich ganz von vorne anfangen. Von "optimieren" kann hier gar nicht die Rede sein, weil Dir wahrscheinlich noch nie jemand richtig sagen konnte, wie es denn wirklich funktioniert. Und das ist nicht gegen Dich gerichtet, sondern gegen Deine(n) Lehrer.
Also ich fang mal an:
Zunächst hätte Dir Dein Lehrer sagen müssen, was HTML überhaupt ist, und wozu es benutzt wird. HTML ist eine Strukturbeschreibungssprache und wird dafür verwendet, den Inhalt Deiner Website logisch (semantisch) auszuzeichnen. Eine Überschrift wird mit <h1> ausgezeichnet, ein Textabsatz mit <p>, eine Adresse mit <address>, ein wichtiger Textabschnitt mit <em> oder <strong> (je nach Wichtigkeit) und tabellarische Daten mit <table>.
Bei der Auszeichnung mit HTML kommt es in keiner Weise darauf an, wie das Ganze in Deinem Browser dargestellt wird. Man benutzt <h1> niemals darum, weil man einen Text größer und fett darstellen will, sondern nur, um eine Überschrift erster Ordnung zu kennzeichnen. Man benutzt <em> nicht, weil es im eigenen Browser kursiv dargestellt wird, sondern um etwas zu betonen. Man benutzt <b>, <i> oder <u> gar nicht, weil diese Tags keine semantische Bedeutung haben. Man benutzt Tabellen auch nicht, weil man damit Dinge auf der Seite anordnen kann, sondern nur, um tabellarische Daten auszuzeichnen.
HTML ist die Basis für alle Webseiten. HTML ist in allen Browsern gleich. Da macht keiner Unterschiede. HTML wird von allen Web-Clients gleichermaßen verstanden. Es ist wichtig, zu verstehen, dass HTML nichts damit zu tun hat, wie etwas visualisiert wird, denn es gibt Clients, die visualisieren nichts. Suchmaschinen zum Beispiel. Denen ist es egal, ob ein Text fett ist oder nicht. Ob er fett ist, daraus können sie keine Schlüsse ziehen über die Bedeutung des Textes. Aber sie wissen, dass ein Text, der mit <strong> ausgezeichnet wurde, ungeheuer wichtig ist. Ob der dann am Bildschirm in rot oder fett oder in einem anderen Zeichensatz dargestellt wird, ist für die Suchmaschine nicht von Belang. Genauso bei Vorlesebrowsern für Sehbehinderte und Blinde. Stoßen sie auf <b> wissen sie damit nichts anzufangen. Stoßen sie auf <strong> betont der Client das beim Vorlesen. Der gewünschte Effekt wird also erreicht. Und bei Tabellen geht ein Vorlesebrowser her und liest die zeilenweise vor, wie man es bei einer Tabelle eben macht. Und wenn Du Dir nun eine Tabelle zu Layoutzwecken vorstellst, wo am besten noch mehrere Tabellen ineinanders verschachtelt sind, mit vielen colspans und rowspans, da wird völliger Kauderwelsch vorgelesen. Und genauso sieht das dann auch eine Suchmaschine.
Mit semantisch korrektem HTML erreicht man, dass eine Webseite in jedem Client, den es auf dieser Welt gibt oder geben wird, einwandfrei nutzbar ist. Das nennt sich Barrierefreiheit und ist in der heutigen Zeit sehr wichtig und für staatlich öffentliche Websites sogar vorgeschrieben.
Die andere Seite ist die Darstellung. Dafür ist CSS verantwortlich. Und nur CSS. Darstellung, Layout und Design. Hier definiere ich, wie ein mit <strong> ausgezeichneter Text auszusehen hat. Hier definiere ich das Layout, die Positionierung der Elemente. Hier definiere ich Hintergrundgrafiken, Rahmen und was es sonst noch alles gibt. Hier definiere ich auch, wie tabellarische Daten, die mit <table> ausgezeichnet wurden, dargestellt werden sollen.
CSS geht sogar noch einen Schritt weiter, man kann das "Aussehen" für verschiedene Medientypen definieren. In einem CSS-Stylesheet kann man das Aussehen am Bildschirm beschreiben, in einem anderen kann man das Layout für den Druck bestimmen (z.B. um so unerwünschte Dinge wie Buttons, auf denen steht "Hier klicken, um die Seite auszudrucken", auszublenden, denn was sollen die auf dem Papier?), und man kann Stylesheets für Handys/PDAs definieren, auch für Vorlesebrowser.
Und das Gute an dieser "Trennung von Inhalt und Layout" ist, dass die Seite trotzdem in allen Clients dieser Welt funktioniert, weil die Browser, die kein CSS verstehen, zeigen den Inhalt dann einfach so an, wie es ihnen gefällt. Aber sie zeigen es an. Und man kann die Seite nutzen.
Jetzt nochmal zurück zur Aussage "Layout mit divs". Auch das ist Quatsch. Das Tag <div> hat keine weitere Bedeutung, um Inhalt auszuzeichnen. Es ist ein allgemeines Block-Element, das eigentlich nur dazu benutzt wird, mehrere Elemente mit dem Ziel gleicher Formatierung zusammenzufassen. Wer aber hergeht, und erstmal ohne Inhalt ein Layout auf Basis von divs zusammenschustert, der hat den Sinn von HTML noch nicht verstanden und macht sich doppelte Arbeit. Wenn dann das Layout nämlich steht, und der Inhalt dazu kommt, werden semantisch sinnvolle Tags hinzu gefügt. Die divs bleiben aber meistens stehen und es entsteht am Ende eine div-Suppe, die von HTML-Seite gesehen, nicht sinnvoller ist, als Tabellen zu Layoutzwecken zu missbrauchen. Man entwirft ein Layout in CSS. <div> ist aber ein HTML-Tag. Damit wird kein Layout gemacht.
Noch ein Wort zum Tabellenmissbrauch:
Dass man Tabellen dazu zweckentfremdet hat, damit Layout zu machen, stammt aus dem letzten Jahrtausend, als es nämlich noch kein CSS gab, und man anders gar keine Möglichkeiten hat, ein ansehnliches Layout zu gestalten. Das Ganze war also einfach nur ein Hack. Doch die Zeit ist seit 10 Jahren vorbei, den Hack weiterhin zu verwenden, ist völlig überflüssig. Heute kann man es richtig machen. Überall anders macht man Sachen doch auch lieber richtig, als irgendwie drumrum zu wurschteln. Warum nicht auch hier? Im Sinne der Nutzer.
Dazu noch ein interessanter Link (mit schönem Gruß an Deinen Lehrer):
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten
Ich hoffe, ich habe Dir einen Einblick verschaffen können, den Dir Dein Lehrer eigentlich hätte geben müssen. Vielleicht solltest Du ihm meine Spendenkontonummer geben, damit ich etwas von seinem Gehalt abbekomme, weil ich seine Arbeit mache :-D
Bei weiteren Fragen darfst Du mich gern löchern!
Viele Grüße,
-Efchen
