Wpisy otagowane ‘HTML’

Jak zrobić stronę squeeze page?

czwartek, 3 Listopad 2011

Czym jest squeeze page pisałem już kiedyś. Dzisiaj chcę pokazać, jak zabrać się za wykonanie takiej strony.

Jeżeli nie widzisz nagrania, wciśnij F5 na klawiaturze.

Niedawno udostępniłem kurs Zawodowy Webmaster, którego częścią jest to nagranie, swojemu 10-cio letniemu synowi Patrykowi. Zaskoczyło mnie, jak świetnie poradził sobie z wykonaniem zadań. Dla tych co mają wątpliwości, czy sobie poradzą: kurs jest na poziomie uzdolnionego 10-cio latka :) .


Mam dla Ciebie dodatkowy prezent. Jeżeli interesuje Cię pozycjonowanie stron w wyszukiwarkach, z pewnością przydadzą Ci się poniższe publikacje: W pierwszej znajdziesz informację o doborze i testowaniu słów kluczowych, a w drugiej mechanizm funkcjonowania najpopularniejszych wyszukiwarek.

Jak zdobyć popularność i zjednać sobie wyszukiwarki Pierwsze miejsce w wyszukiwarkach



Jak wstawić tekst na stronę?

środa, 24 Luty 2010

Zawartość strony może być dość zróżnicowana. Same teksty mogą zostać ujęte w akapity, nagłówki, listy itp. Generalnie można te elementy podzielić na blokowe i liniowe. Elementy na stronie są umieszczane przy pomocy znaczników tych elementów np. znacznikami elementu p czyli akapitu są <p> i </p>

Elementy blokowe

Elementy blokowe to takie, które bez względu na to, czy wstawimy je w nowej linii czy bezpośrednio za inną zawartością w tej samej linii, na stronie będą zawsze umieszczane w nowej linii. Również treści wpisane za elementami blokowymi będą przenoszone poniżej jego ostatniej linii. Elementami blokowymi są: nagłówki (h1, h2, h3, h4, h5, h6), cytat (blockquote), blok/sekcja (div), akapit (p), tekst preformatowany (pre), listy i elementy list (ul, ol, li dt, dd, dl).

Elementy liniowe

Elementy liniowe łączą się w jednej linii z elementami je poprzedzającymi i z elementami następującymi po nich. Do elementów liniowych należą: skrót (abbr), akronim (acronym), przejście do nowej linii (br), odniesienie do źródła cytatu (cite), kod (code), podkreślenie znaczenia fragmentu tekstu (em), cytat (q), wydzielenie fragmentu tekstu (span), wyróżnienie (strong). Wszystkie te elementy w mniejszym lub większym stopniu określają znaczenie treści, którą zawierają. Jest też kilka elementów liniowych odpowiedzialnych jedynie za prezentacje treści. Są to: pogrubienie tekstu (b), powiększenie tekstu (big), pochylenie tekstu (i), pomniejszenie tekstu (small), tekst w dolnym indeksie (sub), tekst w górnym indeksie (sup). Ze względu na to, że identyczny efekt można osiągnąć przy pomocy styli CSS, elementy te nie są zalecane.

Stronę zazwyczaj rozpoczyna tytuł. Do jego umieszczenia najlepiej użyć nagłówka pierwszego stopnia (<h1></h1>). Jest to nagłówek domyślnie wyświetlany największą czcionką, ale sposób wyświetlania można zmienić stosując style css. Każdy kolejny stopień nagłówków, a jest ich 6 (od <h1></h1> do <h6></h6>), jest coraz mniejszy i mniej istotny. Nagłówki są elementami blokowymi. Treść nagłówka umieszczamy między jego znacznikami np. (<h1>Tytuł strony</h1>). Treścią nagłówków oprócz tekstu mogą być wszystkie elementy liniowe.

