Ordnung im Quelltext

Das rechts ist der Quelltext der Homepage, die ich von Swissonline erhalten habe.
Das hat ja anscheinend gar nichts mit dem Grundgerüst einer HTML-Seite zu tun. Hier kann ich doch nichts ändern - ich wüsste nicht, wo ich da etwas hineinschreiben könnte!
Was ist hier falsch?

<?xml version="1.0" encoding="iso-8859-1"?><html xmlns:exsl="http://exslt.org/common" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/><title>Sacha</title><meta name="generator" content="BBEdit 6.5.2"/></head><body><table border="0"><tr><td width="50%"/><td align="center" valign="top" width="50%"><h1>Homepage von Sacha</h1><a href="http://homepage.hispeed.ch/Sacha">http://homepage.hispeed.ch/Sacha</a>. <a href="http://homepage.hispeed.ch/Sacha/sendme.html">E-mail</a> <a href="http://homepage.hispeed.ch/Sacha/guestbook.html">Guestbook</a> <img src="cgi-bin/counter.pl"/>|<a href="http://www.hispeed.ch" target="_top">Zurück zur hispeed Homepage</a>| <a href="http://homepage.hispeed.ch/_index/index_A_de.html" target="_top">Private Homepage-Index</a>| </td></tr></table></body></html>

Oben herrscht ein Chaos! Dieser Code wurde nicht von einem Menschen, sondern von einem Generator geschrieben. Eine Maschine kann nicht verstehen, wie der Quelltext optisch übersichtlich erscheinen sollte.
Der Quelltext funktioniert natürlich auch so. Sie können durchaus den Quelltext als riesigen Bandwurm schreiben, das hat auf die Darstellung im Browser keine Auswirkung.

Sinnvoller ist es hingegen, den Quelltext optisch übersichtlich darzustellen. Ein Zeilenumbruch im Quelltext wirkt sich überhaupt nicht auf die Ansicht im Browser aus. Ebenso bewirken mehrere Leerschläge hintereinander nur einen Leerschlag und auch der Tabulator wird vom Browser ignoriert.

Im obigen Beispiel haben Sie aber keine Übersicht mehr; da fällt es wirklich schwer, sich zurecht zu finden.
Rechts sehen Sie nun den selben Quelltext - nur dass diesmal eine Ordnung herrscht. Die Elemente des Grundgerüstes habe ich markiert, damit Sie sehen, dass auch diese Seite ganz normal aufgebaut ist.

<?xml version="1.0" encoding="iso-8859-1"?>



<html xmlns:exsl="http://exslt.org/common" lang="en">


<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

<title>Sacha</title>

<meta name="generator" content="BBEdit 6.5.2"/>

</head>


<body>


<table border="0">

<tr>

<td width="50%"/>

<td align="center" valign="top" width="50%">



<h1><font face="Arial" color="#111111">Homepage von Sacha</font></h1>



<p>

<font size="-1" face="Arial"/><a href="http://homepage.hispeed.ch/Sacha">

<font size="-1" face="Arial">http://homepage.hispeed.ch/Sacha</font></a>

<font size="-1" face="Arial">.<br/><br/></font>

<a href="http://homepage.hispeed.ch/Sacha/sendme.html">

<font size="-1" face="Arial">E-mail</font></a>

<font size="-1" face="Arial"><br/></font>

<a href="http://homepage.hispeed.ch/Sacha/guestbook.html">

<font size="-1" face="Arial">Guestbook</font></a>

</p>



<p>

<font size="-1" face="Arial">

<img src="cgi-bin/counter.pl"/></font>

</p>




<p>

<font size="-1" face="Arial"><font size="-1" face="Arial">|</font>

<a href="http://www.hispeed.ch" target="_top">

<font size="-1" face="Arial">Zurück zur hispeed Homepage</font></a>

<font size="-1" face="Arial">|</font>

<a href="http://homepage.hispeed.ch/_index/index_A_de.html" target="_top">

<font size="-1" face="Arial">Private Homepage-Index</font>

</a><font size="-1" face="Arial">| <br/></font>

</font>

</p>


</td>

</tr>

</table>

</body>
</html>

Mir war auch das noch zu unübersichtlich.
In jeder Zeile stand wieder die selbe Schrift-Definition "Arial" etc.
Ich sehe nicht ein, warum die Schrift-Art "Arial" sein soll. Das macht hier keinen Sinn, solange diese Index-Seite nicht Teil eines ganzen Projektes ist. Die "Font-Befehle" habe ich alle entfernt.
Die Tabelle habe ich nach meinen Wünschen angepasst. Ganze Breite ist nun 90 %, die linke Spalte 25 % und die rechte Spalte 75 %.
Der Link auf mein Pinguin-Logo zeigt nun den Pinguin im linken Tabellenfeld, das vorher noch leer war.
Die Dokumenttyp-Angabe habe ich angepasst (das sind die ersten beiden Zeilen), ebenso den HTML-Tag.

So sieht es aus

Die Seite sieht so fast genau gleich aus, wie am Anfang, jedoch ist der Quelltext viel kleiner und erst noch übersichtlich.

Es ist leicht zu erkennen, dass meine Start-Seite genau so entstanden ist.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



<html>


<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>

<title>Sacha's Homepage</title>

</head>


<body>


<table align="center" border="0" width="90%">
<tr>
<td align="center" valign="top" width="25%">

<img src="pic/pinguin1.gif"

alt="Pinguin-Logo" height=235 width=189>

</td>


<td align="center" valign="top" width="75%">


<h1>Homepage von Sacha</h1>


<p>

<a href="http://homepage.hispeed.ch/Sacha">
http://homepage.hispeed.ch/Sacha</a><br>

<a href="http://homepage.hispeed.ch/Sacha/sendme.html">

E-mail</a><br>

<a href="http://homepage.hispeed.ch/Sacha/guestbook.html">
Guestbook</a>

</p>



<p>

<img src="cgi-bin/counter.pl"/>

</p>




<p>

<a href="http://www.hispeed.ch" target="_top">

Zurück zur hispeed Homepage</a><br> 

<a href="http://homepage.hispeed.ch/_index/index_A_de.html"
target="_top">Private Homepage-Index</a>

</p>



</td>

</tr>

</table>


</body>

</html>

Zurück zur Startseite