dokument - Kurs HTML i CSS
HTML5 / Nowe atrybuty HTML5Język HTML5 definiuje nie tylko zupełnie nowe elementy (znaczniki), ale również dodatkowe atrybuty, które można przypisywać również do elementów, które były zdefiniowane już w specyfikacji HTML 4.01. Atrybuty Zastosowanie Opis allow IFRAME Polityka uprawnień, która ma zostać zastosowana do zawartości elementu IFRAME allowfullscreen IFRAME Czy pozwolić zawartości elementu IFRAME na użycie funkcji requestFullscreen() as LINK (rel="preload" lub rel="modulepreload") Potencjalny...
- HTML5 / Zmienione elementy i atrybuty HTML5
...w poprzedzającym go znaczniku SCRIPT. S Oznacza treść, która nie jest dłużej trafna lub istotna, z punktu widzenia pozostałej zawartości dokumentu. SCRIPT Istnieje możliwość określenia dodatkowych wartości atrybutu type="..." - np.: "text/plain", "text/xml", "application/octet-stream", "application/xml". W tak oznaczonym elemencie można zapisać surowe dane dla dynamicznych skryptów używanych na stronie. SMALL Reprezentuje przypisy (wyjaśnienia, zastrzeżenia, ograniczenia...
- HTML5 / Wstępne ładowanie <link "preload" as>
...rodzaj W zależności od języka, w którym wybrane zasoby zewnętrzne są używane, można podać następujące wartości: w języku HTML - audio, document (dokument HTML), embed, frame, iframe, image, object, track, video w języku CSS - font, style (zewnętrzny arkusz stylów oraz import arkusza stylów) w języku JavaScript - fetch, json, script w języku XML - xslt (ang. Extensible Stylesheet Language Transformations) typ Odpowiedni typ MIME lokalizacja Ścieżka dostępu albo adres URL wskazujące...
Selektory pseudoklas CSS / Korzeń :root...{ cecha: wartość } Wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Każdy dokument HTML ma w drzewie dokumentu dokładnie jeden korzeń, tzn. element najbardziej nadrzędny, który nie ma żadnego rodzica, za to zawiera w sobie (bezpośrednio lub poprzez zagnieżdżenie) wszystkie inne elementy dokumentu. W języku HTML korzeniem jest zawsze element HTML, zatem selektor ten jest w tym przypadku raczej mało przydatny, ponieważ...
- Drukowanie CSS / Wydruk @media print
Jest oczywiste, że dokument wydrukowany na drukarce, wygląda inaczej niż na ekranie monitora (w przeglądarce internetowej). Podczas drukowania zwykle pomijane są wszystkie parametry, które dotyczą tła (trudno sobie wyobrazić wydrukowanie strony z czarnym tłem 🙂). Z uwagi na odrębność różnych mediów, wprowadzono możliwość definiowania oddzielnych własności dla różnych form prezentacji dokumentu. Na przykład rozmiar czcionki można ustalić zarówno dla ekranu, jak i dla drukarki, lecz dokumenty...
- Drukowanie CSS / Druk dwustronny @page :left :right
...marginesy wydruku dla stron lewych i prawych. W językach o kierunku tekstu od lewej do prawej (np. język polski lub angielski) pierwszą stroną dokumentu (okładką) jest strona prawa. Natomiast jeśli dokument zawiera w większości tekst w języku pisanym od prawej do lewej (np. język arabski lub hebrajski), pierwszą stroną będzie strona lewa. Przykład @page :left :right Druk dwustronny przygotowany do spięcia wzdłuż środkowej krawędzi: @page { margin: 1cm; } @page :left { margin-right...
- Media CSS / Dostosowanie stylów CSS do różnych urządzeń
Jedną z najważniejszych zalet stylów jest możliwość określenia, jak będzie wyglądał dokument w różnych mediach: na ekranie, papierze, z syntezatorem mowy, z urządzeniem do czytania braillem itp. Pewne cechy CSS zostały stworzone tylko dla określonych mediów (np. cue-before - sygnał wywoławczy dla medium aural). Jednakże różne media mogą dzielić te same własności, lecz często wymagają odmiennych wartości. Na przykład rozmiar czcionki (font-size) można ustawić zarówno dla ekranu, jak i dla...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...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 będzie możliwe. Zdarzają się jednak przypadki zbyt skomplikowane, aby do ich obsługi wystarczył ten prosty mechanizm. Zaimplementowana w przeglądarce obsługa jednej właściwości przy jednoczesnym braku innych może poważnie popsuć wygląd strony, a w przypadku skrajnym nawet...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...<img src="..."> w języku HTML, tutaj ścieżkę dostępu należy konstruować względem lokalizacji pliku z arkuszem stylów, a nie względem adresu dokumentu HTML! kolor tekstu Definicja koloru tekstu strony Tło obrazkowe strony (tapeta) zawsze powinniśmy ustalać jednocześnie z kolorem tła oraz tekstu całej strony. Ponadto należy zadbać o odpowiedni kontrast pomiędzy tłem a kolorem tekstu, ponieważ w przeciwnym razie treść strony może się stać zupełnie nieczytelna. W praktyce oznacza to...
Galeria zdjęć HTML / Klasyczna galeria zdjęć...podawać link bezpośrednio do dużego obrazka, tworzy się dodatkową stronę z grafiką wstawioną na niej za pomocą znacznika <img> i dopiero taki dokument podaje się w linku: <a target="_blank" href="ścieżka do strony z dużym obrazkiem"><img src="ścieżka do pliku miniaturki obrazka" alt="Tekst alternatywny" border="0"></a> Jak łatwo zauważyć, aby stworzyć klasyczną galerię zdjęć, trzeba napisać tyle stron, ile mamy obrazków - po jednej dla każdego dużego egzemplarza (a nawet co najmniej o...