Elementy blokowe w większości nie mogą zawierać innych elementów blokowych. Wyjątkami są tu elementy div, które mogą zawierać zarówno elementy liniowe, jak i blokowe, w tym inne bloki div. Drugim wyjątkiem są elementy blockquote, które nie tyle mogą, co muszą zawierać bezpośrednio inny element blokowy. Również elementy ul i ol wewnątrz siebie bezpośrednio mogą zawierać jedynie elementy li.

Element pre służy do wstawiania treści preformatowanych, w których chcemy zachować oryginalny układ białych znaków (spacji, tabulatorów, przejść do nowej linii). Nie może zawierać elementów: img, object, big, small, sub, sup. W przypadku umieszczania na stronie kodów programów lepiej jest użyć elementu code.

Znacznik <br /> jest znacznikiem przejścia do nowej linii. Kilka takich znaczników umieszczonych jeden za drugim powoduje powstanie większych odstępów na stronie. Jest to znacznik bardzo przydatny podczas tworzenia stron, gdyż przeglądarka ignoruje standardowe przejście do nowej linii.

Znacznik <span></span> jest elementem liniowym i służy do formatowania przy pomocy kaskadowych arkuszy styli wydzielonych fragmentów tekstów.

Znacznik odnośnika <a href=”strona.html”>strona</a> jest istotą Internetu. Pozwala na powiązanie ze sobą odrębnych dokumentów. Zawartością odnośnika jest najczęściej ciąg znaków, który można kliknąć, by otworzyć nowy dokument na stronie, lub przenieść się na zupełnie inną stronę, ale może to być również grafika np.: <a href=”strona.html”><img src=”zdjecie.jpg” alt=”zdjęcie” /></a>. Atrybut href określa miejsce docelowe odnośnika. Jeżeli jest to dokument naszego serwisu wystarczy podać względną ścieżkę do odpowiedniego pliku np.: <a href=”strony/strona4.html”>Strona 4</a>. Natomiast gdy tworzymy odnośnik do innej strony, podajemy jej pełny adres np.: <a href=”http://www.strona.pl/strony/strona4.html”>xxx</a> Za pomocą odnośników można też przenieść się do etykiety – odpowiedniego miejsca na stronie (przeglądarka automatycznie przewinie stronę do żądanego miejsca). Tego typu odnośniki konstruuje się w następujący sposób: <a href=”#etykieta”<xxx>/a>. Po znaku „#” w atrybucie „href” umieszczamy nazwę etykiety. Ta sama nazwa musi się znajdować w miejscu docelowym w atrybucie „id” dowolnego znacznika np. <h3 id=”etykieta”>nagłówek xx</h3>. Etykieta może znajdować się również na innej stronie. Odnośnik do takiej etykiety może wyglądać następująco: <a href=”http://www.strona.pl/strony/strona4.html#etykieta”>xxx</a>. Po adresie strony wstawiamy znak „#”, a po nim nazwę etykiety. Element a nie może zawierać innych elementów a.



Podstawy stron WWW – XHTML

piątek, 19 Luty 2010

(X)HTML

Kod strony internetowej składa się ze znaczników języka html reprezentujących zdefiniowane elementy strony tj. odnośniki, akapity, tabele itp. Znacznik jest to ciąg znaków pomiędzy symbolami „<” i „>” np. <body>, <table>. Większość znaczników ma swoje wersje otwierające i zamykające, w których po symbolu „<” umieszcza się znak „/” np. <span> </span>. Znaczniki takie wpływają na wszystko co się pomiędzy nimi znajduje. Znaczniki nie mające swoich wersji zamykających zapisujemy w formie <br> na stronach w języku HTML lub <br /> w przypadku stosowania języka XHTML. Często znaczniki posiadają atrybuty modyfikujące ich wygląd lub funkcjonowanie np. <img src=”przykład.jpg” alt=”przykład” />. Nazwę atrybutu umieszcza się za nazwą znacznika, po spacji, następnie stawia się znak równości i w cudzysłowie ustawia się wartość atrybutu. Specyfikacja języka zaleca, by nie umieszczano przerw pomiędzy nazwą atrybutu, znakiem równości, znakami cudzysłowu i wartością atrybutu.

