stronie - Kurs HTML i CSS
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...
Dla nauczycieli / Scenariusz lekcji informatyki dla szkoły podstawowej...5 min - Wprowadzenie: czym jest HTML, do czego służy (możesz się posłużyć podcastem). 10 min - Pokaz struktury dokumentu HTML w edytorze na stronie. 15 min - Uczniowie przepisują gotowy kod z rozdziału Ramy dokumentu HTML i dodają własne akapity oraz pogrubienia/pochylenia tekstu. 10 min - Wspólne omówienie i poprawki kodu. 5 min - Zadanie domowe: dokończ stronę z własnym tekstem - np. Moje hobby, z użyciem przynajmniej 3 znaczników formatowania tekstu. Lekcja 2 - Wstawianie...
- Podcast HTML / #1 HTML dla zielonych
...że znaczniki zamykamy zawsze w kolejności odwrotnej niż były otwierane. Kolor tła i pozioma linia Aby zmienić domyślny kolor tła i tekstu na całej stronie, należy zmodyfikować znacznik <body>, dodając atrybut style. Kolor tła i tekstu zawsze powinno się ustawiać jednocześnie, dbając o kontrast. <body style="background-color: black; color: white"> Tu jest właściwa treść strony </body> Poziomą linię, która może rozdzielać sekcje tematyczne, wstawia się za pomocą znacznika <hr>. Znacznik...
- Podcast HTML / #4 Odsyłacze HTML
...stron w obrębie całego Internetu: <a href="https://...">. Odsyłacz do etykiety (kotwice/zakładki): służy do tworzenia elektronicznej zakładki na stronie: <a href="#...">. Pozwala na bezpośrednie przeniesienie użytkownika do konkretnego, zaznaczonego miejsca w dokumencie, co ułatwia nawigację. Odsyłacze funkcjonalne i protokolarne Ta grupa obejmuje linki, które inicjują specyficzne działania klienta (np. wysyłanie poczty, połączenia, transfer plików) przy użyciu różnych protokołów...
- Podcast HTML / #6 Multimedia HTML
...zwiększają objętość strony, dlatego warto stosować kompresję. Osadzanie multimediów innych niż grafika Znacznik <embed> pozwala osadzić na stronie WWW pliki takie jak animacje, filmy lub muzyka. Wtyczka (plug-in) to niewielki program, który jest doinstalowywany do przeglądarki, aby umożliwić odtwarzanie danego pliku. Znacznik <embed src="ścieżka" width="x" height="y"> współpracuje z różnymi plikami multimedialnymi: Pliki dźwiękowe: *.wav, *.mid, *.mp3 (MPEG Layer-3). Pliki...