Przykłady

Ta strona zawiera kody źródłowe przykładów związanych z artykułem "Poprawne zastosowanie CSS i JavaScript w dokumentach XHTML".

Proszę przejdź do artykułu, aby dowiedzieć się więcej na temat poniższych przykładów.

Jeśli chciałbyś przetestować te przykłady samodzielnie, przeczytaj Ważne uwagi.

Ważne uwagi

Jeśli planujesz samodzielnie przetestować poniższe przykłady, musisz zastosować poprawne rozszerzenia (jest to napisane na początku danego kodu). Najlepiej wysłać te pliki na serwer WWW i gotowe.

Proszę zauważyć, że przykłady 4, 5 oraz 6 wymagają, aby plik o nazwie style.css istniał w tym samym katalogu co dany przykład. Zawartość style.css znajduje się na dole tej strony.

Przykłady dla "Problemy z tagami <tt>style</tt> i <tt>script</tt>"

Problem 1

<!-- Ten plik powinien mieć rozszerzenie .xhtml
     i wygeneruje on błąd przy próbie parsowania. -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Problem 1 - &lt; w XHTML</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <script type="text/javascript">
   var i = 0;
 
   while (++i > 10)
   {
     // ...
   }
  </script>
</head>
<body>
  <h1>Problem 1 - &lt; w XHTML</h1>
  <p>
   Ten plik nie jest dobrze zbudowany ze względu na zastosowanie surowego &lt;.
  </p>
</body>
</html>

Powrót do artykułu

Problem 2

<!-- Ten plik powinien mieć rozszerzenie .xhtml -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Problem 2 - komentarze w XHTML</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <style type="text/css">
   <!--
    body {background-color: blue; color: yellow; }
   -->
  </style>
  <script type="text/javascript">
   <!--
   var i = 0;
   var sum = 0;
 
   for (i = 0; i < 10; ++i)
   {
     sum += i;
   }
   alert('sum = ' + sum);
   // -->
  </script>
</head>
<body>
  <h1>Problem 2 - komentarze w XHTML</h1>

  <p>
  Ten dokument jest poprawnym XHTML 1.0 Strict podanym jako
  <code>application/xhtml+xml</code>.
  </p>

  <p>
  Ten dokument zawiera wewnętrzny CSS, zawarty w elemencie
  <code>style</code> i otoczony przez komentarz
  oraz JavaScript zawarty w elemencie <code>script</code>
  i otoczony przez komentarz.
  </p>

  <dl>
  <dt>Mozilla 1.1+/Opera 7</dt>
  <dd>Nie zastosuje CSS lub nie uruchomi JavaScript.</dd>
  <dt>Netscape 7.0x/Mozilla 1.0.x</dt>
  <dd>Nie zastosuje CSS, ale uruchomi JavaScript.</dd>
  <dt>Internet Explorer 5.5+</dt>
  <dd>Nie wyświetli dokumentu.</dd>
  </dl>

  <p>
  <a href="http://validator.w3.org/check/referer"><img
    src="http://www.w3.org/Icons/valid-xhtml10"
    alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p> 
</body>
</html>

Powrót do artykułu

Problem 3

<!-- Ten plik powinien mieć rozszerzenie .xhtml
     i wygeneruje on błąd przy próbie parsowania. -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Problem 3 - komentarze w XML</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <script type="text/javascript">
   var i;
   var sum = 0;
 
   for (i = 10; i > 0; --i)
   {
     sum += i;
   }
  </script>
</head>
<body>
  <h1>Problem 3 - komentarze w XHTML</h1>
  <p>
   Ten plik nie jest dobrze zbudowany ze względu na zastosowanie podwójnego
   myślnika w komentarzu.
  </p>
</body>
</html>

Powrót do artykułu

Przykłady dla "Zastosowanie CSS w wewnętrznym <tt>style</tt> w komentarzach"

Przykład 1