W kodzie strony możemy również umieścić komentarze. Wszystko, co zostanie umieszczone pomiędzy „<!-–” a „-–>”, nie będzie widoczne na stronie. Komentarze mogą posłużyć m.in. do umieszczania własnych uwag lub ukrycia fragmentów strony. Komentarzy nie można w sobie zagnieżdżać.

Struktura dokumentu składa się z trzech głównych elementów: znaczników <html></html>, w których zawiera się cały kod strony zapisany w HTMLU lub XHTMLU, znaczników <head></head> obejmujących część nagłówkową wpływającą na różne aspekty funkcjonowania strony w Internecie, ale nie wyświetlającą żadnych elementów na stronie, oraz znaczników <body></body> stanowiących główną część strony, wyświetlaną w przeglądarce. W znaczniku <body> nie można umieszczać tekstu w sposób bezpośredni. Tekst musi znajdować się w dodatkowych znacznikach.

html 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<!--komentarz -->
<body>
</body>
</html>

xhtml 1.0

<?xml version="1.0" encoding="ISO-8859-2"?>
<!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" xml:lang="pl" lang="pl">
<!--komentarz -->
<head>
<title>Tytuł</title>
</head>
<body>
</body>
</html>

xhtml 1.1

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title>Tytuł</title>
</head>
<body>
<!--komentarz -->
</body>
</html>


Formularze na stronie www

poniedziałek, 4 Styczeń 2010

Formularz na stronie www jest bardzo użytecznym narzędziem zwiększającym interakcje z użytkownikiem. Formularze mogą służyć do wysyłania wiadomości, zbierania informacji o odwiedzających stronę, składania zamówień, przesyłania parametrów do skryptów itp.

<form action="form.php" method="post">
	<div>
		Miejsce na pola formularza
	</div>
</form>

Formularz jest wstawiany za pomocą znaczników „<form></form>”. Najczęściej podajemy w nich dwa parametry: action – adres skryptu przetwarzającego dane z formularza oraz method – metodę wysyłania danych. W powyższym przykładzie przetwarzaniem danych z formularza zajmie się skrypt umieszczony w pliku form.php, a dane wysłane zostaną metodą POST.

Istnieją dwie metody wysyłania formularzy: GET i POST. Przy użytej metodzie GET dane wysyłane do skryptu dołączane są do adresu URI (ang. Uniform Resource Identifier – Ujednolicony Identyfikator Zasobów) np. www.serwan.pl/form.php?zmienna=wartosc. W takim adresie bardzo łatwo można zmienić nie tylko wartość zmiennej, ale również jej nazwę. W niektórych przypadkach może to spowodować niechciane przez twórcę lub właściciela strony rezultaty. Dane GET pozostają w historii przeglądarki. Z tego względu nie należy przekazywać tą metodą danych poufnych np. numerów kart kredytowych. Przesyłanie danych metodą GET jest też ograniczone limitem długości URI, który w przeglądarce Internet Explorer wynosi 2048, a może być też obcinany na różnych urządzeniach pośredniczących.

Dużo bezpieczniejsze jest używanie metody POST. W tej metodzie dane przesyłane są w protokole HTTP, co ogranicza możliwość ich podejrzenia i zmodyfikowania. Nie ma też limitu wielkości dla tych danych.

Kontrolki formularzy nie powinny być umieszczane bezpośrednio pomiędzy znacznikami „<form></form>”. Powinno się to robić wewnątrz dodatkowych znaczników np. bloku div lub tabeli.

