Listy numerowane i nienumerowane

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>&lt;?xml version="1.0" encoding="utf-8"?&gt;</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>&lt;li&gt; ... &lt;/li&gt;</code>)</dd>
<dd>Puste elementy muszą także być zamykane (np. zamiast <code>&lt;br&gt;</code> musi być <code>&lt;br/&gt;</code>, albo <code>&lt;br&gt;&lt;/br&gt;</code>)</dd>
<dd>Elementy muszą być zagnieżdżane w odpowiedni sposób (np. zamiast <code>&lt;p&gt;Tekst z &lt;em&gt;wyróżnieniem&lt;/p&gt;&lt;/em&gt;</code> – <code>&lt;p&gt;Tekst z &lt;em&gt;wyróżnieniem&lt;/em&gt;&lt;/p&gt;</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>&lt;td rowspan="3"&gt;</code>, albo apostrof, np. <code>&lt;td rowspan='3'&gt;</code>)</dd>
<dd>Niedozwolona jest minimalizacja atrybutów (np. zamiast <code>&lt;textarea readonly&gt;</code> musi być <code>&lt;textarea readonly="readonly"&gt;</code>)</dd>
<dd>Wewnątrz elementów <code>script</code> i <code>style</code> komentarze XML (<code>&lt;!-- --&gt;</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>&amp;</code> lub <code>&lt;</code>, zawartość elementów <code>style</code> i <code>script</code> należy umieścić w sekcji CDATA (np.: <code>&lt;style type="text/css"&gt;&lt;![CDATA[ arkusz stylów]] &gt;&lt;/style&gt;</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>&lt;br/&gt;</code> powinno być <code>&lt;br /&gt;</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>

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.