czas - Kurs HTML i CSS
Komendy HTML 4.01 / INS...źródła CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami DATETIME="data" Data i czas wprowadzenia zmiany (np. DATETIME="2002-02-01T00:00:00+01:00" - co oznacza północ 1 lutego 2002 roku, według czasu zimowego w Polsce) DIR="kierunek" Kierunek tekstu: ltr - od lewej do prawej rtl - od prawej do lewej ID="nazwa" Przypisuje nazwę elementowi (identyfikator), która nie może się powtarzać w całym dokumencie LANG="język...
- HTML5 / Artykuł <article>
...mogłoby być: <article> <h1>Mój pierwszy wpis na blogu</h1> <p>Stało się. Postanowiłem założyć własnego bloga. Nie wiem, czy będę miał czas, aby regularnie go aktualizować, ale zrobię co w mojej mocy.</p> <section> <h2>Komentarze</h2> <article> <p>Życzę powodzenia.</p> </article> <article> <p>Nareszcie. Bardzo się cieszę.</p> </article> </section> </article> Wpis na blogu jak najbardziej mógłby być opublikowany w kanale RSS serwisu. Dlatego został oznaczony...
- HTML5 / Zawijanie tekstu w formularzu <textarea wrap>
...w obszarze tekstowym formularza zwykle jest wyświetlana w postaci zawiniętej. W przeciwnym razie wpisywanie byłoby bardzo niewygodne, ponieważ cały czas trzeba by było przewijać pole na boki. Jeżeli jednak użytkownik fizycznie nie przeniesie tekstu do nowej linii poprzez wciśnięcie klawisza Enter, zawartość pola przesłana z formularzem nie będzie już zawinięta. Możemy jednak wymusić, aby wysłany tekst wyglądał dokładnie tak samo, jak na ekranie podczas jego wpisywania - nawet w miejscach, w...
Tło CSS / Rozmiary tła obrazkowego {background-size}...wpłynie na utratę jakości grafiki. Pamiętaj również, aby nie wstawiać w tle zdjęć o przesadnie dużych wymiarach, ponieważ będą wydłużały czas wczytywania strony. Możliwe jest również określenie kilku wartości rozmiary tła - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-size: rozmiary obrazka 1, rozmiary obrazka 2,... } Przykład {background-size} contain cover 75px 100px 100% 100%
- HTML5 / Wstępne ładowanie <link "preload" as>
...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 CSS, JavaScript lub obrazy, zanim zostaną one potrzebne przez stronę. Używa się do tego tagu <link rel="preload" href="resource.css" as="style"> lub innych...
- Pozycjonowanie CSS / Pozycja ustalona {position: fixed}
...elementu jest zawsze obliczana względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło. Przykład {position: fixed} Przykład
- HTML5 / Asynchroniczne ładowanie skryptów <script src async>
...zatrzymane po napotkaniu tak osadzonego skryptu i kontynuowane dalej, dopiero kiedy w całości się on załaduje. Często tylko niepotrzebnie wydłuża to czas, po którym użytkownik może już przeglądać pozostałą treść strony. Korzystniej by było od razu wyświetlić podstawową treść tekstową strony, tak aby czytelnik mógł już się zacząć z nią zaznajamiać, a w tym czasie w tle doładować wszystkie potrzebne pliki dynamicznych skryptów. W języku HTML 4.01 służył do tego atrybut logiczny defer. Oznaczony...
- Jednostki CSS / Wyrażenia matematyczne
...Opera 15, Chrome 26) calc(wyrażenie) Wyrażenie składa się z dowolnie wybranych następujących wielkości: liczby, długość, procenty, kąty, czas, częstotliwość. Ponadto może zawierać podstawowe operatory działań matematycznych: + dodawanie - odejmowanie * mnożenie / dzielenie Czasami proste określnie pojedynczej jednostki staje się niewystarczające. Przykładowo możemy chcieć, aby jakiś element miał rozmiar 50% i dodatkowo 10 pikseli. Sposobem na uzyskanie takiego rezultatu jest...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
...aktualnej strony. Kiedy używać popover? Popover jest używany, gdy chcesz pokazać dodatkową zawartość, która nie musi być widoczna przez cały czas, ale powinna być łatwo dostępna w odpowiednim momencie, np. podczas wypełniania formularza lub wyboru opcji. Można go zastosować do prezentowania wskazówek, formularzy lub złożonych opcji, które użytkownik może szybko zamknąć lub ukryć. Jak zrobić popover w HTML? Aby zrobić popover w HTML, użyj atrybutu popover na elemencie, który ma...
- Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?
Po co w ogóle stosować style CSS? Czy warto poświęcać czas na naukę poleceń, które w większości przypadków istnieją również bezpośrednio w składni HTML? Otóż ja uważam, że warto. Dlaczego? Najważniejsze zalety płynące ze stosowania stylów opiszę poniżej, a jeśli i to Cię nie przekona, radzę poszukać sobie bardziej przydatnego zajęcia (np. szydełkowanie z wykorzystaniem techniki haftu ozdobnego 😉). Style stały się już praktycznie podstawowym narzędziem formatującym. Jeśli poważnie myślisz o...