<form action="form.php" method="post">
	<div>
		Imię: 
		<input type="text" name="imie" />
		Hasło: 
		<input type="password" name="haslo" />
		Akceptuję regulamin: 
		<input type="checkbox" name="akcept" value="q" checked=checked/>
		Kobieta: 
		<input type="radio" name="plec" value="kobieta" />
		Mężczyzna: 
		<input type="radio" name="plec" value="mezczyzna" />
		Rok urodzenia: 
		<select name="rok">
			<option>1998</option>
			<option>1997</option>
			(...)
		</select>
		Zainteresowania: 
		<select name="zainteresowania[]" multiple="multiple">
			<option value=1”>Pływanie</option>
			<option value=2”>Muzyka</option>
			(...)
		</select>
		<textarea name="komentarz">Wpisz komentarz </textarea>
		<input type="hidden" name="nr" value="354634" />
		<input type="submit" value="wyślij" />
	</div>
</form>

Większość kontrolek formularza to pola „input”. Ich rola i funkcje są zróżnicowane w zależności od atrybutu „type”. Wartości z tych pól będą dostępne w skrypcie php poprzez nazwy – atrybut „name”. Wartości pól mogą być określone w atrybutach „value”. Domyślną wartością atrybutu „type” jest „text”. Pola tego typu pozwalają na wprowadzenie krótkiej informacji tekstowej w pojedynczej linii. Jeżeli chcemy, by pole zawierało od razu jakiś tekst, należy umieścić go w atrybucie „value”. Do wpisywania haseł przeznaczony jest typ „password”. Od typu „text” różni go jedynie maskowanie wpisywanych znaków kropkami. Pole typu „checkbox” jest polem wyboru mającym postać małego kwadratu do zaznaczania i odznaczania myszką. Po wysłaniu formularza z zaznaczonym polem „checkbox” w skrypcie pod nazwą z atrybutu „name” tego pola dostępna będzie wartość z atrybutu „value” lub 1, jeżeli „value” nie zdefiniowano. Aby umieścić w formularzu zaznaczone pole „checkbox” należy dodać atrybut „checked” o wartości „checked”.

Pola opcji czyli przełączniki w formie kółek do zaznaczania (zaznaczenie jednego automatycznie odznacza inne) uzyskujemy stosując typ „radio”. Pola tego typu są grupowane ze sobą dzięki identycznej wartości atrybutu „name”. Tylko jedno pole o takim samym atrybucie „name” może być zaznaczone. W skrypcie php dostępna będzie wartość właśnie z tego zaznaczonego pola. Typ „hidden” pozwala dołączyć do formularza dane nie wprowadzane przez osobę wypełniającą formularz, a wygenerowane na stronie. Możemy w ten sposób dołączać informacje o stronie, z której dana osoba weszła, stronie na której został wypełniony formularz (jeżeli mamy kilka identycznych formularzy na różnych stronach takie informacje mogą okazać się bardzo przydatne), informacje o ustawieniach i personalizacji strony itp.

Ostatni typ pola input, który opiszę jest przyciskiem wysyłającym formularz. Typem tym jest „submit”. Poza wyglądem charakterystyczną jego cechą jest to, że wartość atrybutu „value” jest wyświetlana jako tekst przycisku.

Poza elementami „input” w formularzu mogą znaleźć się inne kontrolki. Pole tekstowe do wpisywania wielu linii tekstu otrzymujemy dzięki znacznikom „<textarea></textarea>”. Znacznik ten posiada atrybut „name” natomiast nie posiada atrybutu „value”. Wartością wyświetlaną w formularzu i przesyłaną do skryptu php jest tekst pomiędzy znacznikiem otwierającym i zamykającym. Listę wyboru uzyskujemy wstawiając znaczniki „<select></select>”, a między nimi „<option></option>” dla każdej pozycji na liście. Atrybut „name” jest definiowany dla zancznika „<select>”, a „value” dla znaczników „<option>”. Nazwami wyświetlanymi na liści będą teksty pomiędzy znacznikami „<option></option>”. Jeżeli nie zdefiniujemy atrybutów „value”, to wartością znacznika będzie tekst wyświetlany. Domyślnie wybrany jest pierwszy element listy. Można to zmienić umieszczając w wybranym znaczniku „<option>” atrybut „selected” o wartości „selected”. Jeżeli potrzebujemy listy, z której można wybrać jednocześnie kilka opcji, to do znaczników „<select></select>” należy dodać atrybut „multiple” o wartości „multiple”, a do atrybutu name dodać na końcu „[]” – dzięki temu odpowiednia zmienna w skrypcie php będzie tablicą. Wybór wielu pozycji na takiej liście odbywa się poprzez przytrzymanie klawisza „ctrl” na klawiaturze i klikaniu wybranych pozycji.

