Tworzenie stron WWW
Kurs HTML - darmowe szkolenie: tworzenie stron internetowych
- Konwerter HTML/Tekst
- Generatory
2024-08-25 12:35:20Konwerter HTML/Tekst pozwala przekształcić dowolny kod HTML w taki sposób, aby można go było bezpiecznie wkleić jako tekst w kodzie źródłowym. Teraz można dodatkowo sterować znakami, które mają być konwertowane. Nowa funkcja może się okazać szczególnie przydatna przy osadzaniu kodu HTML w ramce lokalnej w HTML5.Sławomir Kokłowski - HTML5 / Filmy i dźwięk
- HTML
2024-08-24 10:54:19Opis nowego atrybutuSławomir Kokłowski<video playsinline>...</video>
, który pozwala zablokować irytujące zachowanie niektórych przeglądarek internetowych polegające na domyślnym odtwarzaniu wideo w trybie pełnoekranowym.
Komentarze - HTML5 / Piaskownica zabezpieczająca
- HTML
2024-08-23 21:14:11Dwie nowe dyrektywy pozwalające precyzyjnie sterować zabezpieczeniami narzucanymi na widżety w ramkach lokalnych (np. filmiki YouTube, posty z mediów społecznościowych czy reklamy):Sławomir Kokłowski- allow-downloads - zezwala pobierać pliki
- allow-orientation-lock - zezwala na blokowanie orientacji ekranu
Komentarze - HTML5 / Nowe atrybuty HTML5
- HTML
2024-08-22 21:15:17To prawdopodobnie największa aktualizacja rozdziału HTML5 od momentu pojawienia się go w kursie! Informacje o nowych atrybutach HTML5 zostały przeorganizowane w 36 osobnych podrozdziałów (sic!). Przy okazji ich opisy zostały zaktualizowane i znacznie poszerzone. Pojawiły się nowe przykłady, kody źródłowe, wytłumaczenia oraz naprawdę imponująca dawka pytań i odpowiedzi. A w podrozdziale Nowe atrybuty HTML5 znajdziecie poręczną tabelkę, która pozwoli jednym rzutem oka znaleźć odpowiednie informacje.Sławomir Kokłowski
Zachęcam do zapoznania się z nowościami i odświeżenia swojej wiedzy. Jestem pewny, że w tej solidnej dawce informacji każdy znajdzie coś ciekawego i przydatnego, czego wcześniej nie wiedzieliście na temat języka HTML5.
Komentarze - HTML5 / Nowe atrybuty HTML5
- HTML
2024-08-20 19:12:14Opis dodatkowych, nowych atrybutów HTML5:Sławomir Kokłowski- as - pozwala określić typ ładowanego zasobu, np. "image" dla obrazów czy "style" dla arkuszy stylów, co pomaga przeglądarkom lepiej zarządzać buforowaniem i priorytetem pobierania tych zasobów.
- autocapitalize - kontroluje automatyczną kapitalizację tekstu w polach wejściowych, umożliwiając twórcom stron określenie, czy pierwsza litera wpisywanego tekstu powinna być automatycznie zamieniana na wielką, co może być przydatne w formularzach lub polach edycji.
- blocking - wskazuje, które operacje (np. renderowanie strony) powinny zostać wstrzymane, dopóki określony zasób, taki jak obraz lub skrypt, nie zostanie w pełni pobrany, co jest kluczowe dla zapewnienia płynnego ładowania strony.
- enterkeyhint - sugeruje, jakie działanie powinno być wykonane, gdy użytkownik naciśnie klawisz "Enter" na wirtualnej klawiaturze, co pozwala dostosować funkcjonalność klawisza do kontekstu, np. do wysyłania formularza lub przejścia do następnego pola.
- fetchpriority - umożliwia twórcom stron określenie priorytetu pobierania zasobów, takich jak obrazy czy skrypty, pomagając przeglądarce zdecydować, które elementy ładować najpierw, aby przyspieszyć wczytywanie kluczowych treści.
- inert - wyłącza interaktywność elementu oraz jego potomków, sprawiając, że staje się on "niewidoczny" dla interakcji użytkownika (np. nie można na niego kliknąć ani ustawić na nim fokusu), co jest przydatne w przypadku dialogów modalnych lub ukrywania treści.
- inputmode - sugeruje typ wirtualnej klawiatury, którą przeglądarka powinna wyświetlić dla danego pola tekstowego, np. klawiaturę numeryczną dla pól wprowadzania numerów telefonu, co poprawia doświadczenie użytkownika podczas wprowadzania danych.
- loading - kontroluje sposób ładowania obrazów i ramek IFRAME, umożliwiając ich leniwe ładowanie (lazy loading), co oznacza, że zasoby te zostaną pobrane dopiero wtedy, gdy staną się widoczne na ekranie, co może znacząco przyspieszyć ładowanie strony.
- popover, popovertarget, popovertargetaction - zarządzają wyświetlaniem elementów typu "popover" (małych okienek z informacjami lub opcjami), pozwalając twórcom stron na kontrolowanie, kiedy i jak takie elementy się pojawiają, oraz co powinno się wydarzyć po interakcji z nimi, co jest przydatne do tworzenia interaktywnych menu i powiadomień.
Komentarze - HTML5 / Sekcje
- HTML
2024-08-15 13:18:05Zaktualizowane informacje na temat algorytmu tworzenia automatycznego spisu treści dokumentu. Początkowo HTML5 wprowadził w tej kwestii sporą rewolucję, przedstawiając zupełnie nowe elementy tworzące sekcje w dokumencie niezależnie od tytułów nagłówkowych H1-H6. Potem jednak nastąpił powrót do algorytmu dobrze znanego z języka HTML 4.01, gdzie jedyny wpływ na kolejność numeracji nagłówków sekcji ma określony poziom tytułu nagłówkowego. Znaczniki sekcji (ARTICLE, ASIDE, NAV, SECTION) co prawda nadal zostały utrzymane, ale odgrywają rolę w zasadzie już tylko do określania zakresu działania elementu FOOTER.Sławomir Kokłowski
Usunięto również pojęcie korzenia sekcji, którym dotychczas były elementy: BLOCKQUOTE, BODY, DETAILS, FIELDSET, FIGURE, TD. Znaczniki te nadal istnieją, ale nie wprowadzają już żadnego swojego odrębnego spisu treści, który przy poprzednim podejściu był zupełnie oderwany od reszty dokumentu.
Zmiany te były podyktowane potrzebą zapewnienia lepszej dostępności dokumentów HTML5 m.in. dla syntezatorów mowy, które nigdy nie dostosowały się do uprzednio zaproponowanego algorytmu. Bez wątpienia upraszcza to jednak życie również wszystkim webmasterom, którym tak skomplikowany algorytm często sprawiał spore problemy.
Komentarze - HTML5 / Generator daty i czasu
- HTML
2024-06-30 15:16:53Oznaczaj daty i godziny na swojej stronie szybko, łatwo i przyjemnie.Sławomir Kokłowski
Komentarze - HTML5 / Wyszukiwarka <search>
- HTML
2024-05-30 13:26:18Nowy element HTML5 pozwalający wskazać na stronie formularz wyszukiwania lub filtrowania danych.Sławomir Kokłowski
Komentarze - Test przeglądarki
- Generatory
2024-04-07 12:11:44W nowej wersji generatora "Test przeglądarki" pojawiła się dodatkowa sekcja: Media. Znajdują się w niej informacje o wspieranych przez przeglądarkę formatach i kodekach audio/wideo. Informacje te mogą okazać się przydatne, jeśli chcesz osadzić na swojej stronie tego typu materiały, ale wolisz mieć nad nimi większą kontrolę niż w przypadku umieszczenia np. na Youtube. Przed przygotowaniem materiału do publikacji na stronie warto sprawdzić na kilku urządzeniach (np. komputer i smartfon), jakie formaty są wspierane przez popularne przeglądarki. W przeciwnym razie może się okazać, że użytkownicy nie będą w stanie otworzyć takiego pliku.Sławomir Kokłowski
Innym ważnym elementem tego generatora jest wykrywanie wsparcia dla architektury 32/64 bitowej. Jeżeli generator wskazuje nazwę systemu operacyjnego "Windows", w sekcji "Urządzenie" wyświetla się 64 bity, natomiast w sekcji "Przeglądarka" widnieje 32-bit, oznacza to, że Twoja przeglądarka internetowa może nie działać optymalnie. Poszukaj pliku instalacyjnego odpowiedniego dla architektury 64-bit, a może się okazać, że nagle program zacznie działać płynniej. Uwaga: aby nie utracić zgromadzonych danych (np. zakładek), przed odinstalowaniem dotychczasowej 32-bitowej wersji programu upewnij się, że masz włączoną synchronizację danych albo ręcznie wyeksportuj wybrane dane, aby później zaimportować je w nowej, 64-bitowej wersji przeglądarki, po jej zainstalowaniu. - Test przeglądarki
- Generatory
2024-03-27 09:00:14Teraz, dzięki naszemu narzędziu, możesz jeszcze dokładniej sprawdzić, jak Twoja przeglądarka, system operacyjny i urządzenie są skonfigurowane:Sławomir Kokłowski- Przeglądarka: poznaj nazwę, markę, wersję, język, wsparcie ciasteczek i plików PDF.
- System operacyjny: sprawdź nazwę i wersję Twojego systemu operacyjnego.
- Urządzenie: dowiedz się więcej o swoim urządzeniu mobilnym bądź tradycyjnym, pamięci RAM, liczbie rdzeni procesora, architekturze sprzętowej, liczbie bitów i dostępnych funkcjach multimedialnych (mikrofon, kamera, dźwięk).
- Ekran: sprawdź rozdzielczość, głębię kolorów, orientację ekranu, punkty dotykowe i obsługę multiscreen.
- Połączenie: zobacz, czy jesteś online, jak szybko działa Twoje połączenie oraz informacje o czasie ping.
- Bateria: poznaj aktualny poziom naładowania baterii oraz czas do pełnego naładowania/rozładowania.