lista - Kurs HTML i CSS
HTML5 / Wykaz z numeracją odwrotną <ol reversed>...bez wartości) reversed ustala odwrotną kolejność numeracji (...3, 2, 1) punktów listy uporządkowanej (wykazu). Numer, od którego rozpocznie się lista, zależy od liczby jej wszystkich punktów albo atrybutu start="..." (jeśli został ustawiony). Pytania i odpowiedzi <ol reversed start, li> Jak odwrócić numerację w HTML? Aby odwrócić numerację w HTML, można użyć atrybutu reversed w elemencie <ol>. Powoduje to, że lista numerowana będzie wyświetlana w kolejności malejącej. Przykład: <ol...
- HTML dla zielonych / Edytory HTML
...wcięcia linii kodu oraz dopasowywuje nawiasy. Obsługuje wtyczki, np.: statystyki dokumentu, integracja z zewnętrznymi aplikacjami, makrokody, lista znaczników. Kate (darmowy) ★★★☆☆ Wchodzi w skład środowiska KDE. Dostępna również uproszczona wersja pod nazwą KWrite. Podświetla składnię, dopasowuje nawiasy oraz automatyczne dodaje wcięcia linii kodu. Obsługuje autouzupełnianie, a także mechanizm wtyczek. Wbudowana jest funkcja sprawdzanie pisowni oraz konwersja kodowania znaków...
- Nagłówek i treść HTML / Słowa kluczowe <meta "keywords">
...ma wpływu na pozycję strony w wynikach tej wyszukiwarki. Pytania i odpowiedzi <meta "keywords"> Jak wpisać słowa kluczowe? Słowa kluczowe to lista wyrazów rozdzielonych przecinkami, które wskazują, o jakiej tematyce jest strona. Można je wpisać w nagłówku dokumentu - tzn. w dowolnym miejscu wewnątrz elementu <head>...</head> - używając następującego znacznika: <meta name="keywords" content="wyraz1, wyraz2, wyraz3...">. Jednak ponieważ tak wstawione słowa kluczowe nie wyświetlają się...
- Tekst HTML / Słownik <dl, dt, dd>
...gdy piszemy słownik, w którym znajdują się pewne wyrazy i ich objaśnienia. Objaśnienia są zwykle przesunięte bardziej w prawo, dzięki czemu lista staje się czytelniejsza. (Zobacz także: Definicja). Zwracam uwagę, że w obrębie słownika tekst i inne elementy można wstawiać tylko wewnątrz znaczników terminów i definicji, a nie poza nimi! Zatem poniższy kod będzie nieprawidłowy: <dl> Słownik... <dt>Termin</dt> <br> <dd>Definicja</dd> <br> </dl> Termin definicji (DT) nie może zawierać...
Wykazy CSS / Automatyczna numeracja wykazu {counter-reset, counter-increment}...drugiego rzędu (1.1.2.) Podpunkt drugiego rzędu (1.1.1.) Zatem ogólna postać wartości counter-reset i counter-increment jest następująca: lista identyfikatorów liczników rozdzielonych spacjami, przy których po każdym z nich może opcjonalnie wystąpić liczba oddzielona od swojego (poprzedzającego) identyfikatora licznika również spacją: ol { counter-reset: licznik1 licznik2 3 } ol li { counter-increment: licznik1 licznik2 -1 } Automatyczną numerację można wykorzystać nie tylko do...
Aktualizacja / Data aktualizacji stronySpis treści Data aktualizacji strony Aktualna data Data aktualizacji strony Często zdarza się, że internauta wchodzący na jakąś stronę, chciałby wiedzieć, kiedy była ona ostatnio aktualizowana. Dzięki takiej informacji mógłby wywnioskować, czy serwis jest aktualizowany na bieżąco i czy nie znajdzie w nim informacji, które dawno utraciły ważność, co w niektórych przypadkach może być bardzo ważne. Najprostszym sposobem określenia aktualności strony, jest podanie w widocznym miejscu (np...
- Aktualizacja / System newsów
Dla internautów odwiedzających naszą stronę bardzo przydatna może się okazać lista wprowadzonych ostatnio nowości w całym serwisie wraz z ich opisami. Najczęściej tego typu skrypty nazywa się systemem newsów. Umieszcza się ją zwykle na stronie głównej. Maja taką zaletę w stosunku do daty aktualizacji, że nie trzeba przeglądać wszystkich stron, aby znaleźć te, które były ostatnio modyfikowane (co w przypadku słabego transferu i obszernej witryny może dość długo trwać). Natomiast w odróżnieniu od...
- Menu drzewiaste / Skrypt menu drzewiastego
...miejscu strony - tam, gdzie ma się wyświetlać menu drzewiaste - wstaw kod oparty na technice zagnieżdżania wykazów (tylko wypunktowanie, czyli lista nieuporządkowana <ul>...</ul>). Sposób zagnieżdżania kolejnych punktów listy będzie automatycznie odzwierciedlał strukturę drzewa menu. Oto przykładowy kod: <ul id="tree0" class="tree"> <li><a href="...">Dokument 1</a></li> <li><a>Folder 2</a> <ul> <li><a href="...">Dokument 2.1</a></li> <li><a href="...">Dokument 2.2</a></li> </ul>...
- Skórki
...onclick="skin.reset(); return false">Przywróć wygląd domyślny</a> Alternatywnym sposobem wyboru skórki i przywracania wyglądu domyślnego może być lista rozwijalna: <select id="skin" onchange="if (this.value == '') skin.reset(); else skin.set(this.value)"> <option value="">Wygląd domyślny</option> <option value="/style1.css">Nazwa skórki 1</option> <option value="/style2.css">Nazwa skórki 2</option> <option value="/style3.css">Nazwa skórki 3</option> (...) </select> <script>...
- Media CSS / Zapytania mediów
Spis treści Zapytania mediów Kompatybilność wstecz Cechy mediów Szerokość Wysokość Szerokość urządzenia Wysokość urządzenia Orientacja Proporcje obrazu Proporcje obrazu urządzenia Głębia koloru Paleta kolorów Urządzenia monochromatyczne Rozdzielczość Technika wyświetlania Siatka Zapytania mediów (CSS 3 - interpretuje Internet Explorer 9, Firefox, Opera, Chrome) W dobie rozkwitu różnorakich urządzeń mobilnych, proste przygotowanie osobnych arkuszy CSS dla każdego medium...