przykład - Kurs HTML i CSS
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...przy ustawianiu tła obrazkowego na stronach internetowych, zobacz rozdział: Tło obrazkowe. Przykład {background, color} Poniżej znajdują się przykłady różnych grafik kafelków (aby były lepiej widoczne zostały powiększone i obramowane na czerwono) wraz z odpowiadającymi im tapetami. Zeszyt w kratkę To jest przykład tapety w postaci zeszytu w kratkę. Zeszyt w linie To jest przykład tapety w postaci zeszytu w linie. Ukośna siatka To jest przykład tapety w postaci ukośnej siatki...
- 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...
- Języki / Skróty nazw języków
...Drugi człon (opcjonalny), zwyczajowo pisany wielkimi literami, może wskazywać kraj, terytorium lub region, w którym mówi się w tym języku. Na przykład en oznacza ogólny język angielski, a en-US - język angielski jakim mówi się w Stanach Zjednoczonych. Jeśli w danym języku mówi się tylko w jednym kraju, terytorium bądź regionie, to co prawda możemy wtedy użyć formy dwuczłonowej (np. pl-PL), jednak najczęściej w takim przypadku korzysta się z krótszego zapisu jednoczłonowego (np. pl)...
- Nagłówek i treść HTML / Język strony <html lang, link hreflang>
...bieżącego dokumentu w podanym języku. Polecenie to może być przydatne, jeśli tłumaczymy artykuły w naszym serwisie na kilka różnych języków. Na przykład podstawową wersją może być język polski, ale udostępniamy również język angielski. Możliwe jest oczywiście wskazanie więcej niż jednej alternatywnej wersji językowej. W takim przypadku wystarczy dodać kilka takich znaczników - każdy dla innego języka. Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden znacznik <head>...
- Media CSS / Zapytania mediów
...Dodatkowe możliwości możemy uzyskać również w przypadku sterowania wyglądem strony wyświetlanej na ekranie tradycyjnego monitora komputerowego. Na przykład jeśli użytkownik ma ustawioną wyższą rozdzielczość ekranu, możemy wyświetlić mu dodatkową kolumnę treści. Co więcej, można płynnie dopasowywać wygląd strony przy przeciąganiu rozmiaru okna przeglądarki przez użytkownika. Zapytania mediów wpisuje się dokładnie w tych samych miejscach, co przy tradycyjnym wyborze medium, np.: @import...
- Przeglądarka zdjęć
...miejscu oczywiście należy podać lokalizację utworzonego wcześniej pliku przegladarka_zdjec.js. Teraz wystarczy wkleić na stronie w wybranym miejscu przykładowy kod: <script> var przegladarka_zdjec = new PrzegladarkaZdjec('przegladarka_zdjec', new Array( new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis'), new Array('zdjęcie', 'Tytuł', 'Opis') )); </script> zdjęcie Lokalizacja pliku zdjęcia Tytuł Tytuł zdjęcia Opis Szerszy opis zdjęcia (opcjonalnie)...
- Multimedia HTML / Osadzenie pliku <embed>
...stosować go dla plików audio-wideo, ponieważ dla nich zostały przeznaczone specjalne odtwarzacze multimedialne. Jak osadzić PDF na stronie? Na przykład jeśli plik nazywa się "dokument.pdf" i znajduje się w tym samym katalogu na dysku komputera co dokument *.html, w którym chcemy bezpośrednio wyświetlić zawartość pliku PDF, można się posłużyć następującym znacznikiem: <embed src="dokument.pdf" width="1000" height="600">. Jak utworzyć link do pliku PDF? Na przykład jeśli plik nazywa...
- Multimedia HTML / Uniwersalny sposób odtwarzania plików <a "jpg, avi, wav, txt, doc, rtf, xls, pdf", object>
...avi, wav, txt, doc, rtf, xls, pdf"> Zagnieżdżanie plików multimedialnych <object> Wstęp Polecenia multimedialne sprawiają wiele kłopotów. Na przykład <embed> ma tę zaletę, że skojarzony z nim plik będzie odtwarzany bezpośrednio na stronie. Niestety jest to również jego wadą. Pliki multimedialne mają zwykle duże rozmiary, dlatego wczytywanie takiej strony może trwać potwornie długo. Poza tym polecenie <embed> nie zawsze działa poprawnie, szczególnie jeśli chodzi o jego atrybuty...
- Formularze HTML / Wyczyszczenie danych <input "reset">
...jeden z poniższych przycisków: Wpisz tu jakiś tekst. Odpowiedź nr1 Odpowiedź nr2 Odpowiedź nr1 Odpowiedź nr2 value="Kliknij tutaj!"... To jest przykład bez podania wartości VALUE. Zwróć uwagę, że kliknięcie któregokolwiek z powyższych przycisków, spowoduje wyczyszczenie wszystkich pól formularza (jeśli był on wcześniej wypełniony). Blokada pola <input "reset" disabled> Możliwe jest także zablokowanie przycisku (nie obsługuje Opera 6): <form action="..."> <input type="reset...
- HTML5 / Załącznik <figure, figcaption>
...bo inaczej dokument utraciłby spójność. Przykład <figure> <p>Język HTML5 upraszcza deklarowanie strony kodowej dokumentu. Na <a href="#listing1">przykładzie 1</a> możemy się przekonać, jak to zrobić.</p> <figure id="listing1"> <pre><code> <meta charset="UTF-8"> </code></pre> </figure> <p>Krótszą formę ma również deklaracja typu dokumentu.</p> Warto zwrócić uwagę, że gdyby tekst akapitu był sformułowany w inny sposób, użycie znacznika FIGURE mogłoby być raczej niewłaściwe...