lista - Kurs HTML i CSS
Media CSS / Zapytania mediówSpis 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...
- Szablon strony na DIV-ach / Responsywny szablon
...jedna wersja mobilna nie będzie optymalnym rozwiązaniem. Zamiast tego wyznacza się tzw. punkty przeskoku (ang. breakpoints). Punkty przeskoku to lista najczęściej używanych szerokości ekranu, przy których zachodzą istotne zmiany w szablonie naszej strony. Istotną zmianą może być na przykład: Zmiana typu szablonu ze stałego (który zwykle może być bardziej przydatny na dużych ekranach panoramicznych) na płynny (laptopy i większe tablety) Ułożenie menu i treści w jednej kolumnie (smartfony...
Nagłówek i treść HTML / Ikona strony <link "shortcut icon">...Najlepiej do tego nadają się grafiki wektorowe (np. SVG), które można bez ograniczeń powiększać bez żadnej utraty jakości. Rozdzielona spacjami lista rozmiarów ikon zapisanych w podanym pliku. Każdy rozmiar składa się z dwóch liczb rozdzielonych znakiem "x" (bez spacji!), które określają kolejno: szerokość i wysokość. type Typ MIME Ikona strony może się wyświetlić automatycznie, nawet bez potrzeby wstawiania powyższego znacznika, jeśli będzie nosiła nazwę favicon.ico i zostanie...
Tabele HTML / Ćwiczenia...(plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału. Umieść na stronie tabelę. Jeżeli tworzysz stronę o sobie, może to być np. lista Twoich ulubionych filmów. W tabeli możesz umieścić następujące kolumny: Gatunek Tytuł filmu Rok produkcji Ocena (w skali od 1 do 10) Odpowiednio oznacz komórki nagłówkowe tabeli za pomocą znaczników TH. Oddziel nagłówek tabeli od jej właściwej zawartości za pomocą znaczników THEAD i TBODY. Postaraj się, aby przynajmniej jeden...
- Dobre praktyki / Przykazania webmastera
...prób i błędów mogłoby zająć całe lata. Nie musisz jednak tracić tyle czasu - teraz najważniejsze wytyczne masz spisane w jednym miejscu. Poniższa lista zawiera wskazówki, do których stosowanie się może zapewnić wysoką jakość Twojej pracy, poprzez uniknięcie często powtarzanych przez osoby niedoświadczone błędów architektonicznych. Powinno Cię również uchronić to od zabrnięcia w ślepe uliczki, z których potem bardzo trudno byłoby się wycofać. W skrajnym przypadku źle napisanego kodu w ogóle...
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>...
Operacje na tablicach w JavaScript - Array.prototype / Łączenie tablic - concatArray.prototype.concat() Array.prototype.concat(item1) Array.prototype.concat(item1, item2...) Parametry: item1, item2... - lista elementów Wartość: Array - nowa tablica Tworzy nową tablicę, będącą połączeniem aktualnych i nowych elementów. Jeżeli argument funkcji sam jest tablicą, każdy z jego elementów jest dodawany po kolei do nowej tablicy. Oryginalna tablica nigdy nie jest zmieniana. Przykład Array.prototype.concat var items = [1, 2]; items.concat(); // [1, 2]...