obrazek - Kurs HTML i CSS
- HTML5 / Uwierzytelnienie <audio crossorigin, img crossorigin, link crossorigin, script crossorigin, video crossorigin>
...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 uwierzytelniających takich...
- HTML5 / Leniwe ładowanie <iframe loading, img loading>
...Inteligentne ładowanie można włączyć, stosując atrybut loading="lazy" dla elementów, takich jak <img> i <iframe>. Na przykład: <img src="obrazek.jpg" loading="lazy">. Dzięki temu zasoby te będą ładowane tylko wtedy, gdy użytkownik przewinie stronę w ich pobliże. Dlaczego leniwe ładowanie? Leniwe ładowanie jest stosowane, aby przyspieszyć czas ładowania początkowej części strony, zmniejszając ilość zasobów ładowanych od razu. Pozwala to na szybsze wyświetlenie treści...
- Odsyłacze HTML / Mapa odsyłaczy <img usemap, map, area>
...poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza). Po wywołaniu tej komendy, zostanie wczytany obrazek o podanej ścieżce dostępu. Następnie będzie on podzielony na kilka pól (w sposób niewidoczny), z których każde będzie przyporządkowane oddzielnemu odsyłaczowi. Dzięki temu na tylko jednym rysunku możemy umiejscowić więcej niż jeden odnośnik. Wiele edytorów HTML posiada wbudowany generator mapy odsyłaczy, dzięki któremu można w prosty i...
- Tabele CSS / Rozplanowanie tabeli {table-layout}
...rozmiar, do którego można ścieśnić komórkę tak, aby jej zawartość mieściła się jeszcze w jej obrębie. Jeżeli w komórce znajduje się tylko obrazek lub inny element o ustalonych rozmiarach, to określa on minimalną możliwą szerokość takiej komórki. Natomiast w przypadku tekstu będzie to zwykle szerokość najdłuższego wyrazu (biorąc pod uwagę, że tekst może się zawijać do następnych linii). Maksymalna możliwa szerokość to największy rozmiar, do którego można rozszerzyć komórkę tak, aby...
- Odsyłacze HTML / Komunikatory internetowe <a "gg, skype, xmpp, icq">
...ICQ <a "icq"> <a href="icq:numer">opis</a> Status użytkownika <img src="https://web.icq.com/whitepages/online?icq=numer&img=obrazek" alt="ICQ"> gdzie jako obrazek należy podać liczbę od 1 do 25.
- Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?
...Nowy model obramowania tabeli Przykład komórka1 komórka2 komórka3 komórka4 komórka5 komórka6 Pozycjonowanie Przykład To nie jest obrazek! To nie jest obrazek! Zmiana kształtu kursora. Przykład Wskaż ten tekst myszką Kursor wczytany z pliku: Wskaż ten tekst myszką Zmiana wyglądu odsyłacza, po wskazaniu go myszką Przykład Wskaż ten tekst myszką Dodatkowe możliwości określenia wyglądu dokumentów podczas ich drukowania. I wiele innych. Dodatkowo w ciągłym...
- Tło CSS / Powtarzanie tła obrazkowego {background-repeat}
...w kierunku poziomym repeat-y - powtarzanie tła tylko w kierunku pionowym no-repeat - brak powtarzania tła (zostanie wyświetlone jako pojedynczy obrazek) space - przestrzeń pomiędzy obrazkami w tle zostanie dobrana w taki sposób, aby żadna grafika nie była przycięta (CSS 3) round - wymiary obrazka w tle zostaną dopasowane w taki sposób, aby żadna grafika nie była przycięta (CSS 3) Polecenie pozwala zdefiniować sposób powtarzania się obrazka w tle obrazkowym. Normalnie kopie obrazka są...
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg); background-attachment: fixed } Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe. Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku kiedy przewijamy całą stronę albo kiedy sam...
- Losowy element
...z innymi serwisami. Pozwala to zaoszczędzić miejsce na stronie i skrócić czas wczytywania, ponieważ za każdym razem ładowany jest tylko jeden obrazek. Aby wstawić na stronę losowy tekst lub obrazek, należy w wybranym miejscu dokumentu wkleić następujący kod: <script> Array.prototype.random = function(limit) { if (typeof limit == 'undefined' || limit < 0) limit = 1; else if (!limit) limit = this.length; for (var i = 0, source = this, target = new Array(), n = source.length; i <...
- Menu w CSS / Pionowe menu
...wygenerować znacznika <img>, który byłby nam potrzebny do stylizacji punktów. Można natomiast wstawiać grafikę w tle. Tak właśnie został osadzony obrazek punktów listy (punkt.gif). Normalnie jeżeli grafika wstawiona w tle jest mniejsza od rozmiarów elementu, zostaje powielona, tak aby zajmowała cały dostępny obszar. W naszym przypadku takie zachowanie nie jest pożądane, dlatego blokujemy to powielanie (no-repeat). Musimy również określić lewy margines wewnętrzny pozycji listy (padding-left)...