przykład - Kurs HTML i CSS
HTML5 / Wstępne ładowanie <link "preload" as>...aplikacji. Działa to poprzez wczytywanie zasobów, takich jak skrypty lub style, z wyprzedzeniem, aby były one dostępne, gdy będą potrzebne. Na przykład, aby wstępnie załadować skrypt, można użyć <link rel="preload" href="script.js" as="script">. Stosuje się je, gdy zasoby są kluczowe dla wydajności lub w czasie, gdy nie są jeszcze bezpośrednio używane, ale będą potrzebne wkrótce. Jak działa wstępne ładowanie? Wstępne ładowanie działa poprzez wczytywanie zasobów, takich jak pliki...
- HTML5 / Element edytowalny <... contenteditable>
...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 aplikacjach...
- HTML5 / Przeciągnij i upuść <... draggable>
...w HTML, należy ustawić atrybut draggable="true" na elemencie, który ma być przeciągany, oraz obsłużyć zdarzenia dragstart, dragover, i drop. Na przykład: <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', event.target.id)" id="dragItem">Przeciągnij mnie</div><div ondragover="event.preventDefault()" ondrop="handleDrop(event)" id="dropZone">Upuść tutaj</div>.
- HTML5 / Element ukryty <... hidden>
...Aby ukryć coś w HTML, można użyć atrybutu hidden, który sprawia, że dany element nie jest widoczny na stronie i nie zajmuje miejsca w układzie. Na przykład: <div hidden>Ukryty element</div>. Taki element pozostaje w kodzie HTML, ale nie jest wyświetlany użytkownikom. Jak zrobić ukryty tekst w HTML? Aby zrobić ukryty tekst w HTML, można użyć atrybutu hidden na elemencie zawierającym tekst. Przykład: <span hidden>Ukryty tekst</span>. Taki tekst nie będzie widoczny na stronie, ani nie...
- HTML5 / Walidacja pól formularza <input pattern>
...końcu trzy cyfry (np.: 12-345): <input name="kod_pocztowy" pattern="^[0-9]{2}-[0-9]{3}$" title="pięć cyfr w postaci XX-XXX (np. 12-345)"> Zobacz przykład: pattern="..." Pytania i odpowiedzi Co to znaczy błąd walidacji formularza? Błąd walidacji formularza oznacza, że dane wprowadzone przez użytkownika nie spełniają określonych kryteriów poprawności, takich jak brak wymaganych pól, niewłaściwy format danych (np. adres e-mail), czy też niezgodność z innymi ograniczeniami (np. minimalna...
- HTML5 / Pole obowiązkowe <input required, select required, textarea required>
...value="">Wybierz... <option value="kobieta">Kobieta <option value="mezczyzna">Mężczyzna </select> *</li> </ul> <p>* Pola obowiązkowe</p> Zobacz przykład: required
- HTML5 / Wykaz z numeracją odwrotną <ol reversed>
(interpretuje: Firefox 18, Opera 15, Chrome 20) <ol reversed>...</ol> Atrybut logiczny (wstawiany bez wartości) reversed ustala odwrotną kolejność numeracji (...3, 2, 1) punktów listy uporządkowanej (wykazu). Numer, od którego rozpocznie się lista, zależy od liczby jej wszystkich punktów albo atrybutu start="..." (jeśli został ustawiony). Pytania i odpowiedzi <ol reversed start, li> Jak odwrócić numerację w HTML? Aby odwrócić numerację w HTML, można użyć atrybutu reversed w elemencie...
- HTML5 / Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>
(interpretuje: Firefox 25, Opera 15, Chrome 20) Z użyciem apostrofu (przydatne kiedy wartość zawiera cudzysłowy): <iframe srcdoc='kod'></iframe> Z użyciem cudzysłowu (przydatne kiedy wartość zawiera apostrofy): <iframe srcdoc="kod"></iframe> kod Dowolny tekst ze znacznikami HTML. Może on składać się z wielu linijek. Dzięki atrybutowi srcdoc='...' do ramki lokalnej nie musimy wczytywać osobnego pliku HTML za pomocą atrybutu src="...", ale możemy wprost podać kod HTML, który się w...
- HTML5 / Piaskownica zabezpieczająca <iframe sandbox>
Blokada wszystkich potencjalnie niebezpiecznych funkcji: <iframe sandbox></iframe> Odblokowanie wybranych funkcji: <iframe sandbox="pozwolenia"></iframe> pozwolenia Należy podać dowolną liczbę poniższych wartości rozdzielając je spacjami: allow-downloads - zezwala pobierać pliki - zarówno standardową metodą jak i poprzez atrybut download. allow-forms - pozwala wysyłać formularze. allow-modals - pozwala otwierać okna modalne, tzn. takie które blokują stronę dopóki użytkownik ich nie...
Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>...elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie. Komentarze w arkuszu stylów pisze się używając znaków: /* (otworzenie komentarza) oraz */ (zamknięcie komentarza), np.: /*12345*/. Wszystko...