html - Kurs HTML i CSS
Układ elastyczny CSS / FlexboxW zamierzchłych czasach sieci, gdy style CSS nie były jeszcze tak rozwinięte jak dzisiaj, rozplanowanie elementów na stronie realizowano się przy pomocy tabelek. Nie był to jednak najlepszy sposób, gdyż nie spełniał podstawowych zasad semantyki. Tabele zostały stworzone z myślą o prezentacji zbioru danych o powtarzającym się charakterze. Na szczęście style CSS wprowadziły nowe sposoby układania elementów na stronie, bez potrzeby używania w niewłaściwy sposób znaczników tabeli. Paradoksalnie...
- Reguły warunkowe CSS / Zapytania właściwości @supports
(CSS3 - interpretuje Firefox, Opera, Chrome) Język CSS ma wbudowany prosty system obsługi starszych wersji przeglądarek, które nie interpretują pełnej specyfikacji. Właściwości (cechy), których przeglądarka nie rozumie, są ignorowane. Oczywiście w takiej sytuacji strona nie będzie wyglądać dokładnie tak, jak założył jej twórca, ale nadal powinna być czytelna. Co ważne, nie spowoduje to odrzucenia całego arkusza stylów, więc dokument HTML zostanie poddany częściowemu formatowaniu - na tyle, ile...
- Dziedziczenie stylów CSS / Resetowanie wszystkich wartości {all}
(CSS 3 - interpretuje Firefox 27, Opera 24, Chrome 37) selektor { all: wartość } Selektor oznacza wybrany element, któremu chcemy zresetować sposób formatowania. Natomiast jako wartość należy podać: initial - przywrócenie wartości domyślnych inherit - wymuszenie dziedziczenia wartości unset - odwołanie wartości revert - przywrócenie wartości pierwotnych Sposoby przywracania domyślnych wartości bądź domyślnego zachowania, opisane wcześniej w tym rozdziale, mogą się okazać bardzo pomocne...
Aktualizacja / NowośćSpis treści Nowość Opcje nowości Nowość W serwisie WWW przydatne może się okazać zasygnalizowanie użytkownikowi wprowadzonych ostatnio nowości, poprzez umieszczenie w spisie treści (bezpośrednio obok danej pozycji) albo obok daty aktualizacji (na każdej ze stron) specjalnego obrazka lub napisu, wskazującego, że pozycja ta została ostatnio zaktualizowana. W ten sposób użytkownik już podczas przeglądania spisu treści odnajdzie wszystkie nowości. Zaletą użycia skryptu jest to, że nie musimy...
- Indeks, wyszukiwarka / Wygląd
Jeżeli nie odpowiada nam podstawowy wygląd indeksu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku indeks.css należy wkleić np.: #indeks { width: 300px; padding: 10px 0; background: #ccc; border: 2px outset #aaa; text-align: center; margin: 1em auto; } #indeks input.text { width: 290px; } #indeks select { width: 100%; margin: 2px 0 10px 0; } #indeks input.button { width: 100px; margin-left: 5px; margin-right: 5px; } W wyróżnionych...
- Galeria zdjęć HTML / Klasyczna galeria zdjęć
Jeśli nie masz czasu czytać wprowadzenia, możesz przejść od razu do części właściwej 😉 Na wielu stronach w Internecie można spotkać galerię zdjęć, stosowaną do przedstawienia kolekcji zdjęć, zwykle o dużych rozmiarach. Najczęściej jest ona tworzona w ten sposób, że na głównej stronie umieszcza się pomniejszone kopie obrazków oraz odsyłacze, po kliknięciu których następuje wczytanie obrazka w pełnych rozmiarach. Pozwala to uchronić się od wczytywania wszystkich dużych obrazków jednocześnie...
- Indeks, wyszukiwarka / Wyszukiwarka
Bardzo pomocne dla użytkowników może okazać się wstawienie formularza wyszukiwania na wszystkich stronach serwisu. Aby to zrobić, należy wstawić w nagłówku strony (<head>...</head>) odwołanie do pliku indeks.js: <script src="indeks.js"></script> Nie trzeba natomiast wstawiać odwołania do skryptu indeks_hasla.js, w którym znajduje się lista haseł. Następnie w wybranym miejscu strony wystarczy wkleić: <script> var indeks = new Indeks('indeks'); indeks.wstawWyszukiwarke('adres'); </script>...
- Menu rozwijane, otwierane, wysuwane / Menu wielopoziomowe
Prezentowany skrypt obsługuje również wielopoziomowe struktury menu. Zasada zagnieżdżania polega na zbudowaniu najpierw pierwszego, płaskiego poziomu, a następnie wybraniu określonego elementu <dd>...</dd> i umieszczeniu w nim podrzędnej listy <dl>...</dl>, ze swoimi nagłówkami <dt>...</dt> i elementami <dd>...</dd>. Oczywiście ilość poziomów zagnieżdżenia nie jest niczym ograniczona. W celu osadzenia wielopoziomowego menu, należy powtórzyć wszystkie przedstawione wcześniej kroki. Zmianie...
- Menu rozwijane, otwierane, wysuwane / Czas rozwijania/zwijania
Aby przyspieszyć lub zwolnić rozwijanie/zwijanie pozycji menu, należy powtórzyć wszystkie przedstawione kroki, poza ostatnim (wywołanie skryptu), który tym razem należy wykonać następująco: <script> new Menu('menu0', '', false, false, czasRozwin, czasZwin); </script> czasRozwin Czas w milisekundach (1 s = 1000 ms), w którym następuje rozwinięcie pojedynczego elementu menu (<dd>...</dd>). Aby wymusić natychmiastowe rozwinięcie wszystkich elementów, należy podać wartość 0 (zero). czasZwin...
- Menu rozwijane, otwierane, wysuwane / Menu otwierane
Spis treści Menu otwierane Opóźnienie przy otwieraniu/zamykaniu Menu otwierane Czasem przydatne jest wstawienie menu, które otwiera się po wskazaniu nagłówka myszką, a chowa automatycznie po usunięciu wskaźnika myszki z obrębu wybranego fragmentu menu. <script> new Menu('menu0', '', true); </script> Przykład Wskaż poniższe nagłówki menu myszką: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje...