Vergleich nur HTML - HTML mit CSS

Ziel

Screenshot von gewünschter Darstellung [6]

Bild 6 zeigt einen Screenshot von der gewünschten Darstellung, wie sie mittels reinem HTML und mit Hilfe von CSS definiert wird.


Variante reines HTML

<HTML>
 <HEAD>
  <TITLE>nur HTML</TITLE>
 </HEAD>
 <BODY text="#0000FF" link="#00FF00"
   alink="#0080FF" vlink="#0080FF"
   bgcolor="#FFFFFF" background="pic.jpg">
  <H1>
   &Uuml;<FONT size="-1">BERSCHRIFT</FONT>
  </H1>
  <P>
   Das soll etwas
   <font face="sans-serif" color="#00A0A0">
    <b>ganz<b>
   </font>
   <font face="fantasy" color="#FF0000">
    <i>besonderes</i>
   </font>
   werden...
  </P>
 </BODY>
</HTML>

Variante HTML mit CSS

---STYLE.CSS---
BODY
{
 color: #0000FF;
 background-color: #
 background: url(pic.jpg);
}
A
{
 color: #00FF00;
}
A:active, A:visited
{
 color: #0080FF;
}
H1
{
 font-variant: small-caps;
}
.T1
{
 color:  #00A0A0;
 font-family: sans-serif;
 font-weight: bold;
}
.T2
{
 color: #FF0000;
 font-family: fantasy;
 font-style: italic;
}
---------------

<HTML>
 <HEAD>
  <TITLE>HTML mit CSS</TITLE>
  <LINK REL="stylesheet" HREF="style.css">
 </HEAD>
 <BODY>
  <H1>&Uuml;berschrift</H1>
  <P>
   Das soll etwas
   <span class="t1">ganz</span>
   <span class="t2">besonderes</span>
   werden...
  </P>
 </BODY>
</HTML>

Auf den ersten Blick könnte man jetzt sagen: Die Variante mit CSS ist zwar übersichtlicher, aber viel länger. Sieht hier auch so aus. Aber der Vorteil wird sehr schnell sichtbar, wenn man noch weitere HTML-Dokumente mit der CSS-Deklaration verlinkt (und evtl. noch weitere Formatierungen einfügt). Der Quelltext ist viel leichter lesbar und besitzt keine nicht-standardkonformen Tags mehr. Außerdem ist durch die Trennung von Inhalt und Form eine Änderung des Layouts viel schneller möglich (einfach gewünschte Änderungen in CSS-Deklaration eintragen).


Inhalt | weiter >>>