O odbieraniu danych w php napiszę wkrótce.



Formatowanie list

wtorek, 24 Listopad 2009

Listy zarówno uporządkowane jak i nieuporządkowane mają wiele zastosowań na stronach www. Z reguły wykorzystywane są domyślne sposoby formatowania tych list i w większości przypadków jest to wystarczające. Bywa jednak czasem, że przydałoby się rozwiązanie ciekawsze, bardziej niestandardowe. Zacznijmy jednak od początku.

Listy uporządkowane i nieuporządkowane

Najprostszą listę umieszczamy na stronie wpisując znaczniki <ul> i </ul> dla listy nieuporządkowanej lub <ol> i </ol> dla listy uporządkowanej, a pomiędzy nimi serię pozycji w znacznikach <li>…</li>

<ul>
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
	<li>Pozycja czwarta listy nieuporządkowanej</li>
</ul>

Wpisując powyższy kod otrzymamy:

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej
  • Pozycja czwarta listy nieuporządkowanej

…i to samo dla listy uporządkowanej.

<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>Pozycja druga listy uporządkowanej</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li>Pozycja czwarta listy uporządkowanej</li>
</ol>

Wpisując powyższy kod otrzymamy:

  1. Pozycja pierwsza listy uporządkowanej
  2. Pozycja druga listy uporządkowanej
  3. Pozycja trzecia listy uporządkowanej
  4. Pozycja czwarta listy uporządkowanej

Zarówno wewnątrz elementów <ul> i </ul> jak i elementów <ol> i </ol> mogą znaleźć się tylko elementy <li> i </li>, natomiast wewnątrz nich oprócz tekstu mogą znajdować się też inne elementy w tym również listy.

Zagnieżdżanie list

Listy można w sobie zagnieżdżać wiele razy w dowolnych konfiguracjach. Np. lista uporządkowana może zawierać dwie listy nieuporządkowane i trzy uporządkowane, a ostatnia z nich również zawiera listę itd.

<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>
<h3>Podrzędna lista nieuporządkowana</h3>
<ul>
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
	<li>Pozycja czwarta listy nieuporządkowanej</li>
</ul>
</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li><strong>Kolejna podrzędna lista nieuporządkowana</strong>
<ul>
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
	<li>Pozycja czwarta listy nieuporządkowanej</li>
</ul>
</li>
	<li>Podrzędna lista uporządkowana
<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>Pozycja druga listy uporządkowanej</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li><span class="kolor">Podrzędna (podwójnie ;)) lista uporządkowana</span>
<ol>
	<li>Pozycja pierwsza listy uporządkowanej</li>
	<li>Pozycja druga listy uporządkowanej</li>
	<li>Pozycja trzecia listy uporządkowanej</li>
	<li>Pozycja czwarta listy uporządkowanej</li>
