stronie - Kurs HTML i CSS
Rozmiary CSS / Przepełnienie tekstu {text-overflow}...wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później - dlatego aby zabezpieczyć się na taką okoliczność, zwykle ukrywa się nadmiarową zawartość przy pomocy stylu "overflow: hidden" albo "overflow: auto". Kłopot w tym, że wtedy użytkownik może się w ogóle nie zorientować, że tekst został przycięty - zwłaszcza jeśli litery ułożą się w taki sposób, że żaden...
HTML5 / Blokowanie wyświetlania <link "stylesheet" blocking, script blocking, style blocking>...równocześnie. Czasami mogłoby to jednak prowadzić do nieoczekiwanych rezultatów. Dlatego na przykład osadzenie zewnętrznego skryptu JavaScript na stronie zwykle powoduje, że przeglądarka przestaje wykonywać inne operacje, dopóki go nie załaduje i nie uruchomi. Możemy jednak pozwolić na wykonywanie niektórych czynności równolegle - np. ładowanie innych zasobów zewnętrznych osadzonych w dokumencie - a zablokować jedynie samo wyświetlanie strony (ang. render), dopóki kod skryptu nie zakończy...
- HTML5 / Element edytowalny <... contenteditable>
...należy dodać atrybut contenteditable="true" do dowolnego elementu HTML, co sprawi, że użytkownicy będą mogli edytować jego zawartość bezpośrednio na stronie. Na przykład: <div contenteditable="true">Edytowalny tekst</div>. To sprawia, że zawartość tego <div> stanie się edytowalna. Jaki jest pożytek z contenteditable w HTML? Atrybut contenteditable w HTML jest użyteczny do tworzenia obszarów na stronie, które użytkownicy mogą edytować bezpośrednio w przeglądarce, co jest przydatne w...
- HTML5 / Asynchroniczne ładowanie skryptów <script src async>
...można załączać dynamiczne skrypty, napisane w języku JavaScript. Zwykle zapisuje się je w osobnych plikach z rozszerzeniem *.js i osadza na stronie przy użyciu znacznika SCRIPT - podając do nich odnośnik w atrybucie src="...". W trybie domyślnym wczytywanie dokumentu zostaje zatrzymane po napotkaniu tak osadzonego skryptu i kontynuowane dalej, dopiero kiedy w całości się on załaduje. Często tylko niepotrzebnie wydłuża to czas, po którym użytkownik może już przeglądać pozostałą treść...
- HTML5 / Pominięcie walidacji formularza <form novalidate>
...Sprawdzanie poprawności formularza HTML jest użyteczne, ale często niewystarczające, zwłaszcza w bardziej zaawansowanych aplikacjach. Walidacja po stronie klienta (tzn. bezpośrednio w przeglądarce) może być łatwo omijana przez złośliwych użytkowników, dlatego powinna być uzupełniona walidacją po stronie serwera, aby zapewnić pełne bezpieczeństwo i poprawność danych. Czym jest brak sprawdzania poprawności w HTML? Brak sprawdzania poprawności w HTML oznacza celowe pominięcie procesu...
- HTML5 / Rozmiary przycisku obrazkowego <input "image" width height>
...przycisku obrazkowego służącego do wysyłania formularza. Jeśli tego nie zrobimy, zanim obrazek się załaduje, przeglądarka zarezerwuje dla niego na stronie domyślną wolną przestrzeń. Zwykle nie będzie ona dokładnie odpowiadać rzeczywistym rozmiarom grafiki. Dlatego po załadowaniu obrazka, elementy strony w pobliżu i poniżej niego mogą przeskoczyć w dół lub na bok. Jeśli użytkownik dokładnie w tym czasie próbował kliknąć w coś na stronie, może trafić w inny element niż zamierzał.
- HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
...żadnych ograniczeń. Może to być przydatne np. w przypadku wyświetlania reklam. Chcielibyśmy mieć pewność, że reklama niczego nie popsuje na naszej stronie, ale jednocześnie nie chcemy, aby po kliknięciu w reklamę strona docelowa posiadała jakiekolwiek ograniczenia. To polecenie samo w sobie nie zezwala na otwieranie okien, a jedynie zdejmuje ograniczenia, jeśli już nowe okno zostanie otwarte. Aby było możliwe otwieranie nowych okien, należy posłużyć się wartością sandbox="allow-popups...
- Drukowanie CSS / Druk dwustronny @page :left :right
...jak książkę, dla wygodniejszego odwracania kartek marginesy wydruku powinny być asymetryczne. Gdy rozłożymy spięty wydruk, kartka leżąca po lewej stronie powinna mieć prawy margines szerszy, a kartka po prawej stronie - lewy margines szerszy. Taki efekt można uzyskać stosując pseudoklasy :left i :right, które pozwalają ustawić różne 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...
- Odsyłacze HTML / Serwerowa mapa odsyłaczy <a href, img ismap>
...Może się zdarzyć, że nie uzyskamy pożądanego kształtu z pomocą <area shape="...">. W takim przypadku można skorzystać z mapy odsyłaczy po stronie serwera. Idea jest prosta: w kodzie źródłowym strony nie definiujemy żadnych obszarów, a jedynie po kliknięciu linku wysyłamy razem z nim współrzędne "x, y" punktu na obrazku, który kliknął użytkownik. Następnie oprogramowanie na serwerze (np. skrypt PHP) odczyta te współrzędne i wyświetli odpowiednią treść. Na przykład można wstawić na...
- Odsyłacze HTML / Mapa odsyłaczy <img usemap, map, area>
...tekst, byleby był on taki sam w pierwszej i w drugiej linii, a dodatkowo w pierwszym wierszu musi być poprzedzony znakiem krzyżyka (#). Na jednej stronie nie mogą się znajdować dwie mapy o takiej samej nazwie! (...) Dalsze polecenia typu: <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">, które stworzą następne aktywne pola na obrazku. kształt Kształt obszaru w mapie odsyłaczy: rect - pole ograniczone prostokątem poly - pole ograniczone wielokątem...