Zadanie 1. Utwórz stronę z różnymi typami list: wypunktowana, numerowana, definiowana. Wstaw listę o wielu poziomach zagnieżdżenia. Wypisz w nich podstawowe reguły XHTMLa.
<!DOCTYPE html> <html> <head> <title>Ćwiczenie drugie</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>Lista wypunktowana</h1> <h2>Normalna</h2> <ul> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> <h2>Typu 'disc'</h2> <ul style="list-style-type: disc"> <li>element 1</li> <li>element 2</li> </ul> <h2>Typu 'circle'</h2> <ul style="list-style-type: circle"> <li>element 1</li> <li>element 2</li> </ul> <h2>Typu 'square'</h2> <ul style="list-style-type: square"> <li>element 1</li> <li>element 2</li> </ul> <h1>Lista numerowana</h1> <h2>Normalna</h2> <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> <h2>Typu 'decimal' / '1' - wyliczanie wg cyfr arabskich</h2> <ol style="list-style-type: decimal"> <li>element 1</li> <li>element 2</li> </ol> <h2>Typu 'upper-alpha' / 'A' - wyliczanie wg wielkich liter</h2> <ol style="list-style-type: upper-alpha"> <li>element 1</li> <li>element 2</li> </ol> <h2>Typu 'lower-alpha' / 'a' - wyliczanie wg małych liter</h2> <ol style="list-style-type: lower-alpha"> <li>element 1</li> <li>element 2</li> </ol> <h2>Typu 'upper-roman' / 'I' - wyliczanie wg wielkich liczb rzymskich</h2> <ol style="list-style-type: upper-roman"> <li>element 1</li> <li>element 2</li> </ol> <h2>Typu 'lower-roman' / 'i' - wyliczanie wg małych liczb rzymskich</h2> <ol style="list-style-type: lower-roman"> <li>element 1</li> <li>element 2</li> </ol> <h1>Lista definiowana</h1> <dl> <dt>Reguły XHTML-a</dt> <dd>Jeśli strona XHTML zawiera błędy, nie może zostać wyświetlona</dd> <dd>Strony XHTML muszą mieć typ zawartości <code>application/xhtml+xml</code> (lub inny XML).</dd> <dd>Dzięki użyciu XHTML można stosować inne aplikacje XML (jak MathML czy SVG) bezpośrednio w dokumencie, czego nie da się w HTML</dd> <dd>Dokument powinien rozpoczynać się od deklaracji XML (np. <code><?xml version="1.0" encoding="utf-8"?></code>); nie jest ona wymagana, gdy dokument ma kodowanie znaków UTF-8 lub UTF-16, albo gdy odpowiednie kodowanie zostało określone w nagłówkach HTTP (jednak nawet wtedy warto dołączać deklarację XML, gdyż pozwala ona ustalić kodowanie np. w przypadku zapisania strony na dysku)</dd> <dd>Element główny (<code>html</code>) musi zawierać atrybut <code>xmlns</code> określający przestrzeń nazw XHTML: <a rel="nofollow" class="external free" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></dd> <dd>Znacznikowi otwierającemu każdego niepustego elementu powinien odpowiadać znacznik zamykający (np. <code><li> ... </li></code>)</dd> <dd>Puste elementy muszą także być zamykane (np. zamiast <code><br></code> musi być <code><br/></code>, albo <code><br></br></code>)</dd> <dd>Elementy muszą być zagnieżdżane w odpowiedni sposób (np. zamiast <code><p>Tekst z <em>wyróżnieniem</p></em></code> – <code><p>Tekst z <em>wyróżnieniem</em></p></code>); wprawdzie w HTML także istniał taki wymóg, lecz nie był egzekwowany przez przeglądarki.</dd> <dd>Nazwy elementów i atrybutów XHTML muszą być pisane małymi literami</dd> <dd>Wszystkie wartości atrybutów muszą być ujęte w cudzysłów (podwójny, np. <code><td rowspan="3"></code>, albo apostrof, np. <code><td rowspan='3'></code>)</dd> <dd>Niedozwolona jest minimalizacja atrybutów (np. zamiast <code><textarea readonly></code> musi być <code><textarea readonly="readonly"></code>)</dd> <dd>Wewnątrz elementów <code>script</code> i <code>style</code> komentarze XML (<code><!-- --></code>) zamiast ukrywać je przed starszymi przeglądarkami (które i tak nie obsługują XHTML), powodują ignorowanie tych stylów lub skryptów. W sekcji CDATA natomiast komentarze są traktowane jako element stylu/skryptu</dd> <dd>Jeśli zawarte wewnątrz dokumentu arkusze stylów lub skrypty zawierają znaki <code>&</code> lub <code><</code>, zawartość elementów <code>style</code> i <code>script</code> należy umieścić w sekcji CDATA (np.: <code><style type="text/css"><![CDATA[ arkusz stylów]] ></style></code>); alternatywnie można użyć encji lub zewnętrznego arkusza stylów/skryptu</dd> <dd>Ze względu na trudności z parsowaniem, nie powinno się używać w XHTML-u javascriptowej metody <code>document.write()</code> i właściwości <code>innerHTML</code>; jednak niektóre przeglądarki już obsługują te konstrukcje także w dokumentach XML. Zamiast nich należy używać metod DOM</dd> <dd>Znaczniki pustych elementów powinny zawierać dodatkową spację przed ukośnikiem, np. zamiast <code><br/></code> powinno być <code><br /></code></dd> </dl> <h1>Lista zagnieżdżona</h1> <ul> <li>Poziom 1 <ul style="list-style-type: disc"> <li>Poziom 2 <ul style="list-style-type: circle"> <li>Poziom 3 <ul style="list-style-type: square"> <li>Poziom 4 <ul style="list-style-type: upper-roman"> <li>Poziom 5.I</li> <li>Poziom 5.II</li> </ul></li> </ul></li> </ul></li> </ul> </li> </ul> </body> </html>