</ol>
</li>
</ol>
</li>
</ol>
  1. Pozycja pierwsza listy uporządkowanej
  2. Podrzędna lista nieuporządkowana

    • Pozycja pierwsza listy nieuporządkowanej
    • Pozycja druga listy nieuporządkowanej
    • Pozycja trzecia listy nieuporządkowanej
    • Pozycja czwarta listy nieuporządkowanej
  3. Pozycja trzecia listy uporządkowanej
  4. Kolejna podrzędna lista nieuporządkowana
    • Pozycja pierwsza listy nieuporządkowanej
    • Pozycja druga listy nieuporządkowanej
    • Pozycja trzecia listy nieuporządkowanej
    • Pozycja czwarta listy nieuporządkowanej
  5. Podrzędna lista uporządkowana
    1. Pozycja pierwsza listy uporządkowanej
    2. Pozycja druga listy uporządkowanej
    3. Pozycja trzecia listy uporządkowanej
    4. Podrzędna (podwójnie ;) ) lista uporządkowana
      1. Pozycja pierwsza listy uporządkowanej
      2. Pozycja druga listy uporządkowanej
      3. Pozycja trzecia listy uporządkowanej
      4. Pozycja czwarta listy uporządkowanej

To tyle podstawy. Przejdźmy teraz do części nieco bardziej zaawansowanej.

Typy wypunktowania

Jeżeli na stronie mamy wiele list nieuporządkowanych, warto niektóre z nich wyróżnić odmiennym stylem wypunktowania. Czasem też czarne kropki po prostu nie pasują do ogólnego wyglądu strony. W takiej sytuacji z pomocą przychodzą nam style CSS. Wystarczy jedna prosta definicja:

ul{list-style-type: circle;}

zmienia kropki na okręgi,

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

a definicja stylu:

ul{list-style-type: square;}

na kwadraty

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Definicja:

ul{list-style-type: disc;}

przywraca domyślny wygląd listy z kropkami.

  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Jeżeli natomiast chcielibyśmy zrezygnować z jakichkolwiek symboli umieścimy definicję:

ul{list-style-type: none;}
  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Możliwe też jest zastosowanie dowolnego symbolu graficznego z pliku: (może nie działać w przeglądarce Internet Explorer)

ul{list-style-image: url(zaznaczenie.gif);}
  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

lub

ul{list-style-image: url(rower.gif);}
  • Pozycja pierwsza listy nieuporządkowanej
  • Pozycja druga listy nieuporządkowanej
  • Pozycja trzecia listy nieuporządkowanej

Tylko nie przesadzajcie z wielkością grafiki ;)

Również przy listach uporządkowanych można modyfikować typ numerowania. Począwszy od standardowego

ol{list-style-type: decimal;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

poprzez numerowanie z zerem wiodącym

ol{list-style-type: decimal-leading-zero;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

do numerowania przy pomocy cyfr rzymskich dużych i małych

ol{list-style-type: upper-roman;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej
ol{list-style-type: lower-roman;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

oraz liter – również dużych i małych

ol{list-style-type: upper-alpha;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej
ol{list-style-type: lower-alpha;}
  1. Pozycja pierwsza listy nieuporządkowanej
  2. Pozycja druga listy nieuporządkowanej
  3. Pozycja trzecia listy nieuporządkowanej

Jeżeli zmieniony styl chcemy zastosować tylko do wybranych list, posługujemy się klasą

.rzymskie ol{list-style-type: upper-roman;}
<ol class="rzymskie">
	<li>Pozycja pierwsza listy nieuporządkowanej</li>
	<li>Pozycja druga listy nieuporządkowanej</li>
	<li>Pozycja trzecia listy nieuporządkowanej</li>
</ol>

Możemy dzięki temu stosować różne typy numerowania list i dowolnie te listy w sobie zagnieżdżać, aczkolwiek z różnorodnością nie należy przesadzać.

Skomentuj ten artykuł, a dostaniesz dodatkowe informacje na temat formatowania list na swój adres email podany przy wysyłaniu komentarza. Dodatkowe informacje postaram się wysłać Ci w ciągu 24 godzin. Komentarze głupie, bezsensowne i obraźliwe będą odrzucane.

pozdrawiam
Leszek Sewastianowicz