Suche im Forum:
Suchen


Autor Nachricht
Beitrag01.08.2007 um 19:24 (UTC)    
Titel: Propleme Anleitung wie ihr den Fehler finden könnt...

Sauberer HTML-Code
Jan Schmager (www.schmager.de), 21.9.2000

Was Webmaster auf ihre Server packen, ist manchmal schon recht merkwürdig. Meine Aussage bezieht sich in diesem Fall auf den Html-Code. Bei näherem Hinsehen entpuppen sich die Seiten als wahre Code-Müllhalden.

Im folgendem geht es nun um nicht existierende Befehle, überflüssige und falsch angewandte Tags. Anhand von Beispielen und Erklärungen wird unnötiger Code beschrieben. Nach dem Lesen dieses Artikels sollten interessierte Html-Programmierer in der Lage sein, sinnlosen Code zu erkennen und entsprechend zu eliminieren.

Inhalt
1. überflüssige Meta-Angaben
2. falsche / sinnlose Attribute
3. sinnlose Tags
4. sonstiger Unfug

1. überflüssige Meta-Angaben
1.1. Editorenangabe

Codebeispiele:

<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="GENERATOR" content="Mozilla/4.5 [de] (Win95; I) [Netscape]">

Erklärung:
Codezeilen dieser Art können sofort problemlos gelöscht werden. Nur ein kleines Rechenbeispiel: Wir nehmen die erste Meta-Angabe für Frontpage 3. Diese Angabe verschwendet bei ca. 50 Html-Seiten 3 kB-Webspace. Für eine Million Html-Dokumente mit dieser Meta-Angabe erhöht sich der Webspace-Bedarf um ca. 60 MB.
1.2. ein Robots zuviel

Codebeispiel:

..
<meta name="robots" content="index">
<meta name="robots" content="nofollow">
..

Erklärung:
Dieses Beispiel entstammt einer Header-Definition. Hier ist alles soweit in Ordnung. Trotzdem geht es viel einfacher, sinnvoller und platzsparender. Eine einzige Meta-Angabe ersetzt die beiden Zeilen problemlos:

<meta name="robots" content="index, nofollow">

So programmiert man effektiv! Weitere Informationen über den Html-Header und wie man ihn perfekt in den Griff bekommt, gibt es in einem Extra-Artikel von mir.
1.3. Meta-Schwachsinn

Codebeispiele:

<meta name="ProgId" content="FrontPage.Editor.Document">
<meta NAME="Template" CONTENT="C:\PROGRAMME\MICROSOFT OFFICE\OFFICE\html.dot">
<meta name="Microsoft Border" content="none">
<META NAME="resource-type" CONTENT="document">

Erklärung:
Diese Meta-Angaben haben überhaupt keine Relevanz. Der Aufbau der Seiten wird durch sie nicht beschleunigt. Suchmaschinen-Roboter verwerten diese Angaben in keiner Weise. Solche Code-Zeilen dürfen bedenkenlos gelöscht werden.
[Index]

2. falsche / sinnlose Attribute
2.1. Width-Angabe

Codebeispiel:

<table width="101%">

Erklärung:
Bei diesem Beispiel ist die Festlegung der Breite (width) falsch. Diese kann mit einer Zahl oder einem Prozentwert definiert werden. Der prozentuale Wert sollte möglichst zwischen 1 % und 100 % liegen. (Multilength bleibt hier mal unberücksichtigt.)
2.2. Ausrichtung mit Align / Valign

Codebeispiel:

<td align="middle">

Erklärung:
Hier wurde eine falscher Wert für das Attribut verwendet. Erlaubt ist
- bei ALIGN: "center, char, justify, left, right"
- bei VALIGN: "baseline, bottom, middle, top".

Der Syntax des gezeigten Beispiels ist daher totaler Müll und unnötiger Code-Ballast. Entweder wird der Attribut-Wert korrigiert oder man entfernt das align="middle".
2.3. unnötige Formatierung

Codebeispiele:

<div align="left">
<p align="left">
<td align="left"> ......

Erklärung:
Mit der Angabe align="left" werden Elemente nach links ausgerichtet. Das ist aber völlig überflüssig, da dies bereits die Voreinstellung von HTML ist. Diese Formatierungen können gelöscht werden.

Ähnlich verhält es sich mit der vertikalen Ausrichtung von Elementen in Tabellen, für die die Voreinstellung mittig (middle) ist. Folgendes Beispiel soll dies kurz verdeutlichen:

[1] <td>
[2] <td valign="middle">

Codezeile 1 bewirkt genauso viel wie Zeile 2. Daher ist das "valign=middle" überflüssig und kann entfernt werden.
2.4. Trennlinienbreite

Codebeispiel:

<hr width="100%">

Erklärung:
Die Angabe der Breite (width) ist hier sinnlos. Trennlinien gehen, wenn nicht anders festgelegt, immer über die ganze Breite des Anzeigenfensters. Die Width-Angabe kann entfernt werden.
2.5. NATURALSIZEFLAG

Codebeispiel:

<img SRC="natur.gif" WIDTH=10 HEIGHT=50 BORDER=0 ALT="test" NATURALSIZEFLAG=3>

Erklärung:
Dieses wunderbare Attribut verdanken wir der Firma Adobe. Durch die Editoren 'Sitemill' und 'Pagemill' wird der/das/die NATURALSIZEFLAG in Bildangaben eingefügt. Der Variablenwert (0-3) gibt Auskunft über mögliche Größenänderungen des Bildes.

Okay, weil es so schön ist noch mal ein kleines Rechenbeispiel : Wir nehmen wieder 1 Million Html-Dokumente. Jede dieser Seiten enthält 5 Bilder, also auch 5 mal das NATURAL-dings. Ergibt ca. 87 MB Code-Ballast, der ausschließlich von dem entsprechenden Editor interpretiert wird ....

Es handelt sich bei Natural-Baby übrigens in keiner Weise um einen Html-Standard. Dieses Attribut kann / muss sofort gelöscht werden.
[Index]



3. sinnlose Tags
3.1. Verweis-sensitive Grafiken

Codebeispiel:

<MAP name="Beispiel">
<AREA shape=rect coords="10,40,100,150" href="bsp.html"></AREA>
</MAP>

Erklärung:
In diesem Fall ist der "schließende Tag" für den Area-Befehl überflüssig. In der "W3C Recommendation" für Html 4.0 wird ausdrücklich darauf hingewiesen, dass der "closing tag" verboten ist. Hier muss / kann </AREA> entfernt werden.
3.2. doppelte Zentrierung

Codebeispiel:

..
<body>
<div align="center"><center>
..
..
</center></div>
</body>
</html>

Erklärung:
Hier wird der Inhalt im Body-Bereich gleich zweimal zentriert. Rein theoretisch kann also der DIV- oder der CENTER-Befehl gelöscht werden. Aufgrund eventuell auftretender Probleme mit Netscape 3 (siehe HTML-Überraschungen) wäre es sinnvoll, den kompletten DIV-Tag zu löschen.

Zwar steht der <CENTER>-Befehl auf der Abschuß-Liste des W3C, i.d.R. interpretieren alle gängigen Browser den CENTER-Tag problemlos.
3.3. No Noframes

Codebeispiel:

..
<noframes>
<body>
</body>
</noframes>
..

Erklärung:
Dieses beeindruckende Code-Beispiel einer geframeten Website zeigt mal wieder, wie problematisch der Einsatz von Frames überhaupt sein kann. Der Grundgedanke, einen Bereich für nicht frame-fähige Browser zu berücksichtigen, ist ja nicht schlecht. Man hätte das Ganze evtl. mit ein wenig Inhalt füllen sollen.

Man kann hier die NOFRAMES-Tags löschen oder eine sinnreiche Bemerkung, wie z.B. " dein Browser ist doof ! " einfügen. Das Beispiel stammt übrigens ( wie alle anderen ) von einer real existierenden Website !!
3.4. Doppel-Body

Codebeispiel:

..
</HEAD>
<body onLoad="ScriptTerror();return true">
<BODY BACKGROUND="/gif/xxxxxx.jpg" BGCOLOR="#FFFFFF" TEXT="#000000">
<CENTER>
..

Erklärung:
Hier handelt es sich um eine völlig neue Kreation. Die Grundstruktur einer Html-Seite besteht aus den Bestandteilen Header und Body. Eine einfache und leicht verständliche Festlegung, die sogar die wildesten Html-Editoren einhalten. Es kann sich nur um vorsätzlichen Programmierer-Terror handeln oder um den ultimativen Browserstabilitätstest. Was hier falsch ist, brauch ich wohl nicht zu erläutern oder ?
[Index]

4. sonstiger Unfug
4.1. Code-Chaos

Codebeispiel:

..
<table width="100%">

<td width="20%"></td></tr><tr><td>

...... viel Text ......

</td>
</tr></table>
..

Erklärung:
Dies ist Code-Chaos in höchster Perfektion. Da wo jetzt 'viel Text' steht, war noch eine Textpassage. Die habe ich aus mehreren Gründen (Urheberrecht, Copyright etc.) entfernt.

Kurz noch ein paar Worte zum Code. Es fehlt einmal <TR>. Außerdem ist die erste 'table data' leer. Mit höchster Wahrscheinlichkeit funktioniert die Breitenangabe nicht. Kennen wir alle oder? (Platzhalter-Gif etc.) So gesehen ist auch die erste Zeile umsonst. Die 20% breite leere Zelle ist definitiv kein Platzhalter. Ich weiß auch nicht ....
4.2. Alt mal anders

