stronie - Kurs HTML i CSS
HTML5 / Wyszukiwarka <search>...być objęty tylko sam formularz, a nie wyniki wyszukiwania. Znacznik SEARCH nie tworzy samoczynnie wyszukiwarki, a jedynie wskazuje miejsce na stronie, gdzie się znajduje jej formularz. Do stworzenia wyszukiwarki można się posłużyć językiem takim jak PHP (wyszukiwarka), JavaScript (filtrowanie) albo skorzystać z gotowych formularzy wyszukiwarek internetowych. Przykład <search> <search> <form action="search.php"> <input type="search" name="q"> <button type="submit">Szukaj</button>...
- HTML5 / Uwierzytelnienie <audio crossorigin, img crossorigin, link crossorigin, script crossorigin, video crossorigin>
...nastąpi z tej samej domeny (to samo co użycie crossorigin jako atrybut logiczny - tzn. bez podania wartości). Czyli przykładowo jeśli na naszej stronie wstawimy obrazek znajdujący się na innym serwerze, będziemy mieli pewność, że jego zawartość nie będzie w żaden sposób dopasowana do użytkownika, który aktualnie odwiedza naszą stronę (jest to wartość domyślna). use-credentials - zostaną wysłane pełne dane uwierzytelniające bez względu na domenę. Steruje przesyłaniem danych...
- HTML5 / Atrybuty danych <... data-...>
...W nazwach atrybutów danych nie można używać wielkich liter. wartość Dowolny tekst HTML5 pozwala webmasterom nadawać dowolnemu znacznikowi na stronie swoje własne atrybuty, pod warunkiem że ich nazwa rozpoczyna się od: data- (np. data-mojatrybut="..."). Nie mają one żadnego wpływu na sposób wyświetlania strony ani na semantykę tekstu. Ich wartości wykorzystuje się w dynamicznych skryptach JavaScript - wstawianych do dokumentu za pomocą znaczników SCRIPT. Jeżeli nie korzystasz z takich...
- HTML5 / Priorytet ładowania <img fetchpriority, link fetchpriority, script fetchpriority>
...innych tego samego rodzaju. low - wskazany zasób załaduje się później względem innych tego samego rodzaju. auto - wartość domyślna Na stronie internetowej możemy osadzić wiele zasobów ładowanych z zewnętrznych plików - takich jak: obrazki, skrypty czy arkusze stylów. Aby przyspieszyć proces wczytywania takich elementów, mogą być one ładowane równocześnie. Przeglądarka jednak nie wie, które z nich w każdej spośród tych grup są ważniejsze, a które mniej ważne. W konsekwencji...
- HTML5 / Przeciągnij i upuść <... draggable>
...Przeciąganie w HTML odnosi się do funkcji przeciągania i upuszczania, która pozwala użytkownikom przenosić elementy z jednego miejsca do innego na stronie internetowej. Dzięki zastosowaniu API Drag and Drop, można oznaczyć elementy jako przeciągane za pomocą atrybutu draggable="true", a następnie obsługiwać zdarzenia takie jak dragstart, dragover, i drop, aby określić, co powinno się stać podczas przeciągania i upuszczania tych elementów. Jak działa przeciąganie i upuszczanie kodu HTML...
- HTML5 / Przypisanie pola do formularza <button form, fieldset form, input form, object form, output form, select form, textarea form>
...musiały się znajdować wewnątrz znacznika FORM. W przeciwnym razie nie były wysyłane z formularzem. HTML5 pozwala umieścić kontrolki gdziekolwiek na stronie i skojarzyć je z wybranym formularzem za pomocą atrybutu form="...". Jako wartość atrybutu należy podać identyfikator nadany formularzowi (atrybutem id="..."). Przykład <form, input form> <form action="?" id="formularz"></form> <input type="text" name="pole" form="formularz">
- HTML5 / Tryb wpisywania <... inputmode>
...tryb Należy podać jedną z poniższych wartości: none - przeglądarka nie powinna w ogóle wyświetlać klawiatury ekranowej. Jest przydatne, jeśli na stronie wyświetlamy własną kontrolkę klawiatury. text - klawiatura ekranowa umożliwiająca wprowadzanie tekstu w lokalnym języku użytkownika. tel - klawiatura ekranowa umożliwiająca wprowadzanie numerów telefonów. Powinna zawierać klawisze dla cyfr od 0 do 9, znak "#" oraz znak "*". W niektórych lokalizacjach może również zawierać etykiety...
Drukowanie CSS / Rozmiar papieru @page {size}...Typowa drukarka najczęściej drukuje strony w orientacji pionowej (tzw. portret). Taki układ zwykle najlepiej sprawdza się przy drukowaniu tekstu. Na stronie możemy mieć jednak także zdjęcia np. krajobrazów, które typowo mają układ poziomy. W takiej sytuacji zdjęcie nie zostanie automatycznie obrócone, a więc zajmie tylko niewielki fragment kartki papieru. Użytkownik może co prawda samodzielnie zmienić orientację papieru przed uruchomieniem wydruku, ale nie wszyscy potrafią to zrobić. W takiej...
- Drukowanie CSS / Okładka wydruku @page :first
@page :first { cecha: wartość } Jako cecha i wartość można wstawić jedną lub więcej deklaracji odpowiednich dla kontekstu strony. Na pierwszej stronie wydruku często znajduje się okładka, która różni się wizualnie od pozostałych stron. Na przykład może ona zawierać grafikę rozpościerającą się na całej powierzchni kartki bez żadnych marginesów. Taki efekt pozwala uzyskać pseudoklasa :first, dzięki której możemy ustawić marginesy na okładce inne niż na pozostałych stronach wydruku - np...
- Drukowanie CSS / Po co drukować strony internetowe?
...jak przełamanie strony przy pomocy page-break-before i page-break-after, blokadę przełamania stron za pomocą page-break-inside, a także linijki na stronie z użyciem widows i orphans. Dodatkowo, pokażemy, jak wykorzystywać kontekst strony z @page, w tym druk dwustronny i definiowanie rozmiaru papieru. Na końcu wyjaśnimy podstawowe reguły @media print i podpowiemy, jak projektować treści odpowiednie zarówno na ekran, jak i na papier. A to jeszcze nie wszystko 🙂 Zadbaj o to, aby Twoja strona...