<!-- Ten plik powinien mieć rozszerzenie .html -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Przykład 1 - XHTML 1.0 Strict jako text/html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <style type="text/css">
   <!--
    body { padding-top: 8em; }
    html { color: #fff; background: #000 no-repeat fixed;} 
    p {width: 30em; font-weight: bold;}
   -->
  </style>
</head>
<body>
  <h1>Przykład 1 - XHTML 1.0 Strict jako text/html</h1>
  <p>
   Ten plik jest poprawnym XHTML 1.0 Strict podanym jako
   <code>text/html</code>.
  </p>
 
  <p>
  Ten dokument zawiera wewnętrzne reguły CSS zawarte w elemencie
  <code>style</code> i otoczony przez komentarz SGML.
  </p>
 
  <p>
  Zwróć uwagę, jak zastosowano CSS dla tła w Netscape 7.x,
  Mozilli, Operze 7 i Internet Explorerze 5.5+.
  </p>
 
  <p>
    <a href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Powrót do artykułu

Przykład 2

<!-- Ten plik powinien mieć rozszerzenie .xml -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Przykład 2 - XHTML 1.0 Strict jako text/xml</title>
  <meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
  <style type="text/css">
   <!--
    body { padding-top: 8em; }
    html { color: #fff; background: #000 no-repeat fixed;} 
    p {width: 30em; font-weight: bold;}
   -->
  </style>
</head>
<body>
  <h1>Przykład 2 - XHTML 1.0 Strict jako text/xml</h1>
  <p>
   Ten dokument jest poprawnym XHTML 1.0 Strict podanym jako
   <code>text/xml</code>.
  </p>
 
  <p>
  Ten dokument zawiera wewnętrzny CSS zawarty w elemencie
  <code>style</code> i otoczony przez komentarz SGML.
  </p>
 
  <p>
  Zauważ, że CSS dla tła <strong>nie</strong>
  jest zastosowywany w Netscape 7.x, Mozilli i Operze 7 oraz że
  Internet Explorer 5.5+ nie może w ogóle wyświetlić popranie strony.
  </p>
 
  <p>
    <a href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Powrót do artykułu

Przykład 3

<!-- Ten plik powinien mieć rozszerzenie .xhtml -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Przykład 3 - XHTML 1.0 Strict jako application/xhtml+xml</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <style type="text/css">
   <!--
    body { padding-top: 8em; }
    html { color: #fff; background: #000 no-repeat fixed;} 
    p {width: 30em; font-weight: bold;}
   -->
  </style>
</head>
<body>
  <h1>Przykład 3 - XHTML 1.0 Strict jako application/xhtml+xml</h1>
  <p>
   Ten dokument jest poprawnym XHTML 1.0 Strict podanym jako
   <code>application/xhtml+xml</code>.
  </p>
 
  <p>
  Ten dokument zawiera wewnętrzny CSS zawarty w elemencie
  <code>style</code> i otoczony przez komentarz SGML.
  </p>
 
  <p>
  Zauważ, że CSS dla tła <strong>nie</strong> jest
  stosowywany w Netscape 7.x, Mozilli i Operze 7 oraz, że
  Internet Explorer 5.5+ nie może w ogóle wyświetlić poprawnie dokumentu.
  </p>
 
  <p>
    <a href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Powrót do artykułu

Przykłady dla "Zastosowanie CSS w zewnętrznym pliku"

Przykład 4

<!-- Ten plik powinien mieć rozszerzenie .html -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Przykład 4 - XHTML 1.0 Strict jako text/html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>Przykład 4 - XHTML 1.0 Strict jako text/html</h1>
  <p>
   Ten dokument jest poprawnym XHTML 1.0 Strict podanym jako
   <code>text/html</code>.
  </p>
 
  <p>
  Ten dokument odwołuje się do zewnętrznego pliku
  arkusza stylów poprzez <code>link</code>.
  </p>
 
  <p>
  Zauważ, że CSS dla tła jest zastosowywany w Netscape 7.x,
  Mozilli, Operze 7 i Internet Explorerze 5.5+.
  </p>
 
  <p>
    <a href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Przed samodzielnym testowaniem tego przykład, przeczytaj to.

Powrót do artykułu

Przykład 5

<!-- Ten plik powinien mieć rozszerzenie .xml -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Przykład 5 - XHTML 1.0 Strict jako text/xml</title>
  <meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  </style>
</head>
<body>
  <h1>Przykład 5 - XHTML 1.0 Strict jako text/xml</h1>
  <p>
   Ten dokument jest poprawnym XHTML 1.0 Strict podanym jako
   <code>text/xml</code>.
  </p>
 
  <p>
  Ten dokument odwołuje się do CSS-a umieszczonego w zewnętrznym pliku
  arkusza stylów poprzez <code>link</code>.
  </p>
 
  <p>
  Zauważ, że CSS dla tła jest zastosowywany w Netscape 7.x,
  Mozilli, Operze 7 ale że Internet Explorer nie może w ogóle wyświetlić tego dokumentu.
  </p>
 
  <p>
    <a href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Przed samodzielnym testowaniem tego przykładu przeczytaj to.

Powrót do artykułu

Przykład 6

<!-- Ten plik powinien mieć rozszerzenie .xhtml -->

<!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" lang="en-US" xml:lang="en-US">
<head>
  <title>Przykład 6 - XHTML 1.0 Strict jako application/xhtml+xml</title>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  </style>
</head>
<body>
  <h1>Przykład 6 - XHTML 1.0 Strict jako application/xhtml+xml</h1>
  <p>
   Ten dokument jest poprawnym XHTML 1.0 Strict podanym jako
   <code>application/xhtml+xml</code>.
  </p>
 
  <p>
  Ten dokument odwołuje się do CSS umieszczonego w zewnętrznym pliku
  arkusza stylów poprzez <code>link</code>.
  </p>
 
  <p>
  Zauważ, że CSS dla tła jest zastosowywany w Netscape 7.x,
  Mozilli, Operze 7 oraz, że Internet Explorer nie może w ogóle wyświetylić dokumentu.
  </p>
 
  <p>
    <a href="http://validator.w3.org/check/referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
  </p>
 
</body>
</html>

Przed samodzielnym testowaniem tego przykładu, przeczytaj to.

Powrót do artykułu

Arkusz stylów

/*
 * Jeśli próbujesz wyświetlić wyniki tych przykładów,
 * będziesz musiał utworzyć plik o nazwie style.css
 * z poniższą zawartością w tym samym katalogu co
 * przykłady.
 */

body { padding-top: 8em; }
html { color: #fff; background: #000 no-repeat fixed;} 
p {width: 30em; font-weight: bold;}

Autorzy i etykiety dokumentu

 Autorzy tej strony: Ptak82, VooEak
 Ostatnia aktualizacja: Ptak82,