Tworzenie stron WWW

Kurs HTML - darmowe szkolenie: tworzenie stron internetowych

Ćwiczenia HTML
HTML
2024-09-14 12:01:40
Zdobądź praktyczne umiejętności w HTML dzięki ćwiczeniom dla początkujących. Krok po kroku naucz się tworzyć własne strony internetowe, pisząc i modyfikując kod HTML.
Sławomir Kokłowski


Konwerter HTML/Tekst
Generatory
2024-08-25 12:35:20
Konwerter 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:19
Opis nowego atrybutu <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.
Sławomir Kokłowski

Komentarze
HTML5 / Piaskownica zabezpieczająca
HTML
2024-08-23 21:14:11
Dwie 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):
  • allow-downloads - zezwala pobierać pliki
  • allow-orientation-lock - zezwala na blokowanie orientacji ekranu
Sławomir Kokłowski

Komentarze
HTML5 / Nowe atrybuty HTML5
HTML
2024-08-22 21:15:17
To 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.

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.
Sławomir Kokłowski

Komentarze
HTML5 / Nowe atrybuty HTML5
HTML
2024-08-20 19:12:14
Opis dodatkowych, nowych atrybutów HTML5:
  • 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ń.
Sławomir Kokłowski

Komentarze
HTML5 / Sekcje
HTML
2024-08-15 13:18:05
Zaktualizowane 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.

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.
Sławomir Kokłowski

Komentarze
HTML5 / Generator daty i czasu
HTML
2024-06-30 15:16:53
Oznaczaj daty i godziny na swojej stronie szybko, łatwo i przyjemnie.
Sławomir Kokłowski

Komentarze
HTML5 / Wyszukiwarka <search>
HTML
2024-05-30 13:26:18
Nowy 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:44
W 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.

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.
Sławomir Kokłowski