stronie - Kurs HTML i CSS
HTML dla zielonych / Wielkość czcionki HTML <span "font-size">...duża czcionka), <span style="font-size: xx-large">...</span> (największa czcionka). Jak zmniejszyć rozmiar czcionki HTML? Zwykły tekst na stronie wyświetla się w domyślnym rozmiarze czcionki. Aby go pomniejszyć, trzeba objąć go znacznikiem z przypisanym atrybutem o odpowiedniej wartości: <span style="font-size: x-small">...</span> albo jeśli chcemy bardzo pomniejszyć tekst: <span style="font-size: xx-small">...</span>.
Aktualizacja / Data aktualizacji strony...src="date.js"></script> W wyróżnionym miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku date.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod: <script> document.write(new Date(document.lastModified).date('d.m.Y')); </script> Sposób wyświetlania daty można zmienić, podając w wyróżnionym miejscu inny szablon formatujący datę. Pojedyncze litery w tym tekście odpowiadają specjalnym kodom formatującym. Przykładowo: litera d zostanie zastąpiona...
- Aktualizacja / System newsów
...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 sygnalizowania nowości, system newsów zbiera w jednym miejscu wszystkie informacje...
- Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki
...miejscu strony, trzeba jeszcze wstawić: <script src="indeks_hasla.js"></script> ...i już można cieszyć się indeksem/wyszukiwarką na swojej stronie 🙂 Wieloznacznik (wildcard) Wieloznacznik (ang. wildcard) to symbol stosowany przy wyszukiwaniu tekstu, który zastępuje pewną grupę znaków. Wyszukiwarka w indeksie obsługuje dwa takie symbole: * zastępuje dowolny fragment wyrazu (również pusty) ? zastępuję dokładnie jedną literę Wieloznaczniki są przydatne, jeśli znamy tylko pewną...
- Menu drzewiaste / Skrypt menu drzewiastego
...W jednym dokumencie nie może być dwóch elementów z takim samym atrybutem id="...". Dlatego jeżeli chcemy wstawić drugie menu na tej samej stronie, trzeba dla niego użyć już zmodyfikowanego kodu, np.: <ul id="tree1" class="tree"> ... </ul> <script> new Tree("tree1"); </script> Aby menu prezentowało się w pełni funkcjonalnie, trzeba jeszcze przygotować trzy grafiki ikon i zapisać je w tym samym katalogu, co skrypt menu. Na przykład: closed.gif - przedstawia ikonę zamkniętego...
- Skórki
...link.setAttribute('href', url != '' ? url : original); } } this.show(); } var skin = new Skin(); Następnie na każdej podstronie serwisu, zaraz pod znacznikiem <link>, dołączającym domyślny zewnętrzny arkusz stylów, dodaj odwołanie do utworzonego właśnie pliku skin.js - za pomocą znacznika <script>...</script>: <link rel="stylesheet" href="style.css"> <script src="skin.js"></script> Ostatnim krokiem będzie przygotowanie specjalnej podstrony, na której będą...
- Widżety HTML / Szablon strony bez ramek
Spis treści Wstęp Szablon PHP Szablon SSI Wstęp Załóżmy, że Twój serwis składa się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego...
Menu w CSS / Poziome menu...pomiędzy pozycjami listy Wady: Trudności przy ustawieniu odnośników centralnie Konieczność przypisania własności clear następnemu elementowi na stronie Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; }...
- Media CSS / Zapytania mediów
...przykład dawne monitory nie potrafiły wyświetlić dowolnego koloru, a tylko barwy z tzw. palety bezpiecznej. Oznaczało to, że nawet jeśli podany na stronie kolor był bardzo zbliżony do barwy umieszczonej w palecie takiego monitora, nie został on wcale wyświetlony. Tym właśnie różnią się urządzenia ze stałą paletą kolorów od typowej dzisiaj głębi koloru. Ekran z 4-bitową głębią koloru wyświetla barwy poza jego zasięgiem jako ich przybliżenie, a nie zupełny brak koloru. Zastosowanie cechy...
- Dobre praktyki / CSS Zorientowane Obiektowo
...obiekty na mniejsze i stylizować je oddzielnie. Korzyścią takiego podejścia będzie możliwość osadzenia np. informacji o autorze na osobnej stronie albo na liście wszystkich autorów piszących w serwisie. Obiekty składowe są szczególnym przypadkiem złożonych atrybutów. Przykład <div class="Article"> <div class="Source">...</div> ... <div class="Author">...</div> </div> Rozszerzanie W programowaniu zorientowanych obiektowo termin ten tłumaczy się częściej jako...