kdw
Joined: 05 May 2006 Posts: 1462
|
Posted: 08.07.2009, 11:32 Post subject: HTML-Seiten entwickeln ... |
|
|
Hallo Forum.
Bei uns kommt hin und wieder mal eine Support-Anfrage der Art „Hilfe, meine DIL/NetPC-Webseite sieht auf jedem Browser anders aus …“ an. In der Regel wurden dann irgendwelche HTML-Dateien im Dateisystem eines DIL/NetPC abgelegt und durch einen Browser-Zugriff auf den Webserver des DIL/NetPCs zur Anzeige gebracht.
Zunächst mal eins vorab: Wenn solche HTML-Dateien unter Internet Explorer, Firefox und Chrome jeweils anders aussehen, liegt das definitiv nicht am Webserver des DIL/NetPCs. Die Ursache ist vielmehr der HTML-Code selbst.
Browser erzeugen bei fehlerhaftem oder unvollständigem HTML-Code in der Regel keine Fehlermeldung. Sie versuchen die jeweilige Seite bestmöglich darzustellen. Dabei entstehen dann die visuellen Unterschiede. Der Internet Explorer zeigt nun mal eine fehlerhafte HTML-Seite einfach anders an als Firefox oder Chrome.
Um solche Probleme zu vermeiden, sollte jede HTML-Datei zuvor mit Hilfe des W3 (World Wide Web Consortium) Validators per Internet überprüft werden. Siehe hierzu auch: http://www.dilnetpc.com/mHT5370-11.pdf
Für eine derartige Prüfung muss eine HTML-Seite allerdings unbedingt mit einem !DOCTYPE-Tag versehen werden. Das folgende Beispiel:
Code: | <html>
<head>
<title>This is the title.</title>
</head>
<body>
<h1>This is the header.</h1>
<p>
This is the body.
</p>
</body>
</html> |
wäre nicht durch den W3 Validator prüfbar. Die korrekte Form für eine „Well-formed“ und somit prüfbare HMTL-Seite ist zum Beispiel:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is the title.</title>
</head>
<body>
<h1>This is the header.</h1>
<p>
This is the body.
</p>
</body>
</html> |
Unter http://jigsaw.w3.org/css-validator/ kann zusätzlich auch eine CSS-Datei wie zum Beispiel:
Code: | body {
font-family: arial, "sans serif";
color: blue
}
#header {
background-color: #ddddee;
border-top: 3px solid #888888;
border-bottom:thick dotted #a0a0a0
} |
überprüft werden.
Gruß
KDW |
|