• To jest pierwsza pozycja listy
• To jest druga pozycja listy

Można także sprawić by były numerowane i by przy kolejnych pozycjach były inne "znaczki". No, ale skoro świat idzie do przodu, wymyślono CSS to czemu z niego nie skorzystać, szczególnie, że dzięki niemu można uzyskać dużo lepsze efekty, a dodatkowo wszelkie zmiany w wyglądzie 100 stron dokonywane są przez zmianę w jednym pliku. Więc zacznijmy.

Skopiuj plik 'index.htm' i nadaj kopi nazwę 'listy.htm'. Od tego momentu wszelkie zmiany na stronie index.htm (w 99%) będziesz musiał także przeprowadzić na innych stronach - poradzisz sobie! (choćby dlatego, że musisz:-)) )

Budowanie strony 'listy.htm':

Opis:
* - spokojnie, specjalnie zrobiłem takie małe napisy w górnej i dolnej części strony, ponieważ są mało istotne. Najważniejsza treść jest bordowo-brązowa.
1 - 'ul' oznacza lista punktowana (taka jak w przykładzie na górze strony). Inną możliwością jest 'ol' wtedy lista będzie numerowana.
2 - określam wygląd dla tej konretnej listy. I tak kolejno mówię przeglądarce co chciałbym zmienić list-style-image: url('lista.gif'); co możnaby przetłumaczyć na dla_listy[list]-wygląd[style]-obrazek[image].
3 - zostanie wczytany plik 'lista.gif', zamiast tych zwykłych czarnych punktów. Nazwa pliku może być dowolna, odradzam jednak stosowania polskich liter i spacji. Mogłeś już spostrzeć, że zawsze kiedy jest możliwość wczytania pliku graficznego schemat jest ten sam obiekt-image: url('ścieżka/plik.gif'); Podobna sytuacja była już wcześniej z tłem [ background-image: url(plik.gif);].
4 - znacznik <li> oznacza początek pierwszej pozycji.

Jak zawsze CSS daje jeszcze kilka możliwości. Opiszę tu jedną z najczęściej używanych. Otóż jest to dodawanie jako punktów jakichś symboli, które są ładowane na poziomie przeglądarki [kwadraty na górze strony]. Mogą to być:

• style="list-style-type: disc;"
• style="list-style-type: circle;"
• style="list-style-type: square;"
• style="list-style-type: decimal;"
• style="list-style-type: lower-roman;"
• style="list-style-type: upper-roman;"
• style="list-style-type: lower-alpha;"
• style="list-style-type: upper-alpha;"
• style="list-style-type: none;"

W przypadku list można jak najbardziej robić także klasy. Tu ich nie używałem ponieważ w ten sposób było mi łatwiej i krócej przeprowadzić tę lekcję.

A teraz zadanie bojowe dla Ciebie: zrób klasę, w której będą opisane właściwości listy. Popróbuj także nadać jej inne właściwości - tło, obramowanie itp (prawie wszystko czego do tej pory nauczyłeś się w tym kursie będzie działać!). Stworzoną wcześniej stronę zachowaj. Próby możesz przeprowadzać w niej. Niech na tej stronie w komórce określonej klasą 'txt' znajdzie się kilka przykładów. Ich treść i liczba zależy jedynie od Ciebie!