Codebeispiel:

<img border="0" src="/pics/anonym.gif" width="20" height="10" alt>

Erklärung:
Dieses Beispiel zeigt in exzellenter Weise, was man normaler Weise als "bad code" bezeichnet. Das Alt-Attribut macht hier überhaupt keinen Sinn. Wackelige Browser stürzen hier evtl. ab ?!

Entweder muss das Alt weg oder es wird in folgender Weise erweitert :
<img border="0" src="/pics/anonym.gif" width="20" height="10" alt="ein kleines Bild"> .
4.3. finale Kürze

Codebeispiel / Erklärung:
Die folgende kleine Zusammenfassung hat zwar nichts mit überflüssigen Html-Code zu tun, sie weist nur noch mal auf permanent auftretende Fehler bei der Html-Programmierung hin.

* fehlende Attribute bei Bildern (height, width, border, alt)
* "closing tag" vergessen, meist bei Links (<a></a> u.s.w.)
* Fehler bei den Sonderzeichen, Bsp. &nbsp (falsch) statt &nbsp; (richtig) u.s.w.
* die Tag-Schachtelung bei Tabellen ist meist fehlerhaft
* mangelhafte Farbangaben, Bsp. Linkfarbe : link="0000FF" (Gatter # vergessen) u.s.w.

Die großen Browser ignorieren solche Fehler meist, da sie darauf getrimmt sind. Sensible und ältere Browser reagieren da gelegentlich schon etwas heftiger.
Auf meiner Homepage verweise ich mehrfach auf Möglichkeiten, wie oder wo man seinen Html-Code kostenlos prüfen kann. In diesem Zusammenhang sei auf meine Homepage-Bastler-Seite und den Artikel Webmüll-Killer hingewiesen.
Fazit:
Wer sauberen Html-Code schreibt, gestaltet effiziente und platzsparende Seiten. Der Internet-Traffic wird gesenkt, Besucher freuen sich über funktionierende Seiten mit geringer Ladedauer und der Platz für genutzten Webspace kann minimiert werden.


aus http://www.xwolf.de/artikel/sauberhtml.shtml
______________
Signatur entfernt von Support-Team
Bitte die Größe von 650 x 150 einhalten !
Beitrag01.08.2007 um 19:34 (UTC)    
Titel:

Ich hab diesen Beitrag ins OT geschoben, weil der Inhalt nix mit unserem Baukasten und der Idee unseres Baukastens zu tun hat.
______________
Ich chatte hier: www.hpbk-chat.de.tl

kostenlos Musik auf die Homepage: www.bandland.de.tl - www.musik-code.de.tl
Beitrag01.08.2007 um 19:43 (UTC)    
Titel:

hmm.. jaa.. und...ähm..*hust* was sollen wir damit jetzt anfangen?

ich denke die meisten die sich im OT rumtreiben, wissen wie man HTML richtig benutzt... Laughing (hoffe ich zumindest)^^

also ich glaube das schlimmste für einen hp-coder ist, wenn man im quelltext liest..
Zitat:
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

______________
.


Zuletzt bearbeitet von thomas-h am 01.08.2007, 20:44, insgesamt einmal bearbeitet
Beitrag01.08.2007 um 19:58 (UTC)    
Titel:

Wo hast du den den ganzen Müll her?

Zitat:
[1] <td>
[2] <td valign="middle">

Codezeile 1 bewirkt genauso viel wie Zeile 2. Daher ist das "valign=middle" überflüssig und kann entfernt werden.


Das stimmt gar nicht.

Hier mal ein Beispiel

Zitat:
<td align="left" valign="middle" height="75">links mittig</td>
<td align="center" valign="middle">zentriert mittig</td>
<td align="right" valign="middle">rechts mittig </td>


Nur valign="middle" wäre halt mittig gehalten, das braucht man bei Texten, die man verschieden gestalten möchte.

Mehr dazu

http://de.selfhtml.org/html/tabellen/gestaltung.htm#ausrichtung_zellen
______________
LG André

GMMTS.de
Beitrag01.08.2007 um 20:26 (UTC)    
Titel:

Hallo,

und ganz nebenbei ist sämtlicher Text kopiert. Wie so vieles bei ihm ...

Gruß,
Lars
______________
[b:fc7d1cbe99]Meine Suchmaschine - Trage deine Seite ein[/b:fc7d1cbe99]

[img:fc7d1cbe99]http://www.anti-icq-kettenbriefe.de.tl/sig.png[/img:fc7d1cbe99]
Beitrag01.08.2007 um 20:32 (UTC)    
Titel:

free-downloads hat Folgendes geschrieben:
Hallo,

und ganz nebenbei ist sämtlicher Text kopiert. Wie so vieles bei ihm ...

Gruß,
Lars


war ja klar

er spielt sich irgendwie auf Wink
______________
^^
Beitrag01.08.2007 um 20:33 (UTC)    
Titel:

tiga-12 hat Folgendes geschrieben:
free-downloads hat Folgendes geschrieben:
Hallo,

und ganz nebenbei ist sämtlicher Text kopiert. Wie so vieles bei ihm ...

Gruß,
Lars


war ja klar

er spielt sich irgendwie auf Wink


Ja,

und am Ende schreibt er noch ganz klein den Link Rolling Eyes !

EDIT: Lol, der Artikel ist bald 7 Jahre alt! Laughing
______________
Gruß,
Noah


Zuletzt bearbeitet von noah-krueger am 01.08.2007, 21:35, insgesamt einmal bearbeitet
Beitrag01.08.2007 um 20:33 (UTC)    
Titel:

Ich denke mal, er hat gerade eine bestimmte "Phase". Er tut sogar hin und wieder so, als sei er Moderator und schreibt "habe es weitergeleitet Wink " An wen den?

Aber schaut doch mal her. Hat er ganz ganz klein unter den Text geschrieben

http://www.xwolf.de/artikel/sauberhtml.shtml
______________
LG André

GMMTS.de
Beitrag01.08.2007 um 20:48 (UTC)    
Titel:

Hallo,

könntet ihr nicht so frei sein, diesen User einfach zu sperren. Das erspart uns vielen Ärger auch in Zukunft.

Gruß,
Lars
______________
[b:fc7d1cbe99]Meine Suchmaschine - Trage deine Seite ein[/b:fc7d1cbe99]

[img:fc7d1cbe99]http://www.anti-icq-kettenbriefe.de.tl/sig.png[/img:fc7d1cbe99]
Beitrag01.08.2007 um 20:50 (UTC)    
Titel:

free-downloads hat Folgendes geschrieben:
Hallo,

könntet ihr nicht so frei sein, diesen User einfach zu sperren. Das erspart uns vielen Ärger auch in Zukunft.

Gruß,
Lars

noch hat er ja nix wirklich böses gemacht
______________
*** Signatur editiert vom Support Team - Signatur zu groß - max. 650 x 150 px ***
Beitrag01.08.2007 um 20:52 (UTC)    
Titel:

doomphoenixx hat Folgendes geschrieben:
free-downloads hat Folgendes geschrieben:
Hallo,

könntet ihr nicht so frei sein, diesen User einfach zu sperren. Das erspart uns vielen Ärger auch in Zukunft.

Gruß,
Lars

noch hat er ja nix wirklich böses gemacht


Naja,

soweit ich weiß ist er hier im Forum ja auch der User "koerner2", der hat hier immer wieder versucht mit Links und CodesWerbung zu machen, ich weiß aber nicht ob er es ist!
______________
Gruß,
Noah
Beitrag01.08.2007 um 20:54 (UTC)    
Titel:

doomphoenixx hat Folgendes geschrieben:
free-downloads hat Folgendes geschrieben:
Hallo,

könntet ihr nicht so frei sein, diesen User einfach zu sperren. Das erspart uns vielen Ärger auch in Zukunft.

Gruß,
Lars

noch hat er ja nix wirklich böses gemacht
Beitrag02.08.2007 um 06:27 (UTC)    
Titel:

Der Thread ist irgendwie sinnlos. Vielleicht solltest du, Christoph, mal ein bisschen mehr selbst schreiben und nicht alls reinkopieren. Solche Tutorials findet man zuhauf im Internet.
______________
Ende.
Beitrag02.08.2007 um 09:27 (UTC)    
Titel:

nur so mal zur Info MEINE FESTPLATTE IST IM ARSCH; DA EIN HACKER SICH IN MEIN POSTFACH GEHACKT HAT,dann löschte er so gut wie alles und amchte verdammt viel Spamm!!


Ich bekam heute schon 800 Mails Spam nur so mal!!! Dann ist von einem PC die Festplatte deswegen akputt, da meine IP und passwörter in einer Mail waren. Ich mache manchamal mit meinen Freunden eine LAN, deshalb ist hamatchi immer an und mein Windows hat kein Schutz.
______________
Signatur entfernt von Support-Team
Bitte die Größe von 650 x 150 einhalten !
Beitrag02.08.2007 um 09:30 (UTC)    
Titel:

Na, wenn alle Schuld bei den Hackern liegt Rolling Eyes
dann kann der Thread ja geclosed werden!!
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de